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
This commit is contained in:
Nijat Babakhanov
parent
711b52562f
commit
2c9e682d44
3099
package-lock.json
generated
3099
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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);
|
||||
|
||||
|
||||
126
src/back/jdd-components/faq-component/faq-component.css
Normal file
126
src/back/jdd-components/faq-component/faq-component.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
76
src/back/jdd-components/faq-component/faq-component.jdd.tsx
Normal file
76
src/back/jdd-components/faq-component/faq-component.jdd.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user