@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/components/checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -1,141 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Checkbox> Props should use the given props 1`] = `
-<div
-  className="lumx-checkbox lumx-checkbox--is-unchecked lumx-checkbox--theme-light"
->
-  <div
-    className="lumx-checkbox__input-wrapper"
-  >
-    <input
-      aria-describedby="fixedId-helper"
-      className="lumx-checkbox__input-native"
-      id="fixedId"
-      onChange={[Function]}
-      tabIndex={0}
-      type="checkbox"
-    />
-    <div
-      className="lumx-checkbox__input-placeholder"
-    >
-      <div
-        className="lumx-checkbox__input-background"
-      />
-      <div
-        className="lumx-checkbox__input-indicator"
-      >
-        <Icon
-          icon="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="lumx-checkbox__content"
-  >
-    <InputLabel
-      className="lumx-checkbox__label"
-      htmlFor="fixedId"
-      theme="light"
-    >
-      Test label
-    </InputLabel>
-    <InputHelper
-      className="lumx-checkbox__helper"
-      id="fixedId-helper"
-      kind="info"
-      theme="light"
-    >
-      Test helper
-    </InputHelper>
-  </div>
-</div>
-`;
-
-exports[`<Checkbox> Props should use the given props while passing custom props to input 1`] = `
-<div
-  className="lumx-checkbox lumx-checkbox--is-unchecked lumx-checkbox--theme-light"
->
-  <div
-    className="lumx-checkbox__input-wrapper"
-  >
-    <input
-      aria-describedby="fixedId-helper"
-      aria-labelledby="labelledby-id"
-      className="lumx-checkbox__input-native"
-      id="fixedId"
-      onChange={[Function]}
-      tabIndex={0}
-      type="checkbox"
-    />
-    <div
-      className="lumx-checkbox__input-placeholder"
-    >
-      <div
-        className="lumx-checkbox__input-background"
-      />
-      <div
-        className="lumx-checkbox__input-indicator"
-      >
-        <Icon
-          icon="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="lumx-checkbox__content"
-  >
-    <InputLabel
-      className="lumx-checkbox__label"
-      htmlFor="fixedId"
-      theme="light"
-    >
-      Test label
-    </InputLabel>
-    <InputHelper
-      className="lumx-checkbox__helper"
-      id="fixedId-helper"
-      kind="info"
-      theme="light"
-    >
-      Test helper
-    </InputHelper>
-  </div>
-</div>
-`;
-
-exports[`<Checkbox> Snapshots and structure should render correctly 1`] = `
-<div
-  className="lumx-checkbox lumx-checkbox--is-unchecked lumx-checkbox--theme-light"
->
-  <div
-    className="lumx-checkbox__input-wrapper"
-  >
-    <input
-      className="lumx-checkbox__input-native"
-      id="fixedId"
-      onChange={[Function]}
-      tabIndex={0}
-      type="checkbox"
-    />
-    <div
-      className="lumx-checkbox__input-placeholder"
-    >
-      <div
-        className="lumx-checkbox__input-background"
-      />
-      <div
-        className="lumx-checkbox__input-indicator"
-      >
-        <Icon
-          icon="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="lumx-checkbox__content"
-  />
-</div>
-`;

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

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

package/dist/src/components/chip/Chip.stories.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { mdiClose, mdiViewList } from '@lumx/icons';
-import { Chip, Icon } from '@lumx/react';
-
-export default { title: 'LumX components/chip/Chip' };
-
-export const Simple = ({ theme }: any) => <Chip theme={theme}>The chip</Chip>;
-
-export const WithAfterAndBefore = ({ theme }: any) => (
-    <Chip
-        theme={theme}
-        after={<Icon icon={mdiClose} />}
-        onAfterClick={() => alert('clicked on close')}
-        before={<Icon icon={mdiViewList} />}
-        onClick={() => alert('clicked on chip')}
-        isClickable
-    >
-        content
-    </Chip>
-);

package/dist/src/components/chip/Chip.test.tsx

@@ -1,199 +0,0 @@
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
-
-import { ColorPalette, Theme } from '@lumx/react';
-import { Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-import { Chip, ChipProps } from './Chip';
-
-const CLASSNAME = Chip.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propOverrides: Partial<ChipProps> = {}, shallowRendering = true) => {
-    const props = {
-        ...propOverrides,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper = renderer(<Chip {...props} />);
-
-    return {
-        after: wrapper.find('.lumx-chip__after') as any,
-        before: wrapper.find('.lumx-chip__before') as any,
-        props,
-        wrapper,
-    };
-};
-
-describe('<Chip />', () => {
-    // 1. Test render via snapshot (default state of component).
-    describe('Snapshot', () => {
-        it('should render correctly Chip component', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    // N/A.
-
-    // 3. Test events.
-    describe('Events', () => {
-        const mockOnClick = jest.fn();
-        const mockOnAfterClick = jest.fn();
-        const mockOnBeforeClick = jest.fn();
-        const mockClickEvent = {
-            stopPropagation: (): boolean => true,
-        };
-        const clearClickMocks = () => {
-            [mockOnClick, mockOnAfterClick, mockOnBeforeClick].forEach((func) => func.mockClear());
-        };
-
-        beforeEach(() => clearClickMocks);
-
-        it('should trigger onBeforeClick only when clicking on the "before" element', () => {
-            const { after, before, wrapper } = setup({
-                after: 'after',
-                before: 'before',
-                onAfterClick: mockOnAfterClick,
-                onBeforeClick: mockOnBeforeClick,
-                onClick: mockOnClick,
-            });
-
-            wrapper.simulate('click', mockClickEvent);
-            expect(mockOnBeforeClick).not.toHaveBeenCalled();
-
-            clearClickMocks();
-
-            after.simulate('click', mockClickEvent);
-            expect(mockOnBeforeClick).not.toHaveBeenCalled();
-
-            clearClickMocks();
-
-            before.simulate('click', mockClickEvent);
-            expect(mockOnBeforeClick).toHaveBeenCalled();
-        });
-
-        it('should trigger onClick when clicking on the label area', () => {
-            const { after, before, wrapper } = setup({
-                after: 'after',
-                before: 'before',
-                onAfterClick: mockOnAfterClick,
-                onBeforeClick: mockOnBeforeClick,
-                onClick: mockOnClick,
-            });
-
-            wrapper.simulate('click');
-            expect(mockOnClick).toHaveBeenCalled();
-
-            clearClickMocks();
-
-            after.simulate('click');
-            expect(mockOnClick).not.toHaveBeenCalled();
-
-            clearClickMocks();
-
-            before.simulate('click');
-            expect(mockOnClick).not.toHaveBeenCalled();
-        });
-
-        it('should trigger onAfterClick only when clicking on the "after" element', () => {
-            const { after, before, wrapper } = setup({
-                after: 'after',
-                before: 'before',
-                onAfterClick: mockOnAfterClick,
-                onBeforeClick: mockOnBeforeClick,
-                onClick: mockOnClick,
-            });
-
-            wrapper.simulate('click', mockClickEvent);
-            expect(mockOnAfterClick).not.toHaveBeenCalled();
-
-            clearClickMocks();
-
-            after.simulate('click', mockClickEvent);
-            expect(mockOnAfterClick).toHaveBeenCalled();
-
-            clearClickMocks();
-
-            before.simulate('click', mockClickEvent);
-            expect(mockOnAfterClick).not.toHaveBeenCalled();
-        });
-
-        it('should not stop propagation when clicking on a "before"or "after" element without an event handler', () => {
-            const onClick = jest.fn();
-            const { after, before } = setup(
-                {
-                    after: 'after',
-                    before: 'before',
-                    onClick,
-                },
-                false,
-            );
-
-            before.simulate('click', mockClickEvent);
-            expect(onClick).toHaveBeenCalled();
-
-            onClick.mockClear();
-
-            after.simulate('click', mockClickEvent);
-            expect(onClick).toHaveBeenCalled();
-        });
-    });
-
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        it('should have an extra class on the "before" element if it is clickable', () => {
-            let { before } = setup({ before: 'before 1' });
-            expect(before).toHaveLength(1);
-            expect(before.hasClass('lumx-chip__before--is-clickable')).toEqual(false);
-
-            ({ before } = setup({ before: 'before 2', onBeforeClick: (): boolean => true }));
-            expect(before).toHaveLength(1);
-            expect(before.hasClass('lumx-chip__before--is-clickable')).toEqual(true);
-        });
-
-        it('should have an extra class on the "after" element if it is clickable', () => {
-            let { after } = setup({ after: 'after 1' });
-            expect(after).toHaveLength(1);
-            expect(after.hasClass('lumx-chip__after--is-clickable')).toEqual(false);
-
-            ({ after } = setup({ after: 'after 2', onAfterClick: (): boolean => true }));
-            expect(after).toHaveLength(1);
-            expect(after.hasClass('lumx-chip__after--is-clickable')).toEqual(true);
-        });
-
-        it('should have correct default color', () => {
-            const { wrapper } = setup({});
-            expect(wrapper).toHaveClassName(
-                getBasicClass({
-                    prefix: CLASSNAME,
-                    type: 'color',
-                    value: ColorPalette.dark,
-                }),
-            );
-        });
-
-        it('should switch color with theme', () => {
-            const { wrapper } = setup({ theme: Theme.dark });
-            expect(wrapper).toHaveClassName(
-                getBasicClass({
-                    prefix: CLASSNAME,
-                    type: 'color',
-                    value: ColorPalette.light,
-                }),
-            );
-        });
-
-        it('should use color over the theme', () => {
-            const color = ColorPalette.red;
-            const { wrapper } = setup({ theme: Theme.dark, color });
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'color', value: color }));
-        });
-    });
-
-    // 5. Test state.
-    // N/A.
-});

package/dist/src/components/chip/Chip.tsx

@@ -1,154 +0,0 @@
-import { ColorPalette, Size, Theme } from '@lumx/react';
-import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
-
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { onEnterPressed } from '@lumx/react/utils/event';
-
-import classNames from 'classnames';
-
-import isFunction from 'lodash/isFunction';
-import React, { forwardRef, MouseEventHandler, ReactNode } from 'react';
-
-/**
- * Chip sizes.
- */
-type ChipSize = Extract<Size, 's' | 'm'>;
-
-/**
- * Defines the props of the component.
- */
-export interface ChipProps extends GenericProps, HasTheme {
-    /** A component to be rendered after the content. */
-    after?: ReactNode;
-    /** A component to be rendered before the content. */
-    before?: ReactNode;
-    /** Color variant. */
-    color?: ColorPalette;
-    /** Whether the component is clickable or not. */
-    isClickable?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the chip is currently in a highlighted state or not. */
-    isHighlighted?: boolean;
-    /** Whether the component is selected or not. */
-    isSelected?: boolean;
-    /** Size variant. */
-    size?: ChipSize;
-    /** On "after" element clicked callback. */
-    onAfterClick?: MouseEventHandler;
-    /** On "before" element clicked callback. */
-    onBeforeClick?: MouseEventHandler;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Chip';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ChipProps> = {
-    size: Size.m,
-    theme: Theme.light,
-};
-
-/**
- * Chip component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref) => {
-    const {
-        after,
-        before,
-        children,
-        className,
-        color,
-        disabled,
-        isClickable,
-        isDisabled = disabled,
-        isHighlighted,
-        isSelected,
-        onAfterClick,
-        onBeforeClick,
-        onClick,
-        size,
-        theme,
-        ...forwardedProps
-    } = props;
-    const hasAfterClick = isFunction(onAfterClick);
-    const hasBeforeClick = isFunction(onBeforeClick);
-    const hasOnClick = isFunction(onClick);
-
-    // Adapt color to the theme.
-    const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
-
-    const handleOnBeforeClick = useStopPropagation(onBeforeClick);
-    const handleOnAfterClick = useStopPropagation(onAfterClick);
-
-    return (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        <a
-            {...forwardedProps}
-            ref={ref}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    clickable: Boolean(hasOnClick) || isClickable,
-                    color: chipColor,
-                    isDisabled,
-                    hasAfter: Boolean(after),
-                    hasBefore: Boolean(before),
-                    highlighted: Boolean(isHighlighted),
-                    prefix: CLASSNAME,
-                    selected: Boolean(isSelected),
-                    size,
-                    unselected: Boolean(!isSelected),
-                }),
-            )}
-            role={hasOnClick ? 'button' : undefined}
-            tabIndex={isDisabled || !hasOnClick ? -1 : 0}
-            aria-disabled={(hasOnClick && isDisabled) || undefined}
-            onClick={hasOnClick ? onClick : undefined}
-            onKeyDown={hasOnClick ? onEnterPressed(onClick) : undefined}
-        >
-            {before && (
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-                <div
-                    className={classNames(`${CLASSNAME}__before`, {
-                        [`${CLASSNAME}__before--is-clickable`]: hasBeforeClick,
-                    })}
-                    onClick={handleOnBeforeClick}
-                >
-                    {before}
-                </div>
-            )}
-
-            <div className={`${CLASSNAME}__label`}>{children}</div>
-
-            {after && (
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-                <div
-                    className={classNames(`${CLASSNAME}__after`, {
-                        [`${CLASSNAME}__after--is-clickable`]: hasAfterClick,
-                    })}
-                    onClick={handleOnAfterClick}
-                >
-                    {after}
-                </div>
-            )}
-        </a>
-    );
-});
-Chip.displayName = COMPONENT_NAME;
-Chip.className = CLASSNAME;
-Chip.defaultProps = DEFAULT_PROPS;

package/dist/src/components/chip/ChipGroup.test.tsx

@@ -1,29 +0,0 @@
-import { shallow } from 'enzyme';
-import 'jest-enzyme';
-import React from 'react';
-
-import { Chip } from './Chip';
-import { ChipGroup, ChipGroupProps } from './ChipGroup';
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propOverrides: Partial<ChipGroupProps> = {}) => {
-    const props = {
-        children: [<Chip key="1">Chip 1</Chip>, <Chip key="2">Chip 2</Chip>, <Chip key="3">Chip 3</Chip>],
-        ...propOverrides,
-    };
-    const wrapper = shallow(<ChipGroup {...props} />);
-
-    return { props, wrapper };
-};
-
-describe('<ChipGroup />', () => {
-    // 1. Test render via snapshot (default state of component).
-    describe('Snapshot', () => {
-        it('should render correctly Chip Group component', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-});

package/dist/src/components/chip/ChipGroup.tsx

@@ -1,62 +0,0 @@
-import { Alignment, HorizontalAlignment } from '@lumx/react/components';
-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';
-
-import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
-
-/**
- * Defines the props of the component.
- */
-export interface ChipGroupProps extends GenericProps {
-    /** Chip horizontal alignment. */
-    align?: HorizontalAlignment;
-    /** List of Chip. */
-    children: ReactNode;
-}
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ChipGroupProps> = {
-    align: Alignment.left,
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ChipGroup';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * ChipGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const InternalChipGroup: Comp<ChipGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { align, children, className, ...forwardedProps } = props;
-    const chipGroupClassName = handleBasicClasses({
-        align,
-        prefix: CLASSNAME,
-    });
-
-    return (
-        <div ref={ref} {...forwardedProps} className={classNames(className, chipGroupClassName)}>
-            {children}
-        </div>
-    );
-});
-InternalChipGroup.displayName = COMPONENT_NAME;
-InternalChipGroup.className = CLASSNAME;
-InternalChipGroup.defaultProps = DEFAULT_PROPS;
-
-export const ChipGroup = Object.assign(InternalChipGroup, { useChipGroupNavigation });

package/dist/src/components/chip/__snapshots__/Chip.test.tsx.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Chip /> Snapshot should render correctly Chip component 1`] = `
-<a
-  className="lumx-chip lumx-chip--color-dark lumx-chip--size-m lumx-chip--is-unselected"
-  tabIndex={-1}
->
-  <div
-    className="lumx-chip__label"
-  />
-</a>
-`;

package/dist/src/components/chip/__snapshots__/ChipGroup.test.tsx.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ChipGroup /> Snapshot should render correctly Chip Group component 1`] = `
-<div
-  className="lumx-chip-group lumx-chip-group--align-left"
->
-  <Chip
-    key="1"
-    size="m"
-    theme="light"
-  >
-    Chip 1
-  </Chip>
-  <Chip
-    key="2"
-    size="m"
-    theme="light"
-  >
-    Chip 2
-  </Chip>
-  <Chip
-    key="3"
-    size="m"
-    theme="light"
-  >
-    Chip 3
-  </Chip>
-</div>
-`;

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

@@ -1,2 +0,0 @@
-export * from './Chip';
-export * from './ChipGroup';

package/dist/src/components/comment-block/CommentBlock.stories.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { mdiDotsHorizontal, mdiHeart, mdiReply } from '@lumx/icons';
-import { Button, CommentBlock, Emphasis, Size } from '@lumx/react';
-import { IconButton } from '@lumx/react/components/button/IconButton';
-import { avatarImageKnob } from '@lumx/react/stories/knobs/image';
-
-export default { title: 'LumX components/comment-block/CommentBlock' };
-
-export const WithHeaderActions = ({ theme }: any) => (
-    <CommentBlock
-        hasActions
-        actions={[
-            <Button key="button0" theme={theme} emphasis={Emphasis.low} size={Size.s} leftIcon={mdiHeart}>
-                24 likes
-            </Button>,
-            <Button key="button1" theme={theme} emphasis={Emphasis.low} size={Size.s} leftIcon={mdiReply}>
-                Reply
-            </Button>,
-        ]}
-        theme={theme}
-        avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
-        date="5 days"
-        fullDate="Monday, March 30, 2021 at 4:06 PM"
-        name="Emmitt O. Lum"
-        text="All the rumors have finally died down and many skeptics have tightened their lips, the iPod does support video format now on its fifth generation."
-        headerActions={
-            <IconButton label="Actions" icon={mdiDotsHorizontal} theme={theme} emphasis={Emphasis.low} size={Size.s} />
-        }
-    />
-);