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

package/src/components/organisms/navigationLayout/ampSideBar/index.styled.tsx

@@ -1,151 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledAmpSidebar = styled.div`
-  amp-sidebar {
-    width: 100vw;
-    max-width: 100vw;
-    background-color: ${(props: ThemeProps) => props.theme.colors.neutral50};
-  }
-
-  .nav-card {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    align-items: center;
-    padding: 16px;
-    border-radius: 6px;
-    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-
-    span {
-      margin-top: 4px;
-      font-size: 13px;
-      font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-    }
-
-    svg {
-      margin-bottom: 4px;
-    }
-
-    &.active {
-      background: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-      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);
-      color: white;
-    }
-
-    &:not(.active) {
-      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04),
-        0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
-      color: ${(props: ThemeProps) => props.theme.colors.gray800};
-    }
-  }
-
-  .categories__spotlight {
-    display: grid;
-    margin: 16px;
-    margin-bottom: 32px;
-    grid-gap: 8px;
-    grid-template-columns: 1fr 1fr;
-
-    a {
-      text-decoration: none;
-    }
-  }
-
-  .amp__menu-header {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-
-    > div:first-child > amp-img {
-      margin-left: 1rem;
-    }
-
-    svg {
-      margin-left: 16px;
-    }
-
-    > div {
-      align-self: center;
-
-      &:nth-child(2) {
-        justify-self: center;
-      }
-    }
-  }
-
-  .logo {
-    margin: 22px 0;
-
-    img {
-      object-fit: contain;
-    }
-  }
-
-  .categories {
-    margin: 0 16px;
-
-    li {
-      position: relative;
-      display: block;
-      width: 100%;
-
-      + li {
-        border-top: 1px solid
-          ${(props: ThemeProps) => props.theme.colors.neutral100};
-      }
-
-      &.health-tool {
-        display: flex;
-        align-items: center;
-
-        amp-img {
-          margin-right: 1rem;
-        }
-        + li {
-          border-top: none;
-        }
-
-        a {
-          display: flex;
-          align-items: center;
-        }
-      }
-
-      a {
-        display: block;
-        margin: 16px 0;
-        color: ${(props: ThemeProps) => props.theme.colors.gray800};
-        text-decoration: none;
-      }
-
-      &:not(.spotlight-li)::after {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        content: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 9L5 5L1 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-      }
-    }
-  }
-`
-
-export const StyledAmpSearchBox = styled.a`
-  position: relative;
-  margin: 0 16px 24px;
-  display: block;
-  text-decoration: none;
-
-  svg {
-    position: absolute;
-    left: 12px;
-    top: 12px;
-  }
-
-  .amp-search-input {
-    border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
-    height: 48px;
-    border-radius: 6px;
-    background-color: ${(props: ThemeProps) => props.theme.colors.white};
-    padding-left: 48px;
-  }
-`

package/src/components/organisms/navigationLayout/ampSideBar/index.tsx

@@ -1,276 +0,0 @@
-import React from 'react'
-
-import {
-  TogetherIcon,
-  HealthToolsIcon,
-  DiscoverIcon,
-  HelloCareIcon,
-  SehatBadge,
-} from 'assets/svg'
-import { LocaleType } from 'interfaces/types'
-import { SpotlightSummary } from 'together/interfaces/types'
-
-import { Heading, Logo } from '../../../atoms'
-import { LOCALE_SPECS } from '../constants'
-import { StyledCategoryItemAll } from '../menuCategoriesList/index.styled'
-import { StyledImageWrapper } from '../menuServiceList/index.styled'
-import {
-  StyledAmpCategoryCard,
-  StyledCloseButton,
-} from '../navigationBar/index.styled'
-import { SearchIcon } from '../navigationBar/SearchIcon'
-import { Category, HealthTool, HealthToolByCategory } from '../types'
-import { useTranslation } from '../utils'
-import { StyledAmpSearchBox, StyledAmpSidebar } from './index.styled'
-
-export type AmpSidebarProps = {
-  locale: LocaleType
-  categoriesSSR: Category[]
-  healthToolsSSR: HealthToolByCategory[]
-  spotlightsSSR?: SpotlightSummary[]
-  serviceUrls: {
-    TOGETHER_URL_FE: string
-    CARE_URL_FE: string
-    DISCOVER_URL_FE: string
-  }
-  together: {
-    TOGETHER_MENU_COUNTRIES_ENABLED: LocaleType[]
-    ENABLE_COMMUNITY_PROFILE_MENU_LOCALES: LocaleType[]
-    togetherApiDomain: string
-  }
-  care: {
-    CARE_MENU_COUNTRIES_ENABLED: LocaleType[]
-    ENABLE_CARE_PROFILE_MENU_LOCALES: LocaleType[]
-    careApiDomain: string
-  }
-  basePath: string
-  searchPlaceholder: string
-}
-export const AmpSidebar = ({
-  locale,
-  categoriesSSR,
-  healthToolsSSR,
-  spotlightsSSR,
-  serviceUrls,
-  together,
-  care,
-  basePath,
-  searchPlaceholder,
-}: AmpSidebarProps) => {
-  const f = useTranslation()
-  return (
-    <StyledAmpSidebar>
-      <amp-sidebar
-        id="discover-amp-sidebar"
-        layout="nodisplay"
-        style={{ width: '100vw', maxWidth: '100vw' }}
-      >
-        <amp-nested-menu layout="fill">
-          <ul style={{ paddingBottom: 24 }}>
-            <div className="amp__menu-header">
-              <StyledCloseButton
-                on="tap:discover-amp-sidebar.close"
-                role="button"
-                tabIndex={1}
-              >
-                <svg
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M18 6L6 18M18 18L6 6"
-                    stroke="#3E3F58"
-                    strokeWidth="1.3"
-                    strokeLinecap="round"
-                  />
-                </svg>
-              </StyledCloseButton>
-              <div className="logo">
-                <Logo
-                  height="32px"
-                  width="121px"
-                  type={LOCALE_SPECS.LOGO_TYPE as any}
-                  isAmp={true}
-                  badge={
-                    locale === 'id-ID' ? (
-                      <amp-img src={SehatBadge} width="56" height="23" />
-                    ) : undefined
-                  }
-                />
-              </div>
-              <div></div>
-            </div>
-
-            <StyledAmpSearchBox href="/search">
-              <SearchIcon />
-
-              <input
-                className="amp-search-input"
-                type="text"
-                placeholder={searchPlaceholder}
-                readOnly
-              />
-            </StyledAmpSearchBox>
-
-            <div className="categories__spotlight">
-              <StyledAmpCategoryCard
-                // className="active"
-                on="tap:AMP.setState({healthToolsActive: true})"
-                className="nav-card active"
-                data-amp-bind-class="healthToolsActive ? 'nav-card active' : 'nav-card not-active'"
-                role="button"
-                tabIndex={1}
-              >
-                <amp-img src={DiscoverIcon} width="48" height="48"></amp-img>
-                <span>{f('home.navigator.menuItem.discover')}</span>
-              </StyledAmpCategoryCard>
-              <StyledAmpCategoryCard
-                role="button"
-                tabIndex={1}
-                className="nav-card"
-                on="tap:AMP.setState({healthToolsActive: false})"
-                data-amp-bind-class="healthToolsActive ? 'nav-card not-active' : 'nav-card active'"
-              >
-                <amp-img src={HealthToolsIcon} width="48" height="48"></amp-img>
-                <span>{f('home.navigator.menuItem.healthTools')}</span>
-              </StyledAmpCategoryCard>
-              {together.TOGETHER_MENU_COUNTRIES_ENABLED.includes(locale) && (
-                <a href={serviceUrls.TOGETHER_URL_FE}>
-                  <StyledAmpCategoryCard
-                    role="button"
-                    tabIndex={1}
-                    className="nav-card"
-                    on="tap:AMP.setState({healthToolsActive: false})"
-                  >
-                    <amp-img
-                      src={TogetherIcon}
-                      width="48"
-                      height="48"
-                    ></amp-img>
-                    <span>{f('home.navigator.menuItem.together')}</span>
-                  </StyledAmpCategoryCard>
-                </a>
-              )}
-              {care.CARE_MENU_COUNTRIES_ENABLED.includes(locale) && (
-                <a href={serviceUrls.CARE_URL_FE}>
-                  <StyledAmpCategoryCard
-                    role="button"
-                    tabIndex={1}
-                    className="nav-card"
-                  >
-                    <amp-img
-                      src={HelloCareIcon}
-                      width="48"
-                      height="48"
-                    ></amp-img>
-                    <span>{f('home.navigator.menuItem.helloCare')}</span>
-                  </StyledAmpCategoryCard>
-                </a>
-              )}
-            </div>
-            <ul
-              className="categories"
-              data-amp-bind-hidden="!healthToolsActive"
-              style={{ marginBottom: 24 }}
-            >
-              <Heading tag="h3" fontWeight="bold" style={{ marginBottom: 24 }}>
-                {f('home.navigator.menuItem.discover')}
-              </Heading>
-              {categoriesSSR &&
-                categoriesSSR.length > 1 &&
-                categoriesSSR.map((c) => (
-                  <li key={c.name}>
-                    <a href={c.permalink}>{c.displayName}</a>
-                  </li>
-                ))}
-              <a
-                style={{ textDecoration: 'none' }}
-                href={`${serviceUrls.DISCOVER_URL_FE}/categories/`}
-              >
-                <StyledCategoryItemAll key={'all-categories'}>
-                  {f('home.navigator.menuItem.allCategories')}
-                  <StyledImageWrapper>
-                    <amp-img
-                      src={`${basePath}/svg/chevronRightActive.svg`}
-                      style={{ width: '16px', height: '16px' }}
-                      height="16"
-                      width="16"
-                      alt={f('home.navigator.menuItem.allCategories')}
-                    />
-                  </StyledImageWrapper>
-                </StyledCategoryItemAll>
-              </a>
-            </ul>
-
-            <ul
-              className="categories"
-              data-amp-bind-hidden="!healthToolsActive"
-            >
-              <Heading tag="h3" fontWeight="bold" style={{ marginBottom: 24 }}>
-                {f('home.navigator.menuItem.spotlights')}
-              </Heading>
-              {spotlightsSSR &&
-                spotlightsSSR.length > 0 &&
-                spotlightsSSR.map((c) => (
-                  <li key={c.id} className="spotlight-li">
-                    <a href={c.permalink}>{c.name}</a>
-                  </li>
-                ))}
-              <a
-                style={{ textDecoration: 'none' }}
-                href={`${serviceUrls.DISCOVER_URL_FE}/spotlight/`}
-              >
-                <StyledCategoryItemAll key={'all-spotlight'}>
-                  {f('home.navigator.menuItem.allSpotlight')}
-                  <StyledImageWrapper>
-                    <amp-img
-                      src={`${basePath}/svg/chevronRightActive.svg`}
-                      style={{ width: '16px', height: '16px' }}
-                      height="16"
-                      width="16"
-                      alt={f('home.navigator.menuItem.allSpotlight')}
-                    />
-                  </StyledImageWrapper>
-                </StyledCategoryItemAll>
-              </a>
-            </ul>
-            <ul
-              className="categories"
-              data-amp-bind-hidden="healthToolsActive"
-              hidden
-            >
-              {healthToolsSSR &&
-                healthToolsSSR.length > 1 &&
-                healthToolsSSR.map(
-                  (category: HealthToolByCategory, index) =>
-                    category.healthTools &&
-                    category.healthTools.length > 0 && (
-                      <React.Fragment key={index}>
-                        <Heading tag="h4" fontWeight="bold">
-                          {category.name}
-                        </Heading>
-                        {category.healthTools.map((healthtool: HealthTool) => (
-                          <li key={healthtool.title} className="health-tool">
-                            <a href={healthtool.link}>
-                              <amp-img
-                                width="32"
-                                height="32"
-                                src={healthtool.icon}
-                              ></amp-img>
-                              <span>{healthtool.title}</span>
-                            </a>
-                          </li>
-                        ))}
-                      </React.Fragment>
-                    ),
-                )}
-            </ul>
-          </ul>
-        </amp-nested-menu>
-      </amp-sidebar>
-    </StyledAmpSidebar>
-  )
-}

package/src/components/organisms/navigationLayout/assets/check.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.3346 4L6.0013 11.3333L2.66797 8" stroke="#737373" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/components/organisms/navigationLayout/assets/chevronDown.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 6L8 10L4 6" stroke="#1B3250" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/components/organisms/navigationLayout/assets/chevronRightWhite.svg

@@ -1,3 +0,0 @@
-<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.5 12L10.5 8L6.5 4" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/components/organisms/navigationLayout/assets/chevronUpBlue.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 10L8 6L12 10" stroke="#2D87F3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/components/organisms/navigationLayout/assets/closeLight.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 6L6 18" stroke="#262626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6 6L18 18" stroke="#262626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/components/organisms/navigationLayout/assets/closeWhite.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 6L6 18" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6 6L18 18" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/components/organisms/navigationLayout/assets/hamburgerMenu.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 12H20" stroke="#262626" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4 6H20" stroke="#262626" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4 18H20" stroke="#262626" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/components/organisms/navigationLayout/assets/index.js

@@ -1,19 +0,0 @@
-import Check from './check.svg'
-import ChevronDown from './chevronDown.svg'
-import ChevronRightWhiteIcon from './chevronRightWhite.svg'
-import ChevronUpBlue from './chevronUpBlue.svg'
-import CloseLightIcon from './closeLight.svg'
-import CloseWhiteIcon from './closeWhite.svg'
-import HamburgerMenuIcon from './hamburgerMenu.svg'
-import InfoLightIcon from './info-light.svg'
-
-export {
-  CloseLightIcon,
-  HamburgerMenuIcon,
-  CloseWhiteIcon,
-  InfoLightIcon,
-  ChevronDown,
-  ChevronUpBlue,
-  Check,
-  ChevronRightWhiteIcon,
-}

package/src/components/organisms/navigationLayout/assets/info-light.svg

@@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="#2D87F3" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10 13.7499V9.58325" stroke="#2D87F3" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10 6.25H10.0125" stroke="#2D87F3" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>