@ouestfrance/sipa-bms-ui 7.14.1

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

@@ -0,0 +1,29 @@
+import BmsHeader from '@/components/layout/BmsHeader.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Composants/layout/Header',
+  component: BmsHeader,
+};
+
+// 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: {
+    BmsHeader,
+  },
+  // 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: `
+    <BmsHeader v-bind="args">
+      This is content
+    </BmsHeader>
+  `,
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Primary.args = {};

package/src/components/layout/BmsHeader.vue

@@ -0,0 +1,16 @@
+<template>
+  <header>
+    <slot></slot>
+  </header>
+</template>
+
+<style lang="scss" scoped>
+header {
+  position: sticky;
+  top: 0;
+  background: white;
+  z-index: 3;
+  padding: 0.8rem 1rem;
+  border-bottom: 1px solid var(--bms-grey-10);
+}
+</style>

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

@@ -0,0 +1,68 @@
+import BmsHeaderTitle from '@/components/layout/BmsHeaderTitle.vue';
+import BmsButton from '@/components/button/BmsButton.vue';
+import { Flower } from 'lucide-vue-next';
+
+export default {
+  components: { BmsHeaderTitle },
+  title: 'Composants/layout/BmsHeaderTitle',
+  component: BmsHeaderTitle,
+};
+
+const Template = (args) => ({
+  components: { BmsHeaderTitle, Flower },
+  setup() {
+    return { args };
+  },
+  template: `
+      <BmsHeaderTitle v-bind="args"/>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Titre',
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  title: 'Titre',
+  label: 'My resource',
+};
+
+export const WithHelperLinks = Template.bind({});
+WithHelperLinks.args = {
+  title: 'WithHelperLinks',
+  documentationUrl: '/docs',
+  activityUrl: '/docs',
+};
+
+const TemplateWithSlots = (args) => ({
+  components: { BmsHeaderTitle, Flower, BmsButton },
+  setup() {
+    return { args };
+  },
+  template: `
+      <BmsHeaderTitle v-bind="args">
+        <template #logo>
+          <Flower/>
+        </template>
+        <template #afterTitle>
+          <BmsButton type="tertiary"> second action </BmsButton>
+        </template>
+        <template #actions>
+          <BmsButton> Action </BmsButton>
+        </template>
+        <template #subtitle>
+          This is a subtitle
+        </template>
+
+      </BmsHeaderTitle>
+    `,
+});
+export const WithAll = TemplateWithSlots.bind({});
+WithAll.args = {
+  title: 'With all slots',
+  label: 'a label',
+  documentationUrl: '/docs',
+  activityUrl: '/docs',
+};

package/src/components/layout/BmsHeaderTitle.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="bms-header">
+    <span class="bms-header__title">
+      <slot name="logo" />
+      <span class="bms-header__title__label">
+        <span v-if="label">{{ label }}</span>
+        <h1>{{ title }}</h1>
+      </span>
+      <BmsShortLinkMenu
+        v-if="showHelperLink"
+        :outline="true"
+        :help-link="documentationUrl ?? null"
+        :activity-link="activityUrl ?? null"
+      />
+      <span v-if="$slots.afterTitle" class="bms-header__title__after-title">
+        <slot name="afterTitle" />
+      </span>
+      <span v-if="$slots.actions" class="bms-header__title__actions">
+        <slot name="actions" />
+      </span>
+    </span>
+    <span v-if="$slots.subtitle" class="bms-header__subtitle">
+      <slot name="subtitle" />
+    </span>
+  </div>
+</template>
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router';
+import BmsShortLinkMenu from '@/components/navigation/BmsShortLinkMenu.vue';
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    label?: string;
+    documentationUrl?: string | null;
+    activityUrl?: RouteLocationRaw | null;
+  }>(),
+  {
+    documentationUrl: undefined,
+    activityUrl: undefined,
+  },
+);
+
+const showHelperLink = computed(() => {
+  return props.documentationUrl || props.activityUrl;
+});
+</script>
+
+<style lang="scss" scoped>
+.bms-header {
+  width: 100%;
+
+  &__title {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    &__label {
+      h1 {
+        margin: 0;
+      }
+    }
+    &__actions {
+      flex-grow: 1;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+  &__subtitle {
+    margin-top: 0.5em;
+    display: inline-block;
+  }
+}
+</style>

package/src/components/layout/BmsModal.spec.ts

@@ -0,0 +1,174 @@
+import BmsModal from '@/components/layout/BmsModal.vue';
+import { mount, MountingOptions } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { nextTick } from 'vue';
+
+const BmsButtonStub = {
+  template: `<div><slot /></div>`,
+};
+
+const intersectionObserverMock = () => ({
+  observe: () => null,
+});
+window.IntersectionObserver = vi
+  .fn()
+  .mockImplementation(intersectionObserverMock);
+
+const factory = (options: MountingOptions<any, {}> = {}) => {
+  const wrapper = mount(BmsModal, {
+    global: {
+      stubs: {
+        BmsButton: BmsButtonStub,
+        teleport: true,
+      },
+    },
+    slots: {
+      default: 'Hello',
+    },
+    props: {
+      title: 'MyModal',
+      modelValue: false,
+      backdropDismiss: true,
+      closable: true,
+      submitLabel: 'Valider',
+      cancelLabel: 'Non!',
+    },
+    ...options,
+  } as any);
+
+  return {
+    wrapper,
+    openModal: async () => {
+      await wrapper.setProps({
+        modelValue: true,
+      });
+    },
+  };
+};
+
+describe('BmsModal', () => {
+  it('should bind label', async () => {
+    const { wrapper, openModal } = factory();
+
+    await openModal();
+    await nextTick();
+
+    expect(wrapper.text()).toContain('MyModal');
+    expect(wrapper.text()).toContain('Valider');
+    expect(wrapper.text()).toContain('Non!');
+  });
+
+  it('should toggle modal', async () => {
+    const { wrapper, openModal } = factory();
+
+    await openModal();
+    await nextTick();
+
+    expect(wrapper.text()).toContain('Hello');
+  });
+
+  it('should close on X click', async () => {
+    const { wrapper, openModal } = factory();
+
+    await openModal();
+    await nextTick();
+
+    await wrapper.find('[data-testid="close-modal"]').trigger('click');
+    await nextTick();
+
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([undefined]);
+    await wrapper.setProps({ modelValue: false });
+
+    await nextTick();
+
+    expect(wrapper.text()).not.toContain('Hello');
+  });
+
+  it('should not close when not closable', async () => {
+    const { wrapper, openModal } = factory();
+
+    await wrapper.setProps({
+      closable: false,
+    });
+
+    await openModal();
+    await nextTick();
+
+    await wrapper.find('[data-testid="close-modal"]').trigger('click');
+    await nextTick();
+
+    expect(wrapper.emitted()['update:modelValue']).not.toBeTruthy();
+    expect(wrapper.text()).toContain('Hello');
+  });
+
+  it('should not close when in loading state', async () => {
+    const { wrapper, openModal } = factory();
+
+    await wrapper.setProps({
+      closable: true,
+      loading: true,
+    });
+
+    await openModal();
+    await nextTick();
+
+    await wrapper.find('[data-testid="close-modal"]').trigger('click');
+    await nextTick();
+
+    expect(wrapper.emitted()['update:modelValue']).not.toBeTruthy();
+    expect(wrapper.text()).toContain('Hello');
+  });
+
+  describe('backdrop click handling', () => {
+    it('should close when click on backdrop', async () => {
+      const { wrapper, openModal } = factory();
+
+      await openModal();
+      await nextTick();
+
+      (wrapper.vm as any).backdropClick();
+      await nextTick();
+
+      expect(wrapper.emitted()['update:modelValue'][0]).toEqual([undefined]);
+      await wrapper.setProps({ modelValue: false });
+
+      expect(wrapper.text()).not.toContain('Hello');
+    });
+
+    it('should not close when click on backdrop when not dismissable', async () => {
+      const { wrapper, openModal } = factory();
+
+      await wrapper.setProps({
+        backdropDismiss: false,
+      });
+
+      await openModal();
+      await nextTick();
+
+      (wrapper.vm as any).backdropClick();
+      await nextTick();
+
+      expect(wrapper.emitted()['update:modelValue']).not.toBeTruthy();
+      expect(wrapper.text()).toContain('Hello');
+    });
+
+    it('should not close when click on backdrop when in loading state', async () => {
+      const { wrapper, openModal } = factory();
+
+      await wrapper.setProps({
+        closable: true,
+        backdropDismiss: true,
+        loading: true,
+      });
+
+      await openModal();
+      await nextTick();
+
+      await wrapper.find('[data-testid="backdrop-modal"]').trigger('click');
+      await nextTick();
+
+      expect(wrapper.emitted()['update:modelValue']).not.toBeTruthy();
+      expect(wrapper.text()).toContain('Hello');
+    });
+  });
+});

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

@@ -0,0 +1,153 @@
+import BmsModal from '@/components/layout/BmsModal.vue';
+import { StatusType } from '@/models/status-type.model';
+import { BmsProblem, isProblem } from '../../index';
+
+const openNotification = {
+  details: 'this is a detail',
+  title: 'this is a title',
+};
+for (let i = 0; i < 50; i++) {
+  openNotification['error' + i] =
+    'Error ' +
+    i +
+    ' Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ';
+}
+
+export default {
+  methods: { isProblem },
+  components: { BmsProblem },
+  title: 'Composants/layout/Modal',
+  component: BmsModal,
+  tags: ['!autodocs'],
+  argTypes: {
+    modelValue: {
+      control: { type: 'boolean' },
+    },
+    backdropDismiss: {
+      control: { type: 'boolean' },
+    },
+    closable: {
+      control: { type: 'boolean' },
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    submitLabel: {
+      control: { type: 'text' },
+    },
+    cancelLabel: {
+      control: { type: 'text' },
+    },
+    buttons: {},
+    submitAction: {},
+    cancelAction: {},
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BmsModal,
+    BmsProblem,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <BmsModal v-bind="args">
+        <template v-if="args.headerSlot" #header>
+          <span v-html='args.headerSlot'/>
+        </template>
+        <template v-if="args.titleSlot" #title>
+          <span v-html='args.titleSlot'/>
+        </template>
+        <template #default>
+          <h3>This is content</h3>
+          <BmsProblem
+              v-if="args.openNotification"
+              :problem="args.openNotification"
+          />
+        </template>
+        <template v-if="args.footerSlot" #footer>
+          <span v-html='args.footerSlot'/>
+        </template>
+      </BmsModal>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  modelValue: true,
+  title: 'Titre',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  modelValue: true,
+  title: 'Titre',
+  type: StatusType.Success,
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  modelValue: true,
+  title: 'Titre',
+  type: StatusType.Warning,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  modelValue: true,
+  title: 'Titre',
+  type: StatusType.Danger,
+  openNotification,
+};
+
+export const CustomHeader = Template.bind({});
+CustomHeader.args = {
+  modelValue: true,
+  closable: false,
+  submitLabel: 'Submit',
+  cancelLabel: 'Cancel',
+  headerSlot: 'This is a custom header',
+};
+
+export const CustomSlots = Template.bind({});
+CustomSlots.args = {
+  modelValue: true,
+  titleSlot: 'This is a title',
+  footerSlot: 'This is a custom footer',
+};
+
+export const CustomButtons = Template.bind({});
+CustomButtons.args = {
+  modelValue: true,
+  buttons: [
+    {
+      label: 'Button 1',
+      role: 'cancel',
+      color: 'neutral',
+    },
+    {
+      label: 'Button 2',
+      role: 'cancel',
+      color: 'neutral',
+    },
+    {
+      label: 'Button 3 disabled',
+      role: 'submit',
+      disabled: true,
+    },
+    {
+      label: 'Button 4',
+      role: 'submit',
+    },
+  ],
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  modelValue: true,
+  title: 'Titre de modal',
+  loading: true,
+  loadingText: 'Chargement...',
+};