feat(ToggleContent): Add ToggleContent component (#583)

react/ToggleContent/ToggleContent.demo.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ToggleContent from './ToggleContent';
+import Text from '../Text/Text';
+import Card from '../Card/Card';
+import Section from '../Section/Section';
+
+const longText = (
+  <Text>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae nulla
+    venenatis purus placerat sodales. Aenean ipsum metus, imperdiet eu iaculis
+    at, sollicitudin sed felis. Mauris faucibus risus at ex facilisis volutpat.
+    Integer volutpat ullamcorper velit at mattis. Cras ultrices vestibulum
+    egestas. Vivamus sollicitudin metus nec nulla ullamcorper ultrices vitae in
+    est. Maecenas scelerisque turpis ac ultrices convallis. Integer maximus
+    libero augue, sit amet maximus risus interdum in. Praesent congue feugiat
+    consequat. Suspendisse feugiat mauris non dui aliquet suscipit.
+  </Text>
+);
+
+const mediumText = (
+  <Text>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae nulla
+    venenatis purus placerat sodales. Aenean ipsum metus, imperdiet eu iaculis
+    at, sollicitudin sed felis. Mauris faucibus risus at ex facilisis volutpat.
+    Integer volutpat ullamcorper velit.
+  </Text>
+);
+
+const shortText = (
+  <Text>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae nulla
+    venenatis purus placerat sodales.
+  </Text>
+);
+
+const ToggleContentContainer = ({ component: DemoComponent, componentProps }) => (
+  <Card style={{ width: 500 }}>
+    <Section>
+      <Text>
+        This is just a normal Text component before the ToggleContent component, click below to show more!
+      </Text>
+      <DemoComponent {...componentProps} />
+    </Section>
+  </Card>
+);
+
+ToggleContentContainer.propTypes = {
+  component: PropTypes.any,
+  componentProps: PropTypes.object.isRequired
+};
+
+export default {
+  route: '/toggle-content',
+  title: 'Toggle Content',
+  category: 'Layout',
+  component: ToggleContent,
+  container: ToggleContentContainer,
+  initialProps: {
+    id: 'toggle-content',
+    children: longText
+  },
+  options: [
+    {
+      label: 'Text',
+      type: 'radio',
+      states: [
+        {
+          label: 'Long text',
+          transformProps: props => ({
+            ...props,
+            children: longText
+          })
+        },
+        {
+          label: 'Medium text',
+          transformProps: props => ({
+            ...props,
+            children: mediumText
+          })
+        },
+        {
+          label: 'Short text',
+          transformProps: props => ({
+            ...props,
+            children: shortText
+          })
+        }
+      ]
+    },
+    {
+      label: 'labels',
+      type: 'checklist',
+      states: [
+        {
+          label: 'Alternative labels',
+          transformProps: props => ({
+            ...props,
+            expandLabel: 'Tell me more!',
+            collapseLabel: 'Go away'
+          })
+        }
+      ]
+    }
+  ]
+};

react/ToggleContent/ToggleContent.js

@@ -0,0 +1,77 @@
+// @flow
+import React, { PureComponent } from 'react';
+import Button from '../Button/Button';
+import TextLink from '../TextLink/TextLink';
+
+type Props = {|
+  id: string,
+  children: React$Element<*>,
+  expandLabel: string,
+  collapseLabel: string,
+  onShowMore?: Function
+|};
+
+type State = {|
+  showMore: boolean
+|};
+
+class ToggleContent extends PureComponent<Props, State> {
+  static defaultProps = {
+    expandLabel: 'Show content',
+    collapseLabel: 'Hide content'
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      showMore: false
+    };
+  }
+
+  handleShowMore = () => {
+    const { onShowMore } = this.props;
+
+    this.setState(
+      {
+        showMore: !this.state.showMore
+      },
+      () => {
+        if (onShowMore) {
+          onShowMore(this.state.showMore);
+        }
+      }
+    );
+  };
+
+  render() {
+    const {
+      id,
+      children,
+      expandLabel,
+      collapseLabel
+    } = this.props;
+    const { showMore } = this.state;
+
+    return (
+      <div id={id}>
+        <TextLink
+          strong
+          color="transparent"
+          chevron={showMore ? 'up' : 'down'}
+          component={Button}
+          onClick={this.handleShowMore}
+          aria-expanded={showMore}
+          aria-controls={`${id}-content`} >
+          {showMore ? collapseLabel : expandLabel}
+        </TextLink>
+
+        <div id={`${id}-content`} style={!showMore ? { display: 'none' } : {}}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ToggleContent;

react/index.js

@@ -30,6 +30,7 @@ export { default as TextLink } from './TextLink/TextLink';
 export { default as BulletList } from './BulletList/BulletList';
 export { default as Bullet } from './Bullet/Bullet';
 export { default as ReadMore } from './ReadMore/ReadMore';
+export { default as ToggleContent } from './ToggleContent/ToggleContent';
 
 // Layout
 export { default as AsidedLayout } from './AsidedLayout/AsidedLayout';