@lumx/react 3.0.2-alpha-react-utils.3 → 3.0.3-alpha.1

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.2-alpha-react-utils.3",
-        "@lumx/icons": "^3.0.2-alpha-react-utils.3",
+        "@lumx/core": "^3.0.3-alpha.1",
+        "@lumx/icons": "^3.0.3-alpha.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.0.2-alpha-react-utils.3",
-    "gitHead": "190431ec45dfcb8ee619060ca97eeda6a88a9db4"
+    "version": "3.0.3-alpha.1",
+    "gitHead": "8bbdcaeec0b5b6556fdac9bdf81a56ef47c77bcc"
 }

package/src/components/generic-block/GenericBlock.tsx

@@ -6,6 +6,7 @@ import { Comp, isComponentType } from '@lumx/react/utils/type';
 import { getRootClassName } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
+import { GenericBlockGapSize } from '@lumx/react/components/generic-block/constants';
 
 export interface GenericBlockProps extends FlexBoxProps {
     /**
@@ -46,6 +47,10 @@ export interface GenericBlockProps extends FlexBoxProps {
      * props to forward to the figure element.
      */
     figureProps?: Omit<FlexBoxProps, 'children'>;
+    /**
+     * Gap space between sections.
+     */
+    gap?: GenericBlockGapSize;
 }
 
 /**
@@ -68,22 +73,29 @@ const DEFAULT_PROPS: Partial<GenericBlockProps> = {
 
 type BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;
 
+interface GenericBlockSectionProps extends FlexBoxProps {
+    /**
+     * Gap space between items.
+     */
+    gap?: GenericBlockGapSize;
+}
+
 interface GenericBlock extends BaseGenericBlock {
     /**
      * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject
      * the "figure" section of the block (instead of using `figure` and `figureProps` props).
      */
-    Figure: Comp<FlexBoxProps>;
+    Figure: Comp<GenericBlockSectionProps>;
     /**
      * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject
      * the "content" section of the block (instead of using `content` and `contentProps` props).
      */
-    Content: Comp<FlexBoxProps>;
+    Content: Comp<GenericBlockSectionProps>;
     /**
      * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject
      * the "actions" section of the block (instead of using `actions` and `actionsProps` props).
      */
-    Actions: Comp<FlexBoxProps>;
+    Actions: Comp<GenericBlockSectionProps>;
 }
 
 const Figure = noop.bind({}) as Comp<FlexBoxProps>;

package/src/components/generic-block/constants.ts

@@ -0,0 +1,9 @@
+import pick from 'lodash/pick';
+import { Size } from '@lumx/react';
+import { ValueOf } from '@lumx/react/utils/type';
+
+/**
+ * Accepted gap sizes for the generic block.
+ */
+export const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
+export type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;

package/src/components/generic-block/index.ts

@@ -1 +1,2 @@
 export * from './GenericBlock';
+export { GenericBlockGapSize } from './constants';

package/src/components/inline-list/InlineList.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { mdiEarth } from '@lumx/icons';
+import { ColorPalette, ColorVariant, Icon, Text, TypographyCustom, TypographyInterface } from '@lumx/react';
+import { withResizableBox } from '@lumx/react/stories/withResizableBox';
+import { InlineList } from '.';
+
+const ALL_TYPOGRAPHY = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
+
+export default {
+    title: 'LumX components/inline-list/InlineList',
+    argTypes: {
+        typography: { control: 'select', options: ALL_TYPOGRAPHY },
+        color: { control: 'select', options: ColorPalette },
+        colorVariant: { control: 'select', options: ColorVariant },
+    },
+};
+
+export const Default = (args: any) => (
+    <InlineList as="p" {...args}>
+        <span>Some text</span>
+        <span>Some other text</span>
+        <span>Some other other text</span>
+    </InlineList>
+);
+
+export const MixedNoWrapAndTruncate = (args: any) => (
+    <InlineList typography="body1" color="dark" colorVariant="L2" {...args} style={{ width: '100%' }}>
+        <Text as="span" truncate>
+            Very very very very very long text
+        </Text>
+        <Text as="span" noWrap>
+            <Icon icon={mdiEarth} />
+            Some text
+        </Text>
+        <Text as="span" truncate>
+            Very very very very very long text
+        </Text>
+    </InlineList>
+);
+MixedNoWrapAndTruncate.decorators = [withResizableBox({ width: 400 })];

package/src/components/inline-list/InlineList.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite } from '@lumx/react/testing/utils';
+import { InlineList, InlineListProps } from '.';
+
+const setup = (props: Partial<InlineListProps> = {}) => {
+    const wrapper = shallow(<InlineList {...props} />);
+    return { props, wrapper };
+};
+
+describe(`<${InlineList.displayName}>`, () => {
+    describe('Snapshots and structure', () => {
+        it('should render default', () => {
+            const { wrapper } = setup({ children: ['Some text', 'Some other text'] });
+            expect(wrapper).toHaveDisplayName('ul');
+            expect(wrapper.prop('className')).toBe(InlineList.className);
+            expect(wrapper.find('li')).toHaveLength(2);
+        });
+
+        it('should render with typography', () => {
+            const { wrapper } = setup({ typography: 'body2', children: 'Some text' });
+            expect(wrapper).toHaveClassName('lumx-typography-body2');
+        });
+
+        it('should render with color', () => {
+            const { wrapper } = setup({ color: 'blue', children: 'Some text' });
+            expect(wrapper).toHaveClassName('lumx-color-font-blue-N');
+        });
+
+        it('should render with color and variant', () => {
+            const { wrapper } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
+            expect(wrapper).toHaveClassName('lumx-color-font-blue-D2');
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: InlineList.className });
+});

package/src/components/inline-list/InlineList.tsx

@@ -0,0 +1,80 @@
+import React, { Children, forwardRef, isValidElement } from 'react';
+
+import classNames from 'classnames';
+
+import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getFontColorClassName, getRootClassName, getTypographyClassName } from '@lumx/react/utils/className';
+
+/**
+ * Defines the props of the component.
+ */
+export interface InlineListProps extends GenericProps {
+    /**
+     * Text color.
+     */
+    color?: ColorPalette;
+    /**
+     * Lightened or darkened variant of the selected color.
+     */
+    colorVariant?: ColorVariant;
+    /**
+     * Typography variant.
+     */
+    typography?: Typography;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'InlineList';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {} as const;
+
+/**
+ * InlineList component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const InlineList: Comp<InlineListProps> = forwardRef((props, ref) => {
+    const { className, color, colorVariant, typography, children, ...forwardedProps } = props;
+    const fontColorClassName = color && getFontColorClassName(color, colorVariant);
+    const typographyClassName = typography && getTypographyClassName(typography);
+    return (
+        // eslint-disable-next-line jsx-a11y/no-redundant-roles
+        <ul
+            {...forwardedProps}
+            ref={ref as any}
+            className={classNames(className, CLASSNAME, fontColorClassName, typographyClassName)}
+            // Lists with removed bullet style can lose their a11y list role on some browsers
+            role="list"
+        >
+            {Children.toArray(children).map((child, index) => {
+                const key = (isValidElement(child) && child.key) || index;
+                return (
+                    <li key={key} className={`${CLASSNAME}__item`}>
+                        {index !== 0 && (
+                            <span className={`${CLASSNAME}__item-separator`} aria-hidden="true">
+                                {'\u00A0•\u00A0'}
+                            </span>
+                        )}
+                        {child}
+                    </li>
+                );
+            })}
+        </ul>
+    );
+});
+InlineList.displayName = COMPONENT_NAME;
+InlineList.className = CLASSNAME;
+InlineList.defaultProps = DEFAULT_PROPS;

package/src/components/inline-list/index.ts

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

package/src/components/text/{Text.stories.tsx → Text.stories.jsx}

@@ -1,38 +1,37 @@
 import React from 'react';
-import { ColorPalette, ColorVariant, TypographyCustom, TypographyInterface } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, TypographyCustom, TypographyInterface } from '@lumx/react';
+import { mdiEarth, mdiHeart } from '@lumx/icons';
+import { withResizableBox } from '@lumx/react/stories/withResizableBox';
 import { Text } from './Text';
 
 export default { title: 'LumX components/text/Text' };
 
 export const Default = () => <Text as="p">Some text</Text>;
 
-const withResizableBox = (Story: any) => (
-    <div
-        style={{
-            width: 150,
-            height: 60,
-            border: '1px solid red',
-            resize: 'both',
-            overflow: 'hidden',
-        }}
-    >
-        <Story />
-    </div>
-);
-
-export const Truncate = () => (
-    <Text as="p" truncate>
-        Some very very very long text
+export const WithIcon = (args) => (
+    <Text as="p" {...args}>
+        Some text <Icon icon={mdiHeart} /> with icons <Icon icon={mdiEarth} />
     </Text>
 );
-Truncate.decorators = [withResizableBox];
 
-export const TruncateMultiline = () => (
-    <Text as="p" truncate={{ lines: 2 }}>
+export const LongText = (args) => (
+    <Text as="p" {...args}>
         Some very very very very very very very very very long text
     </Text>
 );
-TruncateMultiline.decorators = [withResizableBox];
+LongText.decorators = [withResizableBox()];
+
+export const NoWrap = LongText.bind({});
+NoWrap.args = { noWrap: true };
+NoWrap.decorators = [withResizableBox()];
+
+export const Truncate = LongText.bind({});
+Truncate.args = { truncate: true };
+Truncate.decorators = [withResizableBox()];
+
+export const TruncateMultiline = LongText.bind({});
+TruncateMultiline.args = { truncate: { lines: 2 } };
+TruncateMultiline.decorators = [withResizableBox()];
 
 export const AllTypography = () => {
     const typographies = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
@@ -42,9 +41,7 @@ export const AllTypography = () => {
                 <tr key={typography}>
                     <td>{typography}</td>
                     <td>
-                        <Text as="p" typography={typography}>
-                            Some text
-                        </Text>
+                        <WithIcon typography={typography} />
                     </td>
                 </tr>
             ))}
@@ -68,9 +65,7 @@ export const AllColor = () => {
                     <td>{color}</td>
                     {colorVariants.map((colorVariant) => (
                         <td key={colorVariant}>
-                            <Text as="p" color={color} colorVariant={colorVariant}>
-                                Some text
-                            </Text>
+                            <WithIcon color={color} colorVariant={colorVariant} />
                         </td>
                     ))}
                 </tr>

package/src/components/text/Text.test.tsx

@@ -4,7 +4,9 @@ import { shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite } from '@lumx/react/testing/utils';
-import { Text, TextProps } from './Text';
+import { mdiEarth } from '@lumx/icons';
+import { Icon } from '@lumx/react';
+import { Text, TextProps } from '.';
 
 const setup = (props: Partial<TextProps> = {}) => {
     const wrapper = shallow(<Text as="span" {...props} />);
@@ -55,6 +57,18 @@ describe(`<${Text.displayName}>`, () => {
             expect(wrapper).toHaveClassName('lumx-text--is-truncated-multiline');
             expect(wrapper).toHaveStyle({ '--lumx-text-truncate-lines': 2 });
         });
+
+        it('should render noWrap', () => {
+            const { wrapper } = setup({ noWrap: true });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper).toHaveClassName('lumx-text--no-wrap');
+        });
+
+        it('should wrap icons with spaces', () => {
+            const { wrapper } = setup({ children: ['Some text', <Icon key="icon" icon={mdiEarth} />, 'with icon'] });
+            // Spaces have been inserted around the icon.
+            expect(wrapper).toHaveText('Some text  with icon');
+        });
     });
 
     // Common tests suite.

package/src/components/text/Text.tsx

@@ -1,12 +1,15 @@
-import React, { forwardRef } from 'react';
+import React, { Children, Fragment, forwardRef } from 'react';
 
-import { Color, ColorVariant, Typography } from '@lumx/react';
-import { Comp, GenericProps, HeadingElement } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { Icon, ColorPalette, ColorVariant, Typography } from '@lumx/react';
+import { Comp, GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
+import {
+    getFontColorClassName,
+    getRootClassName,
+    handleBasicClasses,
+    getTypographyClassName,
+} from '@lumx/react/utils/className';
 import classNames from 'classnames';
 
-type TextComponents = 'span' | 'p' | HeadingElement;
-
 /**
  * Defines the props of the component.
  */
@@ -14,7 +17,7 @@ export interface TextProps extends GenericProps {
     /**
      * Color variant.
      */
-    color?: Color;
+    color?: ColorPalette;
     /**
      * Lightened or darkened variant of the selected color.
      */
@@ -26,13 +29,18 @@ export interface TextProps extends GenericProps {
     /**
      * Custom component to render the text.
      */
-    as: TextComponents;
+    as: TextElement;
     /**
      * Control whether the text should truncate or not.
      * Setting as `true` will make the text truncate on a single line.
      * Setting as `{ lines: number }` will make the text truncate on a multiple lines.
      */
     truncate?: boolean | { lines: number };
+    /**
+     * Prevents text to wrap on multiple lines
+     * (automatically activated when single line text truncate is activated).
+     */
+    noWrap?: boolean;
 }
 
 /**
@@ -58,11 +66,21 @@ const DEFAULT_PROPS = {} as const;
  * @return React element.
  */
 export const Text: Comp<TextProps> = forwardRef((props, ref) => {
-    const { as, children, className, color, colorVariant, typography, truncate, style, ...forwardedProps } = props;
+    const {
+        as: Component,
+        children,
+        className,
+        color,
+        colorVariant,
+        noWrap,
+        typography,
+        truncate,
+        style,
+        ...forwardedProps
+    } = props;
 
-    const Component = as as TextComponents;
-    const colorClass = color && `lumx-color-font-${color}-${colorVariant || ColorVariant.N}`;
-    const typographyClass = typography && `lumx-typography-${typography}`;
+    const colorClass = color && getFontColorClassName(color, colorVariant);
+    const typographyClass = typography && getTypographyClassName(typography);
 
     // Truncate mode
     const truncateLinesStyle = typeof truncate === 'object' &&
@@ -82,11 +100,18 @@ export const Text: Comp<TextProps> = forwardRef((props, ref) => {
                 }),
                 typographyClass,
                 colorClass,
+                noWrap && `${CLASSNAME}--no-wrap`,
             )}
             style={{ ...truncateLinesStyle, ...style }}
             {...forwardedProps}
         >
-            {children}
+            {Children.toArray(children).map((child, index) => {
+                // Force wrap spaces around icons to make sure they are never stuck against text.
+                if (isComponent(Icon)(child)) {
+                    return <Fragment key={child.key || index}> {child} </Fragment>;
+                }
+                return child;
+            })}
         </Component>
     );
 });

package/src/index.ts

@@ -24,6 +24,7 @@ export * from './components/heading';
 export * from './components/grid';
 export * from './components/icon';
 export * from './components/image-block';
+export * from './components/inline-list';
 export * from './components/input-helper';
 export * from './components/input-label';
 export * from './components/lightbox';

package/src/stories/generated/GenericBlock/Demos.stories.tsx

@@ -3,4 +3,6 @@
  */
 export default { title: 'LumX components/generic-block/GenericBlock Demos' };
 
-export { App as Default } from './default';
+export { App as HorizontalAlignment } from './horizontal-alignment';
+export { App as Sizes } from './sizes';
+export { App as VerticalAlignment } from './vertical-alignment';

package/src/stories/generated/Heading/Demos.stories.tsx

@@ -0,0 +1,6 @@
+/**
+ * File generated when storybook is started. Do not edit directly!
+ */
+export default { title: 'LumX components/heading/Heading Demos' };
+
+export { App as AutomaticHeadingLevel } from './automatic-heading-level';

package/src/stories/withResizableBox.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+/** Storybook decorator wrapping story in a resizable box  */
+// eslint-disable-next-line react/display-name
+export const withResizableBox = ({ width = 150, height = 50 } = {}) => (Story: any) => (
+    <div
+        style={{
+            display: 'flex',
+            width,
+            height,
+            border: '1px solid red',
+            resize: 'both',
+            overflow: 'hidden',
+        }}
+    >
+        <Story />
+    </div>
+);

package/src/utils/className.ts

@@ -1,6 +1,7 @@
 import { CSS_PREFIX } from '@lumx/react/constants';
 
 import kebabCase from 'lodash/kebabCase';
+import { ColorPalette, ColorVariant, Typography } from '@lumx/react/components';
 
 // See https://regex101.com/r/YjS1uI/3
 const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
@@ -25,3 +26,19 @@ export function getRootClassName(componentName: string, subComponent?: boolean):
     }
     return formattedClassName;
 }
+
+/**
+ * Returns the classname associated to the given color and variant.
+ * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-l2`
+ */
+export const getFontColorClassName = (color: ColorPalette, colorVariant: ColorVariant = ColorVariant.N) => {
+    return `lumx-color-font-${color}-${colorVariant}`;
+};
+
+/**
+ * Returns the classname associated to the given typography.
+ * For example, for `Typography.title` it returns `lumx-typography-title`
+ */
+export const getTypographyClassName = (typography: Typography) => {
+    return `lumx-typography-${typography}`;
+};

package/src/utils/type.ts

@@ -35,6 +35,9 @@ export type Comp<P, T = HTMLElement> = {
 /** Union type of all heading elements */
 export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
+/** Union type of all text elements */
+export type TextElement = 'span' | 'p' | HeadingElement;
+
 export interface HasTheme {
     /**
      * Theme adapting the component to light or dark background.