@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/layout/BmsModal.vue

@@ -0,0 +1,359 @@
+<script setup lang="ts">
+import { AlertCircle, AlertTriangle, CheckCircle, X } from 'lucide-vue-next';
+import { type Component, computed, onMounted, onUnmounted, ref } from 'vue';
+import BmsButton from '../button/BmsButton.vue';
+import BmsIconButton from '../button/BmsIconButton.vue';
+import BmsLoader from '../feedback/BmsLoader.vue';
+import BmsOverlay from './BmsOverlay.vue';
+import { StatusType, ModalActionButton } from '@/models';
+import { onClickOutside } from '@vueuse/core';
+import { v4 as uuid } from 'uuid';
+
+interface Props {
+  modelValue: any;
+  backdropDismiss?: boolean;
+  loading?: boolean;
+  loadingText?: string;
+  closable?: boolean;
+  title?: string;
+  submitLabel?: string;
+  cancelLabel?: string;
+  buttons?: ModalActionButton[];
+  type?: StatusType;
+  priority?: boolean;
+  submitAction?: () => Promise<boolean>;
+  cancelAction?: () => Promise<boolean>;
+}
+
+const emit = defineEmits(['update:modelValue', 'submit', 'close']);
+defineExpose({ close: dismissModal });
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  backdropDismiss: true,
+  closable: true,
+  submitLabel: 'Ok',
+  cancelLabel: 'Annuler',
+  loading: false,
+  type: StatusType.Default,
+  priority: false,
+});
+
+const innerModal = ref(null);
+const id = ref(uuid());
+onClickOutside(innerModal, (event: PointerEvent) => {
+  if (
+    event.target &&
+    (event.target as HTMLElement)
+      .getAttribute('data-testid')
+      ?.includes(id.value)
+  ) {
+    //prevent overlay over modal and modal in modal
+    backdropClick();
+  }
+});
+
+const isModalClosable = computed<boolean>(() => {
+  return props.closable && !props.loading;
+});
+
+const buttons = computed<ModalActionButton[]>(() => {
+  return (
+    props.buttons || [
+      {
+        label: props.cancelLabel,
+        role: 'cancel',
+        action: props.cancelAction || (async () => true),
+        mode: StatusType.Default,
+      },
+      {
+        label: props.submitLabel,
+        role: 'submit',
+        action: props.submitAction || (async () => true),
+        mode:
+          props.type === StatusType.Danger
+            ? StatusType.Danger
+            : StatusType.Default,
+      },
+    ]
+  );
+});
+
+const titleComponent = computed<Component>(() => {
+  switch (props.type) {
+    case StatusType.Success:
+      return CheckCircle;
+    case StatusType.Warning:
+      return AlertTriangle;
+    case StatusType.Danger:
+      return AlertCircle;
+    default:
+      return CheckCircle;
+  }
+});
+
+function submitModal() {
+  emit('submit');
+  dismissModal();
+}
+
+function onKeyPress(e: KeyboardEvent) {
+  if (props.modelValue && props.backdropDismiss && e.key === 'Escape') {
+    dismissModal();
+    return;
+  }
+  if (props.modelValue && e.key === 'Enter') {
+    submitModal();
+    return;
+  }
+}
+
+async function callButtonAction(button: ModalActionButton) {
+  if (button?.action && !button.disabled) {
+    const shouldClose = await button.action();
+
+    if (shouldClose) {
+      button.role === 'cancel' ? dismissModal() : submitModal();
+    }
+  }
+}
+
+function dismissModal() {
+  if (!isModalClosable.value) {
+    return;
+  }
+
+  emit('update:modelValue', undefined);
+  emit('close');
+}
+
+function backdropClick() {
+  if (!props.backdropDismiss) {
+    return;
+  }
+
+  dismissModal();
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onKeyPress);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKeyPress);
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition :duration="300" name="content-fade">
+      <BmsOverlay
+        :active="!!props.modelValue"
+        data-testid="backdrop-modal"
+        :priority="priority"
+      >
+        <div class="ui-modal" :data-testid="`modal-${id}`" :class="props.type">
+          <article class="ui-modal__inner" ref="innerModal">
+            <header class="ui-modal__header">
+              <div class="ui-modal__header-inner">
+                <slot name="header">
+                  <h1 class="ui-modal__title">
+                    <component
+                      v-if="props.type !== StatusType.Default"
+                      :is="titleComponent"
+                      class="title-indicator"
+                      :size="20"
+                    />
+                    <slot name="title" :modal-data="props.modelValue">
+                      {{ title }}
+                    </slot>
+                  </h1></slot
+                >
+              </div>
+
+              <BmsIconButton
+                :disabled="!isModalClosable"
+                @click="dismissModal"
+                data-testid="close-modal"
+              >
+                <X />
+              </BmsIconButton>
+            </header>
+
+            <main class="ui-modal__content">
+              <slot :modal-data="props.modelValue"></slot>
+            </main>
+
+            <footer class="ui-modal__footer">
+              <slot name="footer" :modal-data="props.modelValue">
+                <div class="ui-modal__buttons">
+                  <slot
+                    name="buttons"
+                    :close="dismissModal"
+                    :modal-data="props.modelValue"
+                  >
+                    <BmsButton
+                      v-for="button in buttons"
+                      :key="button.label + button.role"
+                      :type="button.role === 'cancel' ? 'secondary' : 'primary'"
+                      :disabled="!isModalClosable || button.disabled"
+                      :mode="button.mode"
+                      @click="callButtonAction(button)"
+                      :data-testid="button.role + '-button'"
+                      >{{ button.label }}</BmsButton
+                    >
+                  </slot>
+                </div>
+              </slot>
+            </footer>
+
+            <Transition name="fade">
+              <div v-if="loading" class="ui-modal__loader">
+                <BmsLoader :size="64" />
+                <p v-if="loadingText">{{ loadingText }}</p>
+              </div>
+            </Transition>
+          </article>
+        </div>
+      </BmsOverlay>
+    </Transition>
+  </Teleport>
+</template>
+
+<style lang="scss" scoped>
+.ui-modal {
+  --modal-header-border-size: 1px;
+  --modal-header-color: var(--bms-grey-10);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+
+  &.Default {
+    --modal-header-border-size: 1px;
+    --modal-header-color: var(--bms-grey-10);
+  }
+
+  &.success {
+    --modal-header-border-size: 4px;
+    --modal-header-color: var(--bms-success-color);
+  }
+
+  &.warning {
+    --modal-header-border-size: 4px;
+    --modal-header-color: var(--bms-warning-color);
+  }
+
+  &.danger {
+    --modal-header-border-size: 4px;
+    --modal-header-color: var(--bms-danger-color);
+  }
+
+  &__loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    gap: 1em;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: var(--bms-white);
+
+    p {
+      margin: 0;
+      font-size: 0.88em;
+    }
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 0;
+    font-size: 1.5em;
+    font-weight: bold;
+
+    .title-indicator {
+      color: var(--modal-header-color);
+    }
+  }
+
+  &__inner {
+    position: relative;
+    pointer-events: all;
+    background: var(--bms-white);
+    min-width: 32em;
+    max-height: 80vh;
+    max-width: 80vw;
+    overflow: auto;
+    padding: 1em;
+    border-radius: var(--bms-border-radius-large);
+  }
+
+  &__content {
+    margin-top: 1rem;
+  }
+
+  &__header,
+  &__footer {
+    margin: -1em;
+    position: sticky;
+    background: var(--bms-white);
+  }
+
+  &__header {
+    padding: 1em 1em 0.5em 1em;
+    border-bottom: var(--modal-header-border-size) solid
+      var(--modal-header-color);
+    margin-bottom: 0;
+    top: -1em;
+    display: flex;
+
+    &-inner {
+      flex: 1 1 auto;
+    }
+  }
+
+  &__footer {
+    padding: 1em;
+    margin-top: 0;
+    bottom: -1em;
+  }
+
+  &__buttons {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 1em;
+  }
+}
+
+.content-fade-enter-active,
+.content-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.content-fade-enter-from,
+.content-fade-leave-to {
+  opacity: 0;
+}
+
+.content-fade-enter-active .ui-modal,
+.content-fade-leave-active .ui-modal {
+  transition: transform 0.3s ease;
+}
+
+.content-fade-enter-from .ui-modal,
+.content-fade-leave-to .ui-modal {
+  transform: scale(0.8);
+}
+</style>

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

@@ -0,0 +1,34 @@
+import BmsOverlay from '@/components/layout/BmsOverlay.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Composants/layout/Overlay',
+  component: BmsOverlay,
+  argTypes: {
+    active: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+// 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: {
+    BmsOverlay,
+  },
+  // 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: `
+    <BmsOverlay v-bind="args" />
+  `,
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Primary.args = {
+  active: true,
+};

package/src/components/layout/BmsOverlay.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+defineProps<{
+  active: boolean;
+  priority?: boolean;
+}>();
+</script>
+
+<template>
+  <div v-if="active" class="overlay" :class="{ priority }">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 10;
+  background: rgba(82, 100, 118, 0.3);
+}
+
+.priority {
+  z-index: 20;
+}
+</style>

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

@@ -0,0 +1,45 @@
+import BmsInputText from '@/components/form/BmsInputText.vue';
+import BmsSection from '@/components/layout/BmsSection.vue';
+
+export default {
+  title: 'Composants/layout/Section',
+  component: BmsSection,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BmsInputText,
+    BmsSection,
+  },
+  setup() {
+    return { args };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: `
+  <BmsSection v-bind="args">
+    <template #header>
+        <h2>Titre de la première section</h2>
+    </template>
+    <template #default>
+    <div>My great content</div>
+    <div>My great content</div>
+    <div>My great content</div>
+    <div>My great content</div>
+    <div>My great content</div>
+    <div>My great content</div>
+        
+    </template>
+  </BmsSection>
+  `,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {};
+
+export const Bordered = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Bordered.args = {
+  style: 'border',
+};

package/src/components/layout/BmsSection.vue

@@ -0,0 +1,35 @@
+<template>
+  <section :class="style">
+    <div class="header">
+      <slot name="header"></slot>
+    </div>
+    <slot></slot>
+  </section>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{ style?: 'flat' | 'border' }>(), { style: 'flat' });
+</script>
+
+<style scoped lang="scss">
+.header:deep(h1),
+.header:deep(h2),
+.header:deep(h3),
+.header:deep(h4),
+.header:deep(h5) {
+  margin-top: 0;
+}
+
+.flat {
+  border: none;
+  background: none;
+  padding: 0;
+}
+
+.border {
+  border: 1px solid var(--bms-grey-10);
+  background-color: var(--bms-white);
+  border-radius: var(--bms-border-radius-large);
+  padding: 1em 2em 1em 2em;
+}
+</style>

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

@@ -0,0 +1,71 @@
+import BmsStep from '@/components/layout/BmsStep.vue';
+
+export default {
+  title: 'Composants/layout/Step',
+  component: BmsStep,
+  argTypes: {
+    previousLabel: {
+      control: { type: 'text' },
+    },
+    nextLabel: {
+      control: { type: 'text' },
+    },
+    stepLabel: {
+      control: { type: 'text' },
+    },
+    isValid: {
+      control: { type: 'boolean' },
+    },
+    stepComplete: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BmsStep,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsStep v-bind="args">
+      <div>This is a step content</div>
+      <template v-if="args.actionsSlot" #actions>
+        <div>New actions</div>
+      </template>
+    </BmsStep>
+  `,
+});
+
+export const Empty = Template.bind({});
+Empty.args = {
+  stepLabel: 'Label',
+  stepComplete: 'false',
+  previousLabel: '',
+  nextLabel: '',
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  stepLabel: 'Label',
+  stepComplete: 'true',
+};
+
+export const Invalid = Template.bind({});
+Invalid.args = {
+  stepLabel: 'Label',
+  stepComplete: 'true',
+  previousLabel: 'Un autre bouton',
+  nextLabel: 'Un bouton',
+  isValid: false,
+};
+
+export const CustomActions = Template.bind({});
+CustomActions.args = {
+  stepLabel: 'Label',
+  stepComplete: 'true',
+  isValid: true,
+  actionsSlot: true,
+};

package/src/components/layout/BmsStep.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="step">
+    <slot />
+
+    <slot name="actions">
+      <div class="step-buttons">
+        <BmsButton
+          v-if="previousLabel"
+          data-test="previous-button"
+          name="previous"
+          type="secondary"
+          @click="$emit('previous')"
+        >
+          {{ previousLabel }}
+        </BmsButton>
+        <BmsButton
+          v-if="nextLabel"
+          data-test="next-button"
+          class=""
+          name="submit"
+          :disabled="!isValid"
+          @click="$emit('next')"
+        >
+          {{ nextLabel }}
+        </BmsButton>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BmsButton from '../button/BmsButton.vue';
+
+interface Props {
+  previousLabel?: string;
+  nextLabel?: string;
+  isValid?: boolean;
+  stepLabel: string;
+  stepComplete: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  previousLabel: 'Précédent',
+  nextLabel: 'Suivant',
+  isValid: true,
+});
+
+defineEmits(['previous', 'next']);
+</script>
+
+<style lang="scss" scoped>
+.step {
+  &-buttons {
+    padding-top: 2em;
+    display: flex;
+    justify-content: flex-end;
+    gap: 1em;
+  }
+}
+</style>

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

@@ -0,0 +1,57 @@
+import BmsStepper from '@/components/layout/BmsStepper.vue';
+import BmsStep from '@/components/layout/BmsStep.vue';
+
+export default {
+  title: 'Composants/layout/Stepper',
+  component: BmsStepper,
+  argTypes: {
+    currentStep: {
+      constrol: { type: 'number' },
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BmsStep,
+    BmsStepper,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsStepper v-bind="args">
+      <BmsStep
+        stepLabel="Label"
+        :stepComplete="false"
+        previousLabel=""
+      >
+        <div>Content 1</div>
+      </BmsStep>
+      <BmsStep
+        stepLabel="Label 2"
+        :stepComplete="false"
+      >
+        <div>Content 2</div>
+      </BmsStep>
+      <BmsStep
+        stepLabel="Label 3"
+        :stepComplete="true"
+        nextLabel=""
+      >
+        <div>Content 3</div>
+      </BmsStep>
+    </BmsStepper>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  currentStep: 0,
+};
+
+export const Clickable = Template.bind({});
+Clickable.args = {
+  currentStep: 0,
+  clickable: true,
+};