FaqWrapper

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

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

Примеры и код

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

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

<Container>
  <FaqWrapper>
      <TitleDescriptionBox
          title="Вопросы и ответы"
      />
      <AccordionBox title="Accordion title" isMicrodata>
          <Paragraph>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni consequuntur veniam!
          </Paragraph>
      </AccordionBox>
      <AccordionBox title="Accordion title" isMicrodata>
          <Paragraph>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni consequuntur veniam!
          </Paragraph>
      </AccordionBox>
  </FaqWrapper>
</Container>

Итоговая верстка<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>