Merge branch 'develop' of https://github.com/Amsterdam/design-system …

…into feature/DES-670-file-input
Amsterdam · May 8, 2024 · e078fc7 · e078fc7
2 parents a6d9e36 + 0e77bd6
commit e078fc7
Show file tree

Hide file tree

Showing 12 changed files with 176 additions and 17 deletions.
diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss
@@ -42,6 +42,11 @@
   color: var(--ams-ordered-list-inverse-color);
 }
 
+.ams-ordered-list--small:not(.ams-ordered-list--no-markers) {
+  font-size: var(--ams-ordered-list-small-font-size);
+  line-height: var(--ams-ordered-list-small-line-height);
+}
+
 /** A nested list has a different marker and less indentation for correct alignment. */
 :is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list {
   list-style-type: var(--ams-ordered-list-ordered-list-list-style-type);

diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss
@@ -42,6 +42,11 @@
   color: var(--ams-unordered-list-inverse-color);
 }
 
+.ams-unordered-list--small:not(.ams-unordered-list--no-markers) {
+  font-size: var(--ams-unordered-list-small-font-size);
+  line-height: var(--ams-unordered-list-small-line-height);
+}
+
 /** A nested list has a different marker and less indentation for correct alignment. */
 :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list {
   list-style-type: var(--ams-unordered-list-unordered-list-list-style-type);

diff --git a/packages/react/src/OrderedList/OrderedList.test.tsx b/packages/react/src/OrderedList/OrderedList.test.tsx
@@ -61,6 +61,14 @@ describe('Ordered list', () => {
     expect(items.length).toBe(3)
   })
 
+  it('renders the small size class', () => {
+    render(<OrderedList size="small" />)
+
+    const component = screen.getByRole('list')
+
+    expect(component).toHaveClass('ams-ordered-list--small')
+  })
+
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLOListElement>()
 

diff --git a/packages/react/src/OrderedList/OrderedList.tsx b/packages/react/src/OrderedList/OrderedList.tsx
@@ -9,14 +9,17 @@ import type { ForwardedRef, OlHTMLAttributes, PropsWithChildren } from 'react'
 import { OrderedListItem } from './OrderedListItem'
 
 export type OrderedListProps = {
-  markers?: boolean
   /** Changes the text color for readability on a dark background. */
   inverseColor?: boolean
+  /** Whether the list items show a marker. */
+  markers?: boolean
+  /** The size of the ordered list */
+  size?: 'small'
 } & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>
 
 const OrderedListRoot = forwardRef(
   (
-    { children, className, inverseColor, markers = true, ...restProps }: OrderedListProps,
+    { children, className, inverseColor, markers = true, size, ...restProps }: OrderedListProps,
     ref: ForwardedRef<HTMLOListElement>,
   ) => (
     <ol
@@ -25,6 +28,7 @@ const OrderedListRoot = forwardRef(
         'ams-ordered-list',
         inverseColor && 'ams-ordered-list--inverse-color',
         !markers && 'ams-ordered-list--no-markers',
+        size && `ams-ordered-list--${size}`,
         className,
       )}
       {...restProps}

diff --git a/packages/react/src/UnorderedList/UnorderedList.tsx b/packages/react/src/UnorderedList/UnorderedList.tsx
@@ -11,12 +11,15 @@ import { UnorderedListItem } from './UnorderedListItem'
 export type UnorderedListProps = {
   /** Changes the text color for readability on a dark background. */
   inverseColor?: boolean
+  /** Whether the list items show a marker. */
   markers?: boolean
+  /** The size of the unordered list. */
+  size?: 'small'
 } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>
 
 const UnorderedListRoot = forwardRef(
   (
-    { children, className, inverseColor, markers = true, ...restProps }: UnorderedListProps,
+    { children, className, inverseColor, markers = true, size, ...restProps }: UnorderedListProps,
     ref: ForwardedRef<HTMLUListElement>,
   ) => {
     return (
@@ -26,6 +29,7 @@ const UnorderedListRoot = forwardRef(
           'ams-unordered-list',
           inverseColor && 'ams-unordered-list--inverse-color',
           !markers && 'ams-unordered-list--no-markers',
+          size && `ams-unordered-list--${size}`,
           className,
         )}
         {...restProps}

diff --git a/proprietary/tokens/src/components/ams/ordered-list.tokens.json b/proprietary/tokens/src/components/ams/ordered-list.tokens.json
@@ -9,6 +9,10 @@
       "inverse-color": { "value": "{ams.color.primary-white}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "list-style-type": { "value": "decimal" },
+      "small": {
+        "font-size": { "value": "{ams.text.level.6.font-size}" },
+        "line-height": { "value": "{ams.text.level.6.line-height}" }
+      },
       "item": {
         "margin-inline-start": {
           "value": "2.25rem",

diff --git a/proprietary/tokens/src/components/ams/unordered-list.tokens.json b/proprietary/tokens/src/components/ams/unordered-list.tokens.json
@@ -31,6 +31,10 @@
             "comment": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem."
           }
         }
+      },
+      "small": {
+        "font-size": { "value": "{ams.text.level.6.font-size}" },
+        "line-height": { "value": "{ams.text.level.6.line-height}" }
       }
     }
   }

diff --git a/storybook/src/components/OrderedList/OrderedList.docs.mdx b/storybook/src/components/OrderedList/OrderedList.docs.mdx
@@ -17,6 +17,12 @@ Extra white space between items enhances the distinction, mainly when they consi
 
 <Controls />
 
+## Small
+
+Use a list with a smaller font size in form descriptions and captions and the like.
+
+<Canvas of={OrderedListStories.Small} />
+
 ### Two Levels
 
 A list may have one nested level.

diff --git a/storybook/src/components/OrderedList/OrderedList.stories.tsx b/storybook/src/components/OrderedList/OrderedList.stories.tsx
@@ -25,6 +25,13 @@ const meta = {
   argTypes: {
     reversed: { control: 'boolean' },
     start: { control: 'number' },
+    size: {
+      control: {
+        type: 'radio',
+        labels: { small: 'small', undefined: 'medium' },
+      },
+      options: ['small', undefined, 'large'],
+    },
   },
   decorators: [inverseColorDecorator],
 } satisfies Meta<typeof OrderedList>
@@ -35,6 +42,12 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
+}
+
 export const TwoLevels: Story = {
   render: (args) => (
     <OrderedList {...args}>

diff --git a/storybook/src/components/UnorderedList/UnorderedList.docs.mdx b/storybook/src/components/UnorderedList/UnorderedList.docs.mdx
@@ -46,3 +46,9 @@ This ensures the colour of the text provides enough contrast.
 When nesting lists, set the prop on all lists.
 
 <Canvas of={UnorderedListStories.InverseColor} />
+
+### Small
+
+Use a list with a smaller font size in form descriptions and captions and the like.
+
+<Canvas of={UnorderedListStories.Small} />
diff --git a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx
@@ -136,3 +136,9 @@ export const InverseColor: Story = {
     </UnorderedList>
   ),
 }
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
+}
diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx
@@ -22,25 +22,119 @@ The tables below show the resulting pixel widths at some reference widths.
 
 In Spacious Mode, the medium grid space grows from 16 to 56 pixels between window widths of 320 and 1600.
 
-|                 |  320   |  576   |  1088  |  1600  |
-| --------------: | :----: | :----: | :----: | :----: |
-| **Extra small** |   4    |   6    |   10   |   14   |
-|       **Small** |   8    |   12   |   20   |   28   |
-|      **Medium** | **16** | **24** | **40** | **56** |
-|       **Large** |   24   |   36   |   60   |   84   |
-| **Extra large** |   32   |   48   |   80   |  102   |
+|                 |  320   |  576   |  832   |  1088  |  1344  |  1600  |
+| --------------: | :----: | :----: | :----: | :----: | :----: | :----: |
+| **Extra small** |   4    |   6    |   8    |   10   |   12   |   14   |
+|       **Small** |   8    |   12   |   16   |   20   |   24   |   28   |
+|      **Medium** | **16** | **24** | **32** | **40** | **48** | **56** |
+|       **Large** |   24   |   36   |   48   |   60   |   72   |   84   |
+| **Extra large** |   32   |   48   |   64   |   80   |   96   |  102   |
 
 #### Compact
 
 In Compact Mode, the medium grid space grows from 16 to 40 pixels between window widths of 1088 and 2624.
 
-|                 |   1088 |   1600 |   2112 |   2624 |
-| --------------: | -----: | -----: | -----: | -----: |
-| **Extra small** |      4 |      6 |      8 |     10 |
-|       **Small** |      8 |     12 |     16 |     20 |
-|      **Medium** | **16** | **24** | **32** | **40** |
-|       **Large** |     24 |     36 |     48 |     60 |
-| **Extra large** |     32 |     48 |     64 |     80 |
+<table>
+  <thead>
+    <tr>
+      <th style={{ textAlign: "right" }}></th>
+      <th style={{ textAlign: "center" }}>320</th>
+      <th style={{ textAlign: "center" }}>576</th>
+      <th style={{ textAlign: "center" }}>832</th>
+      <th style={{ textAlign: "center" }}>1088</th>
+      <th style={{ textAlign: "center" }}>1344</th>
+      <th style={{ textAlign: "center" }}>1600</th>
+      <th style={{ textAlign: "center" }}>1856</th>
+      <th style={{ textAlign: "center" }}>2112</th>
+      <th style={{ textAlign: "center" }}>2368</th>
+      <th style={{ textAlign: "center" }}>2624</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style={{ textAlign: "right" }}>
+        <strong>Extra small</strong>
+      </td>
+      <td colspan={4} style={{ textAlign: "center" }}>
+        4
+      </td>
+      <td style={{ textAlign: "center" }}>5</td>
+      <td style={{ textAlign: "center" }}>6</td>
+      <td style={{ textAlign: "center" }}>7</td>
+      <td style={{ textAlign: "center" }}>8</td>
+      <td style={{ textAlign: "center" }}>9</td>
+      <td style={{ textAlign: "center" }}>10</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "right" }}>
+        <strong>Small</strong>
+      </td>
+      <td colspan={4} style={{ textAlign: "center" }}>
+        8
+      </td>
+      <td style={{ textAlign: "center" }}>10</td>
+      <td style={{ textAlign: "center" }}>12</td>
+      <td style={{ textAlign: "center" }}>14</td>
+      <td style={{ textAlign: "center" }}>16</td>
+      <td style={{ textAlign: "center" }}>18</td>
+      <td style={{ textAlign: "center" }}>20</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "right" }}>
+        <strong>Medium</strong>
+      </td>
+      <td colspan={4} style={{ textAlign: "center" }}>
+        <strong>16</strong>
+      </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>20</strong>
+      </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>24</strong>
+      </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>28</strong>
+      </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>32</strong>
+      </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>36</strong>
+      </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>40</strong>
+      </td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "right" }}>
+        <strong>Large</strong>
+      </td>
+      <td colspan={4} style={{ textAlign: "center" }}>
+        24
+      </td>
+      <td style={{ textAlign: "center" }}>30</td>
+      <td style={{ textAlign: "center" }}>36</td>
+      <td style={{ textAlign: "center" }}>42</td>
+      <td style={{ textAlign: "center" }}>48</td>
+      <td style={{ textAlign: "center" }}>54</td>
+      <td style={{ textAlign: "center" }}>60</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "right" }}>
+        <strong>Extra large</strong>
+      </td>
+      <td colspan={4} style={{ textAlign: "center" }}>
+        32
+      </td>
+      <td style={{ textAlign: "center" }}>40</td>
+      <td style={{ textAlign: "center" }}>48</td>
+      <td style={{ textAlign: "center" }}>56</td>
+      <td style={{ textAlign: "center" }}>64</td>
+      <td style={{ textAlign: "center" }}>72</td>
+      <td style={{ textAlign: "center" }}>80</td>
+    </tr>
+  </tbody>
+</table>
 
 ## Stack Space