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

package/src/components/molecules/languageSwitcher/index.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { LanguageSwitcher, Props } from './index'
-
-export default {
-  component: LanguageSwitcher,
-  title: 'Molecules/LanguageSwitcher',
-}
-
-const Template: Story<Props> = (args) => <LanguageSwitcher {...args} />
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  languageOptions: [
-    {
-      value: 'vi-VN',
-      label: 'vi',
-    },
-    {
-      value: 'en-PH',
-      label: 'en',
-    },
-    {
-      value: 'th-TH',
-      label: 'th',
-    },
-  ],
-  locale: 'vi-VN',
-}

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

@@ -1,23 +0,0 @@
-import { ThemeProps } from 'src/misc/theme'
-import styled from 'styled-components'
-
-export const StyledLanguageChangeLink = styled.a`
-  display: inline-flex;
-  position: relative;
-  flex-direction: row;
-  align-items: center;
-  padding: 7px 11px;
-  gap: 2px;
-
-  background: ${(props: ThemeProps) => props.theme.colors.white};
-  border: 1px solid ${(props: ThemeProps) => props.theme.colors.neutral100};
-  border-radius: 20px;
-
-  color: ${(props: ThemeProps) => props.theme.colors.gray600};
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 18px;
-  text-decoration: none;
-
-  cursor: pointer;
-`

package/src/components/molecules/languageSwitcher/index.tsx

@@ -1,68 +0,0 @@
-import React from 'react'
-
-import { Flag, FlagCountryType } from 'src/components/atoms'
-import { FlagLanguageType } from 'src/components/atoms/flag'
-import { LocaleType } from 'src/interfaces/types'
-
-import { StyledLanguageChangeLink } from './index.styled'
-import { Option, TooltipSelection } from './tooltipSelection'
-
-export type Props = {
-  languageOptions?: Option[]
-  locale: LocaleType
-}
-
-export const LanguageSwitcher = ({ languageOptions, locale }: Props) => {
-  const selectedLanguage = languageOptions?.find(
-    (option) => option.locale === locale,
-  )
-  if (!languageOptions?.length) {
-    return null
-  }
-
-  return (
-    <TooltipSelection
-      options={languageOptions}
-      selected={selectedLanguage.value}
-      label={
-        <LanguageLabel
-          locale={locale}
-          label={
-            selectedLanguage.label || locale.split('-')?.[0]?.toUpperCase()
-          }
-        />
-      }
-      onChange={(href) => {
-        if (typeof window !== 'undefined') {
-          window.location.href = href
-        }
-      }}
-      style={{ width: 100 }}
-      showSelected={true}
-      showIndicator={false}
-    />
-  )
-}
-
-export const LanguageLabel = ({
-  locale,
-  label,
-  href,
-}: {
-  locale: LocaleType
-  label: string
-  href?: string
-}) => {
-  return (
-    <StyledLanguageChangeLink href={href}>
-      <Flag
-        country={locale?.split('-')?.[1]?.toUpperCase() as FlagCountryType}
-        width={16}
-        height={16}
-        rounded
-        language={locale?.split('-')?.[0] as FlagLanguageType}
-      />
-      <span>{label}</span>
-    </StyledLanguageChangeLink>
-  )
-}

package/src/components/molecules/languageSwitcher/tooltipSelection/index.styled.tsx

@@ -1,69 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledSelectionContainer = styled.div`
-  position: relative;
-  display: inline-block;
-`
-
-export const StyledSelectionLabel = styled.div`
-  position: relative;
-`
-
-export const StyleSelectionPopup = styled.div`
-  position: absolute;
-  z-index: 21;
-  top: 100%;
-  right: 0;
-  width: 327px;
-  padding: 8px;
-  background: white;
-  border-radius: 4px;
-  filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));
-
-  &[data-is-open='false'] {
-    display: none;
-  }
-  &[data-show-indicator='true'] {
-    &:before {
-      position: absolute;
-      right: 11px;
-      bottom: 100%;
-      width: 0;
-      height: 0;
-      border: 0.5rem solid transparent;
-      border-top: none;
-      border-bottom-color: #fff;
-      content: '';
-      filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
-    }
-  }
-`
-
-export const StyledOption = styled.div`
-  display: flex;
-  height: 40px;
-  align-items: center;
-  justify-content: space-between;
-
-  padding: 0 16px;
-  border-radius: 6px;
-  cursor: pointer;
-
-  .check-icon {
-    width: 16px;
-    height: 16px;
-  }
-  &[data-selected='false'] {
-    background-color: ${(props: ThemeProps) => props.theme.colors.gray100};
-  }
-`
-export const StyledPopupBackground = styled.div`
-  position: fixed;
-  z-index: 20;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  cursor: default;
-`

package/src/components/molecules/languageSwitcher/tooltipSelection/index.tsx

@@ -1,84 +0,0 @@
-import React, { useState } from 'react'
-
-import { Check } from 'assets/svg'
-import { Text } from 'components/atoms/text'
-import { CSSProperties } from 'styled-components'
-
-import {
-  StyledOption,
-  StyledPopupBackground,
-  StyledSelectionContainer,
-  StyledSelectionLabel,
-  StyleSelectionPopup,
-} from './index.styled'
-export type Option = {
-  value: string
-  label: string
-  locale?: string
-}
-export type Props = {
-  options: Option[]
-  selected: string | number
-  label?: string | JSX.Element
-  labelRenderer?: (isOpen?: boolean) => string | JSX.Element
-  onChange: (s: string) => void
-  showSelected?: boolean
-  style?: CSSProperties
-  showIndicator?: boolean
-}
-
-const TooltipSelection = ({
-  options,
-  label,
-  labelRenderer,
-  selected,
-  onChange,
-  showSelected = true,
-  style = {},
-  showIndicator = true,
-}: Props) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false)
-
-  return (
-    <>
-      <StyledSelectionContainer>
-        <StyledSelectionLabel
-          onClick={() => setIsOpen((value: boolean) => !value)}
-        >
-          {label || labelRenderer?.(isOpen) || null}
-          <StyleSelectionPopup
-            data-is-open={isOpen}
-            style={style}
-            data-show-indicator={showIndicator}
-          >
-            {options.map((option, index) => (
-              <StyledOption
-                key={index}
-                data-selected={showSelected && selected === option.value}
-                onClick={(e) => {
-                  if (selected !== option.value) {
-                    onChange(option.value)
-                    setIsOpen((value: boolean) => !value)
-                  }
-                  e.stopPropagation()
-                }}
-              >
-                <Text size="p3">{option.label}</Text>
-                {showSelected && selected === option.value && (
-                  <img src={Check} alt="check" className="check-icon" />
-                )}
-              </StyledOption>
-            ))}
-          </StyleSelectionPopup>
-        </StyledSelectionLabel>
-      </StyledSelectionContainer>
-      {isOpen && (
-        <StyledPopupBackground
-          onClick={() => setIsOpen(false)}
-        ></StyledPopupBackground>
-      )}
-    </>
-  )
-}
-
-export { TooltipSelection }

package/src/components/molecules/mobileBottomNavigation/MobileBottomNavigationIcon.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-
-import { Text } from 'components/atoms'
-import { theme } from 'misc/theme'
-
-import { StyledBadge, StyledMobileBottomNavigationIcon } from './index.styled'
-
-export type MobileBottomNavigationIconProps = {
-  badgeAmount?: string
-  disabled?: boolean
-  hasBadge?: boolean
-  icon: JSX.Element
-  isActive?: boolean
-  isSpecial?: boolean
-  label?: string
-  on?: string
-} & React.HTMLAttributes<HTMLDivElement>
-
-const MobileBottomNavigationIcon = ({
-  badgeAmount,
-  disabled = false,
-  hasBadge = false,
-  icon,
-  isActive = false,
-  isSpecial = false,
-  label,
-  ...props
-}: MobileBottomNavigationIconProps) => {
-  return (
-    <StyledMobileBottomNavigationIcon
-      data-is-special={isSpecial}
-      data-is-active={isActive}
-      data-is-disabled={disabled}
-      {...props}
-    >
-      <div className="mobile-navigation-icon" data-no-label={!Boolean(label)}>
-        {hasBadge && (
-          <StyledBadge data-no-label={!Boolean(label)}>
-            <Text size="s5" type="semiBold" color={theme.colors.white}>
-              {badgeAmount}
-            </Text>
-          </StyledBadge>
-        )}
-        {icon}
-      </div>
-      {label && <span className="mobile-navigation-label">{label}</span>}
-    </StyledMobileBottomNavigationIcon>
-  )
-}
-
-export { MobileBottomNavigationIcon }

package/src/components/molecules/mobileBottomNavigation/index.stories.tsx

@@ -1,173 +0,0 @@
-import React, { useState } from 'react'
-
-import { useArgs } from '@storybook/client-api'
-import { Story } from '@storybook/react/types-6-0'
-
-import { MobileBottomNavigation, MobileBottomNavigationProps as Props } from '.'
-import { Button } from '../../atoms/button'
-import { Icon } from '../../atoms/icons'
-import {
-  StyledMobileBottomArticleNavigationProgress,
-  StyledMobileHorizonNavigation,
-} from './index.styled'
-
-export default {
-  component: MobileBottomNavigation,
-  title: 'Molecules/MobileBottomNavigation',
-}
-
-const DiscoverTemplate: Story<Props> = (args) => (
-  <MobileBottomNavigation {...args}>
-    <StyledMobileBottomArticleNavigationProgress
-      id="progress"
-      style={{
-        width: 40 * 100 + '%',
-      }}
-    />
-    <MobileBottomNavigation.Icon
-      icon={<Icon.Home isActive />}
-      label="Home"
-      isActive
-    />
-    <MobileBottomNavigation.Icon icon={<Icon.Scale />} label="Health Tools" />
-    <MobileBottomNavigation.Icon
-      icon={<Icon.PlusSpecial />}
-      label="Booking"
-      isSpecial
-    />
-    <MobileBottomNavigation.Icon icon={<Icon.Community />} label="Community" />
-    <MobileBottomNavigation.Icon icon={<Icon.Stethoscope />} label="Care" />
-  </MobileBottomNavigation>
-)
-
-export const Discover = DiscoverTemplate.bind({})
-
-Discover.args = {}
-
-const HealthToolTemplate: Story<Props> = (args) => (
-  <MobileBottomNavigation {...args}>
-    <MobileBottomNavigation.Icon icon={<Icon.Home />} label="Home" />
-    <MobileBottomNavigation.Icon
-      icon={<Icon.Scale isActive />}
-      label="Health Tools"
-      isActive
-    />
-    <MobileBottomNavigation.Icon
-      icon={<Icon.PlusSpecial />}
-      label="Booking"
-      isSpecial
-    />
-    <MobileBottomNavigation.Icon icon={<Icon.Community />} label="Community" />
-    <MobileBottomNavigation.Icon icon={<Icon.Stethoscope />} label="Care" />
-  </MobileBottomNavigation>
-)
-
-export const HealthTool = HealthToolTemplate.bind({})
-
-HealthTool.args = {}
-
-const CommunityTemplate: Story<Props> = (args) => (
-  <MobileBottomNavigation {...args}>
-    <MobileBottomNavigation.Icon
-      icon={<Icon.Home />}
-      label="Home"
-      hasBadge
-      badgeAmount="12K"
-    />
-    <MobileBottomNavigation.Icon
-      icon={<Icon.Scale />}
-      label="Health Tools"
-      hasBadge
-      badgeAmount="8K"
-    />
-    <MobileBottomNavigation.Icon
-      icon={<Icon.EditSpecial />}
-      label="New Post"
-      isSpecial
-    />
-    <MobileBottomNavigation.Icon
-      icon={<Icon.Community isActive />}
-      label="Community"
-      isActive
-    />
-    <MobileBottomNavigation.Icon icon={<Icon.Stethoscope />} label="Care" />
-  </MobileBottomNavigation>
-)
-
-export const Community = CommunityTemplate.bind({})
-
-Community.args = {}
-
-const CareTemplate: Story<Props> = (args) => (
-  <MobileBottomNavigation {...args}>
-    <MobileBottomNavigation.Icon icon={<Icon.Home />} label="Home" />
-    <MobileBottomNavigation.Icon icon={<Icon.Scale />} label="Health Tools" />
-    <MobileBottomNavigation.Icon
-      icon={<Icon.PlusSpecial />}
-      label="Booking"
-      isSpecial
-    />
-    <MobileBottomNavigation.Icon icon={<Icon.Community />} label="Community" />
-    <MobileBottomNavigation.Icon
-      icon={<Icon.Stethoscope isActive />}
-      label="Care"
-      isActive
-    />
-  </MobileBottomNavigation>
-)
-
-export const Care = CareTemplate.bind({})
-
-Care.args = {}
-
-const CareDoctorTemplate: Story<Props> = (args) => {
-  const [isCollapsed, setIsCollapsed] = useState(false)
-
-  return (
-    <div style={{ height: '300vh' }}>
-      <Button size="lg" onClick={() => setIsCollapsed((v) => !v)}>
-        Toggle
-      </Button>
-      <MobileBottomNavigation {...args} isCollapsed={isCollapsed}>
-        <MobileBottomNavigation.Icon
-          disabled={true}
-          icon={<Icon.Home />}
-          label="Home asdas das asdasdas dsadasd"
-        />
-        <MobileBottomNavigation.Icon
-          icon={<Icon.Scale />}
-          label="Health Tools"
-        />
-        <MobileBottomNavigation.Icon
-          icon={<Icon.Community />}
-          label="Community"
-        />
-        <MobileBottomNavigation.Icon icon={<Icon.Stethoscope />} label="Care" />
-      </MobileBottomNavigation>
-    </div>
-  )
-}
-
-export const CareDoctor = CareDoctorTemplate.bind({})
-
-CareDoctor.args = {
-  numberOfChildren: 4,
-}
-
-const ArticleTemplate: Story<Props> = (args) => (
-  <StyledMobileHorizonNavigation {...args}>
-    <MobileBottomNavigation.Icon icon={<Icon.Like />} />
-    <MobileBottomNavigation.Icon icon={<Icon.Share />} />
-    <MobileBottomNavigation.Icon icon={<Icon.Bookmark />} />
-    <MobileBottomNavigation.Icon
-      icon={<Icon.Ask isActive />}
-      hasBadge
-      badgeAmount="16"
-    />
-    <MobileBottomNavigation.Icon icon={<Icon.Font />} />
-  </StyledMobileHorizonNavigation>
-)
-
-export const ArticleHorizon = ArticleTemplate.bind({})
-
-ArticleHorizon.args = {}

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

@@ -1,150 +0,0 @@
-import styled, { keyframes } from 'styled-components'
-
-import { theme } from '../../../misc/theme'
-
-const slideInUp = keyframes`
-  from {
-    transform: translateY(100%);
-    visibility: visible;
-  }
-
-  to {
-    transform: translateY(0);
-  }
-`
-
-export const slideOutDown = keyframes`
-  from {
-    transform: translate(0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    transform: translate(0, 100%);
-  }
-`
-export const StyledMobileBottomNavigationIcon = styled.div`
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-items: center;
-  gap: 4px;
-
-  .mobile-navigation-label {
-    font-weight: 500;
-    font-size: 10px;
-    line-height: 16px;
-    color: ${theme.colors.gray600};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 70px;
-  }
-
-  .mobile-navigation-icon {
-    position: relative;
-    height: 24px;
-    &[data-no-label='true'] {
-      border-radius: 50%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      padding: 0px;
-      gap: 16px;
-      width: 40px;
-      height: 40px;
-      transition: background-color 200ms ease-in;
-      &:hover {
-        background-color: ${theme.colors.blue50};
-      }
-    }
-  }
-
-  &[data-is-special='true'] {
-    .mobile-navigation-icon {
-      height: 32px;
-    }
-  }
-
-  &[data-is-active='true'] {
-    .mobile-navigation-label {
-      color: ${theme.colors.primaryBase};
-    }
-  }
-
-  &[data-is-disabled='true'] {
-    opacity: 0.2;
-  }
-`
-
-export const StyledMobileBottomNavigation = styled.div<{
-  numberOfChildren: number
-  on?: string
-}>`
-  z-index: 100;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  max-height: 64px;
-  min-height: 64px;
-  display: grid;
-  grid-template-columns: repeat(${(props) => props.numberOfChildren}, 1fr);
-  grid-template-rows: 1fr;
-  grid-column-gap: 0px;
-  grid-row-gap: 0px;
-  align-items: flex-end;
-  padding-bottom: 8px;
-  padding-top: 4px;
-
-  background-color: ${theme.colors.white};
-  border: 1px solid ${theme.colors.neutral100};
-  a {
-    text-decoration: none;
-  }
-  &[data-is-collapsed='true'] {
-    animation: ${slideOutDown} 500ms ease-in-out forwards;
-  }
-
-  &[data-is-collapsed='false'] {
-    animation: ${slideInUp} 500ms ease-in-out forwards;
-  }
-`
-
-export const StyledBadge = styled.span`
-  position: absolute;
-  left: 100%;
-  transform: translate(-10px, calc(-50% + 3px));
-  background-color: ${theme.colors.green800};
-  border-radius: 32px;
-  border: 2px solid ${theme.colors.white};
-  padding: 1px 4px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 20px;
-  aspect-ratio: 1;
-  &[data-no-label='true'] {
-    left: 0;
-    transform: translate(22px, -50%);
-  }
-`
-
-export const StyledMobileBottomArticleNavigationProgress = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 3px;
-  background-color: ${theme.colors.primaryBase};
-  transition: width 150ms linear;
-`
-
-export const StyledMobileHorizonNavigation = styled.div`
-  a {
-    text-decoration: none;
-  }
-`

package/src/components/molecules/mobileBottomNavigation/index.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-
-import { StyledMobileBottomNavigation } from './index.styled'
-import { MobileBottomNavigationIcon } from './MobileBottomNavigationIcon'
-
-export type MobileBottomNavigationProps = {
-  children: React.ReactNode
-  numberOfChildren: number
-  on?: string
-  isCollapsed?: boolean
-} & React.HTMLAttributes<HTMLDivElement>
-
-const MobileBottomNavigationWrapper: React.FC<MobileBottomNavigationProps> = ({
-  children,
-  numberOfChildren = 5,
-  on = '',
-  isCollapsed = false,
-  ...rest
-}) => {
-  return (
-    <StyledMobileBottomNavigation
-      numberOfChildren={numberOfChildren}
-      on={on}
-      data-is-collapsed={isCollapsed}
-      {...rest}
-    >
-      {children}
-    </StyledMobileBottomNavigation>
-  )
-}
-
-export interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<MobileBottomNavigationProps> {
-  Icon: typeof MobileBottomNavigationIcon
-}
-
-const MobileBottomNavigation =
-  MobileBottomNavigationWrapper as CompoundedComponent
-
-MobileBottomNavigation.Icon = MobileBottomNavigationIcon
-export { MobileBottomNavigation }

package/src/components/molecules/modal/__snapshots__/index.test.tsx.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `null`;