@commercetools-frontend/experimental-components 0.0.2

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

@@ -0,0 +1,40 @@
+/* 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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