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

package/raw/components/molecules/floatButtonGroup/index.styled.tsx

@@ -1,310 +0,0 @@
-import styled from 'styled-components'
-
-export const TRANSITION_TIMING = 200
-
-export const StyledFloatButtonGroup = styled.div``
-
-export const StyledFloatButtonGroupBackgroundPanel = styled.div`
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  background-color: ${(props) =>
-    props.theme.colors.white || props.theme.colors?.palette?.white};
-  opacity: 0.83;
-  transition: display ${TRANSITION_TIMING}ms linear;
-
-  [data-floatmenu-open='true'] & {
-    animation: showBackgroundPanel ${TRANSITION_TIMING}ms linear 0s normal
-      forwards;
-  }
-
-  [data-floatmenu-open='false'] & {
-    animation: hideBackgroundPanel ${TRANSITION_TIMING}ms linear 0s normal
-      forwards;
-  }
-
-  @keyframes showBackgroundPanel {
-    0% {
-      opacity: 0;
-      width: 100vw;
-      height: 100vh;
-    }
-    100% {
-      opacity: 0.83;
-    }
-  }
-
-  @keyframes hideBackgroundPanel {
-    0% {
-      width: 100vw;
-      height: 100vh;
-    }
-    99% {
-      width: 100vw;
-      height: 100vh;
-    }
-    100% {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-  }
-`
-
-export const StyledFloatButtonGroupContent = styled.div`
-  position: fixed;
-  right: 16px;
-  bottom: 40px;
-`
-
-export const StyledFloatButtonGroupItemsWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  transition: all ${TRANSITION_TIMING}ms ease-in-out;
-  position: fixed;
-  bottom: 112px;
-  right: 16px;
-
-  // scale
-  [data-animation-type='scale'] & {
-    transform-origin: 100% 100%;
-  }
-
-  [data-animation-type='scale'][data-floatmenu-open='true'] & {
-    transform: scale(1);
-  }
-
-  [data-animation-type='scale'][data-floatmenu-open='false'] & {
-    transform: scale(0);
-    bottom: 46px;
-    right: 36px;
-  }
-`
-
-export const StyledFloatButtonGroupToggleIcon = styled.div`
-  border-radius: 50%;
-  width: 56px;
-  height: 56px;
-  position: relative;
-  cursor: pointer;
-  margin-left: auto;
-  transition: all 0.1s linear;
-  -webkit-tap-highlight-color: transparent;
-  [data-site-type='hb'] & {
-    background-color: ${(props) =>
-      props.theme.colors.primaryBase || props.theme.colors.primary};
-    &:hover {
-      background-color: ${(props) =>
-        props.theme.colors.primaryHover ||
-        props.theme.colors?.palette?.blue_700};
-    }
-  }
-  [data-site-type='mb'] & {
-    background-color: #2d87f3;
-    &:hover {
-      background-color: #2c74df;
-    }
-  }
-
-  &:before {
-    content: '';
-    width: 2px;
-    height: 20px;
-    background-color: ${(props) =>
-      props.theme.colors.white || props.theme.colors?.palette?.white};
-    border-radius: 2px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &:after {
-    content: '';
-    width: 20px;
-    height: 2px;
-    background-color: ${(props) =>
-      props.theme.colors.white || props.theme.colors?.palette?.white};
-    border-radius: 2px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  [data-floatmenu-open='true'] &:before,
-  [data-floatmenu-open='true'] &:after {
-    animation: toX ${TRANSITION_TIMING}ms linear 0s normal forwards;
-  }
-
-  [data-floatmenu-open='false'] &:before,
-  [data-floatmenu-open='false'] &:after {
-    animation: toPlus ${TRANSITION_TIMING}ms linear 0s normal forwards;
-  }
-
-  @keyframes toX {
-    0% {
-      transform: translate(-50%, -50%) rotateZ(0deg);
-    }
-    49% {
-      transform: translate(-50%, -50%) rotateZ(0deg);
-    }
-    50% {
-      width: 2px;
-      height: 2px;
-      transform: translate(-50%, -50%) rotateZ(45deg);
-    }
-    100% {
-      transform: translate(-50%, -50%) rotateZ(45deg);
-    }
-  }
-
-  @keyframes toPlus {
-    0% {
-      transform: translate(-50%, -50%) rotateZ(45deg);
-    }
-    49% {
-      transform: translate(-50%, -50%) rotateZ(45deg);
-    }
-    50% {
-      width: 2px;
-      height: 2px;
-      transform: translate(-50%, -50%) rotateZ(0deg);
-    }
-    100% {
-      transform: translate(-50%, -50%) rotateZ(0deg);
-    }
-  }
-`
-
-export const StyledFloatButtonGroupButton = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: flex-end;
-
-  width: fit-content;
-  margin-left: auto;
-
-  [data-floatmenu-open='true'] {
-    cursor: pointer;
-  }
-  [data-floatmenu-open='false'] {
-    pointer-events: none;
-  }
-
-  [data-animation-type='zoom'] &,
-  [data-animation-type='slide'] & {
-    position: absolute;
-    right: 0;
-    width: max-content;
-  }
-  // slide
-  [data-animation-type='slide'] & {
-    transition: all ${TRANSITION_TIMING}ms ease-in;
-  }
-
-  [data-animation-type='slide'][data-floatmenu-open='true'] & {
-    animation: showItem ${TRANSITION_TIMING}ms;
-  }
-  [data-animation-type='slide'][data-floatmenu-open='false'] & {
-    bottom: -64px !important;
-    animation: hideItemOnZoom ${TRANSITION_TIMING + 50}ms normal forwards;
-  }
-
-  // zoom
-  [data-animation-type='zoom'][data-floatmenu-open='false'] & {
-    animation: hideItemOnZoom ${TRANSITION_TIMING + 50}ms normal forwards;
-  }
-
-  @keyframes showItem {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes hideItemOnZoom {
-    0% {
-      transform: translateX(0);
-      opacity: 1;
-    }
-
-    99% {
-      transform: translateX(0);
-      opacity: 0.5;
-    }
-
-    100% {
-      transform: translateX(calc(100% + 16px));
-      opacity: 0;
-    }
-  }
-`
-
-export const StyledFloatButtonGroupButtonLabel = styled.div`
-  font-size: 14px;
-
-  // zoom
-  [data-animation-type='zoom'] & {
-    transition: transform ${TRANSITION_TIMING}ms ease-in-out;
-    transform-origin: 100% 0;
-  }
-
-  [data-animation-type='zoom'][data-floatmenu-open='true'] & {
-    transform: scale(1);
-  }
-
-  [data-animation-type='zoom'][data-floatmenu-open='false'] & {
-    transform: scale(0);
-  }
-
-  // slide
-  [data-animation-type='slide'] & {
-    transition: opacity ${TRANSITION_TIMING}ms;
-  }
-  [data-animation-type='slide'][data-floatmenu-open='true'] & {
-    opacity: 1;
-  }
-  [data-animation-type='slide'][data-floatmenu-open='false'] & {
-    opacity: 0;
-  }
-`
-
-export const StyledFloatButtonGroupButtonIcon = styled.div`
-  border-radius: 50%;
-  box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 8px rgba(0, 0, 0, 0.04),
-    0px 0px 1px rgba(0, 0, 0, 0.04);
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: ${(props) =>
-    props.theme.colors.white || props.theme.colors?.palette?.white};
-
-  // zoom
-  [data-animation-type='zoom'] & {
-    transition: transform ${TRANSITION_TIMING}ms ease-in-out;
-  }
-
-  [data-animation-type='zoom'][data-floatmenu-open='true'] & {
-    transform: scale(1);
-  }
-
-  [data-animation-type='zoom'][data-floatmenu-open='false'] & {
-    transform: scale(0);
-  }
-
-  > img {
-    width: 24px;
-    height: 24px;
-    object-fit: contain;
-  }
-`

package/raw/components/molecules/floatButtonGroup/index.tsx

@@ -1,155 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import { CSSProperties } from 'styled-components'
-
-import {
-  StyledFloatButtonGroup,
-  StyledFloatButtonGroupBackgroundPanel,
-  StyledFloatButtonGroupButton,
-  StyledFloatButtonGroupButtonIcon,
-  StyledFloatButtonGroupButtonLabel,
-  StyledFloatButtonGroupContent,
-  StyledFloatButtonGroupItemsWrapper,
-  StyledFloatButtonGroupToggleIcon,
-  TRANSITION_TIMING,
-} from './index.styled'
-
-type Item = {
-  value?: string | number
-  label: string
-  icon: JSX.Element
-  onClick: () => void
-  keepMenuOnClick?: boolean
-}
-
-export type FloatButtonGroupType = {
-  items: Item[]
-  className?: string
-  style?: CSSProperties
-  backgroundPanelStyle?: CSSProperties
-  isOpen?: boolean
-  onOpen?: () => void
-  onClose?: () => void
-  disableBackdropClick?: boolean
-  siteType?: 'hb' | 'mb'
-  animationType?: 'zoom' | 'slide' | 'scale'
-  zIndex?: number
-}
-
-export const FloatButtonGroup = ({
-  items,
-  className,
-  style,
-  backgroundPanelStyle,
-  isOpen: isOpenProp,
-  onOpen,
-  onClose,
-  disableBackdropClick,
-  siteType = 'hb',
-  animationType = 'zoom',
-  zIndex = 300,
-}: FloatButtonGroupType) => {
-  const [isOpen, setIsOpen] = useState<boolean>(!!isOpenProp)
-
-  useEffect(() => {
-    setIsOpen(!!isOpenProp)
-  }, [isOpenProp])
-
-  const handleOpen = () => {
-    setIsOpen(true)
-    if (onOpen) {
-      onOpen()
-    }
-  }
-
-  const handleClose = () => {
-    setIsOpen(false)
-    if (onClose) {
-      onClose()
-    }
-  }
-
-  return (
-    <StyledFloatButtonGroup
-      style={style}
-      className={className}
-      data-floatmenu-open={isOpen}
-      data-site-type={siteType}
-      data-animation-type={animationType}
-    >
-      <StyledFloatButtonGroupBackgroundPanel
-        className="float-button-group__panel"
-        style={{ zIndex, ...backgroundPanelStyle }}
-        onClick={!disableBackdropClick ? handleClose : undefined}
-      />
-      <StyledFloatButtonGroupContent
-        className="float-button-group___content"
-        style={{ zIndex }}
-      >
-        <StyledFloatButtonGroupItemsWrapper>
-          {items.map((item, index) => {
-            return (
-              <StyledFloatButtonGroupButton
-                className={`float-item-button-${index}`}
-                style={{
-                  ...(animationType === 'zoom' && {
-                    bottom: (items.length - 1 - index) * (48 + 16),
-                    transitionDelay: `${
-                      (TRANSITION_TIMING / items.length) *
-                      (isOpen ? items.length - 1 - index : index)
-                    }ms`,
-                  }),
-                  ...(animationType === 'slide' && {
-                    bottom: (items.length - 1 - index) * (48 + 16),
-                    transitionDelay: `${
-                      (TRANSITION_TIMING / items.length) *
-                      (!isOpen ? items.length - 1 - index : index)
-                    }ms`,
-                  }),
-                }}
-                key={index}
-                onClick={() => {
-                  item.onClick()
-                  if (!item.keepMenuOnClick) {
-                    setIsOpen(false)
-                  }
-                }}
-              >
-                <StyledFloatButtonGroupButtonLabel
-                  style={{
-                    ...(animationType === 'zoom' && {
-                      transitionDelay: `${
-                        (TRANSITION_TIMING / items.length) *
-                        (isOpen ? items.length - 1 - index : index)
-                      }ms`,
-                    }),
-                  }}
-                >
-                  {item.label}
-                </StyledFloatButtonGroupButtonLabel>
-                <StyledFloatButtonGroupButtonIcon
-                  className="float-item-button__icon-wrapper"
-                  style={{
-                    ...((animationType === 'zoom' ||
-                      animationType === 'slide') && {
-                      transitionDelay: `${
-                        (TRANSITION_TIMING / items.length) *
-                        (isOpen ? items.length - 1 - index : index)
-                      }ms`,
-                    }),
-                  }}
-                >
-                  {item.icon}
-                </StyledFloatButtonGroupButtonIcon>
-              </StyledFloatButtonGroupButton>
-            )
-          })}
-        </StyledFloatButtonGroupItemsWrapper>
-
-        <StyledFloatButtonGroupToggleIcon
-          onClick={isOpen ? handleClose : handleOpen}
-        />
-      </StyledFloatButtonGroupContent>
-    </StyledFloatButtonGroup>
-  )
-}

package/raw/components/molecules/iconText/__snapshots__/index.test.tsx.snap

@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  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;
-  --font-weight-lg: 700;
-  --font-weight-md: 400;
-  --font-weight-sm: 400;
-}
-
-.c0[data-icon-position='left'] > *:first-child {
-  margin-right: 8px;
-}
-
-.c0[data-icon-position='left'] > *:last-child {
-  width: calc(100% - 24px);
-}
-
-.c0[data-icon-position='right'] > *:first-child {
-  width: calc(100% - 24px);
-}
-
-.c0[data-icon-position='right'] > *:last-child {
-  margin-left: 8px;
-}
-
-@media (max-width:767px) {
-  .c0[data-size='lg'] {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: var(--font-weight-lg);
-  }
-
-  .c0[data-size='md'] {
-    font-size: 14px;
-    line-height: 22px;
-    font-weight: var(--font-weight-md);
-  }
-
-  .c0[data-size='sm'] {
-    font-size: 13px;
-    line-height: 20px;
-    font-weight: var(----font-weight-sm);
-  }
-}
-
-<div
-  class="c0"
-  data-icon-position="left"
-  data-size="lg"
->
-  <img
-    src="https://source.unsplash.com/random/30x30"
-  />
-  Test Icon Text
-</div>
-`;

package/raw/components/molecules/iconText/index.stories.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { IconText, Props } from './index'
-
-export default {
-  component: IconText,
-  title: 'Molecules/IconText',
-}
-
-const Template: Story<Props> = (args) => (
-  <IconText {...args}>Icon with Text</IconText>
-)
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  size: 'lg',
-  iconPosition: 'left',
-  icon: <img src="https://source.unsplash.com/random/30x30" />,
-}

package/raw/components/molecules/iconText/index.styled.tsx

@@ -1,47 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledIconText = styled.div`
-  display: flex;
-  align-items: center;
-  --font-weight-lg: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-  --font-weight-md: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-  --font-weight-sm: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-
-  &[data-icon-position='left'] {
-    & > *:first-child {
-      margin-right: 8px;
-    }
-
-    & > *:last-child {
-      width: calc(100% - 24px);
-    }
-  }
-  &[data-icon-position='right'] {
-    & > *:first-child {
-      width: calc(100% - 24px);
-    }
-    & > *:last-child {
-      margin-left: 8px;
-    }
-  }
-
-  ${MediaQueries.mbDown} {
-    &[data-size='lg'] {
-      font-size: 16px;
-      line-height: 24px;
-      font-weight: var(--font-weight-lg);
-    }
-    &[data-size='md'] {
-      font-size: 14px;
-      line-height: 22px;
-      font-weight: var(--font-weight-md);
-    }
-    &[data-size='sm'] {
-      font-size: 13px;
-      line-height: 20px;
-      font-weight: var(----font-weight-sm);
-    }
-  }
-`

package/raw/components/molecules/iconText/index.test.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { IconText } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const iconText = render(
-    <MockTheme>
-      <IconText
-        size="lg"
-        iconPosition="left"
-        icon={<img src="https://source.unsplash.com/random/30x30" />}
-      >
-        Test Icon Text
-      </IconText>
-    </MockTheme>,
-  )
-
-  const self = iconText.container.firstChild
-
-  expect(self).toMatchSnapshot()
-
-  expect(self).toContainHTML('<img ')
-  expect(self).toContainHTML('Test Icon Text')
-  expect(self).toHaveAttribute('data-size', 'lg')
-})

package/raw/components/molecules/iconText/index.tsx

@@ -1,33 +0,0 @@
-import React, { ReactNode } from 'react'
-
-import { StyledIconText } from './index.styled'
-
-export type Props = {
-  size: 'lg' | 'md' | 'sm'
-  iconPosition: 'left' | 'right'
-  children: ReactNode
-  icon: JSX.Element
-  className?: string
-}
-
-const IconText = ({
-  size,
-  iconPosition,
-  className,
-  children,
-  icon: Icon,
-}: Props) => {
-  return (
-    <StyledIconText
-      className={className}
-      data-size={size}
-      data-icon-position={iconPosition}
-    >
-      {iconPosition === 'left' && Icon}
-      {children}
-      {iconPosition === 'right' && Icon}
-    </StyledIconText>
-  )
-}
-
-export { IconText }

package/raw/components/molecules/index.ts

@@ -1,39 +0,0 @@
-export { ArticleCard } from './articleCard'
-export { Breadcrumbs } from './breadcrumbs'
-export { CategoryCard } from './categoryCard'
-export { CheckboxGroup } from './checkboxGroup'
-export { DatePicker } from './datePicker'
-export { Dropdown } from './dropdown'
-export type { Option as DropdownOption } from './dropdown'
-export { IconText } from './iconText'
-export { Popup } from './popup'
-export { Modal } from './modal'
-export { ProgressBar } from './progressBar'
-export { RadioGroup } from './radioGroup'
-export type { RadioGroupOption } from './radioGroup'
-export * as SideMenu from './sidemenu'
-export { ScrollList } from './scrollList'
-export { Carousel } from './carousel'
-export { StatisticCard } from './statisticCard'
-export * as Table from './table'
-export { Tabs } from './tabs'
-export { DoctorInfo } from './doctorInfo'
-export { SurveyQuestionCard, SurveyThankyouCard } from './surveyQuestionCard'
-export { FloatButtonGroup } from './floatButtonGroup'
-export type { FloatButtonGroupType } from './floatButtonGroup'
-export { CookieAcceptConfirm } from './cookieAcceptConfirm'
-export { MobileBottomNavigation } from './mobileBottomNavigation'
-export type { MobileBottomNavigationProps } from './mobileBottomNavigation'
-export { MobileBottomNavigationIcon } from './mobileBottomNavigation/MobileBottomNavigationIcon'
-export type { MobileBottomNavigationIconProps } from './mobileBottomNavigation/MobileBottomNavigationIcon'
-export { SeoHead } from './seoHead'
-export type {
-  SEOData as SeoHeadSEOData,
-  Props as SeoHeadProps,
-} from './seoHead'
-export { LanguageSwitcher } from './languageSwitcher'
-export type { Props as LanguageSwitcherProps } from './languageSwitcher'
-export { AmpNextPage } from './ampNextPage'
-export type { Props as AmpNextPageProps } from './ampNextPage'
-export { DateRangePicker, DateRangePickerProps } from './dateRangePicker/'
-export type { DateRangeInterval } from './dateRangePicker/types'