project-booster-vue 9.44.3 → 9.44.5

package/package.json

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

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

@@ -0,0 +1,59 @@
+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';
+import DEFAULT_PAYLOAD from './default-payload-modal.json';
+
+<Meta
+  title="Project Booster/Scenario/Questions/PbQuestion 🦠/Features/Question/Modal Link"
+  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` - Modal Link 101
+
+## Definition
+
+It is possible to customize the component behaviour by defining properties in the provided `payload` property.
+
+Here is a simple payload:
+
+<Source language="json" code={JSON.stringify(DEFAULT_PAYLOAD, null, '  ')} />
+
+where:
+
+- `viewModel` is the question view model, it defines the question `label` and the answers component type, and if `forceBackButton` is set to true, will always display the back button
+- `answers` is the list of answers for the question. They have a `code` to identify them and a `viewModel` to
+  inflate the component previously defined.
+
+<Canvas>
+  <Story
+    name="101"
+    inline={false}
+    height="862px"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: DEFAULT_PAYLOAD, minHeight: 'auto' }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/question/PbQuestion.vue

@@ -1273,15 +1273,26 @@ $answers-apparition-duration: '0.5s';
 
 <style lang="scss">
 @import 'pb-variables';
+$responsive-breakpoint: 'm';
 
 .pb-question {
   &__dialog-help {
     &__title {
-      padding: $mu250 $mu250 $mu050 $mu250;
+      @include set-font-scale('06', 'm');
+      padding: $mu100 $mu250 $mu050 $mu250;
+
+      @include set-from-screen($responsive-breakpoint) {
+        padding: $mu200 $mu250 $mu050 $mu250;
+      }
 
       h2 {
-        @include set-font-scale('06', 'm');
-        margin-bottom: 0;
+        @include set-font-scale('08', 'm');
+        @include set-font-face('semi-bold');
+        margin-bottom: $mu025;
+      }
+
+      p {
+        margin-top: 0;
       }
     }
 

package/src/components/question/default-payload-modal.json

@@ -0,0 +1,51 @@
+{
+  "viewModel": {
+    "label": "Quel est votre revenu fiscal de référence annuel de votre foyer fiscal ?",
+    "subtitle": "Posez la question à votre propritétaire, cette information est utile pour le calcul des aides.",
+    "answersComponent": "PbCard"
+  },
+  "answers": {
+    "LOW_IDF_1": {
+      "code": "LOW",
+      "viewModel": {
+        "title": "0 - 20 593 €",
+        "borderColor": "#0FB5FC"
+      }
+    },
+    "MIDDLE_IDF_1": {
+      "code": "MIDDLE",
+      "viewModel": {
+        "title": "20 593 - 25 068 €",
+        "borderColor": "#FFDD2D"
+      }
+    },
+    "HIGH_IDF_1": {
+      "code": "HIGH",
+      "viewModel": {
+        "title": "25 068 - 38 184 €",
+        "borderColor": "#B073FF"
+      }
+    },
+    "VERYHIGH_IDF_1": {
+      "code": "VERY-HIGH",
+      "viewModel": {
+        "title": "Plus de 38 184 €",
+        "borderColor": "#FF8CF4"
+      }
+    }
+  },
+  "helpArea": [
+    {
+      "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://storage.googleapis.com/project-booster-media/energyrenovation/reference_tax_income.png"
+        }
+      }
+    }
+  ]
+}

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

@@ -383,12 +383,19 @@ $responsive-breakpoint: 'm';
   &__dialog-help {
     &__title {
       padding: $mu250 $mu250 0 $mu250;
-      @include set-font-scale('06', 'm');
+
+      h2 {
+        @include set-font-scale('08', 'm');
+      }
     }
 
     &__body {
       padding: 0 $mu250;
-      @include set-font-scale('06', 'm');
+
+      p {
+        @include set-font-scale('06', 'm');
+      }
+
       &__image {
         background-size: cover;
         padding: 120px 0;

package/src/components/warning-message/with-modal.json

@@ -9,8 +9,8 @@
       "label": "Comment faire des travaux de rénovation énergétique en tant que locataire ?",
       "action": {
         "viewModelDialog": {
-          "headerTitle": "Votre travaux dans un appartement",
-          "contentHtml": "Mon contenu de modal ici"
+          "headerTitle": "Les précautions avant d’installer une pompe à chaleur en appartement",
+          "contentHtml": "<p>Avant d'installer un pompe à chaleur air-eau dans un appartement, voici quelques précautions à prendre :</p><p>- informez-vous sur le <strong>système de chauffage</strong> de votre immeuble : est-il collectif ou individuel ?</p><p>- vérifiez si <strong>votre commune autorise l'installation</strong> de groupes extérieurs sur votre balcon ou façade dans le plan local d'urbanisme</p><p>- <strong>informez les voisins</strong> de votre projet, et notamment du bruit que peut générer le groupe extérieur</p>"
         }
       }
     },