From c3bb70b7665bb7c1880715e386afc629871d55e0 Mon Sep 17 00:00:00 2001 From: Timothy Esau Date: Tue, 21 May 2024 14:18:45 -0400 Subject: [PATCH 1/2] feat: add support of ol accordions --- .all-contributorsrc | 6 +-- README.md | 2 +- .../Accordion/Accordion.Skeleton.tsx | 12 +++++- .../src/components/Accordion/Accordion.tsx | 18 +++++++- .../Accordion/__tests__/Accordion-test.js | 41 +++++++++++++++++++ .../__tests__/AccordionSkeleton-test.js | 8 ++++ 6 files changed, 79 insertions(+), 8 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 7c2332da4168..ed34d7224087 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 ee184317aaf8..98adb5c6a375 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/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 ( -
    + {children} -
+ ); } @@ -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..a956837e07bd 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).not.toBeInTheDocument(); + const ul = container.querySelector('ul'); + expect(ul).toBeInTheDocument(); + }); }); describe('behaves as expected', () => { From b12123504974af955ab51405fa3b54c7f73a6aec Mon Sep 17 00:00:00 2001 From: Timothy Esau Date: Tue, 21 May 2024 14:31:31 -0400 Subject: [PATCH 2/2] feat: udate snapshot, fix test --- packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 +++ .../components/Accordion/__tests__/AccordionSkeleton-test.js | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index f484a7b44532..1c951ee07858 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/__tests__/AccordionSkeleton-test.js b/packages/react/src/components/Accordion/__tests__/AccordionSkeleton-test.js index a956837e07bd..dddb18269b8a 100644 --- a/packages/react/src/components/Accordion/__tests__/AccordionSkeleton-test.js +++ b/packages/react/src/components/Accordion/__tests__/AccordionSkeleton-test.js @@ -60,9 +60,9 @@ describe('AccordionSkeleton', () => { it('should respect ordered prop', () => { const { container } = render(); const ol = container.querySelector('ol'); - expect(ol).not.toBeInTheDocument(); + expect(ol).toBeInTheDocument(); const ul = container.querySelector('ul'); - expect(ul).toBeInTheDocument(); + expect(ul).not.toBeInTheDocument(); }); });