feat(recursive-list): add RecursiveList

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 168 components exported from carbon-components-svelte@0.38.1.
+> 169 components exported from carbon-components-svelte@0.38.1.
 
 ## Components
 
@@ -107,6 +107,7 @@
 - [`RadioButtonGroup`](#radiobuttongroup)
 - [`RadioButtonSkeleton`](#radiobuttonskeleton)
 - [`RadioTile`](#radiotile)
+- [`RecursiveList`](#recursivelist)
 - [`Row`](#row)
 - [`Search`](#search)
 - [`SearchSkeleton`](#searchskeleton)
@@ -3030,6 +3031,34 @@ None.
 | mouseenter | forwarded | --     |
 | mouseleave | forwarded | --     |
 
+## `RecursiveList`
+
+### Types
+
+```ts
+export interface Item {
+  text?: string;
+  href?: string;
+  html?: string;
+}
+```
+
+### Props
+
+| Prop name | Kind             | Reactive | Type                                                              | Default value            | Description                             |
+| :-------- | :--------------- | :------- | :---------------------------------------------------------------- | ------------------------ | --------------------------------------- |
+| items     | <code>let</code> | No       | <code>Array<Item & { items?: Item[]; }></code>                    | <code>[]</code>          | Specify the items to render             |
+| type      | <code>let</code> | No       | <code>"unordered" &#124; "ordered" &#124; "ordered-native"</code> | <code>"unordered"</code> | Specify the type of list to render      |
+| nested    | <code>let</code> | No       | <code>boolean</code>                                              | <code>false</code>       | Set to `true` to use the nested variant |
+
+### Slots
+
+None.
+
+### Events
+
+None.
+
 ## `Row`
 
 ### Props

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 168,
+  "total": 169,
   "components": [
     {
       "moduleName": "Accordion",
@@ -7864,6 +7864,52 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "label" }
     },
+    {
+      "moduleName": "RecursiveList",
+      "filePath": "src/RecursiveList/RecursiveList.svelte",
+      "props": [
+        {
+          "name": "items",
+          "kind": "let",
+          "description": "Specify the items to render",
+          "type": "Array<Item & { items?: Item[]; }>",
+          "value": "[]",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "type",
+          "kind": "let",
+          "description": "Specify the type of list to render",
+          "type": "\"unordered\" | \"ordered\" | \"ordered-native\"",
+          "value": "\"unordered\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "nested",
+          "kind": "let",
+          "description": "Set to `true` to use the nested variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [],
+      "events": [],
+      "typedefs": [
+        {
+          "type": "{ text?: string; href?: string; html?: string; }",
+          "name": "Item",
+          "ts": "interface Item { text?: string; href?: string; html?: string; }"
+        }
+      ],
+      "rest_props": { "type": "InlineComponent", "name": "svelte:component" }
+    },
     {
       "moduleName": "Row",
       "filePath": "src/Grid/Row.svelte",

docs/src/pages/_layout.svelte

@@ -20,7 +20,7 @@
   import Footer from "../components/Footer.svelte";
 
   const deprecated = ["ToggleSmall", "Icon"];
-  const new_components = ["ProgressBar"];
+  const new_components = ["ProgressBar", "RecursiveList"];
 
   let isOpen = false;
   let isSideNavOpen = true;

docs/src/pages/components/RecursiveList.svx

@@ -0,0 +1,78 @@
+<script>
+  import { RecursiveList } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Unordered
+
+<RecursiveList
+  items={[
+      {
+      text: "Item 1",
+      items: [
+        {
+          text: "Link",
+          href: "/",
+          items: [
+            {
+              html: "<h5>Hello world</h5>",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      text: "Item 1",
+    }
+  ]}
+  />
+
+### Ordered
+
+<RecursiveList
+type="ordered"
+items={[
+    {
+    text: "Item 1",
+    items: [
+        {
+        text: "Link",
+        href: "/",
+        items: [
+            {
+            html: "<h5>Hello world</h5>",
+            },
+        ],
+        },
+    ],
+    },
+    {
+    text: "Item 1",
+    }
+]}
+/>
+
+### Ordered (native styles)
+
+<RecursiveList
+type="ordered-native"
+items={[
+    {
+    text: "Item 1",
+    items: [
+        {
+        text: "Link",
+        href: "/",
+        items: [
+            {
+            html: "<h5>Hello world</h5>",
+            },
+        ],
+        },
+    ],
+    },
+    {
+    text: "Item 1",
+    }
+]}
+/>

src/RecursiveList/RecursiveList.svelte

@@ -0,0 +1,42 @@
+<script>
+  /**
+   * @typedef {{ text?: string; href?: string; html?: string; }} Item
+   * @type {Array<Item & { items?: Item[]; }>}
+   */
+
+  /**
+   * Specify the items to render
+   * @type {Array<Item & { items?: Item[]; }>}
+   */
+  export let items = [];
+
+  /**
+   * Specify the type of list to render
+   * @type {"unordered" | "ordered" | "ordered-native"}
+   */
+  export let type = "unordered";
+
+  /** Set to `true` to use the nested variant */
+  export let nested = false;
+
+  import UnorderedList from "../UnorderedList/UnorderedList.svelte";
+  import OrderedList from "../OrderedList/OrderedList.svelte";
+  import ListItem from "./RecursiveListItem.svelte";
+</script>
+
+<svelte:component
+  this="{type === 'unordered' ? UnorderedList : OrderedList}"
+  native="{type === 'ordered-native'}"
+  nested="{nested}"
+  {...$$restProps}
+>
+  {#each items as item}
+    {#if Array.isArray(item.items)}
+      <ListItem {...item}>
+        <svelte:self {...item} type="{type}" nested />
+      </ListItem>
+    {:else}
+      <ListItem {...item} />
+    {/if}
+  {/each}
+</svelte:component>

src/RecursiveList/RecursiveListItem.svelte

@@ -0,0 +1,19 @@
+<script>
+  /** Specify the text to render*/
+  export let text = "";
+
+  /** Specify a link href */
+  export let href = "";
+
+  /** Specify HTML to render using `@html` */
+  export let html = "";
+
+  import ListItem from "../ListItem/ListItem.svelte";
+</script>
+
+<ListItem>
+  {#if text && !href}{text}{/if}
+  {#if href}<a class:bx--link="{true}" href="{href}">{text || href}</a>{/if}
+  {#if !text && html}{@html html}{/if}
+  <slot />
+</ListItem>

src/RecursiveList/index.js

@@ -0,0 +1 @@
+export { default as RecursiveList } from "./RecursiveList.svelte";

src/index.js

@@ -93,6 +93,7 @@ export {
 } from "./ProgressIndicator";
 export { RadioButton, RadioButtonSkeleton } from "./RadioButton";
 export { RadioButtonGroup } from "./RadioButtonGroup";
+export { RecursiveList } from "./RecursiveList";
 export { Search, SearchSkeleton } from "./Search";
 export { Select, SelectSkeleton, SelectItem, SelectItemGroup } from "./Select";
 export { SkeletonPlaceholder } from "./SkeletonPlaceholder";

types/RecursiveList/RecursiveList.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface Item {
+  text?: string;
+  href?: string;
+  html?: string;
+}
+
+export interface RecursiveListProps {
+  /**
+   * Specify the items to render
+   * @default []
+   */
+  items?: Array<Item & { items?: Item[] }>;
+
+  /**
+   * Specify the type of list to render
+   * @default "unordered"
+   */
+  type?: "unordered" | "ordered" | "ordered-native";
+
+  /**
+   * Set to `true` to use the nested variant
+   * @default false
+   */
+  nested?: boolean;
+}
+
+export default class RecursiveList extends SvelteComponentTyped<
+  RecursiveListProps,
+  {},
+  {}
+> {}

types/index.d.ts

@@ -99,6 +99,7 @@ export { default as ProgressStep } from "./ProgressIndicator/ProgressStep";
 export { default as RadioButton } from "./RadioButton/RadioButton";
 export { default as RadioButtonSkeleton } from "./RadioButton/RadioButtonSkeleton";
 export { default as RadioButtonGroup } from "./RadioButtonGroup/RadioButtonGroup";
+export { default as RecursiveList } from "./RecursiveList/RecursiveList";
 export { default as Search } from "./Search/Search";
 export { default as SearchSkeleton } from "./Search/SearchSkeleton";
 export { default as Select } from "./Select/Select";