@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/icon/Icon.tsx

@@ -0,0 +1,121 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { mdiAlertCircle } from '@lumx/icons';
+
+export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface IconProps extends GenericProps, HasTheme {
+    /** Color variant. */
+    color?: ColorPalette;
+    /** Lightened or darkened variant of the selected icon color. */
+    colorVariant?: ColorVariant;
+    /** Whether the icon has a shape. */
+    hasShape?: boolean;
+    /**
+     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
+     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+     */
+    icon: string;
+    /** Size variant. */
+    size?: IconSizes;
+    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
+    alt?: string;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Icon';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<IconProps> = {};
+
+/**
+ * Icon component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
+    const { className, color, colorVariant, hasShape, icon, size, theme, alt, ...forwardedProps } = props;
+
+    // Color
+    let iconColor = color;
+    if (!iconColor && (hasShape || theme)) {
+        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+    }
+
+    // Color variant
+    let iconColorVariant = colorVariant;
+    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
+        iconColorVariant = 'L2';
+    }
+
+    // Size
+    let iconSize = size;
+    if (size && hasShape) {
+        if (size === Size.xxs || size === Size.xs) {
+            iconSize = Size.s;
+        } else if (size === Size.xxl) {
+            iconSize = Size.xl;
+        }
+    } else if (hasShape) {
+        iconSize = Size.m;
+    }
+
+    return (
+        <i
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    color: iconColor,
+                    colorVariant: iconColorVariant,
+                    hasShape,
+                    prefix: CLASSNAME,
+                    theme,
+                    size: iconSize,
+                }),
+                !hasShape && `${CLASSNAME}--no-shape`,
+                !hasShape &&
+                    iconColor === ColorPalette.yellow &&
+                    icon === mdiAlertCircle &&
+                    `${CLASSNAME}--has-dark-layer`,
+                `${CLASSNAME}--path`,
+            )}
+        >
+            <svg
+                aria-hidden={alt ? undefined : 'true'}
+                role={alt ? 'img' : undefined}
+                aria-label={alt}
+                height="1em"
+                preserveAspectRatio="xMidYMid meet"
+                style={{ verticalAlign: '-0.125em' }}
+                viewBox="0 0 24 24"
+                width="1em"
+            >
+                <path d={icon} fill="currentColor" />
+            </svg>
+        </i>
+    );
+});
+Icon.displayName = COMPONENT_NAME;
+Icon.className = CLASSNAME;
+Icon.defaultProps = DEFAULT_PROPS;

package/dist/src/components/icon/__snapshots__/Icon.test.tsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Icon> Snapshots and structure should render color & color variant 1`] = `
+<i
+  className="lumx-icon lumx-icon--color-primary lumx-icon--color-variant-D1 lumx-icon--no-shape lumx-icon--path"
+>
+  <svg
+    aria-hidden="true"
+    height="1em"
+    preserveAspectRatio="xMidYMid meet"
+    style={
+      {
+        "verticalAlign": "-0.125em",
+      }
+    }
+    viewBox="0 0 24 24"
+    width="1em"
+  >
+    <path
+      d="mdiPlus"
+      fill="currentColor"
+    />
+  </svg>
+</i>
+`;
+
+exports[`<Icon> Snapshots and structure should render correctly 1`] = `
+<i
+  className="lumx-icon lumx-icon--no-shape lumx-icon--path"
+>
+  <svg
+    aria-hidden="true"
+    height="1em"
+    preserveAspectRatio="xMidYMid meet"
+    style={
+      {
+        "verticalAlign": "-0.125em",
+      }
+    }
+    viewBox="0 0 24 24"
+    width="1em"
+  >
+    <path
+      d="mdiPlus"
+      fill="currentColor"
+    />
+  </svg>
+</i>
+`;

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

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

package/dist/src/components/image-block/ImageBlock.stories.tsx

@@ -0,0 +1,52 @@
+import { LANDSCAPE_IMAGES, landscapeImageKnob } from '@lumx/react/stories/knobs/image';
+import React from 'react';
+
+import { Alignment, AspectRatio, Chip, ChipGroup, ImageBlock, Size } from '@lumx/react';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { enumKnob } from '@lumx/react/stories/knobs/enumKnob';
+import { focusKnob } from '@lumx/react/stories/knobs/focusKnob';
+
+export default { title: 'LumX components/image-block/Image Block' };
+
+export const DefaultImageBlock = ({ theme }: any) => {
+    const alt = text('Alternative text', 'Image alt text');
+    const align = select('Alignment', Alignment, Alignment.center) as any;
+    const aspectRatio = select('Aspect ratio', AspectRatio, AspectRatio.square);
+    const title = text('Title', 'Hello world');
+    const description = text('Description', 'My awesome description');
+    const crossOrigin = enumKnob('CORS', [undefined, 'anonymous', 'use-credentials'], undefined);
+    const tags = boolean('Display tags', true) && (
+        <ChipGroup align={Alignment.left}>
+            <Chip size={Size.s} theme={theme}>
+                Tag 1
+            </Chip>
+
+            <Chip size={Size.s} theme={theme}>
+                Tag 2
+            </Chip>
+        </ChipGroup>
+    );
+    const imageUrl = landscapeImageKnob('Url image', LANDSCAPE_IMAGES.landscape1);
+    const focusPoint = { x: focusKnob('Focus X'), y: focusKnob('Focus Y') };
+    const size = enumKnob('Size', [undefined, Size.xl, Size.xxl] as const, undefined);
+    const onClick = boolean('clickable?', false) && (() => console.log('ok'));
+
+    return (
+        <ImageBlock
+            alt={alt}
+            description={description}
+            image={imageUrl}
+            size={size}
+            tags={tags}
+            title={title}
+            theme={theme}
+            align={align}
+            thumbnailProps={{
+                aspectRatio,
+                crossOrigin,
+                focusPoint,
+                onClick,
+            }}
+        />
+    );
+};

package/dist/src/components/image-block/ImageBlock.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+
+import { ImageBlock, ImageBlockProps } from './ImageBlock';
+import * as stories from './ImageBlock.stories';
+
+const CLASSNAME = ImageBlock.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<ImageBlockProps> = {}, shallowRendering = true) => {
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<ImageBlock {...(props as any)} />);
+    return { props, wrapper };
+};
+
+describe(`<${ImageBlock.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, ImageBlock);
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/image-block/ImageBlock.tsx

@@ -0,0 +1,151 @@
+import React, { CSSProperties, forwardRef, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import isObject from 'lodash/isObject';
+
+import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
+
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { ThumbnailProps } from '../thumbnail/Thumbnail';
+
+/**
+ * Image block variants.
+ */
+export const ImageBlockCaptionPosition = {
+    below: 'below',
+    over: 'over',
+} as const;
+export type ImageBlockCaptionPosition = ValueOf<typeof ImageBlockCaptionPosition>;
+
+/**
+ *  Image block sizes.
+ */
+export type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface ImageBlockProps extends GenericProps, HasTheme {
+    /** Action toolbar content. */
+    actions?: ReactNode;
+    /** Alignment. */
+    align?: HorizontalAlignment;
+    /** Image alternative text. */
+    alt: string;
+    /** Caption position. */
+    captionPosition?: ImageBlockCaptionPosition;
+    /** Caption custom CSS style. */
+    captionStyle?: CSSProperties;
+    /** Image description. Can be either a string, or sanitized html. */
+    description?: string | { __html: string };
+    /** Whether the image has to fill its container height or not. */
+    fillHeight?: boolean;
+    /** Image URL. */
+    image: string;
+    /** Size variant. */
+    size?: ImageBlockSize;
+    /** Tag content. */
+    tags?: ReactNode;
+    /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
+    thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;
+    /** Image title to display in the caption. */
+    title?: string;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ImageBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<ImageBlockProps> = {
+    captionPosition: ImageBlockCaptionPosition.below,
+    theme: Theme.light,
+    align: Alignment.left,
+};
+
+/**
+ * ImageBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        actions,
+        align,
+        alt,
+        captionPosition,
+        captionStyle,
+        className,
+        description,
+        fillHeight,
+        image,
+        size,
+        tags,
+        theme,
+        thumbnailProps,
+        title,
+        ...forwardedProps
+    } = props;
+    return (
+        <figure
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                    captionPosition,
+                    align,
+                    size,
+                    theme,
+                }),
+                fillHeight && `${CLASSNAME}--fill-height`,
+            )}
+        >
+            <Thumbnail
+                {...thumbnailProps}
+                className={classNames(`${CLASSNAME}__image`, thumbnailProps?.className)}
+                fillHeight={fillHeight}
+                align={align}
+                image={image}
+                size={size}
+                theme={theme}
+                alt={(alt || title) as string}
+            />
+            {(title || description || tags) && (
+                <figcaption className={`${CLASSNAME}__wrapper`} style={captionStyle}>
+                    {(title || description) && (
+                        <div className={`${CLASSNAME}__caption`}>
+                            {title && <span className={`${CLASSNAME}__title`}>{title}</span>}
+                            {/* Add an `&nbsp;` when there is description and title. */}
+                            {title && description && '\u00A0'}
+                            {isObject(description) && description.__html ? (
+                                // eslint-disable-next-line react/no-danger
+                                <span dangerouslySetInnerHTML={description} className={`${CLASSNAME}__description`} />
+                            ) : (
+                                <span className={`${CLASSNAME}__description`}>{description}</span>
+                            )}
+                        </div>
+                    )}
+                    {tags && <div className={`${CLASSNAME}__tags`}>{tags}</div>}
+                </figcaption>
+            )}
+            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
+        </figure>
+    );
+});
+ImageBlock.displayName = COMPONENT_NAME;
+ImageBlock.className = CLASSNAME;
+ImageBlock.defaultProps = DEFAULT_PROPS;

package/dist/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ImageBlock> Snapshots and structure should render story 'DefaultImageBlock' 1`] = `
+<figure
+  className="lumx-image-block lumx-image-block--caption-position-below lumx-image-block--align-center lumx-image-block--theme-light"
+>
+  <Thumbnail
+    align="center"
+    alt="Image alt text"
+    aspectRatio="square"
+    className="lumx-image-block__image"
+    fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+    focusPoint={
+      {
+        "x": 0,
+        "y": 0,
+      }
+    }
+    image="/demo-assets/landscape1.jpg"
+    loading="lazy"
+    onClick={false}
+    theme="light"
+  />
+  <figcaption
+    className="lumx-image-block__wrapper"
+  >
+    <div
+      className="lumx-image-block__caption"
+    >
+      <span
+        className="lumx-image-block__title"
+      >
+        Hello world
+      </span>
+       
+      <span
+        className="lumx-image-block__description"
+      >
+        My awesome description
+      </span>
+    </div>
+    <div
+      className="lumx-image-block__tags"
+    >
+      <ChipGroup
+        align="left"
+      >
+        <Chip
+          size="s"
+          theme="light"
+        >
+          Tag 1
+        </Chip>
+        <Chip
+          size="s"
+          theme="light"
+        >
+          Tag 2
+        </Chip>
+      </ChipGroup>
+    </div>
+  </figcaption>
+</figure>
+`;

package/dist/src/components/image-block/index.ts

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

package/dist/src/components/index.ts

@@ -0,0 +1,176 @@
+import { ValueOf } from '@lumx/react/utils/type';
+
+/**
+ * Alignments.
+ */
+export const Alignment = {
+    bottom: 'bottom',
+    center: 'center',
+    end: 'end',
+    left: 'left',
+    right: 'right',
+    spaceAround: 'space-around',
+    spaceBetween: 'space-between',
+    spaceEvenly: 'space-evenly',
+    start: 'start',
+    top: 'top',
+} as const;
+export type Alignment = ValueOf<typeof Alignment>;
+export type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
+export type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
+
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+export const ColorPalette = {
+    primary: 'primary',
+    secondary: 'secondary',
+    blue: 'blue',
+    dark: 'dark',
+    green: 'green',
+    yellow: 'yellow',
+    red: 'red',
+    light: 'light',
+    grey: 'grey',
+} as const;
+export type ColorPalette = ValueOf<typeof ColorPalette>;
+export type Color = ColorPalette | string;
+
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+export const ColorVariant = {
+    D1: 'D1',
+    D2: 'D2',
+    L1: 'L1',
+    L2: 'L2',
+    L3: 'L3',
+    L4: 'L4',
+    L5: 'L5',
+    L6: 'L6',
+    N: 'N',
+} as const;
+export type ColorVariant = ValueOf<typeof ColorVariant>;
+
+export const Theme = {
+    light: 'light',
+    dark: 'dark',
+} as const;
+export type Theme = ValueOf<typeof Theme>;
+
+export const Size = {
+    xxs: 'xxs',
+    xs: 'xs',
+    s: 's',
+    m: 'm',
+    l: 'l',
+    xl: 'xl',
+    xxl: 'xxl',
+    tiny: 'tiny',
+    regular: 'regular',
+    medium: 'medium',
+    big: 'big',
+    huge: 'huge',
+} as const;
+export type Size = ValueOf<typeof Size>;
+export type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+
+export const Orientation = {
+    horizontal: 'horizontal',
+    vertical: 'vertical',
+} as const;
+export type Orientation = ValueOf<typeof Orientation>;
+
+export const Emphasis = {
+    low: 'low',
+    medium: 'medium',
+    high: 'high',
+} as const;
+export type Emphasis = ValueOf<typeof Emphasis>;
+
+/**
+ * List of typographies that can't be customized.
+ */
+export const TypographyInterface = {
+    overline: 'overline',
+    caption: 'caption',
+    body1: 'body1',
+    body2: 'body2',
+    subtitle1: 'subtitle1',
+    subtitle2: 'subtitle2',
+    title: 'title',
+    headline: 'headline',
+    display1: 'display1',
+} as const;
+export type TypographyInterface = ValueOf<typeof TypographyInterface>;
+
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+export const TypographyTitleCustom = {
+    title1: 'custom-title1',
+    title2: 'custom-title2',
+    title3: 'custom-title3',
+    title4: 'custom-title4',
+    title5: 'custom-title5',
+    title6: 'custom-title6',
+} as const;
+export type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
+
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+export const TypographyCustom = {
+    ...TypographyTitleCustom,
+    intro: 'custom-intro',
+    'body-large': 'custom-body-large',
+    body: 'custom-body',
+    quote: 'custom-quote',
+    'publish-info': 'custom-publish-info',
+    button: 'custom-button',
+} as const;
+export type TypographyCustom = ValueOf<typeof TypographyCustom>;
+
+/**
+ * List of all typographies.
+ */
+export const Typography = {
+    ...TypographyInterface,
+    custom: TypographyCustom,
+} as const;
+export type Typography = TypographyInterface | TypographyCustom;
+
+/**
+ * All available aspect ratios.
+ */
+export const AspectRatio = {
+    /** Intrinsic content ratio. */
+    original: 'original',
+    /** Ratio 16:9 */
+    wide: 'wide',
+    /** Ratio 3:2 */
+    horizontal: 'horizontal',
+    /** Ratio 3:2 */
+    vertical: 'vertical',
+    /** Ratio 1:1 */
+    square: 'square',
+    /** Ratio constrained by the parent. */
+    free: 'free',
+} as const;
+export type AspectRatio = ValueOf<typeof AspectRatio>;
+
+/**
+ * Semantic info about the purpose of the component
+ */
+export const Kind = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+} as const;
+export type Kind = ValueOf<typeof Kind>;
+
+/**
+ * Re-exporting some utils types.
+ */
+export type { HeadingElement, TextElement, GenericProps, Callback } from '../utils/type';

package/dist/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 })];