@commercetools-frontend/experimental-components 0.0.2

package/src/components/buttons/button-close/button-close.spec.js

@@ -0,0 +1,68 @@
+import { shallow } from 'enzyme';
+import { ButtonClose } from './button-close';
+
+const createTestProps = (props) => ({
+  onClick: jest.fn(),
+  handleMouseOver: jest.fn(),
+  handleMouseOut: jest.fn(),
+  isMouseOver: false,
+  ...props,
+});
+
+describe('rendering', () => {
+  describe('render component', () => {
+    let wrapper;
+    beforeEach(() => {
+      wrapper = shallow(<ButtonClose {...createTestProps()} />);
+    });
+    it('should output correct tree', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render the close icon', () => {
+      expect(wrapper).toRender('CloseIcon');
+    });
+  });
+});
+
+describe('callbacks', () => {
+  describe('when clicking close icon', () => {
+    let props;
+    let wrapper;
+    beforeEach(() => {
+      props = createTestProps();
+      wrapper = shallow(<ButtonClose {...props} />);
+      wrapper.find({ className: 'button-close-container' }).simulate('click');
+    });
+
+    it('should trigger the onClick on ButtonClose', () => {
+      expect(props.onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('when hovering the icon', () => {
+    let props;
+    let wrapper;
+    beforeEach(() => {
+      props = createTestProps({ isMouseOver: true });
+      wrapper = shallow(<ButtonClose {...props} />);
+    });
+
+    it('should set the green color for the icon on hovering', () => {
+      expect(wrapper.find('CloseIcon')).toHaveProp('color', 'primary');
+    });
+  });
+
+  describe('when no hovering the icon', () => {
+    let props;
+    let wrapper;
+    beforeEach(() => {
+      props = createTestProps();
+      wrapper = shallow(<ButtonClose {...props} />);
+    });
+
+    it('should set the green color for the icon on hovering', () => {
+      expect(wrapper.find('CloseIcon')).toHaveProp('color', 'solid');
+    });
+  });
+});

package/src/components/buttons/button-close/index.js

@@ -0,0 +1 @@
+export { default } from './button-close';

package/src/components/buttons/button-group/button-group.jsx

@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+import classnames from 'classnames';
+import { filterDataAttributes } from '../../../internal-index';
+import Button from '../button';
+import customStyles from './button-group.module.css';
+
+export class ButtonGroup extends PureComponent {
+  render() {
+    return (
+      <div
+        className={customStyles['btn-group']}
+        {...filterDataAttributes(this.props)}
+      >
+        {this.props.options.map((option, index) => (
+          <Button
+            data-track-component={`Button-${option.label}`}
+            data-testid={`group-button-${option.value}`}
+            data-track-event="click"
+            type="button"
+            data-track-label={option.label || option.value}
+            key={index}
+            isDisabled={option.disabled || this.props.value === option.value}
+            onClick={() => this.props.onClick(option.value)}
+            className={classnames({
+              [customStyles.active]:
+                !option.disabled && this.props.value === option.value,
+              [customStyles.disabled]: option.disabled,
+            })}
+            aria-label={option.icon ? option.label : null}
+            {...filterDataAttributes(this.props)}
+          >
+            {option.icon ? (
+              <div className={customStyles['icon-container']}>
+                {option.icon}
+              </div>
+            ) : (
+              <span>{option.label}</span>
+            )}
+          </Button>
+        ))}
+      </div>
+    );
+  }
+}
+ButtonGroup.displayName = 'ButtonGroup';
+ButtonGroup.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      // When using an icon, the label will be used any for accessibility purposes
+      // (it will be rendered but not visible)
+      label: PropTypes.string.isRequired,
+      icon: PropTypes.node,
+      value: PropTypes.string,
+      disabled: PropTypes.bool,
+    })
+  ).isRequired,
+  onClick: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export default ButtonGroup;

package/src/components/buttons/button-group/button-group.module.css

@@ -0,0 +1,53 @@
+.btn-group {
+  position: relative;
+  display: flex;
+  vertical-align: middle;
+}
+
+.btn-group button {
+  position: relative;
+  float: left;
+  background: var(--color-surface);
+  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
+}
+
+.btn-group button + button {
+  border-left: solid 1px var(--color-neutral-90);
+}
+
+.btn-group > button:first-of-type {
+  z-index: 2;
+}
+
+.btn-group > button:not(:first-of-type):not(:last-child) {
+  border-radius: 0;
+}
+
+.btn-group > button:first-of-type:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.btn-group > button:last-child:not(:first-of-type) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.btn-group button.active,
+.btn-group button:hover {
+  background: var(--color-neutral-90);
+  opacity: 1;
+}
+
+.btn-group button.disabled {
+  background: var(--color-neutral-90);
+  color: var(--color-neutral-60);
+}
+
+.btn-group button i {
+  font-size: 1.538rem;
+}
+
+.icon-container {
+  display: flex;
+}

package/src/components/buttons/button-group/button-group.spec.js

@@ -0,0 +1,142 @@
+import { shallow } from 'enzyme';
+import ButtonGroup from './button-group';
+
+const TestComponent = () => <div>{'some test'}</div>;
+
+const getButtonClass = (isDisabled, propsValue, optionValue) => do {
+  if (isDisabled) {
+    ('disabled');
+  } else if (propsValue === optionValue) {
+    ('active');
+  } else {
+    ('');
+  }
+};
+
+const createTestProps = (props) => ({
+  options: [
+    {
+      label: 'AND',
+      value: 'and',
+      className: '',
+    },
+    {
+      label: 'OR',
+      value: 'or',
+      className: '',
+    },
+  ],
+  value: '',
+  onClick: jest.fn(),
+  ...props,
+});
+
+describe('rendering', () => {
+  describe('with icons', () => {
+    let props;
+    let wrapper;
+    beforeEach(() => {
+      props = createTestProps({
+        options: [
+          {
+            icon: <TestComponent />,
+            value: 'and',
+            className: '',
+            label: 'Action 1',
+          },
+          {
+            icon: <TestComponent />,
+            value: 'or',
+            className: '',
+            label: 'Action 2',
+          },
+        ],
+      });
+      wrapper = shallow(<ButtonGroup {...props} />);
+    });
+
+    it('should render the icons', () => {
+      expect(wrapper).toRenderElementTimes('TestComponent', 2);
+      const buttons = wrapper.find('Button');
+      expect(buttons.at(0).prop('aria-label')).toBe('Action 1');
+      expect(buttons.at(1).prop('aria-label')).toBe('Action 2');
+    });
+  });
+  describe('non forced disabled buttons', () => {
+    let props;
+    let wrapper;
+    beforeEach(() => {
+      props = createTestProps();
+      wrapper = shallow(<ButtonGroup {...props} />);
+    });
+    it('should contain the number of toggle buttons defined (in props', () => {
+      expect(wrapper).toRenderElementTimes('Button', props.options.length);
+    });
+    it('should contain a list of Button with props', () => {
+      const button = wrapper.find('Button');
+      props.options.forEach((option, index) => {
+        expect(button.at(index).prop('isDisabled')).toBe(
+          option.disabled || props.value === option.value
+        );
+        expect(button.at(index).prop('className')).toBe(
+          !option.disabled && props.value === option.value ? 'active' : ''
+        );
+      });
+    });
+  });
+  describe('forced disable buttons', () => {
+    let props;
+    let wrapper;
+    beforeEach(() => {
+      props = createTestProps({
+        options: [
+          {
+            label: 'AND',
+            value: 'and',
+            className: '',
+            disabled: true,
+          },
+          {
+            label: 'OR',
+            value: 'or',
+            className: '',
+            disabled: false,
+          },
+        ],
+      });
+      wrapper = shallow(<ButtonGroup {...props} />);
+    });
+    it('should contain the number of toggle buttons defined (in props', () => {
+      expect(wrapper).toRenderElementTimes('Button', props.options.length);
+    });
+    it('should contain a list of Button with props', () => {
+      const button = wrapper.find('Button');
+      props.options.forEach((option, index) => {
+        expect(button.at(index).prop('isDisabled')).toBe(
+          option.disabled || props.value === option.value
+        );
+        expect(button.at(index).prop('className')).toBe(
+          getButtonClass(option.disabled, props.value, option.value)
+        );
+      });
+    });
+  });
+});
+
+describe('callbacks', () => {
+  let props;
+  let wrapper;
+  beforeEach(() => {
+    props = createTestProps({ onClick: jest.fn() });
+    wrapper = shallow(<ButtonGroup {...props} />);
+    wrapper.find('Button').at(0).simulate('click', { index: 0 });
+  });
+
+  it('should call onClick method when clicking button', () => {
+    expect(props.onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call the onClick method with the proper value', () => {
+    expect(props.onClick).toHaveBeenCalledWith(props.options[0].value);
+  });
+});

package/src/components/buttons/button-group/index.js

@@ -0,0 +1 @@
+export { default } from './button-group';

package/src/components/buttons/button-typed/button-typed.jsx

@@ -0,0 +1,120 @@
+import PropTypes from 'prop-types';
+import { isValidElement } from 'react';
+import classnames from 'classnames';
+import { filterDataAttributes } from '../../../internal-index';
+import Button from '../button';
+import styles from '../button/button.module.css';
+
+/**
+ * Button-Typed
+ *
+ * This module generates button components based on a name, type and several
+ * default options.
+ *
+ * Each button has a TYPE (save, confirm, cancel, add) and may have a STYLE
+ * (default, alternative)
+ *
+ * Each button may or may not have a default label and icon. If no default label
+ * is provided, then label becomes a required prop. If no default icon is
+ * provided then icon is still an optional prop.
+ *
+ * If the option hasAlternativeStyle is true, then the `style` prop may be either
+ * "default" or "alternative", otherwise the style prop will default to "default"
+ * and can not be set to anything else.
+ */
+
+export default function (name, options) {
+  const {
+    defaultLabel,
+    defaultIcon,
+    type,
+    hasAlternativeStyle,
+    buttonWrapperClassName,
+  } = options;
+  const validTypes = ['save', 'cancel', 'confirm', 'add'];
+
+  if (!validTypes.includes(type))
+    throw new Error('Invalid button type provided to ButtonTyped');
+
+  const ButtonTyped = (props) => {
+    const {
+      label,
+      onClick,
+      isDisabled,
+      fullWidth,
+      style,
+      icon,
+      url,
+      className,
+    } = props;
+
+    const isAlternativeStyle = hasAlternativeStyle && style === 'alternative';
+    const hasIcon = defaultIcon || icon;
+
+    const classNames = classnames(
+      { [styles.full]: fullWidth },
+      isAlternativeStyle ? styles[`${type}-alt`] : styles[type],
+      className
+    );
+    const computedLabel = label || defaultLabel;
+    const dataAttrs = filterDataAttributes(props);
+
+    return (
+      <Button
+        onClick={isDisabled ? null : onClick}
+        url={url}
+        isDisabled={isDisabled}
+        className={classNames}
+        {...dataAttrs}
+      >
+        {/* this wrapper div is necessary because the html button element can't
+        be a flex container in some browsers */}
+        <div className={buttonWrapperClassName}>
+          {isValidElement(computedLabel) ? (
+            computedLabel
+          ) : (
+            <span>{computedLabel}</span>
+          )}
+          {hasIcon ? icon || defaultIcon : null}
+        </div>
+      </Button>
+    );
+  };
+
+  ButtonTyped.displayName = name;
+
+  ButtonTyped.propTypes = {
+    label: defaultLabel
+      ? PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+      : PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+    url: PropTypes.string,
+    onClick: PropTypes.func,
+    isDisabled: PropTypes.bool,
+    fullWidth: PropTypes.bool,
+    icon: PropTypes.element,
+    className: PropTypes.string,
+    style: (props) => {
+      if (!hasAlternativeStyle && props.style !== 'default')
+        return new Error(
+          `Invalid prop for ${name}. 'style' is not a valid property`
+        );
+      if (!['default', 'alternative'].includes(props.style))
+        return new Error(
+          `Invalid prop for ${name}.` +
+            "'style' must be either 'default' or 'alternative'"
+        );
+
+      return null;
+    },
+  };
+
+  ButtonTyped.defaultProps = {
+    isDisabled: false,
+    fullWidth: false,
+    style: 'default',
+    icon: null,
+    className: null,
+  };
+
+  return ButtonTyped;
+}

package/src/components/buttons/button-typed/button-typed.spec.js

@@ -0,0 +1,95 @@
+import { shallow } from 'enzyme';
+import ButtonTyped from './button-typed';
+
+const getButtonOptions = (options) => ({
+  defaultLabel: 'label',
+  defaultIcon: null,
+  type: 'confirm',
+  hasAlternativeStyle: false,
+  ...options,
+});
+
+const createTestProps = (props) => ({
+  onClick: jest.fn(),
+  ...props,
+});
+
+describe('render', () => {
+  describe('basic component', () => {
+    const name = 'ButtonTest';
+    const options = getButtonOptions();
+    const typedButton = ButtonTyped(name, options);
+
+    it('is a function', () => {
+      expect(typeof typedButton).toBe('function');
+    });
+
+    it('has a label', () => {
+      expect(typedButton.displayName).toBe(name);
+    });
+
+    it('has prop displayName', () => {
+      expect('displayName' in typedButton).toBeDefined();
+    });
+
+    it('has prop propTypes', () => {
+      expect('propTypes' in typedButton).toBeDefined();
+    });
+
+    it('has prop defaultProps', () => {
+      expect('defaultProps' in typedButton).toBeDefined();
+    });
+  });
+
+  describe('simple component', () => {
+    const options = getButtonOptions();
+    const TypedButton = ButtonTyped('ButtonTest', options);
+    const wrapper = shallow(<TypedButton {...createTestProps()} />);
+
+    it('uses default label', () => {
+      expect(wrapper.find('span').text()).toBe(options.defaultLabel);
+    });
+  });
+
+  describe('icon component', () => {
+    const options = getButtonOptions({ defaultIcon: <i /> });
+    const TypedButton = ButtonTyped('ButtonTest', options);
+    const wrapper = shallow(<TypedButton {...createTestProps()} />);
+
+    it('uses default icon', () => {
+      expect(wrapper).toRender('i');
+    });
+  });
+});
+
+describe('restrictions', () => {
+  const name = 'ButtonTest';
+  const typedButtonNoAlternate = ButtonTyped(name, getButtonOptions());
+  const typedButtonAlternate = ButtonTyped(
+    name,
+    getButtonOptions({
+      hasAlternativeStyle: true,
+    })
+  );
+  const noAlternateValidation = typedButtonNoAlternate.propTypes.style({
+    style: 'alternative',
+  });
+  const alternateValidation = typedButtonAlternate.propTypes.style({
+    style: 'alternative',
+  });
+
+  it('only allows style props if `hasAlternativeStyle` is true', () => {
+    expect(noAlternateValidation).toBeInstanceOf(Error);
+    expect(alternateValidation).toBeNull();
+  });
+});
+
+describe('types', () => {
+  it('rejects invalid types', () => {
+    const options = getButtonOptions({ type: 'invalidType' });
+
+    expect(() => {
+      ButtonTyped('ButtonTest', options);
+    }).toThrow();
+  });
+});

package/src/components/buttons/button-typed/index.js

@@ -0,0 +1 @@
+export { default } from './button-typed';

package/src/components/buttons/file-input/README.md

@@ -0,0 +1,45 @@
+## 🚧 Missing things:
+
+> In order to have solid component in the UI Kit, the following list will help to bring a better abstraction to this component:
+
+- Should probably accept a configuration of action type (primary, secondary, ghost etc)
+- Does not display chosen file in any way (path, thumbnail)
+- Does not show whether a file was chosen or not
+  does not have validation states by itself
+- Does not have a design from the design team (task created https://jira.commercetools.com/browse/MC-1958)
+
+# Inputs: File Input
+
+## Usage
+
+```js
+import FileInput from '@commercetools-frontend/ui-kit/buttons/file-input';
+```
+
+#### Description
+
+File selection inputs are similar to primary action buttons, but they are essentially an input used to select files (e.g to be uploaded) from the user's local machine.
+
+#### Usage
+
+```js
+<FileInput allowMultiple={true} onChange={this.handleChange}>
+  <FormattedMessage {...messages.uploadImageText} />
+</FileInput>
+```
+
+#### Properties
+
+| Props           | Type      | Required | Values | Default                          | Description                                             |
+| --------------- | --------- | :------: | ------ | -------------------------------- | ------------------------------------------------------- |
+| `onChange`      | `func`    |    ✅    | -      | -                                | What the button will trigger after user selects file(s) |
+| `children`      | `node`    |    ✅    | -      | -                                | Renders as button's text                                |
+| `acceptTypes`   | `string`  |    ✅    | -      | `image/png,image/jpeg,image/gif` | Renders as HTML `accept` property                       |
+| `name`          | `string`  |    -     | -      |                                  | Used as HTML `name` property                            |
+| `allowMultiple` | `boolean` |    -     | -      | `false`                          | Allows multiple files upload                            |
+
+#### Where to use
+
+Main Functions and use cases are:
+
+- When uploading a file from local machine _example: variant images upload_

package/src/components/buttons/file-input/file-input.jsx

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import styles from './file-input.module.css';
+import messages from './messages';
+
+const FileInput = (props) => (
+  <label>
+    <span className={styles.button}>
+      <input
+        className={styles.input}
+        type="file"
+        accept={props.acceptTypes}
+        name={props.name}
+        onChange={props.onChange}
+        multiple={props.allowMultiple}
+      />
+      {props.children}
+    </span>
+  </label>
+);
+
+FileInput.displayName = 'FileInput';
+FileInput.propTypes = {
+  children: PropTypes.node,
+  onChange: PropTypes.func.isRequired,
+  acceptTypes: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  allowMultiple: PropTypes.bool,
+};
+FileInput.defaultProps = {
+  children: <FormattedMessage {...messages.chooseFile} />,
+  allowMultiple: false,
+  acceptTypes: 'image/png,image/jpeg,image/gif',
+};
+export default FileInput;

package/src/components/buttons/file-input/file-input.module.css

@@ -0,0 +1,31 @@
+/** Button */
+
+.button {
+  display: inline-flex;
+  background-color: var(--color-surface);
+  color: var(--color-solid);
+  font-size: 1rem;
+  align-items: center;
+  transition: background-color var(--transition-linear-80ms);
+  box-shadow: var(--shadow-7);
+  padding: 0 var(--spacing-m);
+  height: var(--big-button-height);
+  border-radius: var(--border-radius-6);
+}
+
+.button:hover,
+.button:focus {
+  cursor: pointer;
+  box-shadow: var(--shadow-8);
+}
+
+.button:active {
+  box-shadow: var(--shadow-9);
+  background-color: var(--color-surface);
+}
+
+.input {
+  visibility: hidden;
+  width: 1px;
+  height: 1px;
+}