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

package/src/components/molecules/progressBar/index.tsx

@@ -1,245 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react'
-
-import { throttle } from 'lodash'
-import { useId } from 'react-id-generator'
-
-import {
-  StyledTrackContainer,
-  StyledStep,
-  StyledSlider,
-  StyledTrack,
-  StyledStepLabel,
-  StyledBreadcrumbContainer,
-  StyledBreadcrumbWrapper,
-  StyledDetailStep,
-  StyledDetailStepLabel,
-  StyledDetailStepIndicator,
-  StyledDetailStepIndicatorExternal,
-  StyledDetailStepDescription,
-} from './index.styled'
-
-export type Props = {
-  type: 'breadcrumb' | 'step-track' | 'detail-track'
-  numberOfStep: number
-  activeStep: number
-  labelPrefix: string
-  detailSteps?: { text: string; icon: JSX.Element; description: string }[]
-  onChange?: (s: number) => void
-  className?: string
-  isMobile?: boolean
-}
-
-const ProgressBar = ({
-  type,
-  numberOfStep,
-  activeStep,
-  labelPrefix,
-  detailSteps,
-  className,
-  onChange,
-}: Props) => {
-  const [trackLength, setTrackLength] = useState(0)
-
-  const Track = ({ trackClassName, ...props }: { trackClassName?: string }) => {
-    return (
-      <StyledTrackContainer {...props} className={trackClassName}>
-        <StyledTrack></StyledTrack>
-      </StyledTrackContainer>
-    )
-  }
-
-  // step track
-
-  const Steps = ({
-    trackLength,
-    activeStep,
-    labelPrefix = 'Step',
-    onChange,
-  }: {
-    trackLength: number
-    activeStep: number
-    labelPrefix?: string
-    onChange: (s: number) => void
-  }) => {
-    return (
-      <>
-        {Array.from({ length: numberOfStep }, (v, i) => i).map((_, step) => (
-          <StyledStep
-            data-is-active={step === activeStep}
-            data-label={step}
-            style={{ left: (step * trackLength) / (numberOfStep - 1) }}
-            onClick={() => {
-              onChange && onChange(step)
-            }}
-            key={step}
-          >
-            {step + 1}
-            <StyledStepLabel data-step-passed={step <= activeStep}>
-              {labelPrefix + ' ' + (step + 1)}
-            </StyledStepLabel>
-          </StyledStep>
-        ))}
-      </>
-    )
-  }
-
-  const stepTrack = (
-    <StyledSlider className={className + ' progress-bar'}>
-      <Track />
-      <Steps
-        trackLength={trackLength}
-        activeStep={activeStep}
-        labelPrefix={labelPrefix}
-        onChange={onChange}
-      />
-    </StyledSlider>
-  )
-
-  // breadcrumb
-
-  const breadcrumbIcon = (
-    <svg
-      data-name="Layer 1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 5.5 9.5"
-    >
-      <title>{'chevron-right'}</title>
-      <path
-        d="M.75 8.75l4-4-4-4"
-        fill="none"
-        // stroke="#000"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      />
-    </svg>
-  )
-
-  const breadcrumb = (
-    <StyledBreadcrumbContainer>
-      {detailSteps &&
-        Array.from({ length: detailSteps.length }, (v, i) => i).map(
-          (_, step_index) => (
-            <StyledBreadcrumbWrapper
-              key={step_index}
-              data-selected={step_index === activeStep}
-              onClick={() => {
-                onChange && onChange(step_index)
-              }}
-            >
-              {detailSteps[step_index]?.text}{' '}
-              {step_index < detailSteps.length - 1 && breadcrumbIcon}
-            </StyledBreadcrumbWrapper>
-          ),
-        )}
-    </StyledBreadcrumbContainer>
-  )
-
-  // detail track
-
-  const DetailStepsGroup = ({
-    detailSteps,
-    activeStep,
-    onChange,
-  }: {
-    detailSteps: { text: string; icon: JSX.Element; description: string }[]
-    activeStep: number
-    onChange: (s: number) => void
-  }) => {
-    const idList = useId(detailSteps.length)
-    return (
-      <>
-        {Array.from({ length: detailSteps.length }, (v, i) => i).map(
-          (step, step_index) => (
-            <StyledDetailStep
-              key={idList[step_index]}
-              style={{
-                left: (100 / detailSteps.length) * step_index + '%',
-                width: 100 / detailSteps.length + '%',
-              }}
-              onClick={() => {
-                onChange && onChange(step_index)
-              }}
-            >
-              {detailSteps[step_index].icon ? (
-                <StyledDetailStepIndicatorExternal
-                  onClick={() => {
-                    onChange && onChange(step_index)
-                  }}
-                >
-                  {detailSteps[step_index].icon}
-                </StyledDetailStepIndicatorExternal>
-              ) : (
-                <StyledDetailStepIndicator
-                  data-is-active={step_index === activeStep}
-                  data-label={step}
-                  onClick={() => {
-                    onChange && onChange(step_index)
-                  }}
-                  key={step_index}
-                >
-                  {step_index + 1}
-                </StyledDetailStepIndicator>
-              )}
-              <StyledDetailStepLabel
-                data-step-passed={step_index < activeStep + 1}
-              >
-                {detailSteps[step_index].text}
-                <StyledDetailStepDescription>
-                  {detailSteps[step_index].description}
-                </StyledDetailStepDescription>
-              </StyledDetailStepLabel>
-              {step_index < detailSteps.length - 1 && (
-                <Track
-                  data-step-passed={step_index < activeStep}
-                  trackClassName={'progress-track'}
-                  data-track-type="detail"
-                />
-              )}
-            </StyledDetailStep>
-          ),
-        )}
-      </>
-    )
-  }
-
-  const detailTrack = (
-    <StyledSlider className={className + ' progress-bar'}>
-      <DetailStepsGroup
-        activeStep={activeStep}
-        detailSteps={detailSteps}
-        onChange={onChange}
-      />
-    </StyledSlider>
-  )
-
-  const resizeTrack = useCallback(
-    throttle(() => {
-      const progressTrack = document.querySelector(
-        '.progress-bar',
-      ) as HTMLElement
-
-      progressTrack && setTrackLength(progressTrack.offsetWidth)
-    }, 1000),
-    [],
-  )
-
-  useEffect(() => {
-    const track = document.querySelector('.progress-bar') as HTMLElement
-    setTrackLength(track?.offsetWidth)
-
-    window.addEventListener('resize', resizeTrack)
-
-    return () => {
-      window.removeEventListener('resize', resizeTrack)
-    }
-  }, [])
-
-  return (
-    (type === 'step-track' && stepTrack) ||
-    (type === 'breadcrumb' && breadcrumb) ||
-    (type === 'detail-track' && detailTrack)
-  )
-}
-
-export { ProgressBar }

package/src/components/molecules/radioGroup/__snapshots__/index.test.tsx.snap

@@ -1,290 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c1[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;
-}
-
-.c1[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;
-}
-
-.c1[data-type='circle'] input:hover,
-.c1[data-type='circle'] input:active {
-  border-color: #2d87f3;
-  box-shadow: 0 0 2px 2px #2d87f3;
-}
-
-.c1[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;
-}
-
-.c1[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%);
-}
-
-.c1[data-type='circle'] label {
-  width: calc(100% - 24px);
-  cursor: inherit;
-  font-weight: 400;
-}
-
-.c1[data-type='circle'][data-disabled='true'] {
-  color: #bfbfbf;
-  cursor: not-allowed;
-}
-
-.c1[data-type='circle'][data-disabled='true'] input {
-  border-color: #bfbfbf;
-}
-
-.c1[data-type='circle'][data-disabled='true'] input:hover {
-  border-color: #bfbfbf;
-  box-shadow: none;
-}
-
-.c1[data-type='rectangle'] input {
-  display: none;
-}
-
-.c1[data-type='rectangle'] input:checked ~ label {
-  border-color: #2d87f3;
-  background-color: #2d87f3;
-  color: #fff;
-  font-weight: 700;
-}
-
-.c1[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;
-}
-
-.c1[data-type='rectangle'] label:hover,
-.c1[data-type='rectangle'] label:active {
-  border-color: #2d87f3;
-}
-
-.c1[data-type='rectangle'][data-disabled='true'] input {
-  cursor: not-allowed;
-}
-
-.c1[data-type='rectangle'][data-disabled='true'] label {
-  color: #bfbfbf;
-  cursor: not-allowed;
-}
-
-.c1[data-type='rectangle'][data-disabled='true'] label:hover {
-  border-color: #bfbfbf;
-}
-
-.c1[data-type='rectangle'][data-size='small'] label {
-  height: 32px;
-  padding: 6px 12px;
-  font-size: 13px;
-}
-
-.c1[data-type='rectangle'][data-size='large'] label {
-  height: 48px;
-  padding: 13px 16px;
-  font-size: 14px;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c0[data-direction='vertical'] {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c0[data-direction='vertical'] div[data-type='circle'] {
-  margin-bottom: 20px;
-}
-
-.c0[data-direction='vertical'] div[data-type='rectangle'] {
-  margin-bottom: 20px;
-}
-
-.c0[data-direction='horizontal'] {
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.c0[data-direction='horizontal'][data-group='group1'] div[data-type='rectangle'] {
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.c0[data-direction='horizontal'][data-group='group1'] div[data-type='rectangle']:first-child label {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
-.c0[data-direction='horizontal'][data-group='group1'] div[data-type='rectangle']:last-child label {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-.c0[data-direction='horizontal'][data-group='group1'] div[data-type='rectangle']:not(:last-child) label {
-  border-right: unset;
-}
-
-.c0[data-direction='horizontal'][data-group='group1'] div[data-type='rectangle'] label {
-  border-radius: unset;
-}
-
-.c0[data-direction='horizontal'][data-group='group2'] div[data-type='rectangle'] {
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
-
-.c0[data-direction='horizontal'] div[data-type='circle'] {
-  margin-right: 25px;
-}
-
-.c0[data-direction='horizontal'] div[data-type='rectangle'] {
-  margin-bottom: 20px;
-}
-
-<div
-  class="c0"
-  data-direction="vertical"
-  data-group="group1"
->
-  <div
-    class="c1"
-    data-disabled="true"
-    data-size="small"
-    data-type="circle"
-  >
-    <input
-      checked=""
-      id="dropdown1-1"
-      name="dropdown1"
-      type="radio"
-      value="1"
-    />
-    <label
-      for="dropdown1-1"
-    >
-      option 1
-    </label>
-  </div>
-  <div
-    class="c1"
-    data-disabled="true"
-    data-size="small"
-    data-type="circle"
-  >
-    <input
-      id="dropdown1-2"
-      name="dropdown1"
-      type="radio"
-      value="2"
-    />
-    <label
-      for="dropdown1-2"
-    >
-      option 2
-    </label>
-  </div>
-  <div
-    class="c1"
-    data-disabled="true"
-    data-size="small"
-    data-type="circle"
-  >
-    <input
-      id="dropdown1-3"
-      name="dropdown1"
-      type="radio"
-      value="3"
-    />
-    <label
-      for="dropdown1-3"
-    >
-      option 3
-    </label>
-  </div>
-  <div
-    class="c1"
-    data-disabled="true"
-    data-size="small"
-    data-type="circle"
-  >
-    <input
-      id="dropdown1-4"
-      name="dropdown1"
-      type="radio"
-      value="4"
-    />
-    <label
-      for="dropdown1-4"
-    >
-      option 4
-    </label>
-  </div>
-</div>
-`;

package/src/components/molecules/radioGroup/index.stories.tsx

@@ -1,131 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Props, RadioGroup } from '.'
-
-export default {
-  component: RadioGroup,
-  title: 'Molecules/RadioGroup',
-}
-
-const Template: Story<Props> = (args) => <RadioGroup {...args} />
-
-export const CheckedRadioGroup = Template.bind({})
-
-CheckedRadioGroup.args = {
-  options: [
-    {
-      label: 'option 1',
-      value: '1',
-      renderActivated: () => {
-        return <p>Render below the option</p>
-      },
-    },
-    {
-      label: 'option 2',
-      value: '2',
-    },
-    {
-      label: 'option 3',
-      value: '3',
-    },
-    {
-      label: 'option 4',
-      value: '4',
-    },
-  ],
-  value: '1',
-  isDisabled: true,
-  id: 'radioGroup',
-  type: 'circle',
-  direction: 'vertical',
-  size: 'small',
-  group: 'group1',
-}
-
-export const UncheckedRadioGroup = Template.bind({})
-
-UncheckedRadioGroup.args = {
-  options: [
-    {
-      label: 'option 1',
-      value: '1',
-    },
-    {
-      label: 'option 2',
-      value: '2',
-    },
-    {
-      label: 'option 3',
-      value: '3',
-    },
-    {
-      label: 'option 4',
-      value: '4',
-    },
-  ],
-  id: 'radioGroup',
-  type: 'circle',
-  direction: 'horizontal',
-  size: 'small',
-  group: 'group1',
-}
-
-export const CheckedRectangleGroup = Template.bind({})
-
-CheckedRectangleGroup.args = {
-  options: [
-    {
-      label: 'option 1',
-      value: '1',
-    },
-    {
-      label: 'option 2',
-      value: '2',
-    },
-    {
-      label: 'option 3',
-      value: '3',
-    },
-    {
-      label: 'option 4',
-      value: '4',
-    },
-  ],
-  value: '1',
-  isDisabled: true,
-  id: 'radioGroup',
-  type: 'rectangle',
-  direction: 'horizontal',
-  size: 'small',
-  group: 'group1',
-}
-
-export const UncheckedRectangleGroup = Template.bind({})
-
-UncheckedRectangleGroup.args = {
-  options: [
-    {
-      label: 'option 1',
-      value: '1',
-    },
-    {
-      label: 'option 2',
-      value: '2',
-    },
-    {
-      label: 'option 3',
-      value: '3',
-    },
-    {
-      label: 'option 4',
-      value: '4',
-    },
-  ],
-  id: 'radioGroup',
-  type: 'rectangle',
-  direction: 'horizontal',
-  size: 'small',
-  group: 'group2',
-}