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

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

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { Icon, IconProps } from './index'
+
+export default {
+  component: Icon,
+  title: 'Atoms/Icon',
+}
+
+const Template: Story<IconProps> = (args) => (
+  <div>
+    <Icon.Ask {...args} />
+    <Icon.BarChart {...args} />
+    <Icon.Booking {...args} />
+    <Icon.Bookmark {...args} />
+    <Icon.Community {...args} />
+    <Icon.Family {...args} />
+    <Icon.Font {...args} />
+    <Icon.Heart {...args} />
+    <Icon.Home {...args} />
+    <Icon.Like {...args} />
+    <Icon.MyCommunity {...args} />
+    <Icon.Recalculate {...args} />
+    <Icon.Scale {...args} />
+    <Icon.Share {...args} />
+    <Icon.Stethoscope {...args} />
+  </div>
+)
+
+export const Normal = Template.bind({})
+
+Normal.args = {
+  size: 24,
+}
+
+export const Active = Template.bind({})
+
+Active.args = {
+  isActive: true,
+}
+
+const SpecialTemplate: Story<IconProps> = (args) => (
+  <div>
+    <Icon.EditSpecial {...args} />
+    <Icon.PlusSpecial {...args} />
+  </div>
+)
+export const Special = SpecialTemplate.bind({})

package/src/components/atoms/icons/index.ts

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import Ask from './Ask'
+import BarChart from './BarChart'
+import Booking from './Booking'
+import Bookmark from './Bookmark'
+import Community from './Community'
+import EditSpecial from './EditSpecial'
+import Family from './Family'
+import Font from './Font'
+import Heart from './Heart'
+import Home from './Home'
+import Like from './Like'
+import MyCommunity from './MyCommunity'
+import PlusSpecial from './PlusSpecial'
+import Recalculate from './Recalculate'
+import Scale from './Scale'
+import Share from './Share'
+import Stethoscope from './Stethoscope'
+
+export type IconProps = {
+  size?: number
+  color?: string
+  activeColor?: string
+  isActive?: boolean
+} & React.HTMLAttributes<HTMLOrSVGElement>
+
+export const Icon = {
+  Ask,
+  BarChart,
+  Booking,
+  Bookmark,
+  Community,
+  EditSpecial,
+  Family,
+  Font,
+  Heart,
+  Home,
+  Like,
+  MyCommunity,
+  PlusSpecial,
+  Recalculate,
+  Scale,
+  Share,
+  Stethoscope,
+}

package/src/components/atoms/index.ts

@@ -0,0 +1,33 @@
+export { Alert } from './alert'
+export { Avatar } from './avatar'
+export { Badge } from './badge'
+export { BorderHeading } from './borderHeading'
+export { Button } from './button'
+export { Divider } from './divider'
+export { FileDropdown } from './fileDropdown'
+export { Flag } from './flag'
+export type { FlagCountryType } from './flag'
+export { Grid } from './grid'
+export { Heading } from './heading'
+export { Input } from './input'
+export { Label } from './label'
+export { Logo } from './logo'
+export { Pagination } from './pagination'
+export { PureInput } from './pureInput'
+export { Radio } from './radio'
+export { Shadow } from './shadow'
+export { Slider } from './slider'
+export { Tag } from './tag'
+export { Text } from './text'
+export type { TextSize, TextType } from './text'
+export { Toggle } from './toggle'
+export { UnderlinedLink } from './underlinedLink'
+export { Uploader } from './uploader'
+export { TextArea } from './textArea'
+export { Container } from './container'
+export { Checkbox } from './checkbox'
+export { TextDivider } from './textDivider'
+export { RateStars } from './rateStars'
+export { Icon } from './icons'
+export type { IconProps } from './icons'
+export { Progress } from './progress'

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

@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders 1`] = `
+.c1[data-size='label1'] {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.c1[data-size='label2'] {
+  font-size: 13px;
+  line-height: 19px;
+}
+
+.c0 {
+  position: relative;
+  width: 100%;
+}
+
+.c0[data-has-error] input {
+  border-color: #e64728;
+}
+
+.c0 input {
+  width: 100%;
+  padding: 12px 16px;
+  border: solid 1px #d9d9d9;
+  border-radius: 6px;
+}
+
+.c0 input:active,
+.c0 input:focus,
+.c0 input.focused {
+  border-color: #2d87f3;
+  box-shadow: 0px 0px 2px 2px #91caff;
+}
+
+.c0 input:disabled {
+  background-color: #f2f2f2;
+  cursor: not-allowed;
+}
+
+.c0[data-has-action-icon] input {
+  padding: 12px 48px 12px 16px;
+}
+
+.c0[data-has-display-icon] input {
+  padding: 12px 16px 12px 48px;
+}
+
+.c0[data-has-action-icon][data-has-display-icon] input {
+  padding: 12px 48px;
+}
+
+.c0[data-size='lg'] input {
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.c0[data-size='md'] input {
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.c0[data-size='sm'] input {
+  font-weight: 400;
+  line-height: 20px;
+}
+
+@media (max-width:767px) {
+  .c0[data-size='lg'] input {
+    font-size: 22px;
+    line-height: 1.2;
+  }
+}
+
+@media (min-width:768px) {
+  .c0[data-size='lg'] input {
+    font-size: 26px;
+    line-height: 1.2;
+  }
+}
+
+@media (max-width:767px) {
+  .c0[data-size='md'] input {
+    font-size: 14px;
+    line-height: 1.2;
+  }
+}
+
+@media (min-width:768px) {
+  .c0[data-size='md'] input {
+    font-size: 16px;
+    line-height: 1.2;
+  }
+}
+
+@media (max-width:767px) {
+  .c0[data-size='sm'] input {
+    font-size: 13px;
+    line-height: 1.5;
+  }
+}
+
+@media (min-width:768px) {
+  .c0[data-size='sm'] input {
+    font-size: 13px;
+    line-height: 1.5;
+  }
+}
+
+<div
+  class="c0"
+  data-size="md"
+>
+  <label
+    class="c1 inputLabel"
+    data-size="label2"
+    for="test-input"
+  >
+    test input
+  </label>
+  <div
+    style="position: relative;"
+  >
+    <input
+      aria-label="text"
+      autocomplete="off"
+      id="test-input"
+      inputmode="text"
+      name="test-input"
+      pattern=".*"
+      type="text"
+      value="test"
+    />
+  </div>
+</div>
+`;

package/src/components/atoms/input/delete.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L8 6.58579L10.2929 4.29289C10.6834 3.90237 11.3166 3.90237 11.7071 4.29289C12.0976 4.68342 12.0976 5.31658 11.7071 5.70711L9.41421 8L11.7071 10.2929C12.0976 10.6834 12.0976 11.3166 11.7071 11.7071C11.3166 12.0976 10.6834 12.0976 10.2929 11.7071L8 9.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L6.58579 8L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#BFBFBF"/>
+</svg>

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

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { Input, Props } from '.'
+import DeleteIcon from './delete.svg'
+
+export default {
+  component: Input,
+  title: 'Atoms/Input',
+}
+
+const Template: Story<Props> = (args) => <Input {...args} />
+
+export const Normal = Template.bind({})
+Normal.args = {
+  name: 'normal',
+  label: 'Label',
+  placeholder: 'Placeholder',
+}
+
+export const NoLabel = Template.bind({})
+NoLabel.args = {
+  name: 'nolabel',
+  placeholder: 'Placeholder',
+}
+
+export const WithLeftIcon = Template.bind({})
+WithLeftIcon.args = {
+  name: 'withlefticon',
+  label: 'Label',
+  placeholder: 'Placeholder',
+  displayIcon: <img src={DeleteIcon} />,
+}
+
+export const WithRightIcon = Template.bind({})
+WithRightIcon.args = {
+  name: 'withrighticon',
+  label: 'Label',
+  placeholder: 'Placeholder',
+  actionIcon: <img src={DeleteIcon} />,
+}
+
+export const WithErrorMessage = Template.bind({})
+WithErrorMessage.args = {
+  name: 'witherrormessage',
+  label: 'Label',
+  placeholder: 'Placeholder',
+  errorMessage: 'Error message',
+}

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

@@ -0,0 +1,124 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+export const StyledInput = styled.div`
+  position: relative;
+  width: 100%;
+
+  &[data-has-error] {
+    input {
+      border-color: ${(props: ThemeProps) => props.theme.colors.red700};
+    }
+  }
+
+  input {
+    width: 100%;
+    padding: 12px 16px;
+    border: solid 1px ${(props: ThemeProps) => props.theme.colors.gray200};
+    border-radius: 6px;
+
+    &:active,
+    &:focus,
+    &.focused {
+      border-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+      box-shadow: 0px 0px 2px 2px
+        ${(props: ThemeProps) => props.theme.colors.blue200};
+    }
+
+    &:disabled {
+      background-color: ${(props: ThemeProps) => props.theme.colors.gray100};
+      cursor: not-allowed;
+    }
+  }
+
+  &[data-has-action-icon] {
+    input {
+      padding: 12px 48px 12px 16px;
+    }
+  }
+  &[data-has-display-icon] {
+    input {
+      padding: 12px 16px 12px 48px;
+    }
+  }
+
+  &[data-has-action-icon][data-has-display-icon] {
+    input {
+      padding: 12px 48px;
+    }
+  }
+
+  &[data-size='lg'] {
+    input {
+      font-size: 16px;
+      font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+      ${MediaQueries.mbDown} {
+        font-size: 22px;
+        line-height: 1.2;
+      }
+
+      ${MediaQueries.mbUp} {
+        font-size: 26px;
+        line-height: 1.2;
+      }
+    }
+  }
+  &[data-size='md'] {
+    input {
+      font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+      line-height: 22px;
+      ${MediaQueries.mbDown} {
+        font-size: 14px;
+        line-height: 1.2;
+      }
+
+      ${MediaQueries.mbUp} {
+        font-size: 16px;
+        line-height: 1.2;
+      }
+    }
+  }
+  &[data-size='sm'] {
+    input {
+      font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+      line-height: 20px;
+      ${MediaQueries.mbDown} {
+        font-size: 13px;
+        line-height: 1.5;
+      }
+
+      ${MediaQueries.mbUp} {
+        font-size: 13px;
+        line-height: 1.5;
+      }
+    }
+  }
+`
+export const StyledInputLabel = styled.label`
+  display: inline-block;
+  margin-bottom: 4px;
+  color: ${(props: ThemeProps) => props.theme.colors.gray600};
+  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
+`
+
+export const StyledErrorLabel = styled.label`
+  color: ${(props: ThemeProps) => props.theme.colors.red700};
+  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+`
+
+export const StyledActionIcon = styled.div`
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  cursor: pointer;
+  transform: translateY(-50%);
+`
+export const StyledDisplayIcon = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 16px;
+  display: inline-flex;
+  cursor: default;
+  transform: translateY(-50%);
+`

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

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

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

@@ -0,0 +1,140 @@
+import React, {
+  DetailedHTMLProps,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  useMemo,
+} from 'react'
+
+import { GATrackingCode } from 'care/components/organisms/bookingSearchBar/types'
+import { CSSProperties } from 'styled-components'
+
+import { Label } from '../label'
+import {
+  StyledInput,
+  StyledErrorLabel,
+  StyledActionIcon,
+  StyledDisplayIcon,
+} from './index.styled'
+
+export type Props = {
+  value: string
+  name: string
+  size: 'lg' | 'md' | 'sm'
+  readOnly?: boolean
+  isNumerousKeyboard?: boolean
+  autoComplete?: 'on' | 'off'
+  errorMessage?: string
+  actionIcon?: JSX.Element
+  onActionClick?: () => void
+  displayIcon?: JSX.Element
+  label?: string | JSX.Element
+  onChange?: (v: string) => void
+  isDisabled?: boolean
+  CustomInput?: JSX.Element
+  type?:
+    | 'none'
+    | 'text'
+    | 'tel'
+    | 'url'
+    | 'email'
+    | 'numeric'
+    | 'decimal'
+    | 'search'
+    | 'number'
+  inputClassName?: string
+  trackingAttributes?: GATrackingCode
+  enterKeyHint?: React.InputHTMLAttributes<HTMLInputElement>['enterKeyHint']
+} & Omit<HTMLAttributes<HTMLInputElement>, 'onChange' | 'name' | 'value'>
+
+const Input = ({
+  name,
+  value,
+  errorMessage,
+  isNumerousKeyboard = false,
+  actionIcon: ActionIcon,
+  displayIcon: DisplayIcon,
+  onActionClick,
+  label,
+  className,
+  onChange,
+  isDisabled,
+  CustomInput,
+  size,
+  style,
+  autoComplete = 'off',
+  type = 'text',
+  inputClassName,
+  trackingAttributes,
+  enterKeyHint,
+  ...rest
+}: Props) => {
+  const gaAttributes = useMemo(() => {
+    if (trackingAttributes) {
+      return {
+        'data-event-category': trackingAttributes.dataEventCategory,
+        'data-event-action': trackingAttributes.dataEventAction,
+        'data-event-label': trackingAttributes.dataEventLabel,
+      }
+    } else {
+      return {}
+    }
+  }, [trackingAttributes])
+
+  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}
+            onChange={(e) => onChange && onChange(e.target.value)}
+            type={type}
+            aria-label={type}
+            value={value}
+            disabled={isDisabled}
+            autoComplete={autoComplete}
+            inputMode={
+              isNumerousKeyboard || type === 'number' ? 'numeric' : type
+            }
+            pattern={isNumerousKeyboard ? '[0-9]*' : '.*'}
+            className={inputClassName}
+            enterKeyHint={enterKeyHint}
+            {...gaAttributes}
+            {...rest}
+          />
+        )}
+        {DisplayIcon && (
+          <StyledDisplayIcon className="displayIcon">
+            {DisplayIcon}
+          </StyledDisplayIcon>
+        )}
+        {ActionIcon && (
+          <StyledActionIcon className="actionIcon" onClick={onActionClick}>
+            {ActionIcon}
+          </StyledActionIcon>
+        )}
+      </div>
+      {errorMessage && errorMessage.length > 0 && (
+        <StyledErrorLabel className="errorLabel">
+          {errorMessage}
+        </StyledErrorLabel>
+      )}
+    </StyledInput>
+  )
+}
+
+export { Input }

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders 1`] = `
+.c0[data-size='label1'] {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.c0[data-size='label2'] {
+  font-size: 13px;
+  line-height: 19px;
+}
+
+<label
+  class="c0"
+  data-size="label2"
+  for="nothing"
+>
+  Hello World
+</label>
+`;

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

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { Label, Props } from '.'
+
+export default {
+  component: Label,
+  title: 'Atoms/Label',
+}
+
+const Template: Story<Props> = (args) => <Label {...args}>Hello world</Label>
+
+export const Normal = Template.bind({})
+
+Normal.args = {}

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

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { render, cleanup } from '@testing-library/react'
+import 'jest-styled-components'
+
+import { Label } from '.'
+import MockTheme from '../../../misc/mockTheme'
+
+afterEach(cleanup)
+
+test('it renders', () => {
+  const label = render(
+    <MockTheme>
+      <Label size="label2" htmlFor="nothing">
+        Hello World
+      </Label>
+    </MockTheme>,
+  )
+
+  const self = label.container.firstChild
+
+  expect(self).toMatchSnapshot()
+
+  expect(self).toHaveTextContent('Hello World')
+})