FAQ component (accordion)

Summary: Ref T2785

Reviewers: FilipI

Reviewed By: FilipI

Subscribers: kuba-orlik, FilipI, jenkins-user

Maniphest Tasks: T2785

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

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 { FaqComponent } from "./faq-component/faq-component.jdd.js";
+registry.add("faq-component", FaqComponent);
+
 import { HeaderWithImage } from "./header-with-image/header-with-image.jdd.js";
 registry.add("header-with-image", HeaderWithImage);
 

src/back/jdd-components/faq-component/faq-component.css

@@ -0,0 +1,126 @@
+.faq-component {
+	display: flex;
+	justify-content: center;
+
+	.container {
+		max-width: 1224px;
+		display: grid;
+		gap: 16px;
+	}
+
+	.title-container {
+		text-align: center;
+		display: grid;
+		gap: 16px;
+	}
+
+	.title {
+		font-size: 32px;
+		color: #0d4d69;
+		line-height: 38.3px;
+	}
+
+	.title-container .content p {
+		display: inline;
+		font-size: 16px;
+		color: #0d4d69;
+		line-height: 24px;
+	}
+
+	.title-container strong {
+		white-space: nowrap;
+		color: #0d4d69;
+		font-weight: bold;
+	}
+
+	.faq-container {
+		display: grid;
+		gap: 8px;
+	}
+
+	.question-container {
+		display: grid;
+		background-color: #cadae4;
+		border-radius: 10px;
+		padding: 0 16px;
+		/* padding: 16px; */
+		gap: 16px;
+	}
+
+	.question {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		font-size: 16px;
+		font-weight: bold;
+		cursor: pointer;
+		color: #0d4d69;
+		align-items: center;
+		padding: 16px 0;
+		line-height: 24px;
+	}
+
+	.question::after {
+		content: "\276C";
+		display: inline-block;
+		margin-left: 5px;
+		transform: rotate(-90deg);
+		transition: transform 0.3s ease;
+	}
+
+	.question-container[open] > .question::after {
+		transform: rotate(90deg);
+	}
+
+	.answer {
+		font-size: 16px;
+		color: #0d4d69;
+		line-height: 24px;
+	}
+
+	.answer p {
+		margin-top: 0;
+		white-space: pre-line;
+	}
+
+	.button-container {
+		display: flex;
+		justify-content: center;
+	}
+
+	.button {
+		text-align: center;
+		background-color: #0d4d69;
+		color: #ffffff;
+		font-size: 16px;
+		text-decoration: none;
+		padding: 8px 24px 8px 24px;
+		border-radius: 25px;
+		line-height: 24px;
+	}
+}
+
+@container (width < 500px) {
+	.faq-component {
+		.title {
+			font-size: 28px;
+			line-height: 33.52px;
+		}
+
+		.question {
+			font-size: 14px;
+			line-height: 21px;
+			padding: 10px 0;
+		}
+		.answer p {
+			font-size: 14px;
+			line-height: 21px;
+		}
+		.container {
+			gap: 24px;
+		}
+		.question-container {
+			gap: 8px;
+		}
+	}
+}

src/back/jdd-components/faq-component/faq-component.jdd.tsx

@@ -0,0 +1,76 @@
+import type { FlatTemplatable } from "tempstream";
+import { TempstreamJSX } from "tempstream";
+import type {
+	ExtractStructuredComponentArgumentsValues,
+	JDDContext,
+} from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+
+const component_arguments = {
+	title: new ComponentArguments.ShortText(),
+	content: new ComponentArguments.Structured({
+		text: new ComponentArguments.Markdown(),
+		number: new ComponentArguments.ShortText().setExampleValues(["000-000-000"]),
+	}),
+	faq: new ComponentArguments.List(
+		new ComponentArguments.Structured({
+			question: new ComponentArguments.ShortText(),
+			answer: new ComponentArguments.Markdown(),
+		})
+	),
+	button: new ComponentArguments.Structured({
+		buttonText: new ComponentArguments.ShortText().setExampleValues([""]),
+		buttonLink: new ComponentArguments.ShortText().setExampleValues([""]),
+	}),
+} as const;
+
+export class FaqComponent extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	toHTML(
+		{
+			title,
+			content,
+			faq,
+			button,
+		}: ExtractStructuredComponentArgumentsValues<typeof component_arguments>,
+		{ render_markdown }: JDDContext
+	): FlatTemplatable {
+		const buttonText = button.buttonText.toUpperCase();
+
+		return (
+			<div class="faq-component">
+				<div class="container">
+					<div class="title-container">
+						<div class="title">{title} </div>
+						<div class="content">
+							{render_markdown(content.text)}{" "}
+							<strong>{content.number}</strong>
+						</div>
+					</div>
+					<div>
+						<div class="faq-container">
+							{faq.map((element) => (
+								<details class="question-container">
+									<summary class="question">{element.question}</summary>
+									<div class="answer">
+										<p>{element.answer}</p>
+									</div>
+								</details>
+							))}
+						</div>
+					</div>
+					<div class="button-container">
+						{button.buttonText === "" ? null : (
+							<a class="button" href={button.buttonLink}>
+								{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/faq-component/faq-component.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";