feat: add storybook list

src/plugins/components/heading.ts

@@ -44,7 +44,7 @@ export default plugin.withOptions(
 
       addComponents({
         [`.${prefix}heading`]: {
-          [`@apply font-heading`]: {},
+          [`@apply font-sans`]: {},
 
           [`&.${prefix}heading-xs`]: {
             [`@apply text-${config.textXS}`]: {},

src/plugins/components/list.ts → src/plugins/components/list/index.ts

@@ -1,8 +1,8 @@
 import plugin from 'tailwindcss/plugin'
 import { defu } from 'defu'
-import { type PluginOption, defaultPluginOptions } from '../options'
+import { type PluginOption, defaultPluginOptions } from '../../options'
 
-const defaultlistConfig = {
+export const defaultListConfig = {
   ul: 'disc',
   ol: 'decimal',
   base: {
@@ -27,7 +27,7 @@ export default plugin.withOptions(
     }
 
     return function ({ addComponents, theme }) {
-      const config = theme('shurikenUi.list') satisfies typeof defaultlistConfig
+      const config = theme('shurikenUi.list') satisfies typeof defaultListConfig
 
       addComponents({
         [`.${prefix}list`]: {
@@ -56,7 +56,7 @@ export default plugin.withOptions(
     return {
       theme: {
         shurikenUi: {
-          list: defaultlistConfig,
+          list: defaultListConfig,
         },
       },
     }

src/plugins/components/list/list.component.ts

@@ -0,0 +1,26 @@
+import { html } from 'lit'
+import { spread } from '@open-wc/lit-helpers'
+
+import type { ListAttrs } from './list.types'
+import * as variants from './list.variants'
+
+/**
+ * Primary UI component for user interaction
+ */
+export const List = ({ ordered, hasMedia, children, ...attrs }: ListAttrs) => {
+  return html`
+    <div
+      class=${[
+        'nui-list',
+        ordered && !hasMedia && 'nui-list-base nui-list-ol',
+        !ordered && !hasMedia && 'nui-list-base nui-list-ul',
+        hasMedia && 'nui-list-media',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      ${spread(attrs)}
+    >
+      ${children}
+    </div>
+  `
+}

src/plugins/components/list/list.doc.mdx

@@ -0,0 +1,105 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks'
+import * as ListStories from './list.stories'
+import { defaultListConfig } from '.'
+
+<Meta of={ListStories} />
+
+# List
+
+Lists are an important part of any website or application. The list component lets you build bulleted or ordered list as well as custom list layouts.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+## Variants
+
+<br />
+
+### Unordered list
+
+Lists can be used to display basic list items. Below is an example of an unordered list.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={ListStories.Unordered} />
+</div>
+
+<br />
+
+### Ordered list
+
+Lists can be used to display basic list items. Below is an example of an ordered list.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={ListStories.Ordered} />
+</div>
+
+<br />
+
+### Media list: text
+
+Lists can be used to display more complex list items. Below is an example of a media list featuring a title and a subtitle.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={ListStories.MediaText} />
+</div>
+
+<br />
+
+### Media list: icon
+
+Lists can be used to display more complex list items. Below is an example of a media list featuring an icon.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={ListStories.MediaIcon} />
+</div>
+
+<br />
+
+### Media list: avatar
+
+Lists can be used to display more complex list items. Below is an example of a media list featuring an avatar.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={ListStories.MediaAvatar} />
+</div>
+
+<br />
+<br />
+
+## Customization
+
+### Default config
+
+<div class="relative">
+  <details class="relative bg-slate-50 border border-slate-200 rounded-lg p-4 [&>summary>svg]:open:-rotate-180">
+    <summary class="list-none cursor-pointer">
+      <span class="font-sans text-slate-500">View configuration options</span>
+      <svg
+        class="w-5 h-5 text-slate-500 absolute top-5 end-4 transition-transform duration-300"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m6 9l6 6l6-6"
+        />
+      </svg>
+    </summary>
+
+    <div class="!mt-4">
+      <pre >
+        {JSON.stringify(defaultListConfig, null, 2)}
+      </pre>
+    </div>
+
+  </details>
+</div>