Merge pull request #311 from PrestaShopCorp/310-feature-breadcrumb-ad…

…d-a-new-prop-items-json fix: #310 added the dataItems prop to use in the web-component version
PrestaShopCorp · Feb 9, 2024 · 399f551 · 399f551
2 parents d951ff1 + cf1cdc8
commit 399f551
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 9 deletions.
diff --git a/packages/components/breadcrumb/src/breadcrumb.ts b/packages/components/breadcrumb/src/breadcrumb.ts
@@ -11,7 +11,8 @@ export interface BreadcrumbItem {
 }
 
 export interface BreadcrumbProps {
-  items: BreadcrumbItem[]
+  items?: BreadcrumbItem[]
+  itemsJson?: string
   separatorIcon?: string
   icon?: string
 }

diff --git a/packages/components/breadcrumb/src/breadcrumb.vue b/packages/components/breadcrumb/src/breadcrumb.vue
@@ -1,6 +1,6 @@
 <template>
   <nav
-    v-if="items.length"
+    v-if="internalItems && internalItems.length"
     class="puik-breadcrumb"
     role="navigation"
   >
@@ -12,7 +12,7 @@
     />
 
     <div
-      v-for="(item, index) in items.slice(0, items.length - 1)"
+      v-for="(item, index) in internalItems.slice(0, internalItems.length - 1)"
       :key="`puik-breadcrumb-item-${index}`"
       class="puik-breadcrumb__item"
     >
@@ -35,29 +35,41 @@
     </div>
 
     <div
+      v-if="internalItems.length"
       class="puik-breadcrumb__item--last"
       :data-test="
-        items[items.length - 1].dataTest
-          ? items[items.length - 1].dataTest
+        internalItems[internalItems.length - 1].dataTest
+          ? internalItems[internalItems.length - 1].dataTest
           : undefined
       "
     >
-      {{ items[items.length - 1].label }}
+      {{ internalItems[internalItems.length - 1].label }}
     </div>
   </nav>
 </template>
 
 <script setup lang="ts">
 import PuikLink from '../../link/src/link.vue';
 import PuikIcon from '../../icon/src/icon.vue';
-import type { BreadcrumbProps } from './breadcrumb';
+import { computed, ref, watch } from 'vue';
+import type { BreadcrumbProps, BreadcrumbItem } from './breadcrumb';
 defineOptions({
   name: 'PuikBreadcrumb'
 });
 
-withDefaults(defineProps<BreadcrumbProps>(), {
+const props = withDefaults(defineProps<BreadcrumbProps>(), {
   separatorIcon: 'keyboard_arrow_right'
 });
+
+const internalItems = ref<BreadcrumbItem[]>([]);
+
+const itemsToWatch = computed(() => {
+  return props.itemsJson ? JSON.parse(props.itemsJson) : props.items;
+});
+
+watch(itemsToWatch, (newValue) => {
+  internalItems.value = newValue;
+}, { immediate: true });
 </script>
 
 <style lang="scss">

diff --git a/packages/components/breadcrumb/stories/breadcrumb.stories.ts b/packages/components/breadcrumb/stories/breadcrumb.stories.ts
@@ -9,7 +9,7 @@ export default {
       description: 'Link displayed in breadcrumb',
       table: {
         defaultValue: {
-          summary: '[]'
+          summary: 'undefined'
         },
         type: {
           summary: 'BreadcrumbItem[]',
@@ -28,6 +28,19 @@ interface BreadBreadcrumbItem {
         }
       }
     },
+    itemsJson: {
+      control: 'text',
+      description: 'The breadcrumb items as a JSON string. Use this prop when using the component as a Web Component. For regular Vue usage, prefer the `items` prop.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string',
+          detail: 'A JSON string representing an array of BreadcrumbItem'
+        }
+      }
+    },
     separatorIcon: {
       control: 'text',
       description: 'Set icon between icon',
@@ -65,6 +78,21 @@ interface BreadBreadcrumbItem {
         target: '_blank'
       }
     ],
+    itemsJson: JSON.stringify([
+      {
+        label: 'First link',
+        href: '#'
+      },
+      {
+        label: 'Second link',
+        href: '#'
+      },
+      {
+        label: 'Third link',
+        to: 'name',
+        target: '_blank'
+      }
+    ]),
     separatorIcon: 'keyboard_arrow_right',
     icon: 'home'
   }
@@ -89,6 +117,22 @@ export const Default = {
       source: {
         code: `
   <!--VueJS Snippet-->
+  const items = [
+    {
+      label: 'First link',
+      href: '#'
+    },
+    {
+      label: 'Second link',
+      href: '#'
+    },
+    {
+      label: 'Third link',
+      to: 'name',
+      target: '_blank'
+    }
+  ]
+
   <puik-breadcrumb
     :items="items"
     :icon="icon"
@@ -113,3 +157,71 @@ export const Default = {
     }
   }
 };
+
+export const WithDataItems = {
+  render: Template,
+  args: {
+    itemsJson: JSON.stringify([
+      {
+        label: 'First link',
+        href: '#'
+      },
+      {
+        label: 'Second link',
+        href: '#'
+      },
+      {
+        label: 'Third link',
+        to: 'name',
+        target: '_blank'
+      }
+    ]),
+    separatorIcon: 'keyboard_arrow_right',
+    icon: 'home'
+  },
+
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  itemsJson: JSON.stringify([
+    {
+      label: 'First link',
+      href: '#'
+    },
+    {
+      label: 'Second link',
+      href: '#'
+    },
+    {
+      label: 'Third link',
+      to: 'name',
+      target: '_blank'
+    }
+  ])
+
+  <puik-breadcrumb
+    :items-json="itemsJson"
+    :icon="icon"
+  ></puik-breadcrumb>
+
+  <!--HTML/CSS Snippet-->
+  <nav class="puik-breadcrumb" role="navigation">
+    <div class="puik-icon material-icons-round puik-breadcrumb__home-icon" style="font-size: 16px;">home</div>
+    <div class="puik-breadcrumb__item">
+      <a href="#" target="_self" class="puik-link puik-link--sm puik-breadcrumb__item-link">First link</a>
+      <div class="puik-icon material-icons-round puik-breadcrumb__item-icon" style="font-size: 16px;">keyboard_arrow_right</div>
+    </div>
+    <div class="puik-breadcrumb__item">
+      <a href="#" target="_self" class="puik-link puik-link--sm puik-breadcrumb__item-link">Second link</a>
+      <div class="puik-icon material-icons-round puik-breadcrumb__item-icon" style="font-size: 16px;">keyboard_arrow_right</div>
+    </div>
+    <div class="puik-breadcrumb__item--last">Third link</div>
+  </nav>
+        `,
+        language: 'html'
+      }
+    }
+  }
+};
diff --git a/packages/components/breadcrumb/test/breadcrumb.spec.ts b/packages/components/breadcrumb/test/breadcrumb.spec.ts
@@ -41,6 +41,8 @@ describe('Breadcrumb tests', () => {
       label: 'Last link'
     }
   ];
+  const itemsJson: string = JSON.stringify(items);
+
   it('should be a vue instance', () => {
     factory({ items });
     expect(wrapper).toBeTruthy();
@@ -96,4 +98,12 @@ describe('Breadcrumb tests', () => {
     const lastItem = getBreadcrumbItems().pop();
     expect(lastItem?.element.tagName).toBe('DIV');
   });
+  it('should handle dataItems prop correctly', () => {
+    factory({ itemsJson });
+    const localItems = getBreadcrumbItems();
+    expect(localItems.length).toBe(items.length);
+    items.forEach((item, index) => {
+      expect(localItems[index].text()).toContain(item.label);
+    });
+  });
 });