@pnx-mixtape/mxds 0.0.1

package/src/Component/InPageNavigation/Elements/InPageNavigation.ts

@@ -0,0 +1,125 @@
+/**
+ * DialogBase
+ * @file Support opening/closing, and adding a scroll lock to the body.
+ */
+
+import { makeAnchor, createElement } from "../../../Utility/utilities"
+
+export default class InPageNavigation extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+  headingLevels: string
+  items: { link: HTMLAnchorElement; heading: HTMLHeadingElement }[]
+  active: { link: HTMLAnchorElement; heading: HTMLHeadingElement } | undefined
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+    this.headingLevels = this.dataset?.headings || "h2"
+    this.items = []
+  }
+
+  connectedCallback(): void {
+    if (!this.menu || !this.headings) return
+
+    this.headings.forEach((heading: HTMLHeadingElement) => {
+      const listItem: HTMLLIElement = this.generateListItem(heading)
+      const link: HTMLAnchorElement = this.generateAnchor(heading)
+      this.items.push({ link, heading })
+      listItem.appendChild(link)
+      this.menu?.appendChild(listItem)
+    })
+
+    const { signal }: AbortController = this.controller
+
+    // Open on toggle click.
+    this.menu.addEventListener(
+      "click",
+      (e: MouseEvent): void => {
+        const { target } = e
+        if (!(target instanceof HTMLAnchorElement)) return
+        this.handleClick(target)
+      },
+      {
+        signal,
+      },
+    )
+  }
+
+  disconnectedCallback(): void {
+    if (!this.menu || !this.headings) return
+    this.menu.textContent = ""
+    this.items = []
+    this.controller.abort()
+  }
+
+  handleClick = (target: EventTarget | null): void => {
+    this.active = this.items.find(item => item.link === target)
+    if (!this.links || !this.active) return
+    this.links.forEach(link => link.classList.remove("is-active"))
+    this.active.link.classList.add("is-active")
+  }
+
+  get menu(): HTMLUListElement | HTMLOListElement | null {
+    const menu: HTMLUListElement | HTMLOListElement | null =
+      this.querySelector("ul, ol")
+    if (!menu) {
+      throw new Error(`${this.localName} must contain a <ul> or <ol> element.`)
+    }
+    return menu
+  }
+
+  get container(): HTMLElement | null {
+    const selector: string | null = this.getAttribute("data-content")
+    if (!selector) {
+      throw new Error(
+        `${this.localName} must have a [data-content] attribute that contains the content selector.`,
+      )
+    }
+    return this.closest(selector) || this.parentElement.querySelector(selector)
+  }
+
+  get headings(): NodeListOf<HTMLHeadingElement> | undefined {
+    return this.container?.querySelectorAll(this.headingLevels)
+  }
+
+  get links(): NodeListOf<HTMLAnchorElement> | undefined {
+    return this.menu?.querySelectorAll("a")
+  }
+
+  generatedId(heading: HTMLHeadingElement): string {
+    const string: string | undefined = heading?.textContent?.trim()
+    return !string ? "" : makeAnchor(string)
+  }
+
+  generateAnchor(heading: HTMLHeadingElement): HTMLAnchorElement {
+    const { textContent, id } = heading
+    const linkText: string | null =
+      heading.getAttribute("data-in-page-navigation-title") || textContent
+    const targetID: string = id || this.generatedId(heading)
+    if (!id) heading.id = targetID
+    const item: Element = createElement(
+      `<a href="#${targetID}" class="icon icon--chevron-right">${linkText}</a>`,
+    )
+
+    return item as HTMLAnchorElement
+  }
+
+  generateListItem(heading: HTMLHeadingElement): HTMLLIElement {
+    const { tagName } = heading
+    const item: Element = createElement(
+      `<li class="in-page-navigation__level--${tagName.toLowerCase()}"></li>`,
+    )
+
+    return item as HTMLLIElement
+  }
+}
+
+customElements.define("mx-in-page-navigation", InPageNavigation)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-in-page-navigation": InPageNavigation
+  }
+}

package/src/Component/InPageNavigation/Hooks/useInPageNavigation.ts

@@ -0,0 +1,45 @@
+import { RefObject, useState, useEffect } from "react"
+import { makeAnchor } from "../../../Utility/utilities"
+
+type HeadingType = {
+  text: string
+  id: string
+  level: string
+}
+
+type UseInPageNavigationProps = {
+  ref?: RefObject<HTMLElement>
+  levels?: string
+}
+
+const useInPageNavigation = ({
+  ref = null,
+  levels = "h2, h3",
+}: UseInPageNavigationProps): { headings: HeadingType[] } => {
+  const [headings, setHeadings] = useState<HeadingType[]>([])
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+    const context = ref?.current || document.querySelector("section")
+    const headingElements: Element[] = [...context.querySelectorAll(levels)]
+
+    const values: HeadingType[] = headingElements.map(
+      ({ textContent: text, id, localName }: Element) =>
+        ({
+          id: id || makeAnchor(text),
+          text: text,
+          level: localName,
+        }) as HeadingType,
+    )
+    setHeadings([...new Set(values)])
+    headingElements.forEach(
+      (heading: HTMLHeadingElement, index: number): void => {
+        if (!heading.id) heading.id = values[index].id
+      },
+    )
+  }, [ref, levels])
+
+  return { headings }
+}
+
+export default useInPageNavigation

package/src/Component/InPageNavigation/InPageNavigation.stories.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./in-page-navigation.twig"
+import "./in-page-navigation.css"
+import "./Elements/InPageNavigation"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const InPageNavigation: Story = {
+  args: {},
+}

package/src/Component/InPageNavigation/InPageNavigation.stories.tsx

@@ -0,0 +1,86 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Heading from "../../Atom/Heading/Heading"
+import Text from "../../Atom/Text/Text"
+import Component from "./InPageNavigation"
+import Sidebar from "../../Layout/Sidebar/Sidebar"
+import "./in-page-navigation.css"
+import { HeadingLevels } from "../../enums"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  render: () => (
+    <Sidebar before sidebar={<Component />}>
+      <div className="vertical-flow">
+        <Heading level={HeadingLevels.TWO}>Section 1</Heading>
+        <Text>
+          In publishing and graphic design, lorem ipsum is a placeholder text
+          commonly used to demonstrate the visual form of a document without
+          relying on meaningful content. Replacing the actual content with
+          placeholder text allows designers to design the form of the content
+          before the content itself has been produced.
+        </Text>
+        <Heading level={HeadingLevels.TWO} id="anchor-test">
+          Section 2
+        </Heading>
+        <Text>
+          In publishing and graphic design, lorem ipsum is a placeholder text
+          commonly used to demonstrate the visual form of a document without
+          relying on meaningful content. Replacing the actual content with
+          placeholder text allows designers to design the form of the content
+          before the content itself has been produced.
+        </Text>
+        <Heading level={HeadingLevels.THREE}>Test level 3</Heading>
+        <Text>
+          In publishing and graphic design, lorem ipsum is a placeholder text
+          commonly used to demonstrate the visual form of a document without
+          relying on meaningful content. Replacing the actual content with
+          placeholder text allows designers to design the form of the content
+          before the content itself has been produced.
+        </Text>
+        <Heading level={HeadingLevels.TWO}>Section 3</Heading>
+        <Text>
+          In publishing and graphic design, lorem ipsum is a placeholder text
+          commonly used to demonstrate the visual form of a document without
+          relying on meaningful content. Replacing the actual content with
+          placeholder text allows designers to design the form of the content
+          before the content itself has been produced.
+        </Text>
+        <Heading level={HeadingLevels.TWO}>Section 4</Heading>
+        <Text>
+          In publishing and graphic design, lorem ipsum is a placeholder text
+          commonly used to demonstrate the visual form of a document without
+          relying on meaningful content. Replacing the actual content with
+          placeholder text allows designers to design the form of the content
+          before the content itself has been produced.
+        </Text>
+        <Heading level={HeadingLevels.TWO}>Section 5</Heading>
+        <Text>
+          In publishing and graphic design, lorem ipsum is a placeholder text
+          commonly used to demonstrate the visual form of a document without
+          relying on meaningful content. Replacing the actual content with
+          placeholder text allows designers to design the form of the content
+          before the content itself has been produced.
+        </Text>
+        <Heading level={HeadingLevels.THREE}>Test level 6</Heading>
+        <Text>
+          In publishing and graphic design, lorem ipsum is a placeholder text
+          commonly used to demonstrate the visual form of a document without
+          relying on meaningful content. Replacing the actual content with
+          placeholder text allows designers to design the form of the content
+          before the content itself has been produced.
+        </Text>
+        <Heading level={HeadingLevels.TWO}>Section 7</Heading>
+        <Text>
+          In publishing and graphic design, lorem ipsum is a placeholder text
+          commonly used to demonstrate the visual form of a document without
+          relying on meaningful content. Replacing the actual content with
+          placeholder text allows designers to design the form of the content
+          before the content itself has been produced.
+        </Text>
+      </div>
+    </Sidebar>
+  ),
+}
+export default meta
+export const InPageNavigation: StoryObj<typeof Component> = {}

package/src/Component/InPageNavigation/InPageNavigation.tsx

@@ -0,0 +1,38 @@
+import { JSX, RefObject } from "react"
+import Link from "../../Atom/Link/Link"
+import Heading from "../../Atom/Heading/Heading"
+import useInPageNavigation from "./Hooks/useInPageNavigation"
+import { HeadingStyles } from "../../enums"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+
+type InPageNavigationProps = {
+  title?: string
+  containerRef?: RefObject<HTMLElement>
+  levels?: string
+}
+
+const InPageNavigation = ({
+  title = "Jump to content",
+  containerRef,
+  levels,
+}: InPageNavigationProps): JSX.Element => {
+  const { headings } = useInPageNavigation({ ref: containerRef, levels })
+  return (
+    <nav className={"in-page-navigation nav nav--list"}>
+      <Heading as={HeadingTypes.TWO} modifier={HeadingStyles.EMBELLISHED}>
+        {title}
+      </Heading>
+      <ul>
+        {headings.map(({ level, id, text }) => (
+          <li className={`in-page-navigation__level--${level}`} key={id}>
+            <Link to={`#${id}`} className="icon icon--chevron-right">
+              {text}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+export default InPageNavigation

package/src/Component/InPageNavigation/README.md

@@ -0,0 +1,30 @@
+# In Page Navigation
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/in-page-navigation.css';`
+
+**Web Components**
+
+Web Components are self defined, simply import the desired feature. These do not use the Shadow DOM. External CSS applies.
+
+- InPageNavigationBase import: `import '@pnx-mixtape/mxds/Components/InPageNavigation/Element';` and be sure to include `<mx-in-page-navigation>` around the `<nav />` tag.
+- Use the `[data-content]` attribute to specify where to look for headings (required).
+- Use the `[data-headings]` attribute to customise the heading levels. Default is h2.
+
+```html
+<mx-in-page-navigation data-content=".page__sections" data-headings="h2, h3">
+  <nav class="in-page-navigation nav nav--jump">
+    <h4>Jump to Section</h4>
+    <ul></ul>
+  </nav>
+</mx-in-page-navigation>
+
+<div class="page__sections">
+  <h2 id="section">Section title</h2>
+</div>
+```
+
+See twig files for all HTML examples.

package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navigation/InPageNavigation InPageNavigation smoke-test 1`] = `
+<section class="section section--l">
+  <div class="page">
+    <div class="grid--sidebar">
+      <aside>
+        <mx-in-page-navigation data-content=".js-content"
+                               data-headings="h2, h3"
+        >
+          <nav class="in-page-navigation nav nav--list">
+            <h4 class="text--embellished-headline">
+              Jump To Section
+            </h4>
+            <ul>
+            </ul>
+          </nav>
+        </mx-in-page-navigation>
+      </aside>
+      <section class="js-content rich-text vertical-flow">
+        <h2>
+          Section 1
+        </h2>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h2 id="anchor-test">
+          Section 2
+        </h2>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h3>
+          Test level 3
+        </h3>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h2>
+          Section 3
+        </h2>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h2>
+          Section 4
+        </h2>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h2>
+          Section 5
+        </h2>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h3>
+          Test level 6
+        </h3>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h2>
+          Section 7
+        </h2>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+      </section>
+    </div>
+  </div>
+</section>
+`;

package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap

@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navigation/InPageNavigation InPageNavigation smoke-test 1`] = `
+<div class="grid--sidebar">
+  <aside>
+    <nav class="in-page-navigation nav nav--list">
+      <h2 class="text--embellished-headline"
+          id="jump-to-content"
+      >
+        Jump to content
+      </h2>
+      <ul>
+        <li class="in-page-navigation__level--h2">
+          <a href="#section-1"
+             class="icon icon--chevron-right"
+          >
+            Section 1
+          </a>
+        </li>
+        <li class="in-page-navigation__level--h2">
+          <a href="#anchor-test"
+             class="icon icon--chevron-right"
+          >
+            Section 2
+          </a>
+        </li>
+        <li class="in-page-navigation__level--h2">
+          <a href="#test-level-3"
+             class="icon icon--chevron-right"
+          >
+            Test level 3
+          </a>
+        </li>
+        <li class="in-page-navigation__level--h2">
+          <a href="#section-3"
+             class="icon icon--chevron-right"
+          >
+            Section 3
+          </a>
+        </li>
+        <li class="in-page-navigation__level--h2">
+          <a href="#section-4"
+             class="icon icon--chevron-right"
+          >
+            Section 4
+          </a>
+        </li>
+        <li class="in-page-navigation__level--h2">
+          <a href="#section-5"
+             class="icon icon--chevron-right"
+          >
+            Section 5
+          </a>
+        </li>
+        <li class="in-page-navigation__level--h2">
+          <a href="#test-level-6"
+             class="icon icon--chevron-right"
+          >
+            Test level 6
+          </a>
+        </li>
+        <li class="in-page-navigation__level--h2">
+          <a href="#section-7"
+             class="icon icon--chevron-right"
+          >
+            Section 7
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </aside>
+  <section>
+    <div class="vertical-flow">
+      <h2 class
+          level="h2"
+          id="section-1"
+      >
+        Section 1
+      </h2>
+      <p class>
+        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+      </p>
+      <h2 class
+          id="anchor-test"
+          level="h2"
+      >
+        Section 2
+      </h2>
+      <p class>
+        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+      </p>
+      <h2 class
+          level="h3"
+          id="test-level-3"
+      >
+        Test level 3
+      </h2>
+      <p class>
+        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+      </p>
+      <h2 class
+          level="h2"
+          id="section-3"
+      >
+        Section 3
+      </h2>
+      <p class>
+        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+      </p>
+      <h2 class
+          level="h2"
+          id="section-4"
+      >
+        Section 4
+      </h2>
+      <p class>
+        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+      </p>
+      <h2 class
+          level="h2"
+          id="section-5"
+      >
+        Section 5
+      </h2>
+      <p class>
+        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+      </p>
+      <h2 class
+          level="h3"
+          id="test-level-6"
+      >
+        Test level 6
+      </h2>
+      <p class>
+        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+      </p>
+      <h2 class
+          level="h2"
+          id="section-7"
+      >
+        Section 7
+      </h2>
+      <p class>
+        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+      </p>
+    </div>
+  </section>
+</div>
+`;

package/src/Component/InPageNavigation/in-page-navigation.css

@@ -0,0 +1,17 @@
+/**
+ * InPageNavigation
+ */
+
+@layer defaults {
+  mx-in-page-navigation {
+    display: block;
+  }
+}
+
+@layer components {
+  .in-page-navigation {
+    & .in-page-navigation__level--h3 {
+      padding-inline-start: var(--spacing-s);
+    }
+  }
+}

package/src/Component/InPageNavigation/in-page-navigation.twig

@@ -0,0 +1,17 @@
+{% embed '@mixtape/Layout/Section/section.twig' with {
+  modifier_class: 'section--l'
+} %}
+    {% block content %}
+      {% embed '@mixtape/Layout/Sidebar/sidebar.twig' with {
+        content_class: 'js-content rich-text vertical-flow',
+        reverse_markup: TRUE
+      }%}
+        {% block content %}
+          {% include '@mixtape/Component/InPageNavigation/twig/in-page-navigation-content-example.twig' %}
+        {% endblock %}
+        {% block sidebar %}
+          {% include '@mixtape/Component/InPageNavigation/twig/in-page-navigation-menu-example.twig' %}
+        {% endblock %}
+      {% endembed %}
+    {% endblock %}
+{% endembed %}

package/src/Component/InPageNavigation/twig/in-page-navigation-content-example.twig

@@ -0,0 +1,16 @@
+<h2>Section 1</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="anchor-test">Section 2</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h3>Test level 3</h3>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2>Section 3</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2>Section 4</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2>Section 5</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h3>Test level 6</h3>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2>Section 7</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>

package/src/Component/InPageNavigation/twig/in-page-navigation-menu-example.twig

@@ -0,0 +1,6 @@
+<mx-in-page-navigation data-content=".js-content" data-headings="h2, h3">
+  <nav class="in-page-navigation nav nav--list">
+    <h4 class="text--embellished-headline">{{ title|default('Jump To Section') }}</h4>
+    <ul></ul>
+  </nav>
+</mx-in-page-navigation>

package/src/Component/LinkList/LinkList.stories.ts

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./link-list.twig"
+import "./link-list.css"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    items: [
+      {
+        title: "Music",
+        href: "#",
+      },
+      {
+        title: "Performances",
+        href: "#",
+      },
+      {
+        title: "Get involved",
+        href: "#",
+      },
+    ],
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const LinkList: Story = {}