diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss index be63025b9a..8e8b8d91b9 100644 --- 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 index 2552de1577..57fbaf4fda 100644 --- 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 index 521aae0eaf..13ae0dc781 100644 --- 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() + + const component = screen.getByRole('list') + + expect(component).toHaveClass('ams-ordered-list--small') + }) + it('supports ForwardRef in React', () => { const ref = createRef() diff --git a/packages/react/src/OrderedList/OrderedList.tsx b/packages/react/src/OrderedList/OrderedList.tsx index ba36e3b4f3..09ef27f909 100644 --- 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> const OrderedListRoot = forwardRef( ( - { children, className, inverseColor, markers = true, ...restProps }: OrderedListProps, + { children, className, inverseColor, markers = true, size, ...restProps }: OrderedListProps, ref: ForwardedRef, ) => (
    > const UnorderedListRoot = forwardRef( ( - { children, className, inverseColor, markers = true, ...restProps }: UnorderedListProps, + { children, className, inverseColor, markers = true, size, ...restProps }: UnorderedListProps, ref: ForwardedRef, ) => { 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 index aee7fb7897..0df97055e0 100644 --- 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 index 5a57f16a29..2a93e6813a 100644 --- 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 index 754f11fd1a..3cfa2becac 100644 --- 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 +## Small + +Use a list with a smaller font size in form descriptions and captions and the like. + + + ### 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 index 96b02cbf87..7a9aff286e 100644 --- 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 @@ -35,6 +42,12 @@ type Story = StoryObj export const Default: Story = {} +export const Small: Story = { + args: { + size: 'small', + }, +} + export const TwoLevels: Story = { render: (args) => ( diff --git a/storybook/src/components/UnorderedList/UnorderedList.docs.mdx b/storybook/src/components/UnorderedList/UnorderedList.docs.mdx index 4f52536c74..2709266afa 100644 --- 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. + +### Small + +Use a list with a smaller font size in form descriptions and captions and the like. + + diff --git a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx index baabbbbb0f..cede15a8f5 100644 --- a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx +++ b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx @@ -136,3 +136,9 @@ export const InverseColor: Story = { ), } + +export const Small: Story = { + args: { + size: 'small', + }, +} diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx index 5515deaf7c..a124eab0ab 100644 --- 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 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    3205768321088134416001856211223682624
    + Extra small + + 4 + 5678910
    + Small + + 8 + 101214161820
    + Medium + + 16 + + 20 + + 24 + + 28 + + 32 + + 36 + + 40 +
    + Large + + 24 + 303642485460
    + Extra large + + 32 + 404856647280
    ## Stack Space