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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,45 @@
+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)
+  },
+}