@designcrowd/library.brand-page 6.2.3-ast-faq → 6.2.3

package/src/brand-page/components/faq-section/FaqSection.vue

@@ -1,299 +0,0 @@
-<template>
-  <section data-component="faq-section">
-    <div
-      class="tw-relative tw-px-6"
-      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
-      style="container-type: inline-size"
-    >
-      <div
-        class="c_faq"
-        :class="[`c_faq--${layout}`, { 'c_faq--stacked': viewModel.isStacked }]"
-      >
-        <SectionHeading
-          class="c_faq__heading"
-          :title="viewModel.title"
-          :title-style="viewModel.titleStyle"
-          :description="viewModel.description"
-          :description-style="viewModel.descriptionStyle"
-          :slug="context.brandPageSlug"
-        />
-
-        <!-- No items (D1): no list at all, so the heading gap doesn't linger. -->
-        <div v-if="hasItems && isAccordion" class="c_faq__items">
-          <div
-            v-for="item in viewModel.items"
-            :key="item.id"
-            class="c_faq__item"
-            :style="itemStyle(item)"
-            :data-test-faq-item="item.id"
-          >
-            <h3 class="tw-m-0">
-              <button
-                type="button"
-                class="c_faq__question"
-                :aria-expanded="isOpen(item.id)"
-                :aria-controls="answerId(item.id)"
-                data-test-faq-question
-                @click="onQuestionClick($event, item.id)"
-              >
-                <TextWrapper
-                  :text-style="item.questionStyle"
-                  :text="renderText(item.question)"
-                  :slug="context.brandPageSlug"
-                  element="span"
-                />
-                <Icon
-                  class="c_faq__toggle"
-                  :name="isOpen(item.id) ? 'minus' : 'plus-light'"
-                  size="sm"
-                />
-              </button>
-            </h3>
-            <div
-              v-show="isOpen(item.id)"
-              :id="answerId(item.id)"
-              class="c_faq__answer"
-              data-test-faq-answer
-            >
-              <TextWrapper
-                :text-style="item.answerStyle"
-                :text="renderText(item.answer)"
-                :slug="context.brandPageSlug"
-                element="div"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div v-else-if="hasItems" class="c_faq__grid">
-          <div
-            v-for="item in viewModel.items"
-            :key="item.id"
-            :data-test-faq-item="item.id"
-          >
-            <TextWrapper
-              :text-style="item.questionStyle"
-              :text="renderText(item.question)"
-              :slug="context.brandPageSlug"
-              element="h3"
-            />
-            <TextWrapper
-              class="tw-mt-2"
-              :text-style="item.answerStyle"
-              :text="renderText(item.answer)"
-              :slug="context.brandPageSlug"
-              element="div"
-              data-test-faq-answer
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup lang="ts">
-import type { PropType } from 'vue';
-import { computed, ref, watch } from 'vue';
-import { Icon } from '@designcrowd/fe-shared-lib';
-import TextWrapper from '../text-wrapper/TextWrapper.vue';
-import SectionHeading from '../section-heading/SectionHeading.vue';
-import type { FaqSectionViewModel } from '@brand-page/view-models';
-import type {
-  BrandPageContext,
-  FaqItem,
-  RichTextValue,
-} from '@brand-page/models';
-import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
-import {
-  getRenderText,
-  contentPaddingStyle as toContentPaddingStyle,
-} from '@brand-page/utils';
-
-const props = defineProps({
-  viewModel: {
-    type: Object as PropType<FaqSectionViewModel>,
-    required: true,
-  },
-  context: {
-    type: Object as PropType<BrandPageContext>,
-    required: true,
-  },
-  containerClientWidth: {
-    type: Number as PropType<number | undefined>,
-    required: false,
-    default: undefined,
-  },
-  containerClientHeight: {
-    type: Number as PropType<number | undefined>,
-    required: false,
-    default: undefined,
-  },
-});
-
-const contentPaddingStyle = computed(() =>
-  toContentPaddingStyle(props.viewModel),
-);
-
-const layout = computed((): string => {
-  switch (props.viewModel.displayStyle) {
-    case FAQ_DISPLAY_STYLES.split:
-      return 'split';
-    case FAQ_DISPLAY_STYLES.grid:
-      return 'grid';
-    default:
-      return 'centered';
-  }
-});
-
-const isAccordion = computed((): boolean => layout.value !== 'grid');
-
-const hasItems = computed((): boolean => props.viewModel.items.length > 0);
-
-// The row divider and +/- icon follow the item's question colour.
-const itemStyle = (item: FaqItem): { color?: string } => ({
-  color: item.questionStyle?.color,
-});
-
-// `null` = the visitor closed every item. Seeded from data (not `mounted`) so
-// SSR and hydration render the same open item.
-const openItemId = ref<string | null>(
-  props.viewModel.activeItemId ?? props.viewModel.items[0]?.id ?? null,
-);
-
-const isOpen = (itemId: string): boolean => openItemId.value === itemId;
-
-const toggle = (itemId: string): void => {
-  openItemId.value = isOpen(itemId) ? null : itemId;
-};
-
-// A link inside a rich-text question follows the link; only the rest of the row toggles.
-const onQuestionClick = (event: MouseEvent, itemId: string): void => {
-  if ((event.target as Element | null)?.closest?.('a')) {
-    return;
-  }
-
-  toggle(itemId);
-};
-
-const answerId = (itemId: string): string =>
-  `faq-answer-${props.viewModel.id}-${itemId}`;
-
-// Plain-text items keep their escaped newlines; a rich-text document renders as-is.
-const renderText = (text: RichTextValue): RichTextValue =>
-  typeof text === 'string' || text == null ? getRenderText(text ?? '') : text;
-
-// Maker only: follow the item the settings panel opened.
-watch(
-  () => props.viewModel.activeItemId,
-  (activeItemId) => {
-    if (activeItemId) {
-      openItemId.value = activeItemId;
-    }
-  },
-);
-
-// The open item was deleted → open the first remaining one.
-watch(
-  () => props.viewModel.items.map((item) => item.id),
-  (itemIds) => {
-    if (openItemId.value !== null && !itemIds.includes(openItemId.value)) {
-      openItemId.value = itemIds[0] ?? null;
-    }
-  },
-);
-</script>
-
-<style scoped>
-/* Spacing follows the Figma redlines ("Website — Features & Widgets", FAQ): 32 heading→items,
-   16 above and below each question, dividers only between items. */
-.c_faq {
-  margin: 0 auto;
-  max-width: var(--brandsite-max-width);
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}
-
-.c_faq--centered .c_faq__items {
-  width: 100%;
-  max-width: 48rem;
-  margin: 0 auto;
-}
-
-.c_faq__item {
-  padding: 16px 0;
-}
-
-.c_faq__item + .c_faq__item {
-  /* ADR 0009: color-mix without a fallback is accepted. */
-  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
-}
-
-.c_faq__question {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  width: 100%;
-  padding: 0;
-  border: none;
-  background: none;
-  /* Buttons don't inherit font by default; the question's em sizes need the h3's. */
-  font: inherit;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.c_faq__toggle {
-  flex: 0 0 auto;
-  /* Stays on the right when the question is empty and renders nothing (D9). */
-  margin-left: auto;
-}
-
-/* A long unbroken word wraps instead of pushing the +/- out of the row. */
-.c_faq__question > [data-component='text-wrapper'] {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.c_faq__answer {
-  margin-top: 8px;
-}
-
-.c_faq__grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 32px;
-}
-
-@container (min-width: 640px) {
-  .c_faq--split:not(.c_faq--stacked) {
-    flex-direction: row;
-    align-items: flex-start;
-  }
-
-  /* 1/3 heading · 2/3 items, either side of the 32px gap. */
-  .c_faq--split:not(.c_faq--stacked) .c_faq__heading {
-    flex: 1 1 0;
-    min-width: 0;
-  }
-
-  .c_faq--split:not(.c_faq--stacked) .c_faq__items {
-    flex: 2 1 0;
-    min-width: 0;
-  }
-}
-
-@container (max-width: 640px) {
-  .c_faq__grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* brand.page / brand.contact always stack split and grid. */
-.c_faq--stacked .c_faq__grid {
-  grid-template-columns: 1fr;
-}
-</style>

package/src/brand-page/components/section-heading/SectionHeading.vue

@@ -1,52 +0,0 @@
-<template>
-  <div v-if="hasTitle || hasDescription" data-component="section-heading">
-    <TextWrapper
-      v-if="hasTitle"
-      :text-style="titleStyle"
-      :text="title"
-      :slug="slug"
-      element="h2"
-    />
-    <TextWrapper
-      v-if="hasDescription"
-      class="tw-mt-4"
-      :text-style="descriptionStyle"
-      :text="renderDescription"
-      :slug="slug"
-      element="div"
-    />
-  </div>
-</template>
-<script setup lang="ts">
-import { computed } from 'vue';
-import TextWrapper from '../text-wrapper/TextWrapper.vue';
-import type { RichTextValue, TextStyleDeclaration } from '@brand-page/models';
-import { escapeContentText, getRenderText } from '@brand-page/utils';
-
-// Section title (the h2 — ADR 0004) + optional description, shared by the
-// item-list sections (see content-sections.md, near-term requirement).
-const props = withDefaults(
-  defineProps<{
-    title?: RichTextValue;
-    titleStyle?: TextStyleDeclaration;
-    description?: RichTextValue;
-    descriptionStyle?: TextStyleDeclaration;
-    slug?: string;
-  }>(),
-  {
-    title: undefined,
-    titleStyle: undefined,
-    description: undefined,
-    descriptionStyle: undefined,
-    slug: undefined,
-  },
-);
-
-const hasTitle = computed((): boolean => !!escapeContentText(props.title));
-const hasDescription = computed(
-  (): boolean => !!escapeContentText(props.description),
-);
-const renderDescription = computed(
-  (): RichTextValue => getRenderText(props.description as string),
-);
-</script>

package/src/brand-page/components/text-wrapper/TextWrapper.test.ts

@@ -1,33 +0,0 @@
-import { mount } from '@vue/test-utils';
-import TextWrapper from './TextWrapper.vue';
-
-const boldDoc = {
-  type: 'doc',
-  content: [
-    {
-      type: 'paragraph',
-      content: [{ type: 'text', text: 'Hello', marks: [{ type: 'bold' }] }],
-    },
-  ],
-};
-
-const textStyle = { fontSize: '1.5em', color: 'rgb(255, 0, 0)' };
-
-const container = (wrapper: ReturnType<typeof mount>) =>
-  wrapper.find('.empty-para').element as HTMLElement;
-
-describe('TextWrapper', () => {
-  test('rich text ignores the text style by default — its marks own the look', () => {
-    const wrapper = mount(TextWrapper, { props: { text: boldDoc, textStyle } });
-
-    expect(wrapper.find('strong').text()).toBe('Hello');
-    expect(container(wrapper).style.fontSize).toBe('');
-    expect(container(wrapper).style.color).toBe('');
-  });
-
-  test('plain text is styled by the text style', () => {
-    const wrapper = mount(TextWrapper, { props: { text: 'Plain', textStyle } });
-
-    expect(container(wrapper).style.fontSize).toBe('1.5em');
-  });
-});

package/src/brand-page-maker/components/rich-text-editor/RichTextEditor.test.ts

@@ -1,165 +0,0 @@
-import { vi } from 'vitest';
-import { flushPromises, mount } from '@vue/test-utils';
-import { createPinia, setActivePinia } from 'pinia';
-import RichTextEditor from './RichTextEditor.vue';
-import { useUiContentSettingsStore } from '@shared/content-settings/store';
-
-// The toolbar capitalises translated role names at setup; tests carry no bundles.
-vi.mock('@src/composables/useTranslate', async (importOriginal) => ({
-  ...(await importOriginal<Record<string, unknown>>()),
-  styleSettingsTr: (key: string) => key,
-  commonTr: (key: string) => key,
-}));
-
-const doc = {
-  type: 'doc',
-  content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Hi' }] }],
-};
-
-const itemStyleTarget = {
-  itemsField: 'items',
-  index: 1,
-  styleField: 'questionStyle',
-};
-
-const mountEditor = (props: Record<string, unknown> = {}) =>
-  mount(RichTextEditor, {
-    props: {
-      id: 'faq-1-question',
-      name: 'question',
-      rawId: 'faq-1',
-      modelValue: doc,
-      ...props,
-    } as any,
-    global: {
-      directives: { clickOutside: {} },
-      stubs: { FontPicker: true },
-    },
-  });
-
-const editorOf = (wrapper: ReturnType<typeof mountEditor>) =>
-  (wrapper.find('.ProseMirror').element as any).editor;
-
-describe('RichTextEditor', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  test('an item editor has the full section-title toolbar', () => {
-    const tags = mountEditor({ itemStyleTarget })
-      .find('.style-editor')
-      .findAll('[data-test-tag]')
-      .map((el) => el.attributes('data-test-tag'));
-
-    expect(tags).toEqual(
-      expect.arrayContaining([
-        'text-style-dropdown',
-        'font-style-dropdown',
-        'font-size-stepper',
-        'text-color-picker',
-        'bold-toolbar',
-        'link-toolbar',
-      ]),
-    );
-  });
-
-  test.each([
-    ['an item editor', { itemStyleTarget }, 'updateListItemTextStyles'],
-    ['a section field', {}, 'updateTextStyles'],
-  ])(
-    '%s writes its toolbar styles through %s',
-    async (_label, props, expectedAction) => {
-      const store = useUiContentSettingsStore();
-      const spies = {
-        updateListItemTextStyles: vi.spyOn(store, 'updateListItemTextStyles'),
-        updateTextStyles: vi.spyOn(store, 'updateTextStyles'),
-      };
-      const wrapper = mountEditor(props);
-
-      await flushPromises();
-      Object.values(spies).forEach((spy) => spy.mockClear());
-      await wrapper.find('[data-test-tag="bold-toolbar"]').trigger('click');
-
-      Object.entries(spies).forEach(([action, spy]) =>
-        expect(spy).toHaveBeenCalledTimes(action === expectedAction ? 1 : 0),
-      );
-
-      if (expectedAction === 'updateListItemTextStyles') {
-        expect(spies.updateListItemTextStyles).toHaveBeenCalledWith(
-          expect.objectContaining({
-            id: 'faq-1',
-            target: itemStyleTarget,
-            value: expect.objectContaining({ fontWeight: 'bold' }),
-          }),
-        );
-      }
-    },
-  );
-
-  test('picking a text style on an item editor links that item, not the section', async () => {
-    const store = useUiContentSettingsStore();
-    const updateListItemTextStyles = vi.spyOn(
-      store,
-      'updateListItemTextStyles',
-    );
-    const updateTextStyles = vi.spyOn(store, 'updateTextStyles');
-    const wrapper = mountEditor({ itemStyleTarget });
-
-    await flushPromises();
-    updateTextStyles.mockClear();
-
-    const headings = wrapper
-      .findAll('.drop-down-item')
-      .find((el) => el.text().toLowerCase().includes('headings'));
-
-    await headings!.trigger('click');
-
-    expect(updateListItemTextStyles).toHaveBeenCalledWith(
-      expect.objectContaining({
-        target: itemStyleTarget,
-        value: expect.objectContaining({ textStyleType: 'headings' }),
-      }),
-    );
-    expect(updateTextStyles).not.toHaveBeenCalled();
-  });
-
-  test("a linked item editor's mount-time style sync lands on the item, as a hydration write", async () => {
-    const store = useUiContentSettingsStore();
-    const updateListItemTextStyles = vi.spyOn(
-      store,
-      'updateListItemTextStyles',
-    );
-    const updateTextStyles = vi.spyOn(store, 'updateTextStyles');
-
-    mountEditor({ itemStyleTarget, styles: { textStyleType: 'headings' } });
-    await flushPromises();
-
-    expect(updateListItemTextStyles).toHaveBeenCalledWith(
-      expect.objectContaining({
-        target: itemStyleTarget,
-        isHydrationWrite: true,
-      }),
-    );
-    expect(updateTextStyles).not.toHaveBeenCalled();
-  });
-
-  // The toolbar has taken focus by the time its command runs; tagging that
-  // write as hydration would fold it into the previous undo entry.
-  test('a toolbar command on a selection emits a user write, not a hydration write', async () => {
-    const wrapper = mountEditor();
-
-    await flushPromises();
-
-    const editor = editorOf(wrapper);
-
-    editor.commands.selectAll();
-    editor.commands.blur();
-    await wrapper.find('[data-test-tag="bold-toolbar"]').trigger('click');
-
-    const emits = wrapper.emitted('update:modelValue') ?? [];
-    const [value, meta] = emits[emits.length - 1] as [any, any];
-
-    expect(JSON.stringify(value)).toContain('"bold"');
-    expect(meta.isHydrationWrite).toBe(false);
-  });
-});

package/src/brand-page-maker/constants/faq-section-config.test.ts

@@ -1,151 +0,0 @@
-import { vi } from 'vitest';
-import { createPinia, setActivePinia } from 'pinia';
-import {
-  BRAND_PAGE_TYPES,
-  FAQ_DISPLAY_STYLES,
-  FAQ_MAX_ITEMS,
-} from '@brand-page';
-import { FAQ_SECTION_SETTINGS_CONFIG } from './config-settings-constant';
-import { createInitialFaqSectionContent } from '../models/content-settings';
-import { faqDisplayStyleConvertor } from '../convertors/faq-display-style.convertor';
-import { getEnabledContentSettingsConfigs } from '../stores/brandpage-maker/brandpage-maker-store-utils';
-import { useBrandPageMakerStore } from '../stores/brandpage-maker/brandpage-maker-store';
-import { RTE_ITEM_FIELD_PAIRS } from '@shared/color-strategies/rte-field-pairs';
-
-// Tests load no translation bundles; return the key so defaults are assertable.
-vi.mock('@src/composables/useTranslate', async (importOriginal) => ({
-  ...(await importOriginal<Record<string, unknown>>()),
-  contentSettingsTr: (key: string) => key,
-}));
-
-describe('FAQ section config', () => {
-  test('is a General block with no website-type restriction', () => {
-    const config = FAQ_SECTION_SETTINGS_CONFIG();
-
-    expect(config.category).toBe('general');
-    expect(config.brandPageType).toBeUndefined();
-    expect(config.defaultIconName).toBe('question-circle-filled');
-  });
-
-  test.each([
-    BRAND_PAGE_TYPES.default,
-    BRAND_PAGE_TYPES.brandSite,
-    BRAND_PAGE_TYPES.brandContact,
-  ])('is offered in Add Content on %s', (brandPageType) => {
-    setActivePinia(createPinia());
-    useBrandPageMakerStore().$patch({ brandPageType });
-
-    const types = getEnabledContentSettingsConfigs().map((c) => c.type);
-
-    expect(types).toContain('faq-section');
-  });
-
-  test('caps items at 6 and labels rows by question', () => {
-    const items = FAQ_SECTION_SETTINGS_CONFIG().fields.items as any;
-
-    expect(items.type).toBe('list-items');
-    expect(items.maxLength).toBe(FAQ_MAX_ITEMS);
-    expect(FAQ_MAX_ITEMS).toBe(6);
-    expect(items.itemFields.map((f: any) => [f.key, f.kind])).toEqual([
-      ['question', 'text'],
-      ['answer', 'textarea'],
-    ]);
-  });
-
-  test('question and answer are rich text with their own per-item style, capped like title and description', () => {
-    const items = FAQ_SECTION_SETTINGS_CONFIG().fields.items as any;
-
-    expect(
-      items.itemFields.map((f: any) => [f.key, f.styleKey, f.maxLength]),
-    ).toEqual([
-      ['question', 'questionStyle', 200],
-      ['answer', 'answerStyle', 1000],
-    ]);
-    expect(
-      items.itemFields.map((f: any) => f.defaultStyle().textStyleType),
-    ).toEqual(['headings', 'paragraphs']);
-  });
-
-  test('has no section-level Question/Answer style — each item carries its own', () => {
-    const { fields } = FAQ_SECTION_SETTINGS_CONFIG() as any;
-
-    expect(fields.questionStyle).toBeUndefined();
-    expect(fields.answerStyle).toBeUndefined();
-    expect(RTE_ITEM_FIELD_PAIRS['faq-section']).toEqual([
-      {
-        itemsField: 'items',
-        textField: 'question',
-        styleField: 'questionStyle',
-      },
-      { itemsField: 'items', textField: 'answer', styleField: 'answerStyle' },
-    ]);
-  });
-});
-
-describe('createInitialFaqSectionContent', () => {
-  test('starts with one sample item and the demo defaults', () => {
-    const content = createInitialFaqSectionContent({
-      brandPageType: BRAND_PAGE_TYPES.brandSite,
-    } as any);
-
-    expect(content.type).toBe('faq-section');
-    expect(content.displayStyle).toBe(FAQ_DISPLAY_STYLES.centered);
-    expect(content.topPadding).toBe(32);
-    expect(content.bottomPadding).toBe(32);
-    expect(content.backgroundStyle).toEqual({});
-    expect(content.items).toHaveLength(1);
-    expect(content.items[0]).toMatchObject({
-      id: expect.any(String),
-      question: 'defaultFaqQuestion',
-      answer: 'defaultFaqAnswer',
-    });
-    expect(content.titleStyle.textStyleType).toBe('titles');
-    expect(content.descriptionStyle.textStyleType).toBe('paragraphs');
-    content.items.forEach((item) => {
-      expect(item.questionStyle).toEqual({
-        applyAutoScale: true,
-        textStyleType: 'headings',
-        textAlign: 'left',
-      });
-      expect(item.answerStyle).toEqual({
-        applyAutoScale: true,
-        textStyleType: 'paragraphs',
-        textAlign: 'left',
-      });
-    });
-  });
-});
-
-describe('faqDisplayStyleConvertor', () => {
-  test('offers the three styles with their icons', () => {
-    const { options } = faqDisplayStyleConvertor.convert(
-      FAQ_DISPLAY_STYLES.split,
-    );
-
-    expect(
-      options.map((o: any) => [o.value, o.iconName, o.isSelected]),
-    ).toEqual([
-      [FAQ_DISPLAY_STYLES.centered, 'display-style-faq-1', false],
-      [FAQ_DISPLAY_STYLES.split, 'display-style-faq-2', true],
-      [FAQ_DISPLAY_STYLES.grid, 'display-style-faq-3', false],
-    ]);
-  });
-
-  test.each([
-    [FAQ_DISPLAY_STYLES.centered, 'center'],
-    [FAQ_DISPLAY_STYLES.split, 'left'],
-    [FAQ_DISPLAY_STYLES.grid, 'center'],
-  ])(
-    'switching to %s only moves the display style and heading alignment',
-    (value, textAlign) => {
-      const config = faqDisplayStyleConvertor.convert(value);
-      const result = faqDisplayStyleConvertor.convertBack(config);
-
-      expect(result).toEqual({
-        displayStyle: value,
-        titleStyle: { textAlign },
-        descriptionStyle: { textAlign },
-      });
-    },
-  );
-});