@ouestfrance/sipa-bms-ui 8.19.0 → 8.20.0

package/src/components/form/UiBmsInputCheckbox.stories.js

@@ -9,6 +9,7 @@ export default {
       page: template,
     },
   },
+  tags: ['code-only'],
   title: 'Composants/form/UiBmsInputCheckbox',
   component: UiBmsInputCheckbox,
 };

package/src/components/form/UiBmsSwitch.stories.js

@@ -8,11 +8,7 @@ export default {
       page: template,
     },
   },
-  parameters: {
-    docs: {
-      page: template,
-    },
-  },
+  tags: ['code-only'],
   title: 'Composants/form/Switch',
   component: UiBmsSwitch,
 };

package/src/components/layout/BmsForm_retrocompat.stories.js

@@ -3,6 +3,7 @@ import BmsForm from '@/components/layout/BmsForm.vue';
 export default {
   title: 'Composants/layout/BmsForm/for_retrocompat',
   component: BmsForm,
+  tags: ['code-only'],
 };
 
 const Template = (args) => ({

package/src/components/layout/BmsSplitWindow.vue

@@ -218,7 +218,7 @@ function clamp(value: number, minValue: number, maxValue: number) {
       <slot name="first" />
     </div>
     <div
-      class="split-window__separator toto"
+      class="split-window__separator"
       role="separator"
       tabindex="0"
       :aria-label="props.ariaLabel || 'Séparateur de volet'"
@@ -229,7 +229,9 @@ function clamp(value: number, minValue: number, maxValue: number) {
       :aria-controls="primaryId"
       @pointerdown.prevent.stop="onPointerDown"
       @keydown="onKeyDown"
-    />
+    >
+      <slot name="separator" />
+    </div>
     <div
       class="split-window__pane split-window__second-pane"
       :id="primary === 'second' ? primaryId : undefined"

package/src/components/navigation/BmsBreadcrumb.stories.js

@@ -60,21 +60,3 @@ Default.args = {
     },
   ],
 };
-
-export const WithCustomSeparator = Template.bind({});
-WithCustomSeparator.args = {
-  separator: '❤️',
-  breadcrumbs: [
-    {
-      to: { name: 'firstRoute' },
-      label: 'First route',
-    },
-    {
-      to: { name: 'secondRoute' },
-      label: 'Second route',
-    },
-    {
-      label: 'Third and final route',
-    },
-  ],
-};

package/src/components/navigation/BmsMenu.stories.js

@@ -18,8 +18,8 @@ const Template = (args) => ({
   },
   template: `
     <BmsMenu v-bind="args">
-      <template v-if="args.additionalSlot" #additional>Additional</template>
-      <template v-if="args.footerSlot" #footer>Footer</template>
+      <template v-if="args.additional" #additional>{{args.additional}}</template>
+      <template v-if="args.footer" #footer>{{args.footer}}</template>
     </BmsMenu>
   `,
 });
@@ -80,6 +80,6 @@ WithFooterSlot.args = {
     },
   ],
   activeLink: '/tutu',
-  additionalSlot: true,
-  footerSlot: true,
+  additional: 'Additional',
+  footer: 'Footer',
 };

package/src/components/navigation/BmsMenuNav.stories.js

@@ -21,8 +21,8 @@ const Template = (args) => ({
   },
   template: `
     <BmsMenuNav v-bind="args">
-      <template v-if="args.additionalSlot" #additional>Additional</template>
-      <template v-if="args.additionalSlot" #icon-end="{ item }" >
+      <template v-if="args.additional" #additional>{{args.additional}}</template>
+      <template v-if="args.iconEndCustomSlot" #icon-end="{ item }" >
         <BmsBadge :pending="item.badgeCount"></BmsBadge>
       </template>
     </BmsMenuNav>
@@ -189,5 +189,6 @@ WithAdditionalSlot.args = {
     },
   ],
   activeLink: { path: '/tutu' },
-  additionalSlot: true,
+  additional: 'Additional',
+  iconEndCustomSlot: true,
 };

package/src/components/navigation/UiMenuItem.stories.js

@@ -1,7 +1,8 @@
 import UiMenuItem from '@/components/navigation/UiMenuItem.vue';
-import { Activity } from 'lucide-vue-next';
+import { Activity, ShieldAlert, ShieldCheck, ShieldOff } from 'lucide-vue-next';
 import { vueRouter } from 'storybook-vue3-router';
 import template from '@/documentation/template_internal_component.mdx';
+import { StatusType } from '@/models';
 
 export default {
   parameters: {
@@ -9,7 +10,8 @@ export default {
       page: template,
     },
   },
-  title: 'Composants/navigation/MenuItem',
+  tags: ['code-only'],
+  title: 'Composants/navigation/UiMenuItem',
   component: UiMenuItem,
   decorators: [
     vueRouter([
@@ -77,3 +79,52 @@ Active.args = {
   },
   active: true,
 };
+
+const TemplateStatus = (args) => ({
+  components: {
+    UiMenuItem,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <UiMenuItem :item="args.items[0]"/>
+      <UiMenuItem :item="args.items[0]" :active="true"/>
+      <UiMenuItem :item="args.items[1]"/>
+      <UiMenuItem :item="args.items[1]" :active="true"/>
+      <UiMenuItem :item="args.items[2]"/>
+      <UiMenuItem :item="args.items[2]" :active="true"/>
+      <UiMenuItem :item="args.items[3]"/>
+      <UiMenuItem :item="args.items[3]" :active="true"/>
+    `,
+});
+
+export const WithStatusType = TemplateStatus.bind({});
+WithStatusType.args = {
+  items: [
+    {
+      label: 'Item label',
+      link: 'http://google.fr',
+      icon: ShieldAlert,
+      status: StatusType.Danger,
+    },
+    {
+      label: 'Item label',
+      link: 'http://google.fr',
+      icon: ShieldAlert,
+      status: StatusType.Warning,
+    },
+    {
+      label: 'Item label',
+      link: 'http://google.fr',
+      icon: ShieldCheck,
+      status: StatusType.Success,
+    },
+    {
+      label: 'Item label',
+      link: 'http://google.fr',
+      icon: ShieldOff,
+      status: StatusType.Information,
+    },
+  ],
+};

package/src/components/navigation/UiTab.stories.js

@@ -9,6 +9,7 @@ export default {
       page: template,
     },
   },
+  tags: ['code-only'],
   title: 'Composants/navigation/UiTab',
   component: UiTab,
   argTypes: {

package/src/components/navigation/UiTenantSwitcher.stories.js

@@ -7,6 +7,7 @@ export default {
       page: template,
     },
   },
+  tags: ['code-only'],
   title: 'Composants/navigation/UiTenantSwitcher',
   component: UiTenantSwitcher,
 };

package/src/components/table/BmsEmptyScreen.stories.js

@@ -1,31 +1,24 @@
 import BmsEmptyScreen from '@/components/table/BmsEmptyScreen.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
   title: 'Composants/table/EmptyScreen',
   component: BmsEmptyScreen,
-  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {},
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
 const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
   components: {
     BmsEmptyScreen,
   },
-  // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
     return { args };
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
   template: `
     <BmsEmptyScreen v-bind="args" />
   `,
 });
 
 export const Default = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
   title: 'Not found',
   description: "The requested data haven't been found",

package/src/components/table/UiBmsTable.stories.js

@@ -11,6 +11,7 @@ export default {
       page: template,
     },
   },
+  tags: ['code-only'],
   title: 'Composants/table/UiBmsTable',
   component: UiBmsTable,
 };

package/src/components/table/UiFilterButton.stories.js

@@ -7,7 +7,8 @@ export default {
       page: template,
     },
   },
-  title: 'Composants/table/FilterButton',
+  tags: ['code-only'],
+  title: 'Composants/table/UiFilterButton',
   component: UiFilterButton,
   argTypes: {},
 };
@@ -19,16 +20,10 @@ const Template = (args) => ({
   setup() {
     return { args };
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
-  template: `
-  <div style="display:flex">
-  <UiFilterButton v-bind="args" />
-  </div>
-  `,
+  template: `<UiFilterButton v-bind="args" />`,
 });
 
 export const Default = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {};
 
 export const activeFilters = Template.bind({});

package/src/components/utils/BmsRelativeTime.stories.js

@@ -1,6 +1,5 @@
 import BmsRelativeTime from '@/components/utils/BmsRelativeTime.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
   title: 'Composants/utils/RelativeTime',
   component: BmsRelativeTime,
@@ -11,17 +10,13 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
 const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
   components: {
     BmsRelativeTime,
   },
-  // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
     return { args };
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
   template: `
     <div style="width: 400px; text-align: center;">
       <p>
@@ -44,5 +39,4 @@ const Template = (args) => ({
 });
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Primary.args = {};

package/src/components/feedback/Notification.stories.js

@@ -1,37 +0,0 @@
-import NotificationItem from '../../plugins/notifications/NotificationItem.vue';
-
-export default {
-  title: 'Composants/feedback/Notifications',
-  component: NotificationItem,
-};
-
-const Template = (args) => ({
-  components: {
-    NotificationItem,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <NotificationItem v-bind="args">
-    </NotificationItem>
-  `,
-});
-
-export const Sucess = Template.bind({});
-Sucess.args = {
-  notification: {
-    id: 1,
-    type: 'success',
-    text: 'Sucess',
-  },
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  notification: {
-    id: 1,
-    type: 'error',
-    text: 'Error',
-  },
-};

package/src/components/navigation/UiMenuItemStatus.stories.js

@@ -1,64 +0,0 @@
-import UiMenuItem from '@/components/navigation/UiMenuItem.vue';
-import { ShieldAlert, ShieldCheck, ShieldOff } from 'lucide-vue-next';
-import { StatusType } from '../../models';
-import template from '@/documentation/template_internal_component.mdx';
-
-export default {
-  parameters: {
-    docs: {
-      page: template,
-    },
-  },
-  title: 'Composants/navigation/MenuItem',
-  component: UiMenuItem,
-  argTypes: {},
-};
-
-const Template = (args) => ({
-  components: {
-    UiMenuItem,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-      <UiMenuItem :item="args.items[0]"/>
-      <UiMenuItem :item="args.items[0]" :active="true"/>
-      <UiMenuItem :item="args.items[1]"/>
-      <UiMenuItem :item="args.items[1]" :active="true"/>
-      <UiMenuItem :item="args.items[2]"/>
-      <UiMenuItem :item="args.items[2]" :active="true"/>
-      <UiMenuItem :item="args.items[3]"/>
-      <UiMenuItem :item="args.items[3]" :active="true"/>
-    `,
-});
-
-export const WithStatusType = Template.bind({});
-WithStatusType.args = {
-  items: [
-    {
-      label: 'Item label',
-      link: 'http://google.fr',
-      icon: ShieldAlert,
-      status: StatusType.Danger,
-    },
-    {
-      label: 'Item label',
-      link: 'http://google.fr',
-      icon: ShieldAlert,
-      status: StatusType.Warning,
-    },
-    {
-      label: 'Item label',
-      link: 'http://google.fr',
-      icon: ShieldCheck,
-      status: StatusType.Success,
-    },
-    {
-      label: 'Item label',
-      link: 'http://google.fr',
-      icon: ShieldOff,
-      status: StatusType.Information,
-    },
-  ],
-};