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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+// 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>
+`;