feat(component): introduce the pf4 switch component

fix #728

Author: rh-gvincent

packages/patternfly-4/react-core/src/components/Switch/Switch.d.ts

@@ -0,0 +1,17 @@
+import { HTMLProps, FormEvent, ReactNode } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface SwitchProps extends Omit<HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'> {
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  onChange?(checked: boolean, event: FormEvent<HTMLInputElement>): void;
+  id?: string;
+  'aria-label': string;
+  labelLeft?: string;
+  labelRight?: string;
+  className?: string;
+}
+
+declare const Switch: React.SFC<SwitchProps>;
+
+export default Switch;

packages/patternfly-4/react-core/src/components/Switch/Switch.docs.js

@@ -0,0 +1,13 @@
+import { Switch } from '@patternfly/react-core';
+import SimpleSwitch from './examples/SimpleSwitch';
+import NoLabelSwitch from './examples/NoLabelSwitch';
+import DisabledSwitch from './examples/DisabledSwitch';
+import UncontrolledSwitch from './examples/UncontrolledSwitch';
+
+export default {
+  title: 'Switch',
+  components: {
+    Switch
+  },
+  examples: [SimpleSwitch, NoLabelSwitch, DisabledSwitch, UncontrolledSwitch]
+};

packages/patternfly-4/react-core/src/components/Switch/Switch.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import styles from '@patternfly/patternfly-next/components/Switch/switch.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import { getUniqueId } from '../../internal/util';
+
+const propTypes = {
+  /** id for the label. */
+  id: PropTypes.string,
+  /** Additional classes added to the Switch */
+  className: PropTypes.string,
+  /** Text value for the label on the left */
+  labelLeft: PropTypes.string,
+  /** Text value for the label on the right */
+  labelRight: PropTypes.string,
+  /** Flag to show if the Switch is checked. */
+  isChecked: PropTypes.bool,
+  /** Flag to show if the Switch is disabled. */
+  isDisabled: PropTypes.bool,
+  /** A callback for when the Switch selection changes. (isChecked, event) => {} */
+  onChange: PropTypes.func,
+  /** Adds accessible text to the Switch. */
+  'aria-label': props => {
+    if (!props.id && !props['aria-label']) {
+      return new Error('Switch requires either an id or aria-label to be specified');
+    }
+  }
+};
+
+const defaultProps = {
+  id: '',
+  className: '',
+  labelLeft: '',
+  labelRight: '',
+  isChecked: true,
+  isDisabled: false,
+  onChange: () => undefined,
+  'aria-label': ''
+};
+
+class Switch extends React.Component {
+  id = this.props.id || getUniqueId();
+
+  render() {
+    const { id, className, labelLeft, labelRight, isChecked, isDisabled, onChange, ...props } = this.props;
+    return (
+      <label className={css(styles.switch, className)} htmlFor={this.id}>
+        <input
+          {...props}
+          id={this.id}
+          className={css(styles.switchInput)}
+          type="checkbox"
+          onChange={event => onChange(event.currentTarget.checked, event)}
+          checked={isChecked}
+          disabled={isDisabled}
+        />
+        {labelLeft && (
+          <span className={css(styles.switchLabel, styles.modifiers.off)} aria-hidden="true">
+            {labelLeft}
+          </span>
+        )}
+        <span className={css(styles.switchToggle)} />
+        {labelRight && (
+          <span className={css(styles.switchLabel, styles.modifiers.on)} aria-hidden="true">
+            {labelRight}
+          </span>
+        )}
+      </label>
+    );
+  }
+}
+
+Switch.propTypes = propTypes;
+Switch.defaultProps = defaultProps;
+
+export default Switch;

packages/patternfly-4/react-core/src/components/Switch/Switch.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Switch from './Switch';
+
+const props = {
+  onChange: jest.fn(),
+  checked: false
+};
+
+test('switch label for attribute equals input id attribute', () => {
+  const view = shallow(<Switch id="foo" labelLeft="Off" labelRight="On" />);
+  expect(view.find('input').prop('id')).toBe('foo');
+  expect(view.find('label').prop('htmlFor')).toBe('foo');
+});
+
+test('switch label id is auto generated', () => {
+  const view = shallow(<Switch labelLeft="Off" labelRight="On" aria-label="..." />);
+  expect(view.find('input').prop('id')).toBeDefined();
+});
+
+test('switch is checked', () => {
+  const view = shallow(<Switch id="switch-is-checked" labelLeft="Off" labelRight="On" isChecked />);
+  expect(view).toMatchSnapshot();
+});
+
+test('switch is not checked', () => {
+  const view = shallow(<Switch id="switch-is-not-checked" labelLeft="Off" labelRight="On" isChecked={false} />);
+  expect(view).toMatchSnapshot();
+});
+
+test('no label switch is checked', () => {
+  const view = shallow(<Switch id="no-label-switch-is-checked" isChecked />);
+  expect(view).toMatchSnapshot();
+});
+
+test('no label switch is not checked', () => {
+  const view = shallow(<Switch id="no-label-switch-is-not-checked" isChecked={false} />);
+  expect(view).toMatchSnapshot();
+});
+
+test('switch is checked and disabled', () => {
+  const view = shallow(<Switch id="switch-is-checked-and-disabled" isChecked isDisabled />);
+  expect(view).toMatchSnapshot();
+});
+
+test('switch is not checked and disabled', () => {
+  const view = shallow(<Switch id="switch-is-not-checked-and-disabled" isChecked={false} isDisabled />);
+  expect(view).toMatchSnapshot();
+});
+
+test('switch passes value and event to onChange handler', () => {
+  const newValue = true;
+  const event = {
+    currentTarget: { checked: newValue }
+  };
+  const view = shallow(<Switch id="onChange-switch" {...props} />);
+  view.find('input').simulate('change', event);
+  expect(props.onChange).toBeCalledWith(newValue, event);
+});