@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/shared/content-settings/components/text-style-field/i18n/text-style-field.de-DE.json

@@ -1,13 +1,20 @@
 {
-  "textStyleField" : {
-    "textStyle" : "Textstil",
-    "font" : "Schriftart",
-    "size" : "Größe",
-    "letterSpacing" : "Buchstabenabstand",
-    "lineHeight" : "Zeilenhöhe",
-    "style" : "Stil",
-    "alignment" : "Ausrichtung",
-    "color" : "Farbe",
-    "backgroundColor" : "Hintergrundfarbe"
+  "textStyleField": {
+    "textStyle": "Textstil",
+    "font": "Schriftart",
+    "size": "Größe",
+    "letterSpacing": "Buchstabenabstand",
+    "lineHeight": "Zeilenhöhe",
+    "style": "Stil",
+    "alignment": "Ausrichtung",
+    "color": "Farbe",
+    "backgroundColor": "Hintergrundfarbe",
+    "resetToGlobal": "Auf global zurücksetzen",
+    "saveToGlobal": "Global speichern",
+    "styleModifiedHeader": "Dieser Stil wurde geändert",
+    "applyChangesToAll": "Änderungen auf alle '{{role}}' auf der Website anwenden",
+    "resetToDefault": "Auf Standard zurücksetzen",
+    "editTextStyles": "Textstile bearbeiten",
+    "textStyleActionsAriaLabel": "Textstil-Aktionen"
   }
 }

package/src/shared/content-settings/components/text-style-field/i18n/text-style-field.es-ES.json

@@ -1,13 +1,20 @@
 {
-  "textStyleField" : {
-    "textStyle" : "Estilo de texto",
-    "font" : "Fuente",
-    "size" : "Tamaño",
-    "letterSpacing" : "Espaciado entre letras",
-    "lineHeight" : "Altura de línea",
-    "style" : "Estilo",
-    "alignment" : "Alineación",
-    "color" : "Color",
-    "backgroundColor" : "Color de fondo"
+  "textStyleField": {
+    "textStyle": "Estilo de texto",
+    "font": "Fuente",
+    "size": "Tamaño",
+    "letterSpacing": "Espaciado entre letras",
+    "lineHeight": "Altura de línea",
+    "style": "Estilo",
+    "alignment": "Alineación",
+    "color": "Color",
+    "backgroundColor": "Color de fondo",
+    "resetToGlobal": "Restablecer a global",
+    "saveToGlobal": "Guardar como global",
+    "styleModifiedHeader": "Este estilo ha sido modificado",
+    "applyChangesToAll": "Aplicar los cambios a todos los '{{role}}' en todo el sitio",
+    "resetToDefault": "Restablecer a predeterminado",
+    "editTextStyles": "Editar estilos de texto",
+    "textStyleActionsAriaLabel": "Acciones de estilo de texto"
   }
 }

package/src/shared/content-settings/components/text-style-field/i18n/text-style-field.fr-CA.json

@@ -1,13 +1,20 @@
 {
-  "textStyleField" : {
-    "textStyle" : "Style de texte",
-    "font" : "Police",
-    "size" : "Taille",
-    "letterSpacing" : "Espacement des lettres",
-    "lineHeight" : "Hauteur de ligne",
-    "style" : "Style",
-    "alignment" : "Alignement",
-    "color" : "Couleur",
-    "backgroundColor" : "Couleur d’arrière-plan"
+  "textStyleField": {
+    "textStyle": "Style de texte",
+    "font": "Police",
+    "size": "Taille",
+    "letterSpacing": "Espacement des lettres",
+    "lineHeight": "Hauteur de ligne",
+    "style": "Style",
+    "alignment": "Alignement",
+    "color": "Couleur",
+    "backgroundColor": "Couleur d’arrière-plan",
+    "resetToGlobal": "Réinitialiser au global",
+    "saveToGlobal": "Enregistrer comme global",
+    "styleModifiedHeader": "Ce style a été modifié",
+    "applyChangesToAll": "Appliquer les modifications à tous les « {{role}} » sur le site",
+    "resetToDefault": "Réinitialiser par défaut",
+    "editTextStyles": "Modifier les styles de texte",
+    "textStyleActionsAriaLabel": "Actions de style de texte"
   }
 }

package/src/shared/content-settings/components/text-style-field/i18n/text-style-field.fr-FR.json

@@ -1,13 +1,20 @@
 {
-  "textStyleField" : {
-    "textStyle" : "Style de texte",
-    "font" : "Police",
-    "size" : "Taille",
-    "letterSpacing" : "Espacement des lettres",
-    "lineHeight" : "Hauteur de ligne",
-    "style" : "Style",
-    "alignment" : "Alignement",
-    "color" : "Couleur",
-    "backgroundColor" : "Couleur d’arrière-plan"
+  "textStyleField": {
+    "textStyle": "Style de texte",
+    "font": "Police",
+    "size": "Taille",
+    "letterSpacing": "Espacement des lettres",
+    "lineHeight": "Hauteur de ligne",
+    "style": "Style",
+    "alignment": "Alignement",
+    "color": "Couleur",
+    "backgroundColor": "Couleur d’arrière-plan",
+    "resetToGlobal": "Réinitialiser au global",
+    "saveToGlobal": "Enregistrer comme global",
+    "styleModifiedHeader": "Ce style a été modifié",
+    "applyChangesToAll": "Appliquer les modifications à tous les « {{role}} » sur le site",
+    "resetToDefault": "Réinitialiser par défaut",
+    "editTextStyles": "Modifier les styles de texte",
+    "textStyleActionsAriaLabel": "Actions de style de texte"
   }
 }

package/src/shared/content-settings/components/text-style-field/i18n/text-style-field.json

@@ -8,6 +8,13 @@
     "style": "Style",
     "alignment": "Alignment",
     "color": "Color",
-    "backgroundColor": "Background Color"
+    "backgroundColor": "Background Color",
+    "resetToGlobal": "Reset to Global",
+    "saveToGlobal": "Save to Global",
+    "styleModifiedHeader": "This style has been modified",
+    "applyChangesToAll": "Apply changes to all '{{role}}' across the site",
+    "resetToDefault": "Reset to default",
+    "editTextStyles": "Edit Text Styles",
+    "textStyleActionsAriaLabel": "Text style actions"
   }
 }

package/src/shared/content-settings/components/text-style-field/i18n/text-style-field.pt-BR.json

@@ -1,13 +1,20 @@
 {
-  "textStyleField" : {
-    "textStyle" : "Tipo de texto",
-    "font" : "Fonte",
-    "size" : "Tamanho",
-    "letterSpacing" : "Espaçamento entre letras",
-    "lineHeight" : "Altura da linha",
-    "style" : "Estilo",
-    "alignment" : "Alinhamento",
-    "color" : "Cor",
-    "backgroundColor" : "Cor de fundo"
+  "textStyleField": {
+    "textStyle": "Tipo de texto",
+    "font": "Fonte",
+    "size": "Tamanho",
+    "letterSpacing": "Espaçamento entre letras",
+    "lineHeight": "Altura da linha",
+    "style": "Estilo",
+    "alignment": "Alinhamento",
+    "color": "Cor",
+    "backgroundColor": "Cor de fundo",
+    "resetToGlobal": "Redefinir para global",
+    "saveToGlobal": "Salvar como global",
+    "styleModifiedHeader": "Este estilo foi modificado",
+    "applyChangesToAll": "Aplicar alterações a todos os '{{role}}' no site",
+    "resetToDefault": "Redefinir para o padrão",
+    "editTextStyles": "Editar estilos de texto",
+    "textStyleActionsAriaLabel": "Ações de estilo de texto"
   }
 }

package/src/shared/content-settings/components/text-style-field/i18n/text-style-field.pt-PT.json

@@ -1,13 +1,20 @@
 {
-  "textStyleField" : {
-    "textStyle" : "Tipo de texto",
-    "font" : "Tipo de letra",
-    "size" : "Tamanho",
-    "letterSpacing" : "Espaçamento entre letras",
-    "lineHeight" : "Altura da linha",
-    "style" : "Estilo",
-    "alignment" : "Alinhamento",
-    "color" : "Cor",
-    "backgroundColor" : "Cor de fundo"
+  "textStyleField": {
+    "textStyle": "Tipo de texto",
+    "font": "Tipo de letra",
+    "size": "Tamanho",
+    "letterSpacing": "Espaçamento entre letras",
+    "lineHeight": "Altura da linha",
+    "style": "Estilo",
+    "alignment": "Alinhamento",
+    "color": "Cor",
+    "backgroundColor": "Cor de fundo",
+    "resetToGlobal": "Repor para global",
+    "saveToGlobal": "Guardar como global",
+    "styleModifiedHeader": "Este estilo foi modificado",
+    "applyChangesToAll": "Aplicar alterações a todos os '{{role}}' no site",
+    "resetToDefault": "Repor para predefinição",
+    "editTextStyles": "Editar estilos de texto",
+    "textStyleActionsAriaLabel": "Ações de estilo de texto"
   }
 }

package/src/shared/content-settings/components/text-style-role-dropdown/TextStyleRoleDropdown.test.ts

@@ -0,0 +1,141 @@
+import { describe, test, expect, beforeAll, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { nextTick } from 'vue';
+import TextStyleRoleDropdown from './TextStyleRoleDropdown.vue';
+import { useUiSideBarStore } from '@shared/side-bar/store';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
+import { setLocaleAsync } from '@src/composables/useTranslate';
+import type { CanonicalTextStyleType } from '@brand-page/models/styles.model';
+
+const mountDropdown = (
+  props: { selected?: CanonicalTextStyleType; hasOverride?: boolean } = {},
+) => mount(TextStyleRoleDropdown, { props, attachTo: document.body });
+
+const rows = (wrapper: ReturnType<typeof mountDropdown>) =>
+  wrapper.findAll('[data-test-text-style-type]');
+
+const isMenuVisible = (wrapper: ReturnType<typeof mountDropdown>): boolean =>
+  (wrapper.find('[role="listbox"]').element as HTMLElement).style.display !==
+  'none';
+
+const openMenu = async (
+  wrapper: ReturnType<typeof mountDropdown>,
+): Promise<void> => {
+  await wrapper
+    .find('[data-component="text-style-role-dropdown"] > div')
+    .trigger('click');
+};
+
+describe('TextStyleRoleDropdown', () => {
+  beforeAll(async () => {
+    await setLocaleAsync('en-US');
+  });
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('the asterisk: an override adds a red * after the role name in the title', () => {
+    const overridden = mountDropdown({
+      selected: 'heading3',
+      hasOverride: true,
+    });
+    const asterisk = overridden.find('span.tw-text-error-500');
+
+    expect(overridden.text()).toContain('Heading 3');
+    expect(asterisk.exists()).toBe(true);
+    expect(asterisk.text()).toBe('*');
+
+    const clean = mountDropdown({ selected: 'heading3', hasOverride: false });
+
+    expect(clean.find('span.tw-text-error-500').exists()).toBe(false);
+    expect(clean.text()).not.toContain('*');
+  });
+
+  test('fixed scale: ten roles in order, H1 28px … P3 12px, Button text 16px, whatever the site sizes', async () => {
+    const wrapper = mountDropdown({ selected: 'paragraph1' });
+    const sizesOf = () =>
+      rows(wrapper).map((row) => [
+        row.attributes('data-test-text-style-type'),
+        (row.find('span.tw-leading-tight').element as HTMLElement).style
+          .fontSize,
+      ]);
+    const expected = [
+      ['heading1', '28px'],
+      ['heading2', '25px'],
+      ['heading3', '22px'],
+      ['heading4', '20px'],
+      ['heading5', '18px'],
+      ['heading6', '16px'],
+      ['paragraph1', '14px'],
+      ['paragraph2', '13px'],
+      ['paragraph3', '12px'],
+      ['button', '16px'],
+    ];
+
+    expect(sizesOf()).toEqual(expected);
+    expect(rows(wrapper)[rows(wrapper).length - 1].text()).toBe('Button text');
+
+    useUiStyleSettingsStore().textStyles.textStyleOptions.heading1.style.fontSize =
+      '10em';
+    await nextTick();
+
+    expect(sizesOf()).toEqual(expected);
+  });
+
+  test('tick: only the selected role has one, and it follows a changed selection (undo)', async () => {
+    const wrapper = mountDropdown({ selected: 'heading3' });
+    const ticked = () =>
+      rows(wrapper)
+        .filter((row) => row.find('[data-test-role-selected]').exists())
+        .map((row) => row.attributes('data-test-text-style-type'));
+
+    expect(ticked()).toEqual(['heading3']);
+
+    await wrapper.setProps({ selected: 'paragraph2' });
+
+    expect(ticked()).toEqual(['paragraph2']);
+  });
+
+  test('picking a role emits it and closes the menu', async () => {
+    const wrapper = mountDropdown({ selected: 'heading3' });
+
+    await openMenu(wrapper);
+    await rows(wrapper)[1].trigger('click');
+
+    expect(wrapper.emitted('select')).toEqual([['heading2']]);
+    expect(isMenuVisible(wrapper)).toBe(false);
+  });
+
+  test('Edit Text Styles is the final outlined button; choosing it opens the Style tab at Text Styles and closes the menu', async () => {
+    const wrapper = mountDropdown({ selected: 'heading3' });
+    const openTextStyles = vi.spyOn(useUiSideBarStore(), 'openTextStyles');
+    const allRows = wrapper.findAll(
+      '[data-test-text-style-type], [data-test-edit-text-styles]',
+    );
+    const lastRow = allRows[allRows.length - 1];
+
+    expect(lastRow.attributes()).toHaveProperty('data-test-edit-text-styles');
+    expect(lastRow.element.tagName).toBe('BUTTON');
+    expect(lastRow.classes()).toEqual(
+      expect.arrayContaining([
+        'tw-w-full',
+        'tw-cursor-pointer',
+        'tw-rounded-lg',
+        'tw-border-secondary-800',
+        'hover:tw-bg-grayscale-200',
+      ]),
+    );
+    expect(lastRow.text()).toBe('Edit Text Styles');
+
+    await openMenu(wrapper);
+
+    expect(isMenuVisible(wrapper)).toBe(true);
+
+    await lastRow.trigger('click');
+
+    expect(openTextStyles).toHaveBeenCalledTimes(1);
+    expect(isMenuVisible(wrapper)).toBe(false);
+  });
+});

package/src/shared/content-settings/components/text-style-role-dropdown/TextStyleRoleDropdown.vue

@@ -0,0 +1,136 @@
+<template>
+  <Dropdown
+    ref="dropdownRef"
+    data-component="text-style-role-dropdown"
+    :title="selectedLabel"
+    icon-size="xs"
+    :menu-element-classes="props.menuElementClasses"
+    :force-down-position="true"
+  >
+    <template #title>
+      <span>{{ selectedLabel }}</span>
+      <span
+        v-if="hasOverride"
+        class="tw-text-error-500"
+        data-test-role-override-asterisk
+      >
+        *</span
+      >
+    </template>
+    <div
+      class="tw-bg-white tw-text-grayscale-600"
+      title="Text style"
+      data-test-text-style-role-menu
+    >
+      <div
+        v-for="role in CANONICAL_TEXT_STYLE_TYPES"
+        :key="role"
+        :data-test-text-style-type="role"
+        class="text-style-role-dropdown__item tw-flex tw-min-h-[38px] tw-items-center tw-px-2 tw-py-2 tw-cursor-pointer"
+        @click="onSelect(role)"
+      >
+        <span
+          class="tw-flex tw-flex-row tw-w-full tw-justify-between tw-items-center"
+        >
+          <span
+            class="tw-leading-tight"
+            :style="{ fontSize: `${ROLE_MENU_FONT_SIZE_PX[role]}px` }"
+            >{{ roleLabel(role) }}</span
+          >
+          <Icon
+            v-if="role === selected"
+            name="check-thin"
+            size="sm"
+            data-test-role-selected
+          />
+        </span>
+      </div>
+      <div class="tw-px-4 tw-py-3">
+        <button
+          type="button"
+          class="tw-flex tw-h-7 tw-w-full tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-lg tw-border tw-border-solid tw-border-secondary-800 tw-bg-white tw-text-xs tw-font-bold tw-text-secondary-800 hover:tw-bg-grayscale-200"
+          data-test-edit-text-styles
+          @click="onEditTextStyles()"
+        >
+          {{ textStyleFieldTr('editTextStyles') }}
+        </button>
+      </div>
+    </div>
+  </Dropdown>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Dropdown, Icon } from '@designcrowd/fe-shared-lib';
+import {
+  CANONICAL_TEXT_STYLE_TYPES,
+  TEXT_STYLE_TYPES_DISPLAY_NAME_MAP,
+  type CanonicalTextStyleType,
+} from '@brand-page/models/styles.model';
+import { textStyleFieldTr } from '@src/composables/useTranslate';
+import { useUiSideBarStore } from '@shared/side-bar/store';
+
+interface DropdownInstance {
+  hideMenu: () => void;
+}
+
+const props = defineProps<{
+  selected?: CanonicalTextStyleType;
+  hasOverride?: boolean;
+  menuElementClasses?: string;
+}>();
+
+const emit = defineEmits<{
+  (event: 'select', role: CanonicalTextStyleType): void;
+}>();
+
+// A fixed scale, independent of the site's role sizes, so the menu shows each role's place in
+// the hierarchy and stays put while those sizes are edited. P3 sits at the 12px readable floor.
+const ROLE_MENU_FONT_SIZE_PX: Record<CanonicalTextStyleType, number> = {
+  heading1: 28,
+  heading2: 25,
+  heading3: 22,
+  heading4: 20,
+  heading5: 18,
+  heading6: 16,
+  paragraph1: 14,
+  paragraph2: 13,
+  paragraph3: 12,
+  button: 16,
+};
+
+const dropdownRef = ref<DropdownInstance>();
+const sideBarStore = useUiSideBarStore();
+
+const roleLabel = (role: CanonicalTextStyleType): string => {
+  const label = TEXT_STYLE_TYPES_DISPLAY_NAME_MAP()[role] ?? '';
+
+  return label.charAt(0).toUpperCase() + label.slice(1);
+};
+
+const selectedLabel = computed((): string =>
+  props.selected ? roleLabel(props.selected) : '',
+);
+
+const hideMenu = (): void => {
+  dropdownRef.value?.hideMenu();
+};
+
+const onSelect = (role: CanonicalTextStyleType): void => {
+  hideMenu();
+  emit('select', role);
+};
+
+const onEditTextStyles = (): void => {
+  hideMenu();
+  sideBarStore.openTextStyles();
+};
+
+defineExpose({ hideMenu });
+</script>
+
+<style scoped>
+.text-style-role-dropdown__item:hover {
+  background-color: #eee;
+}
+</style>