@designcrowd/library.brand-page 6.2.8 → 6.2.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.2.8",
+  "version": "6.2.9",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page-maker/components/color-picker/BpColorPicker.stories.ts

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import { setLocaleAsync } from '@src/composables/useTranslate';
 import ColorPickerV2 from './BpColorPickerV2.vue';
 import ColorModeSelect from './components/ColorModeSelect.vue';
 import GradientTypeSelector from './components/GradientTypeSelector.vue';
@@ -7,6 +8,15 @@ import GradientColorSlider from './components/GradientColorSlider.vue';
 export default {
   title: 'Components/BpColorPicker',
   component: ColorPickerV2,
+  // All of this file's stories render labels looked up via colorPickerTr; with
+  // i18next 25, t() returns undefined before setLocaleAsync runs. A meta-level
+  // loader awaits it once for every story, including BpColorPickerV2Sample's
+  // ColorModeSelect/GradientTypeSelector rendered inside the popup.
+  loaders: [
+    async ({ globals }) => {
+      await setLocaleAsync(globals.locale);
+    },
+  ],
 };
 
 export const ColorModeSelectComponent = () => {

package/src/brand-page-maker/components/color-picker/components/ColorModeSelect.mixin.ts

@@ -7,11 +7,11 @@ export const COLOR_PICKER_MODE = {
 
 export const COLOR_PICKER_MODE_OPTIONS = [
   {
-    displayName: 'Solid Color',
+    labelKey: 'colorModeSolid',
     value: COLOR_PICKER_MODE.SOLID,
   },
   {
-    displayName: 'Gradient Color',
+    labelKey: 'colorModeGradient',
     value: COLOR_PICKER_MODE.GRADIENT,
   },
 ];

package/src/brand-page-maker/components/color-picker/components/ColorModeSelect.test.ts

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils';
+import i18next from 'i18next';
+import { describe, expect, test } from 'vitest';
+import {
+  setLocaleAsync,
+  supportedLocales,
+  type LocaleTypes,
+} from '@src/composables/useTranslate';
+import ColorModeSelect from './ColorModeSelect.vue';
+import en from '@src/shared/color-picker/components/i18n/color-picker.json';
+import deDE from '@src/shared/color-picker/components/i18n/color-picker.de-DE.json';
+import esES from '@src/shared/color-picker/components/i18n/color-picker.es-ES.json';
+import frCA from '@src/shared/color-picker/components/i18n/color-picker.fr-CA.json';
+import frFR from '@src/shared/color-picker/components/i18n/color-picker.fr-FR.json';
+import ptBR from '@src/shared/color-picker/components/i18n/color-picker.pt-BR.json';
+import ptPT from '@src/shared/color-picker/components/i18n/color-picker.pt-PT.json';
+
+// Expected values come from the locale files, not literals, so Smartling's
+// rewrite of the wording can't turn these tests red.
+const localeFiles: Record<LocaleTypes, typeof en> = {
+  'en-US': en,
+  'de-DE': deDE,
+  'es-ES': esES,
+  'fr-CA': frCA,
+  'fr-FR': frFR,
+  'pt-BR': ptBR,
+  'pt-PT': ptPT,
+};
+
+const stringsFor = (locale: LocaleTypes): (typeof en)['colorPicker'] =>
+  localeFiles[locale].colorPicker;
+
+const NON_ENGLISH_LOCALES = supportedLocales.filter(
+  (locale) => locale !== 'en-US',
+);
+
+// See RecaptchaDisclosure.vue.test.ts: the shared i18next singleton only takes
+// the language from `setLocaleAsync` on its first call.
+const useLocale = async (locale: string): Promise<void> => {
+  await setLocaleAsync(locale as LocaleTypes);
+  await i18next.changeLanguage(locale);
+};
+
+const optionTexts = (wrapper: ReturnType<typeof mount>): string[] =>
+  wrapper.findAll('option').map((option) => option.text());
+
+const mountSelect = (modelValue?: string): ReturnType<typeof mount> =>
+  mount(ColorModeSelect, { props: { modelValue } });
+
+describe('ColorModeSelect', () => {
+  test.each(NON_ENGLISH_LOCALES)(
+    'dropdown options use the %s locale file',
+    async (locale) => {
+      await useLocale(locale);
+
+      const wrapper = mountSelect();
+
+      expect(optionTexts(wrapper)).toEqual([
+        stringsFor(locale).colorModeSolid,
+        stringsFor(locale).colorModeGradient,
+      ]);
+      optionTexts(wrapper).forEach((text) => {
+        expect(text).not.toMatch(/^colorPicker\./);
+      });
+    },
+  );
+
+  test('English dropdown options read word for word', async () => {
+    await useLocale('en-US');
+
+    const wrapper = mountSelect();
+
+    expect(optionTexts(wrapper)).toEqual(['Solid Color', 'Gradient Color']);
+  });
+
+  // A key missing from one locale file renders as its key path on the site;
+  // the shared test singleton would hide it behind the en-US fallback.
+  test.each(supportedLocales)(
+    'every locale file defines the colour-mode keys: %s',
+    (locale) => {
+      (['colorModeSolid', 'colorModeGradient'] as const).forEach((key) => {
+        const value = stringsFor(locale)[key];
+
+        expect(typeof value, `${locale} › ${key}`).toBe('string');
+        expect(value.trim(), `${locale} › ${key}`).not.toBe('');
+      });
+    },
+  );
+
+  test('a gradient colour opens on the translated gradient option', async () => {
+    await useLocale('de-DE');
+
+    const wrapper = mountSelect('gradient');
+    const select = wrapper.find('select');
+
+    expect((select.element as HTMLSelectElement).value).toBe('gradient');
+    expect(wrapper.find('option:checked').text()).toBe(
+      stringsFor('de-DE').colorModeGradient,
+    );
+  });
+
+  test('picking an option emits the same value as today', async () => {
+    await useLocale('de-DE');
+
+    const wrapper = mountSelect('solid');
+    const select = wrapper.find('select');
+
+    await select.setValue('gradient');
+    await select.setValue('solid');
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([
+      ['gradient'],
+      ['solid'],
+    ]);
+  });
+});

package/src/brand-page-maker/components/color-picker/components/ColorModeSelect.vue

@@ -10,15 +10,21 @@
       :key="index"
       :value="mode.value"
     >
-      {{ mode.displayName }}
+      {{ colorPickerTr(mode.labelKey) }}
     </option>
   </select>
 </template>
 
 <script>
 import ColorModeSelectMixin from './ColorModeSelect.mixin';
+import { colorPickerTr } from '@src/composables/useTranslate';
 
 export default {
   mixins: [ColorModeSelectMixin],
+  setup() {
+    return {
+      colorPickerTr,
+    };
+  },
 };
 </script>

package/src/brand-page-maker/components/color-picker/components/GradientTypeSelector.test.ts

@@ -0,0 +1,157 @@
+import { mount } from '@vue/test-utils';
+import i18next from 'i18next';
+import { describe, expect, test } from 'vitest';
+import {
+  setLocaleAsync,
+  supportedLocales,
+  type LocaleTypes,
+} from '@src/composables/useTranslate';
+import GradientTypeSelector from './GradientTypeSelector.vue';
+import en from '@src/shared/color-picker/components/i18n/color-picker.json';
+import deDE from '@src/shared/color-picker/components/i18n/color-picker.de-DE.json';
+import esES from '@src/shared/color-picker/components/i18n/color-picker.es-ES.json';
+import frCA from '@src/shared/color-picker/components/i18n/color-picker.fr-CA.json';
+import frFR from '@src/shared/color-picker/components/i18n/color-picker.fr-FR.json';
+import ptBR from '@src/shared/color-picker/components/i18n/color-picker.pt-BR.json';
+import ptPT from '@src/shared/color-picker/components/i18n/color-picker.pt-PT.json';
+
+// Expected values come from the locale files, not literals, so Smartling's
+// rewrite of the wording can't turn these tests red.
+const localeFiles: Record<LocaleTypes, typeof en> = {
+  'en-US': en,
+  'de-DE': deDE,
+  'es-ES': esES,
+  'fr-CA': frCA,
+  'fr-FR': frFR,
+  'pt-BR': ptBR,
+  'pt-PT': ptPT,
+};
+
+const stringsFor = (locale: LocaleTypes): (typeof en)['colorPicker'] =>
+  localeFiles[locale].colorPicker;
+
+const NON_ENGLISH_LOCALES = supportedLocales.filter(
+  (locale) => locale !== 'en-US',
+);
+
+// See RecaptchaDisclosure.vue.test.ts: the shared i18next singleton only takes
+// the language from `setLocaleAsync` on its first call.
+const useLocale = async (locale: string): Promise<void> => {
+  await setLocaleAsync(locale as LocaleTypes);
+  await i18next.changeLanguage(locale);
+};
+
+const buttons = (
+  wrapper: ReturnType<typeof mount>,
+): ReturnType<ReturnType<typeof mount>['findAll']> =>
+  wrapper.findAll('.gradient-color-switch-button');
+
+const mountSelector = (modelValue?: string): ReturnType<typeof mount> =>
+  mount(GradientTypeSelector, { props: { modelValue } });
+
+describe('GradientTypeSelector', () => {
+  test.each(NON_ENGLISH_LOCALES)(
+    'gradient buttons and hints use the %s locale file',
+    async (locale) => {
+      await useLocale(locale);
+
+      const wrapper = mountSelector();
+      const [linear, radial] = buttons(wrapper);
+
+      expect(linear.text()).toBe(stringsFor(locale).gradientTypeLinear);
+      expect(radial.text()).toBe(stringsFor(locale).gradientTypeRadial);
+      expect(linear.attributes('title')).toBe(
+        stringsFor(locale).gradientTypeLinearTitle,
+      );
+      expect(radial.attributes('title')).toBe(
+        stringsFor(locale).gradientTypeRadialTitle,
+      );
+      [linear.text(), radial.text()].forEach((text) => {
+        expect(text).not.toMatch(/^colorPicker\./);
+      });
+      expect(linear.classes()).toContain('gradient-color-switch-button');
+      expect(radial.classes()).toContain('gradient-color-switch-button');
+    },
+  );
+
+  test('English gradient buttons and hints read word for word', async () => {
+    await useLocale('en-US');
+
+    const wrapper = mountSelector();
+    const [linear, radial] = buttons(wrapper);
+
+    expect(linear.text()).toBe('Linear');
+    expect(radial.text()).toBe('Radial');
+    expect(linear.attributes('title')).toBe('Linear Gradient Color');
+    expect(radial.attributes('title')).toBe('Radial Gradient Color');
+  });
+
+  // A key missing from one locale file renders as its key path on the site;
+  // the shared test singleton would hide it behind the en-US fallback.
+  test.each(supportedLocales)(
+    'every locale file defines the gradient-type keys: %s',
+    (locale) => {
+      (
+        [
+          'gradientTypeLinear',
+          'gradientTypeRadial',
+          'gradientTypeLinearTitle',
+          'gradientTypeRadialTitle',
+        ] as const
+      ).forEach((key) => {
+        const value = stringsFor(locale)[key];
+
+        expect(typeof value, `${locale} › ${key}`).toBe('string');
+        expect(value.trim(), `${locale} › ${key}`).not.toBe('');
+      });
+    },
+  );
+
+  test('clicking a gradient button emits the same value as today', async () => {
+    await useLocale('de-DE');
+
+    const wrapper = mountSelector('linear');
+    const [, radial] = buttons(wrapper);
+
+    await radial.trigger('click');
+
+    const [linear] = buttons(wrapper);
+
+    await linear.trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([
+      ['radial'],
+      ['linear'],
+    ]);
+  });
+
+  // gradientTypeRadial is "Radial" in every locale file, so a literal
+  // <span>Radial</span> would also pass the assertions above. Override the
+  // resource at runtime to prove the label is actually looked up.
+  test('the radial label is looked up, not hard-coded', async () => {
+    await useLocale('de-DE');
+
+    const original = stringsFor('de-DE').gradientTypeRadial;
+
+    i18next.addResource(
+      'de-DE',
+      'bp',
+      'colorPicker.gradientTypeRadial',
+      'probe-radial',
+    );
+
+    try {
+      const wrapper = mountSelector();
+      const [, radial] = buttons(wrapper);
+
+      expect(radial.text()).toBe('probe-radial');
+    } finally {
+      i18next.addResource(
+        'de-DE',
+        'bp',
+        'colorPicker.gradientTypeRadial',
+        original,
+      );
+    }
+  });
+});

package/src/brand-page-maker/components/color-picker/components/GradientTypeSelector.vue

@@ -4,7 +4,7 @@
     class="tw-flex tw-border-2 tw-border-solid tw-border-secondary-500 tw-rounded"
   >
     <button
-      title="Linear Gradient Color"
+      :title="colorPickerTr('gradientTypeLinearTitle')"
       class="gradient-color-switch-button"
       :class="{
         'gradient-color-switch-button_is-on': isLinear,
@@ -12,10 +12,10 @@
       }"
       @click.stop="onGradientTypeClick('linear')"
     >
-      <span> Linear </span>
+      <span>{{ colorPickerTr('gradientTypeLinear') }}</span>
     </button>
     <button
-      title="Radial Gradient Color"
+      :title="colorPickerTr('gradientTypeRadialTitle')"
       class="gradient-color-switch-button"
       :class="{
         'gradient-color-switch-button_is-on': isRadial,
@@ -23,16 +23,22 @@
       }"
       @click.stop="onGradientTypeClick('radial')"
     >
-      <span> Radial </span>
+      <span>{{ colorPickerTr('gradientTypeRadial') }}</span>
     </button>
   </div>
 </template>
 
 <script>
 import GradientTypeSelectorMixin from './GradientTypeSelector.mixin';
+import { colorPickerTr } from '@src/composables/useTranslate';
 
 export default {
   mixins: [GradientTypeSelectorMixin],
+  setup() {
+    return {
+      colorPickerTr,
+    };
+  },
 };
 </script>
 

package/src/bundles/bundled-translations.de-DE.json

@@ -1332,7 +1332,13 @@
     "newColor": "Neue Farbe",
     "defaultColors": "Standardfarben",
     "gradientColors": "Verlaufsfarben",
-    "selectThisColor": "Diese Farbe auswählen"
+    "selectThisColor": "Diese Farbe auswählen",
+    "colorModeSolid": "Volltonfarbe",
+    "colorModeGradient": "Farbverlauf",
+    "gradientTypeLinear": "Linear",
+    "gradientTypeRadial": "Radial",
+    "gradientTypeLinearTitle": "Linearer Farbverlauf",
+    "gradientTypeRadialTitle": "Radialer Farbverlauf"
   },
   "common": {
     "desktop": "Desktop",

package/src/bundles/bundled-translations.es-ES.json

@@ -1332,7 +1332,13 @@
     "newColor": "Nuevo color",
     "defaultColors": "Colores predeterminados",
     "gradientColors": "Colores en degradado",
-    "selectThisColor": "Selecciona este color"
+    "selectThisColor": "Selecciona este color",
+    "colorModeSolid": "Color sólido",
+    "colorModeGradient": "Degradado",
+    "gradientTypeLinear": "Lineal",
+    "gradientTypeRadial": "Radial",
+    "gradientTypeLinearTitle": "Degradado lineal",
+    "gradientTypeRadialTitle": "Degradado radial"
   },
   "common": {
     "desktop": "ESCRITORIO",

package/src/bundles/bundled-translations.fr-CA.json

@@ -1332,7 +1332,13 @@
     "newColor": "Nouvelle couleur",
     "defaultColors": "Couleurs par défaut",
     "gradientColors": "Dégradés de couleurs",
-    "selectThisColor": "Sélectionner cette couleur"
+    "selectThisColor": "Sélectionner cette couleur",
+    "colorModeSolid": "Couleur unie",
+    "colorModeGradient": "Dégradé",
+    "gradientTypeLinear": "Linéaire",
+    "gradientTypeRadial": "Radial",
+    "gradientTypeLinearTitle": "Dégradé linéaire",
+    "gradientTypeRadialTitle": "Dégradé radial"
   },
   "common": {
     "desktop": "Ordinateur",

package/src/bundles/bundled-translations.fr-FR.json

@@ -1332,7 +1332,13 @@
     "newColor": "Nouvelle couleur",
     "defaultColors": "Couleurs par défaut",
     "gradientColors": "Dégradés de couleurs",
-    "selectThisColor": "Sélectionner cette couleur"
+    "selectThisColor": "Sélectionner cette couleur",
+    "colorModeSolid": "Couleur unie",
+    "colorModeGradient": "Dégradé",
+    "gradientTypeLinear": "Linéaire",
+    "gradientTypeRadial": "Radial",
+    "gradientTypeLinearTitle": "Dégradé linéaire",
+    "gradientTypeRadialTitle": "Dégradé radial"
   },
   "common": {
     "desktop": "Ordinateur",

package/src/bundles/bundled-translations.json

@@ -1332,7 +1332,13 @@
     "newColor": "New Color",
     "defaultColors": "Default Colors",
     "gradientColors": "Gradient Colors",
-    "selectThisColor": "Select this color"
+    "selectThisColor": "Select this color",
+    "colorModeSolid": "Solid Color",
+    "colorModeGradient": "Gradient Color",
+    "gradientTypeLinear": "Linear",
+    "gradientTypeRadial": "Radial",
+    "gradientTypeLinearTitle": "Linear Gradient Color",
+    "gradientTypeRadialTitle": "Radial Gradient Color"
   },
   "common": {
     "desktop": "desktop",

package/src/bundles/bundled-translations.pt-BR.json

@@ -1332,7 +1332,13 @@
     "newColor": "Nova cor",
     "defaultColors": "Cores padrão",
     "gradientColors": "Gradientes de cores",
-    "selectThisColor": "Selecione esta cor"
+    "selectThisColor": "Selecione esta cor",
+    "colorModeSolid": "Cor sólida",
+    "colorModeGradient": "Gradiente",
+    "gradientTypeLinear": "Linear",
+    "gradientTypeRadial": "Radial",
+    "gradientTypeLinearTitle": "Gradiente linear",
+    "gradientTypeRadialTitle": "Gradiente radial"
   },
   "common": {
     "desktop": "área de trabalho",

package/src/bundles/bundled-translations.pt-PT.json

@@ -1332,7 +1332,13 @@
     "newColor": "Nova cor",
     "defaultColors": "Cores padrão",
     "gradientColors": "Gradientes de cores",
-    "selectThisColor": "Selecione esta cor"
+    "selectThisColor": "Selecione esta cor",
+    "colorModeSolid": "Cor sólida",
+    "colorModeGradient": "Gradiente",
+    "gradientTypeLinear": "Linear",
+    "gradientTypeRadial": "Radial",
+    "gradientTypeLinearTitle": "Gradiente linear",
+    "gradientTypeRadialTitle": "Gradiente radial"
   },
   "common": {
     "desktop": "computador",

package/src/shared/color-picker/components/i18n/color-picker.de-DE.json

@@ -3,6 +3,13 @@
     "newColor" : "Neue Farbe",
     "defaultColors" : "Standardfarben",
     "gradientColors" : "Verlaufsfarben",
-    "selectThisColor" : "Diese Farbe auswählen"
+    "selectThisColor" : "Diese Farbe auswählen",
+
+    "colorModeSolid" : "Volltonfarbe",
+    "colorModeGradient" : "Farbverlauf",
+    "gradientTypeLinear" : "Linear",
+    "gradientTypeRadial" : "Radial",
+    "gradientTypeLinearTitle" : "Linearer Farbverlauf",
+    "gradientTypeRadialTitle" : "Radialer Farbverlauf"
   }
 }

package/src/shared/color-picker/components/i18n/color-picker.es-ES.json

@@ -3,6 +3,13 @@
     "newColor" : "Nuevo color",
     "defaultColors" : "Colores predeterminados",
     "gradientColors" : "Colores en degradado",
-    "selectThisColor" : "Selecciona este color"
+    "selectThisColor" : "Selecciona este color",
+
+    "colorModeSolid" : "Color sólido",
+    "colorModeGradient" : "Degradado",
+    "gradientTypeLinear" : "Lineal",
+    "gradientTypeRadial" : "Radial",
+    "gradientTypeLinearTitle" : "Degradado lineal",
+    "gradientTypeRadialTitle" : "Degradado radial"
   }
 }

package/src/shared/color-picker/components/i18n/color-picker.fr-CA.json

@@ -3,6 +3,13 @@
     "newColor" : "Nouvelle couleur",
     "defaultColors" : "Couleurs par défaut",
     "gradientColors" : "Dégradés de couleurs",
-    "selectThisColor" : "Sélectionner cette couleur"
+    "selectThisColor" : "Sélectionner cette couleur",
+
+    "colorModeSolid" : "Couleur unie",
+    "colorModeGradient" : "Dégradé",
+    "gradientTypeLinear" : "Linéaire",
+    "gradientTypeRadial" : "Radial",
+    "gradientTypeLinearTitle" : "Dégradé linéaire",
+    "gradientTypeRadialTitle" : "Dégradé radial"
   }
 }

package/src/shared/color-picker/components/i18n/color-picker.fr-FR.json

@@ -3,6 +3,13 @@
     "newColor" : "Nouvelle couleur",
     "defaultColors" : "Couleurs par défaut",
     "gradientColors" : "Dégradés de couleurs",
-    "selectThisColor" : "Sélectionner cette couleur"
+    "selectThisColor" : "Sélectionner cette couleur",
+
+    "colorModeSolid" : "Couleur unie",
+    "colorModeGradient" : "Dégradé",
+    "gradientTypeLinear" : "Linéaire",
+    "gradientTypeRadial" : "Radial",
+    "gradientTypeLinearTitle" : "Dégradé linéaire",
+    "gradientTypeRadialTitle" : "Dégradé radial"
   }
 }

package/src/shared/color-picker/components/i18n/color-picker.json

@@ -4,6 +4,13 @@
     "defaultColors": "Default Colors",
     "gradientColors": "Gradient Colors",
 
-    "selectThisColor": "Select this color"
+    "selectThisColor": "Select this color",
+
+    "colorModeSolid": "Solid Color",
+    "colorModeGradient": "Gradient Color",
+    "gradientTypeLinear": "Linear",
+    "gradientTypeRadial": "Radial",
+    "gradientTypeLinearTitle": "Linear Gradient Color",
+    "gradientTypeRadialTitle": "Radial Gradient Color"
   }
 }

package/src/shared/color-picker/components/i18n/color-picker.pt-BR.json

@@ -3,6 +3,13 @@
     "newColor" : "Nova cor",
     "defaultColors" : "Cores padrão",
     "gradientColors" : "Gradientes de cores",
-    "selectThisColor" : "Selecione esta cor"
+    "selectThisColor" : "Selecione esta cor",
+
+    "colorModeSolid" : "Cor sólida",
+    "colorModeGradient" : "Gradiente",
+    "gradientTypeLinear" : "Linear",
+    "gradientTypeRadial" : "Radial",
+    "gradientTypeLinearTitle" : "Gradiente linear",
+    "gradientTypeRadialTitle" : "Gradiente radial"
   }
 }

package/src/shared/color-picker/components/i18n/color-picker.pt-PT.json

@@ -3,6 +3,13 @@
     "newColor" : "Nova cor",
     "defaultColors" : "Cores padrão",
     "gradientColors" : "Gradientes de cores",
-    "selectThisColor" : "Selecione esta cor"
+    "selectThisColor" : "Selecione esta cor",
+
+    "colorModeSolid" : "Cor sólida",
+    "colorModeGradient" : "Gradiente",
+    "gradientTypeLinear" : "Linear",
+    "gradientTypeRadial" : "Radial",
+    "gradientTypeLinearTitle" : "Gradiente linear",
+    "gradientTypeRadialTitle" : "Gradiente radial"
   }
 }