refactor(expandcollapse): Add ability to disable panels

telus · Nov 6, 2017 · 9e16914 · 9e16914
1 parent 5b2c369
commit 9e16914
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 6 deletions.
diff --git a/src/components/ExpandCollapse/ExpandCollapse.jsx b/src/components/ExpandCollapse/ExpandCollapse.jsx
@@ -9,6 +9,8 @@ import { isEqual } from '../../utils/sets'
 import PanelWrapper from './PanelWrapper/PanelWrapper'
 import Panel from './Panel/Panel'
 
+import styles from './ExpandCollapse.modules.scss'
+
 class ExpandCollapse extends React.Component {
   constructor(props) {
     super(props)
@@ -53,16 +55,17 @@ class ExpandCollapse extends React.Component {
     const { children, ...rest } = this.props
 
     return (
-      <div {...safeRest(rest)}>
+      <div {...safeRest(rest)} className={styles.base}>
         {React.Children.map(children, (panel, index) => {
-          const { id, header, subtext, onToggle } = panel.props
+          const { id, header, subtext, disabled, onToggle } = panel.props
 
           return (
             <PanelWrapper
               panelId={id}
               panelHeader={header}
               panelSubtext={subtext}
               panelOnToggle={onToggle}
+              panelDisabled={disabled}
               open={this.state.panels.has(id)}
               last={index === React.Children.count(children) - 1}
               onClick={() => this.togglePanel(id)}

diff --git a/src/components/ExpandCollapse/ExpandCollapse.md b/src/components/ExpandCollapse/ExpandCollapse.md
@@ -51,3 +51,16 @@ const trigger = () => {
   </ExpandCollapse.Panel>
 </ExpandCollapse>
 ```
+
+### Disabled
+
+```
+<ExpandCollapse>
+  <ExpandCollapse.Panel id="panel-30" header="First panel title" disabled>
+    First panel
+  </ExpandCollapse.Panel>
+  <ExpandCollapse.Panel id="panel-31" header="Second panel title" subtext="Some subtext">
+    Second panel
+  </ExpandCollapse.Panel>
+</ExpandCollapse>
+```
diff --git a/src/components/ExpandCollapse/ExpandCollapse.modules.scss b/src/components/ExpandCollapse/ExpandCollapse.modules.scss
@@ -0,0 +1,5 @@
+@import '../../scss/settings/colours';
+
+.base {
+  background-color: $color-white;
+}
diff --git a/src/components/ExpandCollapse/Panel/Panel.jsx b/src/components/ExpandCollapse/Panel/Panel.jsx
@@ -8,13 +8,15 @@ Panel.propTypes = {
   id: PropTypes.string.isRequired,
   header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   subtext: PropTypes.string,
+  disabled: PropTypes.bool,
   onToggle: PropTypes.func,
   children: PropTypes.node.isRequired,
 }
 
 Panel.defaultProps = {
   subtext: undefined,
-  onToggle: undefined
+  disabled: false,
+  onToggle: undefined,
 }
 
 export default Panel
diff --git a/src/components/ExpandCollapse/PanelWrapper/PanelWrapper.jsx b/src/components/ExpandCollapse/PanelWrapper/PanelWrapper.jsx
@@ -13,6 +13,8 @@ import Reveal from '../../Animation/Reveal'
 import Translate from '../../Animation/Translate'
 import Panel from '../Panel/Panel'
 
+import joinClassNames from '../../../utils/joinClassNames'
+
 import styles from './PanelWrapper.modules.scss'
 
 class PanelWrapper extends React.Component {
@@ -80,7 +82,15 @@ class PanelWrapper extends React.Component {
   }
 
   render() {
-    const { panelId, panelHeader, panelSubtext, last, onClick, children } = this.props
+    const {
+      panelId,
+      panelHeader,
+      panelSubtext,
+      panelDisabled,
+      last,
+      onClick,
+      children,
+    } = this.props
 
     return (
       <div data-testid={panelId}>
@@ -90,13 +100,13 @@ class PanelWrapper extends React.Component {
           onClick={onClick}
           onMouseEnter={this.mouseEnter}
           onMouseLeave={this.mouseLeave}
-          dangerouslyAddClassName={styles.header}
+          dangerouslyAddClassName={joinClassNames(styles.header, panelDisabled && styles.disabled)}
+          disabled={panelDisabled}
         >
           <Box vertical={3}>
             {/* padding */}
             <Flexbox direction="row">
               <Box right={3}>
-                {' '}
                 {/* margin */}
                 <Translate timeout={300} in={this.state.hover} direction="y" length="0.25rem">
                   {() => <DecorativeIcon symbol="caretDown" variant="primary" />}
@@ -134,6 +144,7 @@ PanelWrapper.propTypes = {
   panelHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   panelSubtext: PropTypes.string,
   panelOnToggle: PropTypes.func,
+  panelDisabled: PropTypes.bool,
   open: PropTypes.bool,
   last: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
@@ -142,6 +153,7 @@ PanelWrapper.propTypes = {
 
 PanelWrapper.defaultProps = {
   panelSubtext: undefined,
+  panelDisabled: false,
   panelOnToggle: undefined,
   open: false,
 }

diff --git a/src/components/ExpandCollapse/PanelWrapper/PanelWrapper.modules.scss b/src/components/ExpandCollapse/PanelWrapper/PanelWrapper.modules.scss
@@ -1,4 +1,11 @@
+@import '../../../scss/settings/colours';
+
 .header {
   width: 100%;
   text-align: left;
 }
+
+.disabled {
+  background-color: $color-athens-grey;
+  cursor: default;
+}
diff --git a/src/components/ExpandCollapse/__tests__/ExpandCollapse.spec.jsx b/src/components/ExpandCollapse/__tests__/ExpandCollapse.spec.jsx
@@ -4,6 +4,7 @@ import { shallow, mount } from 'enzyme'
 import Reveal from '../../Animation/Reveal'
 import Translate from '../../Animation/Translate'
 import Text from '../../Typography/Text/Text'
+import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon'
 import ExpandCollapse from '../ExpandCollapse'
 
 describe('ExpandCollapse', () => {
@@ -178,6 +179,29 @@ describe('ExpandCollapse', () => {
     })
   })
 
+  describe('disabled panels', () => {
+    it('are rendered in a disabled treatment', () => {
+      const { findPanelHeader } = doMount(
+        <ExpandCollapse>{aPanel({ id: 'panel-1', disabled: true })}</ExpandCollapse>
+      )
+
+      const panelHeader = findPanelHeader('panel-1')
+      expect(panelHeader).toHaveClassName('disabled')
+      expect(panelHeader).toBeDisabled()
+      expect(panelHeader.find(DecorativeIcon)).not.toBePresent()
+    })
+
+    it('are not able to be opened', () => {
+      const { clickPanel, findPanel } = doMount(
+        <ExpandCollapse>{aPanel({ id: 'panel-1', disabled: true })}</ExpandCollapse>
+      )
+
+      clickPanel('panel-1')
+
+      expectPanelToBeClosed(findPanel('panel-1'))
+    })
+  })
+
   it('passes additional attributes to the element', () => {
     const expandCollapse = doShallow({ id: 'the-id', 'data-some-attr': 'some value' })
 

diff --git a/src/components/ExpandCollapse/__tests__/__snapshots__/ExpandCollapse.spec.jsx.snap b/src/components/ExpandCollapse/__tests__/__snapshots__/ExpandCollapse.spec.jsx.snap
@@ -10,6 +10,7 @@ exports[`ExpandCollapse renders 1`] = `
   }
 >
   <div
+    className="base"
     onToggle={undefined}
     open={
       Array [
@@ -22,6 +23,7 @@ exports[`ExpandCollapse renders 1`] = `
       last={true}
       onClick={[Function]}
       open={true}
+      panelDisabled={false}
       panelHeader="Panel title"
       panelId="panel-1"
       panelOnToggle={undefined}
@@ -41,12 +43,14 @@ exports[`ExpandCollapse renders 1`] = `
         <Clickable
           dangerouslyAddClassName="header"
           dangerouslyAddStyle={undefined}
+          disabled={false}
           onClick={[Function]}
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
           <button
             className="clickable header"
+            disabled={false}
             onClick={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
@@ -243,6 +247,7 @@ exports[`ExpandCollapse renders 1`] = `
                         className="base baseFont color"
                       >
                         <Panel
+                          disabled={false}
                           header="Panel title"
                           id="panel-1"
                           onToggle={undefined}