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

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

@@ -1,17 +0,0 @@
-import styled from 'styled-components'
-
-export const StyledRateStars = styled.div`
-  display: inline-flex;
-
-  gap: calc(var(--gap) * 1px);
-  > svg {
-    width: calc(var(--star-size) * 1px);
-    height: calc(var(--star-size) * 1px);
-  }
-
-  &[data-selectable='true'] {
-    > svg {
-      cursor: pointer;
-    }
-  }
-`

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

@@ -1,101 +0,0 @@
-import React, { CSSProperties, useState } from 'react'
-
-import { StarHalfIcon, StarEmptyIcon, StarFullIcon } from 'assets/svg'
-
-import { StyledRateStars } from './index.styled'
-
-export type Props = {
-  /**
-   * percent of progress
-   */
-  star: number
-  /**
-   * does not show empty stars
-   */
-  hideEmptyStars?: boolean
-  /**
-   * total stars
-   */
-  totalStars?: number
-  /**
-   * Select star, value from 1 to maximum
-   */
-  onSelect?: (value: number) => void
-  /**
-   * starProps
-   */
-  gap?: number
-  size?: number
-  style?: CSSProperties
-  className?: string
-}
-
-/**
- *
- * Show 5 (or more) stars and allow user vote (optional)
- *
- */
-const RateStars = ({
-  gap = 2,
-  size = 24,
-  star,
-  totalStars = 5,
-  onSelect,
-  hideEmptyStars,
-  style,
-  className,
-}: Props) => {
-  const numberOfFullStars = Math.floor(star)
-  const numberOfHalfStars = star - numberOfFullStars >= 0.5 ? 1 : 0
-  const [tempStar, setTempStar] = useState<number | null>(null)
-
-  const tempFullStars = tempStar || numberOfFullStars
-  const tempHalfStars = tempStar ? 0 : numberOfHalfStars
-
-  return (
-    <StyledRateStars
-      data-selectable={!!onSelect}
-      style={
-        {
-          '--gap': gap,
-          '--star-size': size,
-          ...style,
-        } as CSSProperties
-      }
-      className={className}
-    >
-      {Array.from({
-        length: hideEmptyStars
-          ? numberOfFullStars + numberOfHalfStars
-          : totalStars,
-      }).map((_, index) => {
-        const onMouseOver = () => !!onSelect && setTempStar(index + 1)
-        const onMouseLeave = () => !!onSelect && setTempStar(null)
-        return index + 1 <= tempFullStars ? (
-          <StarFullIcon
-            key={index}
-            onClick={() => onSelect?.(index + 1)}
-            onMouseOver={onMouseOver}
-            onMouseLeave={onMouseLeave}
-          />
-        ) : index + 1 === tempFullStars + tempHalfStars ? (
-          <StarHalfIcon
-            key={index}
-            onClick={() => onSelect?.(index + 1)}
-            onMouseOver={onMouseOver}
-            onMouseLeave={onMouseLeave}
-          />
-        ) : (
-          <StarEmptyIcon
-            key={index}
-            onClick={() => onSelect?.(index + 1)}
-            onMouseOver={onMouseOver}
-            onMouseLeave={onMouseLeave}
-          />
-        )
-      })}
-    </StyledRateStars>
-  )
-}
-
-export { RateStars }

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

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0[data-shadow-size='small'] {
-  -webkit-filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.04)) drop-shadow(0px 0px 2px rgba(0,0,0,0.06)) drop-shadow(0px 0px 1px rgba(0,0,0,0.04));
-  filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.04)) drop-shadow(0px 0px 2px rgba(0,0,0,0.06)) drop-shadow(0px 0px 1px rgba(0,0,0,0.04));
-}
-
-.c0[data-shadow-size='normal'] {
-  -webkit-filter: drop-shadow(0px 10px 16px rgba(0,0,0,0.04)) drop-shadow(0px 2px 8px rgba(0,0,0,0.04)) drop-shadow(0px 0px 1px rgba(0,0,0,0.04));
-  filter: drop-shadow(0px 10px 16px rgba(0,0,0,0.04)) drop-shadow(0px 2px 8px rgba(0,0,0,0.04)) drop-shadow(0px 0px 1px rgba(0,0,0,0.04));
-}
-
-.c0[data-shadow-size='medium'] {
-  -webkit-filter: drop-shadow(0px 16px 24px rgba(0,0,0,0.06)) drop-shadow(0px 2px 8px rgba(0,0,0,0.04)) drop-shadow(0px 0px 1px rgba(0,0,0,0.04));
-  filter: drop-shadow(0px 16px 24px rgba(0,0,0,0.06)) drop-shadow(0px 2px 8px rgba(0,0,0,0.04)) drop-shadow(0px 0px 1px rgba(0,0,0,0.04));
-}
-
-.c0[data-shadow-size='large'] {
-  -webkit-filter: drop-shadow(0px 24px 32px rgba(0,0,0,0.04)) drop-shadow(0px 16px 24px rgba(0,0,0,0.04)) drop-shadow(0px 4px 8px rgba(0,0,0,0.04)) drop-shadow(0px 0px 1px rgba(0,0,0,0.04));
-  filter: drop-shadow(0px 24px 32px rgba(0,0,0,0.04)) drop-shadow(0px 16px 24px rgba(0,0,0,0.04)) drop-shadow(0px 4px 8px rgba(0,0,0,0.04)) drop-shadow(0px 0px 1px rgba(0,0,0,0.04));
-}
-
-.c0[data-shadow-size='soft'] {
-  -webkit-filter: drop-shadow(0px 24px 32px rgba(0,0,0,0.04)) drop-shadow(0px 16px 24px rgba(0,0,0,0.04)) drop-shadow(0px 4px 8px rgba(0,0,0,0.04)) drop-shadow(0px 0px 1px rgba(0,0,0,0.04));
-  filter: drop-shadow(0px 24px 32px rgba(0,0,0,0.04)) drop-shadow(0px 16px 24px rgba(0,0,0,0.04)) drop-shadow(0px 4px 8px rgba(0,0,0,0.04)) drop-shadow(0px 0px 1px rgba(0,0,0,0.04));
-}
-
-<div
-  class="c0"
-  data-shadow-size="medium"
->
-  <div>
-    Shadow child!
-  </div>
-</div>
-`;

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

@@ -1,55 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Shadow, Props } from '.'
-
-export default {
-  component: Shadow,
-  title: 'Atoms/Shadow',
-}
-
-const Template: Story<Props> = (args) => (
-  <Shadow {...args}>
-    <div
-      style={{
-        height: 100,
-        width: 100,
-        borderRadius: 15,
-        margin: 32,
-        background: 'white',
-        display: 'block',
-      }}
-    />
-  </Shadow>
-)
-
-export const Small = Template.bind({})
-
-Small.args = {
-  size: 'small',
-}
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  size: 'normal',
-}
-
-export const Medium = Template.bind({})
-
-Medium.args = {
-  size: 'medium',
-}
-
-export const Large = Template.bind({})
-
-Large.args = {
-  size: 'large',
-}
-
-export const Soft = Template.bind({})
-
-Soft.args = {
-  size: 'soft',
-}

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

@@ -1,31 +0,0 @@
-import styled from 'styled-components'
-
-export const StyledShadow = styled.div`
-  &[data-shadow-size='small'] {
-    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.04))
-      drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.06))
-      drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
-  }
-  &[data-shadow-size='normal'] {
-    filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))
-      drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))
-      drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
-  }
-  &[data-shadow-size='medium'] {
-    filter: drop-shadow(0px 16px 24px rgba(0, 0, 0, 0.06))
-      drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))
-      drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
-  }
-  &[data-shadow-size='large'] {
-    filter: drop-shadow(0px 24px 32px rgba(0, 0, 0, 0.04))
-      drop-shadow(0px 16px 24px rgba(0, 0, 0, 0.04))
-      drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.04))
-      drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
-  }
-  &[data-shadow-size='soft'] {
-    filter: drop-shadow(0px 24px 32px rgba(0, 0, 0, 0.04))
-      drop-shadow(0px 16px 24px rgba(0, 0, 0, 0.04))
-      drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.04))
-      drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
-  }
-`

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

@@ -1,25 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Shadow } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const shadow = render(
-    <MockTheme>
-      <Shadow size="medium">
-        <div>Shadow child!</div>
-      </Shadow>
-    </MockTheme>,
-  )
-
-  const self = shadow.container.firstChild
-
-  expect(self).toMatchSnapshot()
-
-  expect(self).toHaveAttribute('data-shadow-size', 'medium')
-})

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

@@ -1,20 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react'
-
-import { StyledShadow } from './index.styled'
-
-type Props = {
-  size: 'small' | 'normal' | 'medium' | 'large' | 'soft'
-  children: ReactNode
-  className?: string
-  style?: CSSProperties
-}
-
-const Shadow = ({ size, children, style, className }: Props) => {
-  return (
-    <StyledShadow style={style} className={className} data-shadow-size={size}>
-      {children}
-    </StyledShadow>
-  )
-}
-
-export { Shadow }

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

@@ -1,172 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c1 {
-  --text-color: var( --custom-color, #262626 );
-  color: var(--text-color);
-  -webkit-letter-spacing: 0px;
-  -moz-letter-spacing: 0px;
-  -ms-letter-spacing: 0px;
-  letter-spacing: 0px;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 28px;
-}
-
-.c0 {
-  margin: 0 12px;
-}
-
-.c0 div[role='slider'] {
-  -webkit-text-size-adjust: none;
-  -webkit-user-select: none;
-}
-
-.c0 div[role='slider']:focus {
-  outline: none;
-}
-
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 24px;
-  height: 24px;
-  -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;
-  background-color: #fff;
-  border-radius: 50%;
-  box-shadow: 0px 2px 2px rgba(0,0,0,0.07),0px 4px 7px rgba(0,0,0,0.15);
-}
-
-.c6 {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 16px;
-  height: 16px;
-  background: #2d87f3;
-  border-radius: 50%;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  height: 36px;
-  margin-top: 32px;
-}
-
-.c3 {
-  width: 100%;
-  height: 5px;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  border-radius: 4px;
-}
-
-.c5 {
-  position: absolute;
-  top: -28px;
-  display: block;
-  padding: 4px;
-  background-color: #2d87f3;
-  border-radius: 4px;
-  color: #fff;
-  font-size: 14px;
-  font-weight: bold;
-  outline: none;
-  white-space: nowrap;
-}
-
-.c5:focus {
-  outline: none;
-}
-
-@media (min-width:1024px) {
-  .c1 {
-    font-size: 18px;
-    line-height: 32px;
-    -webkit-letter-spacing: -0.2px;
-    -moz-letter-spacing: -0.2px;
-    -ms-letter-spacing: -0.2px;
-    letter-spacing: -0.2px;
-  }
-}
-
-<div
-  class="c0"
->
-  <p
-    class="c1"
-    data-size="md"
-    data-type="bold"
-  >
-    Consultation Fee
-  </p>
-  <div
-    class="c2"
-    style="transform: scale(1); cursor: inherit;"
-  >
-    <div
-      class="c3"
-    >
-      <div
-        aria-valuemax="400"
-        aria-valuemin="0"
-        aria-valuenow="0"
-        class="c4"
-        draggable="false"
-        role="slider"
-        style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
-        tabindex="0"
-      >
-        <div
-          class="c5"
-          data-label="0"
-        >
-          0
-        </div>
-        <div
-          class="c6"
-          data-label="0"
-        />
-      </div>
-      <div
-        aria-valuemax="400"
-        aria-valuemin="0"
-        aria-valuenow="400"
-        class="c4"
-        draggable="false"
-        role="slider"
-        style="position: absolute; z-index: 1; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
-        tabindex="0"
-      >
-        <div
-          class="c5"
-          data-label="1"
-        >
-          400
-        </div>
-        <div
-          class="c6"
-          data-label="1"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;

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

@@ -1,22 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Props, Slider } from '.'
-
-export default {
-  component: Slider,
-  title: 'Atoms/Slider',
-}
-
-const Template: Story<Props> = (args) => <Slider {...args} />
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  heading: 'Consultation Fee',
-  min: 0,
-  max: 400,
-  step: 10,
-  value: [0, 400],
-}

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

@@ -1,68 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledSlider = styled.div`
-  margin: 0 12px;
-
-  & div[role='slider'] {
-    -webkit-text-size-adjust: none;
-    -webkit-user-select: none;
-    &:focus {
-      outline: none;
-    }
-  }
-`
-
-export const StyledThumb = styled.div`
-  display: flex;
-  width: 24px;
-  height: 24px;
-  align-items: center;
-  justify-content: center;
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-  border-radius: 50%;
-  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.07), 0px 4px 7px rgba(0, 0, 0, 0.15);
-`
-
-export const StyledDot = styled.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 16px;
-  height: 16px;
-  background: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-  border-radius: 50%;
-  transform: translateY(-50%) translateX(-50%);
-`
-
-export const StyledTrackContainer = styled.div`
-  display: flex;
-  width: 100%;
-  height: 36px;
-  margin-top: 32px;
-`
-
-export const StyledTrack = styled.div`
-  width: 100%;
-  height: 5px;
-  align-self: center;
-  border-radius: 4px;
-`
-
-export const StyledLabel = styled.div`
-  position: absolute;
-  top: -28px;
-  display: block;
-  padding: 4px;
-  background-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-  border-radius: 4px;
-  color: ${(props: ThemeProps) => props.theme.colors.white};
-  font-size: 14px;
-  font-weight: bold;
-  outline: none;
-  white-space: nowrap;
-
-  &:focus {
-    outline: none;
-  }
-`

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

@@ -1,27 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Slider } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const slider = render(
-    <MockTheme>
-      <Slider
-        heading="Consultation Fee"
-        min={0}
-        max={400}
-        step={10}
-        value={[0, 400]}
-        onChange={(v) => console.log(v)}
-      />
-    </MockTheme>,
-  )
-
-  const self = slider.container.firstChild
-  expect(self).toMatchSnapshot()
-})