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

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

@@ -1,45 +0,0 @@
-import React from 'react'
-
-import { StyledPopup, StyledPopupWrapper } from './index.styled'
-
-export type Props = {
-  type: 'lead' | 'form' | 'confirm' | 'profile'
-  closeIcon?: JSX.Element
-  isOpen: boolean
-  onClose: () => void
-  children?: any
-  className?: string
-  enableAnimation?: boolean
-}
-
-const Popup = ({
-  type = 'lead',
-  closeIcon,
-  isOpen = true,
-  onClose,
-  children,
-  className = '',
-  enableAnimation = true,
-}: Props) => {
-  return (
-    <>
-      <StyledPopup
-        data-open={isOpen}
-        data-type={type}
-        data-animation={enableAnimation}
-      >
-        <div className={`${className || ''} popup-content`}>
-          {!!closeIcon && (
-            <div className="close-button" onClick={onClose}>
-              {closeIcon}
-            </div>
-          )}
-          {children}
-        </div>
-      </StyledPopup>
-      <StyledPopupWrapper data-open={isOpen} onClick={onClose} />
-    </>
-  )
-}
-
-export { Popup }

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

@@ -1,167 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  position: relative;
-  width: 100%;
-}
-
-.c0 div[role='slider'] {
-  -webkit-text-size-adjust: none;
-  -webkit-user-select: none;
-}
-
-.c0 div[role='slider']:focus {
-  outline: none;
-}
-
-.c3 {
-  position: absolute;
-  top: 19px;
-  width: 24px;
-  height: 24px;
-  color: #fff;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  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;
-  cursor: pointer;
-  background-color: #fff;
-  color: #bfbfbf;
-  border: 1px solid #bfbfbf;
-}
-
-.c3[data-is-active='true'] {
-  background-color: #2d87f3;
-  color: #fff;
-  border: none;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  height: 36px;
-}
-
-.c1[data-track-type='detail'] {
-  margin-top: 0;
-}
-
-.c1[data-track-type='detail'][data-step-passed='true'] > div {
-  border: 1px solid #2d87f3;
-  height: 0px;
-}
-
-.c1[data-track-type='detail'] > div {
-  border: 1px solid #d9d9d9;
-  height: 0px;
-}
-
-.c2 {
-  width: 100%;
-  height: 5px;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  border-radius: 4px;
-  background-color: #d9d9d9;
-}
-
-.c4 {
-  position: absolute;
-  top: 32px;
-  min-width: 100px;
-  text-align: center;
-  color: #737373;
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.c4[data-step-passed='true'] {
-  color: #262626;
-}
-
-<div
-  class="c0 custom-class progress-bar"
->
-  <div
-    class="c1"
-  >
-    <div
-      class="c2"
-    />
-  </div>
-  <div
-    class="c3"
-    data-is-active="false"
-    data-label="0"
-    style="left: 0px;"
-  >
-    1
-    <div
-      class="c4"
-      data-step-passed="true"
-    >
-      Step 1
-    </div>
-  </div>
-  <div
-    class="c3"
-    data-is-active="true"
-    data-label="1"
-    style="left: 0px;"
-  >
-    2
-    <div
-      class="c4"
-      data-step-passed="true"
-    >
-      Step 2
-    </div>
-  </div>
-  <div
-    class="c3"
-    data-is-active="false"
-    data-label="2"
-    style="left: 0px;"
-  >
-    3
-    <div
-      class="c4"
-      data-step-passed="false"
-    >
-      Step 3
-    </div>
-  </div>
-  <div
-    class="c3"
-    data-is-active="false"
-    data-label="3"
-    style="left: 0px;"
-  >
-    4
-    <div
-      class="c4"
-      data-step-passed="false"
-    >
-      Step 4
-    </div>
-  </div>
-</div>
-`;

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

@@ -1,72 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Props, ProgressBar } from '.'
-
-export default {
-  component: ProgressBar,
-  title: 'Molecules/ProgressBar',
-}
-
-const Template: Story<Props> = (args) => <ProgressBar {...args} />
-
-export const Normal = Template.bind({})
-
-const icon = (
-  <svg
-    data-name="Layer 1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 19.6 19.6"
-  >
-    <title>{'Component 3'}</title>
-    <path
-      d="M7.91 15.8a2.61 2.61 0 00-.11.75 2.14 2.14 0 002 2.25 2.14 2.14 0 002-2.25 2.61 2.61 0 00-.11-.75"
-      fill="none"
-      stroke="#262626"
-      strokeWidth={1.6}
-    />
-    <path
-      d="M15.8 6.8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      stroke="#262626"
-      strokeWidth={1.6}
-    />
-  </svg>
-)
-
-Normal.args = {
-  type: 'detail-track',
-  numberOfStep: 4,
-  labelPrefix: 'Step',
-  detailSteps: [
-    {
-      text: 'fyjfhj fhhchgchg',
-      icon,
-      description:
-        'descrip tion descr iption description desc ription descrip tion descript ion description 1',
-    },
-    {
-      text: 'Waiting',
-      icon,
-      description: 'description',
-    },
-    {
-      text: 'In progress',
-      icon,
-      description: 'description',
-    },
-    {
-      text: 'Waiting',
-      icon,
-      description: 'description',
-    },
-  ],
-  activeStep: 1,
-  className: 'custom-class',
-  onChange: (step) => {
-    console.log(step)
-  },
-}

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

@@ -1,182 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledSlider = styled.div`
-  position: relative;
-  width: 100%;
-
-  & div[role='slider'] {
-    -webkit-text-size-adjust: none;
-    -webkit-user-select: none;
-    &:focus {
-      outline: none;
-    }
-  }
-`
-
-export const StyledStep = styled.div`
-  position: absolute;
-  top: 19px;
-  width: 24px;
-  height: 24px;
-  color: ${(props: ThemeProps) => props.theme.colors.white};
-  border: 2px solid ${(props: ThemeProps) => props.theme.colors.white};
-  border-radius: 50%;
-  transform: translateY(-50%) translateX(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-  color: ${(props: ThemeProps) => props.theme.colors.gray300};
-  border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray300};
-
-  &[data-is-active='true'] {
-    background-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-    color: ${(props: ThemeProps) => props.theme.colors.white};
-    border: none;
-  }
-`
-
-export const StyledTrackContainer = styled.div`
-  display: flex;
-  width: 100%;
-  height: 36px;
-
-  &[data-track-type='detail'] {
-    margin-top: 0;
-  }
-
-  &[data-track-type='detail'][data-step-passed='true'] > div {
-    border: 1px solid ${(props: ThemeProps) => props.theme.colors.primaryBase};
-    height: 0px;
-  }
-
-  &[data-track-type='detail'] > div {
-    border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
-    height: 0px;
-  }
-`
-
-export const StyledTrack = styled.div`
-  width: 100%;
-  height: 5px;
-  align-self: center;
-  border-radius: 4px;
-  background-color: ${(props: ThemeProps) => props.theme.colors.gray200};
-`
-
-export const StyledStepLabel = styled.div`
-  position: absolute;
-  top: 32px;
-  min-width: 100px;
-  text-align: center;
-  color: ${(props: ThemeProps) => props.theme.colors.gray500};
-  font-size: ${(props: ThemeProps) => props.theme.sizes.fsCaption2};
-  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-
-  &[data-step-passed='true'] {
-    color: ${(props: ThemeProps) => props.theme.colors.gray800};
-  }
-`
-
-export const StyledBreadcrumbContainer = styled.div`
-  display: flex;
-  align-items: center;
-`
-
-export const StyledBreadcrumbWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: ${(props: ThemeProps) => props.theme.sizes.fsCaption2};
-  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-  color: ${(props: ThemeProps) => props.theme.colors.gray500};
-  cursor: pointer;
-
-  & > svg {
-    height: 10px;
-    width: 10px;
-    margin: 0 14px;
-  }
-
-  & > svg > path {
-    stroke: ${(props: ThemeProps) => props.theme.colors.gray500};
-  }
-
-  &[data-selected='true'] {
-    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-  }
-`
-
-export const StyledDetailStep = styled.div`
-  position: absolute;
-  left: 0;
-  top: 19px;
-  height: 24px;
-  cursor: pointer;
-
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-
-  padding: 8px;
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-`
-
-export const StyledDetailStepIndicator = styled.div`
-  min-width: 24px;
-  height: 24px;
-  border: 2px solid ${(props: ThemeProps) => props.theme.colors.white};
-  border-radius: 50%;
-  margin-right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-  color: ${(props: ThemeProps) => props.theme.colors.gray300};
-  border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray300};
-
-  &[data-is-active='true'] {
-    border: none;
-    background-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-    color: ${(props: ThemeProps) => props.theme.colors.white};
-  }
-`
-
-export const StyledDetailStepIndicatorExternal = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  & > svg {
-    height: 20px;
-    width: 20px;
-    margin-right: 8px;
-
-    & > path {
-      stroke: ${(props: ThemeProps) => props.theme.colors.gray500};
-    }
-  }
-`
-
-export const StyledDetailStepLabel = styled.div`
-  color: ${(props: ThemeProps) => props.theme.colors.gray400};
-  font-size: ${(props: ThemeProps) => props.theme.sizes.fsCaption2};
-  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-  margin-right: 8px;
-  flex: 0 0 auto;
-
-  &[data-step-passed='true'] {
-    color: ${(props: ThemeProps) => props.theme.colors.gray800};
-  }
-`
-export const StyledDetailStepDescription = styled.div`
-  position: absolute;
-  top: 32px;
-  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-  color: ${(props: ThemeProps) => props.theme.colors.gray400};
-  padding-right: 16px;
-`

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

@@ -1,75 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { ProgressBar } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-const icon = (
-  <svg
-    data-name="Layer 1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 19.6 19.6"
-  >
-    <title>{'Component 3'}</title>
-    <path
-      d="M7.91 15.8a2.61 2.61 0 00-.11.75 2.14 2.14 0 002 2.25 2.14 2.14 0 002-2.25 2.61 2.61 0 00-.11-.75"
-      fill="none"
-      stroke="#262626"
-      strokeWidth={1.6}
-    />
-    <path
-      d="M15.8 6.8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      stroke="#262626"
-      strokeWidth={1.6}
-    />
-  </svg>
-)
-
-test('it renders', () => {
-  const progressBar = render(
-    <MockTheme>
-      <ProgressBar
-        type={'step-track'}
-        numberOfStep={4}
-        labelPrefix="Step"
-        detailSteps={[
-          {
-            text: 'fyjfhj fhhchgchg',
-            icon,
-            description: 'description',
-          },
-          {
-            text: 'Waiting',
-            icon,
-            description: 'description',
-          },
-          {
-            text: 'In progress',
-            icon,
-            description: 'description',
-          },
-          {
-            text: 'Waiting',
-            icon,
-            description: 'description',
-          },
-        ]}
-        activeStep={1}
-        className={'custom-class'}
-        onChange={(step) => {
-          console.log(step)
-        }}
-      />
-    </MockTheme>,
-  )
-
-  const self = progressBar.container.firstChild
-  expect(self).toMatchSnapshot()
-})