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

package/src/components/Table/docsData.js

@@ -1,189 +0,0 @@
-export const headers = [
-  {
-    key: 'col1',
-    label: 'No.',
-  },
-  {
-    key: 'col2',
-    label: 'Lorem',
-  },
-  {
-    key: 'col3',
-    label: 'Ipsum',
-  },
-  {
-    key: 'col4',
-    label: 'Dolor',
-    cellProps: {
-      className: 'align-right',
-    },
-  },
-];
-
-export const rows = [
-  {
-    col1: { value: '1' },
-    col2: 'Et fugiat',
-    col3: 'Voluptate dolore',
-    col4: '579',
-  },
-  {
-    col1: '2',
-    col2: 'Quis deserunt',
-    col3: 'Aliqua sint laboris ut',
-    col4: '814',
-  },
-  {
-    col1: '3',
-    col2: 'Voluptate dolore',
-    col3: 'Aliqua sint laboris ut',
-    col4: '436',
-  },
-];
-
-const dateHeader = {
-  key: 'date',
-  label: 'Date',
-  isSortable: true,
-  sort: 'none',
-};
-
-const sortableHeaders = [...headers];
-
-export const unsortedHeaders = [dateHeader, ...sortableHeaders];
-
-export const ascendingHeaders = [
-  { ...dateHeader, sort: 'ascending' },
-  ...sortableHeaders,
-];
-
-export const descendingHeaders = [
-  { ...dateHeader, sort: 'descending' },
-  ...sortableHeaders,
-];
-
-export const sortableRows = rows.map(row => {
-  const date = new Date(
-    Date.UTC(2017, 12, Math.floor(Math.random() * 31), 0, 0, 0)
-  );
-  return {
-    ...row,
-    date: {
-      value: date.toLocaleDateString('en', {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      }),
-    },
-  };
-});
-
-export const ascendingRowsByDate = [...sortableRows].sort(
-  (a, b) => a.date.rawValue - b.date.rawValue
-);
-
-export const descendingRowsByDate = [...sortableRows].sort(
-  (a, b) => b.date.rawValue - a.date.rawValue
-);
-
-export const expandableTableRows = [
-  ...rows.map((r, i) => ({ ...r, col1: '' + (1 + i) })),
-].map((row, index) => ({
-  ...row,
-  expand: new Array(index + 1).fill({
-    col1: '',
-    col2: 'test',
-    col3: '',
-    col4: '436',
-  }),
-}));
-
-expandableTableRows[2] = {
-  col1: '3',
-  col2: 'Voluptate dolore',
-  col3: 'Aliqua sint laboris ut',
-  col4: '436',
-};
-
-export const footer = [
-  {
-    col1: '',
-    col2: '',
-    col3: 'lorem ipsum',
-    col4: '3525',
-  },
-];
-
-export const scrollableHeaders = [
-  ...headers,
-  {
-    key: 'col5',
-    label:
-      'Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
-    cellProps: { className: 'text-nowrap' },
-  },
-];
-
-export const scrollableRows = [
-  ...rows.map(row => {
-    return {
-      ...row,
-      col5: 'Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
-    };
-  }),
-];
-
-export const shrinkHeaders = [
-  {
-    key: 'col1',
-    label: 'Deafult column',
-  },
-  {
-    key: 'col2',
-    label: 'Shrink',
-    cellProps: { className: 'table__cell--shrink' },
-  },
-];
-
-export const shrinkRows = [
-  {
-    col1: 'Et fugiat',
-    col2: '1',
-  },
-  {
-    col1: 'Quis deserunt',
-    col2: '2',
-  },
-  {
-    col1: 'Voluptate dolore',
-    col2: '3',
-  },
-];
-
-export const fillHeaders = [
-  {
-    key: 'col1',
-    label: 'Deafult column',
-  },
-  {
-    key: 'col2',
-    label: 'Fill all available space',
-    cellProps: { className: 'table__cell--fill' },
-  },
-];
-
-export const fillRows = [
-  {
-    col1: 'Et fugiat',
-    col2: '1',
-  },
-  {
-    col1: 'Quis deserunt',
-    col2: '2',
-  },
-  {
-    col1: 'Voluptate dolore',
-    col2: '3',
-  },
-];

package/src/components/Table/index.js

@@ -1,5 +0,0 @@
-// import React from 'react';
-
-import './styles/style.scss';
-
-export { default } from './Table';

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

@@ -1,4 +0,0 @@
-$arrow-size: 5px;
-$striped-color: #f6f6f6;
-$normal-border-size: 1px;
-$fat-border-size: 2px;

package/src/components/Table/styles/mixins.scss

@@ -1,115 +0,0 @@
-@use './config';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
-
-@mixin base {
-  width: 100%;
-  margin-bottom: space.get();
-  color: color.$black;
-  background-color: color.$white;
-}
-
-@mixin cells {
-  padding: space.get('small') space.get('small') space.get('small') 0;
-  vertical-align: middle;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-@mixin header-cells {
-  vertical-align: bottom;
-  text-align: left;
-  border-bottom: config.$fat-border-size solid color.$gray-500;
-  font-weight: 700;
-}
-
-@mixin rows {
-  line-height: space.get('medium');
-  border-bottom: config.$normal-border-size solid color.$gray-500;
-}
-
-@mixin header-rows {
-  border-bottom-width: config.$fat-border-size;
-}
-
-@mixin body-header-cells {
-  font-weight: 400;
-}
-
-@mixin rows-first-cell {
-  padding-left: space.get('small');
-}
-
-@mixin body-sibling {
-  border-top: config.$fat-border-size solid color.$gray-500;
-}
-
-@mixin footer-rows {
-  border-bottom-width: 0;
-  border-top: config.$fat-border-size solid color.$black;
-
-  &:not(:first-child) {
-    border-top-color: color.$gray-500;
-  }
-}
-
-@mixin odd-row {
-  background-color: config.$striped-color;
-}
-
-@mixin scrollable-wrapper {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-@mixin sort-button {
-  position: relative;
-  display: inline-block;
-  width: space.get();
-  height: space.get();
-  vertical-align: bottom;
-  cursor: pointer;
-}
-
-@mixin sort-arrows-base {
-  content: '';
-  position: absolute;
-  left: space.get('xsmall');
-  border-left: config.$arrow-size solid transparent;
-  border-right: config.$arrow-size solid transparent;
-  transition: opacity 0.1s ease 0s;
-}
-
-@mixin sort-arrow-up {
-  top: 4px;
-  border-bottom: config.$arrow-size solid color.$black;
-}
-
-@mixin sort-arrow-down {
-  top: 12px;
-  border-top: config.$arrow-size solid color.$black;
-}
-
-@mixin sorted-arrow {
-  opacity: 0.3;
-}
-
-@mixin subrow {
-  background-color: color.$gray-300;
-}
-
-@mixin expanded-icon {
-  transform: rotate(180deg);
-}
-
-@mixin expand-padding {
-  padding-top: 4px !important;
-  padding-bottom: 0 !important;
-}
-
-@mixin compact {
-  width: auto;
-}

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

@@ -1,101 +0,0 @@
-@use './mixins';
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tools/generate';
-
-.table {
-  @include mixins.base;
-
-  td,
-  th {
-    @include mixins.cells;
-  }
-
-  thead th {
-    @include mixins.header-cells;
-  }
-
-  tr {
-    @include mixins.rows;
-  }
-
-  thead > tr {
-    @include mixins.header-rows;
-  }
-
-  tbody > th {
-    @include mixins.body-header-cells;
-  }
-
-  tr > *:first-of-type {
-    @include mixins.rows-first-cell;
-  }
-
-  tbody + tbody {
-    @include mixins.body-sibling;
-  }
-
-  > tfoot > tr {
-    @include mixins.footer-rows;
-  }
-
-  &--striped tbody tr:nth-of-type(odd) {
-    @include mixins.odd-row;
-  }
-
-  &--compact {
-    @include mixins.compact;
-  }
-
-  @each $breakpoint in ('default', 'sm', 'md', 'lg', 'xl', 'xxl') {
-    @include breakpoint.get($breakpoint, 'down') {
-      &-scrollable#{generate.variant-name($breakpoint)} {
-        @include mixins.scrollable-wrapper;
-      }
-    }
-  }
-
-  &__sort-button {
-    @include mixins.sort-button;
-
-    &::before,
-    &::after {
-      @include mixins.sort-arrows-base;
-    }
-
-    &::before {
-      @include mixins.sort-arrow-up;
-    }
-
-    &::after {
-      @include mixins.sort-arrow-down;
-    }
-
-    [aria-sort='descending'] &::before {
-      @include mixins.sorted-arrow;
-    }
-
-    [aria-sort='ascending'] &::after {
-      @include mixins.sorted-arrow;
-    }
-  }
-
-  &__subrow {
-    @include mixins.subrow;
-  }
-
-  button[aria-expanded='true'] > svg {
-    @include mixins.expanded-icon;
-  }
-
-  &__cell--expand {
-    @include mixins.expand-padding;
-  }
-
-  &__cell--shrink {
-    width: 0.1%;
-  }
-
-  &__cell--fill {
-    width: 100%;
-  }
-}

package/src/components/Table/tests/Cell.unit.test.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Cell from '../Cell';
-
-// table, tbody and tr to prevent warning
-describe('rendering Cell', () => {
-  describe('initial state', () => {
-    it('has default tag td', () => {
-      const { getByTestId } = render(
-        <table>
-          <tbody>
-            <tr>
-              <Cell data-testid="test-id" />
-            </tr>
-          </tbody>
-        </table>
-      );
-      expect(getByTestId('test-id').tagName).toBe('TD');
-    });
-  });
-  describe('initial state', () => {
-    it('has tag th when tag prop is set to th', () => {
-      const { getByTestId } = render(
-        <table>
-          <tbody>
-            <tr>
-              <Cell data-testid="test-id" tag="th" />
-            </tr>
-          </tbody>
-        </table>
-      );
-      expect(getByTestId('test-id').tagName).toBe('TH');
-    });
-    it('has class when className is set', () => {
-      const { getByTestId } = render(
-        <table>
-          <tbody>
-            <tr>
-              <Cell data-testid="test-id" className="test-class" />
-            </tr>
-          </tbody>
-        </table>
-      );
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-    it('renders children', () => {
-      const { getByText } = render(
-        <table>
-          <tbody>
-            <tr>
-              <Cell data-testid="test-id">test</Cell>
-            </tr>
-          </tbody>
-        </table>
-      );
-      expect(getByText('test')).toBeInTheDocument();
-    });
-  });
-});

package/src/components/Table/tests/Footer.unit.test.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import TableContext from '../TableContext';
-import Footer from '../Footer';
-
-describe('rendering Footer', () => {
-  const footers = [
-    {
-      key1: 'row1',
-      key2: 'row1',
-    },
-    {
-      key1: 'row2',
-      key2: 'row2',
-      expand: [
-        {
-          key1: 'row2-expand',
-          key2: 'row2-expand',
-        },
-      ],
-    },
-  ];
-  const headers = [
-    {
-      key: 'key1',
-      label: 'header-1',
-    },
-    {
-      key: 'key2',
-      label: 'header-2',
-      cellProps: {
-        className: 'test-cellprop',
-      },
-    },
-  ];
-  let footer;
-
-  beforeEach(() => {
-    footer = render(
-      <TableContext.Provider
-        value={{
-          headers: headers,
-          footers: footers,
-          expandableRows: { hasExpandableRows: true },
-        }}
-      >
-        <table>
-          <Footer />
-        </table>
-      </TableContext.Provider>
-    );
-  });
-  it('renders multiple rows', () => {
-    const { container } = footer;
-    expect(container.querySelectorAll('tr').length).toBe(2);
-  });
-  it('renders cells text content', () => {
-    const { getAllByText } = footer;
-    expect(getAllByText('row1').length).toBe(2);
-    expect(getAllByText('row2').length).toBe(2);
-  });
-  it('footer row can be expandable - have span with text Zobraziť 1 súvisiaci riadok inside button when expand length is 1', () => {
-    const { getAllByText } = footer;
-    expect(
-      getAllByText('row2')[0]
-        .parentElement.querySelector('button')
-        .querySelector('span').textContent
-    ).toBe('Zobraziť 1 súvisiaci riadok');
-  });
-});

package/src/components/Table/tests/Header.unit.test.js

@@ -1,121 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import TableContext from '../TableContext';
-import Header from '../Header';
-
-describe('rendering Header', () => {
-  const headers = [
-    {
-      key: '1',
-      label: 'header-1',
-    },
-    {
-      key: '2',
-      label: 'header-2',
-      isSortable: true,
-    },
-    {
-      cellProps: {
-        className: 'test-class--cell',
-      },
-      key: '3',
-      label: 'header-3',
-    },
-    {
-      headCellProps: {
-        className: 'test-class--head-cell',
-      },
-      key: '4',
-      label: 'header-4',
-    },
-  ];
-
-  let header;
-  describe('passes props', () => {
-    beforeEach(() => {
-      header = render(
-        <TableContext.Provider value={{ headers: headers }}>
-          <table>
-            <Header data-testid="test-id" />
-          </table>
-        </TableContext.Provider>
-      );
-    });
-    it('renders number of cells with th tag equal to length of headers array', () => {
-      const { container } = header;
-      expect(container.querySelectorAll('th').length).toBe(4);
-    });
-    it('cells with th tag have scope set to "col"', () => {
-      const { container } = header;
-      const th = container.querySelectorAll('th');
-      for (let i in headers.length) {
-        expect(th[i].getAttribute('scope')).toBe('col');
-      }
-    });
-    it('sortable cells have aria-sort attribute set to "none", otherwise is not set', () => {
-      const { container } = header;
-      const th = container.querySelectorAll('th');
-      for (let i in headers) {
-        if (th[i].textContent === 'header-2 zoradiť vzostupne podľa header-2') {
-          expect(th[i].getAttribute('aria-sort')).toBe('none');
-        } else {
-          expect(th[i].getAttribute('aria-sort')).toBe(null);
-        }
-      }
-    });
-    it('headCellProps are passed', () => {
-      const { container } = header;
-      const th = container.querySelectorAll('th');
-      for (let i in headers) {
-        if (th[i].textContent === 'header-4') {
-          expect(th[i]).toHaveClass('test-class--head-cell');
-        } else {
-          expect(th[i]).not.toHaveClass('test-class--head-cell');
-        }
-      }
-    });
-    it('cellProps are passed', () => {
-      const { container } = header;
-      const th = container.querySelectorAll('th');
-      for (let i in headers) {
-        if (th[i].textContent === 'header-3') {
-          expect(th[i]).toHaveClass('test-class--cell');
-        } else {
-          expect(th[i]).not.toHaveClass('test-class--cell');
-        }
-      }
-    });
-    it('button with class "table__sort-button" is rendered inside sortable cell', () => {
-      const { container } = header;
-      const th = container.querySelector('th[aria-sort="none"]');
-      expect(th).toBeInTheDocument();
-      expect(th.querySelector('button')).toBeInTheDocument();
-      expect(th.querySelector('button')).toHaveClass('table__sort-button');
-    });
-    it('span with class "sr-only" is rendered inside sortable cell', () => {
-      const { container } = header;
-      const th = container.querySelector('th[aria-sort="none"]');
-      expect(th).toBeInTheDocument();
-      expect(th.querySelector('span')).toBeInTheDocument();
-      expect(th.querySelector('span')).toHaveClass('sr-only');
-    });
-    it('has cell with th tag and class "table__cell--shrink" when hasExpandableRows is set to true', () => {
-      const { container } = render(
-        <TableContext.Provider
-          value={{
-            headers: headers,
-            expandableRows: { hasExpandableRows: true },
-          }}
-        >
-          <table>
-            <Header data-testid="test-id" />
-          </table>
-        </TableContext.Provider>
-      );
-      const th = container.getElementsByClassName('table__cell--shrink');
-      expect(th.length).toBe(1);
-      expect(th[0].tagName).toBe('TH');
-    });
-  });
-});