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

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

@@ -1,96 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export type StyledAvatarProps = {
-  size?: number
-  backgroundColor?: string
-  avatarUrl?: string
-  width?: number
-  height?: number
-}
-
-export const StyledAvatar = styled.div<StyledAvatarProps>`
-  background-color: ${(props) => props.backgroundColor || 'transparent'};
-  color: white;
-  cursor: pointer;
-  img {
-    --width: ${(props) => props.width || '40'}px;
-    --height: ${(props) => props.height || '40'}px;
-    width: var(--width);
-    height: var(--height);
-    ${(props) =>
-      props.width && props.height
-        ? `    
-      max-width: var(--width);
-      max-height: var(--height);
-    `
-        : ''}
-  }
-
-  &[data-avatar-type='square'] {
-    img {
-      --width: ${(props) => props.width || '72'}px;
-      --height: ${(props) => props.height || '72'}px;
-      border-radius: 6px;
-    }
-  }
-
-  &[data-avatar-type='rounded'] {
-    img {
-      border-radius: 50%;
-    }
-  }
-
-  &[data-is-amp='true'] {
-    display: flex;
-    overflow: hidden;
-    overflow: hidden;
-    width: 40px;
-    height: 40px;
-    align-items: center;
-    justify-content: center;
-    background-size: cover;
-    font-size: 20px;
-    font-weight: bold;
-    &[data-avatar-type='square'] {
-      border-radius: 6px;
-    }
-    &[data-avatar-type='rounded'] {
-      border-radius: 50%;
-      img {
-        --width: 100%;
-        --height: 100%;
-      }
-    }
-    img {
-      object-fit: cover;
-    }
-  }
-
-  ${(props) =>
-    props.size &&
-    css`
-      display: flex;
-      overflow: hidden;
-      overflow: hidden;
-      width: ${props.size}px;
-      height: ${props.size}px;
-      align-items: center;
-      justify-content: center;
-      background-size: cover;
-      font-size: ${props.size / 2}px;
-      font-weight: bold;
-      &[data-avatar-type='square'] {
-        border-radius: 6px;
-      }
-      &[data-avatar-type='rounded'] {
-        border-radius: 50%;
-        img {
-          --width: 100%;
-          --height: 100%;
-        }
-      }
-      img {
-        object-fit: cover;
-      }
-    `}
-`

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

@@ -1,91 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import { CSSProperties } from 'styled-components'
-
-import { StyledAvatar } from './index.styled'
-
-export type AvatarSize =
-  | 'xs'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | 'xl'
-  | 'xxl'
-  | 'xxxl'
-
-const pxBySize: { [size in AvatarSize]: number } = {
-  xs: 28,
-  small: 32,
-  medium: 40,
-  large: 48,
-  xl: 64,
-  xxl: 80,
-  xxxl: 96,
-}
-
-export type Props = {
-  size?: AvatarSize
-  avatarImg?: JSX.Element
-  avatarUrl?: string
-  firstLetter?: string
-  backgroundColor?: string
-  onClick?: () => void
-  className?: string
-  type?: 'rounded' | 'square'
-  style?: CSSProperties
-  isAmp?: boolean
-  width?: number
-  height?: number
-}
-
-const Avatar = ({
-  type = 'square',
-  size,
-  avatarImg,
-  avatarUrl,
-  firstLetter,
-  backgroundColor,
-  onClick,
-  style,
-  className,
-  isAmp = false,
-  width,
-  height,
-}: Props) => {
-  const sizePx = size ? pxBySize[size] : undefined
-  const [isImageLoadingError, setIsImageLoadingError] = useState(false)
-
-  useEffect(() => {
-    if (avatarUrl) {
-      const img = document.createElement('img')
-      img.setAttribute('src', avatarUrl)
-      img.addEventListener('error', () => {
-        setIsImageLoadingError(true)
-      })
-    }
-  }, [avatarUrl, setIsImageLoadingError])
-
-  const shouldRenderLetter =
-    ((!avatarUrl && !avatarImg) || isImageLoadingError) && firstLetter
-
-  return (
-    <StyledAvatar
-      style={style}
-      data-avatar-type={type}
-      onClick={onClick}
-      className={className}
-      size={!isAmp ? sizePx : undefined}
-      backgroundColor={backgroundColor}
-      avatarUrl={avatarUrl}
-      data-is-amp={isAmp}
-      width={width}
-      height={height}
-    >
-      {avatarImg}
-      {avatarUrl && !isImageLoadingError && <img src={avatarUrl} />}
-      {shouldRenderLetter && firstLetter}
-    </StyledAvatar>
-  )
-}
-
-export { Avatar }

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

@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  position: relative;
-}
-
-.c0 > div {
-  width: -webkit-max-content;
-  width: -moz-max-content;
-  width: max-content;
-  position: relative;
-}
-
-.c0 span {
-  font-weight: 700;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  left: 75%;
-  width: 8px;
-  height: 8px;
-  font-size: 0px;
-  border-radius: 50%;
-  background: #e3f2ff;
-  color: #2d87f3;
-}
-
-.c0 svg {
-  width: 40px;
-  height: 40px;
-}
-
-<div
-  class="c0"
-  data-has-icon="true"
-  data-notification-color="primary"
-  data-notification-size="medium"
-  data-notification-type="dot"
->
-  <div>
-     
-    <div>
-      <img
-        src="https://source.unsplash.com/random/16x16"
-      />
-    </div>
-  </div>
-</div>
-`;

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

@@ -1,71 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Avatar } from '../avatar'
-import { Badge, Props } from './index'
-
-export default {
-  component: Badge,
-  title: 'Atoms/Badge',
-}
-
-const Template: Story<Props> = (args) => <Badge {...args} />
-
-export const StandAlone = Template.bind({})
-StandAlone.args = {
-  className: '',
-  amount: 4,
-  type: 'dot',
-  size: 'medium',
-  color: 'primary',
-  icon: '',
-}
-
-export const WithAvatar = Template.bind({})
-WithAvatar.args = {
-  className: '',
-  amount: 4,
-  type: 'numeric',
-  size: 'medium',
-  color: 'primary',
-  icon: (
-    <Avatar
-      avatarImg={<img src="https://source.unsplash.com/random/74x74" />}
-      type="rounded"
-      onClick={() => console.log('avatar')}
-    />
-  ),
-}
-
-export const WithIcon = Template.bind({})
-WithIcon.args = {
-  className: '',
-  amount: 4,
-  type: 'numeric',
-  size: 'medium',
-  color: 'primary',
-  icon: (
-    <svg
-      data-name="Layer 1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 19.6 19.6"
-    >
-      <title>{'bell'}</title>
-      <path
-        d="M7.91 15.8a2.67 2.67 0 00-.11.75 2.13 2.13 0 002 2.25 2.13 2.13 0 002-2.25 2.67 2.67 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>
-  ),
-}

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

@@ -1,138 +0,0 @@
-import { theme, ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-import { NotificationType, NotificationSize, NotificationColor } from './'
-
-type StyledProps = {
-  notificationType: NotificationType
-  notificationSize?: NotificationSize
-  notificationColor?: NotificationColor
-  hasIcon: boolean
-}
-
-const renderNotificationStyles = (
-  type: NotificationType,
-  size: NotificationSize,
-  hasIcon: boolean,
-  color: NotificationColor,
-) => {
-  let sizeparams = ''
-  if (type === 'numeric') {
-    switch (size) {
-      case 'medium':
-        sizeparams = `
-          height: 16px;
-          font-size: 11px;
-          padding: 1px 6px;
-        `
-      case 'large':
-        sizeparams = `
-          height: 24px;
-          font-size: 13px;
-          padding: 1px 10px;
-        `
-    }
-  }
-
-  let icon = ''
-  if (hasIcon) {
-    icon = `
-      position: absolute;
-      top: 0;
-      left: 75%;
-    `
-  }
-
-  let numericIcon
-
-  if (hasIcon) {
-    numericIcon = `
-      left: 70%;
-
-      ${
-        size === 'large'
-          ? `
-        top: -7px;
-      `
-          : size === 'medium'
-          ? `
-       top: -2px;
-       width: 16px;
-       height: 16px;
-      `
-          : ''
-      }
-    `
-  }
-
-  let notificationColor = ''
-
-  switch (color) {
-    case 'primary':
-      notificationColor = `
-      background: ${theme.colors.blue50};
-      color: ${theme.colors.blue600};  
-    `
-      break
-    case 'error':
-      notificationColor = `
-        background: ${theme.colors.error};
-        color: white;
-      `
-      break
-  }
-
-  switch (type) {
-    case 'dot':
-      return `
-        ${icon}
-        width: 8px;
-        height: 8px;
-        font-size: 0px;
-        border-radius: 50%;
-        ${notificationColor}
-      `
-    case 'numeric':
-      return `
-        ${icon}
-        width: max-content;
-        border-radius: 32px;
-        ${sizeparams}
-        ${numericIcon}
-        ${notificationColor}
-      `
-  }
-}
-
-export const StyledBadge = styled.div<StyledProps>`
-  position: relative;
-
-  > div {
-    width: max-content;
-    position: relative;
-  }
-
-  span {
-    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    ${(props) =>
-      renderNotificationStyles(
-        props.notificationType,
-        props.notificationSize,
-        props.hasIcon,
-        props.notificationColor,
-      )}
-  }
-
-  ${(props) =>
-    props.hasIcon &&
-    `
-    svg {
-      width: 40px;
-      height: 40px;
-    }
-  `}
-`

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

@@ -1,27 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Badge } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const badge = render(
-    <MockTheme>
-      <Badge
-        type="dot"
-        icon={<img src="https://source.unsplash.com/random/16x16" />}
-      />
-    </MockTheme>,
-  )
-
-  const self = badge.container.firstChild
-
-  expect(self).toMatchSnapshot()
-
-  expect(self).toHaveAttribute('data-has-icon', 'true')
-  expect(self).toHaveAttribute('data-notification-type', 'dot')
-})

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

@@ -1,45 +0,0 @@
-import React from 'react'
-
-import { StyledBadge } from './index.styled'
-
-export type NotificationType = 'dot' | 'numeric'
-export type NotificationSize = 'medium' | 'large'
-export type NotificationColor = 'primary' | 'error'
-
-export type Props = {
-  icon: JSX.Element
-  type: NotificationType
-  size?: NotificationSize
-  color?: NotificationColor
-  className?: string
-  amount?: number | string | JSX.Element
-}
-
-const Badge = ({
-  amount,
-  type,
-  size = 'medium',
-  color = 'primary',
-  icon,
-  className,
-}: Props) => {
-  return (
-    <StyledBadge
-      data-notification-type={type}
-      data-notification-size={size}
-      data-notification-color={color}
-      data-has-icon={!!icon || undefined}
-      notificationType={type}
-      notificationSize={size}
-      notificationColor={color}
-      hasIcon={!!icon}
-      className={className}
-    >
-      <div>
-        {amount && <span>{amount}</span>} {icon && <div>{icon}</div>}
-      </div>
-    </StyledBadge>
-  )
-}
-
-export { Badge }

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

@@ -1,38 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { BorderHeading, Props } from '.'
-import MockTheme from './../../../misc/mockTheme'
-
-export default {
-  component: BorderHeading,
-  title: 'Atoms/BorderHeading',
-}
-
-const Template: Story<Props> = (args) => (
-  <MockTheme>
-    <div style={{ padding: '20px' }}>
-      <BorderHeading {...args}>Lorem ipsum dolor asit amet</BorderHeading>
-    </div>
-  </MockTheme>
-)
-
-export const Normal = Template.bind({})
-
-Normal.args = {}
-
-export const Small = Template.bind({})
-
-Small.args = {
-  size: 'sm',
-  type: 'semiBold',
-}
-
-export const UpperCase = Template.bind({})
-
-UpperCase.args = {
-  size: 'sm',
-  type: 'semiBold',
-  upperCase: true,
-}

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

@@ -1,50 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledBorderHeading = styled.h4`
-  position: relative;
-  line-height: 18px;
-
-  &:after {
-    position: absolute;
-    top: 1px;
-    left: 0;
-    width: 4px;
-    height: 18px;
-    background-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-    content: '';
-  }
-
-  &[data-size='lg'] {
-    font-size: 18px;
-    padding-left: 12px;
-  }
-
-  &[data-size='sm'] {
-    font-size: 14px;
-    padding-left: 8px;
-
-    &::after {
-      width: 2px;
-      height: 15px;
-    }
-  }
-
-  &[data-type='bold'] {
-    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-  }
-  &[data-type='semiBold'] {
-    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwSemiBold};
-  }
-
-  &[data-uppercase] {
-    text-transform: uppercase;
-  }
-
-  ${MediaQueries.mbDown} {
-    &[data-size='lg'] {
-      font-size: 16px;
-    }
-  }
-`

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

@@ -1,39 +0,0 @@
-import React, { ReactNode } from 'react'
-
-import { TextType } from '../text'
-import { StyledBorderHeading } from './index.styled'
-
-export type Props = {
-  children: ReactNode
-  className?: string
-  size?: 'sm' | 'md' | 'lg'
-  type?: TextType
-  upperCase?: boolean
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  color?: string
-  style?: React.CSSProperties
-}
-
-const BorderHeading = ({
-  style,
-  children,
-  className,
-  size = 'lg',
-  type = 'bold',
-  upperCase,
-  as = 'h4',
-  color,
-}: Props) => (
-  <StyledBorderHeading
-    style={{ color, ...style }}
-    className={className}
-    data-size={size}
-    data-type={type}
-    data-uppercase={upperCase}
-    as={as}
-  >
-    {children}
-  </StyledBorderHeading>
-)
-
-export { BorderHeading }

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

@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  width: auto;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 700;
-  -webkit-transition: background-color 0.3s,border-color 0.3s;
-  transition: background-color 0.3s,border-color 0.3s;
-  background-color: #2d87f3;
-  border: 1px solid #2d87f3;
-  color: #fff;
-  padding: 9px 24px;
-  font-size: 14px;
-  line-height: 22px;
-}
-
-.c0:hover:not(:disabled) {
-  background-color: #2c74df;
-}
-
-.c0:not(:is([disabled],[data-is-loading='true'])):active {
-  background-color: #2b62cd;
-}
-
-.c0[data-theme='marryBaby']:disabled,
-.c0:disabled {
-  border-color: #bfbfbf;
-  background-color: #bfbfbf;
-  color: #fff;
-  cursor: not-allowed;
-}
-
-.c0[data-event-category] > * {
-  pointer-events: none;
-}
-
-.c0:focus-visible {
-  outline: 2px solid black;
-}
-
-<button
-  class="c0"
-  data-color="primary"
-  data-size="md"
-  data-theme="helloSites"
->
-  <span>
-    <span
-      class="button-icon"
-    />
-     
-    This is a test tag
-  </span>
-</button>
-`;