RecursiveList (#717)

* feat(recursive-list): add RecursiveList

* feat(recursive-list): rename items prop to children

* docs(recursive-list): add full examples

* test(recursive-list): add types test

* refactor(recursive-list): remove superfluous nested prop

* docs(recursive-list): update docs

* fix(recursive-list): remove nested prop from type test

* fix(recursive-list): explicitly type restProps

src/RecursiveList/RecursiveList.svelte

@@ -0,0 +1,38 @@
+<script>
+  /**
+   * @typedef {{ text?: string; href?: string; html?: string; }} RecursiveListNode
+   * @restProps {ul | ol}
+   */
+
+  /**
+   * Specify the children to render
+   * @type {Array<RecursiveListNode & { children?: RecursiveListNode[]; }>}
+   */
+  export let children = [];
+
+  /**
+   * Specify the type of list to render
+   * @type {"unordered" | "ordered" | "ordered-native"}
+   */
+  export let type = "unordered";
+
+  import UnorderedList from "../UnorderedList/UnorderedList.svelte";
+  import OrderedList from "../OrderedList/OrderedList.svelte";
+  import RecursiveListItem from "./RecursiveListItem.svelte";
+</script>
+
+<svelte:component
+  this="{type === 'unordered' ? UnorderedList : OrderedList}"
+  native="{type === 'ordered-native'}"
+  {...$$restProps}
+>
+  {#each children as child}
+    {#if Array.isArray(child.children)}
+      <RecursiveListItem {...child}>
+        <svelte:self {...child} type="{type}" nested />
+      </RecursiveListItem>
+    {:else}
+      <RecursiveListItem {...child} />
+    {/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";