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

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

@@ -0,0 +1,32 @@
+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/raw/components/molecules/languageSwitcher/index.styled.tsx

@@ -0,0 +1,23 @@
+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/raw/components/molecules/languageSwitcher/index.tsx

@@ -0,0 +1,68 @@
+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/raw/components/molecules/languageSwitcher/tooltipSelection/index.styled.tsx

@@ -0,0 +1,69 @@
+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/raw/components/molecules/languageSwitcher/tooltipSelection/index.tsx

@@ -0,0 +1,84 @@
+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/raw/components/molecules/mobileBottomNavigation/MobileBottomNavigationIcon.tsx

@@ -0,0 +1,51 @@
+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/raw/components/molecules/mobileBottomNavigation/index.stories.tsx

@@ -0,0 +1,173 @@
+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/raw/components/molecules/mobileBottomNavigation/index.styled.tsx

@@ -0,0 +1,150 @@
+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/raw/components/molecules/mobileBottomNavigation/index.tsx

@@ -0,0 +1,41 @@
+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/raw/components/molecules/modal/__snapshots__/index.test.tsx.snap

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