feat(ExpandCollapse): introduce ExpandCollapse component (#613)

Implementation for the Expand Collapse Section is provided.

The component can be farther used for the "More Information" use-case,
where additional text/components are hidden unless the user clicks
on a link.

Such a per-request rendered content is used for texts exceeding scope of a tooltip or
when the user is expected to copy and paste part of the information.

Author: mareklibra

packages/patternfly-3/patternfly-react/less/expand-collapse.less

@@ -0,0 +1,27 @@
+.expand-collapse-pf {
+  .expand-collapse-pf-link-container {
+    display: flex;
+  }
+
+  .btn.btn-link {
+    &:focus {
+      outline: none;
+    }
+    .fa,
+    .pficon {
+      color: initial;
+      font-size: 14px;
+      margin-right: 5px;
+      width: 10px;
+    }
+  }
+
+  .expand-collapse-pf-separator {
+    flex: 1;
+    height: 1px;
+    margin-top: 12px;
+    &.bordered {
+      border-top: 1px solid @color-pf-black-300;
+    }
+  }
+}

packages/patternfly-3/patternfly-react/less/patternfly-react.less

@@ -13,3 +13,5 @@
 @import 'verticalnavdivider';
 @import 'treeview';
 @import 'pagination';
+@import 'expand-collapse';
+

packages/patternfly-3/patternfly-react/sass/patternfly-react/_expand-collapse.scss

@@ -0,0 +1,27 @@
+.expand-collapse-pf {
+  .expand-collapse-pf-link-container {
+    display: flex;
+  }
+
+  .btn.btn-link {
+    &:focus {
+      outline: none;
+    }
+    .fa,
+    .pficon {
+      color: initial;
+      font-size: 14px;
+      margin-right: 5px;
+      width: 10px;
+    }
+  }
+
+  .expand-collapse-pf-separator {
+    flex: 1;
+    height: 1px;
+    margin-top: 12px;
+    &.bordered {
+      border-top: 1px solid $color-pf-black-300;
+    }
+  }
+}

packages/patternfly-3/patternfly-react/sass/patternfly-react/_patternfly-react.scss

@@ -13,3 +13,5 @@
 @import 'verticalnavdivider';
 @import 'treeview';
 @import 'pagination';
+@import 'expand-collapse';
+

packages/patternfly-3/patternfly-react/src/components/ExpandCollapse/ExpandCollapse.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+
+import { ALIGN_LEFT, ALIGN_CENTER, ALIGN_TYPES } from './constants';
+
+class ExpandCollapse extends React.Component {
+  state = { expanded: false, mirroredExpanded: false };
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (prevState.mirroredExpanded !== nextProps.expanded) {
+      return {
+        expanded: nextProps.expanded,
+        mirroredExpanded: nextProps.expanded
+      };
+    }
+    return null;
+  }
+
+  onClick = () => {
+    this.setState(prevState => ({ expanded: !prevState.expanded }));
+  };
+
+  render() {
+    const { children, textCollapsed, textExpanded, align, className, bordered } = this.props;
+    const { expanded } = this.state;
+
+    const separatorClass = classNames('expand-collapse-pf-separator', { bordered });
+
+    return (
+      <div className={classNames('expand-collapse-pf', className)}>
+        <div className="expand-collapse-pf-link-container">
+          {align === ALIGN_CENTER && <span className={separatorClass} />}
+          <Button bsStyle="link" onClick={this.onClick}>
+            <Icon type="fa" name={expanded ? 'angle-down' : 'angle-right'} />
+            {expanded ? textExpanded : textCollapsed}
+          </Button>
+          <span className={separatorClass} />
+        </div>
+        {this.state.expanded && children}
+      </div>
+    );
+  }
+}
+
+ExpandCollapse.propTypes = {
+  children: PropTypes.any.isRequired,
+  /** Top-level custom class */
+  className: PropTypes.string,
+  /** Text for the link in collapsed state */
+  textCollapsed: PropTypes.string,
+  /** Text for the link in expanded state */
+  textExpanded: PropTypes.string,
+  /** Align the link to the left or center. Default: left. */
+  align: PropTypes.oneOf(ALIGN_TYPES),
+  /** Flag to show a separation border line */
+  bordered: PropTypes.bool,
+  /** Flag to control expansion state */
+  expanded: PropTypes.bool // eslint-disable-line react/no-unused-prop-types
+};
+
+ExpandCollapse.defaultProps = {
+  className: '',
+  textCollapsed: 'Show Advanced Options',
+  textExpanded: 'Hide Advanced Options',
+  align: ALIGN_LEFT,
+  bordered: true,
+  expanded: false
+};
+
+export default ExpandCollapse;

packages/patternfly-3/patternfly-react/src/components/ExpandCollapse/ExpandCollapse.stories.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { defaultTemplate } from 'storybook/decorators/storyTemplates';
+import { storybookPackageName, STORYBOOK_CATEGORY, DOCUMENTATION_URL } from 'storybook/constants/siteConstants';
+import { name } from '../../../package.json';
+import { boolean, select, text, withKnobs } from '@storybook/addon-knobs';
+
+import { ExpandCollapse } from './index';
+import { ALIGN_TYPES } from './constants';
+
+const stories = storiesOf(
+  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Expand Collapse`,
+  module
+);
+stories.addDecorator(withKnobs);
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Expand Collapse',
+    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}expand-collapse-section/`
+  })
+);
+
+stories.add(
+  'ExpandCollapse',
+  withInfo(`This is the ExpandCollapse component.`)(() => (
+    <div style={{ width: '600px', border: '1px solid lightgray' }}>
+      <ExpandCollapse
+        align={select('align', ALIGN_TYPES)}
+        bordered={boolean('bordered', true)}
+        textExpanded={text('textExpanded', 'Hide Advanced Options')}
+        textCollapsed={text('textCollapsed', 'Show Advanced Options')}
+        expanded={boolean('expanded', false)}
+      >
+        <p>Well done! The component takes 100% width by default and aligns the link to the left or center.</p>
+        <p>And other text comes here.</p>
+      </ExpandCollapse>
+    </div>
+  ))
+);

packages/patternfly-3/patternfly-react/src/components/ExpandCollapse/ExpandCollapse.test.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import { mount, render } from 'enzyme';
+
+import ExpandCollapse from './ExpandCollapse';
+import { ALIGN_LEFT, ALIGN_CENTER } from './constants';
+
+test('ExpandCollapse with content', () => {
+  const view = mount(
+    <ExpandCollapse>
+      <div id="content">My text</div>
+    </ExpandCollapse>
+  );
+
+  expect(view.find('#content')).toHaveLength(0);
+  expect(view.find('span.fa-angle-right')).toHaveLength(1);
+  expect(view.find('span.fa-angle-down')).toHaveLength(0);
+  expect(view.find('.btn-link').text()).toEqual('Show Advanced Options');
+
+  const button = view.find('.btn-link');
+  expect(button).toHaveLength(1);
+  button.simulate('click');
+  expect(view.find('#content')).toHaveLength(1);
+  expect(view.find('span.fa-angle-right')).toHaveLength(0);
+  expect(view.find('span.fa-angle-down')).toHaveLength(1);
+  expect(view.find('.btn-link').text()).toEqual('Hide Advanced Options');
+  button.simulate('click');
+  expect(view.find('#content')).toHaveLength(0);
+  expect(view.find('span.fa-angle-right')).toHaveLength(1);
+  expect(view.find('span.fa-angle-down')).toHaveLength(0);
+  expect(view.find('.btn-link').text()).toEqual('Show Advanced Options');
+});
+
+test('localized ExpandCollapse', () => {
+  const view = mount(
+    <ExpandCollapse textCollapsed="Click to expand" textExpanded="Click to collapse">
+      <div id="content">My text</div>
+    </ExpandCollapse>
+  );
+  expect(view).toMatchSnapshot();
+  view.find('.btn-link').simulate('click');
+  expect(view).toMatchSnapshot();
+});
+
+test('aligned ExpandCollapse', () => {
+  const def = render(
+    <ExpandCollapse>
+      <div id="content">My text</div>
+    </ExpandCollapse>
+  );
+  expect(def.find('.expand-collapse-pf-separator')).toHaveLength(1);
+
+  const left = render(
+    <ExpandCollapse align={ALIGN_LEFT}>
+      <div id="content">My text</div>
+    </ExpandCollapse>
+  );
+  expect(left.find('.expand-collapse-pf-separator')).toHaveLength(1);
+
+  const center = render(
+    <ExpandCollapse align={ALIGN_CENTER}>
+      <div id="content">My text</div>
+    </ExpandCollapse>
+  );
+  expect(center.find('.expand-collapse-pf-separator')).toHaveLength(2);
+});
+
+test('ExpandCollapse with separator', () => {
+  const def = render(
+    <ExpandCollapse>
+      <div id="content">My text</div>
+    </ExpandCollapse>
+  );
+  expect(def.find('.expand-collapse-pf-separator.bordered')).toHaveLength(1);
+
+  const noSep = render(
+    <ExpandCollapse bordered={false}>
+      <div id="content">My text</div>
+    </ExpandCollapse>
+  );
+  expect(noSep.find('.expand-collapse-pf-separator')).toHaveLength(1);
+  expect(noSep.find('.expand-collapse-pf-separator.bordered')).toHaveLength(0);
+
+  const center = render(
+    <ExpandCollapse align={ALIGN_CENTER}>
+      <div id="content">My text</div>
+    </ExpandCollapse>
+  );
+  expect(center.find('.expand-collapse-pf-separator.bordered')).toHaveLength(2);
+
+  const centerNoSep = render(
+    <ExpandCollapse align={ALIGN_CENTER} bordered={false}>
+      <div id="content">My text</div>
+    </ExpandCollapse>
+  );
+  expect(centerNoSep.find('.expand-collapse-pf-separator')).toHaveLength(2);
+  expect(centerNoSep.find('.expand-collapse-pf-separator.bordered')).toHaveLength(0);
+});
+
+test('ExpandCollapse with explicit override prop', () => {
+  const view = mount(
+    <ExpandCollapse expanded>
+      <div id="content">My text</div>
+    </ExpandCollapse>
+  );
+
+  expect(view.find('#content')).toHaveLength(1);
+  expect(view.find('span.fa-angle-right')).toHaveLength(0);
+  expect(view.find('span.fa-angle-down')).toHaveLength(1);
+  expect(view.find('.btn-link').text()).toEqual('Hide Advanced Options');
+});