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

package/src/components/atoms/underlinedLink/index.stories.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { UnderlinedLink, Props } from './index'
-
-export default {
-  component: UnderlinedLink,
-  title: 'Atoms/Underlined Link',
-  argTypes: {
-    link: {
-      description:
-        'Add any JSX element here. A good example would be an <a> element or the Next Link component.',
-    },
-  },
-}
-
-const Template: Story<Props> = (args) => <UnderlinedLink {...args} />
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  size: 'lg',
-  isDisabled: false,
-  prefetch: false,
-  link: <a>Hello, world</a>,
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  size: 'lg',
-  isDisabled: true,
-  prefetch: false,
-  link: <a>This link is disabled</a>,
-}

package/src/components/atoms/underlinedLink/index.styled.tsx

@@ -1,66 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledUnderlinedLink = styled.div`
-  a {
-    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-    cursor: pointer;
-    text-decoration: underline;
-
-    &:hover,
-    &:focus {
-      color: ${(props: ThemeProps) => props.theme.colors.primaryHover};
-      outline: none;
-      .arrowLeft,
-      .arrowRight {
-        stroke: ${(props: ThemeProps) => props.theme.colors.primaryHover};
-      }
-    }
-
-    &:active {
-      color: ${(props: ThemeProps) => props.theme.colors.primaryActive};
-    }
-
-    &:visited {
-      color: ${(props: ThemeProps) => props.theme.colors.primaryVisited};
-    }
-  }
-
-  &[data-disabled] {
-    & > a {
-      color: ${(props: ThemeProps) => props.theme.colors.gray300};
-      cursor: not-allowed;
-    }
-  }
-
-  @include layout-sp {
-    &[data-size='lg'] {
-      & > a {
-        font-size: 16px;
-        font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-        line-height: 24px;
-      }
-    }
-    &[data-size='md'] {
-      & > a {
-        font-size: 14px;
-        font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-        line-height: 22px;
-      }
-    }
-    &[data-size='sm'] {
-      & > a {
-        font-size: 13px;
-        font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-        line-height: 20px;
-      }
-    }
-    &[data-size='xm'] {
-      & > a {
-        font-size: 11px;
-        font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-        line-height: 20px;
-      }
-    }
-  }
-`

package/src/components/atoms/underlinedLink/index.text.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { UnderlinedLink } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const underlinedLink = render(
-    <MockTheme>
-      <UnderlinedLink size="lg" isDisabled link={<a>Test</a>} />
-    </MockTheme>,
-  )
-
-  const self = underlinedLink.container.firstChild
-
-  expect(self).toMatchSnapshot()
-
-  expect(self).toHaveAttribute('data-is-disabled', 'true')
-})

package/src/components/atoms/underlinedLink/index.tsx

@@ -1,30 +0,0 @@
-import React, { CSSProperties } from 'react'
-
-import { StyledUnderlinedLink } from './index.styled'
-
-export type Props = {
-  size: 'lg' | 'md' | 'sm' | 'xm'
-  link: JSX.Element
-  style?: CSSProperties
-  isDisabled?: boolean
-  className?: string
-}
-
-const UnderlinedLink = ({
-  size,
-  isDisabled,
-  className,
-  link,
-  style,
-}: Props) => (
-  <StyledUnderlinedLink
-    className={className}
-    data-size={size}
-    style={style}
-    data-disabled={isDisabled || undefined}
-  >
-    {link}
-  </StyledUnderlinedLink>
-)
-
-export { UnderlinedLink }

package/src/components/atoms/uploader/__snapshots__/index.test.tsx.snap

@@ -1,170 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 .default-button[data-color='secondary'] {
-  border: solid 2px #bfbfbf;
-  color: #262626;
-}
-
-.c0 .default-button[data-color='secondary']:hover {
-  border: solid 2px #bfbfbf;
-  background-color: #bfbfbf;
-  color: #fff;
-}
-
-.c0 .default-button[data-color='secondary']:hover > svg {
-  fill: #fff;
-}
-
-.c1 {
-  display: inline-block;
-  position: relative;
-}
-
-.c3 {
-  --icon-wrapper-size: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: var(--icon-wrapper-size);
-  height: var(--icon-wrapper-size);
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  background-color: #f2f2f2;
-  border-radius: 50%;
-  position: absolute;
-  bottom: calc(calc(var(--icon-wrapper-size) / 2) * -1);
-  right: calc(calc(var(--icon-wrapper-size) / 2) * -1);
-}
-
-.c3 > svg {
-  width: calc(var(--icon-wrapper-size) / 2);
-  height: calc(var(--icon-wrapper-size) / 2);
-}
-
-.c2 {
-  background-color: transparent;
-  color: white;
-  cursor: pointer;
-}
-
-.c2 img {
-  --width: 40px;
-  --height: 40px;
-  width: var(--width);
-  height: var(--height);
-}
-
-.c2[data-avatar-type='square'] img {
-  --width: 72px;
-  --height: 72px;
-  border-radius: 6px;
-}
-
-.c2[data-avatar-type='rounded'] img {
-  border-radius: 50%;
-}
-
-.c2[data-is-amp='true'] {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  overflow: hidden;
-  overflow: hidden;
-  width: 40px;
-  height: 40px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  background-size: cover;
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.c2[data-is-amp='true'][data-avatar-type='square'] {
-  border-radius: 6px;
-}
-
-.c2[data-is-amp='true'][data-avatar-type='rounded'] {
-  border-radius: 50%;
-}
-
-.c2[data-is-amp='true'][data-avatar-type='rounded'] img {
-  --width: 100%;
-  --height: 100%;
-}
-
-.c2[data-is-amp='true'] img {
-  object-fit: cover;
-}
-
-<div
-  class="c0"
->
-  <div
-    class="c1"
-    data-is-attached-to-element="true"
-  >
-    <div
-      class="c2"
-      data-avatar-type="square"
-      data-is-amp="false"
-    >
-      <img
-        src="https://source.unsplash.com/random/74x74"
-      />
-    </div>
-    <div
-      class="c3"
-      data-is-attached-to-element="true"
-    >
-      <svg
-        data-name="Layer 1"
-        id="prefix__Layer_1"
-        viewBox="0 0 15.5 12.5"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <defs>
-          <style>
-            .prefix__cls-1{fill:none;stroke:#262626;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
-          </style>
-        </defs>
-        <title>
-          camera
-        </title>
-        <path
-          class="prefix__cls-1"
-          d="M15 11.78a1.19 1.19 0 01-.37.86 1.31 1.31 0 01-.9.36H2.27a1.31 1.31 0 01-.9-.36 1.19 1.19 0 01-.37-.86V5.06a1.19 1.19 0 01.37-.87 1.31 1.31 0 01.9-.36h2.55L6.09 2h3.82l1.27 1.83h2.55a1.31 1.31 0 01.9.36 1.19 1.19 0 01.37.87z"
-          transform="translate(-.25 -1.25)"
-        />
-        <path
-          class="prefix__cls-1"
-          d="M8 10a2 2 0 10-2-2 2 2 0 002 2z"
-          transform="translate(-.25 -1.25)"
-        />
-      </svg>
-    </div>
-  </div>
-  <input
-    accept="image/*"
-    id="uploader-input-1"
-    multiple=""
-    style="display: none;"
-    type="file"
-    value=""
-  />
-</div>
-`;

package/src/components/atoms/uploader/index.stories.tsx

@@ -1,128 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Props, Uploader } from '.'
-import { Avatar } from '../'
-import { Button } from '../button'
-
-export default {
-  component: Uploader,
-  title: 'Atoms/Uploader',
-}
-
-const avatar = (
-  <Avatar
-    type="square"
-    avatarImg={<img src="https://source.unsplash.com/random/74x74" />}
-    onClick={() => console.log('onClick')}
-  />
-)
-
-const button = (
-  <Button size="md" color="secondary" className="default-button" icon={<img />}>
-    <svg
-      id="prefix__Layer_1"
-      data-name="Layer 1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 13.5 13.5"
-    >
-      <defs>
-        <style>
-          {
-            '.prefix__cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
-          }
-        </style>
-      </defs>
-      <title>{'upload'}</title>
-      <path
-        className="prefix__cls-1"
-        d="M14 10v2.67A1.33 1.33 0 0112.67 14H3.33A1.33 1.33 0 012 12.67V10M11.33 5.33L8 2 4.67 5.33M8 2v8"
-        transform="translate(-1.25 -1.25)"
-      />
-    </svg>
-    {'Upload Image 2'}
-  </Button>
-)
-
-const Template: Story<Props> = (args) => <Uploader {...args} />
-
-export const BadgeUploader = Template.bind({})
-
-BadgeUploader.args = {
-  type: 'badge',
-  onFileSelected: (files: FileList) => {
-    console.log(files)
-  },
-  withIcon: (
-    <svg
-      id="prefix__Layer_1"
-      data-name="Layer 1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 15.5 12.5"
-    >
-      <defs>
-        <style>
-          {
-            '.prefix__cls-1{fill:none;stroke:#262626;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
-          }
-        </style>
-      </defs>
-      <title>{'camera'}</title>
-      <path
-        className="prefix__cls-1"
-        d="M15 11.78a1.19 1.19 0 01-.37.86 1.31 1.31 0 01-.9.36H2.27a1.31 1.31 0 01-.9-.36 1.19 1.19 0 01-.37-.86V5.06a1.19 1.19 0 01.37-.87 1.31 1.31 0 01.9-.36h2.55L6.09 2h3.82l1.27 1.83h2.55a1.31 1.31 0 01.9.36 1.19 1.19 0 01.37.87z"
-        transform="translate(-.25 -1.25)"
-      />
-      <path
-        className="prefix__cls-1"
-        d="M8 10a2 2 0 10-2-2 2 2 0 002 2z"
-        transform="translate(-.25 -1.25)"
-      />
-    </svg>
-  ),
-  inputId: '1',
-  fileAcceptType: 'image/*',
-  multiple: true,
-  withElement: avatar,
-}
-
-export const ButtonUploader = Template.bind({})
-
-ButtonUploader.args = {
-  type: 'button',
-  onFileSelected: (files: FileList) => {
-    console.log(files)
-  },
-  withIcon: (
-    <svg
-      id="prefix__Layer_1"
-      data-name="Layer 1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 15.5 12.5"
-    >
-      <defs>
-        <style>
-          {
-            '.prefix__cls-1{fill:none;stroke:#262626;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
-          }
-        </style>
-      </defs>
-      <title>{'camera'}</title>
-      <path
-        className="prefix__cls-1"
-        d="M15 11.78a1.19 1.19 0 01-.37.86 1.31 1.31 0 01-.9.36H2.27a1.31 1.31 0 01-.9-.36 1.19 1.19 0 01-.37-.86V5.06a1.19 1.19 0 01.37-.87 1.31 1.31 0 01.9-.36h2.55L6.09 2h3.82l1.27 1.83h2.55a1.31 1.31 0 01.9.36 1.19 1.19 0 01.37.87z"
-        transform="translate(-.25 -1.25)"
-      />
-      <path
-        className="prefix__cls-1"
-        d="M8 10a2 2 0 10-2-2 2 2 0 002 2z"
-        transform="translate(-.25 -1.25)"
-      />
-    </svg>
-  ),
-  inputId: '1',
-  fileAcceptType: 'image/*',
-  multiple: true,
-  withElement: button,
-}

package/src/components/atoms/uploader/index.styled.tsx

@@ -1,53 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledUploader = styled.div`
-  .default-button[data-color='secondary'] {
-    border: solid 2px ${(props: ThemeProps) => props.theme.colors.gray300};
-    color: ${(props: ThemeProps) => props.theme.colors.gray800};
-
-    &:hover {
-      border: solid 2px ${(props: ThemeProps) => props.theme.colors.gray300};
-      background-color: ${(props: ThemeProps) => props.theme.colors.gray300};
-      color: ${(props: ThemeProps) => props.theme.colors.white};
-
-      & > svg {
-        fill: ${(props: ThemeProps) => props.theme.colors.white};
-      }
-    }
-  }
-`
-export const StyledElementContainer = styled.div`
-  ${(props) =>
-    props['data-is-attached-to-element'] &&
-    `display: inline-block;
-    position: relative;`}
-`
-export const StyledIconWrapper = styled.div`
-  --icon-wrapper-size: 32px;
-  display: flex;
-  width: var(--icon-wrapper-size);
-  height: var(--icon-wrapper-size);
-  align-items: center;
-  justify-content: center;
-  background-color: ${(props: ThemeProps) => props.theme.colors.gray100};
-  border-radius: 50%;
-
-  ${(props) =>
-    props['data-is-attached-to-element'] &&
-    `
-    position: absolute;
-    bottom: calc(calc(var(--icon-wrapper-size) / 2) * -1);
-    right: calc(calc(var(--icon-wrapper-size) / 2) * -1);
-  `}
-
-  & > svg {
-    width: calc(var(--icon-wrapper-size) / 2);
-    height: calc(var(--icon-wrapper-size) / 2);
-  }
-`
-
-export const StyledDefaultButtonContent = styled.div`
-  display: flex;
-  align-items: center;
-`

package/src/components/atoms/uploader/index.test.tsx

@@ -1,96 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Uploader } from '.'
-import MockTheme from '../../../misc/mockTheme'
-import { Avatar } from '../avatar'
-import { Button } from '../button'
-
-afterEach(cleanup)
-
-const icon = (
-  <svg
-    id="prefix__Layer_1"
-    data-name="Layer 1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 15.5 12.5"
-  >
-    <defs>
-      <style>
-        {
-          '.prefix__cls-1{fill:none;stroke:#262626;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
-        }
-      </style>
-    </defs>
-    <title>{'camera'}</title>
-    <path
-      className="prefix__cls-1"
-      d="M15 11.78a1.19 1.19 0 01-.37.86 1.31 1.31 0 01-.9.36H2.27a1.31 1.31 0 01-.9-.36 1.19 1.19 0 01-.37-.86V5.06a1.19 1.19 0 01.37-.87 1.31 1.31 0 01.9-.36h2.55L6.09 2h3.82l1.27 1.83h2.55a1.31 1.31 0 01.9.36 1.19 1.19 0 01.37.87z"
-      transform="translate(-.25 -1.25)"
-    />
-    <path
-      className="prefix__cls-1"
-      d="M8 10a2 2 0 10-2-2 2 2 0 002 2z"
-      transform="translate(-.25 -1.25)"
-    />
-  </svg>
-)
-
-const avatar = (
-  <Avatar
-    type="square"
-    avatarImg={<img src="https://source.unsplash.com/random/74x74" />}
-    onClick={() => console.log('onClick')}
-  />
-)
-
-const button = (
-  <Button size="md" color="secondary" className="default-button" icon={icon}>
-    <svg
-      id="prefix__Layer_1"
-      data-name="Layer 1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 13.5 13.5"
-    >
-      <defs>
-        <style>
-          {
-            '.prefix__cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
-          }
-        </style>
-      </defs>
-      <title>{'upload'}</title>
-      <path
-        className="prefix__cls-1"
-        d="M14 10v2.67A1.33 1.33 0 0112.67 14H3.33A1.33 1.33 0 012 12.67V10M11.33 5.33L8 2 4.67 5.33M8 2v8"
-        transform="translate(-1.25 -1.25)"
-      />
-    </svg>
-    {'Upload Image 2'}
-  </Button>
-)
-
-const type: 'badge' | 'button' = 'badge'
-
-test('it renders', () => {
-  const uploader = render(
-    <MockTheme>
-      <Uploader
-        type={type}
-        onFileSelected={(files: FileList) => {
-          console.log(files)
-        }}
-        withIcon={icon}
-        inputId={'1'}
-        fileAcceptType="image/*"
-        multiple={true}
-        withElement={type === 'badge' ? avatar : button}
-      />
-    </MockTheme>,
-  )
-
-  const self = uploader.container.firstChild
-  expect(self).toMatchSnapshot()
-})