feat(pie-cookie-banner): WCP-000 refactorerd the locale fallback logic (

#2043)

* feat(pie-cookie-banner): WCP-000 refactorerd the locale fallback logic

* feat(pie-cookie-banner): WCP-000 typo

* feat(pie-cookie-banner): WCP-000 more tests plus removed console.log

* feat(pie-cookie-banner): WCP-000 simplified logic to cater for wider audience

* feat(pie-cookie-banner): WCP-000 updated documentation

* feat(pie-cookie-banner): WCP-000 converted locales json files to js files

* Update .changeset/cyan-candles-boil.md

Co-authored-by: Jamie Maguire <jamieolivermaguire@googlemail.com>

* feat(pie-cookie-banner): WCP-000 rebase conflict

* Update .changeset/cyan-candles-boil.md

Co-authored-by: Raouf <raouf.sawehli@justeattakeaway.com>

* Update apps/pie-docs/src/patterns/cookie-banner/code/code.md

Co-authored-by: Ben Siggery <14013357+siggerzz@users.noreply.github.com>

---------

Co-authored-by: Billy Oliver <billy.oliver@justeattakeaway.com>
Co-authored-by: Jamie Maguire <jamieolivermaguire@googlemail.com>
Co-authored-by: Ben Siggery <14013357+siggerzz@users.noreply.github.com>
Co-authored-by: Raouf <raouf.sawehli@justeattakeaway.com>

.changeset/cyan-candles-boil.md

@@ -0,0 +1,6 @@
+---
+'@justeattakeaway/pie-cookie-banner': minor
+'pie-docs': minor
+---
+
+[Updated] - refactored the locale fallback logic so we can cater for more combinations

apps/pie-docs/component-statuses.json

@@ -0,0 +1,24 @@
+{
+  "pie-assistive-text": "beta",
+  "pie-button": "beta",
+  "pie-card": "beta",
+  "pie-checkbox": "beta",
+  "pie-checkbox-group": "beta",
+  "pie-chip": "beta",
+  "pie-cookie-banner": "beta",
+  "pie-divider": "beta",
+  "pie-form-label": "alpha",
+  "pie-icon-button": "beta",
+  "pie-link": "beta",
+  "pie-lottie-player": "alpha",
+  "pie-modal": "beta",
+  "pie-notification": "beta",
+  "pie-radio": "alpha",
+  "pie-radio-group": "alpha",
+  "pie-spinner": "beta",
+  "pie-switch": "alpha",
+  "pie-tag": "beta",
+  "pie-text-input": "beta",
+  "pie-textarea": "alpha",
+  "pie-toast": "alpha"
+}

apps/pie-docs/src/patterns/cookie-banner/code/code.md

@@ -65,11 +65,40 @@ tableData: events
 
 ## Localisation
 
-By default, the component displays its content in GB English. To display the content in another language, you need to supply a supported language and country pairing to the `language` and `country` props. You can see the currently supported locale pairings here:
+By default, the component displays its content in English `en`. To display the content in another language, you need to supply a language and country pairing to the `language` and `country` props(*).
+
+Currently the following locale languages are supported:
 
 ```js
-import allLocales from '@justeattakeaway/pie-cookie-banner/locales';
+bg (BULGARIAN)
+ca (CATALAN)
+da (DANISH)
+de (GERMAN)
+en (ENGLISH)
+es (SPANISH)
+he (HEBREW)
+it (ITALIAN)
+nl (DUTCH)
+pl (POLISH)
+sk (SLOVAK)
 ```
+And the following bespoke locales are supported (_sometimes added to accommodate specific legal wording for a particular country_):
+
+```js
+en-fr (ENGLISH-FRANCE)
+fr-fr (FRENCH-FRANCE)
+```
+(*) This is the logic order for loading the locale;
+
+1. We attempt to load the bespoke locale for a given language/country combination, e.g. `fr-fr`.
+2. We would attempt to use the locale file based on the language supplied, e.g. if you supplied language `de` & country `ch` we would use the locale file `de`, if you supplied language `fr` & country `ca` then we would use the locale file `fr`, etc.
+3. If you supply an unsupported language in the language/country combination then we would attempt to use the default locale file based on the country supplied, e.g. if you supplied language `pt` & country `es` we would use the locale file `es`, if you supplied language `ru` & country `fr` then we would use the locale file `fr`, etc.
+4. If both the language and country are unsupported then we would use the default of `en`.
+
+{% notification {
+  type: "information",
+  message: "If you wish to support a new language or combination, then create a new locale file and then extend the code to support this new language/country."
+} %}
 
 ## Examples
 

apps/pie-docs/src/patterns/cookie-banner/code/props.json

@@ -15,17 +15,17 @@
         ],
         [
             "country",
-            "Any supported country, that is paired with the language [(see these supported locales)](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-cookie-banner/locales)",
-            "Used (with the language property) to load the localisation data for the component strings. If not provided or unsupported, the default language-country of en-gb will be used. Note this value is case-insensitive",
+            "2 character country code",
+            "Used to load the localisation data for the component strings. If not provided the default country of 'gb' will be used. Note this value is case-insensitive",
             {
               "type": "code",
               "item": ["\"gb\""]
             }
         ],
         [
             "language",
-            "Any supported language, that is paired with the country [(see these supported locales)](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-cookie-banner/locales)",
-            "Used (with the country property) to load the localisation data for the component strings. If not provided or unsupported, the default language of the country will be used. Note this value is case-insensitive",
+            "2 character language code",
+            "Used to load the localisation data for the component strings. If not provided the default language of the country will be used. Note this value is case-insensitive",
             {
               "type": "code",
               "item": ["\"en\""]

apps/pie-storybook/component-statuses.json

@@ -0,0 +1,24 @@
+{
+  "pie-assistive-text": "beta",
+  "pie-button": "stable",
+  "pie-card": "beta",
+  "pie-checkbox": "beta",
+  "pie-checkbox-group": "beta",
+  "pie-chip": "beta",
+  "pie-cookie-banner": "stable",
+  "pie-divider": "stable",
+  "pie-form-label": "alpha",
+  "pie-icon-button": "stable",
+  "pie-link": "stable",
+  "pie-lottie-player": "alpha",
+  "pie-modal": "stable",
+  "pie-notification": "beta",
+  "pie-radio": "alpha",
+  "pie-radio-group": "alpha",
+  "pie-spinner": "stable",
+  "pie-switch": "stable",
+  "pie-tag": "beta",
+  "pie-text-input": "beta",
+  "pie-textarea": "alpha",
+  "pie-toast": "alpha"
+}

apps/pie-storybook/stories/pie-cookie-banner.stories.ts

@@ -32,15 +32,15 @@ const cookieBannerStoryMeta: CookieBannerStoryMeta = {
             control: 'boolean',
         },
         country: {
-            options: Object.values(Country),
+            options: [...Object.values(Country), 'ru', 'pt', 'ES', 'invalid'], // Expanded to allow for unsupported value tests
             control: 'select',
             description: 'Assigns the country for the component',
             defaultValue: {
                 summary: defaultProps.country,
             },
         },
         language: {
-            options: Object.values(Language),
+            options: [...Object.values(Language), 'ru', 'pt', 'CA', 'invalid'], // Expanded to allow for unsupported value tests
             control: 'select',
             description: 'Assigns the language for the component',
             defaultValue: {

component-statuses.json

@@ -0,0 +1,24 @@
+{
+  "pie-assistive-text": "beta",
+  "pie-button": "stable",
+  "pie-card": "beta",
+  "pie-checkbox": "beta",
+  "pie-checkbox-group": "beta",
+  "pie-chip": "beta",
+  "pie-cookie-banner": "stable",
+  "pie-divider": "stable",
+  "pie-form-label": "alpha",
+  "pie-icon-button": "stable",
+  "pie-link": "stable",
+  "pie-lottie-player": "alpha",
+  "pie-modal": "stable",
+  "pie-notification": "beta",
+  "pie-radio": "alpha",
+  "pie-radio-group": "alpha",
+  "pie-spinner": "stable",
+  "pie-switch": "stable",
+  "pie-tag": "beta",
+  "pie-text-input": "beta",
+  "pie-textarea": "alpha",
+  "pie-toast": "alpha"
+}

packages/components/pie-cookie-banner/declaration.d.ts

@@ -7,3 +7,49 @@ declare module '*.scss?inline' {
     const content: Record<string, string>;
     export default content;
 }
+
+declare module '@justeattakeaway/pie-cookie-banner/locales/*.js' {
+    export interface CookieBannerLocale {
+        banner: {
+            title: string;
+            description: string;
+            cta: {
+                managePreferences: string;
+                necessaryOnly: string;
+                acceptAll: string;
+            };
+        };
+        preferencesManagement: {
+            title: string;
+            description: string;
+            all: {
+                title: string;
+            };
+            necessary: {
+                title: string;
+                description: string;
+            };
+            functional: {
+                title: string;
+                description: string;
+            };
+            analytical: {
+                title: string;
+                description: string;
+            };
+            personalized: {
+                title: string;
+                description: string;
+            };
+            cta: {
+                save: {
+                label: string;
+                ariaLabel: string;
+                };
+            };
+        };
+    }
+
+    const locale: CookieBannerLocale;
+    export default locale;
+}

packages/components/pie-cookie-banner/locales/bg.js

@@ -0,0 +1,40 @@
+export default {
+    banner: {
+        title: 'Бисквитки',
+        description: 'Използваме наши собствени бисквитки и бисквитки на трети страни и друга технология, за да усъвършенстваме и персонализираме изживяването ти като потребител, за да оптимизираме статистиката и да показваме реклами на трети страни (прочети нашата <linkStatement>декларация</linkStatement>). Винаги настройваме необходимите бисквитки. Кликни върху <linkNecessaryOnly>Само необходимите</linkNecessaryOnly>, за да продължиш, без да приемаш други. Кликни върху <linkManagePreferences>Управление на предпочитанията</linkManagePreferences>, за да споделиш своите предпочитания или <linkAcceptAll>приеми всички</linkAcceptAll>.',
+        cta: {
+            managePreferences: 'Управление на предпочитанията',
+            necessaryOnly: 'Само необходимите',
+            acceptAll: 'Приемане на всички',
+        },
+    },
+    preferencesManagement: {
+        title: 'Управление на предпочитанията',
+        description: 'Можеш да намериш цялата информация в <linkCookieStatement>Декларацията за бисквитки</linkCookieStatement> и Списъка с <linkCookieTechList>технологии за бисквитки</linkCookieTechList>.',
+        all: {
+            title: 'Включи всички',
+        },
+        necessary: {
+            title: 'Необходими',
+            description: 'Тези бисквитки са необходими, за да се гарантира правилното функциониране на уебсайта и неговите свойства. Заявените от теб услуги не могат да се предоставят без тези бисквитки.',
+        },
+        functional: {
+            title: 'Функционални',
+            description: 'Тези бисквитки позволяват на уебсайта да запомни направените от теб избори за осигуряване на по-добра функционалност и персонализирани функции.',
+        },
+        analytical: {
+            title: 'Аналитични',
+            description: 'Тези аналитични бисквитки, включително за статистически данни, се използват за разбиране начина, по който посетителите взаимодействат с уебсайта, за да можем да измерваме и подобряваме ефективността на нашия уебсайт.',
+        },
+        personalized: {
+            title: 'Персонализирани (целеви и рекламни)',
+            description: 'Тези маркетингови бисквитки се използват за персонализиране предоставянето на информация на теб въз основа на твоя интерес и за измерване на ефективността на такива реклами на нашия уебсайт и на уебсайтовете на рекламните ни партньори.',
+        },
+        cta: {
+            save: {
+                label: 'Запази',
+                ariaLabel: '',
+            },
+        },
+    },
+};