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

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

@@ -0,0 +1,162 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import { throttle } from 'lodash'
+import { setCookie } from 'misc/cookieHelper'
+
+import { CloseWhiteIcon, CloseLightIcon } from '../assets'
+import { SiteType } from '../types'
+import {
+  StyledSiteWideContainer,
+  StyledIcon,
+  StyledCloseIconWrapper,
+} from './index.styled'
+
+export type Props = {
+  icon: string
+  content: string
+  isMobile?: boolean
+  isCollapsed?: boolean
+  type?: 'article' | 'category' | 'home' | 'other'
+  onClose?: () => void
+  setBannerClosed?: (v: boolean) => void
+
+  dispatch?: (params: any) => void
+  dispatchActionType?: string
+  cookieName?: string
+  isAmp?: boolean
+  siteType?: SiteType
+  _overrideCloseHandler?: () => void
+
+  dataEventCategory?: string
+  dataEventAction?: string
+  dataEventLabel?: string
+  dataTracking?: string
+}
+
+const SiteWide = ({
+  icon,
+  content,
+  isCollapsed,
+  isMobile,
+  type,
+  onClose,
+  setBannerClosed,
+
+  dispatch,
+  dispatchActionType,
+  cookieName,
+  _overrideCloseHandler,
+  isAmp,
+  siteType,
+
+  dataEventCategory = 'Header Banner',
+  dataEventAction = 'Close Click',
+  dataEventLabel = '',
+  dataTracking = 'true',
+}: Props) => {
+  const [isLocalCollapse, setIsLocalCollapse] = useState(false)
+  const [isScrollCollapse, setIsScrollCollapse] = useState(false)
+  let formattedContent = content
+
+  if (isAmp) {
+    formattedContent = formattedContent
+      .replace('data-event', 'data-vars-event')
+      .replace(
+        `data-vars-event-category="${dataEventCategory}"`,
+        `data-vars-event-category="${dataEventCategory}" data-vars-tracking="${dataTracking}"`,
+      )
+  }
+  const handleCLoseSitewide = () => {
+    setIsLocalCollapse(true)
+    if (_overrideCloseHandler) _overrideCloseHandler()
+    else {
+      onClose && onClose()
+      cookieName && setCookie(cookieName, 'true')
+      if (type && dispatch)
+        dispatch({
+          type: dispatchActionType,
+          payload: {
+            type,
+          },
+        })
+    }
+  }
+
+  const scrollY = useRef<number>(64)
+  useEffect(() => {
+    const scrolling = throttle(() => {
+      if (window.scrollY < scrollY.current) {
+        setIsScrollCollapse(false)
+      } else if (window.scrollY > 64) {
+        setIsScrollCollapse(true)
+      }
+
+      scrollY.current = window.scrollY
+    }, 300)
+
+    window.addEventListener('scroll', scrolling)
+    return () => {
+      window.removeEventListener('scroll', scrolling)
+    }
+  }, [])
+
+  const closeOnAmp = {
+    on:
+      'tap:sitewide-container.hide(),site-header.toggleClass(class="amp-closed")',
+  }
+  const isMarryBaby = siteType === 'marryBaby'
+  const closeIcon = isMarryBaby ? CloseLightIcon : CloseWhiteIcon
+
+  useEffect(() => {
+    setBannerClosed &&
+      setBannerClosed(isLocalCollapse || isCollapsed || isScrollCollapse)
+  }, [setBannerClosed, isLocalCollapse, isCollapsed, isScrollCollapse])
+
+  return (
+    <StyledSiteWideContainer
+      data-is-mobile={isMobile}
+      data-is-collapse={isLocalCollapse || isCollapsed || isScrollCollapse}
+      data-is-marrybaby={isMarryBaby}
+    >
+      {icon ? (
+        <StyledIcon data-is-marrybaby={isMarryBaby}>
+          {!isAmp ? (
+            <img src={icon} className="icon" data-is-mobile={isMobile} />
+          ) : (
+            <amp-img src={icon} width="76" height="52" />
+          )}
+        </StyledIcon>
+      ) : null}
+      {content ? (
+        <span
+          className="content"
+          data-is-marrybaby={isMarryBaby}
+          data-is-mobile={isMobile}
+          dangerouslySetInnerHTML={{ __html: formattedContent }}
+        />
+      ) : null}
+
+      <StyledCloseIconWrapper
+        role="button"
+        tabIndex={0}
+        {...closeOnAmp}
+        data-is-marrybaby={isMarryBaby}
+        data-vars-event-category={dataEventCategory}
+        data-vars-event-action={dataEventAction}
+        data-vars-event-label={dataEventLabel || ''}
+        data-vars-tracking={dataTracking || ''}
+        className="amp-close-banner"
+        onClick={handleCLoseSitewide}
+        data-is-mobile={isMobile}
+      >
+        {isAmp ? (
+          <amp-img src={closeIcon} width="24" height="24" />
+        ) : (
+          <img src={closeIcon} className="close-icon" />
+        )}
+      </StyledCloseIconWrapper>
+    </StyledSiteWideContainer>
+  )
+}
+
+export { SiteWide }

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

@@ -0,0 +1,119 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+export const StyledSponsoredBy = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0;
+
+  &[data-type-mobile='true'] {
+    justify-content: space-between;
+  }
+
+  amp-img img {
+    object-fit: contain;
+    object-position: right;
+  }
+`
+
+export const StyledStickySponsoredBy = styled.div`
+  display: flex;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  border-top: 1px solid #e4e8ec;
+  background-color: ${(props: ThemeProps) => props.theme.colors.neutral50};
+  cursor: pointer;
+  text-decoration: none;
+
+  &[data-align-left='true'] {
+    justify-content: start;
+  }
+  .sticky-sponsored-info-icon {
+    display: inline;
+  }
+
+  .sponsored-logo {
+    width: auto;
+    height: 24px;
+    vertical-align: middle;
+  }
+
+  ${MediaQueries.mbUp} {
+    height: 44px;
+  }
+
+  &[data-show-popup='true'] {
+    .sticky-sponsored-info-icon {
+      position: relative;
+      &:before {
+        position: absolute;
+        z-index: 9;
+        top: 100%;
+        left: 9px;
+        border-right: 6px transparent solid;
+        border-bottom: 8px white solid;
+        border-left: 6px transparent solid;
+        content: ' ';
+        transform: translateX(calc(-50% + 3px));
+      }
+    }
+  }
+
+  &.open .amp-sponsored-popup {
+    display: block;
+  }
+
+  &[data-is-amp] {
+    margin-top: -10px;
+    > [class*='Container'] {
+      display: flex;
+      align-items: center;
+    }
+  }
+`
+export const StyledStickySponsoredPopup = styled.div`
+  position: absolute;
+  top: 30px;
+  left: 50%;
+  &[data-align-left='true'] {
+    left: 190px;
+  }
+  width: 350px;
+  padding: 1rem;
+  border: 1px solid #f2f2f2;
+  background: white;
+  border-radius: 6px;
+  transform: translateX(-50%);
+  ${MediaQueries.mbDown} {
+    width: calc(100% - 2rem);
+  }
+
+  &[data-is-amp] {
+    display: none;
+    position: fixed;
+    z-index: 999;
+    top: 100px;
+    left: 50%;
+
+    &.open {
+      display: block;
+    }
+  }
+
+  .button-container {
+    display: flex;
+    justify-content: space-between;
+    button {
+      flex: 1;
+    }
+    button:first-child {
+      margin-right: 0.5rem;
+      ${MediaQueries.mbUp} {
+        margin-right: 1rem;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,254 @@
+/* eslint-disable react/jsx-no-target-blank */
+import React, { useState } from 'react'
+
+import { Container, Text, Button } from 'components/atoms'
+
+import { InfoLightIcon } from '../assets'
+import { STATIC_PAGES } from '../constants'
+import { ContentSponsor } from '../types'
+import { useTranslation } from '../utils'
+import {
+  StyledSponsoredBy,
+  StyledStickySponsoredBy,
+  StyledStickySponsoredPopup,
+} from './index.styled'
+
+export type Props = {
+  image: string
+  isMobile: boolean
+  href?: string
+  className?: string
+  isAmp?: boolean
+}
+
+const SponsoredBy = ({ image, href, className, isMobile, isAmp }: Props) => {
+  const f = useTranslation()
+
+  return (
+    <StyledSponsoredBy className={className} data-type-mobile={isMobile}>
+      <Text size="c2" type="bold" color="#737373">
+        {f('articlePage.sponsoredBy').toUpperCase() + ':'}
+      </Text>
+      <a
+        style={{
+          flex: isAmp ? 'unset' : 1,
+        }}
+        href={href}
+        target="_blank"
+      >
+        {!isAmp ? (
+          <img
+            src={image}
+            style={{
+              height: '22px',
+              objectPosition: isMobile ? 'right' : 'left',
+              objectFit: 'contain',
+              paddingLeft: '1rem',
+            }}
+          />
+        ) : (
+          <amp-img
+            height="35"
+            width="200"
+            src={image}
+            alt="sponsored article"
+            style={{
+              height: '22px',
+              objectPosition: isMobile ? 'right' : 'left',
+              objectFit: 'contain',
+              paddingLeft: '1rem',
+            }}
+          />
+        )}
+      </a>
+    </StyledSponsoredBy>
+  )
+}
+
+export type StickyProps = {
+  className?: string
+  isMobile?: boolean
+  isCollapsed?: boolean
+  sponsoredType?: 'article' | 'content'
+  sponsoredBy?: ContentSponsor
+  isAmp?: boolean
+  locale?: string
+}
+const StickySponsoredBy = ({
+  className,
+  isMobile,
+  isCollapsed,
+  sponsoredType,
+  sponsoredBy,
+  isAmp,
+  locale,
+}: StickyProps) => {
+  const f = useTranslation()
+  const [showPopup, setShowPopup] = useState(false)
+
+  return (
+    <StyledStickySponsoredBy
+      className={className}
+      onClick={() => setShowPopup(true)}
+      data-show-popup={showPopup && (!isMobile || !isCollapsed) && !isAmp}
+      data-align-left={sponsoredBy && !!sponsoredBy?.logo}
+      data-is-amp={isAmp || undefined}
+    >
+      <Container style={{ position: 'relative', padding: '0 16px' }}>
+        {sponsoredType === 'content' ? (
+          <Text size={isMobile ? 'p4' : 'p3'} color="#737373">
+            <div className="sticky-sponsored-info-icon">
+              {!isAmp ? (
+                <img
+                  src={InfoLightIcon}
+                  style={{
+                    width: 20,
+                    height: 20,
+                    verticalAlign: 'middle',
+                    marginRight: '0.3rem',
+                    marginBottom: '0.1rem',
+                  }}
+                />
+              ) : (
+                <amp-img
+                  height="20"
+                  width="20"
+                  style={{
+                    verticalAlign: 'middle',
+                    marginLeft: '0.3rem',
+                    marginBottom: '0.1rem',
+                  }}
+                  src={InfoLightIcon}
+                />
+              )}
+            </div>
+            {sponsoredBy && !!sponsoredBy?.logo ? (
+              <>
+                {' '}
+                {f('articlePage.sponsoredContentBy')}{' '}
+                <img
+                  className="sponsored-logo"
+                  src={sponsoredBy?.logo || ''}
+                  alt={'sponsored-logo'}
+                />
+              </>
+            ) : (
+              f('articlePage.sponsoredContent')
+            )}
+          </Text>
+        ) : (
+          <Text size="p2" color="#737373">
+            {f('articlePage.sponsoredArticle')}
+            <div className="sticky-sponsored-info-icon">
+              {!isAmp ? (
+                <img
+                  src={InfoLightIcon}
+                  style={{
+                    width: 20,
+                    height: 20,
+                    verticalAlign: 'middle',
+                    marginLeft: '0.3rem',
+                    marginBottom: '0.1rem',
+                  }}
+                />
+              ) : (
+                <amp-img
+                  height="20"
+                  width="20"
+                  style={{
+                    verticalAlign: 'middle',
+                    marginLeft: '0.3rem',
+                    marginBottom: '0.1rem',
+                  }}
+                  src={InfoLightIcon}
+                  on="tap:sponsored-by.toggleClass(class='open')"
+                  tabIndex={0}
+                  role="button"
+                />
+              )}
+            </div>
+          </Text>
+        )}
+        {showPopup && (!isMobile || !isCollapsed) && !isAmp ? (
+          <SponsoredPopup
+            sponsoredBy={sponsoredBy}
+            isAmp={isAmp}
+            onClose={() => setShowPopup(false)}
+            locale={locale}
+          />
+        ) : null}
+      </Container>
+    </StyledStickySponsoredBy>
+  )
+}
+
+type PopupProps = {
+  isAmp: boolean
+  onClose?: () => void
+  sponsoredBy?: ContentSponsor
+  locale?: string
+}
+
+const SponsoredPopup = ({
+  sponsoredBy,
+  isAmp,
+  onClose,
+  locale,
+}: PopupProps) => {
+  const sL = locale || 'en-PH' // standardized locale
+  const f = useTranslation()
+
+  return (
+    <StyledStickySponsoredPopup
+      data-align-left={sponsoredBy && !!sponsoredBy?.logo}
+      data-is-amp={isAmp || undefined}
+      id="sponsored-by"
+      className={isAmp ? 'amp-sponsored-popup' : undefined}
+    >
+      <Text
+        size="p3"
+        style={{
+          marginBottom: '1rem',
+        }}
+      >
+        {f('articlePage.sponsoredByStickyPopup.content')}
+      </Text>
+      <div
+        className="button-container"
+        onClick={
+          ((e: any) => {
+            e.stopPropagation()
+          }) as () => void
+        }
+      >
+        {/* <div
+                {...{ on: "tap:sponsored-by.toggleClass(class='open')" }}
+                tabIndex={0}
+                role="button"
+              > */}
+        <Button
+          size="md"
+          color="secondary"
+          onClick={onClose}
+          isAmp={isAmp}
+          on="tap:sponsored-by.toggleClass(class='open')"
+        >
+          {f('articlePage.sponsoredByStickyPopup.close')}
+        </Button>
+        {/* </div> */}
+        <Button
+          size="md"
+          onClick={() => {
+            window.location.href = `/static${STATIC_PAGES[sL].ADVERTISING_SPONSOR_POLICY}`
+          }}
+          isAmp={isAmp}
+          on={`tap:AMP.navigateTo(url='/static${STATIC_PAGES[sL].ADVERTISING_SPONSOR_POLICY}')`}
+        >
+          {f('articlePage.sponsoredByStickyPopup.policies')}
+        </Button>
+      </div>
+    </StyledStickySponsoredPopup>
+  )
+}
+
+export { SponsoredBy, StickySponsoredBy, SponsoredPopup }

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

@@ -0,0 +1,66 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledSelectionContainer = styled.div`
+  position: relative;
+`
+
+export const StyledSelectionLabel = styled.div``
+
+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/organisms/navigationLayout/tooltipSelection/index.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+
+import { Text } from 'components/atoms/text'
+import { CSSProperties } from 'styled-components'
+
+import { Check } from '../assets'
+import {
+  StyledOption,
+  StyledPopupBackground,
+  StyledSelectionContainer,
+  StyledSelectionLabel,
+  StyleSelectionPopup,
+} from './index.styled'
+export type Option = {
+  value: string
+  label: string
+}
+export type Props = {
+  options: Option[]
+  selected: string | number
+  label?: string | JSX.Element
+  onChange: (s: string) => void
+  showSelected?: boolean
+  style?: CSSProperties
+  showIndicator?: boolean
+}
+
+const TooltipSelection = ({
+  options,
+  label,
+  selected,
+  onChange,
+  showSelected = true,
+  style = {},
+  showIndicator = true,
+}: Props) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+
+  return (
+    <>
+      <StyledSelectionContainer>
+        <StyledSelectionLabel
+          onClick={() => setIsOpen((value: boolean) => !value)}
+        >
+          {!!label && label}
+        </StyledSelectionLabel>
+        <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>
+      </StyledSelectionContainer>
+      {isOpen && (
+        <StyledPopupBackground
+          onClick={() => setIsOpen(false)}
+        ></StyledPopupBackground>
+      )}
+    </>
+  )
+}
+
+export { TooltipSelection }