refactor(expandcollapse): Add ability to disable the top divider

telus · Nov 10, 2017 · 626b63c · 626b63c
1 parent 708abda
commit 626b63c
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 89 deletions.
diff --git a/src/components/ExpandCollapse/Accordion/Accordion.jsx b/src/components/ExpandCollapse/Accordion/Accordion.jsx
@@ -62,6 +62,10 @@ Accordion.propTypes = {
    * A panel identifier to programmatically open.
    */
   open: PropTypes.string,
+  /**
+   * Whether or not to show the divider above the first panel.
+   */
+  topDivider: PropTypes.bool,
   /**
    * A callback function to be invoked when any panel is opened or closed.
    *
@@ -76,6 +80,7 @@ Accordion.propTypes = {
 
 Accordion.defaultProps = {
   open: undefined,
+  topDivider: true,
   onToggle: undefined,
 }
 

diff --git a/src/components/ExpandCollapse/Accordion/__tests__/__snapshots__/Accordion.spec.jsx.snap b/src/components/ExpandCollapse/Accordion/__tests__/__snapshots__/Accordion.spec.jsx.snap
@@ -1,17 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Accordion renders a closed accordion 1`] = `
-<Accordion>
+<Accordion
+  topDivider={true}
+>
   <Panels
     isPanelOpen={[Function]}
     togglePanel={[Function]}
+    topDivider={true}
   >
     <div
       className="base"
     >
       <HairlineDivider
         gradient={false}
-        key="1"
         vertical={false}
       >
         <hr
@@ -217,17 +219,16 @@ exports[`Accordion renders a closed accordion 1`] = `
               </div>
             </Transition>
           </Reveal>
+          <HairlineDivider
+            gradient={false}
+            vertical={false}
+          >
+            <hr
+              className="horizontalThin"
+            />
+          </HairlineDivider>
         </div>
       </PanelWrapper>
-      <HairlineDivider
-        gradient={false}
-        key="2"
-        vertical={false}
-      >
-        <hr
-          className="horizontalThin"
-        />
-      </HairlineDivider>
     </div>
   </Panels>
 </Accordion>
@@ -236,19 +237,20 @@ exports[`Accordion renders a closed accordion 1`] = `
 exports[`Accordion renders an open accordion 1`] = `
 <Accordion
   open="panel-1"
+  topDivider={true}
 >
   <Panels
     isPanelOpen={[Function]}
     open="panel-1"
     togglePanel={[Function]}
+    topDivider={true}
   >
     <div
       className="base"
       open="panel-1"
     >
       <HairlineDivider
         gradient={false}
-        key="1"
         vertical={false}
       >
         <hr
@@ -454,17 +456,16 @@ exports[`Accordion renders an open accordion 1`] = `
               </div>
             </Transition>
           </Reveal>
+          <HairlineDivider
+            gradient={false}
+            vertical={false}
+          >
+            <hr
+              className="horizontalThin"
+            />
+          </HairlineDivider>
         </div>
       </PanelWrapper>
-      <HairlineDivider
-        gradient={false}
-        key="2"
-        vertical={false}
-      >
-        <hr
-          className="horizontalThin"
-        />
-      </HairlineDivider>
     </div>
   </Panels>
 </Accordion>

diff --git a/src/components/ExpandCollapse/ExpandCollapse.jsx b/src/components/ExpandCollapse/ExpandCollapse.jsx
@@ -73,6 +73,10 @@ ExpandCollapse.propTypes = {
    * A list of panel identifiers to programmatically open.
    */
   open: PropTypes.array,
+  /**
+   * Whether or not to show the divider above the first panel.
+   */
+  topDivider: PropTypes.bool,
   /**
    * A callback function to be invoked when any panel is opened or closed.
    *
@@ -87,6 +91,7 @@ ExpandCollapse.propTypes = {
 
 ExpandCollapse.defaultProps = {
   open: [],
+  topDivider: true,
   onToggle: undefined,
 }
 

diff --git a/src/components/ExpandCollapse/PanelWrapper/PanelWrapper.jsx b/src/components/ExpandCollapse/PanelWrapper/PanelWrapper.jsx
@@ -6,6 +6,7 @@ import Box from '../../Box/Box'
 import Clickable from '../../Clickable/Clickable'
 import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon'
 import Text from '../../Typography/Text/Text'
+import HairlineDivider from '../../Dividers/HairlineDivider/HairlineDivider'
 import DimpleDivider from '../../Dividers/DimpleDivider/DimpleDivider'
 import Reveal from '../../Animation/Reveal'
 import Translate from '../../Animation/Translate'
@@ -149,6 +150,8 @@ class PanelWrapper extends React.Component {
             </div>
           )}
         </Reveal>
+
+        <HairlineDivider />
       </div>
     )
   }

diff --git a/src/components/ExpandCollapse/Panels.jsx b/src/components/ExpandCollapse/Panels.jsx
@@ -10,48 +10,33 @@ import Panel from './Panel/Panel'
 
 import styles from './ExpandCollapse.modules.scss'
 
-const getPanelWrappers = (isPanelOpen, togglePanel, children) =>
-  React.Children.map(children, panel => {
-    const { id, header, subtext, tertiaryText, disabled, onToggle } = panel.props
-
-    return (
-      <PanelWrapper
-        panelId={id}
-        panelHeader={header}
-        panelSubtext={subtext}
-        panelTertiaryText={tertiaryText}
-        panelOnToggle={onToggle}
-        panelDisabled={disabled}
-        open={isPanelOpen(id)}
-        onClick={() => togglePanel(id)}
-      >
-        {panel}
-      </PanelWrapper>
-    )
-  })
-
-const wrapWithDividers = panels =>
-  panels.map((panel, index) => {
-    const last = index === panels.length - 1
-
-    return [
-      <HairlineDivider key={1} />,
-      panel,
-      last && <HairlineDivider key={2} />,
-    ]
-  })
-
-const Panels = ({ isPanelOpen, togglePanel, children, ...rest }) => {
-  const panels = getPanelWrappers(isPanelOpen, togglePanel, children)
-
-  return (
-    <div {...safeRest(rest)} className={styles.base}>
-      {wrapWithDividers(panels)}
-    </div>
-  )
-}
+const Panels = ({ topDivider, isPanelOpen, togglePanel, children, ...rest }) => (
+  <div {...safeRest(rest)} className={styles.base}>
+    {topDivider && <HairlineDivider />}
+
+    {React.Children.map(children, panel => {
+      const { id, header, subtext, tertiaryText, disabled, onToggle } = panel.props
+
+      return (
+        <PanelWrapper
+          panelId={id}
+          panelHeader={header}
+          panelSubtext={subtext}
+          panelTertiaryText={tertiaryText}
+          panelOnToggle={onToggle}
+          panelDisabled={disabled}
+          open={isPanelOpen(id)}
+          onClick={() => togglePanel(id)}
+        >
+          {panel}
+        </PanelWrapper>
+      )
+    })}
+  </div>
+)
 
 Panels.propTypes = {
+  topDivider: PropTypes.bool.isRequired,
   isPanelOpen: PropTypes.func.isRequired,
   togglePanel: PropTypes.func.isRequired,
   children: childrenOfType(Panel).isRequired,

diff --git a/src/components/ExpandCollapse/__tests__/ExpandCollapse.spec.jsx b/src/components/ExpandCollapse/__tests__/ExpandCollapse.spec.jsx
@@ -256,15 +256,28 @@ describe('ExpandCollapse', () => {
     })
   })
 
-  it('surrounds all panels with dividers', () => {
-    const { expandCollapse } = doMount(
-      <ExpandCollapse>
-        {aPanel()}
-        {aPanel()}
-      </ExpandCollapse>
-    )
+  describe('panel dividers', () => {
+    it('surrounds all the panels', () => {
+      const { expandCollapse } = doMount(
+        <ExpandCollapse>
+          {aPanel()}
+          {aPanel()}
+        </ExpandCollapse>
+      )
 
-    expect(expandCollapse.find(HairlineDivider).length).toBe(3)
+      expect(expandCollapse.find(HairlineDivider).length).toBe(3)
+    })
+
+    it('can turn off the top divider', () => {
+      const { expandCollapse } = doMount(
+        <ExpandCollapse topDivider={false}>
+          {aPanel()}
+          {aPanel()}
+        </ExpandCollapse>
+      )
+
+      expect(expandCollapse.find(HairlineDivider).length).toBe(2)
+    })
   })
 
   it('passes additional attributes to the element', () => {

diff --git a/src/components/ExpandCollapse/__tests__/__snapshots__/ExpandCollapse.spec.jsx.snap b/src/components/ExpandCollapse/__tests__/__snapshots__/ExpandCollapse.spec.jsx.snap
@@ -3,19 +3,20 @@
 exports[`ExpandCollapse renders a closed panel 1`] = `
 <ExpandCollapse
   open={Array []}
+  topDivider={true}
 >
   <Panels
     isPanelOpen={[Function]}
     open={Array []}
     togglePanel={[Function]}
+    topDivider={true}
   >
     <div
       className="base"
       open={Array []}
     >
       <HairlineDivider
         gradient={false}
-        key="1"
         vertical={false}
       >
         <hr
@@ -221,17 +222,16 @@ exports[`ExpandCollapse renders a closed panel 1`] = `
               </div>
             </Transition>
           </Reveal>
+          <HairlineDivider
+            gradient={false}
+            vertical={false}
+          >
+            <hr
+              className="horizontalThin"
+            />
+          </HairlineDivider>
         </div>
       </PanelWrapper>
-      <HairlineDivider
-        gradient={false}
-        key="2"
-        vertical={false}
-      >
-        <hr
-          className="horizontalThin"
-        />
-      </HairlineDivider>
     </div>
   </Panels>
 </ExpandCollapse>
@@ -244,6 +244,7 @@ exports[`ExpandCollapse renders an open panel 1`] = `
       "panel-1",
     ]
   }
+  topDivider={true}
 >
   <Panels
     isPanelOpen={[Function]}
@@ -253,6 +254,7 @@ exports[`ExpandCollapse renders an open panel 1`] = `
       ]
     }
     togglePanel={[Function]}
+    topDivider={true}
   >
     <div
       className="base"
@@ -264,7 +266,6 @@ exports[`ExpandCollapse renders an open panel 1`] = `
     >
       <HairlineDivider
         gradient={false}
-        key="1"
         vertical={false}
       >
         <hr
@@ -470,17 +471,16 @@ exports[`ExpandCollapse renders an open panel 1`] = `
               </div>
             </Transition>
           </Reveal>
+          <HairlineDivider
+            gradient={false}
+            vertical={false}
+          >
+            <hr
+              className="horizontalThin"
+            />
+          </HairlineDivider>
         </div>
       </PanelWrapper>
-      <HairlineDivider
-        gradient={false}
-        key="2"
-        vertical={false}
-      >
-        <hr
-          className="horizontalThin"
-        />
-      </HairlineDivider>
     </div>
   </Panels>
 </ExpandCollapse>