[UI Framework] Reactify kuiCollapseButton

[PopradiArpad]

Feature

KuiCollapseButton React component with tests.

[elasticmachine]

Can one of the admins verify this patch?

[cjcenizal]

Beautiful! Just had a couple small suggestions.

[cjcenizal]

I think this is a case where we can export an object, like in the button.js file:

export {
  DIRECTIONS,
  KuiCollapseButton,
};

[PopradiArpad]

You are right, DIRECTIONS is part of the interface, even if it's not used directly by the user.
Ok.

Probably later if the UI framework is more stable this interface can be extended/replaced by named collapse buttons like KuiCollapseButtonUp (the same idea as I said about KuiEventSymbol). It's a shorter syntax but not so flexible than this.

[cjcenizal]

And then we can import DIRECTIONS above, and loop through them here (note that I also changed the test name):

      DIRECTIONS.forEach(direction => {
        describe(direction, () => {
          test(`renders the ${direction} class`, () => {
            const component = <KuiCollapseButton direction={direction} { ...requiredProps }/>;
            expect(render(component)).toMatchSnapshot();
          });
        });
      });

[PopradiArpad]

Ok

[cjcenizal]

Can we create a special map here, so it's easier to grep for the specific class names we're using? This is similar to the pattern used in button.js.

import React, {
  PropTypes,
} from 'react';
import classNames from 'classnames';

const DIRECTIONS = [
  'down',
  'up',
  'left',
  'right',
];

const directionToClassNameMap = {
  down: 'fa-chevron-circle-down',
  up: 'fa-chevron-circle-up',
  left: 'fa-chevron-circle-left',
  right: 'fa-chevron-circle-right',
};

export const KuiCollapseButton = ({ className, direction, ...rest }) => {
  const classes = classNames('kuiCollapseButton', className);
  const childClasses = classNames('kuiIcon', direction[direction]);

  return (<button
            type="button"
            className={classes}
            {...rest}
          >
            <div className={childClasses}/>
          </button>);
};

KuiCollapseButton.propTypes = {
  className: PropTypes.string,
  direction: PropTypes.oneOf(DIRECTIONS).isRequired
};

[PopradiArpad]

Ok. See next comment.

[cjcenizal]

jenkins, test this

[cjcenizal]

This is fantastic! Thanks @PopradiArpad.

[PopradiArpad]

@cjcenizal Thanks for review and merge!