From e6954f60616faaa29d585fa3f402c489fe1e8585 Mon Sep 17 00:00:00 2001 From: Nijat Babakhanov Date: Sun, 7 Apr 2024 18:01:58 +0200 Subject: [PATCH] Header with image and CTA JDD component Summary: Ref T2818 Reviewers: FilipI Reviewed By: FilipI Subscribers: FilipI, jenkins-user Maniphest Tasks: T2818 Differential Revision: https://hub.sealcode.org/D1369 --- src/back/jdd-components/components.ts | 3 + .../header-with-image/header-with-image.css | 146 ++++++++++++++++++ .../header-with-image.jdd.tsx | 64 ++++++++ src/includes.css | 1 + 4 files changed, 214 insertions(+) create mode 100644 src/back/jdd-components/header-with-image/header-with-image.css create mode 100644 src/back/jdd-components/header-with-image/header-with-image.jdd.tsx diff --git a/src/back/jdd-components/components.ts b/src/back/jdd-components/components.ts index 3d8516d..3e67dae 100644 --- a/src/back/jdd-components/components.ts +++ b/src/back/jdd-components/components.ts @@ -6,6 +6,9 @@ export const registry = new Registry(); import { AutoscrollingImages } from "./autoscrolling-images/autoscrolling-images.jdd.js"; registry.add("autoscrolling-images", AutoscrollingImages); +import { HeaderWithImage } from "./header-with-image/header-with-image.jdd.js"; +registry.add("header-with-image", HeaderWithImage); + import { ImageDemo } from "./image-demo/image-demo.jdd.js"; registry.add("image-demo", ImageDemo); diff --git a/src/back/jdd-components/header-with-image/header-with-image.css b/src/back/jdd-components/header-with-image/header-with-image.css new file mode 100644 index 0000000..72afa25 --- /dev/null +++ b/src/back/jdd-components/header-with-image/header-with-image.css @@ -0,0 +1,146 @@ +.header-with-image { + display: flex; + justify-content: center; + + color: #0d4d69; + + * { + padding: 0; + margin: 0; + } + + .container { + max-width: 1210px; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto auto auto; + align-items: center; + gap: 10px; + } + + .container > * { + grid-column: 2/2; + } + + .img-container { + max-width: 600px; + grid-column: 1/2; + grid-row: 1/4; + } + + .container > div { + padding: 0 0 0px 24px; + } + + .container > .img-container { + padding: 0; + } + + .title-wrapper { + margin-bottom: 14px; + } + + .title { + font-size: 48px; + line-height: 48px; + } + + .img-container picture { + width: 100%; + border-radius: 10px; + } + + .content { + font-size: 20px; + line-height: 30px; + } + + .button-container { + margin-top: 14px; + } + + .button { + color: #ffffff; + background-color: #0b456b; + text-align: center; + text-decoration: none; + padding: 8px 24px 8px 24px; + border-radius: 25px; + font-size: 16px; + line-height: 30px; + } +} + +@container (width < 1100px) { + .header-with-image { + .title { + font-size: 38px; + line-height: 38px; + } + + .content { + font-size: 19px; + line-height: 28px; + } + } +} + +@container (width < 1024px) { + .header-with-image { + .container { + grid-template-columns: 1fr; + gap: 0; + } + + .container { + grid-template-columns: 1fr; + } + + .img-container { + grid-column: 1/1; + grid-row: auto; + order: 2; + } + + .container > div { + grid-column: 1/1; + padding: 0 16px; + } + + .container > .img-container { + padding: 0 16px; + } + + .button-container { + order: 3; + display: flex; + justify-content: center; + } + + .title { + font-size: 28px; + line-height: 33.52px; + } + + .title-wrapper { + margin-bottom: 5px; + } + + .content { + font-size: 18px; + line-height: 27px; + } + + .img-container { + margin-top: 16px; + } + + .button-container { + margin-top: 16px; + } + + .container > div { + max-width: 650px; + } + } +} diff --git a/src/back/jdd-components/header-with-image/header-with-image.jdd.tsx b/src/back/jdd-components/header-with-image/header-with-image.jdd.tsx new file mode 100644 index 0000000..dfa63e6 --- /dev/null +++ b/src/back/jdd-components/header-with-image/header-with-image.jdd.tsx @@ -0,0 +1,64 @@ +import { FlatTemplatable, TempstreamJSX } from "tempstream"; +import { + Component, + ComponentArguments, + ExtractStructuredComponentArgumentsValues, + JDDContext, +} from "@sealcode/jdd"; + +const component_arguments = { + title: new ComponentArguments.ShortText(), + content: new ComponentArguments.Markdown(), + image_with_alt: new ComponentArguments.Structured({ + image: new ComponentArguments.Image(), + alt: new ComponentArguments.ShortText(), + }), + button: new ComponentArguments.Structured({ + text: new ComponentArguments.ShortText().setExampleValues([""]), + link: new ComponentArguments.ShortText().setExampleValues([""]), + }), +} as const; + +export class HeaderWithImage extends Component { + getArguments() { + return component_arguments; + } + + toHTML( + { + title, + content, + image_with_alt, + button, + }: ExtractStructuredComponentArgumentsValues, + { render_markdown, render_image }: JDDContext + ): FlatTemplatable { + const buttonText = button.text.toUpperCase(); + const titleUpperCase = title.toUpperCase(); + + return ( +
+
+
+ {render_image(image_with_alt.image, { + container: { width: 600, height: 450, objectFit: "contain" }, + alt: image_with_alt.alt, + // crop: { width: 600, height: 450 }, + })} +
+
+

{titleUpperCase}

+
+
{render_markdown(content)}
+ {button.text === "" ? null : ( +
+ + {buttonText} + +
+ )} +
+
+ ); + } +} diff --git a/src/includes.css b/src/includes.css index f1031be..223f0d5 100644 --- a/src/includes.css +++ b/src/includes.css @@ -2,6 +2,7 @@ @import "../node_modules/@sealcode/sealgen/src/forms/forms.css"; @import "back/jdd-components/autoscrolling-images/autoscrolling-images.css"; +@import "back/jdd-components/header-with-image/header-with-image.css"; @import "back/jdd-components/image-demo/image-demo.css"; @import "back/jdd-components/map-with-pins/map-with-pins.css"; @import "back/jdd-components/nice-box/nice-box.css";