@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/slideshow/useSlideFocusManagement.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react';
+import { getFocusableElements } from '@lumx/react/utils/focus/getFocusableElements';
+
+export interface UseSlideFocusManagementProps {
+    isSlideDisplayed?: boolean;
+    slideRef: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * Classname set on elements whose focus was blocked.
+ * This is to easily find elements that have been tempered with,
+ * and not elements whose focus was already initially blocked.
+ * */
+const BLOCKED_FOCUS_CLASSNAME = `focus-blocked`;
+
+/**
+ * Manage how slides must behave when visible or not.
+ * When not visible, they should be hidden from screen readers and not focusable.
+ */
+export const useSlideFocusManagement = ({ isSlideDisplayed, slideRef }: UseSlideFocusManagementProps) => {
+    useEffect(() => {
+        const element = slideRef?.current;
+
+        if (!element) {
+            return undefined;
+        }
+
+        /**
+         * Display given slide to screen readers and, if focus was blocked, restore focus on elements.
+         */
+        const enableSlide = () => {
+            // Hide from screen readers
+            element.setAttribute('aria-hidden', 'false');
+            // Find elements we have blocked focus on
+            element.querySelectorAll(`.${BLOCKED_FOCUS_CLASSNAME}`).forEach((focusableElement) => {
+                focusableElement.removeAttribute('tabindex');
+                focusableElement.classList.remove(BLOCKED_FOCUS_CLASSNAME);
+            });
+        };
+
+        /**
+         * Hide given slide from screen readers and block focus on all focusable elements within.
+         */
+        const blockSlide = () => {
+            element.setAttribute('aria-hidden', 'true');
+            getFocusableElements(element).forEach((focusableElement) => {
+                focusableElement.setAttribute('tabindex', '-1');
+                focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
+            });
+        };
+
+        const handleDisplay = () => {
+            if (!element) {
+                return;
+            }
+            if (isSlideDisplayed) {
+                enableSlide();
+            } else {
+                blockSlide();
+            }
+        };
+
+        // Callback function to execute when mutations are observed
+        const callback: MutationCallback = (mutationsList) => {
+            if (element) {
+                for (const mutation of mutationsList) {
+                    if (mutation.type === 'childList') {
+                        handleDisplay();
+                    }
+                }
+            }
+        };
+
+        // Create an observer instance linked to the callback function
+        const observer = new MutationObserver(callback);
+
+        if (element) {
+            handleDisplay();
+
+            /** If slide is hidden, start observing for elements to block focus  */
+            if (!isSlideDisplayed) {
+                observer.observe(element, { attributes: true, childList: true, subtree: true });
+            }
+        }
+
+        return () => {
+            if (!isSlideDisplayed) {
+                observer.disconnect();
+            }
+        };
+    }, [isSlideDisplayed, slideRef]);
+};

package/dist/src/components/slideshow/useSwipeNavigate.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { detectHorizontalSwipe } from '@lumx/core/js/utils';
+
+const isTouchDevice = () => 'ontouchstart' in window;
+
+/**
+ * Listen swipe to navigate left and right.
+ */
+export function useSwipeNavigate(element?: HTMLElement | null, onNext?: () => void, onPrevious?: () => void): void {
+    useEffect(() => {
+        if (!element || !isTouchDevice()) return undefined;
+
+        return detectHorizontalSwipe(element, (swipe) => {
+            const callback = swipe === 'right' ? onPrevious : onNext;
+            callback?.();
+        });
+    }, [onPrevious, onNext, element]);
+}

package/dist/src/components/switch/Switch.stories.tsx

@@ -0,0 +1,36 @@
+import { Switch, Alignment } from '@lumx/react';
+import { text } from '@storybook/addon-knobs';
+import noop from 'lodash/noop';
+import React from 'react';
+
+export default { title: 'LumX components/switch/Switch' };
+
+export const NotCheckedSwitch = ({ theme }: any) => (
+    <Switch isChecked={false} onChange={noop} theme={theme}>
+        {text('text', 'The switch')}
+    </Switch>
+);
+
+export const CheckedSwitch = ({ theme }: any) => (
+    <Switch isChecked onChange={noop} theme={theme}>
+        {text('text', 'The switch')}
+    </Switch>
+);
+
+export const DisabledCheckedSwitch = ({ theme }: any) => (
+    <Switch isChecked isDisabled onChange={noop} theme={theme}>
+        {text('text', 'The switch')}
+    </Switch>
+);
+
+export const DisabledSwitch = ({ theme }: any) => (
+    <Switch isDisabled onChange={noop} theme={theme}>
+        {text('text', 'The switch')}
+    </Switch>
+);
+
+export const RightPositionSwitch = ({ theme }: any) => (
+    <Switch position={Alignment.right} onChange={noop} theme={theme}>
+        {text('text', 'The switch')}
+    </Switch>
+);

package/dist/src/components/switch/Switch.test.tsx

@@ -0,0 +1,189 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { build, oneOf } from 'test-data-bot';
+
+import without from 'lodash/without';
+
+import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
+
+import { Theme, Alignment } from '@lumx/react';
+import { Switch, SwitchProps } from './Switch';
+
+const DEFAULT_PROPS = Switch.defaultProps as any;
+const CLASSNAME = Switch.className as string;
+
+type SetupProps = Partial<SwitchProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+    const props: SwitchProps = {
+        ...propsOverride,
+    };
+
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+
+    const wrapper: Wrapper = renderer(<Switch {...props} />);
+
+    return {
+        root: wrapper.find('div').first(),
+
+        input: wrapper.find('input'),
+        inputWrapper: wrapper.find(`.${CLASSNAME}__input-wrapper`),
+
+        content: wrapper.find(`.${CLASSNAME}__content`),
+        helper: wrapper.find(`.${CLASSNAME}__helper`),
+        label: wrapper.find(`.${CLASSNAME}__label`),
+
+        props,
+        wrapper,
+    };
+};
+
+jest.mock('uid', () => ({ uid: () => 'uid' }));
+
+describe(`<${Switch.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render correctly without any label', () => {
+            const { root, inputWrapper, input, content, wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(root).toExist();
+            expect(root).toHaveClassName(CLASSNAME);
+
+            expect(inputWrapper).toExist();
+            expect(input).toExist();
+
+            expect(content).not.toExist();
+        });
+
+        it('should render correctly with only a `label`', () => {
+            const props: SetupProps = { children: 'Label' };
+            const { root, inputWrapper, input, content, helper, label, wrapper } = setup(props);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(root).toExist();
+            expect(root).toHaveClassName(CLASSNAME);
+
+            expect(inputWrapper).toExist();
+            expect(input).toExist();
+
+            expect(content).toExist();
+            expect(label).toExist();
+            expect(helper).not.toExist();
+        });
+
+        it('should render correctly with a `label` and a `helper`', () => {
+            const props: SetupProps = { children: 'Label', helper: 'Helper' };
+            const { root, inputWrapper, input, content, helper, label, wrapper } = setup(props);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(root).toExist();
+            expect(root).toHaveClassName(CLASSNAME);
+
+            expect(inputWrapper).toExist();
+            expect(input).toExist();
+
+            expect(content).toExist();
+            expect(label).toExist();
+            expect(helper).toExist();
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it('should use default props', () => {
+            const { root } = setup();
+
+            Object.keys(DEFAULT_PROPS).forEach((prop: string) => {
+                let defaultProp: any = DEFAULT_PROPS[prop];
+
+                if (prop === 'checked') {
+                    // eslint-disable-next-line no-param-reassign
+                    prop = 'unchecked';
+                    defaultProp = true;
+                }
+
+                expect(root).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: prop, value: defaultProp }));
+            });
+        });
+
+        it('should use the given props', () => {
+            const modifiedPropsBuilder: () => SetupProps = build('props').fields({
+                isChecked: true,
+                position: oneOf(...without(Object.values(Alignment), DEFAULT_PROPS.position)),
+                theme: oneOf(...without(Object.values(Theme), DEFAULT_PROPS.theme)),
+            });
+
+            const modifiedProps: SetupProps = modifiedPropsBuilder();
+
+            const { root } = setup({ ...modifiedProps });
+
+            Object.keys(modifiedProps).forEach((prop: string) => {
+                if (prop === 'checked') {
+                    if (modifiedProps[prop]) {
+                        expect(root).toHaveClassName(
+                            getBasicClass({ prefix: CLASSNAME, type: prop, value: modifiedProps[prop] }),
+                        );
+                    } else {
+                        expect(root).toHaveClassName(
+                            getBasicClass({ prefix: CLASSNAME, type: 'unchecked', value: true }),
+                        );
+                    }
+                } else {
+                    expect(root).toHaveClassName(
+                        getBasicClass({ prefix: CLASSNAME, type: prop, value: modifiedProps[prop] }),
+                    );
+                }
+            });
+        });
+
+        it('should use the given props while passing custom props to input', () => {
+            const { wrapper } = setup({
+                inputProps: {
+                    'aria-labelledby': 'labelledby-id',
+                },
+            });
+
+            expect(wrapper).toMatchSnapshot();
+        });
+    });
+
+    // 3. Test events.
+    describe('Events', () => {
+        const onChange: jest.Mock = jest.fn();
+
+        beforeEach(() => {
+            onChange.mockClear();
+        });
+
+        it('should trigger `onChange` when toggled', () => {
+            const { input } = setup({ onChange }, false);
+
+            input.simulate('change');
+            expect(onChange).toHaveBeenCalled();
+        });
+    });
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    describe('Conditions', () => {
+        it('should not display the `helper` if no `label` is given', () => {
+            const props: SetupProps = { helper: 'Helper' };
+            const { content, wrapper } = setup(props);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(content).not.toExist();
+        });
+    });
+
+    // 5. Test state.
+    // N/A
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'root', prop: 'root' }, { className: CLASSNAME });
+});

package/dist/src/components/switch/Switch.tsx

@@ -0,0 +1,141 @@
+import React, { Children, forwardRef, InputHTMLAttributes, SyntheticEvent, useMemo } from 'react';
+
+import classNames from 'classnames';
+import { uid } from 'uid';
+
+import isEmpty from 'lodash/isEmpty';
+
+import { Alignment, 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 SwitchProps extends GenericProps, HasTheme {
+    /** Helper text. */
+    helper?: string;
+    /** Whether it is checked or not. */
+    isChecked?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Native input name property. */
+    name?: string;
+    /** Position of the switch relative to the label. */
+    position?: Extract<Alignment, 'right' | 'left'>;
+    /** 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 = 'Switch';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<SwitchProps> = {
+    position: Alignment.left,
+    theme: Theme.light,
+};
+
+/**
+ * Switch component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        checked,
+        children,
+        className,
+        disabled,
+        helper,
+        id,
+        isChecked = checked,
+        isDisabled = disabled,
+        name,
+        onChange,
+        position,
+        theme,
+        value,
+        inputProps = {},
+        ...forwardedProps
+    } = props;
+    const inputId = useMemo(() => id || `switch-${uid()}`, [id]);
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            onChange(!isChecked, value, name, event);
+        }
+    };
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                    isChecked,
+                    isDisabled,
+                    position,
+                    theme,
+                    isUnchecked: !isChecked,
+                }),
+            )}
+            aria-disabled={isDisabled}
+        >
+            <div className={`${CLASSNAME}__input-wrapper`}>
+                <input
+                    type="checkbox"
+                    role="switch"
+                    id={inputId}
+                    className={`${CLASSNAME}__input-native`}
+                    name={name}
+                    value={value}
+                    disabled={isDisabled}
+                    checked={isChecked}
+                    aria-checked={Boolean(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>
+
+            {Children.count(children) > 0 && (
+                <div className={`${CLASSNAME}__content`}>
+                    <InputLabel htmlFor={inputId} theme={theme} className={`${CLASSNAME}__label`}>
+                        {children}
+                    </InputLabel>
+                    {!isEmpty(helper) && (
+                        <InputHelper id={`${inputId}-helper`} theme={theme} className={`${CLASSNAME}__helper`}>
+                            {helper}
+                        </InputHelper>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+});
+Switch.displayName = COMPONENT_NAME;
+Switch.className = CLASSNAME;
+Switch.defaultProps = DEFAULT_PROPS;

package/dist/src/components/switch/__snapshots__/Switch.test.tsx.snap

@@ -0,0 +1,179 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Switch> Conditions should not display the \`helper\` if no \`label\` is given 1`] = `
+<div
+  className="lumx-switch lumx-switch--position-left lumx-switch--theme-light lumx-switch--is-unchecked"
+>
+  <div
+    className="lumx-switch__input-wrapper"
+  >
+    <input
+      aria-checked={false}
+      aria-describedby="switch-uid-helper"
+      className="lumx-switch__input-native"
+      id="switch-uid"
+      onChange={[Function]}
+      role="switch"
+      type="checkbox"
+    />
+    <div
+      className="lumx-switch__input-placeholder"
+    >
+      <div
+        className="lumx-switch__input-background"
+      />
+      <div
+        className="lumx-switch__input-indicator"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Switch> Props should use the given props while passing custom props to input 1`] = `
+<div
+  className="lumx-switch lumx-switch--position-left lumx-switch--theme-light lumx-switch--is-unchecked"
+>
+  <div
+    className="lumx-switch__input-wrapper"
+  >
+    <input
+      aria-checked={false}
+      aria-labelledby="labelledby-id"
+      className="lumx-switch__input-native"
+      id="switch-uid"
+      onChange={[Function]}
+      role="switch"
+      type="checkbox"
+    />
+    <div
+      className="lumx-switch__input-placeholder"
+    >
+      <div
+        className="lumx-switch__input-background"
+      />
+      <div
+        className="lumx-switch__input-indicator"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Switch> Snapshots and structure should render correctly with a \`label\` and a \`helper\` 1`] = `
+<div
+  className="lumx-switch lumx-switch--position-left lumx-switch--theme-light lumx-switch--is-unchecked"
+>
+  <div
+    className="lumx-switch__input-wrapper"
+  >
+    <input
+      aria-checked={false}
+      aria-describedby="switch-uid-helper"
+      className="lumx-switch__input-native"
+      id="switch-uid"
+      onChange={[Function]}
+      role="switch"
+      type="checkbox"
+    />
+    <div
+      className="lumx-switch__input-placeholder"
+    >
+      <div
+        className="lumx-switch__input-background"
+      />
+      <div
+        className="lumx-switch__input-indicator"
+      />
+    </div>
+  </div>
+  <div
+    className="lumx-switch__content"
+  >
+    <InputLabel
+      className="lumx-switch__label"
+      htmlFor="switch-uid"
+      theme="light"
+    >
+      Label
+    </InputLabel>
+    <InputHelper
+      className="lumx-switch__helper"
+      id="switch-uid-helper"
+      kind="info"
+      theme="light"
+    >
+      Helper
+    </InputHelper>
+  </div>
+</div>
+`;
+
+exports[`<Switch> Snapshots and structure should render correctly with only a \`label\` 1`] = `
+<div
+  className="lumx-switch lumx-switch--position-left lumx-switch--theme-light lumx-switch--is-unchecked"
+>
+  <div
+    className="lumx-switch__input-wrapper"
+  >
+    <input
+      aria-checked={false}
+      className="lumx-switch__input-native"
+      id="switch-uid"
+      onChange={[Function]}
+      role="switch"
+      type="checkbox"
+    />
+    <div
+      className="lumx-switch__input-placeholder"
+    >
+      <div
+        className="lumx-switch__input-background"
+      />
+      <div
+        className="lumx-switch__input-indicator"
+      />
+    </div>
+  </div>
+  <div
+    className="lumx-switch__content"
+  >
+    <InputLabel
+      className="lumx-switch__label"
+      htmlFor="switch-uid"
+      theme="light"
+    >
+      Label
+    </InputLabel>
+  </div>
+</div>
+`;
+
+exports[`<Switch> Snapshots and structure should render correctly without any label 1`] = `
+<div
+  className="lumx-switch lumx-switch--position-left lumx-switch--theme-light lumx-switch--is-unchecked"
+>
+  <div
+    className="lumx-switch__input-wrapper"
+  >
+    <input
+      aria-checked={false}
+      className="lumx-switch__input-native"
+      id="switch-uid"
+      onChange={[Function]}
+      role="switch"
+      type="checkbox"
+    />
+    <div
+      className="lumx-switch__input-placeholder"
+    >
+      <div
+        className="lumx-switch__input-background"
+      />
+      <div
+        className="lumx-switch__input-indicator"
+      />
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1 @@
+export * from './Switch';

package/dist/src/components/table/Table.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+
+import { Table, TableProps } from './Table';
+import * as stories from '../../stories/generated/Table/Demos.stories';
+
+const CLASSNAME = Table.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<TableProps> = {}, shallowRendering = true) => {
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<Table {...(props as any)} />);
+    return { props, wrapper };
+};
+
+describe(`<${Table.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, Table);
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});