feat: Allow small text for ordered lists

packages/css/src/components/ordered-list/ordered-list.scss

@@ -26,9 +26,9 @@
 .ams-ordered-list:not(.ams-ordered-list--no-markers) {
   color: var(--ams-ordered-list-color);
   font-family: var(--ams-ordered-list-font-family);
-  font-size: var(--ams-ordered-list-font-size);
+  font-size: var(--ams-ordered-list-medium-font-size);
   font-weight: var(--ams-ordered-list-font-weight);
-  line-height: var(--ams-ordered-list-line-height);
+  line-height: var(--ams-ordered-list-medium-line-height);
   list-style-type: var(--ams-ordered-list-list-style-type);
 
   /** List items are responsible for indentation and marker positioning. */
@@ -38,6 +38,16 @@
   }
 }
 
+.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);
+}
+
+.ams-ordered-list--large:not(.ams-ordered-list--no-markers) {
+  font-size: var(--ams-ordered-list-large-font-size);
+  line-height: var(--ams-ordered-list-large-line-height);
+}
+
 .ams-ordered-list--inverse-color:not(.ams-ordered-list--no-markers) {
   color: var(--ams-ordered-list-inverse-color);
 }

packages/react/src/OrderedList/OrderedList.test.tsx

@@ -61,6 +61,22 @@ 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('renders the large size class', () => {
+    render(<OrderedList size="large" />)
+
+    const component = screen.getByRole('list')
+
+    expect(component).toHaveClass('ams-ordered-list--large')
+  })
+
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLOListElement>()
 

packages/react/src/OrderedList/OrderedList.tsx

@@ -12,11 +12,13 @@ export type OrderedListProps = {
   markers?: boolean
   /** Changes the text color for readability on a dark background. */
   inverseColor?: boolean
+  /** The size of the ordered list */
+  size?: 'small' | 'large'
 } & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>
 
 const OrderedListRoot = forwardRef(
   (
-    { children, className, inverseColor, markers = true, ...restProps }: OrderedListProps,
+    { children, className, inverseColor, size, markers = true, ...restProps }: OrderedListProps,
     ref: ForwardedRef<HTMLOListElement>,
   ) => (
     <ol
@@ -25,6 +27,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}

proprietary/tokens/src/components/ams/ordered-list.tokens.json

@@ -3,12 +3,22 @@
     "ordered-list": {
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
-      "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "gap": { "value": "0.75rem" },
       "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}" }
+      },
+      "medium": {
+        "font-size": { "value": "{ams.text.level.5.font-size}" },
+        "line-height": { "value": "{ams.text.level.5.line-height}" }
+      },
+      "large": {
+        "font-size": { "value": "{ams.text.level.4.font-size}" },
+        "line-height": { "value": "{ams.text.level.4.line-height}" }
+      },
       "item": {
         "margin-inline-start": {
           "value": "2.25rem",

storybook/src/components/OrderedList/OrderedList.docs.mdx

@@ -17,6 +17,18 @@ 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} />
+
+## Large
+
+Use this size only for the introductory text of a page.
+
+<Canvas of={OrderedListStories.Large} />
+
 ### Two Levels
 
 A list may have one nested level.

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', large: 'large' },
+      },
+      options: ['small', undefined, 'large'],
+    },
   },
   decorators: [inverseColorDecorator],
 } satisfies Meta<typeof OrderedList>
@@ -35,6 +42,18 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+  },
+}
+
 export const TwoLevels: Story = {
   render: (args) => (
     <OrderedList {...args}>