@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/components/inline-list/InlineList.test.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { commonTestsSuite } from '@lumx/react/testing/utils';
-import { InlineList, InlineListProps } from '.';
-
-const setup = (props: Partial<InlineListProps> = {}) => {
-    const wrapper = shallow(<InlineList {...props} />);
-    return { props, wrapper };
-};
-
-describe(`<${InlineList.displayName}>`, () => {
-    describe('Snapshots and structure', () => {
-        it('should render default', () => {
-            const { wrapper } = setup({ children: ['Some text', 'Some other text'] });
-            expect(wrapper).toHaveDisplayName('ul');
-            expect(wrapper.prop('className')).toBe(InlineList.className);
-            expect(wrapper.find('li')).toHaveLength(2);
-        });
-
-        it('should render with typography', () => {
-            const { wrapper } = setup({ typography: 'body2', children: 'Some text' });
-            expect(wrapper).toHaveClassName('lumx-typography-body2');
-        });
-
-        it('should render with color', () => {
-            const { wrapper } = setup({ color: 'blue', children: 'Some text' });
-            expect(wrapper).toHaveClassName('lumx-color-font-blue-N');
-        });
-
-        it('should render with color and variant', () => {
-            const { wrapper } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
-            expect(wrapper).toHaveClassName('lumx-color-font-blue-D2');
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: InlineList.className });
-});

package/dist/src/components/inline-list/InlineList.tsx

@@ -1,82 +0,0 @@
-import React, { Children, forwardRef, isValidElement } from 'react';
-
-import classNames from 'classnames';
-
-import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getFontColorClassName, getRootClassName, getTypographyClassName } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export interface InlineListProps extends GenericProps {
-    /**
-     * Text color.
-     */
-    color?: ColorPalette;
-    /**
-     * Lightened or darkened variant of the selected color.
-     */
-    colorVariant?: ColorVariant;
-    /**
-     * Typography variant.
-     */
-    typography?: Typography;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'InlineList';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {} as const;
-
-/**
- * InlineList component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const InlineList: Comp<InlineListProps> = forwardRef((props, ref) => {
-    const { className, color, colorVariant, typography, children, ...forwardedProps } = props;
-    const fontColorClassName = color && getFontColorClassName(color, colorVariant);
-    const typographyClassName = typography && getTypographyClassName(typography);
-    return (
-        // eslint-disable-next-line jsx-a11y/no-redundant-roles
-        <ul
-            {...forwardedProps}
-            ref={ref as any}
-            className={classNames(className, CLASSNAME, fontColorClassName, typographyClassName)}
-            // Lists with removed bullet style can lose their a11y list role on some browsers
-            role="list"
-        >
-            {Children.toArray(children).map((child, index) => {
-                const key = (isValidElement(child) && child.key) || index;
-                return (
-                    // We need to item is set as display: contents which removes the semantic.
-                    // eslint-disable-next-line jsx-a11y/no-redundant-roles
-                    <li key={key} role="listitem" className={`${CLASSNAME}__item`}>
-                        {index !== 0 && (
-                            <span className={`${CLASSNAME}__item-separator`} aria-hidden="true">
-                                {'\u00A0•\u00A0'}
-                            </span>
-                        )}
-                        {child}
-                    </li>
-                );
-            })}
-        </ul>
-    );
-});
-InlineList.displayName = COMPONENT_NAME;
-InlineList.className = CLASSNAME;
-InlineList.defaultProps = DEFAULT_PROPS;

package/dist/src/components/inline-list/index.ts

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

package/dist/src/components/input-helper/InputHelper.stories.tsx

@@ -1,29 +0,0 @@
-import { InputHelper, Kind } from '@lumx/react';
-import { text } from '@storybook/addon-knobs';
-import React from 'react';
-
-export default { title: 'LumX components/input-helper/Input Helper' };
-
-export const InformationHelper = ({ theme }: any) => (
-    <InputHelper kind={Kind.info} theme={theme}>
-        {text('Text', 'ex: toto@acme.com')}
-    </InputHelper>
-);
-
-export const ErrorHelper = ({ theme }: any) => (
-    <InputHelper kind={Kind.error} theme={theme}>
-        {text('Text', 'You should be bold!')}
-    </InputHelper>
-);
-
-export const ValidHelper = ({ theme }: any) => (
-    <InputHelper kind={Kind.success} theme={theme}>
-        {text('Text', 'Great, you are bold')}
-    </InputHelper>
-);
-
-export const warningHelper = ({ theme }: any) => (
-    <InputHelper kind={Kind.warning} theme={theme}>
-        {text('Text', 'This should be used carefuly')}
-    </InputHelper>
-);

package/dist/src/components/input-helper/InputHelper.test.tsx

@@ -1,107 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { Kind, Theme } from '@lumx/react';
-import { Wrapper } from '@lumx/react/testing/utils';
-import { InputHelper, InputHelperProps } from './InputHelper';
-
-const CLASSNAME = InputHelper.className as string;
-
-type SetupProps = Partial<InputHelperProps>;
-
-/**
- * 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: Wrapper = renderer(<InputHelper {...props} />);
-    const helper: Wrapper = wrapper.find('.lumx-input-helper');
-
-    return { helper, props, wrapper };
-};
-
-const properties = {
-    error: {
-        children: 'Error',
-        kind: Kind.error,
-    },
-    info: {
-        children: 'Info',
-        kind: Kind.info,
-    },
-    success: {
-        children: 'Success',
-        kind: Kind.success,
-    },
-    warning: {
-        children: 'Warning',
-        kind: Kind.warning,
-    },
-};
-
-describe(`<${InputHelper.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render defaults', () => {
-            const children = 'The helper text';
-            const { wrapper, helper } = setup({ children });
-
-            expect(wrapper).toMatchSnapshot();
-            expect(helper).toExist();
-            expect(helper).toHaveClassName(CLASSNAME);
-            expect(helper).toHaveClassName(`${CLASSNAME}--theme-light`);
-            expect(helper).toHaveText(children);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should render info', () => {
-            const { helper } = setup(properties.info);
-            expect(helper).toHaveText(properties.info.children);
-        });
-        it('should render error', () => {
-            const { helper } = setup(properties.error);
-            expect(helper).toIncludeText(properties.error.children);
-        });
-        it('should render valid', () => {
-            const { helper } = setup(properties.success);
-            expect(helper).toIncludeText(properties.success.children);
-        });
-        it('should render warning', () => {
-            const { helper } = setup(properties.warning);
-            expect(helper).toIncludeText(properties.warning.children);
-        });
-
-        it('should render dark theme', () => {
-            const { helper } = setup({ ...properties.info, theme: Theme.dark });
-            expect(helper).toHaveClassName(CLASSNAME);
-            expect(helper).toHaveClassName(`${CLASSNAME}--theme-dark`);
-        });
-
-        it('should render custom className', () => {
-            const className = 'my-class__test';
-            const { helper } = setup({ ...properties.info, className });
-            expect(helper).toHaveClassName(CLASSNAME);
-            expect(helper).toHaveClassName(className);
-        });
-    });
-
-    // 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.
-    });
-});

package/dist/src/components/input-helper/InputHelper.tsx

@@ -1,61 +0,0 @@
-import { Kind, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
-
-import { INPUT_HELPER_CONFIGURATION } from './constants';
-
-/**
- * Defines the props of the component.
- */
-export interface InputHelperProps extends GenericProps, HasTheme {
-    /** Helper content. */
-    children: string | ReactNode;
-    /** Helper variant. */
-    kind?: Kind;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'InputHelper';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<InputHelperProps> = {
-    kind: Kind.info,
-    theme: Theme.light,
-};
-
-/**
- * InputHelper component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const InputHelper: Comp<InputHelperProps, HTMLSpanElement> = forwardRef((props, ref) => {
-    const { children, className, kind, theme, ...forwardedProps } = props;
-    const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};
-
-    return (
-        <span
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, theme }))}
-        >
-            {children}
-        </span>
-    );
-});
-
-InputHelper.displayName = COMPONENT_NAME;
-InputHelper.className = CLASSNAME;
-InputHelper.defaultProps = DEFAULT_PROPS;

package/dist/src/components/input-helper/__snapshots__/InputHelper.test.tsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<InputHelper> Snapshots and structure should render defaults 1`] = `
-<span
-  className="lumx-input-helper lumx-input-helper--theme-light"
->
-  The helper text
-</span>
-`;

package/dist/src/components/input-helper/constants.ts

@@ -1,11 +0,0 @@
-export const INPUT_HELPER_CONFIGURATION: Record<string, { color: string }> = {
-    error: {
-        color: 'red',
-    },
-    success: {
-        color: 'green',
-    },
-    warning: {
-        color: 'yellow',
-    },
-};

package/dist/src/components/input-helper/index.ts

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

package/dist/src/components/input-label/InputLabel.stories.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { text } from '@storybook/addon-knobs';
-
-import { InputLabel } from './InputLabel';
-
-export default { title: 'LumX components/input-label/Input Label' };
-
-export const SimpleLabel = ({ theme }: any) => (
-    <div id="123">
-        <InputLabel htmlFor="123" theme={theme}>
-            {text('Label', 'The label')}
-        </InputLabel>
-    </div>
-);

package/dist/src/components/input-label/InputLabel.test.tsx

@@ -1,86 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { Theme } from '@lumx/react';
-import { Wrapper } from '@lumx/react/testing/utils';
-import { InputLabel, InputLabelProps } from './InputLabel';
-
-const CLASSNAME = InputLabel.className as string;
-
-type SetupProps = Partial<InputLabelProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
-    const props: any = { htmlFor: 'id', ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<InputLabel {...props} />);
-    const label: Wrapper = wrapper.find('.lumx-input-label');
-
-    return { label, props, wrapper };
-};
-
-describe(`<${InputLabel.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render defaults', () => {
-            const children = 'The Label text';
-            const { wrapper, label } = setup({ children });
-
-            expect(wrapper).toMatchSnapshot();
-            expect(label).toExist();
-            expect(label).toHaveClassName(CLASSNAME);
-            expect(label).toHaveClassName(`${CLASSNAME}--theme-light`);
-            expect(label).toHaveText(children);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should render children', () => {
-            const children = (
-                <span>
-                    The label<strong>*</strong>
-                </span>
-            );
-
-            const { label } = setup({
-                children,
-                htmlFor: '123',
-            });
-            expect(label).toContainReact(children);
-            expect(label).toHaveProp('htmlFor', '123');
-        });
-
-        it('should render dark theme', () => {
-            const { label } = setup({ children: 'The label', theme: Theme.dark });
-            expect(label).toHaveClassName(CLASSNAME);
-            expect(label).toHaveClassName(`${CLASSNAME}--theme-dark`);
-        });
-
-        it('should render custom className', () => {
-            const className = 'my-class__test';
-            const { label } = setup({ children: 'The label', className });
-            expect(label).toHaveClassName(CLASSNAME);
-            expect(label).toHaveClassName(className);
-        });
-    });
-
-    // 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.
-    });
-});

package/dist/src/components/input-label/InputLabel.tsx

@@ -1,59 +0,0 @@
-import { Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
-
-/**
- * Defines the props of the component.
- */
-export interface InputLabelProps extends GenericProps, HasTheme {
-    /** Label content. */
-    children: string | ReactNode;
-    /** Native htmlFor property. */
-    htmlFor: string;
-    /** Whether the component is required or not. */
-    isRequired?: boolean;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'InputLabel';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<InputLabelProps> = {
-    theme: Theme.light,
-};
-
-/**
- * InputLabel component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const InputLabel: Comp<InputLabelProps, HTMLLabelElement> = forwardRef((props, ref) => {
-    const { children, className, htmlFor, isRequired, theme, ...forwardedProps } = props;
-
-    return (
-        <label
-            ref={ref}
-            {...forwardedProps}
-            htmlFor={htmlFor}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isRequired, theme }))}
-        >
-            {children}
-        </label>
-    );
-});
-InputLabel.displayName = COMPONENT_NAME;
-InputLabel.className = CLASSNAME;
-InputLabel.defaultProps = DEFAULT_PROPS;

package/dist/src/components/input-label/__snapshots__/InputLabel.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<InputLabel> Snapshots and structure should render defaults 1`] = `
-<label
-  className="lumx-input-label lumx-input-label--theme-light"
-  htmlFor="id"
->
-  The Label text
-</label>
-`;

package/dist/src/components/input-label/index.ts

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

package/dist/src/components/lightbox/Lightbox.stories.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import {
-    ImageBlock,
-    Slideshow,
-    SlideshowItem,
-    Toolbar,
-    Divider,
-    Alignment,
-    TextField,
-    Typography,
-    Link,
-    Lightbox,
-    ThumbnailProps,
-} from '@lumx/react';
-import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
-
-export default { title: 'LumX components/lightbox/Lightbox' };
-
-interface RowItemProps {
-    image: ThumbnailProps;
-}
-
-const RowItem: React.FC<RowItemProps> = ({ image }) => {
-    const [isOpen, setOpen] = React.useState(false);
-    const { image: url, alt: name } = image;
-    const linkRef = React.useRef(null);
-
-    return (
-        <>
-            <Toolbar
-                label={
-                    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                    <Link ref={linkRef} typography={Typography.subtitle1} onClick={() => setOpen(true)}>
-                        {name}
-                    </Link>
-                }
-            />
-            <Lightbox
-                closeButtonProps={{ label: 'Close' }}
-                isOpen={isOpen}
-                onClose={() => setOpen(false)}
-                parentElement={linkRef}
-            >
-                <Slideshow
-                    activeIndex={0}
-                    fillHeight
-                    slideshowControlsProps={{
-                        nextButtonProps: { label: 'Next' },
-                        previousButtonProps: { label: 'Previous' },
-                    }}
-                >
-                    <SlideshowItem key={name}>
-                        <ImageBlock align={Alignment.center} alt={name} fillHeight image={url} />
-                    </SlideshowItem>
-                </Slideshow>
-            </Lightbox>
-        </>
-    );
-};
-
-export const Focus = () => {
-    const [textFieldValue, setTextFieldValue] = React.useState('');
-    const images: ThumbnailProps[] = thumbnailsKnob(12);
-
-    return (
-        <>
-            <TextField
-                value={textFieldValue}
-                onChange={setTextFieldValue}
-                className="lumx-spacing-margin-vertical-big"
-            />
-            {images.map((image, index) => {
-                const itemPosition = index + 1;
-                return (
-                    <div key={itemPosition}>
-                        <RowItem image={image} />
-                        <Divider />
-                    </div>
-                );
-            })}
-        </>
-    );
-};

package/dist/src/components/lightbox/Lightbox.test.tsx

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