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

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

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

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

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

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

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

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

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

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

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

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

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