project-booster-vue 10.3.2 → 10.4.0

package/package.json

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

package/src/components/question/upload-document/UploadDocument.ts

@@ -3,6 +3,7 @@ import { ScenarioStepNextStep } from '@/types/pb/Scenario';
 export interface UploadDocumentMultiSelectAction {
   label: string;
   nextStep: ScenarioStepNextStep;
+  next?: any;
 }
 
 export interface UploadDocumentMultiSelect {
@@ -56,6 +57,7 @@ export interface UploadDocumentViewModel {
   backLink?: string;
   mediaPayload: UploadDocumentMediaPayload;
   showMore?: boolean;
+  analytics?: any;
 }
 
 export interface UploadDocumentPayload {

package/src/components/rework/cards/MPbCards.stories.mdx

@@ -2,7 +2,8 @@ import cloneDeep from 'lodash.clonedeep';
 import isEqual from 'lodash.isequal';
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import { computeAllCombinations } from '../../../services/computeAllCombinations';
-import MPbCard, { PB_CARD_VALIDATOR } from './MPbCards';
+import MPbCard from './MPbCards';
+import { PB_CARD_VALIDATOR } from '../services/validator';
 
 export const serializeValues = (values) => {
   return values.reduce((accumulator, value, index) => {

package/src/components/rework/cards/MPbCards.vue

@@ -92,253 +92,255 @@
         </div>
         <div class="pb-card__image__checkbox" :class="{ active: selected }"></div>
       </div>
-      <m-pb-card-selection-indicator :selectable="selectable" :selected="selected" ref="MPbCardSelectionIndicator" />
-      <m-pb-card-type-indicator v-if="typeIcon" :type-icon="typeIcon" ref="MPbCardTypeIcon" />
+      <m-pb-card-selection-indicator :selectable="selectable" :selected="selected" />
+      <m-pb-card-type-indicator v-if="typeIcon" :type-icon="typeIcon" />
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import MImage from '../../mozaic/image/MImage.vue';
 import MPbCardSelectionIndicator from './decorators/MPbCardSelectionIndicator.vue';
 import MPbCardTypeIndicator from './decorators/MPbCardTypeIndicator.vue';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { MFlag, MButton, MLink } from '@mozaic-ds/vue-3';
-
-export const PB_CARD_VALIDATOR = {
-  cardMinRatio: ['auto', '16x9', '3x2', '4x3', '1x1', '3x4', '2x3'],
-  imageRatio: ['16x9', '3x2', '4x3', '1x1', '3x4', '2x3'],
-  alignText: ['left', 'center', 'right'],
-};
-
-export default defineComponent({
-  name: 'MPbCard',
-
-  components: {
-    MLink,
-    MButton,
-    MFlag,
-    MImage,
-    MPbCardSelectionIndicator,
-    MPbCardTypeIndicator,
+import { computed } from '@vue/reactivity';
+import { defineProps, defineEmits } from 'vue';
+import { PB_CARD_VALIDATOR } from '../services/validator';
+
+const props = defineProps({
+  /**
+   * The image URL
+   */
+  image: {
+    type: String,
+    default: null,
   },
-
-  props: {
-    /**
-     * The image URL
-     */
-    image: {
-      type: String,
-      default: null,
-    },
-    /**
-     * Flag indicating whether the is covers or is contained in its container.
-     */
-    imageIsContained: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * The title displayed over the image
-     */
-    imageTitle: {
-      type: String,
-      default: null,
-    },
-    /**
-     * The flag label
-     */
-    flagLabel: {
-      type: String,
-      default: null,
-    },
-    /**
-     * The flag theme
-     */
-    flagTheme: {
-      type: String,
-      default: 'solid',
-    },
-    /**
-     * The hero text
-     */
-    hero: {
-      type: String,
-      default: null,
-    },
-    /**
-     * The card title
-     */
-    title: {
-      type: String,
-      default: null,
-    },
-    /**
-     * The card text
-     */
-    text: {
-      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.
-     */
-    buttonHref: {
-      type: String,
-      default: null,
-    },
-    /**
-     * The button label
-     */
-    buttonLabel: {
-      type: String,
-      default: null,
-    },
-    /**
-     * Defines if the card is disabled
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Defines if the multiselect indicator is displayed
-     */
-    selectable: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Defines if the selected indicator is displayed
-     */
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Defines the text alignment
-     */
-    alignText: {
-      type: String,
-      default: 'left',
-      validator: (value: string) => {
-        return PB_CARD_VALIDATOR.alignText.indexOf(value) !== -1;
-      },
-    },
-    /**
-     * Defines the alignment along the horizontal axis
-     */
-    alignHorizontal: {
-      type: String,
-      default: 'flex-start',
-    },
-    /**
-     * Defines the default behavior for how flex items are laid out along the vertical axis
-     */
-    alignVertical: {
-      type: String,
-      default: 'flex-start',
-    },
-    /**
-     * Minimum card ratio
-     */
-    cardMinRatio: {
-      type: String,
-      default: null,
-      validator: (value: string) => {
-        return PB_CARD_VALIDATOR.cardMinRatio.indexOf(value) !== -1;
-      },
-    },
-    /**
-     * Defines if the image ratio
-     */
-    imageRatio: {
-      type: String,
-      default: '3x2',
-      validator: (value: string) => {
-        return PB_CARD_VALIDATOR.imageRatio.indexOf(value) !== -1;
-      },
-    },
-    /**
-     * The card type icon
-     */
-    typeIcon: {
-      type: String,
-      default: null,
-    },
-    /**
-     * The link label
-     */
-    linkLabel: {
-      type: String,
-      default: null,
-    },
-    /**
-     * Defines if the card is flatenned (borders instead of shadows, no interaction available)
-     */
-    flattened: {
-      type: [Boolean, String],
-      default: false,
-    },
-    /**
-     * Definies if the card has a border top
-     */
-    borderTop: {
-      type: String,
-      default: null,
-    },
-    /**
-     * Get the answer code
-     */
-    answerCode: {
-      type: String,
-      default: null,
-    },
+  /**
+   * Flag indicating whether the is covers or is contained in its container.
+   */
+  imageIsContained: {
+    type: Boolean,
+    default: false,
   },
-
-  computed: {
-    cardMinHeight() {
-      let cardMinHeight = 0;
-      if (this.$refs.pbCardSelectionIndicator) {
-        cardMinHeight = this.typeIcon
-          ? this.$refs.pbCardTypeIcon.$el.clientHeight
-          : this.$refs.pbCardSelectionIndicator.$el.clientHeight;
-      }
-      return cardMinHeight;
-    },
+  /**
+   * The title displayed over the image
+   */
+  imageTitle: {
+    type: String,
+    default: null,
   },
-
-  methods: {
-    handleLinkClicked() {
-      this.$emit('link-click');
-    },
-    handleCardClick() {
-      this.cardLink ? window.open(this.cardLink, '_self') : '';
-      !this.buttonLabel && !this.linkLabel ? this.$emit('card-click') : '';
+  /**
+   * The flag label
+   */
+  flagLabel: {
+    type: String,
+    default: null,
+  },
+  /**
+   * The flag theme
+   */
+  flagTheme: {
+    type: String,
+    default: 'solid',
+  },
+  /**
+   * The hero text
+   */
+  hero: {
+    type: String,
+    default: null,
+  },
+  /**
+   * The card title
+   */
+  title: {
+    type: String,
+    default: null,
+  },
+  /**
+   * The card text
+   */
+  text: {
+    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.
+   */
+  buttonHref: {
+    type: String,
+    default: null,
+  },
+  /**
+   * The button label
+   */
+  buttonLabel: {
+    type: String,
+    default: null,
+  },
+  /**
+   * Defines if the card is disabled
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Defines if the multiselect indicator is displayed
+   */
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Defines if the selected indicator is displayed
+   */
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Defines the text alignment
+   */
+  alignText: {
+    type: String,
+    default: 'left',
+    validator: (value: string) => {
+      return PB_CARD_VALIDATOR.alignText.indexOf(value) !== -1;
     },
-    handleButtonLinkClicked(href: string) {
-      this.handleButtonClicked();
-      window.open(href, '_self');
+  },
+  /**
+   * Defines the alignment along the horizontal axis
+   */
+  alignHorizontal: {
+    type: String,
+    default: 'flex-start',
+  },
+  /**
+   * Defines the default behavior for how flex items are laid out along the vertical axis
+   */
+  alignVertical: {
+    type: String,
+    default: 'flex-start',
+  },
+  /**
+   * Minimum card ratio
+   */
+  cardMinRatio: {
+    type: String,
+    default: null,
+    validator: (value: string) => {
+      return PB_CARD_VALIDATOR.cardMinRatio.indexOf(value) !== -1;
     },
-    handleButtonClicked() {
-      /**
-       * Emitted when clicking on the card button
-       * @event button-click
-       * @type {Event}
-       */
-      this.$emit('button-click', { label: this.buttonLabel });
+  },
+  /**
+   * Defines if the image ratio
+   */
+  imageRatio: {
+    type: String,
+    default: '3x2',
+    validator: (value: string) => {
+      return PB_CARD_VALIDATOR.imageRatio.indexOf(value) !== -1;
     },
-    sanitizeCerberusAttribut,
+  },
+  /**
+   * The card type icon
+   */
+  typeIcon: {
+    type: String,
+    default: null,
+  },
+  /**
+   * The link label
+   */
+  linkLabel: {
+    type: String,
+    default: null,
+  },
+  /**
+   * Defines if the card is flatenned (borders instead of shadows, no interaction available)
+   */
+  flattened: {
+    type: [Boolean, String],
+    default: false,
+  },
+  /**
+   * Definies if the card has a border top
+   */
+  borderTop: {
+    type: String,
+    default: null,
+  },
+  /**
+   * Get the answer code
+   */
+  answerCode: {
+    type: String,
+    default: null,
   },
 });
+
+/**
+ * Define many emits to link, button and card clicked
+ */
+const $emit = defineEmits(['card-click', 'link-click', 'button-click']);
+
+/**
+ * Define min height card
+ */
+const cardMinHeight = computed(() => {
+  let cardMinHeightValue = 0;
+  if (MPbCardSelectionIndicator.value) {
+    cardMinHeightValue = props.typeIcon
+      ? MPbCardTypeIndicator.value.$el.clientHeight
+      : MPbCardSelectionIndicator.value.$el.clientHeight;
+  }
+  return cardMinHeightValue;
+});
+
+/**
+ * Link clicked
+ */
+const handleLinkClicked = () => {
+  $emit('link-click');
+};
+
+/**
+ * Card clicked
+ */
+const handleCardClick = () => {
+  props.cardLink ? window.open(props.cardLink, '_self') : '';
+  !props.buttonLabel && !props.linkLabel ? $emit('card-click') : '';
+};
+
+/**
+ * Open link to another tabs
+ * @param href
+ */
+const handleButtonLinkClicked = (href: string) => {
+  handleButtonClicked();
+  window.open(href, '_self');
+};
+
+/**
+ * Button clicked
+ */
+const handleButtonClicked = () => {
+  /**
+   * Emitted when clicking on the card button
+   * @event button-click
+   * @type {Event}
+   */
+  $emit('button-click', { label: props.buttonLabel });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -388,7 +390,7 @@ $responsive-breakpoint: 's';
   &__image-container {
     padding: $mu050 $mu050 0 $mu050;
     position: relative;
-    width: 100%;
+    width: calc(100% - $mu100);
 
     & > div {
       border-radius: 5px;

package/src/components/rework/cards/MPbCardsList.stories.mdx

@@ -0,0 +1,72 @@
+import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import MPbCardsList from './MPbCardsList.vue';
+import CARDS_LIST from './cards-list';
+import CARDS_LIST_3 from './3-cards-list';
+import CARDS_LIST_4 from './4-cards-list';
+
+<Meta
+  title="Project Booster/Rework/Cards/MPbCardsList  🧬"
+  component={MPbCardsList}
+  decorators={[nestedAppDecorator({}, [])]}
+/>
+
+# 🦠 `MPbCardsList` - Component
+
+The `MPbCardsList` component is a list of `PbCard` component.
+
+# `MPbCardsList` - Component props
+
+export const TemplateSandbox = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { MPbCardsList },
+    setup() {
+      return {
+        args,
+      };
+    },
+    template: `<m-pb-cards-list
+      :cards="args.cards"
+      style="margin: 0 auto; max-width: 1024px; width: 95vw;"
+    />`,
+  };
+};
+
+<Canvas>
+  <Story
+    name="101 Sandbox"
+    parameters={{ controls: { disable: true } }}
+    args={{
+      cards: CARDS_LIST.cards,
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="101 Sandbox" />
+
+<Canvas>
+  <Story
+    name="Features/3 cards"
+    parameters={{ controls: { disable: true } }}
+    args={{
+      cards: CARDS_LIST_3.cards,
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Features/4 cards"
+    parameters={{ controls: { disable: true } }}
+    args={{
+      cards: CARDS_LIST_4.cards,
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>