@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/button/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button> Props should forward any CSS class 1`] = `
+<ButtonRoot
+  className="component component--is-tested"
+  emphasis="high"
+  size="m"
+  theme="light"
+  variant="button"
+/>
+`;
+
+exports[`<Button> Props should use the given props for class names 1`] = `
+<ButtonRoot
+  className="lumx-button--has-left-icon lumx-button--has-right-icon"
+  emphasis="high"
+  size="m"
+  theme="light"
+  variant="button"
+>
+  <Icon
+    icon="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+  />
+  <Icon
+    icon="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+  />
+</ButtonRoot>
+`;
+
+exports[`<Button> Snapshots and structure should render button with label 1`] = `
+<ButtonRoot
+  className=""
+  emphasis="high"
+  size="m"
+  theme="light"
+  variant="button"
+>
+  <span>
+    Label
+  </span>
+</ButtonRoot>
+`;
+
+exports[`<Button> Snapshots and structure should render button with label and icons 1`] = `
+<ButtonRoot
+  className="lumx-button--has-left-icon lumx-button--has-right-icon"
+  emphasis="high"
+  size="m"
+  theme="light"
+  variant="button"
+>
+  <Icon
+    icon="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+  />
+  <span>
+    Label
+  </span>
+  <Icon
+    icon="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+  />
+</ButtonRoot>
+`;
+
+exports[`<Button> Snapshots and structure should render button with label and left icon 1`] = `
+<ButtonRoot
+  className="lumx-button--has-left-icon"
+  emphasis="high"
+  size="m"
+  theme="light"
+  variant="button"
+>
+  <Icon
+    icon="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+  />
+  <span>
+    Label
+  </span>
+</ButtonRoot>
+`;
+
+exports[`<Button> Snapshots and structure should render button with label and right icon 1`] = `
+<ButtonRoot
+  className="lumx-button--has-right-icon"
+  emphasis="high"
+  size="m"
+  theme="light"
+  variant="button"
+>
+  <span>
+    Label
+  </span>
+  <Icon
+    icon="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+  />
+</ButtonRoot>
+`;

package/dist/src/components/button/__snapshots__/ButtonGroup.test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ButtonGroup> Snapshots and structure should render correctly a group button 1`] = `
+<div
+  className="lumx-button-group"
+>
+  <Button
+    emphasis="high"
+    size="m"
+    theme="light"
+  >
+    Label
+  </Button>
+  <IconButton
+    emphasis="high"
+    icon="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+    label="Add"
+    size="m"
+    theme="light"
+  />
+</div>
+`;

package/dist/src/components/button/__snapshots__/ButtonRoot.test.tsx.snap

@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ButtonRoot> Props should be full width 1`] = `
+<ButtonRoot
+  emphasis="high"
+  fullWidth={true}
+  theme="light"
+>
+  <button
+    className="lumx-button lumx-button--color-primary lumx-button--emphasis-high lumx-button--theme-light lumx-button--is-full-width"
+    type="button"
+  />
+</ButtonRoot>
+`;
+
+exports[`<ButtonRoot> Props should not have default color in low or medium emphasis 1`] = `
+<ButtonRoot
+  emphasis="low"
+>
+  <button
+    className="lumx-button lumx-button--color-dark lumx-button--emphasis-low"
+    type="button"
+  />
+</ButtonRoot>
+`;
+
+exports[`<ButtonRoot> Props should use default color 1`] = `
+<ButtonRoot>
+  <button
+    className="lumx-button lumx-button--color-dark"
+    type="button"
+  />
+</ButtonRoot>
+`;
+
+exports[`<ButtonRoot> Props should use given props 1`] = `
+<ButtonRoot
+  color="red"
+  emphasis="high"
+  hasBackground={true}
+  size="s"
+  theme="dark"
+  variant="icon"
+>
+  <div
+    className="lumx-button-wrapper lumx-button-wrapper--variant-icon"
+  >
+    <ButtonRoot
+      color="red"
+      emphasis="high"
+      hasBackground={false}
+      size="s"
+      theme="dark"
+      variant="icon"
+    >
+      <button
+        className="lumx-button lumx-button--color-red lumx-button--emphasis-high lumx-button--size-s lumx-button--theme-dark lumx-button--variant-icon"
+        type="button"
+      />
+    </ButtonRoot>
+  </div>
+</ButtonRoot>
+`;
+
+exports[`<ButtonRoot> Snapshots and structure should render anchor button with label 1`] = `
+<ButtonRoot
+  href="example.com"
+  target="_blank"
+>
+  <a
+    className="lumx-button lumx-button--color-dark"
+    href="example.com"
+    target="_blank"
+  >
+    Label
+  </a>
+</ButtonRoot>
+`;
+
+exports[`<ButtonRoot> Snapshots and structure should render anchor button with wrapper and label 1`] = `
+<ButtonRoot
+  hasBackground={true}
+  href="example.com"
+  target="_blank"
+>
+  <div
+    className="lumx-button-wrapper"
+  >
+    <ButtonRoot
+      color="dark"
+      hasBackground={false}
+      href="example.com"
+      target="_blank"
+    >
+      <a
+        className="lumx-button lumx-button--color-dark"
+        href="example.com"
+        target="_blank"
+      >
+        Label
+      </a>
+    </ButtonRoot>
+  </div>
+</ButtonRoot>
+`;
+
+exports[`<ButtonRoot> Snapshots and structure should render button with label 1`] = `
+<ButtonRoot>
+  <button
+    className="lumx-button lumx-button--color-dark"
+    type="button"
+  >
+    Label
+  </button>
+</ButtonRoot>
+`;
+
+exports[`<ButtonRoot> Snapshots and structure should render button with wrapper and label 1`] = `
+<ButtonRoot
+  hasBackground={true}
+>
+  <div
+    className="lumx-button-wrapper"
+  >
+    <ButtonRoot
+      color="dark"
+      hasBackground={false}
+    >
+      <button
+        className="lumx-button lumx-button--color-dark"
+        type="button"
+      >
+        Label
+      </button>
+    </ButtonRoot>
+  </div>
+</ButtonRoot>
+`;
+
+exports[`<ButtonRoot> Snapshots and structure should render custom link 1`] = `
+<ButtonRoot
+  href="foo"
+  linkAs={[Function]}
+>
+  <CustomLink
+    className="lumx-button lumx-button--color-dark"
+    href="foo"
+  >
+    <a
+      className="lumx-button lumx-button--color-dark"
+      href="foo"
+      style={
+        {
+          "color": "red",
+        }
+      }
+    />
+  </CustomLink>
+</ButtonRoot>
+`;

package/dist/src/components/button/__snapshots__/IconButton.test.tsx.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<IconButton> Props should forward any CSS class 1`] = `
+<Tooltip
+  placement="bottom"
+>
+  <ButtonRoot
+    className="component component--is-tested"
+    emphasis="high"
+    size="m"
+    theme="light"
+    variant="icon"
+  >
+    <Icon />
+  </ButtonRoot>
+</Tooltip>
+`;
+
+exports[`<IconButton> Props should use default props 1`] = `
+<Tooltip
+  placement="bottom"
+>
+  <ButtonRoot
+    emphasis="high"
+    size="m"
+    theme="light"
+    variant="icon"
+  >
+    <Icon />
+  </ButtonRoot>
+</Tooltip>
+`;
+
+exports[`<IconButton> Snapshots and structure should render icon button 1`] = `
+<Tooltip
+  placement="bottom"
+>
+  <ButtonRoot
+    emphasis="high"
+    size="m"
+    theme="light"
+    variant="icon"
+  >
+    <Icon />
+  </ButtonRoot>
+</Tooltip>
+`;
+
+exports[`<IconButton> Snapshots and structure should render icon button with an image 1`] = `
+<Tooltip
+  placement="bottom"
+>
+  <ButtonRoot
+    emphasis="high"
+    size="m"
+    theme="light"
+    variant="icon"
+  >
+    <img
+      alt=""
+      src="http://foo.com"
+    />
+  </ButtonRoot>
+</Tooltip>
+`;
+
+exports[`<IconButton> Snapshots and structure should render icon button with an image if both props are set 1`] = `
+<Tooltip
+  placement="bottom"
+>
+  <ButtonRoot
+    emphasis="high"
+    size="m"
+    theme="light"
+    variant="icon"
+  >
+    <img
+      alt=""
+      src="http://foo.com"
+    />
+  </ButtonRoot>
+</Tooltip>
+`;

package/dist/src/components/button/index.ts

@@ -0,0 +1,4 @@
+export type { BaseButtonProps, ButtonSize } from './ButtonRoot';
+export * from './Button';
+export * from './IconButton';
+export * from './ButtonGroup';

package/dist/src/components/checkbox/Checkbox.stories.tsx

@@ -0,0 +1,37 @@
+import { Checkbox } from '@lumx/react';
+import { text } from '@storybook/addon-knobs';
+import noop from 'lodash/noop';
+import React, { useState } from 'react';
+
+export default { title: 'LumX components/checkbox/Checkbox' };
+
+export const SimpleSelect = ({ theme }: any) => {
+    const [value, setValue] = useState(false);
+    return <Checkbox isChecked={value} label={text('Label', 'My label')} theme={theme} onChange={setValue} />;
+};
+
+export const DisabledSelect = ({ theme }: any) => {
+    return (
+        <Checkbox
+            isChecked={false}
+            label={text('Label', 'My label')}
+            helper={text('Helper', 'You will receive our newsletter each month')}
+            theme={theme}
+            onChange={noop}
+            isDisabled
+        />
+    );
+};
+
+export const WithHelperSelect = ({ theme }: any) => {
+    const [value, setValue] = useState(false);
+    return (
+        <Checkbox
+            isChecked={value}
+            label={text('Label', 'My label')}
+            helper={text('Helper', 'You will receive our newsletter each month')}
+            theme={theme}
+            onChange={setValue}
+        />
+    );
+};

package/dist/src/components/checkbox/Checkbox.test.tsx

@@ -0,0 +1,114 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
+
+import { Checkbox, CheckboxProps } from './Checkbox';
+
+const CLASSNAME = Checkbox.className as string;
+
+type SetupProps = Partial<CheckboxProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
+    const props: any = { id: 'fixedId', ...propsOverride };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(<Checkbox {...props} />);
+
+    return {
+        helper: wrapper.find(`.${CLASSNAME}__helper`),
+        label: wrapper.find(`.${CLASSNAME}__label`),
+        props,
+        wrapper,
+    };
+};
+
+describe(`<${Checkbox.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render correctly', () => {
+            const { wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(wrapper).toExist();
+            expect(wrapper).toHaveClassName(CLASSNAME);
+            expect(wrapper).not.toHaveClassName('lumx-checkbox--is-disabled');
+            expect(wrapper).toHaveClassName('lumx-checkbox--is-unchecked');
+            expect(wrapper.find('input')).toHaveProp('disabled', undefined);
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it('should add a "disabled" and "checked" class names', () => {
+            const { wrapper } = setup({
+                isDisabled: true,
+                isChecked: true,
+            });
+
+            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'disabled', value: true }));
+            expect(wrapper.find('input')).toHaveProp('disabled', true);
+            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'checked', value: true }));
+        });
+
+        it('should use the given props', () => {
+            const { helper, label, wrapper } = setup({
+                helper: 'Test helper',
+                label: 'Test label',
+            });
+
+            expect(helper).toExist();
+            expect(label).toExist();
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        it('should use the given props while passing custom props to input', () => {
+            const { helper, label, wrapper } = setup({
+                helper: 'Test helper',
+                label: 'Test label',
+                inputProps: {
+                    'aria-labelledby': 'labelledby-id',
+                },
+            });
+
+            expect(helper).toExist();
+            expect(label).toExist();
+            expect(wrapper).toMatchSnapshot();
+        });
+    });
+
+    // 3. Test events.
+    describe('Events', () => {
+        const onChange: jest.Mock = jest.fn();
+
+        beforeEach(() => {
+            onChange.mockClear();
+        });
+
+        it('should trigger `onChange` when checkbox is clicked', () => {
+            const { wrapper } = setup({ checked: false, onChange }, false);
+            const checkbox = wrapper.find('input');
+
+            checkbox.simulate('change');
+            expect(onChange).toHaveBeenCalled();
+        });
+    });
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    describe('Conditions', () => {
+        // Nothing to do here.
+    });
+
+    // 5. Test state.
+    describe('State', () => {
+        // Nothing to do here.
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,145 @@
+import React, { useMemo, forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
+
+import classNames from 'classnames';
+import { uid } from 'uid';
+
+import { mdiCheck } from '@lumx/icons';
+
+import { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+/**
+ * Defines the props of the component.
+ */
+export interface CheckboxProps extends GenericProps, HasTheme {
+    /** Helper text. */
+    helper?: string;
+    /** Native input id property. */
+    id?: string;
+    /** Native input ref. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** Whether it is checked or not. */
+    isChecked?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Label text. */
+    label?: ReactNode;
+    /** Native input name property. */
+    name?: string;
+    /** Native input value property. */
+    value?: string;
+    /** On change callback. */
+    onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
+    /** optional props for input */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Checkbox';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<CheckboxProps> = {
+    theme: Theme.light,
+};
+
+/**
+ * Checkbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        checked,
+        className,
+        disabled,
+        helper,
+        id,
+        inputRef,
+        isChecked = checked,
+        isDisabled = disabled,
+        label,
+        name,
+        onChange,
+        theme,
+        value,
+        inputProps = {},
+        ...forwardedProps
+    } = props;
+    const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            onChange(!isChecked, value, name, event);
+        }
+    };
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    isChecked,
+                    isDisabled,
+                    isUnchecked: !isChecked,
+                    prefix: CLASSNAME,
+                    theme,
+                }),
+            )}
+        >
+            <div className={`${CLASSNAME}__input-wrapper`}>
+                <input
+                    ref={inputRef}
+                    type="checkbox"
+                    id={inputId}
+                    className={`${CLASSNAME}__input-native`}
+                    disabled={isDisabled}
+                    tabIndex={isDisabled ? -1 : 0}
+                    name={name}
+                    value={value}
+                    checked={isChecked}
+                    onChange={handleChange}
+                    aria-describedby={helper ? `${inputId}-helper` : undefined}
+                    {...inputProps}
+                />
+
+                <div className={`${CLASSNAME}__input-placeholder`}>
+                    <div className={`${CLASSNAME}__input-background`} />
+
+                    <div className={`${CLASSNAME}__input-indicator`}>
+                        <Icon icon={mdiCheck} />
+                    </div>
+                </div>
+            </div>
+
+            <div className={`${CLASSNAME}__content`}>
+                {label && (
+                    <InputLabel htmlFor={inputId} className={`${CLASSNAME}__label`} theme={theme}>
+                        {label}
+                    </InputLabel>
+                )}
+                {helper && (
+                    <InputHelper id={`${inputId}-helper`} className={`${CLASSNAME}__helper`} theme={theme}>
+                        {helper}
+                    </InputHelper>
+                )}
+            </div>
+        </div>
+    );
+});
+Checkbox.displayName = COMPONENT_NAME;
+Checkbox.className = CLASSNAME;
+Checkbox.defaultProps = DEFAULT_PROPS;