@lumx/react 3.1.1 → 3.1.3-alpha.0

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

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

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

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

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

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

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