@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/lightbox/Lightbox.tsx

@@ -0,0 +1,153 @@
+import React, { forwardRef, RefObject, useRef, useEffect } from 'react';
+
+import classNames from 'classnames';
+import { createPortal } from 'react-dom';
+
+import { mdiClose } from '@lumx/icons';
+import { ColorPalette, Emphasis, IconButton, IconButtonProps } from '@lumx/react';
+import { DOCUMENT } from '@lumx/react/constants';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
+import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
+import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
+import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
+
+/**
+ * Defines the props of the component.
+ */
+export interface LightboxProps extends GenericProps, HasTheme {
+    /** Props to pass to the close button (minus those already set by the Lightbox props). */
+    closeButtonProps?: Pick<IconButtonProps, 'label'> &
+        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+    /** Reference to the element that triggered modal opening to set focus on. */
+    parentElement: RefObject<any>;
+    /** Whether to keep the dialog open on clickaway or escape press. */
+    preventAutoClose?: boolean;
+    /** Z-axis position. */
+    zIndex?: number;
+    /** On close callback. */
+    onClose?(): void;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Lightbox';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Lightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        ariaLabel,
+        children,
+        className,
+        closeButtonProps,
+        isOpen,
+        onClose,
+        parentElement,
+        preventAutoClose,
+        theme,
+        zIndex,
+        ...forwardedProps
+    } = props;
+    if (!DOCUMENT) {
+        // Can't render in SSR.
+        return null;
+    }
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const childrenRef = useRef<any>(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useDisableBodyScroll(isOpen && wrapperRef.current);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const isVisible = useTransitionVisibility(wrapperRef, !!isOpen);
+
+    // Handle focus trap.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useFocusTrap(isOpen && wrapperRef.current, childrenRef.current?.firstChild);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const previousOpen = useRef(isOpen);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        if (isOpen !== previousOpen.current) {
+            previousOpen.current = isOpen;
+
+            // Focus the parent element on close.
+            if (!isOpen && parentElement && parentElement.current) {
+                parentElement.current.focus();
+            }
+        }
+    }, [isOpen, parentElement]);
+
+    // Close lightbox on escape key pressed.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useCallbackOnEscape(onClose);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const clickAwayRefs = useRef([wrapperRef]);
+
+    if (!isOpen && !isVisible) return null;
+
+    return createPortal(
+        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
+        <div
+            ref={mergeRefs(ref, wrapperRef)}
+            {...forwardedProps}
+            aria-label={ariaLabel}
+            aria-modal="true"
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                    isHidden: !isOpen,
+                    isShown: isOpen || isVisible,
+                    theme,
+                }),
+            )}
+            style={{ zIndex }}
+        >
+            {closeButtonProps && (
+                <IconButton
+                    {...closeButtonProps}
+                    className={`${CLASSNAME}__close`}
+                    color={ColorPalette.light}
+                    emphasis={Emphasis.low}
+                    icon={mdiClose}
+                    theme={theme}
+                    type="button"
+                    onClick={onClose}
+                />
+            )}
+            <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
+                <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
+                    {children}
+                </div>
+            </ClickAwayProvider>
+        </div>,
+        document.body,
+    );
+});
+Lightbox.displayName = COMPONENT_NAME;
+Lightbox.className = CLASSNAME;

package/dist/src/components/lightbox/__snapshots__/Lightbox.test.tsx.snap

@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Lightbox> Snapshots and structure should render story 'Default' 1`] = `
+<Portal
+  containerInfo={<body />}
+>
+  <div
+    aria-modal="true"
+    className="lumx-lightbox lumx-lightbox--is-shown"
+    style={
+      {
+        "zIndex": undefined,
+      }
+    }
+  >
+    <IconButton
+      className="lumx-lightbox__close"
+      color="light"
+      emphasis="low"
+      icon="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+      label="Close"
+      onClick={[Function]}
+      size="m"
+      theme="light"
+      type="button"
+    />
+    <ClickAwayProvider
+      callback={[Function]}
+      childrenRefs={
+        {
+          "current": [
+            {
+              "current": null,
+            },
+          ],
+        }
+      }
+    >
+      <div
+        className="lumx-lightbox__wrapper"
+        role="presentation"
+      >
+        <Slideshow
+          activeIndex={0}
+          autoPlay={true}
+          fillHeight={true}
+          groupBy={1}
+          interval={5000}
+          slideshowControlsProps={
+            {
+              "nextButtonProps": {
+                "label": "Next",
+              },
+              "previousButtonProps": {
+                "label": "Previous",
+              },
+            }
+          }
+          theme="dark"
+        >
+          <SlideshowItem
+            key="/demo-assets/portrait1.jpg"
+          >
+            <ImageBlock
+              align="center"
+              alt="Nice Image"
+              captionPosition="below"
+              description="What an image"
+              fillHeight={true}
+              image="/demo-assets/portrait1.jpg"
+              tags={
+                <ChipGroup
+                  align="center"
+                >
+                  <Chip
+                    size="s"
+                    theme="dark"
+                  >
+                    Tag 1
+                  </Chip>
+                  <Chip
+                    size="s"
+                    theme="dark"
+                  >
+                    Tag 2
+                  </Chip>
+                </ChipGroup>
+              }
+              theme="dark"
+              title="Nice Image"
+            />
+          </SlideshowItem>
+          <SlideshowItem
+            key="/demo-assets/portrait2.jpg"
+          >
+            <ImageBlock
+              align="center"
+              alt="Nice Image"
+              captionPosition="below"
+              description="What an image"
+              fillHeight={true}
+              image="/demo-assets/portrait2.jpg"
+              tags={
+                <ChipGroup
+                  align="center"
+                >
+                  <Chip
+                    size="s"
+                    theme="dark"
+                  >
+                    Tag 1
+                  </Chip>
+                  <Chip
+                    size="s"
+                    theme="dark"
+                  >
+                    Tag 2
+                  </Chip>
+                </ChipGroup>
+              }
+              theme="dark"
+              title="Nice Image"
+            />
+          </SlideshowItem>
+          <SlideshowItem
+            key="/demo-assets/landscape3.jpg"
+          >
+            <ImageBlock
+              align="center"
+              alt="Nice Image"
+              captionPosition="below"
+              description="What an image"
+              fillHeight={true}
+              image="/demo-assets/landscape3.jpg"
+              tags={
+                <ChipGroup
+                  align="center"
+                >
+                  <Chip
+                    size="s"
+                    theme="dark"
+                  >
+                    Tag 1
+                  </Chip>
+                  <Chip
+                    size="s"
+                    theme="dark"
+                  >
+                    Tag 2
+                  </Chip>
+                </ChipGroup>
+              }
+              theme="dark"
+              title="Nice Image"
+            />
+          </SlideshowItem>
+          <SlideshowItem
+            key="/demo-assets/landscape2.jpg"
+          >
+            <ImageBlock
+              align="center"
+              alt="Nice Image"
+              captionPosition="below"
+              description="What an image"
+              fillHeight={true}
+              image="/demo-assets/landscape2.jpg"
+              tags={
+                <ChipGroup
+                  align="center"
+                >
+                  <Chip
+                    size="s"
+                    theme="dark"
+                  >
+                    Tag 1
+                  </Chip>
+                  <Chip
+                    size="s"
+                    theme="dark"
+                  >
+                    Tag 2
+                  </Chip>
+                </ChipGroup>
+              }
+              theme="dark"
+              title="Nice Image"
+            />
+          </SlideshowItem>
+        </Slideshow>
+      </div>
+    </ClickAwayProvider>
+  </div>
+</Portal>
+`;

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

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

package/dist/src/components/link/Link.stories.tsx

@@ -0,0 +1,141 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { mdiChevronDown, mdiLink } from '@lumx/icons';
+import {
+    ColorPalette,
+    ColorVariant,
+    Link,
+    Typography,
+    TypographyCustom,
+    TypographyInterface,
+    TypographyTitleCustom,
+} from '@lumx/react';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import React, { Fragment } from 'react';
+
+export default { title: 'LumX components/link/Link' };
+
+const onClick = () => console.log('clicked link');
+
+const linkTypographies = { ...TypographyInterface, ...TypographyTitleCustom };
+
+export const SimpleLink = () => (
+    <>
+        <Link
+            href={text('href', 'https://example.com', 'Link 1')}
+            target={boolean('target: _blank', false, 'Link 1') ? '_blank' : ''}
+            color={select('Color', ColorPalette, ColorPalette.blue, 'Link 1')}
+            colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 1')}
+            typography={select('Typography', linkTypographies, Typography.body2, 'Link 1')}
+        >
+            {text('Value', 'Here is a first link', 'Link 1')}
+        </Link>
+        <br />
+        <Link
+            href={text('href', 'https://google.fr', 'Link 2')}
+            target={boolean('target: _blank', false, 'Link 2') ? '_blank' : ''}
+            color={select('Color', ColorPalette, ColorPalette.blue, 'Link 2')}
+            colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 2')}
+            typography={select('Typography', linkTypographies, Typography.body1, 'Link 2')}
+        >
+            {text('Value', 'Here is a second link', 'Link 2')}
+        </Link>
+        <br />
+        <Link
+            href={text('href', 'https://google.co.jp', 'Link 3')}
+            target={boolean('target: _blank', false, 'Link 3') ? '_blank' : ''}
+            color={select('Color', ColorPalette, ColorPalette.blue, 'Link 3')}
+            colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 3')}
+            typography={select('Typography', linkTypographies, Typography.caption, 'Link 3')}
+        >
+            {text('Value', 'Here is a third link', 'Link 3')}
+        </Link>
+    </>
+);
+
+export const WithoutHref = () => (
+    // The constrained width should show that the button does not have centered text align.
+    <div style={{ border: '1px solid red', width: 100, height: 100, resize: 'both', overflow: 'auto' }}>
+        <Link onClick={onClick}>Link without href (renders as a button for a11y)</Link>
+    </div>
+);
+
+export const WithCustomLink = () => {
+    const CustomLink: React.FC = ({ children, ...props }) =>
+        React.createElement('a', { ...props, style: { color: 'red' } }, children);
+
+    return (
+        <Link linkAs={CustomLink} href="https://example.com">
+            Custom link
+        </Link>
+    );
+};
+
+export const DisabledLink = () => (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    <Link onClick={onClick} disabled>
+        Disabled link
+    </Link>
+);
+
+export const WithCustomizableTypography = () => (
+    <>
+        <style>{`
+        :root {
+            --lumx-typography-custom-title1-font-size: 5px;
+        }
+        `}</style>
+        <Link typography={Typography.custom.title1} href="https://example.com">
+            Link with customizable `body` typography
+        </Link>
+    </>
+);
+
+export const AllTypography = () => {
+    const typographies = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
+    return (
+        <table>
+            {typographies.map((typography) => (
+                <tr key={typography}>
+                    <td>{typography}</td>
+                    <td>
+                        <Link
+                            leftIcon={mdiChevronDown}
+                            rightIcon={mdiLink}
+                            typography={typography}
+                            href="https://example.com"
+                        >
+                            Link text
+                        </Link>
+                    </td>
+                </tr>
+            ))}
+        </table>
+    );
+};
+
+export const AllColor = () => {
+    const colorVariants = [undefined, ...Object.values(ColorVariant)];
+    const colors = [undefined, ...Object.values(ColorPalette)];
+    return (
+        <table style={{ borderCollapse: 'separate', borderSpacing: 5 }}>
+            <tr>
+                <td />
+                {colorVariants.map((colorVariant) => (
+                    <td key={colorVariant}>{colorVariant}</td>
+                ))}
+            </tr>
+            {colors.map((color) => (
+                <tr key={color}>
+                    <td>{color}</td>
+                    {colorVariants.map((colorVariant) => (
+                        <td key={colorVariant}>
+                            <Link href="https://example.com" color={color} colorVariant={colorVariant}>
+                                Some text
+                            </Link>
+                        </td>
+                    ))}
+                </tr>
+            ))}
+        </table>
+    );
+};

package/dist/src/components/link/Link.test.tsx

@@ -0,0 +1,60 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { Link, LinkProps } from './Link';
+
+const CLASSNAME = Link.className as string;
+
+type SetupProps = Partial<LinkProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+    const props: LinkProps = {
+        ...propsOverride,
+    };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(<Link {...props} />);
+
+    return { props, wrapper };
+};
+
+describe(`<${Link.displayName}>`, () => {
+    describe('Snapshots and structure', () => {
+        it('should render correctly', () => {
+            const { wrapper } = setup({ href: 'https://google.com' });
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        it('should render color & color variant', () => {
+            const { wrapper } = setup({
+                href: 'https://google.com',
+                color: ColorPalette.primary,
+                colorVariant: ColorVariant.D1,
+            });
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        it('should render typography', () => {
+            const { wrapper } = setup({ href: 'https://google.com', typography: Typography.title });
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        it('should render a button if href attribute is missing', () => {
+            const { wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(
+        setup,
+        { className: 'wrapper', prop: 'wrapper' },
+        { className: CLASSNAME, prop: 'href', propValue: 'https://google.com' },
+    );
+});