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

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

@@ -1,150 +0,0 @@
-import React from 'react'
-
-import { CambodiaRoundIcon, CambodiaSquareIcon } from './icons/cambodia'
-import { EnglishRoundIcon, EnglishSquareIcon } from './icons/english'
-import { IndiaRoundIcon, IndiaSquareIcon } from './icons/india'
-import { IndonesiaRoundIcon, IndonesiaSquareIcon } from './icons/indonesia'
-import { MalaysiaRoundIcon, MalaysiaSquareIcon } from './icons/malaysia'
-import { MyanmarRoundIcon, MyanmarSquareIcon } from './icons/myanmar'
-import {
-  PhilippinesRoundIcon,
-  PhilippinesSquareIcon,
-} from './icons/philippines'
-import { TaiwanRoundIcon, TaiwanSquareIcon } from './icons/taiwan'
-import { ThailandRoundIcon, ThailandSquareIcon } from './icons/thailand'
-import { VietnamRoundIcon, VietnamSquareIcon } from './icons/vietnam'
-import { StyledFlag } from './index.styled'
-
-export type FlagCountryType =
-  | 'VN'
-  | 'ID'
-  | 'TH'
-  | 'KH'
-  | 'MY'
-  | 'MM'
-  | 'PH'
-  | 'IN'
-  | 'TW'
-
-export type FlagLanguageType =
-  | 'vi'
-  | 'id'
-  | 'ms'
-  | 'km'
-  | 'en'
-  | 'th'
-  | 'my'
-  | 'zh'
-  | 'hi'
-  | 'tl'
-
-type Props = {
-  country?: FlagCountryType
-  language?: FlagLanguageType
-  width: number
-  height: number
-  rounded?: boolean
-  isTesting?: boolean
-}
-
-const Flag = ({
-  country,
-  language,
-  rounded,
-  height,
-  width,
-  isTesting,
-}: Props) => {
-  let flag: JSX.Element
-  let flagRounded: JSX.Element
-  switch (language) {
-    case 'en':
-      flag = <EnglishSquareIcon />
-      flagRounded = <EnglishRoundIcon />
-      break
-    case 'vi':
-      flag = <VietnamSquareIcon />
-      flagRounded = <VietnamRoundIcon />
-      break
-    case 'id':
-      flag = <IndonesiaSquareIcon isTesting={isTesting} />
-      flagRounded = <IndonesiaRoundIcon isTesting={isTesting} />
-      break
-    case 'th':
-      flag = <ThailandSquareIcon />
-      flagRounded = {} = <ThailandRoundIcon />
-      break
-    case 'km':
-      flag = <CambodiaSquareIcon />
-      flagRounded = <CambodiaRoundIcon />
-      break
-    case 'ms':
-      flag = <MalaysiaSquareIcon />
-      flagRounded = <MalaysiaRoundIcon />
-      break
-    case 'my':
-      flag = <MyanmarSquareIcon />
-      flagRounded = <MyanmarRoundIcon />
-      break
-    case 'tl':
-      flag = <PhilippinesSquareIcon />
-      flagRounded = <PhilippinesRoundIcon />
-      break
-    case 'hi':
-      flag = <IndiaSquareIcon />
-      flagRounded = <IndiaRoundIcon />
-      break
-    case 'zh':
-      flag = <TaiwanSquareIcon />
-      flagRounded = <TaiwanRoundIcon />
-      break
-  }
-  if (!flag && !flagRounded) {
-    switch (country) {
-      case 'VN':
-        flag = <VietnamSquareIcon />
-        flagRounded = <VietnamRoundIcon />
-        break
-      case 'ID':
-        flag = <IndonesiaSquareIcon isTesting={isTesting} />
-        flagRounded = <IndonesiaRoundIcon isTesting={isTesting} />
-        break
-      case 'TH':
-        flag = <ThailandSquareIcon />
-        flagRounded = {} = <ThailandRoundIcon />
-        break
-      case 'KH':
-        flag = <CambodiaSquareIcon />
-        flagRounded = <CambodiaRoundIcon />
-        break
-      case 'MY':
-        flag = <MalaysiaSquareIcon />
-        flagRounded = <MalaysiaRoundIcon />
-        break
-      case 'MM':
-        flag = <MyanmarSquareIcon />
-        flagRounded = <MyanmarRoundIcon />
-        break
-      case 'PH':
-        flag = <PhilippinesSquareIcon />
-        flagRounded = <PhilippinesRoundIcon />
-        break
-      case 'IN':
-        flag = <IndiaSquareIcon />
-        flagRounded = <IndiaRoundIcon />
-        break
-      case 'TW':
-        flag = <TaiwanSquareIcon />
-        flagRounded = <TaiwanRoundIcon />
-        break
-    }
-  }
-
-  return (
-    <StyledFlag theme={{ width, height }}>
-      {rounded ? flagRounded : flag}
-    </StyledFlag>
-  )
-}
-
-export { Flag }

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

@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  --columns-count: 2;
-  --columns-count-desktop: 2;
-  --columns: var(--grid-template-columns,repeat(var(--columns-count),1fr));
-  --columns-desktop: var( --grid-template-columns-desktop, repeat(var(--columns-count-desktop),1fr) );
-  display: grid;
-  grid-template-columns: var(--columns);
-  grid-gap: var(--grid-gap);
-  -webkit-align-items: var(--align-items);
-  -webkit-box-align: var(--align-items);
-  -ms-flex-align: var(--align-items);
-  align-items: var(--align-items);
-}
-
-.c0 > * {
-  justify-self: var(--justify-children);
-}
-
-@media (min-width:1024px) {
-  .c0 {
-    grid-template-columns: var(--columns-desktop);
-  }
-}
-
-<div
-  class="c0"
->
-  <div>
-    column 1
-  </div>
-  <div>
-    column 2
-  </div>
-</div>
-`;

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

@@ -1,50 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Grid, Props } from './index'
-
-export default {
-  component: Grid,
-  title: 'Atoms/Grid',
-  description:
-    'This grid component is based on CSS Grid and uses fractional units.',
-  argTypes: {
-    columns: {
-      description:
-        'This is the default argument for a equally sized grid. Mandatory when you do not use gridTemplateColumns.',
-    },
-    columnsDesktop: {
-      description:
-        'The columns count on desktop. Mandatory when you do not use gridTemplateColumnsDesktop.',
-    },
-    justifyChildren: {
-      description:
-        'With this control you can either center the component or align it to the right. This only works when the child has a width of less than 100%',
-    },
-    gap: {
-      description:
-        'Optional value to add a gap between the columns. You have to add a unit like px at the end of the prop.',
-    },
-    gridTemplateColumns: {
-      description:
-        'Advanced replacement of the columns/columnsDesktop argument. Can be used to create non-equally sized comumns. For example 1fr 2fr 1fr.',
-    },
-  },
-}
-
-const Template: Story<Props> = (args) => (
-  <Grid {...args}>
-    <div style={{ background: 'lightBlue' }}>I am a column</div>
-    <div style={{ background: 'lightBlue' }}>I am a column</div>
-    <div style={{ background: 'lightBlue' }}>I am a column</div>
-    <div style={{ background: 'lightBlue' }}>I am a column</div>
-  </Grid>
-)
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  columns: 2,
-  columnsDesktop: 4,
-}

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

@@ -1,34 +0,0 @@
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledGrid = styled.div`
-  --columns-count: ${(props) => props.theme.columns};
-  --columns-count-desktop: ${(props) => props.theme.columnsDesktop};
-
-  --grid-template-columns: ${(props) => props.theme.gridTemplateColumns};
-  --grid-template-columns-desktop: ${(props) =>
-    props.theme.gridTemplateColumnsDesktop};
-
-  --columns: var(--grid-template-columns, repeat(var(--columns-count), 1fr));
-  --columns-desktop: var(
-    --grid-template-columns-desktop,
-    repeat(var(--columns-count-desktop), 1fr)
-  );
-
-  --justify-children: ${(props) => props.theme.justifyChildren};
-  --grid-gap: ${(props) => props.theme.gap};
-  --align-items: ${(props) => props.theme.alignItems};
-
-  display: grid;
-  grid-template-columns: var(--columns);
-  grid-gap: var(--grid-gap);
-  align-items: var(--align-items);
-
-  ${MediaQueries.tdUp} {
-    grid-template-columns: var(--columns-desktop);
-  }
-
-  > * {
-    justify-self: var(--justify-children);
-  }
-`

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

@@ -1,26 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Grid } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const grid = render(
-    <MockTheme>
-      <Grid columns={2} columnsDesktop={2}>
-        <div>column 1</div>
-        <div>column 2</div>
-      </Grid>
-    </MockTheme>,
-  )
-
-  const self = grid.container.firstChild
-
-  expect(self).toMatchSnapshot()
-
-  expect(self.firstChild).toReturn
-})

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

@@ -1,61 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react'
-
-import { StyledGrid } from './index.styled'
-
-interface BasicProps {
-  children: ReactNode
-  alignItems?: 'start' | 'end' | 'center' | 'stretch'
-  gap?: string
-  className?: string
-  justifyChildren?: 'start' | 'center' | 'end' | 'stretch'
-  style?: CSSProperties
-}
-
-interface BasicGrid extends BasicProps {
-  columns: number
-  columnsDesktop: number
-  gridTemplateColumns?: never
-  gridTemplateColumnsDesktop?: never
-}
-
-interface ExtendedGrid extends BasicProps {
-  columns?: never
-  columnsDesktop?: never
-  gridTemplateColumns: string
-  gridTemplateColumnsDesktop: string
-}
-
-export type Props = BasicGrid | ExtendedGrid
-
-const Grid = ({
-  className,
-  columns,
-  columnsDesktop,
-  gridTemplateColumns,
-  gridTemplateColumnsDesktop,
-  gap,
-  children,
-  justifyChildren,
-  style,
-  alignItems,
-}: Props) => {
-  return (
-    <StyledGrid
-      className={className}
-      style={style}
-      theme={{
-        columns,
-        columnsDesktop,
-        gap,
-        justifyChildren,
-        gridTemplateColumns,
-        gridTemplateColumnsDesktop,
-        alignItems,
-      }}
-    >
-      {children}
-    </StyledGrid>
-  )
-}
-
-export { Grid }

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

@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  color: #262626;
-  font-size: 24px;
-  -webkit-letter-spacing: -0.8px;
-  -moz-letter-spacing: -0.8px;
-  -ms-letter-spacing: -0.8px;
-  letter-spacing: -0.8px;
-  line-height: 32px;
-  font-weight: 700;
-}
-
-.c0[data-tag] {
-  color: var(--custom-heading-color,#262626);
-}
-
-@media (min-width:1024px) {
-  .c0 {
-    font-size: 32px;
-    line-height: 42px;
-    -webkit-letter-spacing: -1px;
-    -moz-letter-spacing: -1px;
-    -ms-letter-spacing: -1px;
-    letter-spacing: -1px;
-  }
-}
-
-<div>
-  <h2
-    class="c0"
-    data-tag="h2"
-  >
-    Hello, World!
-  </h2>
-</div>
-`;

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

@@ -1,27 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Heading, Props } from './index'
-
-export default {
-  component: Heading,
-  title: 'Atoms/Heading',
-  argTypes: {
-    color: {
-      control: 'color',
-      description:
-        'Pick any HEX value for the color. This will automatically be added to the component using CSS Custom properties.',
-    },
-  },
-}
-
-const Template: Story<Props> = (args) => (
-  <Heading {...args}>Lorem ipsum dolor asit amet</Heading>
-)
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  tag: 'h1',
-}

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

@@ -1,108 +0,0 @@
-import { theme, ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-import { Props } from '.'
-
-type CssProps = {
-  headingTag: Props['tag']
-  headingFontWeight: Props['fontWeight']
-}
-
-const getSizes = (tag: Props['tag']) => {
-  switch (tag) {
-    case 'h1':
-      return `
-        font-size: 26px;
-        letter-spacing: -0.9px;
-        line-height: 34px;
-        ${MediaQueries.tdUp} {
-          font-size: 40px;
-          line-height: 52px;
-          letter-spacing: -1.2px;
-        }
-      `
-    case 'h2':
-      return `
-        font-size: 24px;
-        letter-spacing: -0.8px;
-        line-height: 32px;
-        ${MediaQueries.tdUp} {
-          font-size: 32px;
-          line-height: 42px;
-          letter-spacing: -1px;
-        }
-      `
-    case 'h3':
-      return `
-        font-size: 20px;
-        letter-spacing: -0.7px;
-        line-height: 26px;
-        ${MediaQueries.tdUp} {
-          font-size: 26px;
-          line-height: 36px;
-          letter-spacing: -0.8px;
-        }
-      `
-    case 'h4':
-      return `
-        font-size: 18px;
-        letter-spacing: -0.6px;
-        line-height: 26px;
-        ${MediaQueries.tdUp} {
-          font-size: 22px;
-          line-height: 32px;
-          letter-spacing: -0.6px;
-        }
-      `
-    case 'h5':
-      return `
-        font-size: 16px;
-        letter-spacing: -0.2px;
-        line-height: 24px;
-        ${MediaQueries.tdUp} {
-          font-size: 18px;
-          line-height: 28px;
-          letter-spacing: -0.2px;
-        }
-      `
-    case 'h6':
-      return `
-        font-size: 14px;
-        line-height: 22px;
-        ${MediaQueries.tdUp} {
-          font-size: 16px;
-          line-height: 24px;
-          letter-spacing: 0;
-        }
-      `
-  }
-}
-
-const getFontWeight = (fontWeight: Props['fontWeight']) => {
-  switch (fontWeight) {
-    case 'bold':
-      return `
-       font-weight: ${theme.sizes.fwBold};
-      `
-    case 'semibold':
-      return `
-       font-weight: ${theme.sizes.fwSemiBold};
-      `
-    default:
-      return `
-        font-weight: ${theme.sizes.fwBold};
-      `
-  }
-}
-
-export const StyledHeading = styled.div<CssProps>`
-  color: ${(props: ThemeProps) => props.theme.colors.gray800};
-  ${(props) => getSizes(props.headingTag)}
-  ${(props) => getFontWeight(props.headingFontWeight)}
-
-  /* Base headings sizes and properties */
-  &[data-tag] {
-    color: var(--custom-heading-color, #262626);
-  }
-`

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

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Heading } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const heading = render(
-    <MockTheme>
-      <Heading tag="h2">Hello, World!</Heading>
-    </MockTheme>,
-  )
-
-  const self = heading.container
-
-  expect(self).toMatchSnapshot()
-
-  expect(self.firstChild).toContainHTML('data-tag="h2"')
-})

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

@@ -1,59 +0,0 @@
-import React, { ReactNode } from 'react'
-
-import { CSSProperties } from 'styled-components'
-
-import { StyledHeading } from './index.styled'
-
-export type Props = {
-  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  children: ReactNode
-  title?: string
-  color?: string
-  className?: string
-  style?: CSSProperties
-  fontWeight?: 'bold' | 'semibold'
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  dataEventCategory?: string
-  dataEventAction?: string
-  dataEventLabel?: string
-}
-
-const Heading = ({
-  as,
-  tag,
-  className,
-  children,
-  title,
-  color,
-  style,
-  fontWeight,
-  dataEventCategory,
-  dataEventAction,
-  dataEventLabel,
-}: Props) => {
-  const asTag = as || tag
-  return (
-    <StyledHeading
-      title={title}
-      style={{
-        ...(color
-          ? { ['--custom-heading-color' as string]: color }
-          : undefined),
-        ...style,
-      }}
-      data-tag={tag}
-      data-font-weight={fontWeight || undefined}
-      data-event-category={dataEventCategory}
-      data-event-action={dataEventAction}
-      data-event-label={dataEventLabel}
-      as={asTag}
-      className={className}
-      headingFontWeight={fontWeight}
-      headingTag={tag}
-    >
-      {children}
-    </StyledHeading>
-  )
-}
-
-export { Heading }

package/src/components/atoms/icons/Ask.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-
-import { IconProps } from '.'
-import { theme } from '../../../misc/theme'
-
-const Ask: React.FC<IconProps> = ({
-  size,
-  color,
-  activeColor,
-  isActive,
-  ...rest
-}) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      fill="none"
-      viewBox="0 0 24 24"
-      {...rest}
-    >
-      {isActive ? (
-        <path
-          fill={activeColor}
-          fillRule="evenodd"
-          d="M2 11c0-4.96 4.484-9 10-9s10 4.04 10 9c0 .32-.02.64-.059.953-.593 5.524-6.27 9.426-7.402 10.152L14 22.45c-.878.484-.97-.235-.993-.411-.003-.025-.005-.039-.007-.038v-2.047C7.04 20.508 2 16.258 2 11zm10.5 5c.277 0 .5-.223.5-.5v-1c0-.277-.223-.5-.5-.5h-1c-.277 0-.5.223-.5.5v1c0 .277.223.5.5.5h1zM11 13h2c0-.447.412-1.02.863-1.645C14.404 10.603 15 9.776 15 9c0-1.477-1.121-3-3-3-2.047 0-3 1.79-3 3 0 .55.45 1 1 1s1-.45 1-1c0-.164.176-1 1-1 .988 0 1 .988 1 1 0 .537-.52 1.312-1.029 2.072-.49.732-.971 1.45-.971 1.928z"
-          clipRule="evenodd"
-        ></path>
-      ) : (
-        <>
-          <path
-            fill={color}
-            d="M12.5 16c.277 0 .5-.223.5-.5v-1c0-.277-.223-.5-.5-.5h-1c-.277 0-.5.223-.5.5v1c0 .277.223.5.5.5h1zM11 13h2c0-.447.412-1.02.863-1.645C14.404 10.603 15 9.776 15 9c0-1.477-1.121-3-3-3-2.047 0-3 1.79-3 3 0 .55.45 1 1 1s1-.45 1-1c0-.164.176-1 1-1 .988 0 1 .988 1 1 0 .537-.52 1.312-1.029 2.072-.49.732-.971 1.45-.971 1.928z"
-          ></path>
-          <path
-            fill={color}
-            fillRule="evenodd"
-            d="M2 11c0-5.027 4.547-9 10-9s10 3.973 10 9c0 .324-.02.637-.059.945-.554 5.172-5.238 8.774-7.398 10.16L13 23.095v-3.196c-.12.012-.239.028-.356.044-.211.03-.421.058-.644.058-5.453 0-10-3.973-10-9zm18 0c0-3.809-3.508-7-8-7s-8 3.191-8 7 3.508 7 8 7c.617 0 1.219-.066 1.8-.188l1.2-.238v1.508c2.047-1.637 4.61-4.152 4.953-7.352l.004-.003v-.004c.027-.243.043-.48.043-.723z"
-            clipRule="evenodd"
-          ></path>
-        </>
-      )}
-    </svg>
-  )
-}
-
-Ask.defaultProps = {
-  size: 24,
-  color: theme.colors.gray600,
-  activeColor: theme.colors.primaryBase,
-  isActive: false,
-}
-
-export default Ask