@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.22

package/src/components/flag/Flag.stories.tsx

@@ -0,0 +1,48 @@
+import { mdiHeart } from '@lumx/icons';
+import { ColorPalette, Flag } from '@lumx/react';
+import { colorArgType } from '@lumx/react/stories/controls/color';
+import { iconArgType } from '@lumx/react/stories/controls/icons';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+
+export default {
+    title: 'LumX components/flag/Flag',
+    component: Flag,
+    argTypes: { color: colorArgType, icon: iconArgType },
+    args: { ...Flag.defaultProps, label: 'Label' },
+};
+
+/**
+ * Default flag with label
+ */
+export const Default = {};
+
+/**
+ * With icon
+ */
+export const WithIcon = { args: { icon: mdiHeart } };
+
+/**
+ * All `color` variants
+ */
+export const AllColors = {
+    ...WithIcon,
+    argTypes: { color: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: {
+                cols: { key: 'color', options: withUndefined(ColorPalette) },
+            },
+        }),
+    ],
+};
+
+/**
+ * Truncate text option
+ */
+export const Truncate = {
+    args: { label: loremIpsum('tiny'), truncate: true },
+    decorators: [withResizableBox()],
+};

package/src/components/flag/Flag.test.tsx

@@ -0,0 +1,62 @@
+import { ColorPalette, Theme } from '@lumx/react';
+import { mdiAbTesting } from '@lumx/icons';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
+
+import { Flag, FlagProps } from './Flag';
+
+const CLASSNAME = Flag.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propOverrides: Partial<FlagProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const props = { label: 'default', ...propOverrides };
+
+    render(<Flag {...props} />, { wrapper });
+    const flag = getByClassName(document.body, CLASSNAME);
+    const icon = queryByClassName(flag, `${CLASSNAME}__icon`);
+
+    return { props, flag, icon };
+};
+
+describe(`<${Flag.displayName} />`, () => {
+    describe('Props', () => {
+        it('should render default', () => {
+            const { flag, icon } = setup();
+            expect(flag).toBeInTheDocument();
+            expect(flag).toHaveClass(CLASSNAME);
+            expect(flag).toHaveClass(`${CLASSNAME}--color-dark`);
+            expect(icon).not.toBeInTheDocument();
+        });
+
+        it('should render icon', () => {
+            const { icon } = setup({ icon: mdiAbTesting });
+            expect(icon).toBeInTheDocument();
+        });
+
+        it('should render dark theme', () => {
+            const { flag } = setup({ theme: Theme.dark });
+            expect(flag).toHaveClass(`${CLASSNAME}--color-light`);
+        });
+
+        it('should render custom color', () => {
+            const { flag } = setup({ color: ColorPalette.red });
+            expect(flag).toHaveClass(`${CLASSNAME}--color-red`);
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'flag',
+        forwardAttributes: 'flag',
+        applyTheme: {
+            affects: [{ element: 'flag', classModifier: 'color', inverted: true }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+});

package/src/components/flag/Flag.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+
+import { ColorPalette, Icon, Size, Theme, Text } from '@lumx/react';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+export interface FlagProps extends GenericProps, HasTheme {
+    /** Color of the component. */
+    color?: ColorPalette;
+    /** Icon to use before the label. */
+    icon?: string;
+    /** Text label of the flag. */
+    label: React.ReactNode;
+    /** Enable text truncate on overflow */
+    truncate?: boolean;
+}
+
+const COMPONENT_NAME = 'Flag';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const DEFAULT_PROPS: Partial<FlagProps> = {};
+
+/**
+ * Flag component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Flag = forwardRef<FlagProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { label, icon, color, className, theme = defaultTheme, truncate, ...forwardedProps } = props;
+    const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
+    const isTruncated = !!truncate;
+
+    return (
+        <div
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor, isTruncated }))}
+            ref={ref}
+        >
+            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}
+            <Text as="span" truncate={isTruncated} typography="overline" className={`${CLASSNAME}__label`}>
+                {label}
+            </Text>
+        </div>
+    );
+});
+Flag.displayName = COMPONENT_NAME;
+Flag.className = CLASSNAME;
+Flag.defaultProps = DEFAULT_PROPS;

package/src/components/flag/index.ts

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

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

@@ -0,0 +1,156 @@
+import { Alignment, Button, IconButton, Orientation, Size, Text } from '@lumx/react';
+
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+import { mdiAtom } from '@lumx/icons';
+import mergeWith from 'lodash/fp/mergeWith';
+import castArray from 'lodash/castArray';
+import { FlexBox } from './FlexBox';
+
+const gapSizes = [Size.tiny, Size.regular, Size.medium, Size.big, Size.huge];
+const spaceAlignments = [Alignment.spaceBetween, Alignment.spaceEvenly, Alignment.spaceAround];
+const verticalAlignments = [...spaceAlignments, Alignment.top, Alignment.center, Alignment.bottom];
+const horizontalAlignments = [...spaceAlignments, Alignment.left, Alignment.center, Alignment.right];
+
+export default {
+    title: 'LumX components/flex-box/FlexBox',
+    component: FlexBox,
+    args: FlexBox.defaultProps,
+    argTypes: {
+        orientation: getSelectArgType(Orientation),
+        fillSpace: { control: 'boolean' },
+        wrap: { control: 'boolean' },
+        noShrink: { control: 'boolean' },
+        hAlign: getSelectArgType(verticalAlignments),
+        vAlign: getSelectArgType(horizontalAlignments),
+        gap: getSelectArgType(gapSizes),
+    },
+};
+
+/** Without config, FlexBox acts as a simple <div> */
+export const NoConfig = {
+    args: {
+        style: { width: '100%', height: '100%' },
+        children: [
+            <Button key="1">Button 1</Button>,
+            <Text key="2" as="p">
+                Some paragraph
+            </Text>,
+            <Button key="3">Button 3</Button>,
+        ],
+    },
+    decorators: [withWrapper({ style: { border: '1px dashed red' } })],
+};
+
+/** Horizontal orientation with all possible item alignments */
+export const Horizontal = {
+    ...NoConfig,
+    args: {
+        ...NoConfig.args,
+        orientation: Orientation.horizontal,
+    },
+    decorators: [
+        withCombinations({
+            cellStyle: { border: '1px dashed red' },
+            firstColStyle: { whiteSpace: 'nowrap', width: '1%' },
+            combinations: { rows: { key: 'vAlign', options: withUndefined(horizontalAlignments) } },
+        }),
+    ],
+};
+
+/** Vertical orientation with all possible item alignments */
+export const Vertical = {
+    ...NoConfig,
+    args: {
+        ...NoConfig.args,
+        orientation: Orientation.vertical,
+    },
+    decorators: [
+        withCombinations({
+            cellStyle: { border: '1px dashed red', height: '200px' },
+            firstColStyle: { whiteSpace: 'nowrap', width: '1%' },
+            combinations: { rows: { key: 'hAlign', options: withUndefined(verticalAlignments) } },
+        }),
+    ],
+};
+
+/** All gap sizes */
+export const GapSizes = {
+    ...Horizontal,
+    argTypes: {
+        gap: { control: false },
+    },
+    decorators: [
+        ...NoConfig.decorators,
+        withCombinations({
+            combinations: {
+                rows: { key: 'gap', options: withUndefined(gapSizes) },
+            },
+        }),
+    ],
+};
+
+/** Wrap items in new row or column */
+export const Wrap = {
+    args: {
+        ...NoConfig.args,
+        orientation: Orientation.horizontal,
+        wrap: true,
+    },
+    argTypes: {
+        wrap: { control: false },
+    },
+    decorators: [
+        withWrapper({ style: { border: '1px dashed red', width: '100px', height: '100px', margin: '20px auto' } }),
+        withCombinations({
+            cellStyle: { width: '50%' },
+            combinations: {
+                cols: { key: 'orientation', options: Object.values(Orientation) },
+                rows: { 'No wrap': { wrap: false }, Wrap: { wrap: true } },
+            },
+        }),
+    ],
+};
+
+/** Prevent FlexBox from shrinking into a parent flex box */
+export const NoShrink = {
+    args: {
+        children: <Text as="p">Some paragraph</Text>,
+        noShrink: true,
+    },
+    decorators: [
+        withWrapper({
+            style: { display: 'flex', border: '1px dashed red', width: 100, height: 100, margin: '20px auto' },
+        }),
+    ],
+};
+
+/** All combinations of margin auto values */
+export const MarginAuto = {
+    args: { children: <IconButton label="" icon={mdiAtom} /> },
+    decorators: [
+        withWrapper({
+            style: { display: 'flex', border: '1px dashed red', width: 100, height: 100, margin: '20px auto' },
+        }),
+        withCombinations({
+            combinations: {
+                rows: {
+                    key: 'marginAuto',
+                    options: [undefined, Alignment.left, Alignment.top, [Alignment.left, Alignment.top]],
+                },
+                cols: {
+                    key: 'marginAuto',
+                    options: [undefined, Alignment.right, Alignment.bottom, [Alignment.right, Alignment.bottom]],
+                },
+            },
+            combinator: mergeWith((a, b) => {
+                if (a && b) {
+                    return [...castArray(a), ...castArray(b)].filter(Boolean);
+                }
+                return undefined;
+            }),
+        }),
+    ],
+};

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

@@ -0,0 +1,24 @@
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
+import { FlexBox, FlexBoxProps } from './FlexBox';
+
+const CLASSNAME = FlexBox.className as string;
+
+type SetupProps = Partial<FlexBoxProps>;
+
+const setup = (propsOverride: SetupProps = {}) => {
+    const props: FlexBoxProps = {
+        children: null,
+        ...propsOverride,
+    };
+    render(<FlexBox {...props} />);
+    const flexBox = queryByClassName(document.body, CLASSNAME);
+    return { props, flexBox };
+};
+
+describe(`<${FlexBox.displayName}>`, () => {
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'flexBox', forwardAttributes: 'flexBox' });
+});

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

@@ -0,0 +1,100 @@
+import { ReactNode } from 'react';
+
+import classNames from 'classnames';
+import castArray from 'lodash/castArray';
+
+import { Alignment, Orientation, HorizontalAlignment, Size, VerticalAlignment } from '@lumx/core/js/constants';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+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 = forwardRef<FlexBoxProps, HTMLDivElement>((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;

package/src/components/flex-box/index.ts

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

package/src/components/generic-block/GenericBlock.stories.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { mdiPencil } from '@lumx/icons';
+import { GenericBlock, Button, Icon, Size, Thumbnail } from '@lumx/react';
+import { IMAGES } from '@lumx/react/stories/controls/image';
+
+export default { title: 'LumX components/generic-block/GenericBlock' };
+
+const redBorderStyle = { border: '1px solid red' };
+
+export const SectionsInProps = ({ theme }) => (
+    <GenericBlock
+        figure={<Icon icon={mdiPencil} size={Size.m} />}
+        actionsProps={{ style: redBorderStyle }}
+        figureProps={{ style: redBorderStyle }}
+        contentProps={{ style: redBorderStyle }}
+        actions={<Button theme={theme}>Button</Button>}
+    >
+        Content
+    </GenericBlock>
+);
+
+export const SectionsInChildren = ({ theme }) => (
+    <GenericBlock>
+        <GenericBlock.Figure style={redBorderStyle}>
+            <Icon icon={mdiPencil} size={Size.m} />
+        </GenericBlock.Figure>
+        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
+        <GenericBlock.Actions style={redBorderStyle}>
+            <Button theme={theme}>Button</Button>
+        </GenericBlock.Actions>
+    </GenericBlock>
+);
+
+const Template = ({ theme, ...props }) => (
+    <GenericBlock {...props}>
+        <GenericBlock.Figure style={redBorderStyle} {...props.figureProps}>
+            <Icon icon={mdiPencil} size={Size.m} />
+        </GenericBlock.Figure>
+        <GenericBlock.Content style={redBorderStyle} {...props.contentProps}>
+            {props.content || 'Content'}
+        </GenericBlock.Content>
+        <GenericBlock.Actions style={redBorderStyle} {...props.actionsProps}>
+            <Button theme={theme}>Button</Button>
+        </GenericBlock.Actions>
+    </GenericBlock>
+);
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+    orientation: 'vertical',
+};
+
+export const VerticalAlignCenter = Template.bind({});
+VerticalAlignCenter.args = {
+    orientation: 'vertical',
+    vAlign: 'center',
+};
+
+export const VerticalOverflow = Template.bind({});
+VerticalOverflow.args = {
+    orientation: 'vertical',
+    style: { width: 300 },
+    content: (
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            _________________________________________________________________
+        </span>
+    ),
+};
+
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+    orientation: 'horizontal',
+};
+
+export const HorizontalAlignRightBottom = Template.bind({});
+HorizontalAlignRightBottom.args = {
+    orientation: 'horizontal',
+    vAlign: 'right',
+    hAlign: 'bottom',
+};
+
+export const HorizontalOverflow = Template.bind({});
+HorizontalOverflow.args = {
+    orientation: 'horizontal',
+    style: { width: 300 },
+    content: (
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            _________________________________________________________________
+        </span>
+    ),
+};
+
+export const GapSizes = ({ theme }) =>
+    [Size.regular, Size.big, Size.huge].map((gap) => (
+        <GenericBlock key={gap} orientation="vertical" gap={gap} style={{ marginBottom: 40 }}>
+            <GenericBlock.Figure style={redBorderStyle}>
+                <Icon icon={mdiPencil} size={Size.m} />
+            </GenericBlock.Figure>
+            <GenericBlock.Content style={redBorderStyle}>
+                <h2>{gap} gap size</h2>
+                <p>block description</p>
+            </GenericBlock.Content>
+            <GenericBlock.Actions style={redBorderStyle}>
+                <Button theme={theme}>Button</Button>
+            </GenericBlock.Actions>
+        </GenericBlock>
+    ));
+
+export const AsAFigure = () => (
+    <GenericBlock as="figure" orientation="vertical" style={{ width: '150px' }}>
+        <GenericBlock.Figure>
+            <Thumbnail alt="" image={IMAGES.portrait1s200} aspectRatio="horizontal" />
+        </GenericBlock.Figure>
+        <GenericBlock.Content as="figcaption">Rocky mountain landscape</GenericBlock.Content>
+    </GenericBlock>
+);
+
+export const AsAnArticle = () => (
+    <GenericBlock as="article" orientation="horizontal">
+        <GenericBlock.Figure>
+            <Thumbnail alt="" size="xl" image={IMAGES.portrait1s200} aspectRatio="horizontal" />
+        </GenericBlock.Figure>
+        <GenericBlock.Content>
+            <h2>Article title</h2>
+            <p>Article description...</p>
+        </GenericBlock.Content>
+    </GenericBlock>
+);