Merge pull request #917 from dxc-technology/gomezivann-accordionGroup-default

New prop `defaultIndexActive` for Accordion Group

Author: raquelarrojo

docs/src/pages/components/cdk-components/accordion-group/AccordionGroup.jsx

@@ -14,7 +14,6 @@ function AccordionGroup() {
   return (
     <ComponentDoc>
       <ComponentHeader title="Accordion Group" status="ready"></ComponentHeader>
-
       <Section>
         <DxcHeading level={3} text="Props" margin={{ bottom: "small" }} />
         <AccordionGroupPropsTable />
@@ -47,14 +46,14 @@ function AccordionGroup() {
       </Section>
       <Section>
         <DxcHeading level={3} text="Examples" margin={{ bottom: "small" }} />
-        <Example
-          title="Uncontrolled Accordion Group"
-          example={uncontrolledAccordionGroup}
-        ></Example>
         <Example
           title="Controlled Accordion Group"
           example={controlledAccordionGroup}
         ></Example>
+        <Example
+          title="Uncontrolled Accordion Group"
+          example={uncontrolledAccordionGroup}
+        ></Example>
         <Example title="Disabled Accordion Group" example={disabled}></Example>
       </Section>
     </ComponentDoc>

docs/src/pages/components/cdk-components/accordion-group/api.jsx

@@ -9,25 +9,45 @@ const AccordionGroupPropsTable = () => {
         <th>Default</th>
         <th>Description</th>
       </tr>
+      <tr>
+        <td>defaultIndexActive: number</td>
+        <td></td>
+        <td>Initially active accordion, only when it is uncontrolled.</td>
+      </tr>
       <tr>
         <td>indexActive: number</td>
         <td></td>
-        <td>The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component. If null, the component will be controlled and all accordions will be closed.</td>
+        <td>
+          The index of the active accordion. If undefined, the component will be
+          uncontrolled and the active accordion will be managed internally by
+          the component. If null, the component will be controlled and all
+          accordions will be closed.
+        </td>
       </tr>
       <tr>
-          <td>disabled: boolean</td>
-          <td><code>false</code></td>
-          <td>If true, the component will be disabled.</td>
+        <td>disabled: boolean</td>
+        <td>
+          <code>false</code>
+        </td>
+        <td>If true, the component will be disabled.</td>
       </tr>
       <tr>
-          <td>onActiveChange: function</td>
-          <td></td>
-          <td>This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.</td>
+        <td>onActiveChange: function</td>
+        <td></td>
+        <td>
+          This function will be called when the user clicks on an accordion. The
+          index of the clicked accordion will be passed as a parameter.
+        </td>
       </tr>
-          <tr>
-          <td>margin: string | object</td>
-          <td></td>
-          <td>Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.</td>
+      <tr>
+        <td>margin: string | object</td>
+        <td></td>
+        <td>
+          Size of the margin to be applied to the component ('xxsmall' |
+          'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You
+          can pass an object with 'top', 'bottom', 'left' and 'right' properties
+          in order to specify different margin sizes.
+        </td>
       </tr>
     </DxcTable>
   );

docs/src/pages/components/cdk-components/accordion-group/examples/controlledAccordionGroup.js

@@ -4,8 +4,8 @@ import { useState } from "react";
 const code = `() => {
   const [indexAccordion, setIndexAccordion] = useState(0);
 
-  const onActiveChange = (i) => {
-    setIndexAccordion((prevValue) => prevValue === i ? null : i);
+  const onActiveChange = (index) => {
+    setIndexAccordion((currentIndex) => currentIndex === index ? -1 : index);
   };
 
   return (

docs/src/pages/components/cdk-components/accordion-group/examples/uncontrolledAccordionGroup.js

@@ -3,7 +3,7 @@ import { DxcAccordionGroup } from "@dxc-technology/halstack-react";
 const code = `() => {
   return (
     <div>
-      <DxcAccordionGroup margin="medium">
+      <DxcAccordionGroup margin="medium" defaultIndexActive={0}>
         <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -24,7 +24,7 @@ const code = `() => {
 }`;
 
 const scope = {
-  DxcAccordionGroup
+  DxcAccordionGroup,
 };
 
 export default { code, scope };

lib/src/accordion-group/AccordionGroup.stories.tsx

@@ -36,7 +36,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Expanded" theme="light" level={4} />
-      <DxcAccordionGroup indexActive={1}>
+      <DxcAccordionGroup defaultIndexActive={1}>
         <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et

lib/src/accordion-group/AccordionGroup.test.js

@@ -26,7 +26,6 @@ describe("Accordion component tests", () => {
     expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
     expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
   });
-
   test("Uncontrolled accordion group renders with only one children", () => {
     const { getByText, getAllByRole } = render(
       <DxcAccordionGroup>
@@ -42,7 +41,6 @@ describe("Accordion component tests", () => {
     expect(getByText("Accordion1")).toBeTruthy();
     expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
   });
-
   test("Uncontrolled accordion group calls correct function on click", () => {
     const onActiveChange = jest.fn();
     const { getByText, getAllByRole } = render(
@@ -69,7 +67,28 @@ describe("Accordion component tests", () => {
     expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
     expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
   });
-
+  test("Uncontrolled accordion group renders initially with an accordion expanded", () => {
+    const { getByText, getAllByRole } = render(
+      <DxcAccordionGroup defaultIndexActive={1}>
+        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </div>
+        </DxcAccordionGroup.Accordion>
+      </DxcAccordionGroup>
+    );
+    expect(getByText("Accordion1")).toBeTruthy();
+    expect(getByText("Accordion2")).toBeTruthy();
+    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
+    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
+  });
   test("Controlled accordion with indexActive change", () => {
     const onActiveChange = jest.fn();
     const { getByText, getAllByRole, rerender } = render(
@@ -105,7 +124,6 @@ describe("Accordion component tests", () => {
     expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
     expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
   });
-
   test("Disabled uncontrolled accordion group", () => {
     const onActiveChange = jest.fn();
     const { getByText } = render(

lib/src/accordion-group/AccordionGroup.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import DxcAccordion from "../accordion/Accordion";
 import { getMargin } from "../common/utils.js";
@@ -8,19 +8,19 @@ import useTheme from "../useTheme";
 import AccordionGroupPropsType, { AccordionPropsType } from "./types";
 
 type AccordionGroupAccordionContext = {
-  innerIsExpanded: number;
+  activeIndex: number;
   handlerActiveChange: (index: number) => void;
   disabled: boolean;
   index: number;
 };
 const AccordionGroupAccordionContext = createContext<AccordionGroupAccordionContext | null>(null);
 
 const AccordionGroupAccordion = ({ ...childProps }: AccordionPropsType): JSX.Element => {
-  const { innerIsExpanded, handlerActiveChange, disabled, index } = useContext(AccordionGroupAccordionContext);
+  const { activeIndex, handlerActiveChange, disabled, index } = useContext(AccordionGroupAccordionContext);
 
   return (
     <DxcAccordion
-      isExpanded={innerIsExpanded === index}
+      isExpanded={activeIndex === index}
       onChange={() => {
         handlerActiveChange(index);
       }}
@@ -33,38 +33,34 @@ const AccordionGroupAccordion = ({ ...childProps }: AccordionPropsType): JSX.Ele
 };
 
 const DxcAccordionGroup = ({
+  defaultIndexActive,
   indexActive,
   disabled = false,
   onActiveChange,
   margin,
   children,
 }: AccordionGroupPropsType): JSX.Element => {
   const colorsTheme = useTheme();
-
-  const [innerIsExpanded, setInnerIsExpanded] = useState(0);
+  const [innerIndexActive, setInnerIndexActive] = useState(defaultIndexActive ?? -1);
   const handlerActiveChange = useCallback(
     (index) => {
-      indexActive === undefined
-        ? setInnerIsExpanded((prev) => (index === prev ? -1 : index))
-        : setInnerIsExpanded(indexActive);
-
+      indexActive ?? setInnerIndexActive((prev) => (index === prev ? -1 : index));
       !disabled && onActiveChange?.(index);
     },
     [disabled, indexActive, onActiveChange]
   );
-  const value = useMemo(() => ({ innerIsExpanded, handlerActiveChange, disabled }), [innerIsExpanded, disabled]);
-
-  useEffect(() => {
-    setInnerIsExpanded(indexActive);
-  }, [indexActive]);
+  const contextValue = useMemo(
+    () => ({ activeIndex: indexActive ?? innerIndexActive, handlerActiveChange, disabled }),
+    [indexActive, innerIndexActive, handlerActiveChange, disabled]
+  );
 
   return (
     <ThemeProvider theme={colorsTheme.accordion}>
       <AccordionGroupContainer margin={margin} disabled={disabled}>
         {(Array.isArray(children) ? children : [children])
           .filter((child) => child.type === AccordionGroupAccordion)
           .map((accordion, index) => (
-            <AccordionGroupAccordionContext.Provider value={{ index, ...value }}>
+            <AccordionGroupAccordionContext.Provider value={{ index, ...contextValue }}>
               {accordion}
             </AccordionGroupAccordionContext.Provider>
           ))}

lib/src/accordion-group/types.ts

@@ -43,6 +43,10 @@ export type AccordionPropsType = {
 };
 
 type Props = {
+  /**
+   * Initially active accordion, only when it is uncontrolled.
+   */
+  defaultIndexActive?: number;
   /**
    * The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
    * If null, the component will be controlled and all accordions will be closed.