@lumx/react 3.0.7 → 3.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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