@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/components/progress-tracker/__snapshots__/ProgressTrackerStep.test.tsx.snap

@@ -1,141 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ProgressTrackerStep> Snapshots and structure should render 1`] = `
-<button
-  aria-controls="tab-panel-1"
-  aria-selected={false}
-  className="lumx-progress-tracker-step lumx-progress-tracker-step--is-clickable"
-  id="tab-1"
-  onClick={[Function]}
-  onFocus={[Function]}
-  onKeyPress={[Function]}
-  role="tab"
-  tabIndex={-1}
-  type="button"
->
-  <Icon
-    className="lumx-progress-tracker-step__state"
-    icon="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-    size="s"
-  />
-  <InputLabel
-    className="lumx-progress-tracker-step__label"
-    htmlFor="tab-1"
-    theme="light"
-  >
-    Test Step Label
-  </InputLabel>
-</button>
-`;
-
-exports[`<ProgressTrackerStep> Snapshots and structure should render active erroneous state 1`] = `
-<button
-  aria-controls="tab-panel-3"
-  aria-selected={true}
-  className="lumx-progress-tracker-step lumx-progress-tracker-step--is-active lumx-progress-tracker-step--is-clickable"
-  id="tab-3"
-  onClick={[Function]}
-  onFocus={[Function]}
-  onKeyPress={[Function]}
-  role="tab"
-  tabIndex={0}
-  type="button"
->
-  <Icon
-    className="lumx-progress-tracker-step__state"
-    icon="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z"
-    size="s"
-  />
-  <InputLabel
-    className="lumx-progress-tracker-step__label"
-    htmlFor="tab-3"
-    theme="light"
-  >
-    Test Step Label
-  </InputLabel>
-</button>
-`;
-
-exports[`<ProgressTrackerStep> Snapshots and structure should render active state 1`] = `
-<button
-  aria-controls="tab-panel-3"
-  aria-selected={true}
-  className="lumx-progress-tracker-step lumx-progress-tracker-step--is-active lumx-progress-tracker-step--is-clickable"
-  id="tab-3"
-  onClick={[Function]}
-  onFocus={[Function]}
-  onKeyPress={[Function]}
-  role="tab"
-  tabIndex={0}
-  type="button"
->
-  <Icon
-    className="lumx-progress-tracker-step__state"
-    icon="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z"
-    size="s"
-  />
-  <InputLabel
-    className="lumx-progress-tracker-step__label"
-    htmlFor="tab-3"
-    theme="light"
-  >
-    Test Step Label
-  </InputLabel>
-</button>
-`;
-
-exports[`<ProgressTrackerStep> Snapshots and structure should render complete state 1`] = `
-<button
-  aria-controls="tab-panel-3"
-  aria-selected={false}
-  className="lumx-progress-tracker-step lumx-progress-tracker-step--is-clickable"
-  id="tab-3"
-  onClick={[Function]}
-  onFocus={[Function]}
-  onKeyPress={[Function]}
-  role="tab"
-  tabIndex={-1}
-  type="button"
->
-  <Icon
-    className="lumx-progress-tracker-step__state"
-    icon="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-    size="s"
-  />
-  <InputLabel
-    className="lumx-progress-tracker-step__label"
-    htmlFor="tab-3"
-    theme="light"
-  >
-    Test Step Label
-  </InputLabel>
-</button>
-`;
-
-exports[`<ProgressTrackerStep> Snapshots and structure should render erroneous state 1`] = `
-<button
-  aria-controls="tab-panel-3"
-  aria-selected={false}
-  className="lumx-progress-tracker-step lumx-progress-tracker-step--is-clickable"
-  id="tab-3"
-  onClick={[Function]}
-  onFocus={[Function]}
-  onKeyPress={[Function]}
-  role="tab"
-  tabIndex={-1}
-  type="button"
->
-  <Icon
-    className="lumx-progress-tracker-step__state"
-    icon="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-    size="s"
-  />
-  <InputLabel
-    className="lumx-progress-tracker-step__label"
-    htmlFor="tab-3"
-    theme="light"
-  >
-    Test Step Label
-  </InputLabel>
-</button>
-`;

package/dist/src/components/progress-tracker/__snapshots__/ProgressTrackerStepPanel.test.tsx.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ProgressTrackerStepPanel> Snapshots and structure should render correctly 1`] = `
-<div
-  aria-labelledby="tab-1"
-  className="lumx-step-panel"
-  id="tab-panel-1"
-  role="tabpanel"
-  tabIndex={0}
->
-  Tab panel content
-</div>
-`;
-
-exports[`<ProgressTrackerStepPanel> Snapshots and structure should render isActive state 1`] = `
-<div
-  aria-labelledby="tab-2"
-  className="lumx-step-panel lumx-step-panel--is-active"
-  id="tab-panel-2"
-  role="tabpanel"
-  tabIndex={0}
->
-  Tab panel content
-</div>
-`;

package/dist/src/components/progress-tracker/index.ts

@@ -1,4 +0,0 @@
-export * from './ProgressTrackerProvider';
-export * from './ProgressTracker';
-export * from './ProgressTrackerStep';
-export * from './ProgressTrackerStepPanel';

package/dist/src/components/radio-button/RadioButton.stories.tsx

@@ -1,28 +0,0 @@
-import { RadioButton } from '@lumx/react';
-import { text } from '@storybook/addon-knobs';
-import noop from 'lodash/noop';
-import React from 'react';
-
-export default { title: 'LumX components/radio-button/Radio button' };
-
-export const SimpleRadioButton = ({ theme }: any) => (
-    <RadioButton
-        isChecked={false}
-        label={text('Label', 'Radio button')}
-        name="test1"
-        theme={theme}
-        value="lorem"
-        onChange={noop}
-    />
-);
-
-export const SimpleCheckedRadioButton = ({ theme }: any) => (
-    <RadioButton
-        isChecked
-        label={text('Label', 'Radio button')}
-        name="test1"
-        theme={theme}
-        value="lorem"
-        onChange={noop}
-    />
-);

package/dist/src/components/radio-button/RadioButton.test.tsx

@@ -1,123 +0,0 @@
-import React, { InputHTMLAttributes, LabelHTMLAttributes, 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 { Theme } from '@lumx/react';
-import { RadioButton, RadioButtonProps } from './RadioButton';
-
-const CLASSNAME = RadioButton.className as string;
-
-type SetupProps = Partial<RadioButtonProps>;
-
-/**
- * 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(<RadioButton {...props} />);
-
-    return {
-        helper: wrapper.find(`.${CLASSNAME}__helper`),
-        input: wrapper.find(`input`),
-        label: wrapper.find(`.${CLASSNAME}__label`),
-        props,
-        wrapper,
-    };
-};
-
-describe(`<${RadioButton.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render defaults', () => {
-            const { wrapper, input, helper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-
-            expect(wrapper).toExist();
-
-            expect(input).toExist();
-            const inputProps: InputHTMLAttributes<HTMLInputElement> = input.props();
-            expect(inputProps.checked).toBeFalsy();
-            expect(inputProps.disabled).toBeFalsy();
-
-            expect(helper).not.toExist();
-        });
-
-        it('should render checked, disabled & id', () => {
-            const props = {
-                isChecked: true,
-                isDisabled: true,
-                id: 'inputID',
-            };
-            const { wrapper, input } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            const inputProps: InputHTMLAttributes<HTMLInputElement> = input.props();
-            expect(inputProps.checked).toBe(true);
-            expect(inputProps.disabled).toBe(true);
-            expect(inputProps.id).toEqual(props.id);
-        });
-
-        it('should render label & helper', () => {
-            const props = {
-                helper: 'Helper',
-                label: 'Label',
-            };
-            const { wrapper, label, helper, input } = setup(props as Partial<RadioButtonProps>);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(input).toExist();
-            const inputProps: InputHTMLAttributes<HTMLInputElement> = input.props();
-            expect(inputProps.checked).toBeFalsy();
-            expect(inputProps.disabled).toBeFalsy();
-
-            expect(label).toExist();
-            expect(label.contains(props.label)).toBe(true);
-            const labelProps: LabelHTMLAttributes<HTMLLabelElement> = label.props();
-            expect(labelProps.htmlFor).toEqual(inputProps.id);
-
-            expect(helper).toExist();
-            expect(helper.contains(props.helper)).toBe(true);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should use props for classes', () => {
-            const props = {
-                isChecked: true,
-                isDisabled: true,
-                theme: Theme.dark,
-            };
-            const { wrapper } = setup(props as RadioButtonProps);
-
-            expect(wrapper).toHaveClassName(CLASSNAME);
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'isDisabled', value: true }));
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'isChecked', value: true }));
-            expect(wrapper).not.toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'isUnchecked', value: true }));
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'theme', value: props.theme }));
-        });
-    });
-
-    // 3. Test events.
-    describe('Events', () => {
-        // Nothing to do here.
-    });
-
-    // 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, { prop: 'wrapper', className: 'wrapper' }, { className: CLASSNAME });
-});

package/dist/src/components/radio-button/RadioButton.tsx

@@ -1,141 +0,0 @@
-import React, { useMemo, forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
-
-import classNames from 'classnames';
-import { uid } from 'uid';
-
-import { 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 RadioButtonProps 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 content. */
-    label?: ReactNode;
-    /** Native input name property. */
-    name?: string;
-    /** Native input value property. */
-    value?: string;
-    /** On change callback. */
-    onChange?(value?: string, name?: string, event?: SyntheticEvent): void;
-    /** optional props for input */
-    inputProps?: InputHTMLAttributes<HTMLInputElement>;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'RadioButton';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<RadioButtonProps> = {
-    theme: Theme.light,
-};
-
-/**
- * RadioButton component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const RadioButton: Comp<RadioButtonProps, 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(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}
-                    className={`${CLASSNAME}__input-native`}
-                    disabled={isDisabled}
-                    id={inputId}
-                    tabIndex={isDisabled ? -1 : 0}
-                    type="radio"
-                    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`} />
-                </div>
-            </div>
-
-            <div className={`${CLASSNAME}__content`}>
-                {label && (
-                    <InputLabel htmlFor={inputId} theme={theme} className={`${CLASSNAME}__label`}>
-                        {label}
-                    </InputLabel>
-                )}
-                {helper && (
-                    <InputHelper id={`${inputId}-helper`} theme={theme} className={`${CLASSNAME}__helper`}>
-                        {helper}
-                    </InputHelper>
-                )}
-            </div>
-        </div>
-    );
-});
-RadioButton.displayName = COMPONENT_NAME;
-RadioButton.className = CLASSNAME;
-RadioButton.defaultProps = DEFAULT_PROPS;

package/dist/src/components/radio-button/RadioGroup.stories.tsx

@@ -1,42 +0,0 @@
-import { RadioButton, RadioGroup } from '@lumx/react';
-import React, { useState } from 'react';
-
-export default { title: 'LumX components/radio-button/Radio Group' };
-
-export const Simple = ({ theme }: any) => {
-    const [value, onChange] = useState('lorem');
-
-    return (
-        <RadioGroup>
-            <RadioButton
-                isChecked={value === 'lorem'}
-                helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
-                label="Radio button with help 1"
-                name="test2"
-                theme={theme}
-                value="lorem"
-                onChange={onChange as any}
-            />
-
-            <RadioButton
-                isDisabled
-                helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
-                label="Radio button with help 2"
-                name="test2"
-                theme={theme}
-                value="ipsum"
-                onChange={onChange as any}
-            />
-
-            <RadioButton
-                isChecked={value === 'dolor'}
-                helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
-                label="Radio button with help 3"
-                name="test2"
-                theme={theme}
-                value="dolor"
-                onChange={onChange as any}
-            />
-        </RadioGroup>
-    );
-};

package/dist/src/components/radio-button/RadioGroup.test.tsx

@@ -1,77 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-
-import { RadioButton } from '@lumx/react';
-import { RadioGroup, RadioGroupProps } from './RadioGroup';
-
-const CLASSNAME = RadioGroup.className as string;
-
-type SetupProps = Partial<RadioGroupProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
-    const props: any = { ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper = renderer(<RadioGroup {...props} />);
-
-    return {
-        props,
-        radioButtons: wrapper.find('RadioButton'),
-        wrapper,
-    };
-};
-
-describe(`<${RadioGroup.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render defaults', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(wrapper).toExist();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
-
-        it('should render with radio button children', () => {
-            const { wrapper, radioButtons } = setup({
-                children: [
-                    <RadioButton key={0} isChecked label="Label 1" />,
-                    <RadioButton key={1} isChecked={false} label="Label 2" />,
-                ],
-            });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(radioButtons).toExist();
-            expect(radioButtons.length).toBe(2);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        // Nothing to do here.
-    });
-
-    // 3. Test events.
-    describe('Events', () => {
-        // Nothing to do here
-    });
-
-    // 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, { prop: 'wrapper', className: 'wrapper' }, { className: CLASSNAME });
-});

package/dist/src/components/radio-button/RadioGroup.tsx

@@ -1,52 +0,0 @@
-import React, { forwardRef, ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export interface RadioGroupProps extends GenericProps {
-    /** RadioButton elements */
-    children: ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'RadioGroup';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * RadioGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const RadioGroup: Comp<RadioGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { children, className, ...forwardedProps } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
-        >
-            {children}
-        </div>
-    );
-});
-RadioGroup.displayName = COMPONENT_NAME;
-RadioGroup.className = CLASSNAME;