@orangesk/orange-design-system 1.11.0 → 2.0.0-alpha.0

package/src/components/Tile/Tile.mdx

@@ -1,163 +0,0 @@
-import {
-  CodeBlock,
-  ComponentDocs,
-  Note,
-} from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-
-import Tile from './index';
-import Grid, { GridCol } from '../Grid/index';
-import BlockAction, {
-  BlockActionControl,
-  BlockActionIndicator,
-  BlockActionOverride,
-} from '../BlockAction';
-import Link from '../Link';
-import Button from '../Button';
-
-export const colors = ['default', 'black'];
-
-# Tile
-
-Tile fills container and allows us to set background image, icon or to align children. Used mostly in Carousel or Grid components.
-
-<Preview bgTheme="gray">
-  <Grid rowGapSize="medium">
-    {['device-tablet', 'device-tv', 'device-smart-phone'].map((icon, index) => (
-      <GridCol size={{ xs: 6, md: 4, lg: 3 }} key={index.toString()}>
-        <Tile
-          key={index.toString()}
-          backgroundIcon={{
-            name: icon,
-          }}
-        >
-          <p>Tile {index + 1}</p>
-        </Tile>
-      </GridCol>
-    ))}
-  </Grid>
-</Preview>
-
-## Color
-
-<Preview bgTheme="gray">
-  <Grid rowGapSize="medium">
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile children="White (default) color" />
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile children="Black color" color="black" />
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Background
-
-You can set background image or icon aligned to bottom and center of tile.
-
-<Preview>
-  <Grid rowGapSize="medium">
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile
-        backgroundImage={{
-          src: 'https://placehold.co/320x320',
-          alt: 'Gray square with dimensions',
-        }}
-      >
-        <p>Background Image</p>
-      </Tile>
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile
-        color="black"
-        backgroundIcon={{
-          name: 'device-tablet',
-        }}
-      >
-        <p>Background Icon</p>
-      </Tile>
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile
-        backgroundIcon={{
-          name: 'device-tablet',
-        }}
-        backgroundImage={{
-          src: 'https://placehold.co/320x320',
-          alt: 'Gray square with dimensions',
-        }}
-      >
-        <p>Both background Icon and Image</p>
-      </Tile>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Alignment
-
-Children can be aligned using hAlign and vAlign props.
-
-<Preview bgTheme="gray">
-  <Grid rowGapSize="medium">
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile children="Default (left)" />
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile children="Center vertical" vAlign="center" />
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile children="Center horizontal" hAlign="center" />
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile children="End" vAlign="end" />
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile vAlign="space-between">
-        <p>Space</p>
-        <p>between</p>
-      </Tile>
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile
-        children="Center center alignment"
-        vAlign="center"
-        hAlign="center"
-      />
-    </GridCol>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <Tile hAlign="center" vAlign="space-between">
-        <p>Center</p>
-        <p>space-between</p>
-      </Tile>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Block Link example
-
-<Preview bgTheme="gray">
-  <Grid>
-    <GridCol size={{ xs: 6, md: 4, lg: 3 }}>
-      <BlockAction>
-        <Tile>
-          <h3 hasMdxLink={false}>
-            <BlockActionControl>
-              <Link href="#">Block heading</Link>
-            </BlockActionControl>
-          </h3>
-          <p>Lorem Ipsum</p>
-          <BlockActionOverride>
-            <Button>Override button</Button>
-          </BlockActionOverride>
-        </Tile>
-      </BlockAction>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Tile />" component={Tile} />
-
-## Accessibility

package/src/components/Tile/index.js

@@ -1,5 +0,0 @@
-import Tile from './Tile';
-
-import './styles/style.scss';
-
-export default Tile;

package/src/components/Tile/styles/config.scss

@@ -1,19 +0,0 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
-
-$colors: (
-  default: (
-    background-color: color.$white,
-    color: color.$black,
-  ),
-  black: (
-    background-color: color.$black,
-    color: color.$white,
-  ),
-);
-
-$spacing: (
-  xs: space.get('small'),
-  sm: space.get('small'),
-  md: space.get('medium'),
-);

package/src/components/Tile/styles/style.scss

@@ -1,49 +0,0 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tools/generate';
-@use '../../../styles/utilities/layout';
-@use './config';
-
-.tile {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 0;
-  padding-bottom: 100%;
-
-  @include generate.variants(config.$colors);
-
-  &__body {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-
-    @each $breakpoint, $space in config.$spacing {
-      @include breakpoint.get($breakpoint) {
-        padding: $space;
-      }
-    }
-  }
-
-  &__bg,
-  &__icon {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: 100%;
-    transform: translateX(-50%);
-    margin-bottom: 0;
-  }
-
-  &__icon {
-    width: 50%;
-    height: 50%;
-    margin-bottom: space.get('small');
-  }
-}

package/src/components/Tile/tests/Tile.conformance.test.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Tile from '../';
-
-const example = <Tile>tile</Tile>;
-
-it('is valid html', () => {
-  const { container } = render(example);
-  expect(container).toHTMLValidate();
-});
-
-it('is accessible', async () => {
-  const { container } = render(example);
-  expect(await axe(container)).toHaveNoViolations();
-});

package/src/components/Tile/tests/Tile.unit.test.js

@@ -1,164 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Tile from '../Tile';
-
-describe('rendering Tile', () => {
-  describe('initial state', () => {
-    it('renders div with class tile', () => {
-      const { getByTestId } = render(<Tile data-testid="test-id" />);
-      expect(getByTestId('test-id').tagName).toBe('DIV');
-      expect(getByTestId('test-id')).toHaveClass('tile');
-    });
-    it('renders child div with class tile__body', () => {
-      const { getByTestId } = render(<Tile data-testid="test-id" />);
-      expect(getByTestId('test-id').children.length).toBe(1);
-      expect(getByTestId('test-id').children[0].tagName).toBe('DIV');
-      expect(getByTestId('test-id').children[0]).toHaveClass('tile__body');
-    });
-  });
-  describe('passed props', () => {
-    it('renders children', () => {
-      const { getByText } = render(<Tile>test</Tile>);
-      expect(getByText('test')).toBeInTheDocument();
-    });
-    it('has additional class when className is set', () => {
-      const { getByTestId } = render(
-        <Tile data-testid="test-id" className="test-class" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('tile');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-    it('renders Image when backgroundImage is object of Image props and src is string', () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: './test.png', alt: 'test' }}
-        />
-      );
-      expect(container.querySelector('img')).toBeInTheDocument();
-      expect(container.querySelector('img')).toHaveClass('img');
-    });
-    it('renders image inside picture when backgroundImage is object of Image props and src is object', () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: { default: './test.png' }, alt: 'test' }}
-        />
-      );
-      expect(container.querySelector('picture')).toBeInTheDocument();
-      expect(
-        container.querySelector('picture').querySelector('img')
-      ).toBeInTheDocument();
-      expect(container.querySelector('picture')).toHaveClass('img');
-    });
-    it('background image has class tile__bg', () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: './test.png', alt: 'test' }}
-        />
-      );
-      expect(container.querySelector('img')).toHaveClass('tile__bg');
-    });
-    it('background image has src set to backgroundImage.src', () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: './test.png', alt: 'test' }}
-        />
-      );
-      expect(container.querySelector('img').src).toBe(
-        'http://localhost/test.png'
-      );
-    });
-    it('background image has alt set to backgroundImage.alt', () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: './test.png', alt: 'test' }}
-        />
-      );
-      expect(container.querySelector('img').alt).toBe('test');
-    });
-    it('background image has additional class when backgroundImage.className is set', () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{
-            src: './test.png',
-            alt: 'test',
-            className: 'test-class',
-          }}
-        />
-      );
-      expect(container.querySelector('img')).toHaveClass('img');
-      expect(container.querySelector('img')).toHaveClass('test-class');
-    });
-    it('renders Icon when backgroundIcon prop is set', () => {
-      const { container } = render(
-        <Tile data-testid="test-id" backgroundIcon={{ name: './test.png' }} />
-      );
-      expect(container.querySelector('svg')).toBeInTheDocument();
-      expect(container.querySelector('svg')).toHaveClass('icon');
-    });
-    it('background Icon has class tile__icon', () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundIcon={{
-            name: './test.png',
-          }}
-        />
-      );
-      expect(container.querySelector('svg')).toHaveClass('tile__icon');
-    });
-    it('Icons xlinkhref uses name passed in backgroundIcon prop', () => {
-      const { container } = render(
-        <Tile data-testid="test-id" backgroundIcon={{ name: 'test-name' }} />
-      );
-      const use = container.querySelector('svg').querySelector('use');
-      expect(use).toBeInTheDocument();
-      expect(use.getAttribute('xlink:href')).toEqual('/sprite.svg#test-name');
-    });
-    it('background Icon has additional class when backgroundIcon.className is set', () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundIcon={{
-            name: './test.png',
-            className: 'test-class',
-          }}
-        />
-      );
-      expect(container.querySelector('svg')).toHaveClass('icon');
-      expect(container.querySelector('svg')).toHaveClass('test-class');
-    });
-
-    it('has class tile--black when color is set to black', () => {
-      const { getByTestId } = render(
-        <Tile data-testid="test-id" color="black" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('tile--black');
-    });
-
-    ['center', 'end', 'space-between'].map(alignment => {
-      it('child div has align classes when vAlign and hAlign is set', () => {
-        const { getByTestId } = render(
-          <Tile
-            data-testid="test-id"
-            vAlign={alignment}
-            hAlign="center"
-            name="test-name"
-          />
-        );
-        expect(getByTestId('test-id').querySelector('div')).toHaveClass(
-          `align-items-center`
-        );
-        expect(getByTestId('test-id').querySelector('div')).toHaveClass(
-          `justify-content-${alignment}`
-        );
-      });
-    });
-  });
-});

package/src/components/Tooltip/InfoTooltip.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-
-import Icon from '../Icon';
-
-import Tooltip from './Tooltip';
-
-const CLASS_ROOT = 'info-tooltip';
-
-const InfoTooltip = ({ children, className, ...other }) => (
-  <Tooltip
-    dialog={children}
-    renderTrigger={props => (
-      <button type="button" className={CLASS_ROOT} {...props} />
-    )}
-    {...other}
-  >
-    <Icon
-      name="assistance"
-      color="info"
-      className={cx(`${CLASS_ROOT}__icon`, className)}
-    />
-    <span className="sr-only">Info</span>
-  </Tooltip>
-);
-
-InfoTooltip.displayName = 'InfoTooltip';
-
-export default InfoTooltip;

package/src/components/Tooltip/Tooltip.js

@@ -1,107 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { node, string, oneOf, func } from 'prop-types';
-import cx from 'classnames';
-
-import generateId from '../../utils/generateId';
-
-import TooltipStatic from './Tooltip.static';
-
-const CLASS_ROOT = 'tooltip';
-
-const propTypes = {
-  /** Tooltip dialog content */
-  dialog: node,
-  /** Tooltip ID */
-  id: string,
-  /** Preffered placement, if there is enough room. Defaults to top. */
-  placement: oneOf([
-    'auto',
-    'top',
-    'top-start',
-    'top-end',
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-    'right',
-    'right-start',
-    'right-end',
-    'left',
-    'left-start',
-    'left-end',
-  ]),
-  /** Custom trigger renderer. Passes required aria attributes and children in an object as argument. */
-  renderTrigger: func,
-  /** Render dialog as */
-  tag: oneOf(['span', 'div']),
-};
-
-const defaultProps = {
-  tag: 'span',
-};
-
-const Tooltip = ({
-  dialog,
-  id,
-  placement,
-  tag,
-  className,
-  renderTrigger,
-  children,
-  ...other
-}) => {
-  const currentId = id || generateId();
-  const classes = cx(CLASS_ROOT, className);
-  const Tag = tag;
-
-  let dialogRef = useRef();
-
-  useEffect(() => {
-    const tooltip = new TooltipStatic(dialogRef, {
-      removeDialogOnDestroy: true,
-    });
-
-    return () => {
-      tooltip.destroy();
-    };
-  }, [dialogRef]);
-
-  const triggerProps = {
-    'data-tooltip-trigger': true,
-    'aria-describedby': currentId,
-    'aria-owns': currentId,
-    children,
-  };
-
-  return (
-    <>
-      {renderTrigger ? (
-        renderTrigger(triggerProps)
-      ) : (
-        <button type="button" {...triggerProps}>
-          {children}
-        </button>
-      )}
-      <Tag
-        id={currentId}
-        className={classes}
-        role="tooltip"
-        hidden
-        ref={ref => {
-          dialogRef = ref;
-        }}
-        data-tooltip
-        data-tooltip-placement={placement}
-        {...other}
-      >
-        <Tag className="tooltip__arrow" />
-        <Tag className="tooltip__dialog">{dialog}</Tag>
-      </Tag>
-    </>
-  );
-};
-
-Tooltip.propTypes = propTypes;
-Tooltip.defaultProps = defaultProps;
-Tooltip.displayName = 'Tooltip';
-
-export default Tooltip;