project-booster-vue 9.13.3 → 9.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.13.3",
+  "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"