@lumx/react 3.0.6 → 3.0.7-alpha.1

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

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

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

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

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

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

@@ -0,0 +1,154 @@
+import { Color, 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?: Color;
+    /** 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

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

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

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

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

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

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

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