@lumx/react 3.1.1 → 3.1.3-alpha.0

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

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

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

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

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

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

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

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

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

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

package/dist/src/components/index.ts

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

@@ -1,40 +0,0 @@
-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 })];