@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/components/mosaic/Mosaic.tsx

@@ -1,95 +0,0 @@
-import React, { forwardRef, MouseEventHandler, useMemo } from 'react';
-
-import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import classNames from 'classnames';
-import take from 'lodash/take';
-
-/**
- * Defines the props of the component.
- */
-export interface MosaicProps extends GenericProps, HasTheme {
-    /** Thumbnails. */
-    thumbnails: ThumbnailProps[];
-    /** On image click callback. */
-    onImageClick?(index: number): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Mosaic';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<MosaicProps> = {
-    theme: Theme.light,
-};
-
-/**
- * Mosaic component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Mosaic: Comp<MosaicProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, thumbnails, onImageClick, ...forwardedProps } = props;
-    const handleImageClick = useMemo(() => {
-        if (!onImageClick) return undefined;
-
-        return (index: number, onClick?: MouseEventHandler): MouseEventHandler => (event) => {
-            onClick?.(event);
-            onImageClick?.(index);
-        };
-    }, [onImageClick]);
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {
-                [`${CLASSNAME}--has-1-thumbnail`]: thumbnails?.length === 1,
-                [`${CLASSNAME}--has-2-thumbnails`]: thumbnails?.length === 2,
-                [`${CLASSNAME}--has-3-thumbnails`]: thumbnails?.length === 3,
-                [`${CLASSNAME}--has-4-thumbnails`]: thumbnails?.length >= 4,
-            })}
-        >
-            <div className={`${CLASSNAME}__wrapper`}>
-                {take(thumbnails, 4).map((thumbnail: any, index: number) => {
-                    const { image, onClick, align, ...thumbnailProps } = thumbnail;
-
-                    return (
-                        <div key={index} className={`${CLASSNAME}__thumbnail`}>
-                            <Thumbnail
-                                {...thumbnailProps}
-                                align={align || Alignment.left}
-                                image={image}
-                                theme={theme}
-                                aspectRatio={AspectRatio.free}
-                                fillHeight
-                                onClick={handleImageClick?.(index, onClick) || onClick}
-                            />
-
-                            {thumbnails.length > 4 && index === 3 && (
-                                <div className={`${CLASSNAME}__overlay`}>
-                                    <span>+{thumbnails.length - 4}</span>
-                                </div>
-                            )}
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    );
-});
-Mosaic.displayName = COMPONENT_NAME;
-Mosaic.className = CLASSNAME;
-Mosaic.defaultProps = DEFAULT_PROPS;

package/dist/src/components/mosaic/__snapshots__/Mosaic.test.tsx.snap

@@ -1,357 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 1`] = `
-<div
-  className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-4-thumbnails"
->
-  <div
-    className="lumx-mosaic__wrapper"
-  >
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="0"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 1"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="1"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 2"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1-s200.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="2"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 3"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="3"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 4"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape3.jpg"
-        loading="lazy"
-        theme="light"
-      />
-      <div
-        className="lumx-mosaic__overlay"
-      >
-        <span>
-          +
-          1
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 1`] = `
-<div
-  className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-4-thumbnails"
->
-  <div
-    className="lumx-mosaic__wrapper"
-  >
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="0"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 1"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="1"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 2"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1-s200.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="2"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 3"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="3"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 4"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape3.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Mosaic> Snapshots and structure should render story OneThumbnail 1`] = `
-<div
-  className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-1-thumbnail"
->
-  <div
-    className="lumx-mosaic__wrapper"
-  >
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="0"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 1"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 1`] = `
-<div
-  className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-4-thumbnails"
->
-  <div
-    className="lumx-mosaic__wrapper"
-  >
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="0"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 1"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1.jpg"
-        loading="lazy"
-        onClick={[Function]}
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="1"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 2"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1-s200.jpg"
-        loading="lazy"
-        onClick={[Function]}
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="2"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 3"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
-        loading="lazy"
-        onClick={[Function]}
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="3"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 4"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape3.jpg"
-        loading="lazy"
-        onClick={[Function]}
-        theme="light"
-      />
-      <div
-        className="lumx-mosaic__overlay"
-      >
-        <span>
-          +
-          2
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Mosaic> Snapshots and structure should render story ThreeThumbnails 1`] = `
-<div
-  className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-3-thumbnails"
->
-  <div
-    className="lumx-mosaic__wrapper"
-  >
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="0"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 1"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="1"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 2"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1-s200.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="2"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 3"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Mosaic> Snapshots and structure should render story TwoThumbnails 1`] = `
-<div
-  className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-2-thumbnails"
->
-  <div
-    className="lumx-mosaic__wrapper"
-  >
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="0"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 1"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="1"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 2"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1-s200.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-  </div>
-</div>
-`;

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

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

package/dist/src/components/notification/Notification.test.tsx

@@ -1,108 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import noop from 'lodash/noop';
-import { Kind } from '@lumx/react';
-import { Wrapper } from '@lumx/react/testing/utils';
-
-import { Notification, NotificationProps } from './Notification';
-
-const CLASSNAME = Notification.className as string;
-
-type SetupProps = Partial<NotificationProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
-    const props: any = { ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Notification {...props} />);
-
-    const notification: Wrapper = wrapper.find('.lumx-notification');
-    const icon: Wrapper = wrapper.find('.lumx-notification__icon');
-    const content: Wrapper = wrapper.find('.lumx-notification__content');
-    const action: Wrapper = wrapper.find('.lumx-notification__action');
-
-    return { action, content, icon, notification, props, wrapper };
-};
-
-const properties = {
-    error: {
-        content: 'Error',
-        onClick: noop,
-        isOpen: true,
-        type: Kind.error,
-    },
-    info: {
-        content: 'Info',
-        onClick: noop,
-        isOpen: true,
-        type: Kind.info,
-    },
-    infoWithCallback: {
-        onActionClick: noop,
-        actionLabel: 'Undo',
-        content: 'Info with callback',
-        onClick: noop,
-        isOpen: true,
-        type: Kind.info,
-    },
-    success: {
-        content: 'Success',
-        onClick: noop,
-        isOpen: true,
-        type: Kind.success,
-    },
-
-    warning: {
-        content: 'Warning',
-        onClick: noop,
-        isOpen: true,
-        type: Kind.warning,
-    },
-};
-
-describe(`<${Notification.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render defaults', () => {
-            const { wrapper, notification } = setup(properties.info);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(notification).toExist();
-
-            expect(notification).toHaveClassName(CLASSNAME);
-            expect(notification).toHaveClassName(`${CLASSNAME}--color-dark`);
-        });
-
-        it('should render nothing since the notification is closed', () => {
-            const { wrapper, notification } = setup({ ...properties.info, isOpen: false });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(notification).not.toExist();
-        });
-    });
-
-    // 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.
-    });
-});

package/dist/src/components/notification/Notification.tsx

@@ -1,130 +0,0 @@
-import React, { forwardRef, useRef } from 'react';
-import { createPortal } from 'react-dom';
-
-import classNames from 'classnames';
-
-import isFunction from 'lodash/isFunction';
-
-import { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';
-
-import { DOCUMENT } from '@lumx/react/constants';
-import { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-
-/**
- * Defines the props of the component.
- */
-export interface NotificationProps extends GenericProps, HasTheme {
-    /** Action button label. */
-    actionLabel?: string;
-    /** Content. */
-    content?: React.ReactNode;
-    /** Whether the component is open or not. */
-    isOpen?: boolean;
-    /** Notification type. */
-    type?: Kind;
-    /** Z-axis position. */
-    zIndex?: number;
-    /** On action button click callback. */
-    onActionClick?(): void;
-    /** On click callback. */
-    onClick?(): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Notification';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<NotificationProps> = {
-    theme: Theme.light,
-    zIndex: 9999,
-};
-
-/* eslint-disable react-hooks/rules-of-hooks, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-/**
- * Notification component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const {
-        actionLabel,
-        className,
-        content,
-        isOpen,
-        onActionClick,
-        onClick,
-        theme,
-        type,
-        zIndex,
-        ...forwardedProps
-    } = props;
-    if (!DOCUMENT) {
-        // Can't render in SSR.
-        return null;
-    }
-    const { color, icon } = NOTIFICATION_CONFIGURATION[type as Kind] || {};
-    const rootRef = useRef<HTMLDivElement>(null);
-    const isVisible = useTransitionVisibility(rootRef, !!isOpen);
-    const hasAction: boolean = Boolean(onActionClick) && Boolean(actionLabel);
-
-    const handleCallback = (evt: React.MouseEvent) => {
-        if (isFunction(onActionClick)) {
-            onActionClick();
-        }
-        evt.stopPropagation();
-    };
-
-    return type && isVisible
-        ? createPortal(
-              // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-              <div
-                  ref={mergeRefs(ref, rootRef)}
-                  role="alert"
-                  {...forwardedProps}
-                  className={classNames(
-                      className,
-                      handleBasicClasses({
-                          color,
-                          hasAction,
-                          isHidden: !isOpen,
-                          prefix: CLASSNAME,
-                      }),
-                  )}
-                  onClick={onClick}
-                  style={{ zIndex }}
-              >
-                  <div className={`${CLASSNAME}__icon`}>
-                      <Icon icon={icon} size={Size.s} />
-                  </div>
-                  <div className={`${CLASSNAME}__content`}>{content}</div>
-                  {hasAction && (
-                      <div className={`${CLASSNAME}__action`}>
-                          <Button emphasis={Emphasis.medium} theme={theme} onClick={handleCallback}>
-                              <span>{actionLabel}</span>
-                          </Button>
-                      </div>
-                  )}
-              </div>,
-              document.body,
-          )
-        : null;
-});
-Notification.displayName = COMPONENT_NAME;
-Notification.className = CLASSNAME;
-Notification.defaultProps = DEFAULT_PROPS;