project-booster-vue 9.14.1 → 9.14.2

package/package.json

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

package/src/components/cards/PbCard.stories.mdx

@@ -105,11 +105,12 @@ The `PbCard` Vue component is a card component with:
 - A hero,
 - A title,
 - A text,
-- A button.
+- A button,
+- A link.
 
 The minimum card ratio can be forced.
 
-It is hoverable (unless a `buttonLabel` is valued);
+It is hoverable (unless a `buttonLabel` or `linkLabel` is valued);
 
 As many card components, the card has:
 
@@ -126,7 +127,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
   setup() {
     return { args };
   },
-  template: `<div style="display: flex;">
+  template: `<div style="display: flex;height: 60vh;width: 256px">
     <pb-card
       :image-title="args.imageTitle"
       :image="args.image"
@@ -136,6 +137,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
       :hero="args.hero"
       :title="args.title"
       :text="args.text"
+      :linkLabel="args.linkLabel"
       :button-label="args.buttonLabel"
       :button-href="args.buttonHref"
       :card-min-ratio="args.cardMinRatio"
@@ -146,9 +148,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
       :selectable="args.selectable"
       :selected="args.selected"
       :type-icon="args.typeIcon"
-      :rating="args.rating"
-      :pricing="args.pricing"
-      style="width: 100%;max-width: 256px;"
+      style="width: 100%;max-width: 256px;height: 100%;"
     />
   </div>`,
 });
@@ -158,6 +158,13 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     name="101 Sandbox"
     args={{
       title: 'The card title',
+      flagLabel: 'The card flag label',
+      flagTheme: 'primary',
+      hero: 'The card hero',
+      text: 'The card text',
+      imageTitle: 'The card image title',
+      linkLabel: 'The link label',
+      buttonLabel: 'The button label',
       image:
         'https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80',
     }}
@@ -178,7 +185,11 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
+          <pb-card
+            image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
+            class="pb-card--story"
+          />
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             flag-label="The flag label"
@@ -209,7 +220,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             flag-label="The flag label"
@@ -242,7 +253,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             flag-label="The flag label"
@@ -339,7 +350,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             card-min-ratio="16x9"
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
@@ -424,14 +435,14 @@ export const TemplateSandbox = (args, { argTypes }) => ({
   </Story>
 </Canvas>
 
-## **alignText** prop
+## **alignText** prop (mixed with **alignVertical** prop)
 
 <Canvas>
   <Story name="Features/Align text" parameters={{ controls: { disable: true } }}>
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             flag-label="The flag label"
@@ -450,6 +461,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
             text="The card text"
             button-label="The button label"
             align-text="center"
+            align-vertical="center"
             class="pb-card--story"
           />
           <pb-card
@@ -460,6 +472,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
             text="The card text"
             button-label="The button label"
             align-text="right"
+            align-vertical="flex-end"
             class="pb-card--story"
           />
           <pb-card
@@ -502,7 +515,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             flag-label="The flag label"
@@ -603,7 +616,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             card-min-ratio="3x4"
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
@@ -673,7 +686,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             image-ratio="16x9"
@@ -777,7 +790,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             flag-label="The flag label"
@@ -806,7 +819,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
         <pb-card
              image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
              flag-label="The flag label"
@@ -874,7 +887,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
       components: { PbCard },
       data: () => ({ HTML_STRING }),
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             flag-label="The flag label"
@@ -914,7 +927,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
       components: { PbCard },
       data: () => ({ HTML_STRING }),
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             title="The card title"
@@ -949,7 +962,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
       components: { PbCard },
       data: () => ({ HTML_STRING }),
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             title="The card title"
@@ -991,7 +1004,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             title="The card title"
@@ -1018,7 +1031,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             title="The card title"
@@ -1029,7 +1042,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             title="The card title"
-            text="The card text should have two lines"
+            text="The card text should have three lines of text to test alignment"
             button-label="The button label"
             button-href="http://www.google.com"
             class="pb-card--story"
@@ -1048,7 +1061,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
       components: { PbCard },
       data: () => ({ HTML_STRING }),
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             flag-label="The flag label"
@@ -1142,7 +1155,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             title="The card title"
@@ -1201,7 +1214,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             title="The card title"
@@ -1272,7 +1285,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             title="The card title"
@@ -1306,7 +1319,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             title="The card title"
@@ -1373,7 +1386,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             v-for="variation in generateProps()"
             :image-title="variation.imageTitle"
@@ -1419,86 +1432,6 @@ export const TemplateSandbox = (args, { argTypes }) => ({
   </Story>
 </Canvas>
 
-## **rating** prop
-
-<Canvas>
-  <Story name="Features/Rating" parameters={{ controls: { disable: true } }}>
-    {{
-      components: { PbCard },
-      template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
-          <pb-card
-            image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
-            title="The card title"
-            text="The card text should have two lines"
-            button-label="The button label"
-            type-icon="https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Payment_Bill_24px.svg"
-            class="pb-card--story"
-          />
-          <pb-card
-            image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
-            title="The card title"
-            text="The card text should have two lines"
-            button-label="The button label"
-            :rating="{'numberOfVotes':42,'rate':3.48}"
-            class="pb-card--story"
-          />
-          <pb-card
-            image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
-            title="The card title"
-            text="The card text should have two lines"
-            button-label="The button label"
-            type-icon="https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Payment_Bill_24px.svg"
-            :rating="{'numberOfVotes':675,'rate':4}"
-            class="pb-card--story"
-          />
-        </div>
-      `,
-    }}
-  </Story>
-</Canvas>
-
-## **pricing** prop
-
-<Canvas>
-  <Story name="Features/Pricing" parameters={{ controls: { disable: true } }}>
-    {{
-      components: { PbCard },
-      template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
-          <pb-card
-            image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
-            title="The card title"
-            text="The card text should have two lines"
-            button-label="The button label"
-            type-icon="https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Payment_Bill_24px.svg"
-            class="pb-card--story"
-          />
-          <pb-card
-            image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
-            title="The card title"
-            text="The card text should have two lines"
-            button-label="The button label"
-            :rating="{'numberOfVotes':42,'rate':3.48}"
-             :pricing="{'price': 29.9,'oldPrice':34.9,'discount':{'type':'PERCENTAGE','value':14} }"
-            class="pb-card--story"
-          />
-          <pb-card
-            image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
-            title="The card title"
-            text="The card text should have two lines"
-            button-label="The button label"
-            type-icon="https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Payment_Bill_24px.svg"
-            :rating="{'numberOfVotes':675,'rate':4}"
-            :pricing="{'price': 29.9}"
-            class="pb-card--story"
-          />
-        </div>
-      `,
-    }}
-  </Story>
-</Canvas>
-
 ## **link** prop
 
 <Canvas>
@@ -1506,7 +1439,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {{
       components: { PbCard },
       template: `
-        <div style="display: flex;gap: 2rem;flex-wrap: wrap;">
+        <div style="display: flex;gap: 1rem;flex-wrap: wrap;">
           <pb-card
             image="https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
             title="The card title"

package/src/components/cards/PbCard.vue

@@ -6,12 +6,83 @@
     }${flattened ? 'pb-card--no-pointer-events' : ''} ${
       cardMinRatio && cardMinRatio !== 'auto' ? 'm-ratio-container--' + cardMinRatio : ''
     }`"
-    :align-items="alignHorizontal"
     :role="!buttonLabel ? 'button' : 'article'"
     :style="`min-height: ${cardMinHeight}`"
     @click="handleCardClick"
   >
-    <m-flex class="pb-card__container" direction="column" :align-items="alignVertical">
+    <m-flex
+      class="pb-card__container"
+      direction="column-reverse"
+      justify-content="flex-end"
+      :align-items="alignVertical"
+    >
+      <!-- Duplicated wrapper to reset flex formattong context to block formatting context to allow margin to collapse  -->
+      <!-- Break formatting to benefit :empty CSS selector -->
+      <!-- eslint-disable -->
+      <!-- prettier-ignore -->
+      <div class="pb-card__items-container" :style="alignHorizontal ? `justify-content: ${alignHorizontal}` : ''"><m-flex
+            v-if="flagLabel"
+            class="pb-card__flag"
+            :class="{ 'pb-card__flag--disabled': disabled }"
+            :style="`text-align: ${alignText}`"
+            :justify-content="alignVertical"
+          >
+            <m-flag :label="flagLabel" :theme="disabled ? 'solid-dark' : flagTheme" />
+          </m-flex><div
+            v-if="hero"
+            v-html="hero"
+            class="pb-card__hero"
+            :class="{ 'pb-card__hero--disabled': disabled }"
+            :style="`text-align: ${alignText}`"
+          /><m-flex v-if="title || text" direction="column" gap="0.25rem" :align-items="alignVertical" :justify-content="alignHorizontal">
+            <div
+              v-if="title"
+              v-html="title"
+              class="pb-card__title"
+              :class="{ 'pb-card__title--disabled': disabled }"
+              :style="`text-align: ${alignText}`"
+            />
+            <div v-if="text" v-html="text" class="pb-card__text" :style="`text-align: ${alignText}`" />
+          </m-flex><div class="pb-card__actions-container" v-if="linkLabel || buttonLabel"><m-flex
+              v-if="buttonLabel"
+              class="pb-card__buttons-container"
+              align-items="flex-end"
+              :justify-content="alignVertical"
+            >
+              <m-button
+                v-if="buttonLabel && !buttonHref"
+                class="pb-card__button"
+                :label="buttonLabel"
+                size="s"
+                :disabled="disabled"
+                @click="handleButtonClicked"
+              />
+              <m-button
+                v-if="buttonHref && buttonLabel"
+                class="pb-card__button"
+                :label="buttonLabel"
+                :disabled="disabled"
+                rel="noopener noreferrer"
+                target="_blank"
+                size="s"
+                @click="handleButtonLinkClicked(buttonHref)"
+              />
+            </m-flex><m-flex
+              v-if="linkLabel"
+              class="pb-card__links-container"
+              align-items="flex-end"
+              :justify-content="alignVertical"
+            >
+              <m-link
+                v-if="linkLabel"
+                class="pb-card__link"
+                :label="linkLabel"
+                :disabled="disabled"
+                size="s"
+                @click="handleLinkClicked"
+              />
+            </m-flex></div></div>
+      <!-- eslint-enable -->
       <div v-if="image" class="pb-card__image-container">
         <m-image
           :src="image"
@@ -32,85 +103,9 @@
           </div>
         </m-flex>
       </div>
-      <!-- Duplicated wrapper to reset flex formattong context to block formatting context to allow margin to collapse  -->
-      <div style="height: 100%; max-width: 100%">
-        <!-- Break formatting to benefit :empty CSS selector -->
-        <!-- eslint-disable -->
-        <!-- prettier-ignore -->
-        <div class="pb-card__items-container" direction="column"><m-flex
-            v-if="flagLabel"
-            class="pb-card__flag"
-            :class="{ 'pb-card__flag--disabled': disabled }"
-            :style="`text-align: ${alignText}`"
-            :justify-content="alignVertical"
-          >
-            <m-flag :label="flagLabel" :theme="disabled ? 'solid-dark' : flagTheme" />
-          </m-flex><div
-            v-if="hero"
-            v-html="hero"
-            class="pb-card__hero"
-            :class="{ 'pb-card__hero--disabled': disabled }"
-            :style="`text-align: ${alignText}`"
-          /><div
-            v-if="title"
-            v-html="title"
-            class="pb-card__title"
-            :class="{ 'pb-card__title--disabled': disabled }"
-            :style="`text-align: ${alignText}`"
-          /><div v-if="text" v-html="text" class="pb-card__text" :style="`text-align: ${alignText}`" /><m-flex class="pb-card__rating" align-items="center" v-if="rating">
-            <m-rating :value="rating.rate" size="s" />
-            <div v-html="rating.numberOfVotes + ' avis'" class="pb-card__rating-text" />
-          </m-flex><div class="pb-card__pricing" v-if="pricing">
-            <div v-html="pricing.oldPrice + '€ / prestation'" class="pb-card__pricing-old" v-if="pricing.oldPrice" />
-            <div
-              v-html="pricing.price + '€ / prestation'"
-              :class="{ 'pb-card__pricing-discount': pricing.discount }"
-              class="pb-card__pricing-new"
-            />
-          </div><m-flex
-            v-if="buttonLabel"
-            class="pb-card__buttons-container"
-            align-items="flex-end"
-            :justify-content="alignVertical"
-          >
-            <m-button
-              v-if="buttonLabel && !buttonHref"
-              class="pb-card__button"
-              :label="buttonLabel"
-              size="s"
-              :disabled="disabled"
-              @click="handleButtonClicked"
-            />
-            <m-button
-              v-if="buttonHref && buttonLabel"
-              class="pb-card__button"
-              :label="buttonLabel"
-              :disabled="disabled"
-              rel="noopener noreferrer"
-              target="_blank"
-              size="s"
-              @click="handleButtonLinkClicked(buttonHref)"
-            />
-          </m-flex><m-flex
-            v-if="linkLabel"
-            class="pb-card__links-container"
-            align-items="flex-end"
-            :justify-content="alignVertical"
-          >
-            <m-link
-              v-if="linkLabel"
-              class="pb-card__link"
-              :label="linkLabel"
-              :disabled="disabled"
-              size="s"
-              @click="handleLinkClicked"
-            />
-          </m-flex></div>
-        <!-- eslint-enable -->
-      </div>
+      <pb-card-selection-indicator :selectable="selectable" :selected="selected" ref="pbCardSelectionIndicator" />
+      <pb-card-type-indicator v-if="typeIcon" :type-icon="typeIcon" ref="pbCardTypeIcon" />
     </m-flex>
-    <pb-card-selection-indicator :selectable="selectable" :selected="selected" ref="pbCardSelectionIndicator" />
-    <pb-card-type-indicator v-if="typeIcon" :type-icon="typeIcon" ref="pbCardTypeIcon" />
   </m-flex>
 </template>
 
@@ -123,7 +118,6 @@ import MImage from '../mozaic/image/MImage.vue';
 import PbCardSelectionIndicator from './decorators/PbCardSelectionIndicator.vue';
 import PbCardTypeIndicator from './decorators/PbCardTypeIndicator.vue';
 import { M_FLEX_VALIDATOR } from '../mozaic/flex/MFlex.vue';
-import MRating from '../mozaic/rating/MRating.vue';
 import MLink from '../mozaic/link/MLink.vue';
 
 export const PB_CARD_VALIDATOR = {
@@ -137,7 +131,6 @@ export default defineComponent({
 
   components: {
     MLink,
-    MRating,
     MButton,
     MFlag,
     MFlex,
@@ -296,21 +289,7 @@ export default defineComponent({
       default: null,
     },
     /**
-     * The rating
-     */
-    rating: {
-      type: Object,
-      default: null,
-    },
-    /**
-     * The pricing
-     */
-    pricing: {
-      type: Object,
-      default: null,
-    },
-    /**
-     * The link label to display dialog
+     * The link label
      */
     linkLabel: {
       type: String,
@@ -371,10 +350,18 @@ $responsive-breakpoint: 's';
 
   background-color: white;
   border: 1px solid $color-grey-300;
-  height: fit-content;
   overflow: hidden;
   position: relative;
 
+  &__items-container:empty ~ &__image-container {
+    height: 100%;
+
+    .pb-card__image {
+      height: 100%;
+      padding-top: 0;
+    }
+  }
+
   &--hoverable:hover {
     @include set-box-shadow('l');
 
@@ -432,12 +419,14 @@ $responsive-breakpoint: 's';
   }
 
   &__items-container {
-    display: block;
-    height: 100%;
-    margin: $mu150 $mu100;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: $mu075;
+    padding: $mu100;
 
     @include set-from-screen($responsive-breakpoint) {
-      margin: $mu200 $mu150;
+      padding: $mu150;
     }
 
     &:empty {
@@ -446,8 +435,6 @@ $responsive-breakpoint: 's';
   }
 
   &__flag {
-    margin: $mu100 0;
-
     &--disabled {
       opacity: 0.6;
     }
@@ -459,7 +446,6 @@ $responsive-breakpoint: 's';
 
     color: $color-grey-900;
     hyphens: auto;
-    margin: $mu100 0;
     max-width: 100%;
     overflow-wrap: break-word;
     word-break: break-word;
@@ -483,7 +469,6 @@ $responsive-breakpoint: 's';
 
     color: $color-grey-900;
     hyphens: auto;
-    margin: $mu100 0 $mu050;
     max-width: 100%;
     overflow-wrap: break-word;
     word-break: break-word;
@@ -507,7 +492,6 @@ $responsive-breakpoint: 's';
     color: $color-grey-600;
     height: 100%;
     hyphens: auto;
-    margin: $mu050 0 $mu100;
     max-width: 100%;
     overflow-wrap: break-word;
     word-break: break-word;
@@ -521,26 +505,19 @@ $responsive-breakpoint: 's';
     }
   }
 
-  &__buttons-container {
+  &__actions-container {
+    display: flex;
+    flex-direction: column;
     flex-grow: 1;
-    margin: $mu100 0;
+    gap: $mu075;
+    justify-content: end;
   }
 
   &__button {
-    height: auto !important;
     padding-bottom: $mu050;
     padding-top: $mu050;
   }
 
-  &__links-container {
-    flex-grow: 1;
-    margin: $mu050 0 0;
-  }
-
-  &__link {
-    height: auto !important;
-  }
-
   &--disabled {
     background: $color-grey-100;
     border: 2px solid $color-grey-100;
@@ -551,35 +528,5 @@ $responsive-breakpoint: 's';
       cursor: not-allowed;
     }
   }
-
-  &__rating {
-    &-text {
-      @include set-font-scale('02', 'm');
-
-      color: $color-grey-700;
-      margin-left: $mu050;
-    }
-  }
-
-  &__pricing {
-    &-old {
-      @include set-font-scale('04', 'm');
-
-      color: $color-grey-900;
-      margin-top: $mu050;
-      text-decoration-line: line-through;
-    }
-
-    &-new {
-      @include set-font-scale('07', 'm');
-      @include set-font-face('semi-bold');
-      color: $color-grey-800;
-      margin-top: $mu100 !important;
-    }
-
-    &-discount {
-      color: $color-danger-500 !important;
-    }
-  }
 }
 </style>

package/src/components/carousel/PbCarousel.vue

@@ -10,8 +10,6 @@
             :image-ratio="item.imageRatio"
             :flag-label="item.flagLabel"
             :flag-theme="item.flagTheme"
-            :rating="item.rating"
-            :pricing="item.pricing"
             :hero="item.hero"
             :title="item.title"
             :text="item.text"

package/src/components/pedagogy/PbPedagogy.vue

@@ -124,10 +124,13 @@ export default defineComponent({
           },
         },
       });
-      const targetUrl = card.viewModel.url.replace(
-        '@@PB_PROJECT_ID_FILLER@@',
-        this.currentAppointmentQualification.inhabitantProjectId,
-      );
+      let targetUrl = card.viewModel.url;
+      if (this.currentAppointmentQualification && this.currentAppointmentQualification.inhabitantProjectId) {
+        targetUrl = card.viewModel.url.replace(
+          '@@PB_PROJECT_ID_FILLER@@',
+          this.currentAppointmentQualification.inhabitantProjectId,
+        );
+      }
       window.open(targetUrl, '_blank');
     },
 

package/src/components/question/PbQuestion.vue

@@ -184,7 +184,6 @@
         </div>
       </transition-group>
     </pb-sticky-footer>
-    <div class="pb-question__padding-bottom" />
     <m-container>
       <m-flexy
         v-if="payload.viewModel.decoratorStripe && payload.viewModel.decoratorStripe.length > 0"
@@ -202,6 +201,7 @@
         </m-flexy-col>
       </m-flexy>
     </m-container>
+    <div class="pb-question__padding-bottom" />
     <m-dialog class="pb-question__dialog" v-model:show-dialog="displayDialog">
       <template #header v-if="!displayVideo">
         <span>{{ dialog.headerTitle }}</span>

package/src/components/scenario/PbScenario-Demo-Project.stories.js

@@ -1,114 +1,17 @@
+import merge from 'lodash.merge';
 import { ref } from 'vue';
+import { useStore } from 'vuex';
 import axios from 'axios';
 import { object } from '@storybook/addon-knobs';
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
+import storeOptions from '../../stores/store';
 import PbScenario from './PbScenario.vue';
 
 export default {
   title: 'Project Booster/Scenario/PbScenario 🦠/Demo',
   component: PbScenario,
   decorators: [
-    nestedAppDecorator(
-      {
-        state: {
-          summary: {
-            subprojectId: 'ae62d167-e02e-4744-81b1-102cc5816be2',
-            subprojectTemplateId: '22248ac3-9391-47f4-8a54-6fe280c2fa5b',
-            businessUnit: 'LMFR',
-            summaryDate: '2020-05-13T09:49:45.886602047Z',
-            cost: {
-              min: 691526.2,
-              max: 1443197.48,
-              currency: 'EURO',
-            },
-            components: [
-              {
-                componentId: 'LAND',
-                title: 'Terrain en lotissement',
-                cost: {
-                  min: 20664,
-                  max: 38523.6,
-                  currency: 'EURO',
-                },
-                lines: [
-                  {
-                    text: '- Terrain seul',
-                    details: 'Terrain constructible, délimité et viabilisé. La nature du sous-sol est garantie.',
-                    cost: {
-                      min: 19680,
-                      max: 35670,
-                      currency: 'EURO',
-                    },
-                  },
-                  {
-                    text: '- Frais de notaire',
-                    cost: {
-                      min: 984,
-                      max: 2853.6,
-                      currency: 'EURO',
-                    },
-                  },
-                ],
-              },
-              {
-                componentId: 'HOUSE',
-                title: 'Maison contemporaine livrée prête à finir',
-                cost: {
-                  min: 664562.5,
-                  max: 1381050,
-                  currency: 'EURO',
-                },
-                lines: [
-                  {
-                    text: '- Budget construction maison',
-                    details:
-                      "Ce budget n'inclut pas : le terrain, la viabilisation, l'aménagement extérieur et la taxe d'aménagement.",
-                    cost: {
-                      min: 651000,
-                      max: 1255500,
-                      currency: 'EURO',
-                    },
-                  },
-                ],
-              },
-              {
-                componentId: 'TAXES',
-                title: "Taxe d'aménagement",
-                details:
-                  "Taxe qui s'applique pour les projets de construction, de reconstruction et d'agrandissement qui nécessitent des autorisations de travaux. Un abattement de 50% est prévu sur les 100 premiers m².",
-                cost: {
-                  min: 6299.7,
-                  max: 23623.88,
-                  currency: 'EURO',
-                },
-              },
-            ],
-            subprojectAttributes: {
-              finish: 'PARTIALLY_BY_MYSELF',
-              houseType: 'CONTEMPORARY',
-              inseeCode: '59350',
-              land: 'NOT_YET',
-              landSurfaceInSquareMeters: 123,
-              landType: 'IN_A_LOT',
-              livingAreaInSquareMeters: 465,
-            },
-          },
-        },
-
-        getters: {
-          summary(state) {
-            return state.summary;
-          },
-        },
-
-        actions: {
-          sendEventToBus(action) {
-            console.log('Event sent to bus: ', JSON.stringify(action, null, '\t'));
-          },
-        },
-      },
-      [{ path: '/steps/:stepCode/previous/:answers', component: PbScenario }],
-    ),
+    nestedAppDecorator(storeOptions, [{ path: '/steps/:stepCode/previous/:answers', component: PbScenario }]),
   ],
   parameters: { storyshots: { disable: true }, layout: 'fullscreen' },
 };
@@ -124,6 +27,12 @@ const generateStory = (jsonLocation) => () => ({
     },
   },
   setup() {
+    const store = useStore();
+    store.dispatch('documentsPlans/updateContext', { type: 'DOCUMENT', subType: 'PLAN' });
+    store.dispatch('documentsPictures/updateContext', { type: 'DOCUMENT', subType: 'PHOTO' });
+    store.dispatch('estimates/setSummary', {
+      cost: {},
+    });
     const scenarios = ref(null);
     const hasScenario = ref(false);
     axios.get(jsonLocation).then((result) => {