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

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

@@ -1,140 +0,0 @@
-import React, { CSSProperties, useState, useEffect } from 'react'
-
-import { Range, getTrackBackground, useThumbOverlap } from 'react-range'
-
-import { Text } from '../text'
-import {
-  StyledTrackContainer,
-  StyledDot,
-  StyledSlider,
-  StyledThumb,
-  StyledTrack,
-  StyledLabel,
-} from './index.styled'
-
-export type Props = {
-  step: number
-  // min and max comes from api and don't change during the process
-  min: number
-  max: number
-  value: Array<number>
-  onChange: (v: Array<number>) => void
-  className?: string
-  heading?: string
-  isMobile?: boolean
-}
-
-function ThumbLabel({
-  rangeRef,
-  values,
-  index,
-}: {
-  rangeRef: Range | null
-  values: number[]
-  index: number
-  isMobile?: boolean
-}) {
-  const [labelValue, labelStyle] = useThumbOverlap(
-    rangeRef,
-    values,
-    index,
-    1,
-    ' - ',
-    (value) => value,
-  )
-
-  return (
-    <>
-      <StyledLabel data-label={index} style={labelStyle as CSSProperties}>
-        {labelValue}
-      </StyledLabel>
-      <StyledDot data-label={index}></StyledDot>
-    </>
-  )
-}
-
-const Slider = ({
-  step,
-  min,
-  max,
-  value,
-  onChange,
-  className,
-  heading,
-  isMobile = false,
-}: Props) => {
-  const COLORS = ['#DBDFE5', '#2D87F3', '#DBDFE5']
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const rangeRef: any = React.useRef()
-  const [localValue, setLocalValue] = useState(value)
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const Thumb = ({ props, index }: any) => {
-    return (
-      <StyledThumb {...props}>
-        <ThumbLabel
-          rangeRef={rangeRef.current}
-          values={localValue}
-          index={index}
-          isMobile={isMobile}
-        />
-      </StyledThumb>
-    )
-  }
-
-  useEffect(() => {
-    setLocalValue(value)
-  }, [value[0], value[1]])
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const Track = ({ props, children }: any) => {
-    const trackStyles = {
-      background: getTrackBackground({
-        values: localValue,
-        colors: COLORS,
-        min,
-        max,
-      }),
-    }
-
-    return (
-      <>
-        {heading && (
-          <Text size="md" type="bold">
-            {heading}
-          </Text>
-        )}
-        <StyledTrackContainer
-          onMouseDown={props.onMouseDown}
-          onTouchStart={props.onTouchStart}
-          style={{ ...props.style }}
-        >
-          <StyledTrack ref={props.ref} style={trackStyles}>
-            {children}
-          </StyledTrack>
-        </StyledTrackContainer>
-      </>
-    )
-  }
-
-  return (
-    <StyledSlider className={className}>
-      <Range
-        ref={rangeRef}
-        values={
-          localValue[0] >= min && localValue[1] <= max ? localValue : [min, max]
-        }
-        onChange={setLocalValue}
-        onFinalChange={onChange}
-        renderThumb={Thumb}
-        renderTrack={Track}
-        step={step}
-        min={min}
-        max={max}
-      />
-    </StyledSlider>
-  )
-}
-
-export { Slider }

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

@@ -1,72 +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: 400;
-  font-size: 14px;
-  line-height: 22px;
-  -webkit-letter-spacing: -0.2px;
-  -moz-letter-spacing: -0.2px;
-  -ms-letter-spacing: -0.2px;
-  letter-spacing: -0.2px;
-}
-
-.c0 {
-  --padding-horizontal: 8px;
-  --pading-vertical: 2px;
-  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;
-  padding: var(--pading-vertical) var(--padding-horizontal);
-  border-radius: 24px;
-  background: #ffb521;
-}
-
-.c0 p {
-  color: var(--text-props-color,function (props) { return props.theme.colors.white;
-}
-
-);} .c0 p {
-  color: var( --text-props-color, #262626 );
-}
-
-.c0[data-is-selected],
-.c0:active {
-  background: #e3f2ff;
-}
-
-@media (min-width:1024px) {
-  .c1 {
-    font-size: 16px;
-    line-height: 24px;
-  }
-}
-
-<div
-  class="c0"
-  data-tag-type="yellow"
->
-  <p
-    class="c1"
-    data-size="sm"
-    data-type="regular"
-  >
-    This is a test tag
-  </p>
-</div>
-`;

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

@@ -1,54 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Props, Tag } from './index'
-
-export default {
-  component: Tag,
-  title: 'Atoms/Tag',
-}
-
-const Template: Story<Props> = (args) => (
-  <Tag {...args}>
-    {args.type === 'sponsored' ? 'Sponsored' : 'Waiting for confirmation'}
-  </Tag>
-)
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  isSquared: true,
-  type: 'standard',
-  isLight: true,
-}
-
-export const Sponsored = Template.bind({})
-
-Sponsored.args = {
-  type: 'sponsored',
-}
-
-export const Solid = Template.bind({})
-
-Solid.args = {
-  type: 'red',
-  isLight: false,
-}
-
-export const HasMorePadding = Template.bind({})
-
-HasMorePadding.args = {
-  type: 'green',
-  isRounded: true,
-  hasMorePadding: true,
-  isLight: true,
-}
-
-export const IsSquared = Template.bind({})
-
-IsSquared.args = {
-  type: 'green',
-  isSquared: true,
-  isLight: true,
-}

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

@@ -1,184 +0,0 @@
-import { theme, ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-import { Props } from '.'
-
-type CssProps = {
-  tagType: Props['type']
-  isInline: Props['isInline']
-  tagHasMorePadding: Props['hasMorePadding']
-  tagIsLight: Props['isLight']
-  tagIsSquared: Props['isSquared']
-  tagIsALink: Props['isLink']
-}
-
-const getTag = (tag: CssProps['tagType'], isLight: Props['isLight']) => {
-  switch (tag) {
-    case 'yellow': {
-      const color = isLight ? theme.colors.yellow50 : theme.colors.yellow600
-      return `
-        background: ${color};
-        p {
-          color: var(
-            --text-props-color,
-            ${theme.colors.gray800}
-          );
-        }
-      `
-    }
-    case 'standard': {
-      return `
-      background: ${theme.colors.white};
-      border: 1px solid ${theme.colors.gray200};
-  
-      p {
-        color: var(
-          --text-props-color,
-          ${theme.colors.gray800}
-        );
-      }
-  
-      &:hover {
-        background: ${theme.colors.gray100};
-      }
-      `
-    }
-    case 'red': {
-      const color = isLight ? theme.colors.red50 : theme.colors.red500
-      return `
-         background: ${color};
-        `
-    }
-    case 'green': {
-      const color = isLight ? theme.colors.green50 : theme.colors.green500
-      return `
-         background: ${color};
-      `
-    }
-    case 'blue': {
-      const color = isLight ? theme.colors.blue50 : theme.colors.primaryBase
-      return `
-         background: ${color};
-      `
-    }
-    case 'teal': {
-      const color = isLight ? theme.colors.teal100 : theme.colors.teal600
-      return `
-         background: ${color};
-      `
-    }
-    case 'pink': {
-      const color = isLight ? theme.colors.pink200 : theme.colors.pink800
-      return `
-         background: ${color};
-      `
-    }
-    case 'violet': {
-      const color = isLight ? theme.colors.violet100 : theme.colors.violet500
-      return `
-          background: ${color};
-      `
-    }
-    case 'grey': {
-      const color = isLight ? theme.colors.gray100 : theme.colors.gray600
-      return `
-          background: ${color};
-      `
-    }
-  }
-}
-
-export const StyledTag = styled.div<CssProps>`
-  --padding-horizontal: 8px;
-  --pading-vertical: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--pading-vertical) var(--padding-horizontal);
-  border-radius: 24px;
-
-  ${(props) =>
-    props.tagType === 'sponsored' &&
-    `
-    --offset-size: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: content-box;
-    position: relative;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
-    border-radius: 0 4px 18px 0;
-    height: 24px;
-    width: 90px;
-    border-left: var(--offset-size) solid ${theme.colors.accentLight};
-    padding: 0;
-    margin-left: calc(var(--offset-size) * -1);
-
-    p {
-      font-weight: ${theme.sizes.fwBold};
-      color: var(
-        --text-props-color,
-        ${theme.colors.secondaryDark}
-      );
-      font-size: 11px;
-      margin-left: calc(var(--offset-size) * -1);
-    }
-
-    &::after {
-      width: calc(var(--offset-size) * 2);
-      height: var(--offset-size);
-      background: ${theme.colors.accentMain};
-      position: absolute;
-      left: calc(var(--offset-size) * -1);
-      bottom: calc(var(--offset-size) * -1);
-      clip-path: polygon(0 1%, 100% 0%, 100% 100%);
-      content: '';
-    }
-  `}
-
-  ${(props) =>
-    props.isInline &&
-    `
-      display: inline-block;
-  `}
-
-  ${(props) =>
-    props.tagHasMorePadding &&
-    `
-    &[data-has-more-padding] {
-      padding: calc(var(--pading-vertical) + 5px) var(--padding-horizontal);
-    }
-  `}
-
-  p {
-    ${(props) =>
-      props.tagIsLight
-        ? `
-      color: var(--text-props-color, #000);
-      `
-        : `
-      color: var(--text-props-color, ${(props: ThemeProps) =>
-        props.theme.colors.white});
-        `}
-  }
-
-  ${(props) => getTag(props.tagType, props.tagIsLight)}
-
-  ${(props) =>
-    props.tagIsSquared &&
-    props.tagType !== 'sponsored' &&
-    `
-    border-radius: 4px;
-  `}
-
-  ${(props) =>
-    props.tagIsALink &&
-    `
-    cursor: pointer;
-  `} 
-
-  &[data-is-selected],
-  &:active {
-    background: ${(props: ThemeProps) => props.theme.colors.blue50};
-  }
-`

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

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Tag } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const tag = render(
-    <MockTheme>
-      <Tag type="yellow">This is a test tag</Tag>
-    </MockTheme>,
-  )
-
-  const self = tag.container.firstChild
-
-  expect(self).toMatchSnapshot()
-
-  expect(self).toHaveAttribute('data-tag-type', 'yellow')
-})

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

@@ -1,72 +0,0 @@
-import React, { ReactNode, CSSProperties } from 'react'
-
-import { Text, Props as TextProps } from '../text'
-import { StyledTag } from './index.styled'
-
-export type Props = {
-  children: ReactNode
-  type?:
-    | 'standard'
-    | 'yellow'
-    | 'red'
-    | 'green'
-    | 'teal'
-    | 'blue'
-    | 'pink'
-    | 'violet'
-    | 'grey'
-    | 'sponsored'
-  isSquared?: boolean
-  isLight?: boolean
-  isInline?: boolean
-  isSelected?: boolean
-  hasMorePadding?: boolean
-  isLink?: boolean
-  className?: string
-  style?: CSSProperties
-  textProps?: TextProps
-}
-
-const Tag = ({
-  type,
-  children,
-  style,
-  isInline,
-  isSquared = false,
-  className,
-  isLight,
-  hasMorePadding,
-  isLink,
-  isSelected,
-  textProps = {
-    size: 'sm',
-  },
-}: Props) => {
-  const textColor = textProps.color
-    ? { '--text-props-color': textProps.color }
-    : {}
-
-  return (
-    <StyledTag
-      data-is-squared={isSquared || undefined}
-      data-tag-type={type}
-      data-is-light={isLight || undefined}
-      data-has-more-padding={hasMorePadding || undefined}
-      data-is-inline={isInline || undefined}
-      style={{ ...style, ...textColor } as CSSProperties}
-      className={className}
-      data-is-selected={isSelected || undefined}
-      data-is-link={isLink || undefined}
-      tagType={type}
-      isInline={isInline}
-      tagHasMorePadding={hasMorePadding}
-      tagIsLight={isLight}
-      tagIsSquared={isSquared}
-      tagIsALink={isLink}
-    >
-      <Text {...textProps}>{children}</Text>
-    </StyledTag>
-  )
-}
-
-export { Tag }

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

@@ -1,24 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import MockTheme from './../../../misc/mockTheme'
-import { Props, Text } from './index'
-
-export default {
-  component: Text,
-  title: 'Atoms/Text',
-}
-
-const Template: Story<Props> = (args) => (
-  <MockTheme>
-    <Text {...args}>An example paragraph....</Text>
-  </MockTheme>
-)
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  size: 'base',
-  type: 'regular',
-}