@lumx/react 3.3.1-alpha.0 → 3.3.1

package/src/components/button/ButtonRoot.test.tsx

@@ -1,203 +0,0 @@
-import React from 'react';
-
-import { mount } from 'enzyme';
-import 'jest-enzyme';
-
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-
-import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
-import {
-    BUTTON_CLASSNAME,
-    BUTTON_WRAPPER_CLASSNAME,
-    ButtonRoot,
-    ButtonRootProps,
-} from '@lumx/react/components/button/ButtonRoot';
-import { getBasicClass } from '@lumx/react/utils/className';
-
-type SetupProps = Partial<ButtonRootProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}) => {
-    const props: any = { ...propsOverride };
-    const wrapper: Wrapper = mount(<ButtonRoot {...props} />);
-
-    return {
-        button: wrapper.find(`.${BUTTON_CLASSNAME}`),
-        buttonWrapper: wrapper.find(`.${BUTTON_WRAPPER_CLASSNAME}`),
-        props,
-        wrapper,
-    };
-};
-
-describe(`<${ButtonRoot.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render button with label', () => {
-            const props: Partial<ButtonRootProps> = {
-                children: 'Label',
-            };
-            const { button, buttonWrapper, wrapper } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(buttonWrapper).not.toExist();
-
-            expect(button).toExist();
-            expect(button.type()).toEqual('button');
-
-            expect(button.contains(props.children)).toBe(true);
-        });
-
-        it('should render button with wrapper and label', () => {
-            const props: Partial<ButtonRootProps> = {
-                children: 'Label',
-                hasBackground: true,
-            };
-            const { button, buttonWrapper, wrapper } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(buttonWrapper).toExist();
-
-            expect(button).toExist();
-            expect(button.type()).toEqual('button');
-
-            expect(button.contains(props.children)).toBe(true);
-        });
-
-        it('should render anchor button with label', () => {
-            const props: Partial<ButtonRootProps> = {
-                children: 'Label',
-                href: 'example.com',
-                target: '_blank',
-            };
-            const { button, buttonWrapper, wrapper } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(buttonWrapper).not.toExist();
-
-            expect(button).toExist();
-            expect(button.type()).toEqual('a');
-            expect(button.contains(props.children)).toBe(true);
-
-            const actualProps = button.props() as Partial<ButtonRootProps>;
-            expect(actualProps.href).toEqual(props.href);
-            expect(actualProps.target).toEqual(props.target);
-        });
-
-        it('should render anchor button with wrapper and label', () => {
-            const props: Partial<ButtonRootProps> = {
-                children: 'Label',
-                hasBackground: true,
-                href: 'example.com',
-                target: '_blank',
-            };
-            const { button, buttonWrapper, wrapper } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(buttonWrapper).toExist();
-
-            expect(button).toExist();
-            expect(button.type()).toEqual('a');
-            expect(button.contains(props.children)).toBe(true);
-
-            const actualProps = button.props() as Partial<ButtonRootProps>;
-            expect(actualProps.href).toEqual(props.href);
-            expect(actualProps.target).toEqual(props.target);
-        });
-
-        it('should render custom link', () => {
-            const CustomLink: React.FC = ({ children, ...props }) =>
-                React.createElement('a', { ...props, style: { color: 'red' } }, children);
-            const { wrapper } = setup({ href: 'foo', linkAs: CustomLink });
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should use default color', () => {
-            const props: Partial<ButtonRootProps> = {};
-            const { button, wrapper } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(button).toExist();
-            expect(button).toHaveClassName(
-                getBasicClass({ prefix: BUTTON_CLASSNAME, type: 'color', value: ColorPalette.dark }),
-            );
-        });
-
-        it('should not have default color in low or medium emphasis', () => {
-            const props: Partial<ButtonRootProps> = {
-                emphasis: Emphasis.low,
-            };
-            const { button, wrapper } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(button).not.toHaveClassName(
-                getBasicClass({ prefix: BUTTON_CLASSNAME, type: 'color', value: ColorPalette.primary }),
-            );
-        });
-
-        it('should use given props', () => {
-            // Props used for the button.
-            const buttonProps: Partial<ButtonRootProps> = {
-                color: ColorPalette.red,
-                emphasis: Emphasis.high,
-                size: Size.s,
-                theme: Theme.dark,
-                variant: 'icon',
-            };
-            // Props used for the button wrapper.
-            const buttonWrapperProps: Partial<ButtonRootProps> = {
-                variant: buttonProps.variant,
-            };
-            const { button, buttonWrapper, wrapper } = setup({
-                ...buttonProps,
-                hasBackground: true,
-            });
-            expect(wrapper).toMatchSnapshot();
-
-            // The button wrapper classes.
-            for (const [type, value] of Object.entries(buttonProps)) {
-                expect(button).toHaveClassName(getBasicClass({ prefix: BUTTON_CLASSNAME, type, value }));
-            }
-
-            // The button wrapper classes.
-            for (const [type, value] of Object.entries(buttonWrapperProps)) {
-                expect(buttonWrapper).toHaveClassName(getBasicClass({ prefix: BUTTON_WRAPPER_CLASSNAME, type, value }));
-            }
-        });
-
-        it('should be full width', () => {
-            const buttonProps: Partial<ButtonRootProps> = {
-                fullWidth: true,
-                emphasis: Emphasis.high,
-                theme: Theme.light,
-            };
-
-            const { wrapper, button } = setup(buttonProps);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(button).toHaveClassName(getBasicClass({ prefix: BUTTON_CLASSNAME, type: 'fullWidth', value: true }));
-        });
-    });
-
-    // 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', () => {
-        // Tested in step 1.
-    });
-
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'button', prop: 'button' }, { className: BUTTON_CLASSNAME });
-});

package/src/components/button/__snapshots__/Button.test.tsx.snap

@@ -1,96 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Button> Props should forward any CSS class 1`] = `
-<ButtonRoot
-  className="component component--is-tested"
-  emphasis="high"
-  size="m"
-  theme="light"
-  variant="button"
-/>
-`;
-
-exports[`<Button> Props should use the given props for class names 1`] = `
-<ButtonRoot
-  className="lumx-button--has-left-icon lumx-button--has-right-icon"
-  emphasis="high"
-  size="m"
-  theme="light"
-  variant="button"
->
-  <Icon
-    icon="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-  />
-  <Icon
-    icon="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"
-  />
-</ButtonRoot>
-`;
-
-exports[`<Button> Snapshots and structure should render button with label 1`] = `
-<ButtonRoot
-  className=""
-  emphasis="high"
-  size="m"
-  theme="light"
-  variant="button"
->
-  <span>
-    Label
-  </span>
-</ButtonRoot>
-`;
-
-exports[`<Button> Snapshots and structure should render button with label and icons 1`] = `
-<ButtonRoot
-  className="lumx-button--has-left-icon lumx-button--has-right-icon"
-  emphasis="high"
-  size="m"
-  theme="light"
-  variant="button"
->
-  <Icon
-    icon="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
-  />
-  <span>
-    Label
-  </span>
-  <Icon
-    icon="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-  />
-</ButtonRoot>
-`;
-
-exports[`<Button> Snapshots and structure should render button with label and left icon 1`] = `
-<ButtonRoot
-  className="lumx-button--has-left-icon"
-  emphasis="high"
-  size="m"
-  theme="light"
-  variant="button"
->
-  <Icon
-    icon="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-  />
-  <span>
-    Label
-  </span>
-</ButtonRoot>
-`;
-
-exports[`<Button> Snapshots and structure should render button with label and right icon 1`] = `
-<ButtonRoot
-  className="lumx-button--has-right-icon"
-  emphasis="high"
-  size="m"
-  theme="light"
-  variant="button"
->
-  <span>
-    Label
-  </span>
-  <Icon
-    icon="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-  />
-</ButtonRoot>
-`;

package/src/components/button/__snapshots__/ButtonGroup.test.tsx.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ButtonGroup> Snapshots and structure should render correctly a group button 1`] = `
-<div
-  className="lumx-button-group"
->
-  <Button
-    emphasis="high"
-    size="m"
-    theme="light"
-  >
-    Label
-  </Button>
-  <IconButton
-    emphasis="high"
-    icon="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"
-    label="Add"
-    size="m"
-    theme="light"
-  />
-</div>
-`;

package/src/components/button/__snapshots__/ButtonRoot.test.tsx.snap

@@ -1,160 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ButtonRoot> Props should be full width 1`] = `
-<ButtonRoot
-  emphasis="high"
-  fullWidth={true}
-  theme="light"
->
-  <button
-    className="lumx-button lumx-button--color-primary lumx-button--emphasis-high lumx-button--theme-light lumx-button--is-full-width"
-    type="button"
-  />
-</ButtonRoot>
-`;
-
-exports[`<ButtonRoot> Props should not have default color in low or medium emphasis 1`] = `
-<ButtonRoot
-  emphasis="low"
->
-  <button
-    className="lumx-button lumx-button--color-dark lumx-button--emphasis-low"
-    type="button"
-  />
-</ButtonRoot>
-`;
-
-exports[`<ButtonRoot> Props should use default color 1`] = `
-<ButtonRoot>
-  <button
-    className="lumx-button lumx-button--color-dark"
-    type="button"
-  />
-</ButtonRoot>
-`;
-
-exports[`<ButtonRoot> Props should use given props 1`] = `
-<ButtonRoot
-  color="red"
-  emphasis="high"
-  hasBackground={true}
-  size="s"
-  theme="dark"
-  variant="icon"
->
-  <div
-    className="lumx-button-wrapper lumx-button-wrapper--variant-icon"
-  >
-    <ButtonRoot
-      color="red"
-      emphasis="high"
-      hasBackground={false}
-      size="s"
-      theme="dark"
-      variant="icon"
-    >
-      <button
-        className="lumx-button lumx-button--color-red lumx-button--emphasis-high lumx-button--size-s lumx-button--theme-dark lumx-button--variant-icon"
-        type="button"
-      />
-    </ButtonRoot>
-  </div>
-</ButtonRoot>
-`;
-
-exports[`<ButtonRoot> Snapshots and structure should render anchor button with label 1`] = `
-<ButtonRoot
-  href="example.com"
-  target="_blank"
->
-  <a
-    className="lumx-button lumx-button--color-dark"
-    href="example.com"
-    target="_blank"
-  >
-    Label
-  </a>
-</ButtonRoot>
-`;
-
-exports[`<ButtonRoot> Snapshots and structure should render anchor button with wrapper and label 1`] = `
-<ButtonRoot
-  hasBackground={true}
-  href="example.com"
-  target="_blank"
->
-  <div
-    className="lumx-button-wrapper"
-  >
-    <ButtonRoot
-      color="dark"
-      hasBackground={false}
-      href="example.com"
-      target="_blank"
-    >
-      <a
-        className="lumx-button lumx-button--color-dark"
-        href="example.com"
-        target="_blank"
-      >
-        Label
-      </a>
-    </ButtonRoot>
-  </div>
-</ButtonRoot>
-`;
-
-exports[`<ButtonRoot> Snapshots and structure should render button with label 1`] = `
-<ButtonRoot>
-  <button
-    className="lumx-button lumx-button--color-dark"
-    type="button"
-  >
-    Label
-  </button>
-</ButtonRoot>
-`;
-
-exports[`<ButtonRoot> Snapshots and structure should render button with wrapper and label 1`] = `
-<ButtonRoot
-  hasBackground={true}
->
-  <div
-    className="lumx-button-wrapper"
-  >
-    <ButtonRoot
-      color="dark"
-      hasBackground={false}
-    >
-      <button
-        className="lumx-button lumx-button--color-dark"
-        type="button"
-      >
-        Label
-      </button>
-    </ButtonRoot>
-  </div>
-</ButtonRoot>
-`;
-
-exports[`<ButtonRoot> Snapshots and structure should render custom link 1`] = `
-<ButtonRoot
-  href="foo"
-  linkAs={[Function]}
->
-  <CustomLink
-    className="lumx-button lumx-button--color-dark"
-    href="foo"
-  >
-    <a
-      className="lumx-button lumx-button--color-dark"
-      href="foo"
-      style={
-        {
-          "color": "red",
-        }
-      }
-    />
-  </CustomLink>
-</ButtonRoot>
-`;

package/src/components/button/__snapshots__/IconButton.test.tsx.snap

@@ -1,83 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<IconButton> Props should forward any CSS class 1`] = `
-<Tooltip
-  placement="bottom"
->
-  <ButtonRoot
-    className="component component--is-tested"
-    emphasis="high"
-    size="m"
-    theme="light"
-    variant="icon"
-  >
-    <Icon />
-  </ButtonRoot>
-</Tooltip>
-`;
-
-exports[`<IconButton> Props should use default props 1`] = `
-<Tooltip
-  placement="bottom"
->
-  <ButtonRoot
-    emphasis="high"
-    size="m"
-    theme="light"
-    variant="icon"
-  >
-    <Icon />
-  </ButtonRoot>
-</Tooltip>
-`;
-
-exports[`<IconButton> Snapshots and structure should render icon button 1`] = `
-<Tooltip
-  placement="bottom"
->
-  <ButtonRoot
-    emphasis="high"
-    size="m"
-    theme="light"
-    variant="icon"
-  >
-    <Icon />
-  </ButtonRoot>
-</Tooltip>
-`;
-
-exports[`<IconButton> Snapshots and structure should render icon button with an image 1`] = `
-<Tooltip
-  placement="bottom"
->
-  <ButtonRoot
-    emphasis="high"
-    size="m"
-    theme="light"
-    variant="icon"
-  >
-    <img
-      alt=""
-      src="http://foo.com"
-    />
-  </ButtonRoot>
-</Tooltip>
-`;
-
-exports[`<IconButton> Snapshots and structure should render icon button with an image if both props are set 1`] = `
-<Tooltip
-  placement="bottom"
->
-  <ButtonRoot
-    emphasis="high"
-    size="m"
-    theme="light"
-    variant="icon"
-  >
-    <img
-      alt=""
-      src="http://foo.com"
-    />
-  </ButtonRoot>
-</Tooltip>
-`;

package/src/components/checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -1,141 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Checkbox> Props should use the given props 1`] = `
-<div
-  className="lumx-checkbox lumx-checkbox--is-unchecked lumx-checkbox--theme-light"
->
-  <div
-    className="lumx-checkbox__input-wrapper"
-  >
-    <input
-      aria-describedby="fixedId-helper"
-      className="lumx-checkbox__input-native"
-      id="fixedId"
-      onChange={[Function]}
-      tabIndex={0}
-      type="checkbox"
-    />
-    <div
-      className="lumx-checkbox__input-placeholder"
-    >
-      <div
-        className="lumx-checkbox__input-background"
-      />
-      <div
-        className="lumx-checkbox__input-indicator"
-      >
-        <Icon
-          icon="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="lumx-checkbox__content"
-  >
-    <InputLabel
-      className="lumx-checkbox__label"
-      htmlFor="fixedId"
-      theme="light"
-    >
-      Test label
-    </InputLabel>
-    <InputHelper
-      className="lumx-checkbox__helper"
-      id="fixedId-helper"
-      kind="info"
-      theme="light"
-    >
-      Test helper
-    </InputHelper>
-  </div>
-</div>
-`;
-
-exports[`<Checkbox> Props should use the given props while passing custom props to input 1`] = `
-<div
-  className="lumx-checkbox lumx-checkbox--is-unchecked lumx-checkbox--theme-light"
->
-  <div
-    className="lumx-checkbox__input-wrapper"
-  >
-    <input
-      aria-describedby="fixedId-helper"
-      aria-labelledby="labelledby-id"
-      className="lumx-checkbox__input-native"
-      id="fixedId"
-      onChange={[Function]}
-      tabIndex={0}
-      type="checkbox"
-    />
-    <div
-      className="lumx-checkbox__input-placeholder"
-    >
-      <div
-        className="lumx-checkbox__input-background"
-      />
-      <div
-        className="lumx-checkbox__input-indicator"
-      >
-        <Icon
-          icon="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="lumx-checkbox__content"
-  >
-    <InputLabel
-      className="lumx-checkbox__label"
-      htmlFor="fixedId"
-      theme="light"
-    >
-      Test label
-    </InputLabel>
-    <InputHelper
-      className="lumx-checkbox__helper"
-      id="fixedId-helper"
-      kind="info"
-      theme="light"
-    >
-      Test helper
-    </InputHelper>
-  </div>
-</div>
-`;
-
-exports[`<Checkbox> Snapshots and structure should render correctly 1`] = `
-<div
-  className="lumx-checkbox lumx-checkbox--is-unchecked lumx-checkbox--theme-light"
->
-  <div
-    className="lumx-checkbox__input-wrapper"
-  >
-    <input
-      className="lumx-checkbox__input-native"
-      id="fixedId"
-      onChange={[Function]}
-      tabIndex={0}
-      type="checkbox"
-    />
-    <div
-      className="lumx-checkbox__input-placeholder"
-    >
-      <div
-        className="lumx-checkbox__input-background"
-      />
-      <div
-        className="lumx-checkbox__input-indicator"
-      >
-        <Icon
-          icon="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="lumx-checkbox__content"
-  />
-</div>
-`;