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

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

@@ -1,120 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  cursor: pointer;
-}
-
-.c0 input {
-  width: 20px;
-  height: 20px;
-  border: solid 1px #737373;
-  border-radius: 2px;
-  cursor: inherit;
-  -webkit-transition: border-color 0.4s,box-shadow 0.4s;
-  transition: border-color 0.4s,box-shadow 0.4s;
-}
-
-.c0 input:hover,
-.c0 input:active {
-  border-color: #2d87f3;
-  box-shadow: 0 0 2px 2px #91caff;
-}
-
-.c0 input:focus-visible {
-  border: 2px solid #2b62cd;
-}
-
-.c0 input:checked {
-  border: 0;
-  background: #2d87f3 url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L4.125 8L1 4.81819' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center;
-}
-
-.c0 label {
-  max-width: 15rem;
-  margin-left: 8px;
-  font-weight: 400;
-  width: calc(100% - 24px);
-  cursor: inherit;
-}
-
-.c0[data-is-rectangle] > input {
-  position: relative;
-  width: unset;
-  height: unset;
-  padding: 5px 12px;
-  border: 1px solid #e4e8ec;
-  border-radius: 32px;
-}
-
-.c0[data-is-rectangle] > input::after {
-  color: #262626;
-  content: attr(data-label-text);
-  font-size: 13px;
-}
-
-.c0[data-is-rectangle] > input:checked {
-  border-color: #e3f2ff;
-}
-
-.c0[data-is-rectangle] > input:checked::after {
-  color: #2d87f3;
-}
-
-.c0[data-is-rectangle] > input:checked {
-  background: #e3f2ff;
-}
-
-.c0[data-disabled] {
-  color: #bfbfbf;
-  cursor: not-allowed;
-}
-
-.c0[data-disabled] input {
-  border-color: #bfbfbf;
-}
-
-.c0[data-disabled] input:hover {
-  border-color: #bfbfbf;
-  box-shadow: none;
-}
-
-@media (max-width:767px) {
-  .c0 label {
-    font-size: 14px;
-    line-height: 24px;
-  }
-}
-
-@media (min-width:768px) {
-  .c0 label {
-    font-size: 16px;
-    line-height: 22px;
-  }
-}
-
-<div
-  class="c0"
-  data-disabled="true"
-  data-label-text="option1"
->
-  <input
-    checked=""
-    data-label-text="option1"
-    disabled=""
-    id="checkbox1-1"
-    name="checkbox1"
-    type="checkbox"
-    value="1"
-  />
-  <label
-    for="checkbox1-1"
-  >
-    option1
-  </label>
-</div>
-`;

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

@@ -1,30 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Checkbox, Props } from '.'
-
-export default {
-  component: Checkbox,
-  title: 'Atoms/Checkbox',
-}
-
-const Template: Story<Props> = (args) => (
-  <Checkbox {...args}>Normal Checkbox</Checkbox>
-)
-
-export const Checked = Template.bind({})
-
-Checked.args = {
-  name: 'checkbox',
-  label: 'checkbox',
-  checked: true,
-}
-
-export const Unchecked = Template.bind({})
-
-Unchecked.args = {
-  name: 'checkbox',
-  label: 'checkbox',
-  checked: false,
-}

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

@@ -1,90 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledCheckbox = styled.div`
-  display: flex;
-  cursor: pointer;
-
-  input {
-    width: 20px;
-    height: 20px;
-    border: solid 1px ${(props: ThemeProps) => props.theme.colors.gray500};
-    border-radius: 2px;
-    cursor: inherit;
-    transition: border-color 0.4s, box-shadow 0.4s;
-
-    &:hover,
-    &:active {
-      border-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-      box-shadow: 0 0 2px 2px
-        ${(props: ThemeProps) => props.theme.colors.blue200};
-    }
-
-    &:focus-visible {
-      border: 2px solid
-        ${(props: ThemeProps) => props.theme.colors.primaryActive};
-    }
-
-    &:checked {
-      border: 0;
-      background: ${(props: ThemeProps) => props.theme.colors.primaryBase}
-        url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L4.125 8L1 4.81819' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
-        no-repeat center center;
-    }
-  }
-
-  label {
-    max-width: 15rem;
-    margin-left: 8px;
-    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-    width: calc(100% - 24px);
-    cursor: inherit;
-
-    ${MediaQueries.mbDown} {
-      font-size: 14px;
-      line-height: 24px;
-    }
-
-    ${MediaQueries.mbUp} {
-      font-size: 16px;
-      line-height: 22px;
-    }
-  }
-
-  &[data-is-rectangle] > input {
-    position: relative;
-    width: unset;
-    height: unset;
-    padding: 5px 12px;
-    border: 1px solid ${(props: ThemeProps) => props.theme.colors.neutral100};
-    border-radius: 32px;
-
-    &::after {
-      color: ${(props: ThemeProps) => props.theme.colors.gray800};
-      content: attr(data-label-text);
-      font-size: 13px;
-    }
-    &:checked {
-      border-color: ${(props: ThemeProps) => props.theme.colors.blue50};
-      &::after {
-        color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-      }
-    }
-    &:checked {
-      background: ${(props: ThemeProps) => props.theme.colors.blue50};
-    }
-  }
-
-  &[data-disabled] {
-    color: ${(props: ThemeProps) => props.theme.colors.gray300};
-    cursor: not-allowed;
-    input {
-      border-color: ${(props: ThemeProps) => props.theme.colors.gray300};
-      &:hover {
-        border-color: ${(props: ThemeProps) => props.theme.colors.gray300};
-        box-shadow: none;
-      }
-    }
-  }
-`

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

@@ -1,31 +0,0 @@
-import 'jest-styled-components'
-
-import React from 'react'
-
-import { cleanup, render } from '@testing-library/react'
-
-import { Checkbox } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const dropdown = render(
-    <MockTheme>
-      <Checkbox
-        name="checkbox1"
-        checked={true}
-        isDisabled={true}
-        label="option1"
-        value="1"
-      />
-    </MockTheme>,
-  )
-
-  const self = dropdown.container.firstChild
-
-  expect(self).toMatchSnapshot()
-  expect(self).toContainHTML('for="checkbox1-1"')
-  expect(self).toContainHTML('<input')
-  expect(self).toHaveAttribute('data-disabled', 'true')
-})

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

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import { StyledCheckbox } from './index.styled'
-
-export type Props = {
-  label: string
-  name: string
-  value: string
-  checked: boolean
-  className?: string
-  isDisabled?: boolean
-  onChange?: (value: string, checked: boolean) => void
-  isRectangle?: boolean
-}
-
-const Checkbox = ({
-  label,
-  name,
-  checked,
-  className,
-  isDisabled,
-  onChange,
-  value,
-  isRectangle,
-}: Props) => {
-  return (
-    <StyledCheckbox
-      className={className}
-      data-disabled={isDisabled || undefined}
-      data-is-rectangle={isRectangle || undefined}
-      data-label-text={label}
-    >
-      <input
-        type="checkbox"
-        checked={checked}
-        name={name}
-        onChange={() => onChange(value, !checked)}
-        disabled={isDisabled}
-        value={value}
-        id={`${name}-${value}`}
-        data-label-text={label}
-      ></input>
-      {!isRectangle && <label htmlFor={`${name}-${value}`}>{label}</label>}
-    </StyledCheckbox>
-  )
-}
-
-export { Checkbox }

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

@@ -1,16 +0,0 @@
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledContainer = styled.div`
-  width: 100%;
-  margin: 0 auto;
-  ${MediaQueries.mbDown} {
-    padding: 0 16px;
-  }
-  ${MediaQueries.tdUp} {
-    max-width: 1170px;
-    &[data-type='marryBaby'] {
-      max-width: 1064px;
-    }
-  }
-`

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

@@ -1,21 +0,0 @@
-import React from 'react'
-import { ReactNode, CSSProperties } from 'react'
-
-import { StyledContainer } from './index.styled'
-
-export type Props = {
-  children?: ReactNode
-  className?: string
-  style?: CSSProperties
-  type?: 'helloSites' | 'marryBaby'
-}
-
-const Container = ({ children, className, style, type }: Props) => {
-  return (
-    <StyledContainer className={className} style={style} data-type={type}>
-      {children}
-    </StyledContainer>
-  )
-}
-
-export { Container }

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

@@ -1,19 +0,0 @@
-import styled from 'styled-components'
-
-export const StyledDisplayWrapper = styled.div<{
-  lowerBound: number
-  upperBound: number
-}>`
-  ${(props) => `
-    ${
-      props.lowerBound !== 0
-        ? `@media (max-width: ${props.lowerBound - 1}px) { display: none; }`
-        : ''
-    }
-    ${
-      props.upperBound !== 0
-        ? `@media (min-width: ${props.upperBound}px) { display: none; }`
-        : ''
-    }
-  `}
-`

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

@@ -1,66 +0,0 @@
-import React, { CSSProperties, ReactNode, useMemo } from 'react'
-
-import { useIsInit } from 'src/hooks/useIsInit'
-import { useScreenSize } from 'src/hooks/useScreenSize'
-
-import {
-  getBoundariesFromMediaQueryKey,
-  MediaQueries,
-} from '../../../misc/utils'
-import { StyledDisplayWrapper } from './index.styled'
-
-export type Props = {
-  forceDisplay?: boolean
-  mediaQueryKey: keyof typeof MediaQueries
-  children: ReactNode
-  className?: string
-  style?: CSSProperties
-}
-
-export const DisplayWrapper = ({
-  forceDisplay,
-  mediaQueryKey,
-  children,
-  className,
-  style,
-}: Props) => {
-  // logic:
-  // - only display mobile when amp
-  // - always display both when isInit, because it is SSR and JS not run yet, take advantage of CSS to hide one of them
-  // - after init, we use JS, follow isMobileCsr value to display mobile or desktop
-  const [lowerBoundValue, upperBoundValue] = useMemo(
-    () => getBoundariesFromMediaQueryKey(mediaQueryKey),
-    [mediaQueryKey],
-  )
-
-  const isInit = useIsInit()
-  const { isMobile, isLargeMobile } = useScreenSize()
-  const isDisplay = useMemo(() => {
-    if (typeof forceDisplay === 'boolean') return forceDisplay
-    if (isInit) return true
-    const screenSize = window.innerWidth
-    return (
-      (!lowerBoundValue || lowerBoundValue <= screenSize) &&
-      (!upperBoundValue || screenSize <= upperBoundValue)
-    )
-  }, [
-    isInit,
-    forceDisplay,
-    lowerBoundValue,
-    upperBoundValue,
-    isMobile,
-    isLargeMobile,
-  ])
-
-  if (!isDisplay) return null
-  return (
-    <StyledDisplayWrapper
-      lowerBound={forceDisplay ? 0 : lowerBoundValue}
-      upperBound={forceDisplay ? 0 : upperBoundValue}
-      className={className}
-      style={style}
-    >
-      {children}
-    </StyledDisplayWrapper>
-  )
-}

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

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  border-width: 1px;
-  border-color: #d2d6dc;
-  border-style: dotted;
-}
-
-<hr
-  class="c0"
-  data-diver-type="dotted"
-/>
-`;

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

@@ -1,19 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Divider, Props } from './index'
-
-export default {
-  component: Divider,
-  title: 'Atoms/Divider',
-}
-
-const Template: Story<Props> = (args) => <Divider {...args} />
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  type: 'dashed',
-  className: '',
-}

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

@@ -1,10 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-import { BorderTypes } from './'
-
-export const StyledDivider = styled.hr<{ dividerType: BorderTypes }>`
-  border-width: 1px;
-  border-color: ${(props: ThemeProps) => props.theme.colors.neutral200};
-  border-style: ${(props) => props.dividerType};
-`

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

@@ -1,22 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Divider } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const alert = render(
-    <MockTheme>
-      <Divider type="dotted" />
-    </MockTheme>,
-  )
-
-  const self = alert.container.firstChild
-
-  expect(self).toMatchSnapshot()
-  expect(self).toHaveAttribute('data-diver-type', 'dotted')
-})

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

@@ -1,34 +0,0 @@
-import React from 'react'
-
-import { CSSProperties } from 'styled-components'
-
-import { StyledDivider } from './index.styled'
-
-export type BorderTypes =
-  | 'dotted'
-  | 'dashed'
-  | 'solid'
-  | 'double'
-  | 'groove'
-  | 'ridge'
-  | 'inset'
-  | 'outset'
-
-export type Props = {
-  type: BorderTypes
-  className?: string
-  style?: CSSProperties
-}
-
-const Divider = ({ type = 'solid', className, style }: Props) => {
-  return (
-    <StyledDivider
-      style={style}
-      className={className}
-      data-diver-type={type}
-      dividerType={type}
-    />
-  )
-}
-
-export { Divider }

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

@@ -1,143 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  position: relative;
-  box-sizing: border-box;
-  border: 1px solid #d9d9d9;
-  background: url('../../../public/bgSvg/arrow-down.svg') no-repeat;
-  background-position: right 16px center;
-  border-radius: 6px;
-}
-
-.c0[data-has-icons='true'] {
-  border: none;
-  background: #f2f2f2;
-}
-
-.c0[data-has-icons='true'] img,
-.c0[data-has-icons='true'] svg {
-  display: inline-block;
-  max-width: 16px;
-  margin-right: 6px;
-}
-
-.c0[data-has-icons='true'] span {
-  vertical-align: middle;
-  display: inline-block;
-}
-
-.c0[data-has-icons='true']:hover {
-  box-shadow: none;
-}
-
-.c0[data-has-icons='true'] > div {
-  position: relative;
-  width: 100%;
-  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;
-  box-sizing: border-box;
-}
-
-.c0[data-has-icons='true'] > div::after {
-  content: '';
-  right: 12px;
-  top: 50%;
-  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  width: 10px;
-  height: 8px;
-  position: absolute;
-  background-repeat: no-repeat;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c0:hover {
-  box-shadow: 0 0 2px 2px #91caff;
-}
-
-.c1 {
-  padding: 12px 18px 12px 16px;
-  cursor: pointer;
-}
-
-.c1[data-dropdown-open] {
-  padding: 11px 15px 11px 15px;
-  border: 1px solid #2d87f3;
-  border-radius: 6px;
-  box-shadow: 0 0 2px 2px #91caff;
-}
-
-.c1 > svg {
-  height: 16px;
-  width: 16px;
-}
-
-<div
-  class="c0"
-  data-dropdown-open="false"
-  data-has-icons="true"
-  id="dropdown1"
-  tabindex="0"
->
-  <div
-    class="c1"
-  >
-    <svg
-      data-name="Layer 1"
-      id="prefix__Layer_1"
-      viewBox="0 0 12.17 14.83"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <clippath
-          id="prefix__clip-path"
-          transform="translate(-1.92 -1.54)"
-        >
-          <path
-            d="M0 .96h16v16H0z"
-            fill="none"
-          />
-        </clippath>
-        <style>
-          .prefix__cls-3{fill:none;stroke:#595959;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
-        </style>
-      </defs>
-      <title>
-        File
-      </title>
-      <g
-        clip-path="url(#prefix__clip-path)"
-      >
-        <path
-          class="prefix__cls-3"
-          d="M8.67 2.29H4a1.33 1.33 0 00-1.33 1.33v10.67A1.33 1.33 0 004 15.62h8a1.33 1.33 0 001.33-1.33V7z"
-          transform="translate(-1.92 -1.54)"
-        />
-        <path
-          class="prefix__cls-3"
-          d="M8.67 2.29V7h4.66"
-          transform="translate(-1.92 -1.54)"
-        />
-      </g>
-    </svg>
-     
-    <span>
-      CSV file
-    </span>
-  </div>
-  <input
-    accept="*"
-    id="uploader-dropdown-input-dropdown1-1"
-    style="display: none;"
-    type="file"
-  />
-</div>
-`;