fix(accordion): fixes #124

seb-oss · Feb 13, 2020 · 09459c2 · 09459c2
1 parent d6beaaa
commit 09459c2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/develop/components/pages/AccordionPage.tsx b/develop/components/pages/AccordionPage.tsx
@@ -24,6 +24,11 @@ const AccordionPage: React.FunctionComponent = () => {
                         <Accordion list={accordionList} />
                     </div>
 
+                    <p>Here is a sample with active or collapsed item</p>
+                    <div className="result wide">
+                        <Accordion list={accordionList} activeIndex={1} />
+                    </div>
+
                     <p>Custom icon when expanded</p>
                     <div className="result wide">
                         <Accordion

diff --git a/src/Accordion/Accordion.test.tsx b/src/Accordion/Accordion.test.tsx
@@ -134,4 +134,9 @@ describe("Component: Accordion", () => {
         mountedWrapper = mount(<Accordion list={accordionList} alternative={true} />);
         expect(mountedWrapper.find(".custom-accordion").hasClass("alternative-accordion")).toBeTruthy();
     });
+
+    it("Should allow user to set a default active item", () => {
+        mountedWrapper.setProps({ activeIndex: 1 }).update();
+        expect(mountedWrapper.find(".accordion-item").at(1).hasClass("active")).toBeTruthy();
+    });
 });
diff --git a/src/Accordion/Accordion.tsx b/src/Accordion/Accordion.tsx
@@ -23,6 +23,7 @@ export interface AccordionProps {
     id?: string;
     list: Array<AccrodionListItem>;
     alternative?: boolean;
+    activeIndex?: number;
 }
 
 const Accordion: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {
@@ -36,6 +37,7 @@ const Accordion: React.FunctionComponent<AccordionProps> = (props: AccordionProp
     React.useEffect(() => { constructIds(); }, [props.list]);
     React.useEffect(() => constructClassName(), [props.className, props.alternative]);
     React.useEffect(() => constructItemClassName(), [props.iconPosition, props.customIconExpanded, props.iconRotation]);
+    React.useEffect(() => toggle(props.activeIndex), [props.activeIndex]);
 
     /** Constructs `id`s for accordion items */
     function constructIds(): void {
@@ -63,7 +65,7 @@ const Accordion: React.FunctionComponent<AccordionProps> = (props: AccordionProp
 
     function expandOrCollapseSection(itemIndex: number): void {
         const updatedHeightList: Array<number> = Array(props.list.length).fill(0);
-        updatedHeightList[itemIndex] = heightList[itemIndex] ? 0 : collapsableRef.current[itemIndex].current.scrollHeight;
+        updatedHeightList[itemIndex] = heightList[itemIndex] ? 0 : collapsableRef.current[itemIndex]?.current?.scrollHeight;
         setHeightList(updatedHeightList);
     }
 

diff --git a/src/Accordion/readme.md b/src/Accordion/readme.md
@@ -30,13 +30,14 @@ This React component is based on SEB Bootstrap style. Supports customization and
 These are the current available properties:
 
 | Property            | Type                                   | Description                                                                            |
-| ------------------- | -------------------------------------- | -------------------------------------------------------------------------------------- |
+|---------------------|----------------------------------------|----------------------------------------------------------------------------------------|
 | alternative?        | `boolean`                              | Toggle alternative style of accordion                                                  |
 | className?          | `string`                               | Element class                                                                          |
+| activeIndex?        | `number`                               | index of the default active item                                                       |
 | customIcon?         | `JSX.Element`                          | Custom icon for the accordion trigger                                                  |
 | customIconExpanded? | `JSX.Element`                          | Custom icon to be used when expanded. This will add a transition between the two icons |
-| iconPosition?       | `string`                               | Accordion icon placement<sup>1</sup>                           |
-| iconTransition?     | `string`                               | Icon transition rotation degree<sup>2</sup>                                             |
+| iconPosition?       | `string`                               | Accordion icon placement<sup>1</sup>                                                   |
+| iconTransition?     | `string`                               | Icon transition rotation degree<sup>2</sup>                                            |
 | id?                 | `string`                               | Element id                                                                             |
 | list                | `Array<AccrodionListItem>`<sup>3</sup> | List of accordion items                                                                |