feat(UsaSidenavItem): add sublist scoped slot

patrickcate · Mar 19, 2024 · 51a6ac7 · 51a6ac7
1 parent 238ca28
commit 51a6ac7
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 16 deletions.
diff --git a/src/components/UsaSidenavItem/UsaSidenavItem.stories.js b/src/components/UsaSidenavItem/UsaSidenavItem.stories.js
@@ -21,11 +21,15 @@ export default {
     default: {
       control: { type: 'text' },
     },
+    sublist: {
+      control: { type: 'text' },
+    },
   },
   args: {
     item: defaultProps.item,
     customClasses: defaultProps.customClasses,
     default: '',
+    sublist: '',
   },
   decorators: [() => ({ template: '<ul class="usa-sidenav"><story /></ul>' })],
 }
@@ -38,6 +42,8 @@ const DefaultTemplate = (args, { argTypes }) => ({
   },
   template: `<UsaSidenavItem :item="item" :custom-classes="customClasses"><template v-if="${!!args.default}" #default="{ item }">${
     args.default
+  }</template><template v-if="${!!args.sublist}" #sublist="{ sublist }">${
+    args.sublist
   }</template></UsaSidenavItem>`,
 })
 
@@ -92,13 +98,30 @@ SublistSidenavItem.args = {
 }
 SublistSidenavItem.storyName = 'With Sublist'
 
-export const ScopedSlotSidenavItem = DefaultTemplate.bind({})
-ScopedSlotSidenavItem.args = {
+export const ScopedDefaultSlotSidenavItem = DefaultTemplate.bind({})
+ScopedDefaultSlotSidenavItem.args = {
   ...defaultProps,
   item: {
     to: '/parent-page',
     text: 'Parent page',
   },
   default: `<strong>{{ item.to }} &rarr;</strong>`,
 }
-ScopedSlotSidenavItem.storyName = 'Scoped Slot'
+ScopedDefaultSlotSidenavItem.storyName = 'Scoped Default Slot'
+
+export const ScopedSublistSlotSidenavItem = DefaultTemplate.bind({})
+ScopedSublistSlotSidenavItem.args = {
+  ...defaultProps,
+  item: {
+    to: '/parent-page',
+    text: 'Parent page',
+    children: [
+      {
+        to: '/parent-page/sublist',
+        text: 'Sublist',
+      },
+    ],
+  },
+  sublist: `<li>{{ sublist[0].text }} &rarr;</li>`,
+}
+ScopedSublistSlotSidenavItem.storyName = 'Scoped Sublist Slot'
diff --git a/src/components/UsaSidenavItem/UsaSidenavItem.test.js b/src/components/UsaSidenavItem/UsaSidenavItem.test.js
@@ -9,8 +9,16 @@ const testItem = {
     {
       href: '/page-1-1',
       text: 'Page 1.1',
+      attrs: {
+        href: '/test-page',
+      },
     },
   ],
+  attrs: {
+    class: ['test-attrs-class'],
+    id: 'test-id',
+    href: '/test-page',
+  },
 }
 
 describe('UsaSidenavItem', () => {
@@ -37,9 +45,11 @@ describe('UsaSidenavItem', () => {
 
     cy.get('@item')
       .find('> a')
-      .should('have.class', 'test-link-class')
-      .and('have.attr', 'to')
-      .and('contain', '/page-1')
+      .should('have.id', 'test-id')
+      .and('have.class', 'test-link-class')
+      .and('have.class', 'test-attrs-class')
+      .and('have.attr', 'to', '/page-1')
+      .and('not.have.attr', 'href')
 
     cy.get('@item').find('> a').should('contain', 'Page 1')
 
@@ -58,20 +68,23 @@ describe('UsaSidenavItem', () => {
     cy.get('@sublist').find('a').should('contain', 'Page 1.1')
   })
 
-  it('`item` prop is available in scoped slot', () => {
+  it('`item` and `children` props are available in scoped slots', () => {
     cy.mount(UsaSidenavItem, {
       props: {
         item: testItem,
       },
       slots: {
-        default: props => h('span', {}, `path is: ${props.item.to}`),
+        default: ({ item }) => h('span', {}, `path is: ${item.to}`),
+        sublist: ({ sublist }) => h('li', {}, `path is: ${sublist[0].href}`),
       },
     })
 
     cy.get('[data-v-app] > .usa-sidenav__item > a span').should(
       'contain',
       'path is: /page-1'
     )
+
+    cy.get('.usa-sidenav__sublist li').should('contain', 'path is: /page-1-1')
   })
 
   it('warns in console about required `item` prop', () => {

diff --git a/src/components/UsaSidenavItem/UsaSidenavItem.vue b/src/components/UsaSidenavItem/UsaSidenavItem.vue
@@ -32,17 +32,19 @@ const props = defineProps({
       ><slot :item="item">{{ item?.text }}</slot></BaseLink
     >
     <ul
-      v-if="item?.children?.length"
+      v-if="item?.children?.length || $slots.sublist"
       class="usa-sidenav__sublist"
       :class="customClasses?.sublist"
     >
-      <UsaSidenavItem
-        v-for="subItem in item.children"
-        :key="subItem?.id || subItem.text"
-        :item="subItem"
-        :custom-classes="customClasses"
-        >{{ subItem.text }}</UsaSidenavItem
-      >
+      <slot name="sublist" :sublist="item.children">
+        <UsaSidenavItem
+          v-for="subItem in item.children"
+          :key="subItem?.id || subItem.text"
+          :item="subItem"
+          :custom-classes="customClasses"
+          >{{ subItem.text }}</UsaSidenavItem
+        >
+      </slot>
     </ul>
   </li>
 </template>