diff --git a/src/components/list/fds-list-item.ts b/src/components/list/fds-list-item.ts new file mode 100644 index 00000000..82f3abbd --- /dev/null +++ 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`
    • `; + } +} diff --git a/src/components/list/fds-list.scss b/src/components/list/fds-list.scss new file mode 100644 index 00000000..efcca9c4 --- /dev/null +++ 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 new file mode 100644 index 00000000..8ff03ee3 --- /dev/null +++ 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` + + List item + List item + List item + List item + +`; + +export const Bulleted = { + render: () => html` + + Bulleted list item + Bulleted list item + Bulleted list item + Bulleted list item + + `, +}; + +export const Dashed = { + render: () => html` + + Dashed list item + Dashed list item + Dashed list item + Dashed list item + + `, +}; + +export const Numbered = { + render: () => html` + + Numbered list item + Numbered list item + Numbered list item + Numbered list item + + `, +}; + +export const Lettered = { + render: () => html` + + Lettered list item + Lettered list item + Lettered list item + Lettered list item + + `, +}; + +export const Nested = { + render: () => html` +
    + + Bulleted list item + Bulleted list item + Bulleted list item + + Dashed list item + Dashed list item + Dashed list item + Dashed list item + + + Bulleted list item + + + + Dashed list item + Dashed list item + Dashed list item + + Bulleted list item + Bulleted list item + Bulleted list item + Bulleted list item + + + Dashed list item + + + + Numbered list item + Numbered list item + Numbered list item + + Lettered list item + Lettered list item + Lettered list item + Lettered list item + + + Numbered list item + + + + Lettered list item + Lettered list item + Lettered list item + + Numbered list item + Numbered list item + Numbered list item + Numbered list item + + + Lettered list item + +
    + `, +}; diff --git a/src/components/list/fds-list.ts b/src/components/list/fds-list.ts new file mode 100644 index 00000000..ee6149f5 --- /dev/null +++ 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`` + : html`
      + +
    `; + } +} diff --git a/src/index.ts b/src/index.ts index 6ce5ee26..65b8f5e5 100644 --- 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';