@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/navigation/BmsMenu.spec.ts

@@ -0,0 +1,95 @@
+import BmsMenu from '@/components/navigation/BmsMenu.vue';
+import { MenuItem } from '@/models/menu.model';
+import { mount, MountingOptions, RouterLinkStub } from '@vue/test-utils';
+import { nextTick } from 'vue';
+
+vi.mock('vue-router', () => ({
+  useRoute: vi.fn().mockImplementation(() => ({ path: 'path' })),
+}));
+
+const intersectionObserverMock = () => ({
+  observe: () => null,
+});
+
+const menuItems: MenuItem[] = [
+  {
+    label: 'Item menu 1',
+    link: { name: 'link-one' },
+    id: 'menu0',
+  },
+  {
+    label: 'Item menu 2',
+    link: { name: 'link-two' },
+    id: 'menu1',
+  },
+];
+
+const factory = (options: MountingOptions<any, {}> = {}) => {
+  const wrapper = mount(BmsMenu, {
+    global: {
+      stubs: {
+        UiButton: true,
+        'router-link': RouterLinkStub,
+        teleport: true,
+      },
+    },
+    props: {
+      items: menuItems,
+    },
+    ...options,
+  } as any);
+
+  return {
+    wrapper,
+    toggleMenu: async () => {
+      const openMenuButton = wrapper.find('[data-testid="openMenu"]');
+
+      openMenuButton.trigger('click');
+
+      await nextTick();
+    },
+  };
+};
+
+describe('BmsMenu', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    window.IntersectionObserver = vi
+      .fn()
+      .mockImplementation(intersectionObserverMock);
+  });
+  it('should toggle menu', async () => {
+    const { wrapper, toggleMenu } = factory();
+
+    await toggleMenu();
+
+    expect(wrapper.text()).toContain(menuItems[0].label);
+
+    await toggleMenu();
+
+    expect(wrapper.text()).not.toContain(menuItems[0].label);
+  });
+
+  it('should close on X click', async () => {
+    const { wrapper, toggleMenu } = factory();
+
+    await toggleMenu();
+
+    wrapper.find('[data-testid="closeMenu"]').trigger('click');
+
+    await nextTick();
+
+    expect(wrapper.text()).not.toContain(menuItems[0].label);
+  });
+
+  it('should close on navigation click', async () => {
+    const { wrapper, toggleMenu } = factory();
+
+    await toggleMenu();
+    wrapper.get('[data-testid="openMenu"]').trigger('click');
+
+    await nextTick();
+
+    expect(wrapper.text()).not.toContain(menuItems[0].label);
+  });
+});

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

@@ -0,0 +1,85 @@
+import BmsMenu from '@/components/navigation/BmsMenu.vue';
+import { Activity } from 'lucide-vue-next';
+
+export default {
+  title: 'Composants/navigation/Menu',
+  component: BmsMenu,
+  argTypes: {
+    items: {},
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BmsMenu,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsMenu v-bind="args">
+      <template v-if="args.additionalSlot" #additional>Additional</template>
+      <template v-if="args.footerSlot" #footer>Footer</template>
+    </BmsMenu>
+  `,
+});
+
+export const Closed = Template.bind({});
+Closed.args = {
+  items: [
+    {
+      label: 'label',
+      link: 'link',
+    },
+  ],
+};
+
+export const Opened = Template.bind({});
+Opened.args = {
+  open: true,
+  items: [
+    {
+      label: 'toto',
+      link: '/toto',
+      icon: Activity,
+    },
+    {
+      label: 'titi',
+      link: '/titi',
+    },
+  ],
+  activeLink: '/toto',
+};
+
+export const WithFooterSlot = Template.bind({});
+WithFooterSlot.args = {
+  open: true,
+  items: [
+    {
+      label: 'toto',
+      link: '/toto',
+      icon: Activity,
+    },
+    {
+      label: 'titi',
+      link: '/titi',
+    },
+    {
+      label: 'Parent',
+      items: [
+        {
+          label: 'tata',
+          link: '/tata',
+          icon: Activity,
+        },
+        {
+          label: 'tutu',
+          link: '/tutu',
+        },
+      ],
+    },
+  ],
+  activeLink: '/tutu',
+  additionalSlot: true,
+  footerSlot: true,
+};

package/src/components/navigation/BmsMenu.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="menu">
+    <BmsIconButton
+      @click="toggleMenu(!isMenuOpen)"
+      data-testid="openMenu"
+      aria-label="Ouvrir le menu"
+    >
+      <Menu />
+    </BmsIconButton>
+
+    <Teleport to="body">
+      <Transition :duration="200" name="menu-slide-left-fade">
+        <BmsOverlay :active="isMenuOpen">
+          <div
+            v-if="isMenuOpen"
+            ref="menu"
+            class="menu__container"
+            :class="{ 'is-show': isMenuOpen }"
+          >
+            <BmsIconButton
+              class="menu__close"
+              @click="toggleMenu(false)"
+              data-testid="closeMenu"
+              aria-label="Fermer le menu"
+              icon
+            >
+              <X />
+            </BmsIconButton>
+            <BmsMenuNav
+              :items="items"
+              :active-link="route"
+              @close-menu="toggleMenu"
+            >
+              <template #additional="{ closeMenu }">
+                <slot name="additional" :closeMenu="closeMenu"></slot>
+              </template>
+            </BmsMenuNav>
+
+            <div class="menu__copyright">
+              <slot name="footer">
+                <p class="menu__copyright-madein">Made with ♥ by BMS</p>
+              </slot>
+            </div>
+          </div>
+        </BmsOverlay>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Menu, X } from 'lucide-vue-next';
+import { MenuItem, ParentMenuItem } from '@/models/menu.model';
+import { ref } from 'vue';
+import BmsOverlay from '../layout/BmsOverlay.vue';
+import { BmsIconButton } from '@/index';
+import { useRoute } from 'vue-router';
+import BmsMenuNav from './BmsMenuNav.vue';
+import { onClickOutside } from '@vueuse/core';
+
+const route = useRoute();
+
+interface Props {
+  items: (MenuItem | ParentMenuItem)[];
+  open?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+});
+
+const isMenuOpen = ref(props.open);
+const menu = ref(null);
+
+onClickOutside(menu, () => {
+  toggleMenu(false);
+});
+
+const toggleMenu = (newMenuState: boolean = true) =>
+  (isMenuOpen.value = newMenuState);
+</script>
+
+<style lang="scss" scoped>
+.menu {
+  &__container {
+    --menu-margin: 1.5rem;
+
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    left: 0;
+    height: calc(100vh - var(--menu-margin) * 2);
+    width: calc(24rem + var(--menu-margin) * 2);
+    background: white;
+    margin: 1.5rem;
+    padding: 0;
+    border-radius: 0.5rem;
+    z-index: 10;
+  }
+
+  &__copyright {
+    position: sticky;
+    padding: 1rem;
+    text-align: center;
+
+    &-madein {
+      font-size: 0.75em;
+      margin: 0;
+      opacity: 0.64;
+    }
+  }
+
+  &__logo {
+    width: 100%;
+    object-fit: contain;
+    height: 4rem;
+    display: block;
+  }
+}
+
+:deep(.menu__close) {
+  position: absolute;
+  top: 0;
+  margin: 0.5rem;
+  right: 0;
+}
+
+.menu-slide-left-fade-enter-active,
+.menu-slide-left-fade-leave-active {
+  transition: opacity 0.2s linear;
+}
+
+.menu-slide-left-fade-enter-from,
+.menu-slide-left-fade-leave-to {
+  opacity: 0;
+}
+
+.menu-slide-left-fade-enter-active .menu__container,
+.menu-slide-left-fade-leave-active .menu__container {
+  transition: transform 0.2s ease-in-out;
+}
+
+.menu-slide-left-fade-enter-from .menu__container,
+.menu-slide-left-fade-leave-to .menu__container {
+  transform: translate3d(-10%, 0, 0);
+}
+</style>

package/src/components/navigation/BmsMenuNav.spec.ts

@@ -0,0 +1,140 @@
+import BmsMenuNav from '@/components/navigation/BmsMenuNav.vue';
+import { MenuItem } from '@/models/menu.model';
+import { mount, MountingOptions, RouterLinkStub } from '@vue/test-utils';
+
+const intersectionObserverMock = () => ({
+  observe: () => null,
+});
+
+const menuItems: MenuItem[] = [
+  {
+    label: 'Item menu 1',
+    link: { name: 'link-one' },
+    id: 'menu0',
+  },
+  {
+    label: 'Item menu 2',
+    link: { name: 'link-two' },
+    id: 'menu1',
+  },
+];
+
+const factory = (options: MountingOptions<any, {}> = {}) => {
+  const wrapper = mount(BmsMenuNav, {
+    global: {
+      stubs: {
+        UiButton: true,
+        'router-link': RouterLinkStub,
+        teleport: true,
+      },
+    },
+    props: {
+      items: menuItems,
+    },
+    ...options,
+  } as any);
+
+  return {
+    wrapper,
+  };
+};
+
+describe('BmsMenuNav', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    window.IntersectionObserver = vi
+      .fn()
+      .mockImplementation(intersectionObserverMock);
+  });
+  describe('isItemActive', () => {
+    it('should not have any active', () => {
+      const { wrapper } = factory({
+        props: { items: menuItems, activeLink: { name: 'unknown' } },
+      });
+      expect(wrapper.findAll('.active').length).toEqual(0);
+    });
+    it('should have active if route has meta menu item id', () => {
+      const { wrapper } = factory({
+        props: {
+          items: menuItems,
+          activeLink: { name: 'unknown', meta: { menuItemId: 'menu0' } },
+        },
+      });
+      expect(wrapper.findAll('.active').length).toEqual(1);
+      expect(wrapper.findAll('.active')[0].text()).toEqual('Item menu 1');
+    });
+    it('should have active if route has same name', () => {
+      const { wrapper } = factory({
+        props: {
+          items: menuItems,
+          activeLink: { name: 'link-one' },
+        },
+      });
+      expect(wrapper.findAll('.active').length).toEqual(1);
+      expect(wrapper.findAll('.active')[0].text()).toEqual('Item menu 1');
+    });
+    it('should have active if route has same path', () => {
+      const { wrapper } = factory({
+        props: {
+          items: [
+            {
+              label: 'Item menu 1',
+              link: { path: '/path' },
+              id: 'menu0',
+            },
+            {
+              label: 'Item menu 2',
+              link: { name: 'link-two' },
+              id: 'menu1',
+            },
+          ],
+          activeLink: { path: '/path' },
+        },
+      });
+      expect(wrapper.findAll('.active').length).toEqual(1);
+      expect(wrapper.findAll('.active')[0].text()).toEqual('Item menu 1');
+    });
+    it('should have active if item is string and route has same name', () => {
+      const { wrapper } = factory({
+        props: {
+          items: [
+            {
+              label: 'Item menu 1',
+              link: 'link-one',
+              id: 'menu0',
+            },
+            {
+              label: 'Item menu 2',
+              link: { name: 'link-two' },
+              id: 'menu1',
+            },
+          ],
+          activeLink: { name: 'link-one' },
+        },
+      });
+      expect(wrapper.findAll('.active').length).toEqual(1);
+      expect(wrapper.findAll('.active')[0].text()).toEqual('Item menu 1');
+    });
+    it('should have active if item is string and route has same path', () => {
+      const { wrapper } = factory({
+        props: {
+          items: [
+            {
+              label: 'Item menu 1',
+              link: '/link-one',
+              id: 'menu0',
+            },
+            {
+              label: 'Item menu 2',
+              link: { path: '/link-two' },
+              id: 'menu1',
+            },
+          ],
+          activeLink: { path: '/link-one' },
+        },
+      });
+      expect(wrapper.findAll('.active').length).toEqual(1);
+      expect(wrapper.findAll('.active')[0].text()).toEqual('Item menu 1');
+    });
+  });
+});

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

@@ -0,0 +1,187 @@
+import BmsMenuNav from '@/components/navigation/BmsMenuNav.vue';
+import { Activity, BookOpen, Settings } from 'lucide-vue-next';
+import { StatusType } from '../../models';
+
+export default {
+  title: 'Composants/navigation/MenuNav',
+  component: BmsMenuNav,
+  argTypes: {
+    items: {},
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BmsMenuNav,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsMenuNav v-bind="args">
+      <template v-if="args.additionalSlot" #additional>Additional</template>
+    </BmsMenuNav>
+  `,
+});
+
+export const WithParentsItems = Template.bind({});
+WithParentsItems.args = {
+  items: [
+    {
+      label: 'toto',
+      link: '/toto',
+      icon: Activity,
+      id: 'toto',
+    },
+    {
+      label: 'titi',
+      link: '/titi',
+      id: 'titi',
+      status: StatusType.Danger,
+    },
+    {
+      label: 'Parent',
+      items: [
+        {
+          label: 'tata',
+          link: '/tata',
+          icon: Activity,
+          id: 'tata',
+        },
+        {
+          label: 'tutu',
+          link: '/tutu',
+          id: 'tutu',
+        },
+      ],
+    },
+  ],
+  activeLink: { path: '/toto' },
+};
+
+export const WithLinkParent = Template.bind({});
+WithLinkParent.args = {
+  items: [
+    {
+      label: 'Parent',
+      link: '/toto',
+      icon: Settings,
+      id: 'toto',
+      items: [
+        {
+          label: 'titi',
+          link: '/titi',
+          id: 'titi',
+          icon: BookOpen,
+        },
+      ],
+    },
+  ],
+  activeLink: '',
+};
+
+export const WithOpenParentsItems = Template.bind({});
+WithOpenParentsItems.args = {
+  items: [
+    {
+      label: 'toto',
+      link: '/toto',
+      icon: Activity,
+      id: 'toto',
+    },
+    {
+      label: 'titi',
+      link: '/titi',
+      id: 'titi',
+    },
+    {
+      label: 'Parent',
+      open: true,
+      items: [
+        {
+          label: 'tata',
+          link: '/tata',
+          icon: Activity,
+          id: 'tata',
+        },
+        {
+          label: 'tutu',
+          link: '/tutu',
+          id: 'tutu',
+        },
+      ],
+    },
+  ],
+  activeLink: { path: '/toto' },
+};
+
+export const TargetLinkInParent = Template.bind({});
+TargetLinkInParent.args = {
+  items: [
+    {
+      label: 'toto',
+      link: '/toto',
+      icon: Activity,
+      id: 'toto',
+    },
+    {
+      label: 'titi',
+      link: '/titi',
+      id: 'titi',
+    },
+    {
+      label: 'Parent',
+      open: true,
+      items: [
+        {
+          label: 'tata',
+          link: '/tata',
+          icon: Activity,
+          id: 'tata',
+        },
+        {
+          label: 'tutu',
+          link: '/tutu',
+          id: 'tutu',
+        },
+      ],
+    },
+  ],
+  activeLink: { path: '/tutu' },
+};
+
+export const WithAdditionalSlot = Template.bind({});
+WithAdditionalSlot.args = {
+  items: [
+    {
+      label: 'toto',
+      link: '/toto',
+      icon: Activity,
+      id: 'toto',
+    },
+    {
+      label: 'titi',
+      link: '/titi',
+      id: 'titi',
+    },
+    {
+      label: 'Parent',
+      open: true,
+      items: [
+        {
+          label: 'tata',
+          link: '/tata',
+          icon: Activity,
+          id: 'tata',
+        },
+        {
+          label: 'tutu',
+          link: '/tutu',
+          id: 'tutu',
+        },
+      ],
+    },
+  ],
+  activeLink: { path: '/tutu' },
+  additionalSlot: true,
+};