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

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

@@ -0,0 +1,231 @@
+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/src/components/atoms/text/index.tsx

@@ -0,0 +1,99 @@
+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/src/components/atoms/textArea/index.stories.tsx

@@ -0,0 +1,30 @@
+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/src/components/atoms/textArea/index.tsx

@@ -0,0 +1,86 @@
+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/src/components/atoms/textDivider/index.tsx

@@ -0,0 +1,48 @@
+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/src/components/atoms/toggle/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,73 @@
+// 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/src/components/atoms/toggle/index.stories.tsx

@@ -0,0 +1,38 @@
+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/src/components/atoms/toggle/index.styled.tsx

@@ -0,0 +1,55 @@
+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/src/components/atoms/toggle/index.test.tsx

@@ -0,0 +1,27 @@
+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/src/components/atoms/toggle/index.tsx

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