@lumx/react 3.0.7 → 3.1.0

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

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

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

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

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

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

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

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

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

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

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