feat(styles): add list mixins (#4097)

Co-authored-by: Alizé Debray <[email protected]>
swisspost · Dec 4, 2024 · c5a6491 · c5a6491
1 parent 86e2ef1
commit c5a6491
Show file tree

Hide file tree

Showing 17 changed files with 320 additions and 106 deletions.
diff --git a/.changeset/new-pianos-mix.md b/.changeset/new-pianos-mix.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added list mixins `list-bullet`, `list-revert` and `list-unstyled`.
diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
@@ -52,7 +52,8 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier
     .table-fit-content {
       width: fit-content;
 
-      th, td {
+      th,
+      td {
         padding-inline: 2rem;
       }
     }
@@ -110,9 +111,8 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier
     top: -0.1em;
     margin: 0 0.1em;
     padding: 0.15em 0.4em 0.1em;
-    background-color: tokens.get('utility-surface-accent1');
-    border: 1px solid tokens.get('utility-surface-accent2');
-    color: 1px solid tokens.get('utility-surface-accent4');
+    background-color: rgba(#fff, 0.75);
+    border: 1px solid rgba(#000, 0.3);
     border-radius: 0.2em;
     font-family: $monospace;
     font-size: 0.75em;
@@ -128,6 +128,13 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier
     }
   }
 
+  [data-color-scheme='dark'] {
+    code {
+      background-color: rgba(#000, 0.75);
+      border-color: rgba(#fff, 0.3);
+    }
+  }
+
   .sbdocs-wrapper {
     padding-right: 0;
     padding-bottom: 0;

diff --git a/packages/documentation/cypress/e2e/components/list.cy.ts b/packages/documentation/cypress/e2e/components/list.cy.ts
@@ -1,7 +1,7 @@
 describe('List', () => {
   describe('Accessibility', () => {
     beforeEach(() => {
-      cy.visit('/iframe.html?id=snapshots--list');
+      cy.visit('/iframe.html?id=snapshots--lists');
       cy.get('ol', { timeout: 30000 }).should('be.visible');
       cy.injectAxe();
     });

diff --git a/packages/documentation/cypress/snapshots/components/list.snapshot.ts b/packages/documentation/cypress/snapshots/components/list.snapshot.ts
@@ -1,6 +1,6 @@
 describe('List', () => {
   it('default', () => {
-    cy.visit('/iframe.html?id=snapshots--list');
+    cy.visit('/iframe.html?id=snapshots--lists');
     cy.get('ol', { timeout: 30000 }).should('be.visible');
     cy.percySnapshot('Lists', { widths: [1440] });
   });

diff --git a/packages/documentation/src/stories/foundations/typography/list/list-bullet.sample.scss b/packages/documentation/src/stories/foundations/typography/list/list-bullet.sample.scss
@@ -0,0 +1,7 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.my-component {
+  ul {
+    @include post.list-bullet();
+  }
+}
diff --git a/packages/documentation/src/stories/foundations/typography/list/list-inline.sample.scss b/packages/documentation/src/stories/foundations/typography/list/list-inline.sample.scss
@@ -0,0 +1,7 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.my-component {
+  ul {
+    @include post.list-inline();
+  }
+}
diff --git a/packages/documentation/src/stories/foundations/typography/list/list-reset.sample.scss b/packages/documentation/src/stories/foundations/typography/list/list-reset.sample.scss
diff --git a/packages/documentation/src/stories/foundations/typography/list/list-unstyled.sample.scss b/packages/documentation/src/stories/foundations/typography/list/list-unstyled.sample.scss
@@ -0,0 +1,13 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.my-component {
+  ul {
+    @include post.list-unstyled() {
+      // custom styles for the ul element
+    }
+
+    > li {
+      // custom styles for child elements
+    }
+  }
+}
diff --git a/packages/documentation/src/stories/foundations/typography/list/list.docs.mdx b/packages/documentation/src/stories/foundations/typography/list/list.docs.mdx
@@ -1,6 +1,8 @@
 import { Meta, Canvas, Source } from '@storybook/blocks';
 import * as ListStories from './list.stories';
-import SampleListReset from './list-reset.sample.scss?raw';
+import SampleListBullet from './list-bullet.sample.scss?raw';
+import SampleListInline from './list-inline.sample.scss?raw';
+import SampleListUnstyled from './list-unstyled.sample.scss?raw';
 
 <Meta of={ListStories} />
 
@@ -18,49 +20,62 @@ It is created using a `<ul>` tag and each list item is preceded by a bullet (sma
 
 <Canvas of={ListStories.UnorderedList} sourceState="shown" />
 
-### Unstyled
+#### Sass mixin
+
+<Source
+  language="scss"
+  dark
+  code={SampleListBullet}
+></Source>
 
-Remove the default list-style and left margin on list items (immediate children only).
-This only applies to immediate child list items, meaning you will need to add the class for any nested lists as well.
+### Inline
 
-<Canvas of={ListStories.UnstyledList} sourceState="shown" />
+Remove a list’s bullets.
 
-#### Sass mixin
+<Canvas of={ListStories.InlineList} sourceState="shown"/>
 
-If you want to use the class above, you can still reset the list styles with the following mixin:
+#### Sass mixin
 
 <Source
   language="scss"
   dark
-  code={SampleListReset}
+  code={SampleListInline}
 ></Source>
 
-### Inline
+### Unstyled List
 
-Remove a list’s bullets and apply some light margin with a combination of two classes,
-`.list-inline` and `.list-inline-item`.
+<p className="banner banner-info banner">Can be used with both, unordered and ordered lists.</p>
+Remove all the styles on a list and make it appear as if it is made out of `<div>` elements.
 
-<Canvas of={ListStories.InlineList} sourceState="shown"/>
+<Canvas of={ListStories.UnstyledList} sourceState="shown"/>
+
+#### Sass mixin
+
+<Source
+  language="scss"
+  dark
+  code={SampleListUnstyled}
+></Source>
 
-## Ordered List
+## Ordered
 
 An ordered list groups related items in a specific order.
 It is created using a `<ol>` tag and list items are preceded by ascending numbers by default.
 
 <strong>All of the above utility classes also apply to ordered lists.</strong>
 
-<Canvas of={ListStories.OrderedList} sourceState="shown" />
+<Canvas of={ListStories.OrderedList} sourceState="shown"/>
 
 ## Description List
 
 A description list is a list of terms, with a description of each term.
 It is created using a `<dl>` tag, terms are defined using `<dt>` tags, and descriptions are defined using `<dd>` tags.
 
-<Canvas of={ListStories.DescriptionList} sourceState="shown" />
+<Canvas of={ListStories.DescriptionList} sourceState="shown"/>
 
 ### Alignment
 
 Align terms and descriptions horizontally by using our grid system’s predefined classes.
 For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
 
-<Canvas of={ListStories.DescriptionListUsingGrid} sourceState="shown" />
+<Canvas of={ListStories.DescriptionListUsingGrid} sourceState="shown"/>
diff --git a/packages/documentation/src/stories/foundations/typography/list/list.snapshot.stories.ts b/packages/documentation/src/stories/foundations/typography/list/list.snapshot.stories.ts
@@ -0,0 +1,118 @@
+import type { StoryObj } from '@storybook/web-components';
+import { schemes } from '@/shared/snapshots/schemes';
+import meta from './list.stories';
+import { html, TemplateResult } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Lists: Story = {
+  render: () => {
+    return schemes(
+      () => html`
+        <h1>Lists</h1>
+
+        <h2>Bullet</h2>
+
+        <code class="mt-48">&lt;ul&gt;</code>
+        ${renderList({ el: 'ul' })} ${renderList({ el: 'ul', classList: 'list-revert' })}
+        ${renderList({ el: 'ul', classList: 'list-unstyled' })}
+
+        <code class="mt-48">&lt;ul class="list-inline"&gt;</code>
+        ${renderList({
+          el: 'ul',
+          classList: 'list-inline',
+        })}
+        ${renderList({
+          el: 'ul',
+          classList: 'list-inline list-revert',
+        })}
+        ${renderList({
+          el: 'ul',
+          classList: 'list-inline list-unstyled',
+        })}
+
+        <code class="mt-48">&lt;ul class="list-bullet"&gt;</code>
+        ${renderList({ el: 'ul', classList: 'list-bullet' })}
+        ${renderList({ el: 'ul', classList: 'list-bullet list-revert' })}
+        ${renderList({ el: 'ul', classList: 'list-bullet list-unstyled' })}
+
+        <code class="mt-48">&lt;ul class="list-bullet list-inline"&gt;</code>
+        ${renderList({
+          el: 'ul',
+          classList: 'list-bullet list-inline',
+        })}
+        ${renderList({
+          el: 'ul',
+          classList: 'list-bullet list-inline list-revert',
+        })}
+        ${renderList({
+          el: 'ul',
+          classList: 'list-bullet list-inline list-unstyled',
+        })}
+
+        <h2>Number</h2>
+
+        <code class="mt-48">&lt;ol&gt;</code>
+        ${renderList({ el: 'ol' })} ${renderList({ el: 'ol', classList: 'list-revert' })}
+        ${renderList({ el: 'ol', classList: 'list-unstyled' })}
+
+        <code class="mt-48">&lt;ul class="list-inline"&gt;</code>
+        ${renderList({
+          el: 'ol',
+          classList: 'list-inline',
+        })}
+        ${renderList({
+          el: 'ol',
+          classList: 'list-inline list-revert',
+        })}
+        ${renderList({
+          el: 'ol',
+          classList: 'list-inline list-unstyled',
+        })}
+      `,
+    );
+
+    function renderList({
+      el,
+      classList = '',
+    }: {
+      el: string;
+      classList?: string;
+    }): TemplateResult {
+      const classAttr = classList ? ` class="${classList}"` : '';
+      const modifiers = classList?.split(' ').map(c => c.replace(/^list-/, ''));
+      const modifierStr = modifiers ? modifiers.join(' ') : '';
+
+      const modifierBlock = modifierStr ? `<strong>${modifierStr}</strong> ` : '';
+      const subListBlock = !modifiers?.some(n => n === 'inline')
+        ? `<${el}${classAttr}>
+          <li>${modifierBlock} sub-list-item 1</li>
+          <li>${modifierBlock} sub-list-item 2</li>
+        </${el}>`
+        : '';
+      const listBlock = `<${el}${classAttr}>
+        <li>${modifierBlock} list-item 1</li>
+        <li>${modifierBlock} list-item 2 with more text to show how list-inline items wrap to a new line if necessary</li>
+        <li>${modifierBlock} list-item 3</li>
+        <li>
+          ${modifierBlock} list-item 4${subListBlock && ' - text before nested'}
+          ${subListBlock}
+          ${subListBlock && modifierBlock + ' list item 4 - text after nested'}
+        </li>
+        <li>${modifierBlock} list-item 5</li>
+        <li>${modifierBlock} list-item 6</li>
+        <li>${modifierBlock} list-item 7</li>`;
+
+      return html`<hr />
+        ${unsafeHTML(listBlock)}`;
+    }
+  },
+};
diff --git a/packages/documentation/src/stories/foundations/typography/list/list.stories.ts b/packages/documentation/src/stories/foundations/typography/list/list.stories.ts
@@ -32,6 +32,16 @@ export const UnorderedList: Story = {
   `,
 };
 
+export const InlineList: Story = {
+  render: () => html`
+    <ul class="list-inline">
+      <li>This is an inline list item.</li>
+      <li>And another one.</li>
+      <li>And one more.</li>
+    </ul>
+  `,
+};
+
 export const UnstyledList: Story = {
   render: () => html`
     <ul class="list-unstyled">
@@ -51,16 +61,6 @@ export const UnstyledList: Story = {
   `,
 };
 
-export const InlineList: Story = {
-  render: () => html`
-    <ul class="list-inline">
-      <li class="list-inline-item">This is an inline list item.</li>
-      <li class="list-inline-item">And another one.</li>
-      <li class="list-inline-item">And one more.</li>
-    </ul>
-  `,
-};
-
 export const OrderedList: Story = {
   render: () => html`
     <ol>

diff --git a/packages/documentation/src/stories/raw-components/list/list.snapshot.stories.ts b/packages/documentation/src/stories/raw-components/list/list.snapshot.stories.ts
@@ -50,40 +50,3 @@ export const PostList: Story = {
     },
   ],
 };
-
-export const List: Story = {
-  render: () => {
-    return schemes(
-      () => html`
-        <ol>
-          <li>This is an ordered list.</li>
-          <li>It appears in its default style.</li>
-          <li>
-            Therefore it should be rendered with sequential numbers at the beginning of each list
-            item.
-          </li>
-          <li>
-            Nested list:
-            <ol>
-              <li>This is a nested list</li>
-              <li>It is further indented, depending on the depth of nesting.</li>
-              <li>Nested lists numbers are independent form the numbers of their parents.</li>
-            </ol>
-            After nested list item
-          </li>
-          <li>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-          </li>
-          <li>Ordered list item</li>
-          <li>Ordered list item</li>
-          <li>Ordered list item</li>
-          <li>Ordered list item</li>
-          <li>Ordered list item</li>
-        </ol>
-      `,
-    );
-  },
-};
diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss
@@ -3,7 +3,8 @@
 @use 'body';
 @use 'anchor';
 @use 'list-bullet';
+@use 'list';
+@use 'list-description';
 @use 'paragraph';
 @use 'fieldset-legend';
-@use 'list';
 @use 'heading';