diff --git a/.all-contributorsrc b/.all-contributorsrc index b98ea9041226..8bf5e4f9c787 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1326,10 +1326,10 @@ ] }, { - "login": "Tresau-IBM", - "name": "Tresau-IBM", + "login": "Tresau", + "name": "Tresau", "avatar_url": "https://avatars.githubusercontent.com/u/148357638?v=4", - "profile": "https://github.com/Tresau-IBM", + "profile": "https://github.com/Tresau", "contributions": [ "code" ] diff --git a/README.md b/README.md index b46e36d2345f..2662693fdde1 100644 --- a/README.md +++ b/README.md @@ -262,7 +262,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
David Padilla
💻
Allison Ishida
💻
Alex Lewitt
💻 -
Tresau-IBM
💻 +
Tresau
💻
Daniel Castillo
💻
HaRuki
💻 📖 diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 8311dbf4bb0c..8b31a14bb4dc 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -25,6 +25,9 @@ Map { "isFlush": Object { "type": "bool", }, + "ordered": Object { + "type": "bool", + }, "size": Object { "args": Array [ Array [ diff --git a/packages/react/src/components/Accordion/Accordion.Skeleton.tsx b/packages/react/src/components/Accordion/Accordion.Skeleton.tsx index 6b00e7c926c6..5d370bd1bb41 100644 --- a/packages/react/src/components/Accordion/Accordion.Skeleton.tsx +++ b/packages/react/src/components/Accordion/Accordion.Skeleton.tsx @@ -39,6 +39,12 @@ interface AccordionSkeletonProps { * `false` to not display the first item opened. */ open?: boolean; + + /** + * Specify if the Accordion should be an ordered list, + * default is `false` + */ + ordered?: boolean; } function AccordionSkeleton({ @@ -47,6 +53,7 @@ function AccordionSkeleton({ count = 4, isFlush, open = true, + ordered = false, ...rest }: AccordionSkeletonProps) { const prefix = usePrefix(); @@ -55,8 +62,9 @@ function AccordionSkeleton({ [`${prefix}--accordion--flush`]: isFlush && align !== 'start', }); const numSkeletonItems = open ? count - 1 : count; + const ListTag = ordered ? 'ol' : 'ul'; return ( - + ); } diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx index 264f78128021..ac6a76fb39d3 100644 --- a/packages/react/src/components/Accordion/Accordion.tsx +++ b/packages/react/src/components/Accordion/Accordion.tsx @@ -36,6 +36,12 @@ export interface AccordionProps { */ isFlush?: boolean; + /** + * Specify if the Accordion should be an ordered list, + * default is `false` + */ + ordered?: boolean; + /** * Specify the size of the Accordion. Currently * supports the following: `sm`, `md`, `lg` @@ -49,6 +55,7 @@ function Accordion({ className: customClassName, disabled = false, isFlush = false, + ordered = false, size, ...rest }: PropsWithChildren) { @@ -60,12 +67,13 @@ function Accordion({ [`${prefix}--layout--size-${size}`]: size, [`${prefix}--accordion--flush`]: isFlush && align !== 'start', }); + const ListTag = ordered ? 'ol' : 'ul'; return ( - + ); } @@ -96,6 +104,12 @@ Accordion.propTypes = { */ isFlush: PropTypes.bool, + /** + * Specify if the Accordion should be an ordered list, + * default is `false` + */ + ordered: PropTypes.bool, + /** * Specify the size of the Accordion. Currently supports the following: */ diff --git a/packages/react/src/components/Accordion/__tests__/Accordion-test.js b/packages/react/src/components/Accordion/__tests__/Accordion-test.js index f7b79c71533c..3a4a16c52de8 100644 --- a/packages/react/src/components/Accordion/__tests__/Accordion-test.js +++ b/packages/react/src/components/Accordion/__tests__/Accordion-test.js @@ -254,4 +254,45 @@ describe('Accordion', () => { expect(screen.getByText('Panel C')).not.toBeVisible(); }); }); + describe('Ordered List', () => { + it('should be an ol if prop ordered is passed as true', () => { + const { container } = render( + + + Panel A + + + Panel B + + + Panel C + + + ); + const ol = container.querySelector('ol'); + expect(ol).toBeInTheDocument(); + const ul = container.querySelector('ul'); + expect(ul).not.toBeInTheDocument(); + }); + + it('should be a ul if prop ordered is passed as false', () => { + const { container } = render( + + + Panel A + + + Panel B + + + Panel C + + + ); + const ol = container.querySelector('ol'); + expect(ol).not.toBeInTheDocument(); + const ul = container.querySelector('ul'); + expect(ul).toBeInTheDocument(); + }); + }); }); diff --git a/packages/react/src/components/Accordion/__tests__/AccordionSkeleton-test.js b/packages/react/src/components/Accordion/__tests__/AccordionSkeleton-test.js index 2eef4e801582..dddb18269b8a 100644 --- a/packages/react/src/components/Accordion/__tests__/AccordionSkeleton-test.js +++ b/packages/react/src/components/Accordion/__tests__/AccordionSkeleton-test.js @@ -56,6 +56,14 @@ describe('AccordionSkeleton', () => { 'cds--accordion__item--active' ); }); + + it('should respect ordered prop', () => { + const { container } = render(); + const ol = container.querySelector('ol'); + expect(ol).toBeInTheDocument(); + const ul = container.querySelector('ul'); + expect(ul).not.toBeInTheDocument(); + }); }); describe('behaves as expected', () => {