project-booster-vue 9.24.1 → 9.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.24.1",
+  "version": "9.27.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/cards/PbCard.vue

@@ -5,9 +5,9 @@
       disabled ? 'pb-card--disabled' : ''
     }${flattened ? 'pb-card--no-pointer-events' : ''} ${
       cardMinRatio && cardMinRatio !== 'auto' ? 'm-ratio-container--' + cardMinRatio : ''
-    }`"
+    }${borderTop ? 'pb-card--border-top' : ''}`"
     :role="!buttonLabel ? 'button' : 'article'"
-    :style="`min-height: ${cardMinHeight}`"
+    :style="`min-height: ${cardMinHeight}; border-color:${borderTop ? borderTop : null}`"
     @click="handleCardClick"
   >
     <m-flex
@@ -309,6 +309,13 @@ export default defineComponent({
       type: [Boolean, String],
       default: false,
     },
+    /**
+     * Definies if the card has a border top
+     */
+    borderTop: {
+      type: String,
+      default: null,
+    },
   },
 
   computed: {
@@ -361,6 +368,11 @@ $responsive-breakpoint: 's';
   overflow: hidden;
   position: relative;
 
+  &--border-top {
+    border-top-style: solid !important;
+    border-top-width: 4px !important;
+  }
+
   &__items-container:empty ~ &__image-container {
     height: 100%;
 

package/src/components/mozaic/buttons/MButton.vue

@@ -35,6 +35,7 @@
     class="mc-button"
     :class="[...themeClasses, ...sizeClasses, ...widthClasses, $attrs.class]"
     :aria-label="label"
+    :disabled="disabled"
   >
     <!-- Add wrapper to mitigate iOS 10 bug: https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers -->
     <m-flex class="mc-button__content" direction="row" align-items="center" justify-content="center">
@@ -70,6 +71,8 @@ export const M_BUTTON_VALIDATOR = {
     null,
     'solid',
     'bordered',
+    'bordered-left',
+    'bordered-right',
     'bordered-neutral',
     'solid-neutral',
     'solid-primary-02',
@@ -94,6 +97,13 @@ export default defineComponent({
   },
 
   props: {
+    /**
+     * Disabled button
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * The button label
      */
@@ -531,6 +541,22 @@ $text-neutral: (
 .mc-button--text-neutral {
   @include set-button-theme($text-neutral);
 }
+
+.mc-button--bordered-left {
+  background: transparent;
+  border-color: $color-success-500;
+  border-radius: 0.25rem 0 0 0.25rem;
+  color: $color-success-500;
+  padding: 0.375rem;
+}
+
+.mc-button--bordered-right {
+  background: transparent;
+  border-color: $color-success-500;
+  border-radius: 0 0.25rem 0.25rem 0;
+  color: $color-success-500;
+  padding: 0.375rem;
+}
 </style>
 
 <style lang="scss">

package/src/components/mozaic/quantityselector/MQuantitySelector.stories.mdx

@@ -0,0 +1,48 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import MQuantitySelector, { M_NOTIFICATION_VALIDATOR } from './MQuantitySelector';
+
+<Meta title="Mozaic/Components/MQuantitySelector  🧬" component={MQuantitySelector} argTypes={{}} />
+
+# 🧬 `MQuantitySelector` - Component
+
+[![alt text](https://storage.googleapis.com/project-booster-media/project-booster-vue/mozaic-documentation.svg 'Mozaic component documentation')](http://mozaic.adeo.cloud/Components/Notification/)
+[![alt text](https://storage.googleapis.com/project-booster-media/project-booster-vue/project-booster-wireframes.svg 'Project booster component wireframes')](https://www.figma.com/file/XqqYm6Trew66wygIrVdH6r/%5BLIBRAIRIE%5D-Composants-Project-Booster?node-id=389%3A0)
+[![alt text](https://storage.googleapis.com/project-booster-media/project-booster-vue/project-booster-sources.svg 'Project booster component source code')](https://github.com/adeo/project-booster-vue/tree/master/src/components/mozaic/notifications)
+
+---
+
+The `MQuantitySelector` Vue component is the implementation of the [mozaic design system **notification** component](http://mozaic.adeo.cloud/Components/Notification/).
+
+# `MQuantitySelector` - Component props
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MQuantitySelector },
+  setup() {
+    return { args };
+  },
+  template: `<m-quantity-selector
+    :value="4" 
+    :valuemin="0" 
+    :valuemax="50"
+  />`,
+});
+
+<Canvas>
+  <Story
+    name="101 Sandbox"
+    inline={false}
+    height="512px"
+    args={{
+      title: 'Notification title',
+      text: 'Notification text',
+      linkLabel: 'Notification link',
+      closable: true,
+    }}
+    parameters={{ storyshots: { disable: true } }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="101 Sandbox" />

package/src/components/mozaic/quantityselector/MQuantitySelector.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="mc-quantity-selector">
+    <m-flex class="mc-quantity-selector__container" :class="cssFieldElementClass">
+      <m-button
+        class="mc-quantity-selector__button-left"
+        theme="bordered-left"
+        leftIcon="https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Control_Less_32px.svg"
+        icon-position="left"
+        :aria-label="decrementAriaLabel"
+        :aria-controls="id"
+        :disabled="currentValue <= valuemin"
+        :size="small ? 's' : null"
+        tabindex="-1"
+        type="button"
+        aria-hidden="true"
+        @click="decrement()"
+      />
+
+      <m-text-input
+        :id="id"
+        v-model="currentValue"
+        type="number"
+        class="mc-quantity-selector__input"
+        name="quantity-selector-input"
+        :aria-label="inputAriaLabel"
+        :aria-valuenow="currentValue"
+        :aria-valuemin="valuemin"
+        :aria-valuemax="valuemax"
+        :placeholder="placeholder"
+        :rounded="false"
+        :textCenter="true"
+        :blankField="true"
+        :size="small ? 's' : null"
+        role="spinbutton"
+        @input="handle($event.target.value)"
+        @keypress="integerOnly && formatValue($event)"
+      />
+
+      <m-button
+        class="mc-quantity-selector__button-right"
+        theme="bordered-right"
+        leftIcon="https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Control_More_32px.svg"
+        icon-position="right"
+        :aria-label="incrementAriaLabel"
+        :aria-controls="id"
+        :disabled="currentValue === valuemax"
+        :size="small ? 's' : null"
+        tabindex="-1"
+        aria-hidden="true"
+        type="button"
+        @click="increment()"
+      />
+    </m-flex>
+    <div v-if="!(error || errorMessage) && !info" class="m-text-input__error-placeholder mc-field__error-message">
+      &nbsp;
+    </div>
+    <div v-else-if="error || errorMessage" class="m-text-input__error mc-field__error-message">
+      {{ error || errorMessage }}
+    </div>
+    <div v-else-if="info" class="m-text-input__info mc-field__error-message">
+      {{ info }}
+    </div>
+  </div>
+</template>
+
+<script>
+import MButton from '../buttons/MButton.vue';
+import MTextInput from '../text-input/MTextInput.vue';
+import MFlex from '../flex/MFlex.vue';
+
+export default {
+  name: 'MQuantitySelector',
+
+  components: {
+    MButton,
+    MTextInput,
+    MFlex,
+  },
+
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
+
+  props: {
+    id: {
+      type: String,
+      default: 'qty-selector',
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
+    inputAriaLabel: {
+      type: String,
+      default: 'Quantity Selector',
+    },
+    decrementAriaLabel: {
+      type: String,
+      default: 'Decrement',
+    },
+    incrementAriaLabel: {
+      type: String,
+      default: 'Increment',
+    },
+    valuemin: {
+      type: Number,
+      default: 1,
+    },
+    valuemax: {
+      type: Number,
+      default: 100,
+    },
+    placeholder: {
+      type: String,
+      default: null,
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    integerOnly: {
+      type: Boolean,
+      default: false,
+    },
+    error: {
+      type: String,
+      default: null,
+    },
+  },
+
+  emits: ['input', 'increment', 'decrement'],
+
+  data() {
+    return {
+      currentValue: this.value || this.valuemin,
+    };
+  },
+
+  watch: {
+    currentValue(newValue, oldValue) {
+      this.handle(newValue);
+    },
+  },
+
+  methods: {
+    handle(value) {
+      this.currentValue = value;
+      if (this.currentValue > this.valuemax) {
+        this.currentValue = this.valuemax;
+      }
+      if (this.currentValue < this.valuemin) {
+        this.currentValue = this.valuemin;
+      }
+      this.$emit('input', this.currentValue);
+    },
+    increment() {
+      if (this.currentValue < this.valuemax) {
+        this.currentValue++;
+        this.$emit('increment', this.currentValue);
+      }
+    },
+    decrement() {
+      if (this.currentValue > this.valuemin) {
+        this.currentValue--;
+        this.$emit('decrement', this.currentValue);
+      }
+    },
+    formatValue(e) {
+      const INTEGER_ONLY_REGEX = /[0-9/]+/;
+      if (!INTEGER_ONLY_REGEX.test(e.key)) {
+        e.preventDefault();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/_all-settings';
+@import 'components/_c.quantity-selector';
+
+.mc-quantity-selector__button-left,
+.mc-quantity-selector__button-right {
+  margin: 0.5rem 0;
+}
+</style>

package/src/components/mozaic/text-input/MTextInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-text-input mc-field">
+  <div class="m-text-input mc-field" :class="{ 'm-text-input__nomargin': blankField }">
     <label v-if="label" class="m-text-input__label mc-field__label" :for="`input-${id}`">
       {{ label }}
       <span v-if="required" class="mc-field__requirement" aria-hidden="true"> obligatoire </span>
@@ -31,6 +31,8 @@
           'is-valid': valid,
           'is-invalid': invalid || errorMessage,
           'mc-text-input--s': size === 's',
+          'unrounded': !rounded,
+          'text-center': textCenter,
         }"
         :name="name"
         :disabled="disabled"
@@ -45,13 +47,25 @@
         @blur="handleBlurEvent"
       />
     </div>
-    <div v-if="!(error || errorMessage) && !info" class="m-text-input__error-placeholder mc-field__error-message">
+    <div
+      v-if="!(error || errorMessage) && !info"
+      class="m-text-input__error-placeholder mc-field__error-message"
+      :class="{ 'm-text-input__blank': blankField }"
+    >
       &nbsp;
     </div>
-    <div v-else-if="error || errorMessage" class="m-text-input__error mc-field__error-message">
+    <div
+      v-else-if="error || errorMessage"
+      class="m-text-input__error mc-field__error-message"
+      :class="{ 'm-text-input__blank': blankField }"
+    >
       {{ error || errorMessage }}
     </div>
-    <div v-else-if="info" class="m-text-input__info mc-field__error-message">
+    <div
+      v-else-if="info"
+      class="m-text-input__info mc-field__error-message"
+      :class="{ 'm-text-input__blank': blankField }"
+    >
       {{ info }}
     </div>
   </div>
@@ -225,6 +239,27 @@ export default defineComponent({
       type: Number,
       default: -1,
     },
+    /**
+     * Defines if this input has bordered
+     */
+    rounded: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Defines text alignment inside input
+     */
+    textCenter: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Definies if input has blank fields
+     */
+    blankField: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   setup(props, { emit, expose }) {
@@ -354,4 +389,24 @@ export default defineComponent({
 @import 'components/c.text-input';
 @import 'components/c.left-icon-input';
 @import 'components/c.fields';
+
+.unrounded {
+  border-left: 0;
+  border-radius: 0;
+  border-right: 0;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.m-text-input__blank {
+  display: none !important;
+}
+
+.m-text-input__nomargin {
+  input {
+    margin-top: 0 !important;
+  }
+}
 </style>

package/src/components/question/PbQuestion-Features-Answers-Conditional.stories.mdx

@@ -36,7 +36,8 @@ It is possible to condition the display of certain answers according to previous
 
 export const conditionalAnswersPayload = {
   viewModel: {
-    label: 'The question title',
+    label: 'Quel est votre revenu fiscal de référence annuel de votre foyer fiscal ?',
+    subtitle: 'Le revenu fiscal de référence du foyer concerne la somme des revenus des conjoints.',
     answersComponent: 'PbCard',
   },
   answers: {

package/src/components/question/PbQuestion-Features-Answers-Modal.stories.mdx

@@ -0,0 +1,122 @@
+import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
+import { Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import PbQuestion from './PbQuestion';
+import { TemplateSandbox } from './PbQuestion.stories.mdx';
+
+<Meta
+  title="Project Booster/Scenario/Questions/PbQuestion 🦠/Features/Answers/Conditional"
+  component={PbQuestion}
+  argTypes={{
+    onStepCompleted: {
+      action: 'Step completed',
+      table: { disable: true },
+    },
+  }}
+  decorators={[
+    nestedAppDecorator(
+      {
+        actions: {
+          sendEventToBus({}, payload) {
+            console.log('Event sent to bus', payload);
+          },
+        },
+      },
+      [],
+    ),
+  ]}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+# `PbQuestion` - With Modal
+
+export const conditionalAnswersPayload = {
+  viewModel: {
+    label: 'Quel est votre revenu fiscal de référence annuel de votre foyer fiscal ?',
+    subtitle: 'Le revenu fiscal de référence du foyer concerne la somme des revenus des conjoints.',
+    answersComponent: 'PbCard',
+  },
+  answers: {
+    'ANSWER-1': {
+      code: 'ANSWER-1',
+      conditions: [
+        "isAnswerMatching('QUESTION_1', 'QUESTION_1--ANSWER_1')",
+        "isAnswerMatching('QUESTION_2', 'QUESTION_2--ANSWER_1')",
+      ],
+      viewModel: {
+        title: '15000 - 20000 €',
+        borderColor: 'orange',
+      },
+    },
+    'ANSWER-2': {
+      code: 'ANSWER-2',
+      conditions: ['runtimeOptions.isElligible'],
+      viewModel: {
+        title: '20000 - 30000 €',
+        borderColor: 'red',
+      },
+    },
+    'ANSWER-3': {
+      code: 'ANSWER-3',
+      viewModel: {
+        title: '30000 - 40000 €',
+        borderColor: 'purple',
+      },
+    },
+    'ANSWER-4': {
+      code: 'ANSWER-4',
+      viewModel: {
+        title: 'Plus de 50000 €',
+        borderColor: 'yellow',
+      },
+    },
+  },
+  helpArea: [
+    {
+      type: 'text',
+      label: 'Besoin d’aide pour trouver votre revenu fiscal de référence ?',
+    },
+    {
+      type: 'link',
+      label: 'Voir l’aide pour trouver votre revenu fiscal',
+      action: {
+        type: 'MODAL',
+        viewModelDialog: {
+          headerTitle: 'Ou trouver votre revenu fiscal de référence ?',
+          subTitle: 'Sur votre dernier avis d’imposition disponible dans votre espace impots-gouv.fr',
+          imgUrl:
+            'https://www.lerevenu.com/sites/site/files/styles/img_lg/public/field/image/impots_7.jpg?itok=A2rlQzx3',
+        },
+      },
+    },
+  ],
+};
+
+<Source language="json" code={JSON.stringify(conditionalAnswersPayload, null, '  ')} />
+
+export const conditionalAnswersAnswers = {
+  QUESTION_1: [{ code: 'QUESTION_1--ANSWER_1' }],
+  QUESTION_2: [{ code: 'QUESTION_2--ANSWER_1' }],
+};
+
+export const conditionalAnswersRuntimeOptions = {
+  isElligible: true,
+};
+
+<Canvas>
+  <Story
+    name="With Modal"
+    inline={false}
+    height="862px"
+    parameters={{ controls: { disable: true } }}
+    args={{
+      payload: conditionalAnswersPayload,
+      answers: new Map(Object.entries(conditionalAnswersAnswers)),
+      runtimeOptions: conditionalAnswersRuntimeOptions,
+      minHeight: 'auto',
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>