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

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

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

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

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

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

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

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

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

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

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

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

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

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