@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/navigation/UiMenuItem.vue

@@ -0,0 +1,116 @@
+<template>
+  <BmsLink :to="(item as MenuItem).link" :target="target" :classes="classes">
+    <span class="bar">&nbsp;</span>
+    <component v-if="item.icon" :is="item.icon" :size="20" />
+    <span class="label"> {{ item.label }}</span>
+  </BmsLink>
+</template>
+
+<script lang="ts" setup>
+import { MenuItem } from '@/models/menu.model';
+import { computed } from 'vue';
+import BmsLink from '@/components/navigation/BmsLink.vue';
+
+const props = withDefaults(
+  defineProps<{
+    item: MenuItem;
+    active?: boolean;
+    target?: string;
+  }>(),
+  { active: false, target: '_self' },
+);
+
+const classes = computed(() => {
+  let classes: any = { menu__link: true, active: props.active };
+  if (props.item.status) {
+    classes[props.item.status] = true;
+  }
+  return classes;
+});
+</script>
+
+<style lang="scss">
+.menu__link {
+  --bar-color: transparent;
+  --label-color: var(--bms-font-color);
+
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  text-decoration: none;
+  color: inherit;
+  background-color: var(--bms-white);
+  width: 100%;
+  color: var(--label-color);
+
+  &.active {
+    --label-color: var(--bms-main-100);
+    --bar-color: var(--bms-main-100);
+  }
+
+  &:hover {
+    --bar-color: var(--bms-main-75);
+    --label-color: var(--bms-main-75);
+    text-decoration: none;
+  }
+
+  &.danger {
+    --label-color: var(--bms-red-100);
+
+    &.active {
+      --bar-color: var(--bms-red-100);
+    }
+
+    &:hover {
+      --bar-color: var(--bms-red-75);
+    }
+  }
+
+  &.warning {
+    --label-color: var(--bms-orange-100);
+
+    &.active {
+      --bar-color: var(--bms-orange-100);
+    }
+
+    &:hover {
+      --bar-color: var(--bms-orange-75);
+    }
+  }
+
+  &.success {
+    --label-color: var(--bms-green-100);
+
+    &.active {
+      --bar-color: var(--bms-green-100);
+    }
+
+    &:hover {
+      --bar-color: var(--bms-green-75);
+    }
+  }
+
+  &.information {
+    --label-color: var(--bms-grey-100);
+
+    &.active {
+      --bar-color: var(--bms-grey-100);
+    }
+
+    &:hover {
+      --bar-color: var(--bms-grey-75);
+    }
+  }
+
+  .bar {
+    width: 4px;
+    background-color: var(--bar-color);
+    align-self: stretch;
+  }
+
+  .label {
+    padding: 16px 16px 16px 0;
+    line-height: 16px;
+  }
+}
+</style>

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

@@ -0,0 +1,58 @@
+import UiMenuItem from '@/components/navigation/UiMenuItem.vue';
+import { ShieldAlert, ShieldCheck, ShieldOff } from 'lucide-vue-next';
+import { StatusType } from '../../models';
+
+export default {
+  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,
+    },
+  ],
+};

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

@@ -0,0 +1,56 @@
+import UiTab from '@/components/navigation/UiTab.vue';
+import { within } from 'storybook/test';
+
+export default {
+  title: 'Composants/navigation/UiTab',
+  component: UiTab,
+  argTypes: {
+    items: {},
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    UiTab,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UiTab v-bind="args" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  currentRoute: { path: 'toto' },
+  tab: { name: 'Titi', routePath: 'titi' },
+};
+
+export const Active = Template.bind({});
+Active.args = {
+  currentRoute: { path: 'titi-subRoute' },
+  tab: { name: 'Titi', routePath: 'titi' },
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  currentRoute: { path: 'toto' },
+  tab: { name: 'Titi', routePath: 'titi', disabled: true },
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  currentRoute: { path: 'toto' },
+  tab: { name: 'Titi', routePath: 'titi', error: true },
+};
+
+export const Hover = Template.bind({});
+Hover.args = {
+  currentRoute: { path: 'toto' },
+  tab: { name: 'Titi', routePath: 'titi' },
+};
+Hover.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await canvas.getByTestId('tab').classList.add('tab__hover');
+};

package/src/components/navigation/UiTab.vue

@@ -0,0 +1,71 @@
+<template>
+  <router-link
+    :to="tabTarget"
+    data-testid="tab"
+    class="tab"
+    :class="{ active: isTabSelected, error: tab.error, disabled: tab.disabled }"
+  >
+    <slot>{{ tab.name }}</slot>
+  </router-link>
+</template>
+
+<script lang="ts" setup>
+import { Tab } from '@/models/tab.model';
+import { ComputedRef, computed } from 'vue';
+import { RouteLocation, RouteLocationRaw } from 'vue-router';
+
+const props = withDefaults(
+  defineProps<{
+    currentRoute: RouteLocation;
+    tab: Tab;
+  }>(),
+  {},
+);
+
+const isTabSelected: ComputedRef<boolean> = computed(() =>
+  props.tab.routePath
+    ? props.currentRoute.path.includes(props.tab.routePath)
+    : props.tab.routeName
+      ? !!props.currentRoute.name &&
+        (props.currentRoute.name as string).includes(props.tab.routeName)
+      : false,
+);
+
+const tabTarget: ComputedRef<RouteLocationRaw> = computed(() =>
+  props.tab.routePath
+    ? { path: props.tab.routePath }
+    : { name: props.tab.routeName },
+);
+</script>
+
+<style lang="scss" scoped>
+.tab {
+  --tab-border-color: transparent;
+  --tab-color: var(--bms-font-color);
+
+  color: var(--tab-color);
+  text-decoration: none;
+  border-bottom: 4px solid var(--tab-border-color);
+  padding: 0 8px 16px 8px;
+
+  &:hover,
+  &__hover {
+    --tab-border-color: var(--bms-main-50);
+  }
+
+  &.active {
+    --tab-border-color: var(--bms-main-100);
+  }
+
+  &.disabled {
+    --tab-border-color: var(transparent);
+    --tab-color: var(--bms-grey-50);
+    pointer-events: none;
+  }
+
+  &.error {
+    --tab-border-color: var(--bms-danger-color);
+    --tab-color: var(--bms-danger-color);
+  }
+}
+</style>

package/src/components/navigation/UiTenantImage.vue

@@ -0,0 +1,22 @@
+<template>
+  <img v-if="tenant?.logoFile" :src="tenant?.logoFile" class="site-logo" />
+  <BmsCocarde v-else :initials="getInitials(tenant.label)" size="small" />
+</template>
+
+<script setup lang="ts">
+import { getInitials } from '@/helpers/cocarde.helper';
+import { BmsCocarde } from '@/index';
+import { Tenant } from '@/models';
+
+defineProps<{
+  tenant: Tenant;
+}>();
+</script>
+
+<style>
+.site-logo {
+  display: block;
+  border: 1px solid var(--bms-grey-10);
+  border-radius: 50%;
+}
+</style>

package/src/components/navigation/UiTenantLabel.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="tenantsMenu-tenants-item" @click="emits('changeTenant')">
+    <div
+      class="tenantsMenu-tenants-item-label"
+      :data-testid="`item-${tenant.id}`"
+    >
+      <Clock :size="12" v-if="tenant.isFavorite" />
+      <UiTenantImage :tenant="tenant" />
+      {{ tenant.label }}<em>- {{ tenant.information }}</em>
+    </div>
+    <BmsIconButton
+      class="remove-tenant-button"
+      v-if="tenant.isFavorite"
+      @click.stop="emits('removeFavorite')"
+    >
+      <X />
+    </BmsIconButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Clock, X } from 'lucide-vue-next';
+import { Tenant } from '@/models';
+import BmsIconButton from '../button/BmsIconButton.vue';
+import UiTenantImage from './UiTenantImage.vue';
+
+defineProps<{
+  tenant: Tenant;
+}>();
+
+const emits = defineEmits<{
+  removeFavorite: [];
+  changeTenant: [];
+}>();
+</script>
+
+<style scoped lang="scss">
+.tenantsMenu-tenants-item {
+  min-height: 40px;
+  padding: 4px 16px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+
+  &:hover {
+    background: var(--bms-grey-10);
+
+    :deep(.remove-tenant-button) {
+      display: inherit;
+      &:hover {
+        background-color: var(--bms-grey-25);
+      }
+    }
+  }
+
+  &-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+    gap: 0.2em;
+
+    em {
+      opacity: 0.48;
+      font-size: 12px;
+      font-style: normal;
+      margin-left: 0.4em;
+    }
+  }
+
+  :deep(svg) {
+    flex-shrink: 0;
+  }
+
+  .site-logo {
+    width: 1em;
+    height: 1em;
+  }
+  :deep(.remove-tenant-button) {
+    padding: 0;
+    display: none;
+  }
+
+  .ui-button.is-icon.is-compact {
+    min-height: auto;
+    min-width: auto;
+    width: auto;
+  }
+}
+</style>

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

@@ -0,0 +1,167 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import UiTenantSwitcher from '@/components/navigation/UiTenantSwitcher.vue';
+import { field } from '@/plugins/field';
+
+const intersectionObserverMock = () => ({
+  observe: () => null,
+});
+
+const UiTenantSwitcherFactory = (props: any) => {
+  const wrapper = mount(UiTenantSwitcher, {
+    global: {
+      plugins: [field],
+      stubs: {
+        Teleport: true,
+      },
+    },
+    props: {
+      ...props,
+      to: 'div#App',
+    },
+  });
+
+  return {
+    wrapper,
+  };
+};
+
+describe('UiTenantSwitcherFactory', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    window.IntersectionObserver = vi
+      .fn()
+      .mockImplementation(intersectionObserverMock);
+  });
+
+  describe('filteredTenants', () => {
+    it('should retrieve tenants based on tenant id', () => {
+      const { wrapper } = UiTenantSwitcherFactory({
+        visible: true,
+        tenants: [
+          {
+            information: 'blue team',
+            label: 'First tenant',
+          },
+          {
+            information: 'red team',
+            label: 'Second tenant',
+          },
+        ],
+      });
+      (wrapper.vm as any).search = 'blue';
+      expect((wrapper.vm as any).filteredTenants).toEqual([
+        {
+          information: 'blue team',
+          label: 'First tenant',
+        },
+      ]);
+    });
+    it('should retrieve tenants based on tenant label', () => {
+      const { wrapper } = UiTenantSwitcherFactory({
+        visible: true,
+        tenants: [
+          {
+            information: 'blue team',
+            label: 'First tenant',
+          },
+          {
+            information: 'red team',
+            label: 'Second tenant',
+          },
+        ],
+      });
+      (wrapper.vm as any).search = 'Sec';
+      expect((wrapper.vm as any).filteredTenants).toEqual([
+        {
+          information: 'red team',
+          label: 'Second tenant',
+        },
+      ]);
+    });
+  });
+
+  describe('remove favourite tenant', () => {
+    it('should emit remove event when click on close icon', () => {
+      const { wrapper } = UiTenantSwitcherFactory({
+        visible: true,
+        tenants: [
+          {
+            information: 'blue team',
+            label: 'First tenant',
+            isFavorite: true,
+          },
+          {
+            information: 'red team',
+            label: 'Second tenant',
+          },
+        ],
+      });
+      const items = wrapper.findAll('.tenantsMenu-tenants-item');
+      items[0].find('.remove-tenant-button').trigger('click');
+      expect((wrapper as any).emitted()['removeFavoriteTenant'][0][0]).toEqual({
+        information: 'blue team',
+        label: 'First tenant',
+        isFavorite: true,
+      });
+      expect(wrapper.emitted()['changeTenant']).toEqual(undefined);
+    });
+  });
+
+  describe('change tenant', () => {
+    it('should emit changeTenant event when click on tenant', () => {
+      const { wrapper } = UiTenantSwitcherFactory({
+        visible: true,
+        tenants: [
+          {
+            information: 'blue team',
+            label: 'First tenant',
+            isFavorite: true,
+          },
+          {
+            information: 'red team',
+            label: 'Second tenant',
+          },
+        ],
+      });
+      const items = wrapper.findAll('.tenantsMenu-tenants-item');
+      items[1].trigger('click');
+      expect(wrapper.emitted()['removeFavoriTetenant']).toEqual(undefined);
+      expect((wrapper as any).emitted()['changeTenant'][0][0]).toEqual({
+        information: 'red team',
+        label: 'Second tenant',
+      });
+    });
+  });
+
+  describe('keypress', () => {
+    it('should select first entry when pressing enter', () => {
+      const { wrapper } = UiTenantSwitcherFactory({
+        visible: true,
+        tenants: [
+          {
+            information: 'blue team',
+            label: 'First tenant',
+          },
+          {
+            information: 'red team',
+            label: 'Second tenant',
+          },
+        ],
+      });
+      (wrapper.vm as any).onEnterKeyPress();
+      expect((wrapper as any).emitted()['changeTenant'][0][0]).toEqual({
+        information: 'blue team',
+        label: 'First tenant',
+      });
+    });
+    it('should not do anything when pressing enter if no tenants', () => {
+      const { wrapper } = UiTenantSwitcherFactory({
+        visible: true,
+        tenants: [],
+      });
+      (wrapper.vm as any).onEnterKeyPress();
+      expect(wrapper.emitted()['changeTenant']).toBeFalsy();
+    });
+  });
+});

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

@@ -0,0 +1,70 @@
+import UiTenantSwitcher from './UiTenantSwitcher.vue';
+
+export default {
+  title: 'Composants/navigation/UiTenantSwitcher',
+  component: UiTenantSwitcher,
+};
+
+const Template = (args) => ({
+  components: {
+    UiTenantSwitcher,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <UiTenantSwitcher v-bind="args"/>
+    `,
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  visible: true,
+  to: 'div#anchor',
+  selectTenantPlaceholder: 'placeholder',
+  tenants: [
+    {
+      id: 'siteId',
+      information: 'ouest-france',
+      label: 'Ouest France',
+    },
+  ],
+};
+
+export const WithFavoritesSites = Template.bind({});
+
+WithFavoritesSites.args = {
+  visible: true,
+  to: 'div#anchor',
+  selectTenantPlaceholder: 'placeholder',
+  tenants: [
+    {
+      id: 'siteId1',
+      information: 'siteinformation1',
+      label: 'Mon Site 1 with a super long that should overflow',
+    },
+    {
+      id: 'siteId2',
+      information: 'siteinformation2',
+      label: 'Mon Site 2',
+      isFavorite: true,
+    },
+    {
+      id: 'siteId3',
+      information: 'siteinformation3',
+      label: 'Mon Site 3',
+    },
+    {
+      id: 'siteId4',
+      information: 'siteinformation4',
+      label: 'Mon Site 4',
+    },
+    {
+      id: 'siteId5',
+      information: 'siteinformation5',
+      label: 'Mon Site 5',
+      isFavorite: true,
+    },
+  ],
+};