@hhgtech/hhg-components 1.19.0-beta-4 → 1.19.0-beta-6

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

@@ -0,0 +1,140 @@
+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/raw/components/atoms/tag/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,72 @@
+// 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/raw/components/atoms/tag/index.stories.tsx

@@ -0,0 +1,54 @@
+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/raw/components/atoms/tag/index.styled.tsx

@@ -0,0 +1,184 @@
+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/raw/components/atoms/tag/index.test.tsx

@@ -0,0 +1,23 @@
+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/raw/components/atoms/tag/index.tsx

@@ -0,0 +1,72 @@
+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/raw/components/atoms/text/index.stories.tsx

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