feat(accordion)!: add sections prop (#572)

Author: Francois-Esquire

packages/accordion/.size-snapshot.json

@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 4786,
-    "minified": 2554,
-    "gzipped": 1070
+    "bundled": 4402,
+    "minified": 2227,
+    "gzipped": 961
   },
   "index.esm.js": {
-    "bundled": 4662,
-    "minified": 2434,
-    "gzipped": 1052,
+    "bundled": 4261,
+    "minified": 2087,
+    "gzipped": 952,
     "treeshaked": {
       "rollup": {
-        "code": 161,
-        "import_statements": 101
+        "code": 162,
+        "import_statements": 83
       },
       "webpack": {
-        "code": 2507
+        "code": 2168
       }
     }
   }

packages/accordion/README.md

@@ -27,9 +27,10 @@ attributes for a group of sections.
 ```jsx
 import { useAccordion } from '@zendeskgarden/container-accordion';
 
-const Accordion = ({ expandable = true, collapsible = true } = {}) => {
+const Accordion = ({ sections = [0, 1, 2], expandable = true, collapsible = true } = {}) => {
   const { getHeaderProps, getTriggerProps, getPanelProps, expandedSections, disabledSections } =
     useAccordion({
+      sections,
       expandedSections: [0],
       expandable,
       collapsible
@@ -82,8 +83,8 @@ return <Accordion expandable={true} collapsible={true} />;
 ```jsx
 import { AccordionContainer } from '@zendeskgarden/container-accordion';
 
-const Accordion = ({ expandable = true, collapsible = true } = {}) => (
-  <AccordionContainer expandable={expandable} collapsible={collapsible}>
+const Accordion = ({ sections = [0, 1, 2], expandable = true, collapsible = true } = {}) => (
+  <AccordionContainer sections={sections} expandable={expandable} collapsible={collapsible}>
     {({ getHeaderProps, getTriggerProps, getPanelProps, expandedSections, disabledSections }) => (
       <>
         {sections.map((section, index) => {

packages/accordion/demo/accordion.stories.mdx

@@ -2,15 +2,18 @@ import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs'
 import { useArgs } from '@storybook/client-api';
 import { AccordionContainer } from '@zendeskgarden/container-accordion';
 import { AccordionStory } from './stories/AccordionStory';
+import { SECTIONS } from './stories/data.ts';
 import README from '../README.md';
 
 <Meta
   title="Packages/Accordion"
   component={AccordionContainer}
-  args={{ as: 'hook', sections: 5 }}
+  args={{
+    as: 'hook',
+    sections: SECTIONS
+  }}
   argTypes={{
-    as: { options: ['container', 'hook'], control: 'radio', table: { category: 'Story' } },
-    sections: { control: { type: 'range', min: 1, max: 9 }, table: { category: 'Story' } }
+    as: { options: ['container', 'hook'], control: 'radio', table: { category: 'Story' } }
   }}
 />
 
@@ -39,7 +42,7 @@ import README from '../README.md';
 <Canvas>
   <Story
     name="Controlled"
-    args={{ expandedSections: [0] }}
+    args={{ expandedSections: SECTIONS.slice(0, 1) }}
     argTypes={{
       defaultExpandedSections: { control: false },
       collapsible: { control: false },
@@ -48,10 +51,10 @@ import README from '../README.md';
   >
     {args => {
       const updateArgs = useArgs()[1];
-      const handleChange = index => {
-        const expandedSections = args.expandedSections.includes(index)
-          ? args.expandedSections.filter(section => section !== index)
-          : [...args.expandedSections, index];
+      const handleChange = value => {
+        const expandedSections = args.expandedSections.includes(value)
+          ? args.expandedSections.filter(section => section !== value)
+          : [...args.expandedSections, value];
         updateArgs({ expandedSections });
       };
       return <AccordionStory {...args} onChange={handleChange} />;

packages/accordion/demo/stories/AccordionStory.tsx

@@ -15,8 +15,10 @@ import {
   useAccordion
 } from '@zendeskgarden/container-accordion';
 
-interface IComponentProps extends IUseAccordionReturnValue {
-  sections: number[];
+type ISectionValue = number;
+
+interface IComponentProps<T = ISectionValue> extends IUseAccordionReturnValue<T> {
+  sections: IUseAccordionProps<T>['sections'];
 }
 
 const Component = ({
@@ -28,18 +30,17 @@ const Component = ({
   getPanelProps
 }: IComponentProps) => (
   <div style={{ width: 300 }}>
-    {sections.map((section, index) => {
-      const disabled = disabledSections.indexOf(index) !== -1;
-      const hidden = expandedSections.indexOf(index) === -1;
+    {sections.map((value, index) => {
+      const disabled = disabledSections.indexOf(value) !== -1;
+      const hidden = expandedSections.indexOf(value) === -1;
 
       return (
-        <div key={section}>
-          <div {...getHeaderProps({ ariaLevel: 2 })}>
+        <div key={value}>
+          <div {...getHeaderProps({ 'aria-level': 2 })}>
             <button
               {...getTriggerProps({
-                index,
+                value,
                 role: null,
-                tabIndex: null,
                 disabled
               })}
               className="text-left w-full"
@@ -50,7 +51,7 @@ const Component = ({
           </div>
           <section
             {...getPanelProps({
-              index,
+              value,
               role: null,
               hidden
             })}
@@ -65,38 +66,33 @@ const Component = ({
   </div>
 );
 
-interface IProps extends IUseAccordionProps {
-  sections: number[];
-}
-
-const Container = ({ sections, ...props }: IProps) => (
+const Container = (props: IAccordionContainerProps<ISectionValue>) => (
   <AccordionContainer {...props}>
-    {containerProps => <Component sections={sections} {...containerProps} />}
+    {/* eslint-disable-next-line react/destructuring-assignment */}
+    {containerProps => <Component sections={props.sections} {...containerProps} />}
   </AccordionContainer>
 );
 
-const Hook = ({ sections, ...props }: IProps) => {
+const Hook = (props: IUseAccordionProps<ISectionValue>) => {
   const hookProps = useAccordion(props);
 
-  return <Component sections={sections} {...hookProps} />;
+  // eslint-disable-next-line react/destructuring-assignment
+  return <Component sections={props.sections} {...hookProps} />;
 };
 
-interface IArgs extends IAccordionContainerProps {
+interface IArgs extends IAccordionContainerProps<ISectionValue> {
   as: 'hook' | 'container';
-  sections: number;
 }
 
-export const AccordionStory: Story<IArgs> = ({ as, sections, ...props }: IArgs) => {
+export const AccordionStory: Story<IArgs> = ({ as, ...props }: IArgs) => {
   const Accordion = () => {
-    const _sections = Array.from({ length: sections }, (_, index) => index);
-
     switch (as) {
       case 'container':
-        return <Container sections={_sections} {...props} />;
+        return <Container {...props} />;
 
       case 'hook':
       default:
-        return <Hook sections={_sections} {...props} />;
+        return <Hook {...props} />;
     }
   };
 

packages/accordion/demo/stories/data.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+export const SECTIONS = ['section-1', 'section-2', 'section-3', 'section-4', 'section-5'];

packages/accordion/package.json

@@ -21,8 +21,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@zendeskgarden/container-utilities": "^1.0.8",
-    "react-uid": "^2.2.0"
+    "@zendeskgarden/container-utilities": "^1.0.8"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",