@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

package/src/components/molecules/table/index.stories.tsx

@@ -1,264 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import * as Table from '../table'
-
-export default {
-  component: Table,
-  title: 'Molecules/Table',
-}
-
-const Template: Story = (args) => (
-  <Table.Table {...args}>
-    <Table.Head isSticky>
-      <Table.Cell isTableHead>Header Cell one</Table.Cell>
-      <Table.Cell isTableHead>Header Cell Two</Table.Cell>
-      <Table.Cell isTableHead>Header Cell Tree</Table.Cell>
-      <Table.Cell isTableHead>Header Cell Four</Table.Cell>
-      <Table.Cell isTableHead>Header Cell Five</Table.Cell>
-    </Table.Head>
-    <Table.Body isStriped isHoverable>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-  </Table.Table>
-)
-
-export const FullTable = Template.bind({})
-
-FullTable.args = {
-  horizontalPadding: '19px',
-  verticalPadding: '30px',
-}
-
-const Header: Story = () => (
-  <Table.Table>
-    <Table.Head>
-      <th>Header Cell one</th>
-      <th>Header Cell Two</th>
-      <th>Header Cell Three</th>
-      <th>Header Cell Four</th>
-      <th>Header Cell Five</th>
-    </Table.Head>
-  </Table.Table>
-)
-
-export const TableHeader = Header.bind({})
-
-TableHeader.args = {
-  isSticky: true,
-}
-
-const Row: Story = (args) => (
-  <Table.Table>
-    <Table.Row {...args}>
-      <Table.Cell>Cell one</Table.Cell>
-      <Table.Cell>Cell Two</Table.Cell>
-      <Table.Cell>Cell Three</Table.Cell>
-      <Table.Cell>Cell Four</Table.Cell>
-      <Table.Cell>Cell Dive</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>Cell one</Table.Cell>
-      <Table.Cell>Cell Two</Table.Cell>
-      <Table.Cell>Cell Three</Table.Cell>
-      <Table.Cell>Cell Four</Table.Cell>
-      <Table.Cell>Cell Dive</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>Cell one</Table.Cell>
-      <Table.Cell>Cell Two</Table.Cell>
-      <Table.Cell>Cell Three</Table.Cell>
-      <Table.Cell>Cell Four</Table.Cell>
-      <Table.Cell>Cell Dive</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>Cell one</Table.Cell>
-      <Table.Cell>Cell Two</Table.Cell>
-      <Table.Cell>Cell Three</Table.Cell>
-      <Table.Cell>Cell Four</Table.Cell>
-      <Table.Cell>Cell Dive</Table.Cell>
-    </Table.Row>
-  </Table.Table>
-)
-
-export const TableRow = Row.bind({})
-
-TableRow.args = {
-  isActive: true,
-}
-
-const Body: Story = (args) => (
-  <Table.Table>
-    <Table.Body {...args}>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Cell one</Table.Cell>
-        <Table.Cell>Cell Two</Table.Cell>
-        <Table.Cell>Cell Three</Table.Cell>
-        <Table.Cell>Cell Four</Table.Cell>
-        <Table.Cell>Cell Dive</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-  </Table.Table>
-)
-
-export const TableBody = Body.bind({})
-
-TableBody.args = {
-  isStriped: true,
-  isHoverable: false,
-}
-
-const Cell: Story = (args) => (
-  <Table.Table>
-    <Table.Row>
-      <Table.Cell {...args}>Header Cell one</Table.Cell>
-    </Table.Row>
-  </Table.Table>
-)
-
-export const TableCell = Cell.bind({})
-
-TableCell.args = {
-  textAlign: 'right',
-  isTableHead: false,
-}

package/src/components/molecules/table/index.test.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import MockTheme from '../../../misc/mockTheme'
-import * as Table from '../table'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const dropdown = render(
-    <MockTheme>
-      <Table.Table>
-        <Table.Head isSticky>
-          <th>Header one</th>
-          <th>Header two</th>
-          <th>Header three</th>
-        </Table.Head>
-      </Table.Table>
-    </MockTheme>,
-  )
-
-  const self = dropdown.container.firstChild
-
-  expect(self).toMatchSnapshot()
-
-  expect(self.firstChild).toHaveAttribute('data-is-sticky', 'true')
-})

package/src/components/molecules/table/index.tsx

@@ -1,5 +0,0 @@
-export { Table } from './table'
-export { Cell } from './tableCell'
-export { Head } from './tableHead'
-export { Row } from './tableRow'
-export { Body } from './tableBody'

package/src/components/molecules/table/table.tsx

@@ -1,38 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react'
-
-import styled from 'styled-components'
-
-type Props = {
-  children: ReactNode
-  horizontalPadding?: string
-  verticalPadding?: string
-  className?: string
-  style?: CSSProperties
-}
-
-const StyledTable = styled.table`
-  --horizontal-spacing: ${(props) => props.theme.horizontalPadding || '19px'};
-  --vertical-spacing: ${(props) => props.theme.verticalPadding || '26px'};
-  width: 100%;
-  position: relative;
-`
-
-const Table = ({
-  children,
-  className,
-  style,
-  horizontalPadding,
-  verticalPadding,
-}: Props) => {
-  return (
-    <StyledTable
-      className={className}
-      style={style}
-      theme={{ horizontalPadding, verticalPadding }}
-    >
-      {children}
-    </StyledTable>
-  )
-}
-
-export { Table }

package/src/components/molecules/table/tableBody.tsx

@@ -1,46 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react'
-
-import styled from 'styled-components'
-
-type Props = {
-  children: ReactNode
-  isHoverable?: boolean
-  isStriped?: boolean
-  style?: CSSProperties
-  className?: string
-}
-
-const StyledTableBody = styled.tbody`
-  position: relative;
-  &[data-is-striped] {
-    > tr:nth-child(odd) {
-      background-color: ${(props) => props.theme.colors.neutral50};
-    }
-  }
-  &[data-is-hoverable] {
-    > tr:hover {
-      background-color: ${(props) => props.theme.colors.neutral100};
-    }
-  }
-`
-
-const Body = ({
-  children,
-  className,
-  style,
-  isHoverable,
-  isStriped,
-}: Props) => {
-  return (
-    <StyledTableBody
-      className={className}
-      style={style}
-      data-is-striped={isStriped || undefined}
-      data-is-hoverable={isHoverable || undefined}
-    >
-      {children}
-    </StyledTableBody>
-  )
-}
-
-export { Body }

package/src/components/molecules/table/tableCell.tsx

@@ -1,47 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react'
-
-import styled from 'styled-components'
-
-type Props = {
-  children: ReactNode
-  textAlign?: 'left' | 'center' | 'right'
-  className?: string
-  isTableHead?: boolean
-  style?: CSSProperties
-}
-
-const StyledTableCell = styled.td`
-  padding: var(--vertical-spacing) var(--horizontal-spacing);
-  vertical-align: middle;
-
-  &[data-text-align='left'] {
-    text-align: left;
-  }
-  &[data-text-align='right'] {
-    text-align: right;
-  }
-  &[data-text-align='center'] {
-    text-align: center;
-  }
-`
-
-const Cell = ({
-  children,
-  className,
-  style,
-  textAlign,
-  isTableHead,
-}: Props) => {
-  return (
-    <StyledTableCell
-      className={className}
-      style={style}
-      data-text-align={textAlign ? textAlign : 'left'}
-      as={isTableHead ? 'th' : 'td'}
-    >
-      {children}
-    </StyledTableCell>
-  )
-}
-
-export { Cell }

package/src/components/molecules/table/tableHead.tsx

@@ -1,46 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react'
-
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-import { Row } from './tableRow'
-
-type Props = {
-  children: ReactNode
-  className?: string
-  isSticky?: boolean
-  style?: CSSProperties
-}
-
-const StyledTableHead = styled.thead`
-  th {
-    padding: var(--vertical-spacing) var(--horizontal-spacing);
-    text-align: left;
-
-    color: ${(props: ThemeProps) => props.theme.colors.gray500};
-    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-  }
-  &[data-is-sticky] {
-    th {
-      position: sticky;
-      top: 0;
-      background: white;
-      border-bottom: 2px solid
-        ${(props: ThemeProps) => props.theme.colors.gray200};
-    }
-  }
-`
-
-const Head = ({ isSticky, children, className, style }: Props) => {
-  return (
-    <StyledTableHead
-      className={className}
-      data-is-sticky={isSticky || undefined}
-      style={style}
-    >
-      <Row>{children}</Row>
-    </StyledTableHead>
-  )
-}
-
-export { Head }

package/src/components/molecules/table/tableRow.tsx

@@ -1,45 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react'
-
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-type Props = {
-  children: ReactNode
-  isActive?: boolean
-  className?: string
-  style?: CSSProperties
-  onRowClicked?: (id: number | string) => void
-  rowId?: number | string
-}
-
-const StyledTableRow = styled.tr`
-  border-bottom: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
-
-  &[data-is-active='true'] {
-    background-color: ${(props: ThemeProps) => props.theme.colors.gray200};
-  }
-`
-
-const Row = ({
-  children,
-  className,
-  style,
-  isActive,
-  onRowClicked,
-  rowId,
-}: Props) => {
-  return (
-    <StyledTableRow
-      className={className}
-      data-is-active={isActive}
-      style={style}
-      onClick={() => {
-        onRowClicked && onRowClicked(rowId)
-      }}
-    >
-      {children}
-    </StyledTableRow>
-  )
-}
-
-export { Row }

package/src/components/molecules/tabs/__snapshots__/index.test.tsx.snap

@@ -1,104 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c2 {
-  --text-color: var( --custom-color, #262626 );
-  color: var(--text-color);
-  -webkit-letter-spacing: 0px;
-  -moz-letter-spacing: 0px;
-  -ms-letter-spacing: 0px;
-  letter-spacing: 0px;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 22px;
-  -webkit-letter-spacing: -0.2px;
-  -moz-letter-spacing: -0.2px;
-  -ms-letter-spacing: -0.2px;
-  letter-spacing: -0.2px;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding-bottom: 4px;
-}
-
-.c0 p {
-  color: #8c8c8c;
-  white-space: nowrap;
-}
-
-.c0:not(:last-child) {
-  margin-right: 24px;
-}
-
-.c0[data-is-tab-active] {
-  border-bottom: 3px solid #2d87f3;
-  bottom: -1px;
-  position: relative;
-}
-
-.c0[data-is-tab-active] p {
-  color: #2d87f3;
-}
-
-.c0:not([data-is-tab-active]) {
-  cursor: pointer;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-@media (min-width:1024px) {
-  .c2 {
-    font-size: 16px;
-    line-height: 24px;
-  }
-}
-
-@media (max-width:767px) {
-  .c0 {
-    height: 37px;
-  }
-}
-
-@media (min-width:768px) {
-  .c0 {
-    height: 35px;
-  }
-}
-
-<li
-  aria-selected="true"
-  class="c0"
-  data-is-tab-active="true"
-  role="tab"
->
-  <div
-    class="c1"
-  >
-    <p
-      class="c2"
-      data-size="sm"
-      data-type="bold"
-      style="--custom-color: #262626;"
-    >
-      Tab 1
-    </p>
-  </div>
-</li>
-`;

package/src/components/molecules/tabs/index.stories.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Tabs, Props } from './index'
-
-export default {
-  component: Tabs,
-  title: 'Molecules/Tabs',
-}
-
-const Template: Story<Props> = (args) => <Tabs {...args} />
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  initialTab: 0,
-  tabContent: [
-    {
-      name: 'Tab 1',
-    },
-    {
-      name: 'With icon',
-      icon: <img src="//unsplash.it/16/16" />,
-    },
-    {
-      name: 'Tab 2',
-    },
-    {
-      name: 'With icon',
-      icon: <img src="//unsplash.it/16/16" />,
-    },
-    {
-      name: 'With icon',
-      icon: <img src="//unsplash.it/16/16" />,
-    },
-    {
-      name: 'With icon',
-      icon: <img src="//unsplash.it/16/16" />,
-    },
-  ],
-  onChange: (n: number) => {
-    console.log(n)
-  },
-}