@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/button/BmsIconButton.stories.js

@@ -0,0 +1,67 @@
+import { Heart } from 'lucide-vue-next';
+import BmsIconButton from './BmsIconButton.vue';
+import { StatusType } from '@/models';
+import { vueRouter } from 'storybook-vue3-router';
+
+export default {
+  title: 'Composants/button/IconButton',
+  component: BmsIconButton,
+  decorators: [
+    vueRouter([
+      {
+        name: 'firstRoute',
+        path: '/toto',
+      },
+    ]),
+  ],
+  argTypes: {
+    mode: {
+      control: { type: 'select' },
+      options: ['default', 'danger'],
+    },
+    to: { control: { type: 'text' } },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BmsIconButton,
+    Heart,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <br><b>default</b>
+    <BmsIconButton v-bind="args"><Heart/></BmsIconButton>
+    <br>
+    <br> <b>:hover</b>
+    <BmsIconButton v-bind="args" class="_hover"><Heart/></BmsIconButton>
+
+
+    <br> <b>BmsIconButton must be on same alignment (using BmsLink and native button html tag)</b>
+    <BmsIconButton
+        tooltip-text="BmsIconButton with BmsLink"
+        to="/toto"
+    >
+      <Heart/>
+    </BmsIconButton>
+    <BmsIconButton
+        tooltip-text="BmsIconButton with button html tag"
+    >
+      <Heart />
+    </BmsIconButton>
+  `,
+});
+
+export const IconButton = Template.bind({});
+IconButton.args = {};
+
+export const IconButtonWithTargetLink = Template.bind({});
+IconButtonWithTargetLink.args = {
+  target: '_blank',
+  to: { name: 'firstRoute' },
+};
+
+export const DangerIconButton = Template.bind({});
+DangerIconButton.args = { mode: StatusType.Danger };

package/src/components/button/BmsIconButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <BmsTooltip
+    :activated="activated"
+    :tooltip-text="tooltipText"
+    :direction="tooltipDirection"
+  >
+    <UiButton v-bind="$attrs" icon :to="to" :target="target" :color="mode">
+      <slot></slot>
+    </UiButton>
+  </BmsTooltip>
+</template>
+
+<script setup lang="ts">
+import { RouteLocationRaw } from 'vue-router';
+import UiButton from './UiButton.vue';
+import { computed, ComputedRef } from 'vue';
+import { StatusType } from '@/models';
+import { BmsTooltip, TooltipDirection } from '@/index';
+
+interface Props {
+  to?: RouteLocationRaw | null;
+  target?: string;
+  mode?: StatusType.Danger | StatusType.Information;
+  tooltipText?: string;
+  tooltipDirection?: TooltipDirection;
+}
+const props = withDefaults(defineProps<Props>(), {
+  mode: StatusType.Information,
+  to: null,
+  tooltipText: '',
+});
+
+const activated: ComputedRef<boolean> = computed(() => !!props.tooltipText);
+</script>

package/src/components/button/UiButton.stories.js

@@ -0,0 +1,131 @@
+import UiButton from '@/components/button/UiButton.vue';
+import { StatusType } from '@/models/';
+import {
+  ArrowLeft,
+  ArrowRight,
+  Camera,
+  Heart,
+  Wand,
+  Citrus,
+} from 'lucide-vue-next';
+import { vueRouter } from 'storybook-vue3-router';
+
+export default {
+  title: 'Composants/button/UiButton',
+  component: UiButton,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: [
+        StatusType.Danger,
+        StatusType.Default,
+        StatusType.Success,
+        StatusType.Warning,
+        StatusType.Information,
+      ],
+    },
+    mode: {
+      control: { type: 'select' },
+      options: ['fill', 'ghost', 'outline'],
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['button', 'submit'],
+    },
+    to: { control: { type: 'text' } },
+  },
+  decorators: [
+    vueRouter([
+      {
+        name: 'route',
+        path: '/ma-route',
+      },
+    ]),
+  ],
+};
+
+const Template = (args) => ({
+  components: {
+    UiButton,
+    ArrowRight,
+    ArrowLeft,
+    Camera,
+    Heart,
+    Wand,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UiButton v-bind="args">Save me</UiButton>
+    <br>
+    <br>
+    <UiButton v-bind="args">
+      Next page
+      <template #end><ArrowRight /></template>
+    </UiButton>
+    <br>
+    <br>
+    <UiButton  v-bind="args">
+      <template #start>
+        <Heart/>
+      </template>
+      Icons left & right
+      <template #end> 
+        <Wand/>
+      </template>
+      </UiButton>
+      <br>
+      <br>
+    <UiButton v-bind="args">
+    <template #start><ArrowLeft /></template>
+    Retour
+    </UiButton>
+    <br>
+  `,
+});
+
+const TemplateIcon = ({ mode }) => ({
+  components: {
+    UiButton,
+    Heart,
+    Wand,
+    Citrus,
+  },
+  setup() {
+    return { mode };
+  },
+  template: `
+  <div style="display:flex; gap:1rem; margin:1rem 0; flex-wrap: wrap;" v-for="color in ['main', 'danger']">
+    <UiButton icon mode="ghost" :color="color">
+      <Wand/>
+    </UiButton>
+    <UiButton icon mode="ghost" :color="color" class="_hover">
+      <Heart/>
+    </UiButton>
+    <UiButton icon mode="ghost" :color="color" disabled>
+      <Citrus />
+    </UiButton>
+    </div>
+  `,
+});
+
+export const IconButton = TemplateIcon.bind({});
+IconButton.args = {};
+
+export const IconButtonWithRouterArg = Template.bind({});
+IconButtonWithRouterArg.args = { to: { name: 'route' } };
+
+export const Error = Template.bind({});
+Error.args = {
+  color: StatusType.Danger,
+};
+
+export const PrimaryUI = Template.bind({});
+PrimaryUI.args = {};
+
+export const SecondaryUI = Template.bind({});
+SecondaryUI.args = {
+  color: StatusType.Default,
+  mode: 'outline',
+};

package/src/components/button/UiButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <UiButtonLink v-bind="props">
+    <span class="start">
+      <slot name="start"></slot>
+    </span>
+
+    <span class="content">
+      <slot></slot>
+    </span>
+
+    <span class="end">
+      <slot name="end"></slot>
+    </span>
+  </UiButtonLink>
+</template>
+
+<script setup lang="ts">
+import { StatusType } from '@/models';
+import { RouteLocationRaw } from 'vue-router';
+import UiButtonLink from './UiButtonLink.vue';
+
+interface Props {
+  type?: 'button' | 'submit';
+  to?: RouteLocationRaw | null;
+  color?: StatusType;
+  mode?: 'fill' | 'ghost' | 'outline';
+  icon?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  to: null,
+  type: 'button',
+  color: StatusType.Default,
+  mode: 'fill',
+  icon: false,
+});
+</script>

package/src/components/button/UiButtonLink.vue

@@ -0,0 +1,186 @@
+<template>
+  <template v-if="to === null">
+    <button :class="classes" :type="type">
+      <slot />
+    </button>
+  </template>
+  <template v-else>
+    <BmsLink :to="to" :target="target" :classes="classes">
+      <slot />
+    </BmsLink>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { StatusType } from '@/models';
+import { computed, useAttrs } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+import BmsLink from '@/components/navigation/BmsLink.vue';
+
+interface Props {
+  type: 'button' | 'submit';
+  to: RouteLocationRaw | null;
+  target?: string;
+  color: StatusType;
+  mode: 'fill' | 'ghost' | 'outline';
+  icon: boolean;
+}
+
+const props = defineProps<Props>();
+const attrs = useAttrs();
+
+const classes = computed(() => {
+  const disabled = attrs && (!!attrs.disabled || attrs.disabled === '');
+  return `bms-button is-${props.color}${
+    props.icon ? ' is-icon' : ` bms-button--${props.mode}`
+  } ${disabled ? ' bms-button--disabled' : ''} `;
+});
+</script>
+
+<style lang="scss">
+@function color($colorName, $colorIntensity: '100') {
+  @return #{var(#{'--bms-' + $colorName + '-' + $colorIntensity})};
+}
+
+@mixin selectColorsToApply($colorName) {
+  &.is-icon {
+    padding: 0.5em 0;
+
+    --bms-button-background-color: transparent;
+    --bms-button-border-color: transparent;
+    --bms-button-text-color: var(--bms-grey-100);
+
+    --bms-button-hover-background-color: #{color($colorName, '10')};
+    --bms-button-hover-border-color: transparent;
+    --bms-button-hover-text-color: #{color($colorName, '140')};
+
+    --bms-button-disabled-background-color: transparent;
+    --bms-button-disabled-border-color: transparent;
+    --bms-button-disabled-text-color: var(--bms-disabled-color);
+  }
+  &.bms-button--fill {
+    --bms-button-background-color: #{color($colorName)};
+    --bms-button-border-color: #{color($colorName)};
+    --bms-button-text-color: white;
+
+    --bms-button-hover-background-color: #{color($colorName, '140')};
+    --bms-button-hover-border-color: #{color($colorName, '140')};
+    --bms-button-hover-text-color: white;
+
+    --bms-button-disabled-background-color: var(--bms-disabled-color);
+    --bms-button-disabled-border-color: var(--bms-disabled-color);
+    --bms-button-disabled-text-color: white;
+  }
+
+  &.bms-button--outline {
+    --bms-button-background-color: transparent;
+    --bms-button-border-color: #{color($colorName)};
+    --bms-button-text-color: #{color($colorName)};
+
+    --bms-button-hover-background-color: transparent;
+    --bms-button-hover-border-color: #{color($colorName, '140')};
+    --bms-button-hover-text-color: #{color($colorName, '140')};
+
+    --bms-button-disabled-background-color: transparent;
+    --bms-button-disabled-border-color: var(--bms-disabled-color);
+    --bms-button-disabled-text-color: var(--bms-disabled-color);
+  }
+
+  &.bms-button--ghost {
+    --bms-button-background-color: transparent;
+    --bms-button-border-color: transparent;
+    --bms-button-text-color: #{color($colorName)};
+
+    --bms-button-hover-background-color: #{color($colorName, '10')};
+    --bms-button-hover-border-color: transparent;
+    --bms-button-hover-text-color: #{color($colorName, '140')};
+
+    --bms-button-disabled-background-color: transparent;
+    --bms-button-disabled-border-color: transparent;
+    --bms-button-disabled-text-color: var(--bms-disabled-color);
+  }
+}
+
+@mixin useColors() {
+  background-color: var(--bms-button-background-color);
+  border: 1px solid var(--bms-button-border-color);
+  color: var(--bms-button-text-color);
+
+  &:focus,
+  &:active,
+  &:hover,
+  &._hover {
+    background-color: var(--bms-button-hover-background-color);
+    border-color: var(--bms-button-hover-border-color);
+    color: var(--bms-button-hover-text-color);
+    outline: none;
+    text-decoration: none;
+  }
+  &:disabled,
+  &.bms-button--disabled {
+    background-color: var(--bms-button-disabled-background-color);
+    border-color: var(--bms-button-disabled-border-color);
+    color: var(--bms-button-disabled-text-color);
+    pointer-events: none;
+    cursor: initial;
+  }
+}
+
+.bms-button {
+  height: 2em;
+  font-size: 1em;
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0.5em;
+  appearance: none;
+  cursor: pointer;
+  border-radius: var(--bms-border-radius);
+  line-height: 1;
+  justify-content: center;
+  text-align: center;
+  transition:
+    transform 0.1s ease-in-out,
+    background-color 0.1s linear,
+    color 0.1s linear,
+    border 0.1s linear;
+  text-decoration: none;
+
+  @include useColors();
+  @include selectColorsToApply('grey');
+
+  .content {
+    margin: 0 0.5em;
+  }
+
+  > span {
+    &:empty {
+      display: none;
+    }
+  }
+
+  svg {
+    display: block;
+    width: 1em;
+    height: 1em;
+  }
+
+  &.is-default {
+    @include selectColorsToApply('main');
+  }
+
+  &.is-warning {
+    @include selectColorsToApply('orange');
+  }
+
+  &.is-danger {
+    @include selectColorsToApply('red');
+  }
+
+  &.is-success {
+    @include selectColorsToApply('green');
+  }
+}
+</style>

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

@@ -0,0 +1,75 @@
+import BmsAlert from './BmsAlert.vue';
+import BmsButton from '../button/BmsButton.vue';
+import { StatusType } from '@/models/status-type.model';
+
+export default {
+  title: 'shared/BmsAlert',
+  component: BmsAlert,
+};
+
+const Template = (args) => ({
+  components: {
+    BmsAlert,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsAlert v-bind="args"/>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  message:
+    'Alas!  If our impulses were confined to hunger, thirst, and desire, we might be nearly free; but now we are moved by every wind that blows and a chance word or scene that that word may convey to us.',
+};
+
+export const NonDismissable = Template.bind({});
+NonDismissable.args = {
+  dismissable: false,
+  message:
+    'Alas! Why does man boast of sensibilities superior to those apparent in the brute; it only renders them more necessary beings. If our impulses were confined to hunger, thirst, and desire, we might be nearly free; but now we are moved by every wind that blows and a chance word or scene that that word may convey to us.',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  type: StatusType.Danger,
+  message:
+    'Alas!  If our impulses were confined to hunger, thirst, and desire, we might be nearly free; but now we are moved by every wind that blows and a chance word or scene that that word may convey to us.',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  type: StatusType.Warning,
+  message:
+    'Alas!  If our impulses were confined to hunger, thirst, and desire, we might be nearly free; but now we are moved by every wind that blows and a chance word or scene that that word may convey to us.',
+};
+
+const TemplateWithSlots = (args) => ({
+  components: {
+    BmsAlert,
+    BmsButton,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsAlert v-bind="args">
+      {{args.slots.subtitle}} 
+      <template #action v-if="args.slots.alertAction">
+        <BmsButton>{{args.slots.alertAction}}</BmsButton>
+      </template>
+    </BmsAlert>
+  `,
+});
+export const WithSlots = TemplateWithSlots.bind({});
+WithSlots.args = {
+  message:
+    'Alas!  If our impulses were confined to hunger, thirst, and desire, we might be nearly free;',
+  slots: {
+    subtitle:
+      'but now we are moved by every wind that blows and a chance word or scene that that word may convey to us.',
+    alertAction: 'ACTION',
+  },
+};

package/src/components/feedback/BmsAlert.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="alert" :class="`alert-${props.type}`">
+    <div class="info-line">
+      <span class="icon"><component :is="alertIcon" :size="20" /></span>
+      <span class="message">
+        <slot name="message">
+          <strong>{{ message }}</strong>
+        </slot>
+      </span>
+      <slot name="action"></slot>
+      <BmsIconButton v-if="dismissable" @click="emits('dismiss')">
+        <X :size="20" />
+      </BmsIconButton>
+    </div>
+    <slot name="default"></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { AlertCircle, AlertTriangle, Info, X } from 'lucide-vue-next';
+import BmsIconButton from '../button/BmsIconButton.vue';
+import { type Component, ComputedRef, computed } from 'vue';
+import { StatusType } from '@/models/status-type.model';
+
+const props = withDefaults(
+  defineProps<{ message?: string; dismissable?: boolean; type?: StatusType }>(),
+  {
+    dismissable: true,
+    type: StatusType.Information,
+  },
+);
+
+const emits = defineEmits<{
+  (e: 'dismiss'): void;
+}>();
+
+const alertIcon: ComputedRef<Component> = computed(() => {
+  switch (props.type) {
+    case StatusType.Danger:
+      return AlertCircle;
+    case StatusType.Warning:
+      return AlertTriangle;
+    default:
+      return Info;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.alert {
+  --alert-main-color: var(--bms-main-100);
+  --alert-secondary-color: var(--bms-main-10);
+
+  background-color: var(--alert-secondary-color);
+  border-radius: 8px;
+  border: 1px solid var(--alert-main-color);
+  padding: 16px;
+
+  &-information {
+    --alert-main-color: var(--bms-main-100);
+    --alert-secondary-color: var(--bms-main-10);
+  }
+
+  &-danger {
+    --alert-main-color: var(--bms-red-100);
+    --alert-secondary-color: var(--bms-red-10);
+  }
+
+  &-warning {
+    --alert-main-color: var(--bms-orange-100);
+    --alert-secondary-color: var(--bms-orange-10);
+  }
+
+  .info-line {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 16px;
+    align-items: baseline;
+
+    .icon {
+      color: var(--alert-main-color);
+      display: flex;
+    }
+
+    .message {
+      flex-grow: 1;
+      align-self: center;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,34 @@
+import BmsBadge from './BmsBadge.vue';
+import { StatusType } from '../../models';
+
+export default {
+  title: 'Composants/feedback/BmsBadge',
+  component: BmsBadge,
+};
+
+const Template = (args) => ({
+  components: {
+    BmsBadge,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <br><b>Default</b><br>
+    <BmsBadge v-bind="{pending:42}"><a>500</a></BmsBadge>
+    <br>
+    <br><b>Not pending</b><br>
+    <BmsBadge v-bind="{pending:0}"><a>500</a></BmsBadge>
+    <br>
+    <br> <b>Danger</b><br>
+    <BmsBadge v-bind="{pending:42,color:'danger'}"><a>500</a></BmsBadge>
+    <br>
+    <br> <b>Too small and warn</b><br>
+    <BmsBadge v-bind="{pending:1,color:'warning'}"><a>500</a></BmsBadge>
+    <br>
+    <br> <b>Too long and default color</b><br>
+    <BmsBadge v-bind="{pending:666,color:'default'}"><a>what ever you want here</a></BmsBadge>
+  `,
+});
+
+export const BmsBadgeStory = Template.bind({});