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

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

@@ -1,41 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { FileDropdown, Props } from './index'
-
-export default {
-  component: FileDropdown,
-  title: 'Atoms/FileDropDown',
-}
-
-const Template: Story<Props> = (args) => <FileDropdown {...args} />
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  id: 'dropdown1',
-  placeholder: 'CSV file',
-  placeholderIcon: undefined,
-  value: undefined,
-  options: [
-    {
-      type: 'upload',
-      label: 'Upload',
-      value: '1',
-      icon: undefined,
-      fileAcceptedType: '*',
-      multiple: true,
-    },
-    {
-      type: 'download',
-      label: 'Download',
-      value: '2',
-      icon: undefined,
-      url: 'http://unsplash.it/16',
-    },
-  ],
-  onUploadSelected: (e: FileList) => {
-    console.log(e)
-  },
-}

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

@@ -1,112 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledDropdown = styled.div`
-  position: relative;
-  box-sizing: border-box;
-  border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
-  background: url('../../../public/bgSvg/arrow-down.svg') no-repeat;
-  background-position: right 16px center;
-  border-radius: 6px;
-
-  &[data-has-icons='true'] {
-    border: none;
-    background: ${(props: ThemeProps) => props.theme.colors.gray100};
-
-    img,
-    svg {
-      display: inline-block;
-      max-width: 16px;
-      margin-right: 6px;
-    }
-
-    span {
-      vertical-align: middle;
-      display: inline-block;
-    }
-
-    &:hover {
-      box-shadow: none;
-    }
-    > div {
-      position: relative;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-    }
-    > 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;
-      transform: translateY(-50%);
-    }
-  }
-
-  &:hover {
-    box-shadow: 0 0 2px 2px ${(props: ThemeProps) => props.theme.colors.blue200};
-  }
-`
-
-export const StyledDropdownName = styled.div`
-  padding: 12px 18px 12px 16px;
-  cursor: pointer;
-  &[data-dropdown-open] {
-    padding: 11px 15px 11px 15px;
-    border: 1px solid ${(props: ThemeProps) => props.theme.colors.primaryBase};
-    border-radius: 6px;
-    box-shadow: 0 0 2px 2px ${(props: ThemeProps) => props.theme.colors.blue200};
-  }
-
-  & > svg {
-    height: 16px;
-    width: 16px;
-  }
-`
-
-export const StyledDropdownList = styled.ul`
-  position: absolute;
-  top: 100%;
-  right: 0;
-  left: 0;
-  display: block;
-  margin-top: 4px;
-  background: ${(props: ThemeProps) => props.theme.colors.white};
-  border-radius: 6px;
-  box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
-    -2px 2px 5px rgba(67, 86, 100, 0.123689);
-  cursor: pointer;
-
-  &[data-has-icons='true'] {
-    background: white;
-    box-shadow: none;
-    border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
-    filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
-  }
-`
-
-export const StyledDropdownOption = styled.li`
-  margin: 8px;
-  padding: 12px 18px 12px 16px;
-  border-radius: 6px;
-  display: flex;
-  &:hover,
-  :active {
-    background: ${(props: ThemeProps) => props.theme.colors.gray100};
-  }
-`
-export const StyledIcon = styled.div`
-  display: flex;
-  align-items: center;
-  margin-right: 8px;
-
-  & > svg {
-    height: 16px;
-    width: 16px;
-  }
-`

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

@@ -1,46 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { FileDropdown } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const dropdown = render(
-    <MockTheme>
-      <FileDropdown
-        id="dropdown1"
-        placeholder="CSV file"
-        placeholderIcon={undefined}
-        value={undefined}
-        options={[
-          {
-            type: 'upload',
-            label: 'Upload',
-            value: '1',
-            icon: undefined,
-            fileAcceptedType: '*',
-            multiple: false,
-          },
-          {
-            type: 'download',
-            label: 'Download',
-            value: '2',
-            icon: undefined,
-            url: 'http://unsplash.it/16',
-          },
-        ]}
-        onUploadSelected={(e: FileList) => {
-          console.log(e)
-        }}
-      />
-    </MockTheme>,
-  )
-
-  const self = dropdown.container.firstChild
-
-  expect(self).toMatchSnapshot()
-})

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

@@ -1,200 +0,0 @@
-import React, { useRef, useState } from 'react'
-
-import { CSSProperties } from 'styled-components'
-
-import {
-  StyledDropdown,
-  StyledDropdownName,
-  StyledDropdownList,
-  StyledDropdownOption,
-  StyledIcon,
-} from './index.styled'
-
-type Option = {
-  label: string
-  value: string
-  type: 'upload' | 'download'
-  icon?: JSX.Element
-  url?: string
-  fileAcceptedType?: string
-  multiple?: boolean
-}
-
-export type Props = {
-  options: Array<Option>
-  placeholder: string
-  id: string
-  placeholderIcon?: JSX.Element
-  onUploadSelected?: (e: FileList) => void
-  value?: Option
-  className?: string
-  style?: CSSProperties
-}
-
-const FileDropdown = ({
-  className,
-  value,
-  options,
-  onUploadSelected,
-  id,
-  placeholderIcon,
-  placeholder,
-  style,
-}: Props) => {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
-  const showDropdown = () => setIsDropdownOpen(!isDropdownOpen)
-  const inputList = useRef(
-    options.map((option) => {
-      return (
-        option.type === 'upload' && (
-          <input
-            id={'uploader-dropdown-input-' + id + '-' + option.value}
-            key={'uploader-dropdown-input-' + id + '-' + option.value}
-            accept={option.fileAcceptedType}
-            multiple={option.multiple}
-            type="file"
-            style={{ display: 'none' }}
-            onChange={(e) => {
-              console.log('change')
-              onUploadSelected(e.target.files)
-            }}
-          />
-        )
-      )
-    }),
-  )
-
-  const defaultFileIcon = (
-    <svg
-      id="prefix__Layer_1"
-      data-name="Layer 1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 12.17 14.83"
-    >
-      <defs>
-        <clipPath id="prefix__clip-path" transform="translate(-1.92 -1.54)">
-          <path fill="none" d="M0 .96h16v16H0z" />
-        </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 clipPath="url(#prefix__clip-path)">
-        <path
-          className="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
-          className="prefix__cls-3"
-          d="M8.67 2.29V7h4.66"
-          transform="translate(-1.92 -1.54)"
-        />
-      </g>
-    </svg>
-  )
-
-  const downloadIcon = (
-    <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:#595959;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
-          }
-        </style>
-      </defs>
-      <title>{'download'}</title>
-      <path
-        className="prefix__cls-1"
-        d="M14 11v2.66A1.33 1.33 0 0112.67 15H3.33A1.33 1.33 0 012 13.62V11M4.67 7.62L8 11l3.33-3.34M8 11V3"
-        transform="translate(-1.25 -2.21)"
-      />
-    </svg>
-  )
-
-  const uploadIcon = (
-    <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:#595959;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
-          }
-        </style>
-      </defs>
-      <title>{'upload'}</title>
-      <path
-        className="prefix__cls-1"
-        d="M14 11v2.66A1.33 1.33 0 0112.67 15H3.33A1.33 1.33 0 012 13.62V11M11.33 6.29L8 3 4.67 6.29M8 3v8"
-        transform="translate(-1.25 -2.21)"
-      />
-    </svg>
-  )
-
-  const onUpload = (dropdownId: string) => {
-    ;(document.querySelector(dropdownId) as HTMLElement)?.click()
-  }
-
-  const onDownload = (url: string) => {
-    url && window.open(url, '_blank')
-  }
-
-  return (
-    <StyledDropdown
-      className={className}
-      data-dropdown-open={!!isDropdownOpen}
-      id={id}
-      data-has-icons
-      style={style}
-      onBlur={() => setIsDropdownOpen(false)}
-      tabIndex={0}
-    >
-      <StyledDropdownName onClick={showDropdown}>
-        {placeholderIcon || defaultFileIcon}{' '}
-        <span>{value && value.value ? value.label : placeholder}</span>
-      </StyledDropdownName>
-
-      {isDropdownOpen && (
-        <StyledDropdownList onClick={showDropdown} data-has-icons>
-          {options.map((option) => (
-            <StyledDropdownOption
-              key={`${id}-${option.value}`}
-              data-selected={
-                (value && value.value === option.value) || undefined
-              }
-              onClick={() =>
-                option.type === 'upload'
-                  ? onUpload(
-                      '#uploader-dropdown-input-' + id + '-' + option.value,
-                    )
-                  : onDownload(option.url)
-              }
-            >
-              <StyledIcon>
-                {option.icon || option.type === 'download'
-                  ? downloadIcon
-                  : uploadIcon}
-              </StyledIcon>
-              {option.label}
-            </StyledDropdownOption>
-          ))}
-        </StyledDropdownList>
-      )}
-      <>{inputList.current}</>
-    </StyledDropdown>
-  )
-}
-
-export { FileDropdown }

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

@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  --width: 100;
-  --height: 100;
-  width: calc(var(--width) * 1px);
-  height: calc(var(--height) * 1px);
-}
-
-.c0 img,
-.c0 svg {
-  width: calc(var(--width) * 1px);
-  height: calc(var(--height) * 1px);
-}
-
-.c0 img {
-  object-fit: contain;
-}
-
-<div
-  class="c0"
->
-  <svg
-    fill="none"
-    viewBox="0 0 24 16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g
-      clip-path="url(#id-flag-clip-1)"
-    >
-      <rect
-        fill="#CE1126"
-        height="8"
-        width="24"
-        y="0.0166016"
-      />
-      <rect
-        fill="white"
-        height="8"
-        width="24"
-        y="8.0166"
-      />
-    </g>
-    <defs>
-      <clippath
-        id="id-flag-clip-1"
-      >
-        <rect
-          fill="white"
-          height="16"
-          rx="2"
-          width="24"
-        />
-      </clippath>
-    </defs>
-  </svg>
-</div>
-`;

package/src/components/atoms/flag/icons/cambodia.tsx

@@ -1,24 +0,0 @@
-import React, { DetailedHTMLProps, ImgHTMLAttributes } from 'react'
-
-export type Props = DetailedHTMLProps<
-  ImgHTMLAttributes<HTMLImageElement>,
-  HTMLImageElement
->
-
-export const CambodiaRoundIcon = (props: Props) => (
-  <img
-    src="data:image/png;base64,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"
-    style={{
-      borderRadius: '50%',
-      ...props.style,
-    }}
-    {...props}
-  />
-)
-
-export const CambodiaSquareIcon = (props: Props) => (
-  <img
-    src="data:image/png;base64,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"
-    {...props}
-  />
-)

package/src/components/atoms/flag/icons/english.tsx

@@ -1,195 +0,0 @@
-import React, { SVGProps } from 'react'
-
-export type Props = SVGProps<SVGSVGElement>
-
-export const EnglishRoundIcon = (props: Props) => (
-  <svg
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style={{
-      borderRadius: '50%',
-      ...props.style,
-    }}
-    {...props}
-  >
-    <g>
-      <mask
-        style={{ maskType: 'alpha' }}
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <circle cx="10" cy="10" r="10" fill="#C4C4C4" />
-      </mask>
-      <path
-        d="M7.49953 0.327881C5.47199 0.850891 3.69346 1.98591 2.37793 3.53444L7.49953 6.6655V0.327881Z"
-        fill="#3F51B5"
-      />
-      <path
-        d="M2.30273 16.3824C3.62476 17.9749 5.4353 19.1399 7.50034 19.6729V13.2053L2.30273 16.3824Z"
-        fill="#3F51B5"
-      />
-      <path
-        d="M0.328125 12.5C0.334625 12.526 0.341125 12.5515 0.348125 12.5775L0.474128 12.5H0.328125Z"
-        fill="white"
-      />
-      <path
-        d="M17.7871 3.73445C16.4571 2.08391 14.6131 0.872891 12.499 0.327881V6.96651L17.7871 3.73445Z"
-        fill="#3F51B5"
-      />
-      <path
-        d="M12.499 19.6722C14.6506 19.1172 16.5196 17.8707 17.8546 16.1752L12.499 12.9021V19.6722Z"
-        fill="#3F51B5"
-      />
-      <path
-        d="M0.376626 7.31055C0.359125 7.37305 0.344125 7.43705 0.328125 7.50005H0.686632L0.376626 7.31055Z"
-        fill="white"
-      />
-      <path
-        d="M19.8745 8.50006C19.827 8.18506 19.7655 7.87555 19.6895 7.57104L18.1699 8.50006H19.8745Z"
-        fill="white"
-      />
-      <path
-        d="M0.686034 7.50024H0.327527C0.243026 7.82775 0.175524 8.16076 0.124023 8.50026H2.32207L0.686034 7.50024Z"
-        fill="white"
-      />
-      <path
-        d="M19.7197 12.3148C19.7832 12.0473 19.8337 11.7752 19.8752 11.5002H18.3867L19.7197 12.3148Z"
-        fill="white"
-      />
-      <path
-        d="M2.10956 11.5002H0.124023C0.175024 11.8398 0.243026 12.1728 0.327527 12.5003H0.47403L2.10956 11.5002Z"
-        fill="white"
-      />
-      <path
-        d="M8.50002 7.27665V0.124512C8.16051 0.175513 7.82751 0.243514 7.5 0.328016V6.66564L8.50002 7.27665Z"
-        fill="white"
-      />
-      <path
-        d="M11.5 12.2913V19.8759C11.8395 19.8249 12.1725 19.7569 12.5 19.6724V12.9023L11.5 12.2913Z"
-        fill="white"
-      />
-      <path
-        d="M7.5 13.205V19.6721C7.82751 19.7566 8.16051 19.8241 8.50002 19.8756V12.594L7.5 13.205Z"
-        fill="white"
-      />
-      <path
-        d="M11.5925 7.34715L11.7345 7.43415L12.5 6.96614V0.328016C12.1725 0.243514 11.8395 0.176013 11.5 0.124512V7.49865L11.5925 7.34715Z"
-        fill="white"
-      />
-      <path
-        d="M2.32251 8.50002H7.01761L8.50014 7.594V7.277L7.50011 6.66548L2.37852 3.53442C1.95151 4.03743 1.572 4.58144 1.24949 5.16296L5.02507 7.5H2.29701L0.650482 6.47648C0.54748 6.74949 0.455478 7.02699 0.375977 7.3105L0.686483 7.5L2.32251 8.50002Z"
-        fill="white"
-      />
-      <path
-        d="M11.7344 7.43419L13.4784 8.50021H18.171L19.6905 7.57119C19.528 6.92118 19.303 6.29767 19.02 5.70516L16.139 7.50019H13.4109L18.317 4.45013C18.1515 4.20313 17.9735 3.96562 17.7875 3.73462L12.4999 6.96618L11.7344 7.43419Z"
-        fill="white"
-      />
-      <path
-        d="M5.02448 7.50013L1.2494 5.16309C1.0169 5.58259 0.821394 6.0231 0.650391 6.47661L2.29642 7.50013H5.02448Z"
-        fill="#E53935"
-      />
-      <path
-        d="M16.1392 7.50024L19.0207 5.70521C18.8132 5.2702 18.5837 4.84819 18.3177 4.45068L13.4111 7.50024H16.1392Z"
-        fill="#E53935"
-      />
-      <path
-        d="M11.5 11.5002V12.2913L12.5 12.9023L17.8556 16.1758C18.2416 15.6853 18.5836 15.1593 18.8736 14.6008L15.4856 12.5003H18.2136L19.4432 13.2673C19.5507 12.9563 19.6432 12.6393 19.7197 12.3153L18.3871 11.5002H11.5Z"
-        fill="white"
-      />
-      <path
-        d="M13.4785 8.50019L11.7345 7.43417L11.5925 7.34717L11.5 7.49867V8.50019H13.4785Z"
-        fill="white"
-      />
-      <path
-        d="M8.49934 12.5943V11.5002H2.10921L0.473182 12.5003L0.34668 12.5778C0.522683 13.2383 0.762688 13.8713 1.06319 14.4708L4.16375 12.5003H6.89181L1.80071 15.7168C1.95971 15.9448 2.12471 16.1688 2.30172 16.3823L7.49932 13.2053L8.49934 12.5943Z"
-        fill="white"
-      />
-      <path
-        d="M7.01758 8.50026H8.50011V7.59424L7.01758 8.50026Z"
-        fill="white"
-      />
-      <path
-        d="M15.4854 12.5L18.8729 14.6C19.0949 14.173 19.2834 13.727 19.4429 13.2665L18.2134 12.5H15.4854Z"
-        fill="#E53935"
-      />
-      <path
-        d="M4.16501 12.5L1.06445 14.4705C1.28196 14.9045 1.52596 15.3216 1.80197 15.7166L6.89307 12.5H4.16501Z"
-        fill="#E53935"
-      />
-      <path
-        d="M13.4785 8.5H11.5V11.5001H18.3871H19.8757C19.9497 11.0095 20.0002 10.511 20.0002 10C20.0002 9.48902 19.9497 8.99051 19.8757 8.5H18.1711H13.4785Z"
-        fill="#E53935"
-      />
-      <path
-        d="M8.50017 11.5001V8.5H7.01764H2.32255H0.124502C0.050501 8.99051 0 9.48902 0 10C0 10.511 0.050501 11.0095 0.124502 11.5001H2.11004H8.50017Z"
-        fill="#E53935"
-      />
-      <path
-        d="M11.5001 19.8759V12.2912V11.5002V8.50016V7.49865V0.124502C11.0095 0.050501 10.511 0 10 0C9.48902 0 8.99051 0.050501 8.5 0.124502V7.27664V7.59365V8.50016V11.5002V12.5942V19.8759C8.99051 19.9499 9.48902 20.0004 10 20.0004C10.511 20.0004 11.0095 19.9499 11.5001 19.8759Z"
-        fill="#E53935"
-      />
-    </g>
-  </svg>
-)
-
-export const EnglishSquareIcon = (props: Props) => (
-  <svg
-    viewBox="0 0 26 26"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g>
-      <mask
-        style={{ maskType: 'alpha' }}
-        maskUnits="userSpaceOnUse"
-        x="1"
-        y="5"
-        width="24"
-        height="16"
-      >
-        <path
-          d="M1.08301 7.41675C1.08301 6.31218 1.97844 5.41675 3.08301 5.41675H22.9163C24.0209 5.41675 24.9163 6.31218 24.9163 7.41675V18.5834C24.9163 19.688 24.0209 20.5834 22.9163 20.5834H3.08301C1.97844 20.5834 1.08301 19.688 1.08301 18.5834V7.41675Z"
-          fill="#3F51B5"
-        />
-      </mask>
-      <path
-        d="M1.08301 5.41675H24.9163V20.5834H1.08301V5.41675Z"
-        fill="#3F51B5"
-      />
-      <path
-        d="M1.08301 7.70041L12.3551 14.5899L14.05 11.8165L3.57901 5.41675H1.08301V7.70041Z"
-        fill="white"
-      />
-      <path
-        d="M24.9165 5.41675H22.9616L12.4912 11.816L14.1855 14.5899L24.9165 8.03083V5.41675Z"
-        fill="white"
-      />
-      <path
-        d="M14.1855 10.9802L12.4912 13.7536L23.6658 20.5834H24.9165V17.5387L14.1855 10.9802Z"
-        fill="white"
-      />
-      <path
-        d="M1.08301 17.8702V20.5834H2.87592L14.05 13.7541L12.3556 10.9802L1.08301 17.8702Z"
-        fill="white"
-      />
-      <path
-        d="M1.08301 10.8333H24.9163V15.1666H1.08301V10.8333Z"
-        fill="white"
-      />
-      <path d="M10.833 5.41675H15.1663V20.5834H10.833V5.41675Z" fill="white" />
-      <path
-        d="M9.32609 10.8334L1.08301 5.79537V7.06504L7.24826 10.8334H9.32609ZM24.0004 5.41675L15.1376 10.8334H17.2149L24.9163 6.12687V5.41675H24.0004ZM17.9191 15.1667L24.9163 19.4432V18.1735L19.9964 15.1667H17.9191ZM8.62192 15.1667L1.08301 19.7742V20.5834H1.83701L10.6992 15.1667H8.62192ZM1.08301 11.9167H24.9163V14.0834H1.08301V11.9167Z"
-        fill="#E53935"
-      />
-      <path
-        d="M11.917 5.41675H14.0837V20.5834H11.917V5.41675Z"
-        fill="#E53935"
-      />
-    </g>
-  </svg>
-)