@lumx/react 3.0.7 → 3.1.0

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

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

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

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

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

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

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