FАQ

<ya-kit-section-layout
    palette={{settings.palette}}
    padding-top={{settings.section.paddingTop}}
    padding-bottom={{settings.section.paddingBottom}}
    h-padding-desktop={{settings.section.hPaddingDesktop}}
    h-padding-mobile={{settings.section.hPaddingTouch}}
    is-fullscreen={{settings.section.isFullscreen}} 
>
    <ya-kit-section-layout-row>
        <ya-kit-section-title align="{{settings.titleAlign}}" text="{{settings.titleText}}" /> 
    </ya-kit-section-layout-row>
    <ya-kit-section-layout-row>  
        {{#each settings.modules as |module index|}}
            <ya-kit-module module-id={{module.id}} class="item {{skinRounded 150}}">
                <ya-kit-accordion default-expanded="{{eql index 0}}">
                    <ya-kit-accordion-header>
                        <ya-kit-text as="h3" size="xl" weight="semibold">{{module.question}}</ya-kit-text>
                        <svg class="item__icon-minus" focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1" >
                            <path d="M19 13H5v-2h14z"></path>
                        </svg>
                        <svg class="item__icon-plus" focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1" >
                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"></path>
                        </svg>
                    </ya-kit-accordion-header>
                    <ya-kit-accordion-body>
                        <div class="item__answer">
                            <ya-kit-markdown  markup={{module.answer}} />
                        </div>
                    </ya-kit-accordion-body>
                </ya-kit-accordion>
            </ya-kit-module>
        {{/each}} 
    </ya-kit-section-layout-row>
</ya-kit-section-layout>

.item:not(:last-child) {
    border-bottom: 1px solid var(--ys-color-token-border-primary);
}

.item__answer {
    padding-bottom: var(--ys-spacing-200);
}

.item [data-icon="true"] {
    display: none;
}


.item .item__icon-minus,
.item .item__icon-plus {
    width: 28px;
    fill: var(--ys-color-token-border-primary);
}

.item .item__icon-plus {
    display: block;
}

.item .item__icon-minus {
    display: none; 
}

.item [aria-expanded="true"] .item__icon-plus {
    display: none;
}

.item [aria-expanded="true"] .item__icon-minus {
    display: block;
}

 1
 2{
 3  "title": "",
 4  "type": "object",
 5  "properties": {
 6    "palette": {
 7      "$ref": "#/definitions/Palette",
 8      "title": "Палитра цветов"
 9    },
10    "titleText": {
11      "type": "string",
12      "title": "Заголовок"
13    },
14    "titleAlign": {
15      "$ref": "#/definitions/SectionTitleAlign",
16      "title": "Расположение заголовка"
17    },
18    "section": {
19      "type": "object",
20      "title": "Размеры секции",
21      "required": [
22        "isFullscreen",
23        "paddingTop",
24        "paddingBottom"
25      ],
26      "properties": {
27        "isFullscreen": {
28          "$ref": "#/definitions/OptionalFlag",
29          "title": "Растянуть секцию на весь экран"
30        },
31        "hPaddingDesktop": {
32          "$ref": "#/definitions/SectionHPadding",
33          "title": "Отступ по краям на десктопе"
34        },
35        "hPaddingMobile": {
36          "$ref": "#/definitions/SectionHPaddingTouch",
37          "title": "Отступ по краям на телефоне"
38        },
39        "paddingTop": {
40          "$ref": "#/definitions/SectionVPadding",
41          "title": "Отступ над секцией"
42        },
43        "paddingBottom": {
44          "$ref": "#/definitions/SectionVPadding",
45          "title": "Отступ под секцией"
46        }
47      }
48    },
49    "modules": {
50      "type": "array",
51      "items": {
52        "type": "object",
53        "properties": {
54          "question": {
55            "type": "string",
56            "title": "Вопрос",
57            "default": ""
58          },
59          "answer": {
60            "$ref": "#/definitions/MarkdownContent",
61            "title": "Ответ",
62            "default": ""
63          }
64        },
65        "required": [
66          "question",
67          "answer"
68        ]
69      },
70      "title": "Модуль"
71    }
72  },
73  "required": [
74    "titleAlign",
75    "titleText",
76    "section",
77    "modules"
78  ]
79}
80