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

@@ -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);
 

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;
+		}
+	}
+}

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<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	toHTML(
+		{
+			title,
+			content,
+			image_with_alt,
+			button,
+		}: ExtractStructuredComponentArgumentsValues<typeof component_arguments>,
+		{ render_markdown, render_image }: JDDContext
+	): FlatTemplatable {
+		const buttonText = button.text.toUpperCase();
+		const titleUpperCase = title.toUpperCase();
+
+		return (
+			<div class="header-with-image">
+				<div class="container">
+					<div class="img-container">
+						{render_image(image_with_alt.image, {
+							container: { width: 600, height: 450, objectFit: "contain" },
+							alt: image_with_alt.alt,
+							// crop: { width: 600, height: 450 },
+						})}
+					</div>
+					<div class="title-wrapper">
+						<h2 class="title">{titleUpperCase}</h2>
+					</div>
+					<div class="content">{render_markdown(content)}</div>
+					{button.text === "" ? null : (
+						<div class="button-container">
+							<a class="button" href={button.link}>
+								{buttonText}
+							</a>
+						</div>
+					)}
+				</div>
+			</div>
+		);
+	}
+}

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";