@hhgtech/hhg-components 1.19.0-beta-6 → 1.19.0-beta-8

package/raw/src/components/atoms/text/index.styled.tsx

@@ -1,231 +0,0 @@
-import { theme, ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-import { Props } from '.'
-
-type CssProps = {
-  textSize: Props['size']
-  textType: Props['type']
-  textWordWrap: Props['wordWrap']
-  textIsUpperCase: Props['isUppercase']
-}
-
-const getSize = (size: Props['size']) => {
-  switch (size) {
-    case 'lg':
-    case 'md':
-      return `
-        font-size: 16px;
-        line-height: 28px;
-        ${MediaQueries.tdUp} {
-            font-size: 18px;
-            line-height: 32px;
-            letter-spacing: -0.2px;
-        }
-      `
-    case 'base':
-      return `
-        font-size: 16px;
-        line-height: 24px;
-        ${MediaQueries.tdUp} {
-          font-size: 16px;
-          line-height: 24px;
-        }
-      `
-    case 'sm':
-      return `
-      font-size: 14px;
-        line-height: 22px;
-        letter-spacing: -0.2px;
-        ${MediaQueries.tdUp} {
-          font-size: 16px;
-          line-height: 24px;
-        }
-      `
-    case 'p4':
-    case 'xs':
-      return `
-        font-size: 12px;
-        line-height: 18px;
-        ${MediaQueries.tdUp} {
-          font-size: 14px;
-          line-height: 24px;
-        }
-      `
-    // https://www.figma.com/file/oC0v0apXhnjTuqI2FrL2ic/E-Shopping?node-id=1243%3A215305
-    case 's1':
-      return `
-      font-size: 18px;
-      line-height: 28px;
-      letter-spacing: -0.6px;
-      ${MediaQueries.tdUp} {
-        font-size: 22px;
-        line-height: 32px;
-        letter-spacing: -0.6px;
-        }
-      `
-    case 's2':
-      return `
-        font-size: 16px;
-        line-height: 24px;
-        letter-spacing: -0.2px;
-        ${MediaQueries.tdUp} {
-          font-size: 18px;
-          line-height: 28px;
-          letter-spacing: -0.2px;
-        }
-      `
-    case 's3':
-      return `
-        font-size: 14px;
-        line-height: 22px;
-        ${MediaQueries.tdUp} {
-          font-size: 16px;
-          line-height: 24px;
-        }
-      `
-    case 's4':
-      return `
-        font-size: 12px;
-        line-height: 18px;
-        ${MediaQueries.tdUp} {
-          font-size: 14px;
-          line-height: 22px;
-        }
-      `
-    case 's5':
-      return `
-        font-size: 10px;
-        line-height: 16px;
-        ${MediaQueries.tdUp} {
-          font-size: 12px;
-          line-height: 18px;
-        }
-      `
-    // https://www.figma.com/file/oC0v0apXhnjTuqI2FrL2ic/E-Shopping?node-id=1243%3A215323
-    case 'p1':
-      return `
-        font-size: 18px;
-        line-height: 28px;
-        ${MediaQueries.tdUp} {
-          font-size: 18px;
-          line-height: 28px;
-          letter-spacing: -0.2px;
-        }
-      `
-    case 'p2':
-      return `
-        font-size: 16px;
-        line-height: 24px;
-        ${MediaQueries.tdUp} {
-          font-size: 16px;
-          line-height: 26px;
-        }
-      `
-    case 'p3':
-      return `
-        font-size: 14px;
-        line-height: 18px;
-        ${MediaQueries.tdUp} {
-          font-size: 14px;
-          line-height: 24px;
-        }
-      `
-    // https://www.figma.com/file/oC0v0apXhnjTuqI2FrL2ic/E-Shopping?node-id=1243%3A215337
-    case 'c1':
-      return `
-        font-size: 14px;
-        line-height: 24px;
-        ${MediaQueries.tdUp} {
-          font-size: 16px;
-          line-height: 26px;
-        }
-      `
-    case 'c2':
-      return `
-        font-size: 12px;
-        line-height: 18px;
-        ${MediaQueries.tdUp} {
-          font-size: 14px;
-          line-height: 24px;
-        }
-      `
-    /* https://www.figma.com/file/oC0v0apXhnjTuqI2FrL2ic/E-Shopping?node-id=1243%3A215356 */
-    case 'n1':
-      return `
-        font-size: 12px;
-        line-height: 18px;
-        ${MediaQueries.tdUp} {
-          font-size: 12px;
-          line-height: 18px;
-        }
-      `
-    case 'label1':
-      return `
-        font-size: 14px;
-        line-height: 22px;
-        ${MediaQueries.tdUp} {
-
-        }
-      `
-    case 'label2':
-      return `
-        font-size: 12px;
-        line-height: 18px;
-        ${MediaQueries.tdUp} {
-
-        }
-      `
-  }
-}
-
-const getFontWeight = (type: Props['type']) => {
-  switch (type) {
-    case 'bold':
-    case 'caption':
-      return theme.sizes.fwBold
-    case 'semiBold':
-      return theme.sizes.fwSemiBold
-    default:
-      return theme.sizes.fwRegular
-  }
-}
-
-export const StyledText = styled.p<CssProps>`
-  --text-color: var(
-    --custom-color,
-    ${(props: ThemeProps) =>
-      props.theme.defaultColor || props.theme.colors.gray800}
-  );
-
-  color: var(--text-color);
-  letter-spacing: 0px;
-  font-weight: ${(props) => getFontWeight(props.textType)};
-  ${(props) => getSize(props.textSize)}
-
-  /* Make caption uppercase */
-  ${(props) =>
-    props.textType === 'caption' &&
-    `
-    text-transform: uppercase;
-  `}
-
-  ${(props) =>
-    props.textWordWrap === 'break-all' &&
-    `
-    word-break: break-all;
-  `}
-
-  ${(props) =>
-    props.textWordWrap === 'break-word' &&
-    `
-    word-break: break-word;
-  `}
-
-  ${(props) =>
-    props.textIsUpperCase &&
-    `
-    text-transform: uppercase;
-  `}
-`

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

@@ -1,99 +0,0 @@
-import React, { ReactNode } from 'react'
-
-import { CSSProperties } from 'styled-components'
-
-import { StyledText } from './index.styled'
-
-export type TextSize =
-  | 'lg'
-  | 'md'
-  | 'base'
-  | 'sm'
-  | 'xs'
-  | 's1'
-  | 's2'
-  | 's3'
-  | 's4'
-  | 's5'
-  | 'p1'
-  | 'p2'
-  | 'p3'
-  | 'p4'
-  | 'c1'
-  | 'c2'
-  | 'n1'
-  | 'label1'
-  | 'label2'
-
-export type TextType = 'regular' | 'bold' | 'caption' | 'semiBold'
-
-export type Props = {
-  children?: ReactNode
-  size: TextSize
-  className?: string
-  color?: string
-  type?: TextType
-  title?: string
-  style?: CSSProperties
-  dataEventCategory?: string
-  dataEventAction?: string
-  dataEventLabel?: string
-  as?: keyof JSX.IntrinsicElements
-  /**
-   * word wrap options
-   * work-break: wrap the sentence by word
-   * break-all: break a long word into separate lines
-   */
-  wordWrap?: 'none' | 'break-word' | 'break-all'
-  /**
-   * upcase
-   */
-  isUppercase?: boolean
-  dangerouslySetInnerHTML?: {
-    __html: string
-  }
-}
-
-const Text = ({
-  size = 'base',
-  type = 'regular',
-  title,
-  className,
-  style,
-  children,
-  color,
-  dataEventCategory,
-  dataEventAction,
-  dataEventLabel,
-  as,
-  wordWrap,
-  isUppercase,
-  dangerouslySetInnerHTML,
-}: Props) => {
-  const customColor = { '--custom-color': color } as React.CSSProperties
-
-  return (
-    <StyledText
-      title={title}
-      data-size={size}
-      data-type={type}
-      style={{ ...style, ...customColor }}
-      className={className}
-      data-event-category={dataEventCategory}
-      data-event-action={dataEventAction}
-      data-event-label={dataEventLabel}
-      data-word-wrap={wordWrap}
-      data-is-uppercase={isUppercase}
-      as={as}
-      textSize={size}
-      textType={type}
-      textWordWrap={wordWrap}
-      textIsUpperCase={isUppercase}
-      dangerouslySetInnerHTML={dangerouslySetInnerHTML}
-    >
-      {children}
-    </StyledText>
-  )
-}
-
-export { Text }

package/raw/src/components/atoms/textArea/index.stories.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { TextArea, Props } from '.'
-
-export default {
-  component: TextArea,
-  title: 'Atoms/TextArea',
-  parameters: {
-    layout: 'padded',
-  },
-}
-
-const Template: Story<Props> = (args) => <TextArea {...args} />
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  placeholder: 'Enter your story!',
-  height: '116px',
-}
-
-export const Disabled = Template.bind({})
-
-Disabled.args = {
-  placeholder: 'I am disabled!',
-  height: '116px',
-  disabled: true,
-}

package/raw/src/components/atoms/textArea/index.tsx

@@ -1,86 +0,0 @@
-import React from 'react'
-
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-import { Label } from './../label'
-
-const StyledTextArea = styled.div`
-  textarea {
-    width: 100%;
-    height: var(--textarea-height, 116px);
-    padding: 1rem;
-    border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
-    border-radius: 6px;
-    color: ${(props: ThemeProps) => props.theme.colors.gray800};
-    font-size: 14px;
-    resize: none;
-
-    &:focus {
-      box-shadow: 0px 0px 2px 2px #91caff;
-    }
-
-    &::placeholder {
-      color: ${(props: ThemeProps) => props.theme.colors.gray500};
-    }
-
-    &:disabled {
-      background-color: ${(props: ThemeProps) => props.theme.colors.neutral50};
-      cursor: not-allowed;
-    }
-  }
-`
-
-export type Props = {
-  placeholder: string
-  id?: string
-  height?: string
-  labelText?: string
-  labelColor?: string
-  value?: string
-  className?: string
-  onChange?: (v: string) => void
-  onKeyPress?: (e: KeyboardEvent) => void
-  disabled?: boolean
-}
-
-const TextArea = ({
-  height,
-  placeholder,
-  labelText,
-  labelColor,
-  id,
-  onChange,
-  value,
-  className,
-  onKeyPress,
-  disabled = false,
-}: Props) => {
-  return (
-    <StyledTextArea
-      className={className}
-      style={{ ['--textarea-height' as string]: height || '116px' }}
-    >
-      {labelText && (
-        <Label
-          size="label2"
-          style={{ color: labelColor || '#595959' }}
-          htmlFor={id}
-        >
-          {labelText}
-        </Label>
-      )}
-      <textarea
-        placeholder={placeholder}
-        id={id}
-        onChange={(e) => onChange && onChange(e.target.value)}
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onKeyPress={(e) => onKeyPress && onKeyPress(e as any)}
-        value={value}
-        disabled={disabled}
-      />
-    </StyledTextArea>
-  )
-}
-
-export { TextArea }

package/raw/src/components/atoms/textDivider/index.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import { CSSProperties, ReactNode } from 'react'
-
-
-import { Container } from 'components/atoms/container'
-import { Text } from 'components/atoms/text'
-import styled from 'styled-components'
-
-type Props = {
-  children: ReactNode
-  icon: ReactNode
-  className?: string
-  style?: CSSProperties
-}
-
-const StyledTextDivider = styled.div`
-  background-color: var(--neutral50);
-  padding: 12px 0;
-  box-shadow: inset 0px 1px 0px #e4e8ec;
-
-  > * {
-    display: grid;
-    grid-template-columns: 32px 1fr;
-    align-content: center;
-
-    p {
-      font-weight: 600;
-    }
-  }
-
-  .icon-wrapper {
-    display: flex;
-    align-items: center;
-  }
-`
-
-const TextDivider = ({ children, icon, className, style }: Props) => (
-  <StyledTextDivider style={style} className={className}>
-    <Container>
-      <div className="icon-wrapper">{icon}</div>
-      <Text size="c1" color="var(--neutral800)">
-        {children}
-      </Text>
-    </Container>
-  </StyledTextDivider>
-)
-
-export { TextDivider }

package/raw/src/components/atoms/toggle/__snapshots__/index.test.tsx.snap

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c2 {
-  position: relative;
-  display: block;
-  width: 40px;
-  height: 24px;
-  background: #c3cbd4;
-  border-radius: 100px;
-  cursor: pointer;
-}
-
-.c2:after {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 20px;
-  height: 20px;
-  background: #fff;
-  border-radius: 90px;
-  content: '';
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
-}
-
-.c0 {
-  height: 24px;
-}
-
-.c0 input[type='checkbox'] {
-  width: 0;
-  height: 0;
-  visibility: hidden;
-}
-
-.c0 label {
-  cursor: pointer;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  color: #595959;
-}
-
-.c0 input:checked + label .c1 {
-  background: #2d87f3;
-}
-
-.c0 input:checked + label .c1:after {
-  left: calc(100% - 2px);
-  -webkit-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
-
-<div
-  class="c0"
->
-  <input
-    checked=""
-    id="test-toggle"
-    type="checkbox"
-  />
-  <label
-    for="test-toggle"
-  >
-    <span
-      class="c1 c2"
-    />
-  </label>
-</div>
-`;

package/raw/src/components/atoms/toggle/index.stories.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Toggle, Props } from '.'
-
-export default {
-  component: Toggle,
-  title: 'Atoms/Toggle',
-}
-
-const Template: Story<Props> = (args) => <Toggle {...args} />
-
-export const Checked = Template.bind({})
-
-Checked.args = {
-  checked: true,
-}
-
-export const CheckedWithLabel = Template.bind({})
-
-CheckedWithLabel.args = {
-  checked: true,
-  label: 'Active',
-}
-
-export const Unchecked = Template.bind({})
-
-Unchecked.args = {
-  checked: false,
-}
-
-export const UncheckedWithLabel = Template.bind({})
-
-UncheckedWithLabel.args = {
-  checked: false,
-  label: 'Deactive',
-}

package/raw/src/components/atoms/toggle/index.styled.tsx

@@ -1,55 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-const heightIcon = '24px'
-
-export const StyledToggleIcon = styled.span`
-  position: relative;
-  display: block;
-  width: 40px;
-  height: ${heightIcon};
-  background: #c3cbd4;
-  border-radius: 100px;
-  cursor: pointer;
-
-  &:after {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 20px;
-    height: 20px;
-    background: #fff;
-    border-radius: 90px;
-    content: '';
-    transition: 0.3s;
-  }
-`
-
-export const StyledToggleLabel = styled.span`
-  padding-left: 15px;
-`
-
-export const StyledToggle = styled.div`
-  height: ${heightIcon};
-
-  input[type='checkbox'] {
-    width: 0;
-    height: 0;
-    visibility: hidden;
-  }
-
-  label {
-    cursor: pointer;
-    display: inline-flex;
-    color: ${(props: ThemeProps) => props.theme.colors.gray600};
-  }
-
-  input:checked + label ${StyledToggleIcon} {
-    background: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-  }
-
-  input:checked + label ${StyledToggleIcon}:after {
-    left: calc(100% - 2px);
-    transform: translateX(-100%);
-  }
-`

package/raw/src/components/atoms/toggle/index.test.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Toggle } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const toggle = render(
-    <MockTheme>
-      <Toggle
-        id="test-toggle"
-        checked
-        onChange={() => console.log('onChange')}
-      />
-    </MockTheme>,
-  )
-
-  const self = toggle.container.firstChild
-
-  expect(self).toMatchSnapshot()
-
-  expect(self.firstChild).toHaveAttribute('checked')
-})

package/raw/src/components/atoms/toggle/index.tsx

@@ -1,28 +0,0 @@
-import React, { CSSProperties } from 'react'
-
-import {
-  StyledToggle,
-  StyledToggleIcon,
-  StyledToggleLabel,
-} from './index.styled'
-
-export type Props = {
-  id: string
-  checked: boolean
-  className?: string
-  style?: CSSProperties
-  label?: string
-  onChange?: () => void
-}
-
-const Toggle = ({ className, id, onChange, checked, style, label }: Props) => (
-  <StyledToggle className={className} style={style}>
-    <input type="checkbox" id={id} onChange={onChange} checked={checked} />
-    <label htmlFor={id}>
-      <StyledToggleIcon />
-      {label && <StyledToggleLabel>{label}</StyledToggleLabel>}
-    </label>
-  </StyledToggle>
-)
-
-export { Toggle }