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

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

@@ -0,0 +1,310 @@
+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/src/components/molecules/floatButtonGroup/index.tsx

@@ -0,0 +1,155 @@
+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/src/components/molecules/iconText/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,64 @@
+// 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/src/components/molecules/iconText/index.stories.tsx

@@ -0,0 +1,22 @@
+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/src/components/molecules/iconText/index.styled.tsx

@@ -0,0 +1,47 @@
+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/src/components/molecules/iconText/index.test.tsx

@@ -0,0 +1,31 @@
+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/src/components/molecules/iconText/index.tsx

@@ -0,0 +1,33 @@
+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/src/components/molecules/index.ts

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