feat: Allow small text for ordered lists (#1219)

Co-authored-by: Vincent Smedinga <[email protected]>
Amsterdam · May 7, 2024 · 0e77bd6 · 0e77bd6
1 parent 5012851
commit 0e77bd6
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 2 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/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,6 +11,7 @@ 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'

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