feat: Allow small text for unordered lists (#1217)

Co-authored-by: Vincent Smedinga <[email protected]>

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);

packages/react/src/UnorderedList/UnorderedList.tsx

@@ -12,11 +12,13 @@ export type UnorderedListProps = {
   /** Changes the text color for readability on a dark background. */
   inverseColor?: boolean
   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 +28,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}

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}" }
       }
     }
   }

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} />

storybook/src/components/UnorderedList/UnorderedList.stories.tsx

@@ -136,3 +136,9 @@ export const InverseColor: Story = {
     </UnorderedList>
   ),
 }
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
+}