Merge pull request #351 from PrestaShopCorp/doc-puik-config-provider-…

…story docs: [Storybook][PuikConfigProvider] - fix #350 - create doc + update fr translations
PrestaShopCorp · Jul 2, 2024 · e284bce · e284bce
2 parents 61c3c21 + dc079c6
commit e284bce
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 4 deletions.
diff --git a/packages/components/config-provider/src/config-provider-props.ts b/packages/components/config-provider/src/config-provider-props.ts
@@ -1,10 +1,15 @@
 import type { ExtractPropTypes } from 'vue';
 
+export enum PuikConfigProviderLocale {
+  En = 'en',
+  Fr = 'fr',
+}
+
 export const configProviderProps = {
   locale: {
-    type: String,
+    type: String as () => PuikConfigProviderLocale,
     required: false,
-    default: 'en'
+    default: PuikConfigProviderLocale.En
   }
 };
 

diff --git a/packages/components/config-provider/stories/config-provider.stories.ts b/packages/components/config-provider/stories/config-provider.stories.ts
@@ -0,0 +1,86 @@
+import { PuikConfigProvider, PuikPagination, PuikLabel, PuikConfigProviderLocale } from '@prestashopcorp/puik-components';
+import type { Meta, StoryFn, Args } from '@storybook/vue3';
+import { ref } from 'vue';
+
+const configProviderLocales = Object.values(PuikConfigProviderLocale);
+const configProviderLocalesSummary = configProviderLocales.join('|');
+
+export default {
+  title: 'Components/ConfigProvider',
+  component: PuikConfigProvider,
+  argTypes: {
+    locale: {
+      description:
+        'defines language',
+      control: 'select',
+      options: configProviderLocales,
+      table: {
+        type: {
+          summary: configProviderLocalesSummary
+        },
+        defaultValue: {
+          summary: PuikConfigProviderLocale.En
+        }
+      }
+    }
+  },
+  args: {}
+} as Meta;
+
+const DefaultTemplate: StoryFn = (args: Args) => ({
+  components: {
+    PuikConfigProvider,
+    PuikPagination,
+    PuikLabel
+  },
+  setup() {
+    const page = ref(1);
+    const itemsPerPage = ref(5);
+    return { args, page, itemsPerPage };
+  },
+  template: `
+  <puik-config-provider v-bind="args">
+      <div style="display: flex; flex-direction: column; gap: 1rem;" >
+        <p style="margin-left: 32px;">Translation feature: examples with PuikLabel and PuikPagination</p>
+        <puik-label style="margin-left: 32px;" readonly for="input">
+          Label
+        </puik-label>
+        <puik-pagination
+          v-model:page="page"
+          v-model:items-per-page="itemsPerPage"
+          totalItem="150"
+          variant="large"
+        ></puik-pagination>
+      </div>
+  </puik-config-provider>
+  `
+});
+
+export const Default = {
+  render: DefaultTemplate,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<!-- VueJS Snippet -->
+
+<!-- Translation feature: examples with PuikLabel and PuikPagination -->
+
+<!-- $locales: ${configProviderLocalesSummary} -->
+<puik-config-provider locale="{$locale}">
+  <puik-label>
+    Label
+  </puik-label>
+  <puik-pagination
+    v-model:page="page"
+    :total-item="150"
+    variant="large"
+  ></puik-pagination>
+</puik-config-provider>
+`,
+        language: 'html'
+      }
+    }
+  }
+};
diff --git a/packages/locale/lang/fr.ts b/packages/locale/lang/fr.ts
@@ -1,6 +1,22 @@
 export default {
   name: 'fr',
   puik: {
+    input: {
+      increase: 'Augmenter',
+      decrease: 'diminuer'
+    },
+    switch: {
+      enable: 'Activer',
+      disable: 'Désactiver'
+    },
+    label: {
+      optional: 'Optionnel',
+      readonly: 'Lecture uniquement'
+    },
+    select: {
+      searchPlaceholder: 'Chercher',
+      noResults: 'Aucun résultat'
+    },
     table: {
       selectLabel: 'Cocher',
       unselectLabel: 'Décocher',
@@ -11,6 +27,9 @@ export default {
       reset: 'Réinitialiser',
       search: 'Rechercher'
     },
+    skeletonLoaderGroup: {
+      label: 'Chargement'
+    },
     pagination: {
       ariaLabel: 'Pagination',
       goTo: 'Aller à la page {page}',
@@ -28,14 +47,23 @@ export default {
         jumperDescription: 'sur {maxPage} page(s)'
       },
       loader: {
-        label:
-          'Vous visualisez {itemCount} produit(s) sur un total de {totalItem}.',
+        label: 'Vous visualisez {itemCount} produits sur un total de {totalItem}.',
         button: 'Charger plus'
       },
       mobile: {
         label: 'Page {page} à {maxPage}'
       },
       itemPerPageLabel: 'élément(s) par page'
+    },
+    sidebar: {
+      expandButtonLabel: {
+        expanded: 'Étendre le menu',
+        collapsed: 'Reduire le menu',
+        close: 'Fermer le menu'
+      }
+    },
+    snackbar: {
+      closeBtnLabel: 'Fermer'
     }
   }
 };