@designcrowd/library.brand-page 6.2.7 → 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.7",
+  "version": "6.2.9",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -29,7 +29,7 @@
   "scripts": {
     "dev": "export NODE_TLS_REJECT_UNAUTHORIZED=0 && nuxt dev nuxtapp",
     "dev:dcom": "export tailwindTheme=designCom && nuxt dev nuxtapp",
-    "docker:publish": "docker build -t bp-maker:latest . --file ./build/Dockerfile.brand-page-lib-publish --build-arg NPM_TOKEN=$NPM_TOKEN --no-cache && cross-env NPM_TOKEN=",
+    "docker:publish": "DOCKER_BUILDKIT=1 docker build -t bp-maker:latest . --file ./build/Dockerfile.brand-page-lib-publish --no-cache --secret id=npm,env=NPM_TOKEN --secret id=codeartifact,env=CODEARTIFACT_AUTH_TOKEN",
     "lint": "eslint . && tsc --project tsconfig.lint.json --noEmit",
     "lint:fix": "eslint --fix .",
     "build:bp": "npm run clean:vite && npm run clean:lib && NODE_ENV=production npm run build:bp:vite && npm run build:bp:typings && npm run copy:css",
@@ -47,6 +47,7 @@
     "clean:vite": "rimraf ./node_modules/.cache",
     "copy:css": "copyfiles -fF ./public/css/global.css ./public/css/reset.css ./lib/src/css/",
     "test": "vitest run",
+    "test:publish-dual-registry": "bash ./build/publish-dual-registry.test.sh",
     "test:watch": "vitest watch",
     "coverage": "echo \"To be migrated to vitest\"",
     "storybook": "npm run clean:vite && npm run storybook:css && npm run storybook:themes && npm run storybook:start",
@@ -63,7 +64,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "1.6.0",
-    "@designcrowd/fe-shared-lib": "2.1.2",
+    "@designcrowd/fe-shared-lib": "2.1.3",
     "@pinia/nuxt": "0.11.3",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "3.28.0",

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.test.ts

@@ -52,3 +52,34 @@ describe('ActionBarNavigation — Preview button', () => {
     });
   });
 });
+
+describe('ActionBarNavigation — navigationActionsStart slot', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('renders host content ahead of Preview', () => {
+    const wrapper = shallowMount(ActionBarNavigation, {
+      slots: { navigationActionsStart: '<span data-test-host-action />' },
+    });
+
+    const [first, second] = wrapper.element.children;
+
+    expect(first.hasAttribute('data-test-host-action')).toBe(true);
+    expect(second.hasAttribute('data-test-preview-button')).toBe(true);
+  });
+
+  // The row is a flex row with gaps, so an extra element — even an empty one — would
+  // shift every button for hosts that don't use the slot.
+  test('adds nothing to the row when the host leaves it empty', () => {
+    const wrapper = mountBar();
+    const buttons = wrapper.findAllComponents({ name: 'Button' });
+
+    expect(wrapper.element.children).toHaveLength(buttons.length);
+    expect(
+      wrapper.element.firstElementChild?.hasAttribute(
+        'data-test-preview-button',
+      ),
+    ).toBe(true);
+  });
+});

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.vue

@@ -3,6 +3,7 @@
     data-component="action-bar-navigation"
     class="tw-flex tw-items-center tw-border-t tw-border-solid tw-border-grayscale-600 tw-h-12 tw-px-2 lg:tw-px-0 lg:tw-h-auto lg:tw-border-none tw-gap-3 lg:tw-gap-5 tw-w-full lg:tw-justify-end tw-box-border"
   >
+    <slot name="navigationActionsStart" />
     <Button
       v-if="!isAdminMaker"
       :label="constantsTr('previewDisplayName')"

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.navigation-slot.test.ts

@@ -0,0 +1,58 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import BrandPageMaker from './BrandPageMaker.vue';
+import BrandPageMakerMixin from './BrandPageMaker.mixin';
+
+// The mixin's lifecycle boots the whole editor, which the header's slot plumbing doesn't
+// need; without it the real header templates mount on their own.
+const HeaderOnlyBrandPageMaker = {
+  ...BrandPageMaker,
+  mixins: [
+    {
+      ...BrandPageMakerMixin,
+      created: undefined,
+      mounted: undefined,
+    },
+  ],
+};
+
+const mountMaker = (slots: Record<string, string> = {}) =>
+  shallowMount(HeaderOnlyBrandPageMaker, {
+    props: { viewModel: {} },
+    slots,
+    global: {
+      stubs: { MakerNavigation: false, ActionBarNavigation: false },
+    },
+  });
+
+const actionRow = (wrapper: ReturnType<typeof mountMaker>): Element =>
+  wrapper.get('[data-component="action-bar-navigation"]').element;
+
+describe('BrandPageMaker — navigationActionsStart slot', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('forwards host content into the header action row, ahead of Preview', () => {
+    const wrapper = mountMaker({
+      navigationActionsStart: '<span data-test-host-action />',
+    });
+
+    const [first, second] = actionRow(wrapper).children;
+
+    expect(first.hasAttribute('data-test-host-action')).toBe(true);
+    expect(second.hasAttribute('data-test-preview-button')).toBe(true);
+  });
+
+  test('leaves the action row untouched when the host provides nothing', () => {
+    const wrapper = mountMaker();
+
+    expect(wrapper.find('[data-test-host-action]').exists()).toBe(false);
+    expect(
+      actionRow(wrapper).firstElementChild?.hasAttribute(
+        'data-test-preview-button',
+      ),
+    ).toBe(true);
+  });
+});

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -17,7 +17,11 @@
       @publish="saveAndPublishBrandPage(false)"
       @preview="onPreview"
       @create-team-cards="onCreateTeamCards"
-    />
+    >
+      <template v-if="$slots.navigationActionsStart" #navigationActionsStart>
+        <slot name="navigationActionsStart" />
+      </template>
+    </MakerNavigation>
     <slot name="editButtonHeader" />
     <div
       class="c-brand-page-maker tw-flex tw-flex-col lg:tw-flex-row tw-box-border"

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/brand-page-maker/components/navigation/Navigation.vue

@@ -1,7 +1,7 @@
 <template>
   <header
     data-component="navigation"
-    class="js-bp-header tw-h-24 lg:tw-h-16 tw-box-border lg:tw-py-4 lg:tw-px-5 tw-z-30 tw-fixed tw-w-full lg:tw-relative"
+    class="js-bp-header tw-h-24 lg:tw-h-16 tw-box-border lg:tw-py-4 lg:tw-px-5 tw-z-30 lg:tw-z-40 tw-fixed tw-w-full lg:tw-relative"
     :class="{
       'tw-bg-grayscale-800': !isAdminMaker,
     }"
@@ -36,7 +36,11 @@
         @publish="saveAndPublishBrandPage"
         @preview="previewBrandPage"
         @create-team-cards="onCreateTeamCards"
-      />
+      >
+        <template v-if="$slots.navigationActionsStart" #navigationActionsStart>
+          <slot name="navigationActionsStart" />
+        </template>
+      </ActionBarNavigation>
     </div>
   </header>
 </template>

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",