project-booster-vue 9.24.0 → 9.26.0

package/package.json

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

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/pedagogy/PbPedagogy.vue

@@ -136,9 +136,7 @@ export default defineComponent({
 
     async handleValidateClicked() {
       this.$emit('step-completed', {
-        answers: this.payload.multiSelect.actions.VALIDATE.isAnswer
-          ? [this.payload.multiSelect.actions.VALIDATE.code]
-          : [],
+        answers: this.payload.multiSelect.actions.VALIDATE.isAnswer ? [this.payload.multiSelect.actions.VALIDATE] : [],
         nextStep: this.payload.multiSelect.actions.VALIDATE.nextStep,
       });
     },

package/src/components/question/incremental-amount-input/IncrementalAmount.ts

@@ -0,0 +1,24 @@
+export interface IncrementalAmountValidation {
+  minValue: number;
+  maxValue: number;
+  defaultValue: number;
+  requiredErrorMessage: string;
+  thresholdsIncluded: number;
+  minValueErrorMessage: string;
+  maxValueErrorMessage: string;
+}
+
+export interface IncrementalAmountViewModel {
+  backLabel: string;
+  label: string;
+  actionLabel: string;
+  validation: IncrementalAmountValidation;
+  minValue: number;
+  maxValue: number;
+  defaultValue: number;
+}
+
+export interface IncrementalAmountPayload {
+  viewModel: IncrementalAmountViewModel;
+  defaultDecoratorValue: string;
+}

package/src/components/question/incremental-amount-input/PbIncrementalAmountInput.stories.mdx

@@ -0,0 +1,50 @@
+import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
+import { ArgsTable, Canvas, Meta, Source, Story } from '@storybook/addon-docs';
+import PbIncrementalAmountInput from './PbIncrementalAmountInput';
+import DEFAULT_PAYLOAD from './default-payload.json';
+
+<Meta
+  title="Project Booster/Scenario/Questions/PbIncrementalAmountInput 🦠"
+  component={PbIncrementalAmountInput}
+  decorators={[nestedAppDecorator({}, [])]}
+  parameters={{ layout: 'fullscreen' }}
+/>
+
+# 🦠 `PbFamilyAmountInput` - Components
+
+[![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/question)
+
+---
+
+The `PbIncrementalAmountInput` Vue component allows select family amount persons. It
+is customizable through the payload property. It has the same
+behaviour as the `PbQuestion` component and is designed to work in scenarii.
+
+It has a default provided payload, used in the Sandbox below.
+
+The input field is automatically focused.
+
+The back button will make `vue-router` trigger the history back feature from the browser. It can be hidden with the
+`showBackButton` flag.
+
+# `PbIncrementalAmountInput` - Component props
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PbIncrementalAmountInput },
+  setup() {
+    return { args };
+  },
+  template: `<pb-incremental-amount-input
+    :payload="args.payload"
+    :show-back-button="args.showBackButton"
+    :completed-event-name="args.completedEventName"
+    @step-completed="args.onStepCompleted"
+  />`,
+});
+
+<Canvas>
+  <Story name="101 Sandbox" args={{ payload: DEFAULT_PAYLOAD }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/question/incremental-amount-input/PbIncrementalAmountInput.vue

@@ -0,0 +1,332 @@
+<template>
+  <m-flex class="pb-incremental-amount-input" direction="column" align-items="center">
+    <m-flex class="pb-incremental-amount-input__back-button-container" align-items="stretch">
+      <m-link
+        :label="computedPayload.viewModel.backLabel"
+        :left-icon="BACK_ICON"
+        :class="{
+          'pb-incremental-amount-input__back-button': true,
+          'pb-incremental-amount-input__back-button--hidden':
+            !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
+        }"
+        @click.once="$emit('go-back')"
+      />
+    </m-flex>
+
+    <div class="pb-incremental-amount-input__title">
+      {{ computedPayload.viewModel.label }}
+    </div>
+    <div class="pb-incremental-amount-input__subtitle">
+      {{ computedPayload.viewModel.subtitle }}
+    </div>
+
+    <form
+      class="pb-incremental-amount-input__form-container"
+      ref="pbDimensionsInputFormContainerObserver"
+      @submit.prevent="handleFormSubmit"
+    >
+      <m-flex class="pb-incremental-amount-input__form" direction="column" align-items="stretch">
+        <m-flex class="pb-incremental-amount-input__header" ref="PbIncrementalAmountInput" direction="column">
+          <m-flex
+            v-if="computedPayload.viewModel.image"
+            class="pb-incremental-amount-input__image"
+            direction="column"
+            align-items="center"
+          >
+            <img :src="computedPayload.viewModel.image" alt="Image décorative" />
+          </m-flex>
+        </m-flex>
+      </m-flex>
+
+      <m-flex class="pb-incremental-amount-input__body" justify-content="start" align-items="start">
+        <m-quantity-selector
+          :value="computedPayload.viewModel.defaultValue"
+          :valuemin="computedPayload.viewModel.minValue"
+          :valuemax="computedPayload.viewModel.maxValue"
+          @input="handleQuantitySelector"
+          :integerOnly="true"
+        />
+      </m-flex>
+
+      <m-flex class="pb-incremental-amount-input__buttons-container" direction="column" align-items="center">
+        <m-button
+          class="pb-incremental-amount-input__button"
+          :label="computedPayload.viewModel.actionLabel"
+          width="full"
+          size="l"
+          type="submit"
+        />
+      </m-flex>
+    </form>
+  </m-flex>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, onMounted, ComputedRef, PropType, Ref } from 'vue';
+import { v4 as uuidv4 } from 'uuid';
+import cloneDeep from 'lodash.clonedeep';
+import merge from 'lodash.merge';
+import MFlex from './../../mozaic/flex/MFlex.vue';
+import DEFAULT_PAYLOAD from './default-payload.json';
+import MLink from '../../mozaic/link/MLink.vue';
+import MButton from '../../mozaic/buttons/MButton.vue';
+import { ref } from 'vue';
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { decorate } from '@/components/question/PbQuestion.vue';
+import MQuantitySelector from '../../mozaic/quantityselector/MQuantitySelector.vue';
+
+const BACK_ICON =
+  'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
+
+export default defineComponent({
+  name: 'PbIncrementalAmountInput',
+  components: {
+    MFlex,
+    MLink,
+    MButton,
+    MQuantitySelector,
+  },
+
+  props: {
+    /**
+     * The component view model and business data as an object. The provided prop
+     * is merged with the default payload value so only overriden values will change
+     * from the default ones.
+     */
+    payload: {
+      type: Object,
+      default: () => ({}),
+    },
+    /**
+     * The options provided at runtime to customize component behaviour
+     */
+    runtimeOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+    /**
+     * Indicates whether the back button should be displayed
+     */
+    showBackButton: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Name for the event to send when the step is questio is answered
+     */
+    completedEventName: {
+      type: String,
+      default: 'step-completed',
+    },
+    /**
+     * The previous answers to inject
+     */
+    answers: {
+      type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+      default: () => new Map<string, ScenarioStepAnswer[]>(),
+    },
+    /**
+     * Define default value
+     */
+    defaultValue: {
+      type: Number,
+      default: 1,
+    },
+  },
+  setup(props, { emit }) {
+    const componentId = uuidv4();
+    const computedPayload = computed(() => {
+      const tempPayload = cloneDeep(DEFAULT_PAYLOAD);
+      return merge(tempPayload, props.payload);
+    });
+    const pbIncrementalAmountInput = ref<HTMLElement>();
+    let quantitySelector = props.payload.viewModel.defaultValue || props.defaultValue;
+
+    const handleFormSubmit = () => {
+      emit(props.completedEventName, {
+        answers: [
+          {
+            value: quantitySelector,
+          },
+        ],
+      });
+    };
+
+    const handleQuantitySelector = (value: number): void => {
+      quantitySelector = value;
+    };
+
+    onMounted(() => {
+      setTimeout(() => {
+        pbIncrementalAmountInput.value?.focus();
+      }, 150);
+    });
+
+    return {
+      id: componentId,
+      handleFormSubmit,
+      BACK_ICON,
+      computedPayload,
+      pbIncrementalAmountInput,
+      quantitySelector,
+      handleQuantitySelector,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'pb-variables';
+
+$small-responsive-breakpoint: 's-large';
+$responsive-breakpoint: 'm';
+
+.pb-incremental-amount-input {
+  @include set-font-face('regular');
+
+  flex-grow: 1;
+  margin: 0 auto;
+  width: calc(100% - #{$mu050} - #{$mu050});
+
+  &__back-button-container {
+    align-self: flex-start;
+  }
+
+  &__back-button {
+    opacity: 1;
+    padding: $mu100 0 $mu100 $mu025;
+    transition: opacity 0.15s 0.5s;
+
+    &--hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  &__body {
+    flex-wrap: wrap;
+    margin-bottom: $mu250;
+    max-width: 100%;
+
+    @include set-from-screen($responsive-breakpoint) {
+      flex-wrap: nowrap;
+      width: 161px;
+    }
+
+    &--input-container {
+      width: 100%;
+
+      &__validator {
+        width: 100%;
+      }
+    }
+
+    &__center {
+      width: 65px;
+
+      input {
+        border-left: 0;
+        border-radius: 0;
+        border-right: 0;
+        margin-top: 0;
+      }
+    }
+
+    &__reduce,
+    &__up {
+      margin-top: 0.5rem;
+
+      svg {
+        height: 1rem;
+      }
+    }
+  }
+
+  &__form-container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    @include set-from-screen($responsive-breakpoint) {
+      //width: calc(100% - #{$mu050} - #{$mu050});
+      width: 314px;
+    }
+  }
+
+  &__form {
+    flex-grow: 1;
+    max-width: 100%;
+    width: 384px;
+  }
+
+  &__title {
+    @include set-font-face('semi-bold');
+    @include set-font-scale('07', 's');
+
+    color: $color-grey-700;
+    max-width: 100%;
+    padding: 0 0 0 0;
+    width: 384px;
+
+    @include set-from-screen($responsive-breakpoint) {
+      @include set-font-scale('08', 'm');
+
+      padding: $mu250 $mu100 $mu100 $mu100;
+      text-align: center;
+      width: auto;
+    }
+  }
+
+  &__subtitle {
+    color: $color-grey-700;
+    max-width: 100%;
+    padding: 0 0 $mu250 0;
+  }
+
+  &__image {
+    padding-bottom: $mu200;
+
+    img {
+      display: none;
+      width: 70%;
+
+      @include set-from-screen($small-responsive-breakpoint) {
+        display: block;
+        width: 70%;
+      }
+
+      @include set-from-screen($responsive-breakpoint) {
+        width: 90%;
+      }
+    }
+  }
+
+  &__text-input {
+    width: 100%;
+    z-index: 2;
+  }
+
+  &__separator {
+    color: $color-grey-500;
+    display: none;
+    padding: $mu125 $mu100 0 $mu100;
+
+    @include set-from-screen($responsive-breakpoint) {
+      display: flex;
+    }
+  }
+
+  &__buttons-container {
+    justify-content: flex-end !important;
+    margin-bottom: $mu100;
+    position: sticky;
+    width: 100%;
+    z-index: 1;
+  }
+
+  &__link {
+    margin-top: $mu250;
+  }
+}
+</style>

package/src/components/question/incremental-amount-input/default-payload.json

@@ -0,0 +1,12 @@
+{
+  "viewModel": {
+    "backLabel": "Question précédente",
+    "label": "Combien de personnes vivent dans votre foyer fiscal ?",
+    "subtitle": "Cette information est utile pour le calcul des aides",
+    "actionLabel": "Continuer",
+    "image": "https://storage.googleapis.com/project-booster-media/new-house/Estimation%20Construction%20Neuve%20-%20Localisation.png",
+    "minValue": 1,
+    "maxValue": 20,
+    "defaultValue": 1
+  }
+}

package/src/components/question/space-input/PbSpaceInput.stories.mdx

@@ -247,3 +247,51 @@ export const customFooter = {
     {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
+
+## With modal support
+
+export const withModal = {
+  viewModel: {
+    validation: {
+      maxValue: 10001,
+      maxErrorMessage: 'La surface doit être comprise entre 100m² et 10 000m²',
+      minValue: 99,
+      minErrorMessage: 'La surface doit être comprise entre 100m² et 10 000m²',
+    },
+    backLabel: 'Question précédente',
+    label: 'Quelle est votre surface ?',
+    placeholder: 'Votre surface',
+    actionLabel: 'Continuer',
+    image: null,
+  },
+  helpArea: [
+    {
+      type: 'text',
+      label: 'Besoin d’aide pour calculer la surface ?',
+    },
+    {
+      type: 'link',
+      label: 'Voir le guide pour calculer sa surface',
+      action: {
+        type: 'MODAL',
+        dialogViewModel: {
+          headerTitle: 'Pour calculer la surface chauffée c’est facile.',
+          htmlContent:
+            '<p>Pour calculer la surface chauffée c’est facile.</p><p> Il suffit de déduire de <strong>la surface habitable</strong> de votre habitation, <strong>les surfaces des pièces non chauffées</strong> par la pompe à chaleur. </p><p> Les pièces non chauffées peuvent être des pièces annexes (buanderie, véranda, …) ou de pièces chauffées par un autre mode de chauffage (radiateurs électriques par exemple). </p><p> <strong>Attention :</strong> le garage et le grenier ne sont pas pris en compte dans la surface habitable de base, il ne faut donc pas les déduire </p>',
+        },
+      },
+    },
+  ],
+};
+
+<Source language="json" code={JSON.stringify(withModal, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature with modal"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: withModal }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/question/space-input/PbSpaceInput.vue

@@ -12,6 +12,7 @@
         @click.once="$emit('go-back')"
       />
     </m-flex>
+
     <form
       class="pb-space-input__form-container"
       ref="pbSpaceInputFormContainerObserver"
@@ -57,6 +58,30 @@
           </m-flexy-col>
         </m-flex>
 
+        <m-flex
+          class="pb-space-input__help"
+          v-if="computedPayload.helpArea"
+          direction="column"
+          align-items="center"
+          justify-content="center"
+        >
+          <div v-for="helpItem in computedPayload.helpArea" :key="helpItem.type">
+            <div v-if="helpItem.type === 'text'">
+              <p class="pb-space-input__help__text">{{ helpItem.label }}</p>
+            </div>
+            <div v-if="helpItem.type === 'link'">
+              <m-link
+                class="pb-space-input__help__link"
+                :label="helpItem.label"
+                width="full"
+                size="l"
+                theme="primary"
+                @click="handleShowModal(helpItem.action.dialogViewModel)"
+              />
+            </div>
+          </div>
+        </m-flex>
+
         <m-flex class="pb-space-input__buttons-container" direction="column" align-items="center">
           <m-button
             class="pb-space-input__button"
@@ -77,6 +102,30 @@
         </m-flex>
       </m-flex>
     </form>
+
+    <m-dialog
+      class="pb-space-input__dialog"
+      :show-dialog="showModal"
+      width="680px"
+      height="520px"
+      maxHeight="100vh"
+      @update:show-dialog="handleShowModal"
+      v-if="computedPayload.helpArea"
+    >
+      <template v-slot:header>
+        <div class="pb-space-input__dialog__title">
+          <h2>{{ contentModal.headerTitle }}</h2>
+        </div>
+      </template>
+      <template v-slot:body>
+        <div class="pb-space-input__dialog__body" v-html="contentModal.htmlContent"></div>
+      </template>
+      <template v-slot:footer>
+        <m-flex class="pb-space-input__dialog__footer" align-items="center" justify-content="center">
+          <m-button label="Fermer" theme="bordered-neutral" @click.prevent="handleShowModal"></m-button>
+        </m-flex>
+      </template>
+    </m-dialog>
   </m-flex>
 </template>
 
@@ -93,6 +142,7 @@ import MLink from '../../mozaic/link/MLink.vue';
 import MTextInput from '../../mozaic/text-input/MTextInput.vue';
 import MFlexyCol from '../../mozaic/grid/MFlexyCol.vue';
 import MIcon from '../../mozaic/icon/MIcon.vue';
+import MDialog from '../../mozaic/dialog/MDialog.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { SpaceInputPayload } from '@/components/question/space-input/SpaceInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
@@ -145,6 +195,7 @@ export default defineComponent({
     MFlexyCol,
     MTextInput,
     MIcon,
+    MDialog,
   },
 
   props: {
@@ -194,9 +245,19 @@ export default defineComponent({
       return merge(tempPayload, props.payload);
     });
     const pbSpaceInputTextInput = ref<HTMLElement>();
+    const showModal = ref(false);
+    const contentModal = ref({});
 
     const space = computeDefaultValue(props.runtimeOptions, props.answers!, computedPayload);
 
+    const handleShowModal = ({ headerTitle, htmlContent }: { headerTitle: string; htmlContent: string }) => {
+      showModal.value = !showModal.value;
+
+      if (headerTitle && htmlContent) {
+        contentModal.value = { headerTitle, htmlContent };
+      }
+    };
+
     const validationSchema = initValidation(componentId, computedPayload);
 
     const { handleSubmit } = useForm({ validationSchema: validationSchema.value });
@@ -250,6 +311,9 @@ export default defineComponent({
       handleFormSubmit,
       isShowingFooter,
       skipQuestion,
+      showModal,
+      handleShowModal,
+      contentModal,
     };
   },
 });
@@ -382,5 +446,29 @@ $responsive-breakpoint: 'm';
   &__link {
     margin-top: $mu250;
   }
+
+  &__dialog {
+    &__title {
+      padding: $mu250 $mu250 0 $mu250;
+    }
+
+    &__body {
+      padding: 0 $mu250;
+      @include set-font-scale('05', 'l');
+    }
+
+    &__footer {
+      padding: $mu100 $mu250 $mu250 $mu250;
+    }
+  }
+
+  &__help {
+    margin-bottom: $mu250;
+
+    &__link,
+    &__text {
+      margin: 0;
+    }
+  }
 }
 </style>

package/src/components/scenario/PbScenario.vue

@@ -103,6 +103,8 @@ import PbSpaceInput from '../question/space-input/PbSpaceInput.vue';
 import PbUploadDocument from '../question/upload-document/PbUploadDocument.vue';
 import PbConfigurationsImport from '../question/configurations-import/PbConfigurationsImport.vue';
 import PbCitySearch from '../question/city-search/PbCitySearch.vue';
+import PbWarningMessage from '../warning-message/PbWarningMessage.vue';
+import PbIncrementalAmountInput from '../question/incremental-amount-input/PbIncrementalAmountInput.vue';
 import { areConditionsValid } from '../../services/scenarioConditionals';
 import {
   Scenario,
@@ -138,6 +140,8 @@ export default defineComponent({
     PbConfigurationsImport,
     PbAppointmentForm,
     PbCitySearch,
+    PbWarningMessage,
+    PbIncrementalAmountInput,
   },
 
   props: {

package/src/components/warning-message/PbWarningMessage.vue

@@ -123,7 +123,7 @@ export default defineComponent({
         if (element) {
           SVGInjector(element, {
             each: function (svg) {
-              svg.setAttribute('fill', '#C65200');
+              (svg as any).setAttribute('fill', '#C65200');
             },
           });
         }