feat(list): add fds-list component

parasutcom · Aug 5, 2024 · 36cba30 · 36cba30
1 parent 3aee87e
commit 36cba30
Show file tree

Hide file tree

Showing 5 changed files with 245 additions and 0 deletions.
diff --git a/src/components/list/fds-list-item.ts b/src/components/list/fds-list-item.ts
@@ -0,0 +1,15 @@
+import { html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import style from './fds-list.scss';
+
+@customElement('fds-list-item')
+export class FdsListItem extends LitElement {
+  static get styles() {
+    return [unsafeCSS(style)];
+  }
+
+  render(): TemplateResult {
+    return html` <li><slot></slot></li> `;
+  }
+}
diff --git a/src/components/list/fds-list.scss b/src/components/list/fds-list.scss
@@ -0,0 +1,49 @@
+@import '../../styles/settings/prefix';
+@import '../../styles/tools/typography';
+
+:host {
+  display: block;
+  margin-inline-start: $spacing-medium;
+}
+
+.#{$prefix}-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+:host([type="bulleted"]) .#{$prefix}-list {
+  list-style-type: disc;
+}
+
+:host([type="dashed"]) ::slotted(#{$prefix}-list-item) {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: '\002013';
+    inset-inline-start: calc(-1 * $spacing-medium);
+  }
+}
+
+:host([type="numbered"]) .#{$prefix}-list {
+  list-style-type: decimal;
+}
+
+:host([type="lettered"]) .#{$prefix}-list {
+  list-style-type: lower-alpha;
+}
+
+:host ::slotted(#{$prefix}-list-item) {
+  @include type-style('body-short-01');
+
+  position: relative;
+}
+
+:host ::slotted(#{$prefix}-list-item:not(:last-child)) {
+  margin-bottom: $spacing-2x-small;
+}
+
+:host([nested]) {
+  margin-block-start: $spacing-2x-small;
+}
diff --git a/src/components/list/fds-list.stories.ts b/src/components/list/fds-list.stories.ts
@@ -0,0 +1,153 @@
+import { html } from 'lit';
+
+import './fds-list';
+import './fds-list-item';
+
+export default {
+  title: 'Components/List',
+  component: 'fds-list',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'List (list-group) is a set of related text labels, each of which starts with a bullet point, number, hyphen, or character.',
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      options: ['bulleted', 'dashed', 'numbered', 'lettered'],
+      control: {
+        type: 'select',
+      },
+    },
+    nested: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    type: 'bulleted',
+  },
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const Base = (args: any) => html`
+  <fds-list type=${args.type} ?nested=${args.nested}>
+    <fds-list-item>List item</fds-list-item>
+    <fds-list-item>List item</fds-list-item>
+    <fds-list-item>List item</fds-list-item>
+    <fds-list-item>List item</fds-list-item>
+  </fds-list>
+`;
+
+export const Bulleted = {
+  render: () => html`
+    <fds-list type="bulleted">
+      <fds-list-item>Bulleted list item</fds-list-item>
+      <fds-list-item>Bulleted list item</fds-list-item>
+      <fds-list-item>Bulleted list item</fds-list-item>
+      <fds-list-item>Bulleted list item</fds-list-item>
+    </fds-list>
+  `,
+};
+
+export const Dashed = {
+  render: () => html`
+    <fds-list type="dashed">
+      <fds-list-item>Dashed list item</fds-list-item>
+      <fds-list-item>Dashed list item</fds-list-item>
+      <fds-list-item>Dashed list item</fds-list-item>
+      <fds-list-item>Dashed list item</fds-list-item>
+    </fds-list>
+  `,
+};
+
+export const Numbered = {
+  render: () => html`
+    <fds-list type="numbered">
+      <fds-list-item>Numbered list item</fds-list-item>
+      <fds-list-item>Numbered list item</fds-list-item>
+      <fds-list-item>Numbered list item</fds-list-item>
+      <fds-list-item>Numbered list item</fds-list-item>
+    </fds-list>
+  `,
+};
+
+export const Lettered = {
+  render: () => html`
+    <fds-list type="lettered">
+      <fds-list-item>Lettered list item</fds-list-item>
+      <fds-list-item>Lettered list item</fds-list-item>
+      <fds-list-item>Lettered list item</fds-list-item>
+      <fds-list-item>Lettered list item</fds-list-item>
+    </fds-list>
+  `,
+};
+
+export const Nested = {
+  render: () => html`
+    <div style="display: flex; align-items: center; gap: 1rem">
+      <fds-list type="bulleted">
+        <fds-list-item>Bulleted list item</fds-list-item>
+        <fds-list-item>Bulleted list item</fds-list-item>
+        <fds-list-item
+          >Bulleted list item
+          <fds-list type="dashed" nested>
+            <fds-list-item>Dashed list item</fds-list-item>
+            <fds-list-item>Dashed list item</fds-list-item>
+            <fds-list-item>Dashed list item</fds-list-item>
+            <fds-list-item>Dashed list item</fds-list-item>
+          </fds-list>
+        </fds-list-item>
+        <fds-list-item>Bulleted list item</fds-list-item>
+      </fds-list>
+
+      <fds-list type="dashed">
+        <fds-list-item>Dashed list item</fds-list-item>
+        <fds-list-item>Dashed list item</fds-list-item>
+        <fds-list-item
+          >Dashed list item
+          <fds-list type="bulleted" nested>
+            <fds-list-item>Bulleted list item</fds-list-item>
+            <fds-list-item>Bulleted list item</fds-list-item>
+            <fds-list-item>Bulleted list item</fds-list-item>
+            <fds-list-item>Bulleted list item</fds-list-item>
+          </fds-list>
+        </fds-list-item>
+        <fds-list-item>Dashed list item</fds-list-item>
+      </fds-list>
+
+      <fds-list type="numbered">
+        <fds-list-item>Numbered list item</fds-list-item>
+        <fds-list-item>Numbered list item</fds-list-item>
+        <fds-list-item
+          >Numbered list item
+          <fds-list type="lettered" nested>
+            <fds-list-item>Lettered list item</fds-list-item>
+            <fds-list-item>Lettered list item</fds-list-item>
+            <fds-list-item>Lettered list item</fds-list-item>
+            <fds-list-item>Lettered list item</fds-list-item>
+          </fds-list>
+        </fds-list-item>
+        <fds-list-item>Numbered list item</fds-list-item>
+      </fds-list>
+
+      <fds-list type="lettered">
+        <fds-list-item>Lettered list item</fds-list-item>
+        <fds-list-item>Lettered list item</fds-list-item>
+        <fds-list-item
+          >Lettered list item
+          <fds-list type="numbered" nested>
+            <fds-list-item>Numbered list item</fds-list-item>
+            <fds-list-item>Numbered list item</fds-list-item>
+            <fds-list-item>Numbered list item</fds-list-item>
+            <fds-list-item>Numbered list item</fds-list-item>
+          </fds-list>
+        </fds-list-item>
+        <fds-list-item>Lettered list item</fds-list-item>
+      </fds-list>
+    </div>
+  `,
+};
diff --git a/src/components/list/fds-list.ts b/src/components/list/fds-list.ts
@@ -0,0 +1,26 @@
+import { html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import style from './fds-list.scss';
+
+export type ListType = 'bulleted' | 'dashed' | 'numbered' | 'lettered';
+
+@customElement('fds-list')
+export class FdsList extends LitElement {
+  static get styles() {
+    return [unsafeCSS(style)];
+  }
+
+  @property({ type: String, reflect: true })
+  type: ListType = 'bulleted';
+
+  render(): TemplateResult {
+    return this.type === 'bulleted' || this.type === 'dashed'
+      ? html`<ul class="fds-list">
+          <slot></slot>
+        </ul>`
+      : html`<ol class="fds-list">
+          <slot></slot>
+        </ol>`;
+  }
+}
diff --git a/src/index.ts b/src/index.ts
@@ -2,6 +2,8 @@ export { FdsAggregate } from './components/aggregate/fds-aggregate';
 export { FdsBadge } from './components/badge/fds-badge';
 export { FdsButton } from './components/button/fds-button';
 export { FdsIcon } from './components/icon/fds-icon';
+export { FdsList } from './components/list/fds-list';
+export { FdsListItem } from './components/list/fds-list-item';
 export { FdsProgressBar } from './components/progress-bar/fds-progress-bar';
 export { FdsSpinner } from './components/spinner/fds-spinner';
 export { FdsToggleSwitch } from './components/toggle-switch/fds-toggle-switch';