@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/components/flag/__snapshots__/Flag.test.tsx.snap

@@ -1,133 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Flag /> Snapshots and structure should render story 'defaultProps' 1`] = `
-<div
-  className="lumx-flag lumx-flag--color-dark"
->
-  <span
-    className="lumx-flag__label"
-  >
-    hearing
-  </span>
-</div>
-`;
-
-exports[`<Flag /> Snapshots and structure should render story 'withColor' 1`] = `
-[
-  <div
-    className="lumx-flag lumx-flag--color-blue"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      blue
-    </span>
-  </div>,
-  <div
-    className="lumx-flag lumx-flag--color-dark"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      dark
-    </span>
-  </div>,
-  <div
-    className="lumx-flag lumx-flag--color-green"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      green
-    </span>
-  </div>,
-  <div
-    className="lumx-flag lumx-flag--color-primary"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      primary
-    </span>
-  </div>,
-  <div
-    className="lumx-flag lumx-flag--color-red"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      red
-    </span>
-  </div>,
-  <div
-    className="lumx-flag lumx-flag--color-secondary"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      secondary
-    </span>
-  </div>,
-  <div
-    className="lumx-flag lumx-flag--color-yellow"
-  >
-    <Icon
-      className="lumx-flag__icon"
-      icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      size="xxs"
-    />
-    <span
-      className="lumx-flag__label"
-    >
-      yellow
-    </span>
-  </div>,
-]
-`;
-
-exports[`<Flag /> Snapshots and structure should render story 'withIcon' 1`] = `
-<div
-  className="lumx-flag lumx-flag--color-dark"
->
-  <Icon
-    className="lumx-flag__icon"
-    icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-    size="xxs"
-  />
-  <span
-    className="lumx-flag__label"
-  >
-    hearing
-  </span>
-</div>
-`;

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

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

package/dist/src/components/flex-box/FlexBox.stories.tsx

@@ -1,245 +0,0 @@
-import { mdiPencil } from '@lumx/icons';
-import { Alignment, Button, Icon, Orientation, Size } from '@lumx/react';
-import { boolean, number, select, text } from '@storybook/addon-knobs';
-import fromPairs from 'lodash/fromPairs';
-import React from 'react';
-
-import isArray from 'lodash/isArray';
-import { FlexBox, FlexBoxProps } from './FlexBox';
-
-export default { title: 'LumX components/flex-box/FlexBox' };
-
-const DEFAULT_PROPS: any = {};
-
-type FlexBoxPropName = keyof FlexBoxProps;
-const flexViewKnobConfigs: Array<
-    [FlexBoxPropName, typeof boolean] | [string & FlexBoxPropName, typeof select, any[] | Record<any, any>]
-> = [
-    ['fillSpace', boolean],
-    ['noShrink', boolean],
-    ['wrap', boolean],
-    ['gap', select, [DEFAULT_PROPS.gap, Size.tiny, Size.regular, Size.medium, Size.big, Size.huge]],
-    [
-        'hAlign',
-        select,
-        [
-            DEFAULT_PROPS.hAlign,
-            Alignment.center,
-            Alignment.top,
-            Alignment.bottom,
-            Alignment.spaceAround,
-            Alignment.spaceBetween,
-            Alignment.spaceEvenly,
-        ],
-    ],
-    [
-        'vAlign',
-        select,
-        [
-            DEFAULT_PROPS.vAlign,
-            Alignment.center,
-            Alignment.right,
-            Alignment.left,
-            Alignment.spaceAround,
-            Alignment.spaceBetween,
-            Alignment.spaceEvenly,
-        ],
-    ],
-    ['orientation', select, [undefined, Orientation.horizontal, Orientation.vertical]],
-    [
-        'marginAuto',
-        select,
-        {
-            default: DEFAULT_PROPS.marginAuto,
-            bottom: Alignment.bottom,
-            top: Alignment.top,
-            right: Alignment.right,
-            left: Alignment.left,
-            'left & right': [Alignment.left, Alignment.right],
-            'top & bottom': [Alignment.top, Alignment.bottom],
-            'all around': [Alignment.top, Alignment.bottom, Alignment.left, Alignment.right],
-        },
-    ],
-];
-
-const setupFlexBoxKnobs = (group: string, knobs: FlexBoxPropName[] = []) =>
-    fromPairs(
-        knobs.map((knob: FlexBoxPropName) => {
-            const [prop, knobFn, selectOptions] = flexViewKnobConfigs.find(([k]) => k === knob) as any;
-            if (selectOptions) {
-                const defaultValue = isArray(selectOptions) ? selectOptions[0] : DEFAULT_PROPS[prop];
-                return [prop, knobFn(prop, selectOptions, defaultValue, group)];
-            }
-            return [prop, knobFn(prop, DEFAULT_PROPS[prop], group)];
-        }),
-    );
-
-const flexChildKnobs: FlexBoxPropName[] = ['fillSpace', 'noShrink', 'marginAuto'];
-
-export const Flex = () => (
-    <FlexBox {...setupFlexBoxKnobs('-flex container', ['orientation', 'hAlign', 'vAlign', 'wrap', 'gap'])}>
-        <FlexBox {...setupFlexBoxKnobs('start', flexChildKnobs)}>
-            <Icon icon={mdiPencil} />
-        </FlexBox>
-        <FlexBox {...setupFlexBoxKnobs('middle', flexChildKnobs)}>
-            {text('Text content', 'Some text in a div', 'middle')}
-        </FlexBox>
-        <FlexBox {...setupFlexBoxKnobs('end', flexChildKnobs)}>
-            <Button>OK</Button>
-        </FlexBox>
-    </FlexBox>
-);
-
-const hAlign = (prefix?: string) =>
-    select(
-        `${prefix ? `${prefix}: ` : ''}Horizontal align`,
-        [
-            Alignment.center,
-            Alignment.top,
-            Alignment.bottom,
-            Alignment.spaceAround,
-            Alignment.spaceBetween,
-            Alignment.spaceEvenly,
-        ],
-        Alignment.center,
-    );
-const vAlign = (prefix?: string) =>
-    select(
-        `${prefix ? `${prefix}: ` : ''}Vertical align`,
-        [
-            Alignment.center,
-            Alignment.left,
-            Alignment.right,
-            Alignment.spaceAround,
-            Alignment.spaceBetween,
-            Alignment.spaceEvenly,
-        ],
-        Alignment.center,
-    );
-
-const orientation = (prefix?: string) =>
-    select(
-        `${prefix ? `${prefix}: ` : ''}Set orientation`,
-        [Orientation.vertical, Orientation.horizontal],
-        Orientation.vertical,
-    );
-
-const gapSize = (prefix?: string) =>
-    select(`${prefix ? `${prefix}: ` : ''}Gap size`, [Size.regular, Size.medium, Size.big, Size.huge], Size.regular);
-
-export const HorizontalFlex = () => (
-    <FlexBox
-        orientation={Orientation.horizontal}
-        style={{ height: `${number('height (px)', 300)}px`, border: '1px solid red' }}
-    >
-        <Button>Default</Button>
-        <FlexBox hAlign={Alignment.top}>
-            <Button>Top</Button>
-        </FlexBox>
-        <FlexBox
-            fillSpace={boolean('Center button: fill space', true)}
-            hAlign={hAlign('Center button')}
-            vAlign={vAlign('Center button')}
-        >
-            <Button>Center button</Button>
-        </FlexBox>
-        <FlexBox hAlign={Alignment.bottom}>
-            <Button>Bottom</Button>
-        </FlexBox>
-    </FlexBox>
-);
-
-export const VerticalFlex = () => (
-    <FlexBox
-        orientation={Orientation.vertical}
-        style={{ height: `${number('height (px)', 300)}px`, border: '1px solid red' }}
-    >
-        <Button>Default</Button>
-        <FlexBox vAlign={Alignment.left}>
-            <Button>Left</Button>
-        </FlexBox>
-        <FlexBox
-            fillSpace={boolean('Center button: fill space', true)}
-            hAlign={hAlign('Center button')}
-            vAlign={vAlign('Center button')}
-        >
-            <Button>Center button</Button>
-        </FlexBox>
-        <FlexBox vAlign={Alignment.right}>
-            <Button>Right</Button>
-        </FlexBox>
-    </FlexBox>
-);
-
-export const GapSizeFlex = () => (
-    <FlexBox orientation={orientation()} gap={gapSize()}>
-        <Button>Item 1</Button>
-        <FlexBox vAlign={Alignment.left}>
-            <Button>Item 2</Button>
-        </FlexBox>
-        <FlexBox>
-            <Button>Item 3</Button>
-        </FlexBox>
-        <FlexBox vAlign={Alignment.right}>
-            <Button>Item 4</Button>
-        </FlexBox>
-    </FlexBox>
-);
-
-export const WrapFlex = () => (
-    <FlexBox
-        orientation={Orientation.horizontal}
-        wrap={boolean('wrap', true)}
-        style={{ width: `${number('width (px)', 150)}px`, border: '1px solid red' }}
-    >
-        <FlexBox fillSpace orientation={Orientation.vertical}>
-            <Button>Button</Button>
-        </FlexBox>
-        <Button>Button</Button>
-        <Button>Button</Button>
-    </FlexBox>
-);
-
-export const NoShrinkFlex = () => (
-    <FlexBox
-        orientation={Orientation.horizontal}
-        style={{ width: `${number('width (px)', 150)}px`, border: '1px solid red' }}
-    >
-        <Button>Button</Button>
-        <FlexBox noShrink={boolean('no shrink', true)}>{text('Center text', 'Some long text')}</FlexBox>
-        <Button>Button</Button>
-    </FlexBox>
-);
-
-export const Align = () => (
-    <FlexBox orientation={Orientation.horizontal} vAlign={vAlign()} hAlign={hAlign()}>
-        <Button style={{ height: 200 }}>Button</Button>
-        <FlexBox style={{ height: 'fit-content' }}>Some text</FlexBox>
-    </FlexBox>
-);
-
-export const Distribution = () => (
-    <FlexBox
-        style={{
-            width: `${number('width (px)', 720)}px`,
-            height: `${number('height (px)', 300)}px`,
-            border: '1px solid red',
-        }}
-        orientation={orientation()}
-        gap={gapSize()}
-        vAlign={vAlign()}
-        hAlign={hAlign()}
-    >
-        <Button>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
-    </FlexBox>
-);
-
-export const CustomizeElement = () => (
-    <FlexBox as="header" orientation="horizontal" gap="regular">
-        <div>Element 1</div>
-        <div>Element 2</div>
-        <div>Element 2</div>
-    </FlexBox>
-);

package/dist/src/components/flex-box/FlexBox.test.tsx

@@ -1,65 +0,0 @@
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
-import { commonTestsSuite, itShouldRenderStories, Wrapper } from '@lumx/react/testing/utils';
-
-import { FlexBox, FlexBoxProps } from './FlexBox';
-import * as stories from './FlexBox.stories';
-
-const CLASSNAME = FlexBox.className as string;
-
-type SetupProps = Partial<FlexBoxProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
-    const props: FlexBoxProps = {
-        children: null,
-        ...propsOverride,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper = renderer(<FlexBox {...props} />);
-
-    return { props, wrapper };
-};
-
-describe(`<${FlexBox.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, FlexBox);
-    });
-
-    /////////////////////////////
-
-    // 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/flex-box/FlexBox.tsx

@@ -1,98 +0,0 @@
-import { Alignment, Orientation } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import classNames from 'classnames';
-import castArray from 'lodash/castArray';
-import React, { forwardRef, ReactNode } from 'react';
-import { HorizontalAlignment, Size, VerticalAlignment } from '..';
-
-export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
-export type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
-type SpaceAlignment = Extract<Alignment, 'space-between' | 'space-evenly' | 'space-around'>;
-export type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;
-export type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
-
-/**
- * Defines the props of the component.
- */
-export interface FlexBoxProps extends GenericProps {
-    /** Customize the root element. */
-    as?: React.ElementType;
-    /** Children elements. */
-    children?: ReactNode;
-    /** Whether the "content filling space" is enabled or not. */
-    fillSpace?: boolean;
-    /** Gap space between flexbox items. */
-    gap?: GapSize;
-    /** Flex horizontal alignment. */
-    hAlign?: FlexVerticalAlignment;
-    /** Whether the "auto margin" is enabled all around or not. */
-    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];
-    /** Whether the "content shrink" is disabled or not. */
-    noShrink?: boolean;
-    /** Flex direction. */
-    orientation?: Orientation;
-    /** Flex vertical alignment. */
-    vAlign?: FlexHorizontalAlignment;
-    /** Whether the "flex wrap" is enabled or not. */
-    wrap?: boolean;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'FlexBox';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * FlexBox component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const {
-        as: Component = 'div',
-        children,
-        className,
-        fillSpace,
-        gap,
-        hAlign,
-        marginAuto,
-        noShrink,
-        orientation,
-        vAlign,
-        wrap,
-        ...forwardedProps
-    } = props;
-
-    return (
-        <Component
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),
-                    vAlign,
-                    hAlign,
-                    gap,
-                }),
-                wrap && `${CLASSNAME}--wrap`,
-                fillSpace && `${CLASSNAME}--fill-space`,
-                noShrink && `${CLASSNAME}--no-shrink`,
-                marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),
-            )}
-        >
-            {children}
-        </Component>
-    );
-});
-FlexBox.displayName = COMPONENT_NAME;
-FlexBox.className = CLASSNAME;