@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/src/fields/checkbox-field/checkbox-field.jsx

@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { filterDataAttributes } from '../../internal-index';
-import styles from './checkbox-field.module.css';
-
-const CheckboxField = (props) => {
-  // Pass only `data-*` props
-  const dataAttributes = filterDataAttributes(props);
-
-  return (
-    <label
-      className={classnames(props.labelClassName, styles['custom-check'], {
-        [styles.disabled]: props.disabled,
-      })}
-      {...dataAttributes}
-    >
-      <input
-        type="checkbox"
-        className={classnames(props.inputClassName, styles['input-checkbox'], {
-          [styles.disabled]: props.disabled,
-        })}
-        name={props.name}
-        checked={props.checked}
-        onChange={props.onChange}
-        disabled={props.disabled}
-      />
-      <span className={styles['check-element']} />
-      {props.label ? (
-        <span className={styles['check-text']}>{props.label}</span>
-      ) : null}
-    </label>
-  );
-};
-CheckboxField.displayName = 'CheckboxField';
-CheckboxField.propTypes = {
-  name: PropTypes.string.isRequired,
-  checked: PropTypes.bool.isRequired,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  onChange: PropTypes.func,
-  labelClassName: PropTypes.string,
-  inputClassName: PropTypes.string,
-  disabled: PropTypes.bool,
-};
-
-CheckboxField.defaultProps = {
-  onChange: () => {},
-  disabled: false,
-};
-
-export default CheckboxField;

package/src/fields/checkbox-field/checkbox-field.module.css

@@ -1,40 +0,0 @@
-/* Custom checkbox */
-
-.custom-check {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.check-element {
-  background: url('./radio-check-icons.png') 0 0;
-  flex: 0 1 auto;
-  display: block;
-  height: 18px;
-  width: 18px;
-}
-
-.check-text {
-  margin-left: var(--spacing-s);
-  flex: 1 0 auto;
-}
-
-.custom-check:hover .check-element {
-  background-position: -24px 0;
-}
-
-.input-checkbox {
-  display: none;
-}
-
-.input-checkbox:checked ~ .check-element {
-  background-position: -48px 0;
-}
-
-.disabled {
-  cursor: not-allowed !important;
-}
-
-.custom-check:hover.disabled .check-element {
-  background-position: 0 0 !important;
-}

package/src/fields/checkbox-field/checkbox-field.spec.js

@@ -1,67 +0,0 @@
-import { shallow } from 'enzyme';
-import { createMountOptions } from '@commercetools-local/test-utils';
-import CheckboxField from './checkbox-field';
-
-const createTestProps = (props) => ({
-  name: 'foo',
-  checked: false,
-  label: undefined,
-  onChange: jest.fn(),
-
-  ...props,
-});
-
-describe('rendering', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = createTestProps({ label: 'Foo' });
-    wrapper = shallow(<CheckboxField {...props} />, createMountOptions());
-  });
-
-  it('should render one `label`', () => {
-    expect(wrapper).toRenderElementTimes('label', 1);
-  });
-
-  it('should render one `input`', () => {
-    expect(wrapper).toRenderElementTimes('input', 1);
-  });
-
-  it('should render and `input` of `checkbox` type', () => {
-    expect(wrapper.find('input')).toHaveProp('type', 'checkbox');
-  });
-
-  it('should render two `spans` (one for text other for the element)', () => {
-    expect(wrapper).toRenderElementTimes('span', 2);
-  });
-
-  it('contains text of `props` label', () => {
-    expect(wrapper).toHaveText(props.label);
-  });
-});
-
-describe('callbacks', () => {
-  describe('`onChange`', () => {
-    let props;
-    let wrapper;
-    beforeEach(() => {
-      props = createTestProps();
-      wrapper = shallow(<CheckboxField {...props} />, createMountOptions());
-    });
-
-    describe('when clicking', () => {
-      beforeEach(() => {
-        wrapper.find('input').simulate('change');
-      });
-
-      it('invokes `onChange`', () => {
-        expect(props.onChange).toHaveBeenCalledTimes(1);
-      });
-
-      it('should set the checked property to `false`', () => {
-        expect(wrapper.find('input')).toHaveProp('checked', false);
-      });
-    });
-  });
-});

package/src/fields/checkbox-field/index.js

@@ -1 +0,0 @@
-export { default } from './checkbox-field';

package/src/fields/expandable-field/expandable-field.jsx

@@ -1,93 +0,0 @@
-import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
-import classnames from 'classnames';
-import {
-  AngleDownIcon,
-  AngleUpIcon,
-  FlatButton,
-} from '@commercetools-frontend/ui-kit';
-import validatedInput, {
-  VALIDATOR_REQUIRED,
-} from '../../components/validated-input/validated-input';
-import { filterDataAttributes } from '../../internal-index';
-
-import ThrottledField from '../throttled-field';
-import styles from './expandable-field.module.css';
-import messages from './messages';
-
-export const RequiredThrottledField = validatedInput(ThrottledField, [
-  VALIDATOR_REQUIRED,
-]);
-
-export const ExpandableField = (props) => {
-  const {
-    value,
-    onToggle,
-    isExpanded,
-    onChange,
-    onBlurValue,
-    definition,
-    disabled,
-  } = props;
-
-  // Filter out only `data-*` props
-  const dataProps = filterDataAttributes(props);
-  const fieldProps = {
-    as: 'textarea',
-    value,
-    onChange,
-    onBlurValue,
-    autoSize: isExpanded,
-    disabled,
-    ...dataProps,
-  };
-  const isRequired = definition && definition.isRequired;
-
-  return (
-    <div
-      className={classnames(
-        styles['expandable-field'],
-        props.expandableFieldModalClassName
-      )}
-    >
-      {isRequired ? (
-        <RequiredThrottledField {...fieldProps} />
-      ) : (
-        <ThrottledField {...fieldProps} />
-      )}
-
-      {value ? (
-        <FlatButton
-          onClick={onToggle}
-          icon={isExpanded ? <AngleUpIcon /> : <AngleDownIcon />}
-          tone="primary"
-          label={props.intl.formatMessage(
-            isExpanded ? messages.collapse : messages.expand
-          )}
-        />
-      ) : null}
-    </div>
-  );
-};
-
-ExpandableField.displayName = 'ExpandableField';
-ExpandableField.defaultProps = {
-  definition: { isRequired: false },
-  disabled: false,
-};
-ExpandableField.propTypes = {
-  value: PropTypes.any,
-  isExpanded: PropTypes.bool,
-  onToggle: PropTypes.func,
-  definition: PropTypes.shape({
-    isRequired: PropTypes.bool,
-  }),
-  expandableFieldModalClassName: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onBlurValue: PropTypes.func,
-  disabled: PropTypes.bool,
-  intl: PropTypes.shape({ formatMessage: PropTypes.func.isRequired })
-    .isRequired,
-};
-
-export default injectIntl(ExpandableField);

package/src/fields/expandable-field/expandable-field.module.css

@@ -1,3 +0,0 @@
-.expandable-field {
-  /* @TODO: Investigate what this is */
-}

package/src/fields/expandable-field/expandable-field.spec.js

@@ -1,68 +0,0 @@
-import { shallow } from 'enzyme';
-import { FlatButton } from '@commercetools-frontend/ui-kit';
-import { intlMock } from '@commercetools-local/test-utils';
-import ThrottledField from '../throttled-field';
-import { ExpandableField, RequiredThrottledField } from './expandable-field';
-
-const createTestProps = (props) => ({
-  value: undefined,
-  isExpanded: false,
-  onToggle: jest.fn(),
-  definition: {
-    isRequired: false,
-  },
-  onChange: jest.fn(),
-  onBlurValue: jest.fn(),
-  intl: intlMock,
-  ...props,
-});
-
-describe('rendering', () => {
-  it('is a expandable field with no validation', () => {
-    const props = createTestProps();
-    const wrapper = shallow(<ExpandableField {...props} />);
-
-    expect(wrapper.find(ThrottledField).prop('as')).toBe('textarea');
-  });
-
-  it('is a expandable field with no expand control available', () => {
-    const props = createTestProps();
-    const wrapper = shallow(<ExpandableField {...props} />);
-
-    expect(wrapper.find(FlatButton)).toHaveLength(0);
-  });
-
-  it('is a expandable field with validation', () => {
-    const props = createTestProps({
-      value: 'foo',
-      definition: { isRequired: true },
-    });
-    const wrapper = shallow(<ExpandableField {...props} />);
-
-    expect(wrapper.find(RequiredThrottledField).prop('as')).toBe('textarea');
-  });
-
-  it('is a expandable field with one expand control available', () => {
-    const props = createTestProps({
-      value: 'foo',
-      definition: { isRequired: true },
-    });
-    const wrapper = shallow(<ExpandableField {...props} />);
-
-    expect(wrapper).toRender(FlatButton);
-  });
-});
-
-describe('callbacks', () => {
-  it('calls onToggle function when toggle event', () => {
-    const props = createTestProps({
-      value: 'foo',
-      definition: { isRequired: true },
-      onToggle: jest.fn(),
-    });
-    const wrapper = shallow(<ExpandableField {...props} />);
-
-    wrapper.find(FlatButton).prop('onClick')();
-    expect(props.onToggle).toHaveBeenCalledTimes(1);
-  });
-});

package/src/fields/expandable-field/index.js

@@ -1 +0,0 @@
-export { default } from './expandable-field';

package/src/fields/expandable-field/messages.js

@@ -1,14 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  expand: {
-    id: 'ExpandControl.expand',
-    description: 'The label to expand a text attribute.',
-    defaultMessage: 'Expand',
-  },
-  collapse: {
-    id: 'ExpandControl.collapse',
-    description: 'The label to collapse a text attribute.',
-    defaultMessage: 'Collapse',
-  },
-});

package/src/fields/label-range/index.js

@@ -1 +0,0 @@
-export { default } from './label-range';

package/src/fields/label-range/label-range.jsx

@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-import { defineMessages, FormattedMessage } from 'react-intl';
-import styles from './label-range.module.css';
-
-export const messages = defineMessages({
-  from: {
-    id: 'LabelRange.from',
-    description: 'The label for "from" range',
-    defaultMessage: 'From',
-  },
-  to: {
-    id: 'LabelRange.to',
-    description: 'The label for "to" range',
-    defaultMessage: 'To',
-  },
-});
-
-export const LabelRange = ({ type }) => (
-  <label className={styles.label}>
-    <FormattedMessage {...messages[type]} />
-  </label>
-);
-LabelRange.displayName = 'LabelRange';
-LabelRange.propTypes = {
-  type: PropTypes.oneOf(['from', 'to']).isRequired,
-};
-
-export default LabelRange;

package/src/fields/label-range/label-range.module.css

@@ -1,4 +0,0 @@
-.label {
-  font-size: 0.9rem;
-  font-weight: bold;
-}

package/src/fields/label-range/label-range.spec.js

@@ -1,28 +0,0 @@
-import { shallow } from 'enzyme';
-import { FormattedMessage } from 'react-intl';
-import LabelRange, { messages } from './label-range';
-
-const createTestProps = (props) => ({
-  ...props,
-});
-
-const labelTypes = ['from', 'to'];
-labelTypes.forEach((type) => {
-  describe(`rendering for label type ${type}`, () => {
-    const props = createTestProps({ type });
-    const wrapper = shallow(<LabelRange {...props} />);
-    it(`has only one child for type ${type}`, () => {
-      expect(wrapper.children()).toHaveLength(1);
-    });
-
-    it(`has only one label field for type ${type}`, () => {
-      expect(wrapper.type()).toBe('label');
-    });
-
-    it(`has a formatted message for the ${type}`, () => {
-      const formattedMessage = wrapper.childAt(0);
-      expect(formattedMessage.type()).toBe(FormattedMessage);
-      expect(formattedMessage.props().id).toBe(messages[type].id);
-    });
-  });
-});

package/src/fields/label-required/index.js

@@ -1,2 +0,0 @@
-export { default } from './label-required';
-export * from './label-required';

package/src/fields/label-required/label-required.jsx

@@ -1,25 +0,0 @@
-import { defineMessages, FormattedMessage } from 'react-intl';
-import RequiredIndicator from '../../components/required-indicator';
-
-const messages = defineMessages({
-  title: {
-    id: 'LabelRequired.title',
-    description:
-      'The title of the label, used for displaying message ' +
-      'for required fields',
-    defaultMessage: 'Mandatory fields are marked with an asterisk ({star}).',
-  },
-});
-
-export const LabelRequired = () => (
-  <FormattedMessage
-    {...messages.title}
-    values={{
-      star: <RequiredIndicator />,
-    }}
-  />
-);
-
-LabelRequired.displayName = 'LabelRequired';
-
-export default LabelRequired;

package/src/fields/localized-field/index.js

@@ -1 +0,0 @@
-export { default } from './localized-field';