@lumx/react 3.1.1 → 3.1.3-alpha.0

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

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

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

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

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

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

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

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

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