@worksafevictoria/wcl7.5 1.1.9 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/components/Paragraphs/RelatedInformation/index.stories.js

@@ -4,29 +4,11 @@ import { taxonomyTagsList } from '../../../mock/related-info'
 export default {
   title: 'Paragraphs/RelatedInformation',
   component: RelatedInformation,
-  argTypes: {
-    showTaxonomies: {
-      control: 'boolean',
-      defaultValue: true
-  },
-  showTaxonomyHeading: {
-    control: 'boolean',
-      defaultValue: true
-  },
-  taxonomies: {
-    control: 'array',
-    defaultValue: taxonomyTagsList
-  }
+  args: {
+    showTaxonomies: true,
+    showTaxonomyHeading: true,
+    taxonomies: taxonomyTagsList
   }
 }
 
-const Template = (args, { argTypes }) => ({
-  components: { RelatedInformation },
-  props: Object.keys(argTypes),
-  template: `
-    <related-information 
-      v-bind="$props"
-    /> `
-})
-
-export const Default = Template.bind({})
+export const Default = {}

package/src/components/Paragraphs/RelatedInformation/index.vue

@@ -6,20 +6,22 @@
     <row v-if="showTaxonomyHeading">
       <h2>Related information</h2>
     </row>
-    <row class="related-info-tags">
+    <row>
+      <div class="related-info-tags">
       <button
         v-for="(taxonomy, i) in taxonomies"
         :key="i"
-        class="related-info-tag"
+        class="related-info-tag btn text-nowrap"
         role="button"
         @click="
           goToCollectionPage(
-            taxonomy.field_term_link_to_collection_pg.path.alias
+            taxonomy
           )
         "
       >
         <strong>{{ taxonomy.name }}</strong>
       </button>
+    </div>
     </row>
   </container>
 </template>
@@ -49,9 +51,13 @@ export default {
     }
   },
   methods: {
-    goToCollectionPage(url) {
-      this.$router.push(url)
-      this.$emit('goToCollectionPage')
+    goToCollectionPage(taxonomy) {
+      if (process.env.IS_STORYBOOK === 'TRUE') {
+        alert('Will go to Collection Page at : ' + taxonomy.url )
+      } else {
+        this.$router.push(taxonomy.field_term_link_to_collection_pg.path.alias)
+        this.$emit('goToCollectionPage')
+      }
     }
   }
 }

package/src/components/Paragraphs/RelatedInformation/styles.scss

@@ -15,15 +15,13 @@ h2 {
     position: relative;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
     
     .related-info-tags {
         display: flex;
-        justify-content: flex-start;
+        flex-wrap: wrap;
         gap: 12px;
    }
     .related-info-tag {
-        position: relative;
         text-decoration: none;
         font-style: normal;
         font-size: 16px;