@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/feedback/BmsBadge.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { StatusType } from '@/models';
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    pending: number;
+    color?: StatusType;
+  }>(),
+  { pending: 0, color: StatusType.Information },
+);
+
+const classes = computed(() => {
+  return `is-${props.color}`;
+});
+const sanitizedPending = computed(() => {
+  return props.pending > 99 ? '99+' : props.pending;
+});
+</script>
+
+<template>
+  <span class="ui-badge__container" v-if="pending > 0">
+    <slot></slot>
+    <span v-if="pending > 0" :class="classes" class="ui-badge__badge">
+      {{ sanitizedPending }}
+    </span>
+  </span>
+  <template v-else>
+    <slot></slot>
+  </template>
+</template>
+
+<style scoped lang="scss">
+.ui-badge__container {
+  display: flex;
+
+  &.not-pending {
+    display: initial;
+  }
+
+  .ui-badge__badge {
+    margin-top: -3px;
+    color: white;
+    border-radius: 50%;
+    font-size: 0.5em;
+    height: 1.9em;
+    width: 1.9em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &.is-default {
+      background-color: var(--bms-grey-100);
+    }
+
+    &.is-information {
+      background-color: var(--bms-main-100);
+    }
+
+    &.is-warning {
+      background-color: var(--bms-orange-100);
+    }
+
+    &.is-danger {
+      background-color: var(--bms-red-100);
+    }
+
+    &.is-success {
+      background-color: var(--bms-green-100);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,59 @@
+import BmsCaption from './BmsCaption.vue';
+import { StatusType } from '@/models/status-type.model';
+
+export default {
+  title: 'shared/BmsCaption',
+  component: BmsCaption,
+};
+
+const Template = (args) => ({
+  components: {
+    BmsCaption,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <section>
+        <template v-for="caption in args.captions">
+          <BmsCaption v-bind="caption"/>
+        </template>
+      </section>
+    `,
+});
+
+export const All = Template.bind({});
+All.args = {
+  captions: [
+    { caption: 'Retro Compat : this my caption' },
+    {
+      caption: {
+        label: 'Default : this my caption',
+        mode: StatusType.Default,
+      },
+    },
+    {
+      caption: {
+        label: 'Success : this my caption',
+        mode: StatusType.Success,
+      },
+    },
+    {
+      caption: {
+        label: 'Warning : this my caption',
+        mode: StatusType.Warning,
+      },
+    },
+    {
+      caption: { label: 'Danger : this my caption', mode: StatusType.Danger },
+    },
+    {
+      caption: {
+        label:
+          'Danger : this my caption with <script lang="js"> alert("super!");</script><a onclick=alert("toto") class=danger href=www.google.fr target=_blank>HTML</a>',
+        labelAsHtml: true,
+        mode: StatusType.Danger,
+      },
+    },
+  ],
+};

package/src/components/feedback/BmsCaption.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="caption" :class="`caption-${computedCaption.mode}`">
+    <span class="icon" v-if="computedCaption.mode != StatusType.Default"
+      ><alertIcon :size="13"
+    /></span>
+    <span class="label" v-html="sanitizeHtml(computedCaption.label)" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { AlertOctagon, AlertTriangle, CheckCircle } from 'lucide-vue-next';
+import { type Component, computed, ComputedRef } from 'vue';
+import { type Caption, StatusType } from '@/models';
+import { convertStringToCaption } from '@/helpers';
+import { sanitizeHtml } from '@/helpers/string.helper';
+
+const props = defineProps<{ caption: string | Caption }>();
+
+const computedCaption: ComputedRef<Caption> = computed(() => {
+  let caption: Caption = convertStringToCaption(props.caption);
+  if (caption.mode === null) {
+    caption.mode = StatusType.Default;
+  }
+  return caption;
+});
+
+const alertIcon: ComputedRef<Component> = computed(() => {
+  const mode = computedCaption.value.mode || StatusType.Default;
+  switch (mode) {
+    case StatusType.Danger:
+      return AlertOctagon;
+    case StatusType.Warning:
+      return AlertTriangle;
+    case StatusType.Success:
+      return CheckCircle;
+    default:
+      return CheckCircle;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.caption {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  cursor: default;
+  font-size: 14px;
+  color: var(--bms-grey-75);
+
+  :deep(*) {
+    color: var(--bms-grey-75);
+  }
+
+  &-success {
+    color: var(--bms-success-color);
+
+    :deep(*) {
+      color: var(--bms-success-color);
+    }
+  }
+
+  &-danger {
+    color: var(--bms-danger-color);
+
+    :deep(*) {
+      color: var(--bms-danger-color);
+    }
+  }
+
+  &-warning {
+    color: var(--bms-warning-color);
+
+    :deep(*) {
+      color: var(--bms-warning-color);
+    }
+  }
+
+  .icon {
+    margin-right: 5px;
+  }
+
+  .label {
+    flex-grow: 1;
+    align-self: center;
+  }
+}
+</style>

package/src/components/feedback/BmsCircularProgress.spec.ts

@@ -0,0 +1,14 @@
+import BmsCircularProgress from '@/components/feedback/BmsCircularProgress.vue';
+import { mount } from '@vue/test-utils';
+
+describe('BmsCircularProgress', () => {
+  it('should mount component correctly', async () => {
+    const wrapper = mount(BmsCircularProgress, {
+      props: {
+        progress: 42,
+      },
+    });
+
+    expect(wrapper.text()).toContain('42%');
+  });
+});

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

@@ -0,0 +1,45 @@
+import BmsCircularProgress from '@/components/feedback/BmsCircularProgress.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Composants/feedback/CircularProgress',
+  component: BmsCircularProgress,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    progress: {
+      control: { type: 'number' },
+    },
+  },
+};
+
+// 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: {
+    BmsCircularProgress,
+  },
+  // 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: `
+    <BmsCircularProgress v-bind="args" />
+  `,
+});
+
+export const NoProgress = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+NoProgress.args = {
+  progress: 0,
+};
+
+export const InProgress = Template.bind({});
+InProgress.args = {
+  progress: 30,
+};
+
+export const ProgressCompleted = Template.bind({});
+ProgressCompleted.args = {
+  progress: 100,
+};

package/src/components/feedback/BmsCircularProgress.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+defineProps(['progress']);
+</script>
+
+<template>
+  <div class="circular-progress">
+    <svg v-if="progress" viewBox="0 0 100 100">
+      <g transform="rotate(-90, 50, 50)">
+        <circle
+          opacity=".08"
+          r="45"
+          cx="50"
+          cy="50"
+          fill="transparent"
+          stroke="black"
+          stroke-linecap="round"
+        ></circle>
+        <circle
+          r="45"
+          cx="50"
+          cy="50"
+          fill="transparent"
+          stroke="currentColor"
+          stroke-linecap="round"
+          :stroke-dashoffset="283 - (progress * 283) / 100"
+          stroke-dasharray="283"
+        ></circle>
+      </g>
+    </svg>
+
+    <div class="percent">{{ progress }}%</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.circular-progress {
+  --size: 4em;
+  --stroke-width: 8;
+
+  display: inline-block;
+  width: var(--size);
+  height: var(--size);
+  position: relative;
+  .percent {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    white-space: nowrap;
+    line-height: 1;
+    color: var(--text-color);
+  }
+
+  svg {
+    width: var(--size);
+    height: var(--size);
+    stroke-width: var(--stroke-width);
+
+    circle {
+      transition: stroke-dashoffset 0.2s ease-in-out;
+    }
+  }
+}
+</style>

package/src/components/feedback/BmsLoader.spec.ts

@@ -0,0 +1,7 @@
+import { transformIntoPx } from '@/components/feedback/BmsLoader.vue';
+
+describe('BmsLoader', () => {
+  it('should calculate size correctly', async () => {
+    expect(transformIntoPx(42)).toBe('42px');
+  });
+});

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

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

package/src/components/feedback/BmsLoader.vue

@@ -0,0 +1,82 @@
+<script lang="ts">
+// Export for unit tests
+export function transformIntoPx(totransform: string | number) {
+  return typeof totransform === 'string' ? totransform : `${totransform}px`;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    size?: string | number;
+  }>(),
+  { size: 'inherit' },
+);
+
+const sizeInPx = computed<string>(() => {
+  return transformIntoPx(props.size);
+});
+</script>
+
+<template>
+  <div class="bms-loader">
+    <svg viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+          <stop stop-color="currentColor" stop-opacity="0" offset="0%" />
+          <stop
+            stop-color="currentColor"
+            stop-opacity=".631"
+            offset="63.146%"
+          />
+          <stop stop-color="currentColor" offset="100%" />
+        </linearGradient>
+      </defs>
+      <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)">
+          <path
+            d="M36 18c0-9.94-8.06-18-18-18"
+            id="Oval-2"
+            stroke="url(#a)"
+            stroke-width="2"
+          >
+            <animateTransform
+              attributeName="transform"
+              type="rotate"
+              from="0 18 18"
+              to="360 18 18"
+              dur="0.9s"
+              repeatCount="indefinite"
+            />
+          </path>
+          <circle fill="#fff" cx="36" cy="18" r="1">
+            <animateTransform
+              attributeName="transform"
+              type="rotate"
+              from="0 18 18"
+              to="360 18 18"
+              dur="0.9s"
+              repeatCount="indefinite"
+            />
+          </circle>
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bms-loader {
+  font-size: v-bind('sizeInPx');
+  color: var(--bms-main-100, currentColor);
+  display: inline-block;
+
+  svg {
+    width: 1em;
+    height: 1em;
+    display: block;
+  }
+}
+</style>

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

@@ -0,0 +1,65 @@
+import BmsTooltip from './BmsTooltip.vue';
+import BmsSection from '../layout/BmsSection.vue';
+import { TooltipDirection } from '../../models';
+
+export default {
+  title: 'Composants/feedback/BmsTooltip',
+  component: BmsTooltip,
+};
+
+const Template = (args) => ({
+  components: {
+    BmsTooltip,
+    BmsSection,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsSection :style="'border'">
+      <div style="display: flex; gap:1em;"> 
+        <BmsTooltip
+          v-for="dir in ['bottom','right','left','top']" :key="dir"
+          tooltipText="this my tooltip message"
+          :direction="dir"
+        >
+          <div
+            style="border: 1px solid var(--bms-grey-100);padding:5px;">
+            anchor {{ dir }}
+          </div>
+       </BmsTooltip>
+      </div>
+    </BmsSection>
+  `,
+});
+
+export const allDirections = Template.bind({});
+allDirections.args = {};
+
+const TemplateSlot = (args) => ({
+  components: {
+    BmsTooltip,
+    BmsSection,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+        <BmsTooltip :tooltip-text="args.tooltipText">
+          <template #default>
+            <div
+              style="border: 1px solid var(--bms-grey-100);padding:5px;">
+              anchor 
+            </div>
+          </template>
+          <template #tooltipText v-if="!args.tooltipText">
+            this is my <strong>tooltip</strong> with html <br/>
+            and a line break
+          </template>
+       </BmsTooltip>
+  `,
+});
+export const WithSlot = TemplateSlot.bind({});
+WithSlot.args = {};
+export const WithTooltipText = TemplateSlot.bind({});
+WithTooltipText.args = { tooltipText: 'this is my tooltip' };

package/src/components/feedback/BmsTooltip.vue

@@ -0,0 +1,102 @@
+<template>
+  <Teleport to="body">
+    <UiTooltip
+      v-if="anchorVisibility"
+      :visible="showToolTip && activated"
+      :direction="direction"
+      :getAnchorElementValues="getAnchorElementValues"
+    >
+      <slot name="tooltipText">
+        {{ tooltipText }}
+      </slot>
+    </UiTooltip>
+  </Teleport>
+
+  <div ref="tooltipAnchor" class="bms-tooltip-anchor-wrapper" v-if="activated">
+    <slot></slot>
+  </div>
+
+  <slot v-if="!activated"></slot>
+</template>
+
+<script setup lang="ts">
+import { TooltipDirection } from '@/models';
+import {
+  useMouseInElement,
+  MaybeElementRef,
+  useElementVisibility,
+} from '@vueuse/core';
+import { ref, watchEffect } from 'vue';
+import UiTooltip from './UiTooltip.vue';
+
+const tooltip = ref(null);
+const tooltipAnchor = ref<Element>();
+const showToolTip = ref(true);
+
+const { isOutside } = useMouseInElement(tooltipAnchor as MaybeElementRef);
+const anchorVisibility = useElementVisibility(tooltipAnchor as MaybeElementRef);
+
+withDefaults(
+  defineProps<{
+    tooltipText?: string;
+    direction?: TooltipDirection;
+    focus?: boolean;
+    activated?: boolean;
+  }>(),
+  {
+    tooltipText: '',
+    direction: TooltipDirection.Bottom,
+    focus: false,
+    activated: true,
+  },
+);
+
+const isUnderOverlay = (): boolean => {
+  const overlays = Array.from(document.getElementsByClassName('overlay'));
+  if (overlays.length === 0) {
+    return false;
+  }
+  return !overlays.find((overlay) => overlay.contains(tooltip.value));
+};
+
+const getAnchorElementValues = () => {
+  if (!tooltipAnchor.value) return;
+  const { top, bottom, left, right, width, height } =
+    tooltipAnchor.value.getBoundingClientRect();
+
+  return {
+    top: top + window.scrollY,
+    left: left + window.scrollX,
+    right,
+    bottom,
+    width,
+    height,
+  };
+};
+
+watchEffect(() => {
+  if (isOutside.value) {
+    toggleTooltip(false);
+  } else {
+    if (!isUnderOverlay()) {
+      toggleTooltip(true);
+    }
+  }
+});
+
+function toggleTooltip(state: boolean) {
+  showToolTip.value = state;
+}
+
+defineExpose({
+  toggle: toggleTooltip,
+});
+</script>
+
+<style lang="scss" scoped>
+.bms-tooltip-anchor-wrapper {
+  position: relative;
+  display: inline-block;
+  outline: none;
+}
+</style>

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

@@ -0,0 +1,37 @@
+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',
+  },
+};