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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+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()
+})