feat: add support of ol accordions (#16535)

* feat: add support of ol accordions * feat: udate snapshot, fix test
carbon-design-system · May 23, 2024 · e12dd6f · e12dd6f
1 parent e048761
commit e12dd6f
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 8 deletions.
diff --git 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
@@ -262,7 +262,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://www.davidpadilla.dev/"><img src="https://avatars.githubusercontent.com/u/25573926?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Padilla</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=cesardlinx" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/allisonishida"><img src="https://avatars.githubusercontent.com/u/22247062?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Allison Ishida</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=allisonishida" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/alewitt2"><img src="https://avatars.githubusercontent.com/u/48691328?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alex Lewitt</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=alewitt2" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/Tresau-IBM"><img src="https://avatars.githubusercontent.com/u/148357638?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tresau-IBM</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Tresau-IBM" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Tresau"><img src="https://avatars.githubusercontent.com/u/148357638?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tresau</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Tresau" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/danoro96"><img src="https://avatars.githubusercontent.com/u/52253150?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Castillo</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=danoro96" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/kuri-sun"><img src="https://avatars.githubusercontent.com/u/62743644?v=4?s=100" width="100px;" alt=""/><br /><sub><b>HaRuki</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=kuri-sun" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=kuri-sun" title="Documentation">📖</a></td>
   </tr>

diff --git 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
@@ -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 (
-    <ul className={classes} {...rest}>
+    <ListTag className={classes} {...rest}>
       {open && (
         <li
           className={`${prefix}--accordion__item ${prefix}--accordion__item--active`}>
@@ -74,7 +82,7 @@ function AccordionSkeleton({
       {Array.from({ length: numSkeletonItems }).map((_, i) => (
         <AccordionSkeletonItem key={i} />
       ))}
-    </ul>
+    </ListTag>
   );
 }
 

diff --git 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<AccordionProps>) {
@@ -60,12 +67,13 @@ function Accordion({
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start',
   });
+  const ListTag = ordered ? 'ol' : 'ul';
 
   return (
     <AccordionProvider disabled={disabled}>
-      <ul className={className} {...rest}>
+      <ListTag className={className} {...rest}>
         {children}
-      </ul>
+      </ListTag>
     </AccordionProvider>
   );
 }
@@ -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
@@ -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(
+        <Accordion data-testid="accordion" ordered={true}>
+          <AccordionItem className="child" title="Heading A">
+            Panel A
+          </AccordionItem>
+          <AccordionItem className="child" title="Heading B">
+            Panel B
+          </AccordionItem>
+          <AccordionItem className="child" title="Heading C">
+            Panel C
+          </AccordionItem>
+        </Accordion>
+      );
+      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(
+        <Accordion data-testid="accordion" ordered={false}>
+          <AccordionItem className="child" title="Heading A">
+            Panel A
+          </AccordionItem>
+          <AccordionItem className="child" title="Heading B">
+            Panel B
+          </AccordionItem>
+          <AccordionItem className="child" title="Heading C">
+            Panel C
+          </AccordionItem>
+        </Accordion>
+      );
+      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
@@ -56,6 +56,14 @@ describe('AccordionSkeleton', () => {
         'cds--accordion__item--active'
       );
     });
+
+    it('should respect ordered prop', () => {
+      const { container } = render(<AccordionSkeleton ordered={true} />);
+      const ol = container.querySelector('ol');
+      expect(ol).toBeInTheDocument();
+      const ul = container.querySelector('ul');
+      expect(ul).not.toBeInTheDocument();
+    });
   });
 
   describe('behaves as expected', () => {