FaqWrapper

Компонент обертка для микроразметки вопросов и ответов, которая добавляет тег <div /> c атрибутами itemScope и itemType="http://schema.org/FAQPage"

import { FaqWrapper } from '@megafon/ui-shared';

Пример с использованием конструктора

FaqWrapper должен быть корневым компонентом внутри Container, чтобы не пропали автоматические отступы между компонентами конструктора, в данном примере между TitleDescriptionBox и AccordionBox

Вопросы и ответы

Accordion title

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni consequuntur veniam!

Accordion title

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni consequuntur veniam!

Итоговая верстка
<div class="mfui-container mfui-container_bg-color_default">
<div class="mfui-content-area mfui-content-area_background-color_transparent">
<div
class="mfui-content-area__inner mfui-content-area__inner_background-color_transparent"
>
<div itemscope="" itemtype="http://schema.org/FAQPage">
<div class="mfui-title-description-box">
<div class="mfui-grid">
<div class="mfui-grid__container mfui-grid__container_multi-row">
<div
class="mfui-grid-column mfui-grid-column_all_12 mfui-grid-column_wide_8 mfui-grid-column_desktop_10 mfui-grid-column_all-order_0 mfui-grid-column_wide-order_0 mfui-grid-column_desktop-order_0 mfui-grid-column_tablet-order_0 mfui-grid-column_mobile-order_0 mfui-grid__column"
>
<h2
class="mfui-header mfui-header_color_inherit mfui-header_level_h2 mfui-header_h-align_inherit mfui-title-description-box__item mfui-title-description-box__item_header"
>
Вопросы и ответы
</h2>
</div>
</div>
</div>
</div>
<div class="mfui-accordion-box">
<div class="mfui-grid">
<div
class="mfui-grid__container mfui-grid__container_multi-row mfui-grid__container_h-align_left"
>
<div
class="mfui-grid-column mfui-grid-column_all_12 mfui-grid-column_wide_8 mfui-grid-column_desktop_10 mfui-grid-column_tablet_12 mfui-grid-column_mobile_12 mfui-grid-column_all-order_0 mfui-grid-column_wide-order_0 mfui-grid-column_desktop-order_0 mfui-grid-column_tablet-order_0 mfui-grid-column_mobile-order_0 mfui-grid__column"
>
<div
class="mfui-accordion"
itemscope=""
itemprop="mainEntity"
itemtype="https://schema.org/Question"
>
<div
class="mfui-accordion__title-wrap"
tabindex="0"
role="button"
itemprop="name"
>
<h5
class="mfui-header mfui-header_color_default mfui-header_level_h5 mfui-header_h-align_inherit mfui-header_space_wide"
>
Accordion title
</h5>
<div class="mfui-accordion__icon-box">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
class="mfui-accordion__icon"
>
<path
d="M11 14h10l-5 6z"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div
class="mfui-accordion__content"
style="overflow: hidden; height: 0px"
>
<div class="mfui-accordion__content-inner">
<div
itemscope=""
itemprop="acceptedAnswer"
itemtype="https://schema.org/Answer"
>
<div itemprop="text">
<p
class="mfui-paragraph mfui-paragraph_color_default mfui-paragraph_space_wide mfui-paragraph_has-margin"
>
Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Odit dolore quam deserunt magni consequuntur
veniam!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mfui-accordion-box">
<div class="mfui-grid">
<div
class="mfui-grid__container mfui-grid__container_multi-row mfui-grid__container_h-align_left"
>
<div
class="mfui-grid-column mfui-grid-column_all_12 mfui-grid-column_wide_8 mfui-grid-column_desktop_10 mfui-grid-column_tablet_12 mfui-grid-column_mobile_12 mfui-grid-column_all-order_0 mfui-grid-column_wide-order_0 mfui-grid-column_desktop-order_0 mfui-grid-column_tablet-order_0 mfui-grid-column_mobile-order_0 mfui-grid__column"
>
<div
class="mfui-accordion"
itemscope=""
itemprop="mainEntity"
itemtype="https://schema.org/Question"
>
<div
class="mfui-accordion__title-wrap"
tabindex="0"
role="button"
itemprop="name"
>
<h5
class="mfui-header mfui-header_color_default mfui-header_level_h5 mfui-header_h-align_inherit mfui-header_space_wide"
>
Accordion title
</h5>
<div class="mfui-accordion__icon-box">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
class="mfui-accordion__icon"
>
<path
d="M11 14h10l-5 6z"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div
class="mfui-accordion__content"
style="overflow: hidden; height: 0px"
>
<div class="mfui-accordion__content-inner">
<div
itemscope=""
itemprop="acceptedAnswer"
itemtype="https://schema.org/Answer"
>
<div itemprop="text">
<p
class="mfui-paragraph mfui-paragraph_color_default mfui-paragraph_space_wide mfui-paragraph_has-margin"
>
Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Odit dolore quam deserunt magni consequuntur
veniam!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>