@lumx/react 3.1.1 → 3.1.3-alpha.0

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

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

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

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

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

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

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

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

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

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