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

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

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

@@ -0,0 +1,290 @@
+// 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

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