text-image-block component

Summary: Ref T2930

Reviewers: #testers

Subscribers: kuba-orlik, jenkins-user

Maniphest Tasks: T2930

Differential Revision: https://hub.sealcode.org/D1488

src/back/jdd-components/tekst/tekst.jdd.tsx

@@ -37,7 +37,7 @@ export class Tekst extends Component<typeof component_arguments> {
 	}
 
 	getHeadings(
-		context: JDDContext,
+		_context: JDDContext,
 		args: ExtractStructuredComponentArgumentsParsed<{
 			readonly content: ComponentArguments.Markdown;
 		}>

src/back/jdd-components/text-image-block/text-image-block.css

@@ -0,0 +1,175 @@
+:root {
+	--default-font-color: #222;
+
+	--secondary: #55a4b4;
+	--secondary-light-01: #a4d2db;
+	--secondary-dark-01: #5294a1;
+	--secondary-dark-02: #3c7c88;
+
+	--alto-gray: #e0e0e0;
+	--dove-gray: #6f6e6e;
+	--faint-gray: #ededed;
+
+	--main: #6d4477;
+
+	--main-dark-01: #62386c;
+	--main-dark-02: #56335d;
+	--main-dark-03: #4a2a52;
+	--main-dark-04: #55335d;
+
+	--main-light-01: #744d7e;
+	--main-light-02: #8b7192;
+	--main-light-03: #a686af;
+	--main-bg-text: #fff;
+
+	--main-bg-text-secondary: hsl(286.4, 15.5%, 86.2%);
+	--main-dark-02-bg-secondary: #b5a2ba;
+
+	--wild-sand: #f6f6f6;
+	--london-hue: #beadc3;
+
+	--wild-sand-bg-text: #000;
+
+	--white-bg-text: #6f6e6e;
+	--white-bg-text-secondary: #000;
+	--white-bg-text-gray: #565656;
+	--white-bg-link: #404f6e;
+	--white-on-darker-bg-text: #fff;
+
+	/*px / 24 = N rem*/
+	--container-width: 50rem;
+
+	/* Fonts */
+	--font-sans-serif: "Inter UI", sans-serif;
+}
+
+.tib {
+	background-color: var(--wild-sand);
+	overflow: hidden;
+}
+
+.tib > * {
+	box-sizing: border-box;
+}
+
+.tib h2 {
+	font-family: var(--font-sans-serif);
+	color: var(--secondary);
+	font-size: 1.5rem;
+	line-height: 2rem;
+	margin: 0 0 1rem;
+	font-weight: 800;
+}
+
+.tib h3 {
+	font-family: var(--font-sans-serif);
+	line-height: 1rem;
+	font-size: 0.8rem;
+	margin: 0 0 1rem;
+}
+
+.tib p {
+	color: var(--dove-gray);
+	font-family: var(--font-sans-serif);
+}
+
+.tib picture {
+	width: 100%;
+	margin: 1rem 1rem 0 1rem;
+}
+
+.tib hr {
+	height: 1px;
+	background-color: #dbdbdb;
+	max-width: var(--container-width);
+	width: 100%;
+	margin: 0 auto;
+	border: none;
+}
+
+.tib__body {
+	margin: 0 auto;
+	padding: 0 0 1rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 1rem;
+}
+.tib__body--image-on-right {
+	flex-direction: row;
+}
+
+.tib__body--image-on-left {
+	flex-direction: row-reverse;
+}
+.tib__body-left,
+.tib__body-right {
+	padding: 1rem 1rem 0 1rem;
+}
+
+.tib__body-left {
+	width: 350px;
+}
+
+.tib__body-right {
+	display: flex;
+	width: 640px;
+	aspect-ratio: initial;
+}
+
+@container (min-width: 1560px) and (max-width: 2000px) {
+	.tib__body {
+		gap: 1.5rem;
+	}
+}
+
+@container (max-width: 1559px) {
+	.tib__body {
+		gap: 1rem;
+	}
+}
+
+@container (max-width: 930px) {
+	.tib__body-right {
+		width: 350px;
+		flex-grow: 1;
+		aspect-ratio: initial;
+	}
+}
+
+@container (max-width: 800px) {
+	.tib__body--image-on-right {
+		flex-direction: column;
+	}
+	.tib__body--image-on-left {
+		flex-direction: column-reverse;
+	}
+	.tib__body-right {
+		width: 350px;
+	}
+	.tib__body-left {
+		width: 350px;
+	}
+	.tib picture {
+		margin: 0;
+	}
+}
+@container (max-width: 620px) {
+}
+
+@container (max-width: 579px) {
+}
+
+@container (max-width: 500px) {
+	.tib__body-right {
+		min-width: unset;
+		width: 100%;
+	}
+	.tib__body-left {
+		min-width: unset;
+		width: 100%;
+	}
+	.tib__body {
+		padding: 1rem;
+	}
+}

src/back/jdd-components/text-image-block/text-image-block.jdd.tsx

@@ -0,0 +1,52 @@
+import type { FlatTemplatable } from "tempstream";
+import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+
+const component_arguments = {
+	title: new ComponentArguments.ShortText(),
+	small_title: new ComponentArguments.ShortText(),
+	description: new ComponentArguments.Markdown(),
+	img_side: new ComponentArguments.Enum(["right", "left"]),
+	image_path: new ComponentArguments.Structured({
+		image_path: new ComponentArguments.Image(),
+		alt: new ComponentArguments.ShortText(),
+	}),
+} as const;
+
+export class TextImageBlock extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	toHTML({
+		args: { title, small_title, description, image_path, img_side },
+		jdd_context: { render_markdown, render_image, language },
+	}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
+		return (
+			<section class="tib">
+				<div class={`tib__body tib__body--image-on-${img_side}`}>
+					<article class="tib__body-left">
+						<h2>{title}</h2>
+						<h3>{small_title}</h3>
+						<p>{render_markdown(language, description)}</p>
+					</article>
+					<div class="tib__body-right">
+						{render_image(image_path.image_path, {
+							container: {
+								width: 640,
+								height: 360,
+								objectFit: "cover",
+							},
+							crop: {
+								width: 640,
+								height: 360,
+							},
+							alt: image_path.alt,
+						})}
+					</div>
+				</div>
+			</section>
+		);
+	}
+}