@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

@@ -1,68 +0,0 @@
-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

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

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

@@ -1,62 +0,0 @@
-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

@@ -1,53 +0,0 @@
-.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

@@ -1,142 +0,0 @@
-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

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

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

@@ -1,120 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

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

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

@@ -1,45 +0,0 @@
-## 🚧 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

@@ -1,35 +0,0 @@
-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

@@ -1,31 +0,0 @@
-/** 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;
-}