@lumx/react 3.0.7 → 3.1.0

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

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

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

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

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

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

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