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

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

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { render, cleanup } from '@testing-library/react'
+import 'jest-styled-components'
+
+import { PureInput } from '.'
+import MockTheme from '../../../misc/mockTheme'
+
+afterEach(cleanup)
+
+test('it renders', () => {
+  const tag = render(
+    <MockTheme>
+      <PureInput
+        defaultValue="test"
+        name="test-input"
+        size="md"
+        label="test input"
+        onChange={(v) => console.log(v)}
+      />
+    </MockTheme>,
+  )
+
+  const self = tag.container.firstChild
+
+  expect(self).toMatchSnapshot()
+  expect(self).toContainHTML('test input')
+  expect(self).toHaveAttribute('data-size', 'md')
+})

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

@@ -0,0 +1,162 @@
+/* eslint-disable react/prop-types */
+import React, { InputHTMLAttributes, useState } from 'react'
+
+import { Label } from '../label'
+import {
+  StyledInput,
+  StyledErrorLabel,
+  StyledActionIcon,
+  StyledDisplayIcon,
+} from './index.styled'
+
+export type CustomInputProps = {
+  size: 'lg' | 'md' | 'sm'
+  autoComplete?: 'on' | 'off'
+  onChange?: (v: string) => void
+  errorMessage?: string
+  actionIcon?: JSX.Element
+  onActionClick?: () => void
+  isDeleteAction?: boolean
+  displayIcon?: JSX.Element
+  label?: string | JSX.Element
+  isDisabled?: boolean
+  CustomInput?: JSX.Element
+  type?:
+    | 'none'
+    | 'text'
+    | 'tel'
+    | 'url'
+    | 'email'
+    | 'numeric'
+    | 'decimal'
+    | 'search'
+    | 'number'
+  isNumerousKeyboard?: boolean
+  enterKeyHint?: React.InputHTMLAttributes<HTMLInputElement>['enterKeyHint']
+  nativeOnChange?: React.ChangeEventHandler<HTMLInputElement>
+}
+
+export type Props = Omit<
+  React.DetailedHTMLProps<
+    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  >,
+  'size' | 'autoComplete' | 'type' | 'onChange' | 'enterKeyHint'
+> &
+  CustomInputProps
+
+const PureInput = React.forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      name,
+      errorMessage,
+      autoComplete = 'off',
+      defaultValue,
+      actionIcon: ActionIcon,
+      displayIcon: DisplayIcon,
+      isDeleteAction,
+      onActionClick,
+      label,
+      placeholder,
+      className,
+      onChange,
+      onKeyPress,
+      isDisabled,
+      CustomInput,
+      size,
+      style,
+      autoFocus = true,
+      type = 'text',
+      isNumerousKeyboard = false,
+      onFocus,
+      enterKeyHint,
+      nativeOnChange,
+      ...other
+    },
+    ref,
+  ) => {
+    const [localValue, setLocalValue] = useState(defaultValue)
+
+    const handleOnChange = (v: string) => {
+      setLocalValue(v)
+      onChange(v)
+    }
+
+    const handleOnActionClick = () => {
+      if (isDeleteAction) {
+        setLocalValue('')
+        ;(ref as any).current?.focus()
+      }
+
+      onActionClick && onActionClick()
+    }
+
+    return (
+      <StyledInput
+        data-size={size}
+        className={className}
+        data-has-action-icon={!!ActionIcon || undefined}
+        data-has-display-icon={!!DisplayIcon || undefined}
+        data-has-error={(errorMessage && errorMessage.length > 0) || undefined}
+        style={style}
+      >
+        {label && (
+          <Label size="label2" htmlFor={name} className="inputLabel">
+            {label}
+          </Label>
+        )}
+        <div style={{ position: 'relative' }}>
+          {CustomInput ? (
+            CustomInput
+          ) : (
+            <input
+              id={name}
+              name={name}
+              placeholder={placeholder}
+              onChange={
+                nativeOnChange ?? ((e) => handleOnChange(e.target.value))
+              }
+              onKeyPress={onKeyPress}
+              type={type}
+              aria-label={type}
+              disabled={isDisabled}
+              value={localValue}
+              autoComplete={autoComplete}
+              ref={ref}
+              autoFocus={autoFocus}
+              inputMode={
+                isNumerousKeyboard || type === 'number' ? 'numeric' : type
+              }
+              pattern={isNumerousKeyboard ? '[0-9]*' : '.*'}
+              onFocus={onFocus}
+              enterKeyHint={enterKeyHint}
+              {...other}
+            />
+          )}
+          {DisplayIcon && (
+            <StyledDisplayIcon className="displayIcon">
+              {DisplayIcon}
+            </StyledDisplayIcon>
+          )}
+          {ActionIcon && (
+            <StyledActionIcon
+              className="actionIcon"
+              onClick={handleOnActionClick}
+            >
+              {ActionIcon}
+            </StyledActionIcon>
+          )}
+        </div>
+        {errorMessage && errorMessage.length > 0 && (
+          <StyledErrorLabel className="errorLabel">
+            {errorMessage}
+          </StyledErrorLabel>
+        )}
+      </StyledInput>
+    )
+  },
+)
+
+PureInput.displayName = 'PureInput'
+
+export { PureInput }

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

@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders 1`] = `
+.c0[data-type='circle'] {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.c0[data-type='circle'] input {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  border: solid 1px #737373;
+  margin-right: 8px;
+  border-radius: 100%;
+  cursor: inherit;
+  -webkit-transition: background 0.4s,border-color 0.4s,box-shadow 0.4s;
+  transition: background 0.4s,border-color 0.4s,box-shadow 0.4s;
+}
+
+.c0[data-type='circle'] input:hover,
+.c0[data-type='circle'] input:active {
+  border-color: #2d87f3;
+  box-shadow: 0 0 2px 2px #2d87f3;
+}
+
+.c0[data-type='circle'] input:checked {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border-color: #2d87f3;
+}
+
+.c0[data-type='circle'] input:checked:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 14px;
+  height: 14px;
+  background-color: #2d87f3;
+  border-radius: 50%;
+  content: '';
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c0[data-type='circle'] label {
+  width: calc(100% - 24px);
+  cursor: inherit;
+  font-weight: 400;
+}
+
+.c0[data-type='circle'][data-disabled='true'] {
+  color: #bfbfbf;
+  cursor: not-allowed;
+}
+
+.c0[data-type='circle'][data-disabled='true'] input {
+  border-color: #bfbfbf;
+}
+
+.c0[data-type='circle'][data-disabled='true'] input:hover {
+  border-color: #bfbfbf;
+  box-shadow: none;
+}
+
+.c0[data-type='rectangle'] input {
+  display: none;
+}
+
+.c0[data-type='rectangle'] input:checked ~ label {
+  border-color: #2d87f3;
+  background-color: #2d87f3;
+  color: #fff;
+  font-weight: 700;
+}
+
+.c0[data-type='rectangle'] label {
+  display: inline-block;
+  width: auto;
+  box-sizing: border-box;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  border: solid 1px #bfbfbf;
+  border-radius: 6px;
+  color: #262626;
+  cursor: pointer;
+  font-weight: 400;
+  text-align: center;
+}
+
+.c0[data-type='rectangle'] label:hover,
+.c0[data-type='rectangle'] label:active {
+  border-color: #2d87f3;
+}
+
+.c0[data-type='rectangle'][data-disabled='true'] input {
+  cursor: not-allowed;
+}
+
+.c0[data-type='rectangle'][data-disabled='true'] label {
+  color: #bfbfbf;
+  cursor: not-allowed;
+}
+
+.c0[data-type='rectangle'][data-disabled='true'] label:hover {
+  border-color: #bfbfbf;
+}
+
+.c0[data-type='rectangle'][data-size='small'] label {
+  height: 32px;
+  padding: 6px 12px;
+  font-size: 13px;
+}
+
+.c0[data-type='rectangle'][data-size='large'] label {
+  height: 48px;
+  padding: 13px 16px;
+  font-size: 14px;
+}
+
+<div
+  class="c0"
+  data-disabled="false"
+  data-size="small"
+  data-type="circle"
+>
+  <input
+    checked=""
+    id="radio-abc"
+    name="radio"
+    type="radio"
+    value="abc"
+  />
+  <label
+    for="radio-abc"
+  >
+    radio
+  </label>
+</div>
+`;

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

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { Props, Radio } from '.'
+
+export default {
+  component: Radio,
+  title: 'Atoms/Radio',
+}
+
+const Template: Story<Props> = (args) => <Radio {...args} />
+
+export const SelectedCircle = Template.bind({})
+
+SelectedCircle.args = {
+  type: 'circle',
+  name: 'radio',
+  label: 'radio',
+  checked: true,
+}
+
+export const UnselectedCircle = Template.bind({})
+
+UnselectedCircle.args = {
+  type: 'circle',
+  name: 'radio',
+  label: 'radio',
+  checked: false,
+}
+
+export const SelectedRectangle = Template.bind({})
+
+SelectedRectangle.args = {
+  type: 'rectangle',
+  name: 'radio',
+  label: 'radio',
+  checked: true,
+}
+
+export const UnselectedRectangle = Template.bind({})
+
+UnselectedRectangle.args = {
+  type: 'rectangle',
+  name: 'radio',
+  label: 'radio',
+  checked: false,
+}

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

@@ -0,0 +1,133 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledRadio = styled.div`
+  &[data-type='circle'] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    input {
+      position: relative;
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+      border: solid 1px ${(props: ThemeProps) => props.theme.colors.gray500};
+      margin-right: 8px;
+      border-radius: 100%;
+      cursor: inherit;
+      transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
+
+      &:hover,
+      &:active {
+        border-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+        box-shadow: 0 0 2px 2px
+          ${(props: ThemeProps) => props.theme.colors.blue600};
+      }
+
+      &:checked {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+        &:after {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 14px;
+          height: 14px;
+          //left: 3px;
+          //position: absolute;
+          //top: 4px;
+          background-color: ${(props: ThemeProps) =>
+            props.theme.colors.primaryBase};
+          border-radius: 50%;
+          content: '';
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+
+    label {
+      width: calc(100% - 24px);
+      cursor: inherit;
+      font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+    }
+
+    &[data-disabled='true'] {
+      color: ${(props: ThemeProps) => props.theme.colors.gray300};
+      cursor: not-allowed;
+      input {
+        border-color: ${(props: ThemeProps) => props.theme.colors.gray300};
+
+        &:hover {
+          border-color: ${(props: ThemeProps) => props.theme.colors.gray300};
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  &[data-type='rectangle'] {
+    input {
+      display: none;
+
+      &:checked ~ label {
+        border-color: ${(props: ThemeProps) => props.theme.colors.blue600};
+        background-color: ${(props: ThemeProps) => props.theme.colors.blue600};
+        color: ${(props: ThemeProps) => props.theme.colors.white};
+        font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
+      }
+    }
+
+    label {
+      display: inline-block;
+      width: auto;
+      box-sizing: border-box;
+      flex-shrink: 0;
+      border: solid 1px ${(props: ThemeProps) => props.theme.colors.gray300};
+      border-radius: 6px;
+      color: ${(props: ThemeProps) => props.theme.colors.gray800};
+      cursor: pointer;
+      font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+      text-align: center;
+
+      &:hover,
+      &:active {
+        border-color: ${(props: ThemeProps) => props.theme.colors.blue600};
+      }
+    }
+
+    &[data-disabled='true'] {
+      input {
+        cursor: not-allowed;
+      }
+
+      label {
+        color: ${(props: ThemeProps) => props.theme.colors.gray300};
+        cursor: not-allowed;
+
+        &:hover {
+          border-color: ${(props: ThemeProps) => props.theme.colors.gray300};
+        }
+      }
+    }
+
+    &[data-size='small'] {
+      label {
+        height: 32px;
+        padding: 6px 12px;
+        font-size: 13px;
+      }
+    }
+
+    &[data-size='large'] {
+      label {
+        height: 48px;
+        padding: 13px 16px;
+        font-size: 14px;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,31 @@
+import 'jest-styled-components'
+
+import React from 'react'
+
+import { cleanup, render } from '@testing-library/react'
+
+import { Radio } from '.'
+import MockTheme from '../../../misc/mockTheme'
+
+afterEach(cleanup)
+
+test('it renders', () => {
+  const radio = render(
+    <MockTheme>
+      <Radio
+        type="circle"
+        onChange={() => console.log('radio')}
+        value="abc"
+        name="radio"
+        label="radio"
+        checked
+      ></Radio>
+    </MockTheme>,
+  )
+
+  const self = radio.container.firstChild
+
+  expect(self).toMatchSnapshot()
+
+  expect(self).toHaveAttribute('data-disabled', 'false')
+})

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

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { StyledRadio } from './index.styled'
+
+export type Props = {
+  type: 'circle' | 'rectangle'
+  size?: 'small' | 'large'
+  label: string
+  name: string
+  value: string
+  checked?: boolean
+  className?: string
+  isDisabled?: boolean
+  onChange: (v: string) => void
+  dataEventCategory?: string
+  dataEventAction?: string
+  dataEventLabel?: string
+}
+
+const Radio = ({
+  type,
+  size = 'small',
+  label,
+  name,
+  checked,
+  value,
+  className,
+  isDisabled = false,
+  onChange,
+  dataEventCategory,
+  dataEventAction,
+  dataEventLabel,
+}: Props) => {
+  const isHasTracking =
+    !!dataEventAction && !!dataEventCategory && !!dataEventLabel
+  const trackingProps = isHasTracking
+    ? {
+        'data-event-category': dataEventCategory,
+        'data-event-action': dataEventAction,
+        'data-event-label': dataEventLabel,
+      }
+    : {}
+  return (
+    <StyledRadio
+      data-disabled={isDisabled}
+      className={className}
+      data-type={type}
+      data-size={size}
+    >
+      <input
+        type="radio"
+        checked={checked}
+        name={name}
+        id={`${name}-${value}`}
+        value={value}
+        onChange={() => onChange(value)}
+        {...trackingProps}
+      />
+      <label htmlFor={`${name}-${value}`} {...trackingProps}>
+        {label}
+      </label>
+    </StyledRadio>
+  )
+}
+
+export { Radio }

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

@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+
+import { action } from '@storybook/addon-actions'
+import { Story } from '@storybook/react/types-6-0'
+
+import { RateStars, Props } from './index'
+
+export default {
+  title: 'Atoms/RateStars',
+  component: RateStars,
+}
+
+const Template: Story<Props> = (args) => <RateStars {...args} />
+
+const TemplateSelectable: Story<Props> = (args) => {
+  const [stars, setStars] = useState(args.star || 0)
+  return <RateStars {...args} star={stars} onSelect={setStars} />
+}
+
+const SharedParameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/oC0v0apXhnjTuqI2FrL2ic/E-Shopping?node-id=2982%3A383525',
+  },
+  docs: {
+    description: {
+      component: 'Rate',
+    },
+  },
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  star: 1,
+  style: {
+    margin: 20,
+  },
+}
+Default.parameters = SharedParameters
+
+export const NotShowEmptyStars = Template.bind({})
+NotShowEmptyStars.args = {
+  star: 2,
+  hideEmptyStars: true,
+  style: {
+    margin: 20,
+  },
+}
+NotShowEmptyStars.parameters = SharedParameters
+
+export const Selectable = TemplateSelectable.bind({})
+Selectable.args = {
+  star: 1,
+  onSelect: action('selected'),
+  style: {
+    margin: 20,
+  },
+}
+Selectable.parameters = SharedParameters
+
+export const TonsOfStars = TemplateSelectable.bind({})
+TonsOfStars.args = {
+  size: 40,
+  star: 1,
+  totalStars: 1000,
+  onSelect: action('selected'),
+  style: {
+    margin: 20,
+  },
+}
+TonsOfStars.parameters = SharedParameters