fix(sidenav): icon and category story bugs

adobe · May 31, 2023 · f8f4fbe · f8f4fbe
1 parent 26b1b32
commit f8f4fbe
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js
@@ -2,7 +2,7 @@
 import { Template } from "./template";
 
 export default {
-  title: "Sidenav",
+  title: "Side navigation",
   description: "SideNav lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation.",
   component: "Sidenav",
   argTypes: {

diff --git a/components/sidenav/stories/template.js b/components/sidenav/stories/template.js
@@ -16,12 +16,13 @@ export const Template = ({
   items = [],
   ...globals
 }) => {
+  const hasIcon = !items.map(item => item.icon).includes(undefined)
   return html`
     <nav>
       <ul class=${classMap({
         [rootClass]: true,
         [`${rootClass}--${variant}`]: typeof variant !== "undefined",
-        [`${rootClass}--hasIcon`]: typeof icon !== "undefined",
+        [`${rootClass}--hasIcon`]: hasIcon,
         ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
       })}>
         ${repeat(items, (item) => item.id, (item) => {
@@ -32,22 +33,23 @@ export const Template = ({
                 "is-selected": item.isSelected,
                 "is-disabled": item.isDisabled,
               })}>
-              ${when(item.category, () =>
+              ${item.category ?
                 html`<h2 class="${rootClass}-heading" id="${item.id}-heading">${item.category}</h2>`
-              )}
-              ${when(item.icon, () =>
+                :
                 html`
                 <a class="${rootClass}-itemLink">
-                  ${Icon({
+                ${when(item.icon, () =>
+                  Icon({
                       ...globals,
                       iconName: item.icon,
                       customClasses: [`${rootClass}-itemIcon`]
                     })
-                  }
+                  )}
                   <span class="${rootClass}-link-label">${item.title}</span>
                 </a>
                 `
-              )}
+              }
+
                 <ul class=${rootClass} aria-labelledby=${ifDefined(item.category) ? `${item.id}-heading` : ""}>
                   ${repeat(item.subitems, (item) => item.id, (item) => {
                     return SideNavItem({