feat(ui-shell): add SideNavDivider

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 156 components exported from carbon-components-svelte@0.28.0.
+> 157 components exported from carbon-components-svelte@0.28.0.
 
 ## Components
 
@@ -107,6 +107,7 @@
 - [`SelectSkeleton`](#selectskeleton)
 - [`SelectableTile`](#selectabletile)
 - [`SideNav`](#sidenav)
+- [`SideNavDivider`](#sidenavdivider)
 - [`SideNavItems`](#sidenavitems)
 - [`SideNavLink`](#sidenavlink)
 - [`SideNavMenu`](#sidenavmenu)
@@ -2988,6 +2989,20 @@ None.
 
 None.
 
+## `SideNavDivider`
+
+### Props
+
+None.
+
+### Slots
+
+None.
+
+### Events
+
+None.
+
 ## `SideNavItems`
 
 ### Props

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 156,
+  "total": 157,
   "components": [
     {
       "moduleName": "Accordion",
@@ -7733,6 +7733,15 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "nav" }
     },
+    {
+      "moduleName": "SideNavDivider",
+      "filePath": "src/UIShell/SideNavDivider.svelte",
+      "props": [],
+      "slots": [],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "li" }
+    },
     {
       "moduleName": "SideNavItems",
       "filePath": "src/UIShell/SideNav/SideNavItems.svelte",

docs/src/pages/framed/UIShell/HeaderNav.svelte

@@ -9,6 +9,7 @@
     SideNavMenu,
     SideNavMenuItem,
     SideNavLink,
+    SideNavDivider,
     SkipToContent,
     Content,
     Grid,
@@ -33,6 +34,7 @@
       <HeaderNavItem href="/" text="Link 2" />
       <HeaderNavItem href="/" text="Link 3" />
     </HeaderNavMenu>
+    <HeaderNavItem href="/" text="Link 4" />
   </HeaderNav>
 </Header>
 
@@ -46,6 +48,8 @@
       <SideNavMenuItem href="/" text="Link 2" />
       <SideNavMenuItem href="/" text="Link 3" />
     </SideNavMenu>
+    <SideNavDivider />
+    <SideNavLink text="Link 4" />
   </SideNavItems>
 </SideNav>
 

src/UIShell/SideNavDivider.svelte

@@ -0,0 +1 @@
+<li role="separator" class:bx--side-nav__divider="{true}" {...$$restProps}></li>

src/UIShell/index.js

@@ -18,3 +18,4 @@ export { default as Content } from "./Content.svelte";
 export { default as SkipToContent } from "./SkipToContent.svelte";
 export { default as HeaderGlobalAction } from "./HeaderGlobalAction.svelte";
 export { default as HeaderSearch } from "./HeaderSearch.svelte";
+export { default as SideNavDivider } from "./SideNavDivider.svelte";

src/index.js

@@ -131,6 +131,7 @@ export {
   SideNavLink,
   SideNavMenu,
   SideNavMenuItem,
+  SideNavDivider,
   Content,
   SkipToContent,
   HeaderGlobalAction,

types/UIShell/SideNavDivider.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface SideNavDividerProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {}
+
+export default class SideNavDivider extends SvelteComponentTyped<
+  SideNavDividerProps,
+  {},
+  {}
+> {}

types/index.d.ts

@@ -149,6 +149,7 @@ export { default as SideNavItems } from "./UIShell/SideNav/SideNavItems";
 export { default as SideNavLink } from "./UIShell/SideNav/SideNavLink";
 export { default as SideNavMenu } from "./UIShell/SideNav/SideNavMenu";
 export { default as SideNavMenuItem } from "./UIShell/SideNav/SideNavMenuItem";
+export { default as SideNavDivider } from "./UIShell/SideNavDivider";
 export { default as Content } from "./UIShell/Content";
 export { default as SkipToContent } from "./UIShell/SkipToContent";
 export { default as HeaderGlobalAction } from "./UIShell/HeaderGlobalAction";