@lumx/react 3.1.1 → 3.1.3-alpha.0

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

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

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

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

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

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

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

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

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

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