@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/autocomplete/AutocompleteMultiple.test.tsx

@@ -0,0 +1,94 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { List, ListItem, Size } from '@lumx/react';
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { AutocompleteMultiple, AutocompleteMultipleProps } from './AutocompleteMultiple';
+
+import { CITIES as suggestions } from './__mockData__';
+
+const CLASSNAME = AutocompleteMultiple.className as string;
+
+type SetupProps = Partial<AutocompleteMultipleProps>;
+
+interface Suggestion {
+    id: string;
+    text: string;
+}
+
+/**
+ * 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(<AutocompleteMultiple {...props} />);
+
+    return { props, wrapper };
+};
+
+describe(`<${AutocompleteMultiple.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        // Here is an example of a basic rendering check, with snapshot.
+
+        it('should render correctly', () => {
+            const { wrapper } = setup({
+                children: (
+                    <List isClickable>
+                        {suggestions.map((suggestion: Suggestion) => (
+                            <ListItem size={Size.tiny} key={suggestion.id}>
+                                <div>{suggestion.text}</div>
+                            </ListItem>
+                        ))}
+                    </List>
+                ),
+                chips: [
+                    {
+                        id: 'lyon',
+                        text: 'Lyon',
+                    },
+                    {
+                        id: 'montevideo',
+                        text: 'Montevideo',
+                    },
+                ],
+                label: 'Field label',
+                isOpen: true,
+                isRequired: true,
+                onChange: jest.fn(),
+                value: '',
+            });
+            expect(wrapper).toMatchSnapshot();
+
+            expect(wrapper).toExist();
+
+            expect(wrapper).toHaveClassName(CLASSNAME);
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        // Nothing to do here.
+    });
+
+    // 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.
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -0,0 +1,156 @@
+import { mdiClose } from '@lumx/icons';
+import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
+
+import { Comp } 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 AutocompleteMultipleProps extends AutocompleteProps {
+    /** Selected values. */
+    values: any[];
+    /** Alignment of the chips in the autocomplete. */
+    chipsAlignment?: HorizontalAlignment;
+    /** Selected value render function. Default: Renders the value inside of a Chip. */
+    selectedChipRender(
+        choice: any,
+        index: number,
+        onClear?: (event: React.MouseEvent, choice: any) => void,
+        isDisabled?: boolean,
+    ): ReactNode | string;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'AutocompleteMultiple';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<AutocompleteMultipleProps> = {
+    closeOnClickAway: true,
+    closeOnEscape: true,
+    selectedChipRender(choice, index, onClear, isDisabled) {
+        const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);
+        return (
+            <Chip
+                key={index}
+                after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}
+                isDisabled={isDisabled}
+                size={Size.s}
+                onAfterClick={onClick}
+                onClick={onClick}
+            >
+                {choice}
+            </Chip>
+        );
+    },
+    values: [],
+};
+
+/**
+ * AutocompleteMultiple component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        anchorToInput,
+        children,
+        // `chipsAlignment` needs to be here to remove it from `forwardedProps`.
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        chipsAlignment,
+        className,
+        closeOnClickAway,
+        closeOnEscape,
+        fitToAnchorWidth,
+        hasError,
+        helper,
+        icon,
+        inputRef,
+        clearButtonProps,
+        isDisabled,
+        isRequired,
+        isOpen,
+        isValid,
+        label,
+        name,
+        offset,
+        onBlur,
+        onChange,
+        onClear,
+        onClose,
+        onFocus,
+        onInfiniteScroll,
+        onKeyDown,
+        placeholder,
+        placement,
+        selectedChipRender,
+        shouldFocusOnClose,
+        theme,
+        type,
+        value,
+        values,
+        ...forwardedProps
+    } = props;
+
+    return (
+        <Autocomplete
+            ref={ref}
+            {...forwardedProps}
+            anchorToInput={anchorToInput}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                }),
+            )}
+            name={name}
+            value={value}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            onBlur={onBlur}
+            shouldFocusOnClose={shouldFocusOnClose}
+            onFocus={onFocus}
+            hasError={hasError}
+            helper={helper}
+            icon={icon}
+            inputRef={inputRef}
+            chips={values && values.map((chip: any, index: number) => selectedChipRender(chip, index, onClear))}
+            isDisabled={isDisabled}
+            isRequired={isRequired}
+            clearButtonProps={clearButtonProps}
+            isValid={isValid}
+            label={label}
+            placeholder={placeholder}
+            theme={theme}
+            type={type}
+            isOpen={isOpen}
+            closeOnClick={false}
+            closeOnClickAway={closeOnClickAway}
+            closeOnEscape={closeOnEscape}
+            onClose={onClose}
+            offset={offset}
+            placement={placement}
+            fitToAnchorWidth={fitToAnchorWidth}
+            onInfiniteScroll={onInfiniteScroll}
+        >
+            {children}
+        </Autocomplete>
+    );
+});
+AutocompleteMultiple.displayName = COMPONENT_NAME;
+AutocompleteMultiple.className = CLASSNAME;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS;

package/dist/src/components/autocomplete/__mockData__/index.ts

@@ -0,0 +1,34 @@
+export const CITIES = [
+    {
+        text: 'Los Angeles',
+        id: 'losangeles',
+    },
+    {
+        text: 'San Francisco',
+        id: 'sanfrancisco',
+    },
+    {
+        text: 'Paris',
+        id: 'paris',
+    },
+    {
+        text: 'Montpellier',
+        id: 'montpellier',
+    },
+    {
+        text: 'Bordeaux',
+        id: 'bordeaux',
+    },
+    {
+        text: 'Toulouse',
+        id: 'toulouse',
+    },
+    {
+        text: 'Lyon',
+        id: 'lyon',
+    },
+    {
+        text: 'Montevideo',
+        id: 'montevideo',
+    },
+];

package/dist/src/components/autocomplete/__snapshots__/Autocomplete.test.tsx.snap

@@ -0,0 +1,213 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Autocomplete> Props should render correctly when the dropdown is closed 1`] = `
+<div
+  className="lumx-autocomplete"
+>
+  <TextField
+    inputRef={[Function]}
+    onChange={[MockFunction]}
+    textFieldRef={
+      {
+        "current": null,
+      }
+    }
+    theme="light"
+    type="text"
+    value=""
+  />
+  <Dropdown
+    anchorRef={
+      {
+        "current": null,
+      }
+    }
+    closeOnClick={false}
+    closeOnClickAway={true}
+    closeOnEscape={true}
+    fitToAnchorWidth={true}
+    fitWithinViewportHeight={true}
+    focusAnchorOnClose={true}
+    isOpen={false}
+    placement="bottom-start"
+    shouldFocusOnOpen={false}
+  >
+    <List
+      isClickable={true}
+      tabIndex={-1}
+    >
+      <ListItem
+        key="losangeles"
+        size="tiny"
+      >
+        <div>
+          Los Angeles
+        </div>
+      </ListItem>
+      <ListItem
+        key="sanfrancisco"
+        size="tiny"
+      >
+        <div>
+          San Francisco
+        </div>
+      </ListItem>
+      <ListItem
+        key="paris"
+        size="tiny"
+      >
+        <div>
+          Paris
+        </div>
+      </ListItem>
+      <ListItem
+        key="montpellier"
+        size="tiny"
+      >
+        <div>
+          Montpellier
+        </div>
+      </ListItem>
+      <ListItem
+        key="bordeaux"
+        size="tiny"
+      >
+        <div>
+          Bordeaux
+        </div>
+      </ListItem>
+      <ListItem
+        key="toulouse"
+        size="tiny"
+      >
+        <div>
+          Toulouse
+        </div>
+      </ListItem>
+      <ListItem
+        key="lyon"
+        size="tiny"
+      >
+        <div>
+          Lyon
+        </div>
+      </ListItem>
+      <ListItem
+        key="montevideo"
+        size="tiny"
+      >
+        <div>
+          Montevideo
+        </div>
+      </ListItem>
+    </List>
+  </Dropdown>
+</div>
+`;
+
+exports[`<Autocomplete> Snapshots and structure should render correctly 1`] = `
+<div
+  className="lumx-autocomplete"
+>
+  <TextField
+    inputRef={[Function]}
+    isRequired={true}
+    label="Field label"
+    onChange={[MockFunction]}
+    textFieldRef={
+      {
+        "current": null,
+      }
+    }
+    theme="light"
+    type="text"
+    value=""
+  />
+  <Dropdown
+    anchorRef={
+      {
+        "current": null,
+      }
+    }
+    closeOnClick={false}
+    closeOnClickAway={true}
+    closeOnEscape={true}
+    fitToAnchorWidth={true}
+    fitWithinViewportHeight={true}
+    focusAnchorOnClose={true}
+    isOpen={true}
+    placement="bottom-start"
+    shouldFocusOnOpen={false}
+  >
+    <List
+      isClickable={true}
+      tabIndex={-1}
+    >
+      <ListItem
+        key="losangeles"
+        size="tiny"
+      >
+        <div>
+          Los Angeles
+        </div>
+      </ListItem>
+      <ListItem
+        key="sanfrancisco"
+        size="tiny"
+      >
+        <div>
+          San Francisco
+        </div>
+      </ListItem>
+      <ListItem
+        key="paris"
+        size="tiny"
+      >
+        <div>
+          Paris
+        </div>
+      </ListItem>
+      <ListItem
+        key="montpellier"
+        size="tiny"
+      >
+        <div>
+          Montpellier
+        </div>
+      </ListItem>
+      <ListItem
+        key="bordeaux"
+        size="tiny"
+      >
+        <div>
+          Bordeaux
+        </div>
+      </ListItem>
+      <ListItem
+        key="toulouse"
+        size="tiny"
+      >
+        <div>
+          Toulouse
+        </div>
+      </ListItem>
+      <ListItem
+        key="lyon"
+        size="tiny"
+      >
+        <div>
+          Lyon
+        </div>
+      </ListItem>
+      <ListItem
+        key="montevideo"
+        size="tiny"
+      >
+        <div>
+          Montevideo
+        </div>
+      </ListItem>
+    </List>
+  </Dropdown>
+</div>
+`;

package/dist/src/components/autocomplete/__snapshots__/AutocompleteMultiple.test.tsx.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AutocompleteMultiple> Snapshots and structure should render correctly 1`] = `
+<Autocomplete
+  anchorToInput={false}
+  chips={[]}
+  className="lumx-autocomplete-multiple"
+  closeOnClick={false}
+  closeOnClickAway={true}
+  closeOnEscape={true}
+  isOpen={true}
+  isRequired={true}
+  label="Field label"
+  onChange={[MockFunction]}
+  shouldFocusOnClose={false}
+  value=""
+>
+  <List
+    isClickable={true}
+    tabIndex={-1}
+  >
+    <ListItem
+      key="losangeles"
+      size="tiny"
+    >
+      <div>
+        Los Angeles
+      </div>
+    </ListItem>
+    <ListItem
+      key="sanfrancisco"
+      size="tiny"
+    >
+      <div>
+        San Francisco
+      </div>
+    </ListItem>
+    <ListItem
+      key="paris"
+      size="tiny"
+    >
+      <div>
+        Paris
+      </div>
+    </ListItem>
+    <ListItem
+      key="montpellier"
+      size="tiny"
+    >
+      <div>
+        Montpellier
+      </div>
+    </ListItem>
+    <ListItem
+      key="bordeaux"
+      size="tiny"
+    >
+      <div>
+        Bordeaux
+      </div>
+    </ListItem>
+    <ListItem
+      key="toulouse"
+      size="tiny"
+    >
+      <div>
+        Toulouse
+      </div>
+    </ListItem>
+    <ListItem
+      key="lyon"
+      size="tiny"
+    >
+      <div>
+        Lyon
+      </div>
+    </ListItem>
+    <ListItem
+      key="montevideo"
+      size="tiny"
+    >
+      <div>
+        Montevideo
+      </div>
+    </ListItem>
+  </List>
+</Autocomplete>
+`;

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

@@ -0,0 +1,2 @@
+export * from './Autocomplete';
+export * from './AutocompleteMultiple';

package/dist/src/components/avatar/Avatar.stories.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { select } from '@storybook/addon-knobs';
+
+import { mdiDelete, mdiEye, mdiPencil, mdiStar } from '@lumx/icons';
+import { Badge, ColorPalette, FlexBox, Icon, IconButton, Size } from '@lumx/react';
+import { AVATAR_IMAGES, avatarImageKnob, PORTRAIT_IMAGES } from '@lumx/react/stories/knobs/image';
+import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
+
+import { Avatar } from './Avatar';
+
+export default { title: 'LumX components/avatar/Avatar' };
+
+const AVATAR_SIZES = [Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
+
+/**
+ * Avatar stories showing a simple Avatar with different sizes.
+ * @return component with different sizes.
+ */
+export const Sizes = () =>
+    AVATAR_SIZES.map((size) => (
+        <Avatar
+            key={size}
+            className="lumx-spacing-margin-bottom"
+            image={avatarImageKnob('Avatar', AVATAR_IMAGES.avatar1)}
+            alt={size}
+            size={size}
+        />
+    ));
+
+/**
+ * Avatar story showing a simple avatar with different actions.
+ * @return component with different actions.
+ */
+export const WithActions = () =>
+    AVATAR_SIZES.map((size) => (
+        <Avatar
+            key={size}
+            image={avatarImageKnob('Avatar', AVATAR_IMAGES.avatar2)}
+            alt={size}
+            size={size}
+            actions={
+                <FlexBox orientation="horizontal" gap="regular" vAlign="center">
+                    <IconButton label="Edit" emphasis="low" hasBackground icon={mdiPencil} size="s" />
+                    <IconButton label="See" emphasis="low" hasBackground icon={mdiEye} size="s" />
+                    <IconButton label="Delete" emphasis="low" hasBackground icon={mdiDelete} size="s" />
+                </FlexBox>
+            }
+        />
+    ));
+
+export const WithBadge = () =>
+    AVATAR_SIZES.map((size) => (
+        <Avatar
+            key={size}
+            className="lumx-spacing-margin-bottom"
+            image={avatarImageKnob('Avatar', AVATAR_IMAGES.avatar3)}
+            alt={size}
+            badge={
+                <Badge color={select('Colors', ColorPalette, ColorPalette.blue)}>
+                    <Icon icon={mdiStar} />
+                </Badge>
+            }
+            size={size}
+        />
+    ));
+
+export const WithRectangularImage = () =>
+    AVATAR_SIZES.map((size) => (
+        <Avatar
+            key={size}
+            className="lumx-spacing-margin-bottom"
+            image={PORTRAIT_IMAGES.portrait3}
+            alt={size}
+            size={size}
+        />
+    ));
+
+export const Clickable = () => {
+    const baseProps = { size: 'l', image: AVATAR_IMAGES.avatar2, alt: 'avatar2' } as any;
+    return (
+        <>
+            <p>As a button</p>
+            <Avatar {...baseProps} onClick={() => alert('clicked on avatar')} />
+
+            <p>As a link</p>
+            <Avatar {...baseProps} linkProps={{ href: 'https://example.com' }} />
+
+            <p>As a custom link component</p>
+            <Avatar {...baseProps} linkAs={CustomLink} />
+        </>
+    );
+};