project-booster-vue 9.20.0 → 9.22.0

package/package.json

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

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

@@ -1462,3 +1462,25 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     }}
   </Story>
 </Canvas>
+
+## **Card Link** prop
+
+<Canvas>
+  <Story name="Features/Card Link" parameters={{ controls: { disable: true } }}>
+    {{
+      components: { PbCard },
+      template: `
+        <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"
+            text="The card text should have two lines"
+            card-link="http://www.google.com"
+            type-icon="https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Payment_Bill_24px.svg"
+            class="pb-card--story"
+          />
+        </div>
+      `,
+    }}
+  </Story>
+</Canvas>

package/src/components/cards/PbCard.vue

@@ -196,6 +196,13 @@ export default defineComponent({
       type: String,
       default: null,
     },
+    /**
+     * The button HREF. Will turn the button into a link.
+     */
+    cardLink: {
+      type: String,
+      default: null,
+    },
     /**
      * The button HREF. Will turn the button into a link.
      */
@@ -321,6 +328,7 @@ export default defineComponent({
       this.$emit('link-click');
     },
     handleCardClick() {
+      this.cardLink ? window.open(this.cardLink, '_blank') : '';
       !this.buttonLabel && !this.linkLabel ? this.$emit('card-click') : '';
     },
     handleButtonLinkClicked(href: string) {

package/src/components/question/PbQuestion.vue

@@ -85,6 +85,9 @@
                   :hero="decorate(answers, runtimeOptions, answer.viewModel.hero, payload.defaultDecoratorValue)"
                   :title="decorate(answers, runtimeOptions, answer.viewModel.title, payload.defaultDecoratorValue)"
                   :text="decorate(answers, runtimeOptions, answer.viewModel.text, payload.defaultDecoratorValue)"
+                  :card-link="
+                    decorate(answers, runtimeOptions, answer.viewModel.cardLink, payload.defaultDecoratorValue)
+                  "
                   :button-label="
                     decorate(answers, runtimeOptions, answer.viewModel.buttonLabel, payload.defaultDecoratorValue)
                   "

package/src/components/scenario/PbScenario.vue

@@ -102,6 +102,7 @@ import PbSmartProgressionPrice from '../progression-price/PbSmartProgressionPric
 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 { areConditionsValid } from '../../services/scenarioConditionals';
 import {
   Scenario,
@@ -136,6 +137,7 @@ export default defineComponent({
     PbUploadDocument,
     PbConfigurationsImport,
     PbAppointmentForm,
+    PbCitySearch,
   },
 
   props: {