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

package/raw/components/molecules/breadcrumbs/index.styled.tsx

@@ -0,0 +1,99 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledBreadcrumb = styled.div`
+  position: relative;
+  display: flex;
+
+  & > .collapsed-breadcrumb {
+    border: none;
+    & > div {
+      padding: 0;
+    }
+    & > ul {
+      min-width: max-content;
+    }
+  }
+
+  &[data-size='lg'] {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
+  }
+  &[data-size='md'] {
+    font-size: 14px;
+    line-height: 22px;
+    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+  }
+  &[data-size='sm'] {
+    font-size: 13px;
+    line-height: 20px;
+    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+  }
+`
+
+export const StyledSeparator = styled.div`
+  margin-right: 8px;
+  margin-left: 8px;
+  width: 6px;
+  background-image: 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 1L5 5L1 9' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  &[data-size='lg'] {
+    width: 6px;
+    margin-right: 8px;
+    margin-left: 8px;
+  }
+  &[data-size='md'] {
+    width: 5px;
+    margin-right: 7px;
+    margin-left: 7px;
+  }
+  &[data-size='sm'] {
+    width: 4px;
+    margin-right: 6px;
+    margin-left: 6px;
+  }
+`
+
+export const StyledTextLink = styled.div`
+  max-width: 12em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  > a {
+    color: ${(props: ThemeProps) => props.theme.colors.gray800};
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  &[data-last='true'] {
+    > a {
+      color: ${(props: ThemeProps) => props.theme.colors.gray500};
+    }
+  }
+
+  > a {
+    &:hover,
+    &:focus {
+      color: ${(props: ThemeProps) => props.theme.colors.primaryHover};
+      outline: none;
+      .arrowLeft,
+      .arrowRight {
+        stroke: ${(props: ThemeProps) => props.theme.colors.primaryActive};
+      }
+    }
+
+    &:active {
+      color: ${(props: ThemeProps) => props.theme.colors.primaryActive};
+    }
+  }
+
+  &[data-disabled] {
+    > a {
+      cursor: not-allowed;
+      color: ${(props: ThemeProps) => props.theme.colors.gray300};
+    }
+  }
+`

package/raw/components/molecules/breadcrumbs/index.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import { render, cleanup } from '@testing-library/react'
+import 'jest-styled-components'
+
+import { Breadcrumbs } from '.'
+import MockTheme from '../../../misc/mockTheme'
+
+afterEach(cleanup)
+
+test('it renders', () => {
+  const dropdown = render(
+    <MockTheme>
+      <Breadcrumbs
+        size="md"
+        pages={[
+          {
+            label: 'Home',
+            value: '/',
+          },
+          {
+            label: 'Category 1',
+            value: '/category-1',
+          },
+          {
+            label:
+              'Sub Category 1 with a very long name that will not show completely',
+            value: '/category-1/sub-category-1',
+          },
+          {
+            label: 'Sub Category 2',
+            value: '/category-1/sub-category-1/sub-category-2',
+          },
+        ]}
+      />
+    </MockTheme>,
+  )
+
+  const self = dropdown.container.firstChild
+
+  expect(self).toMatchSnapshot()
+
+  expect(self).toContainHTML('Home')
+  expect(self).toContainHTML('/category-1')
+})

package/raw/components/molecules/breadcrumbs/index.tsx

@@ -0,0 +1,141 @@
+import React, { Fragment, useMemo } from 'react'
+
+import { useId } from 'react-id-generator'
+
+import { Dropdown, Option } from '../../molecules/dropdown'
+import {
+  StyledBreadcrumb,
+  StyledTextLink,
+  // StyledLink,
+  StyledSeparator,
+} from './index.styled'
+
+type Page = {
+  label: string | JSX.Element
+  value: string
+  active?: boolean
+  dataEventCategory?: string
+  dataEventAction?: string
+  dataEventLabel?: string
+}
+
+export type Props = {
+  size: 'lg' | 'md' | 'sm'
+  pages: Array<Page>
+  className?: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  LinkComponent?: React.ComponentType<any> | string
+  onChangePage?: () => void
+  separator?: string | JSX.Element
+}
+
+interface MappedPage extends Page {
+  isDropdown?: boolean
+  dropdownItems?: Array<Option>
+}
+export type BreadcrumbItemProps = {
+  page: MappedPage
+  isLast?: boolean
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  LinkComponent: React.ComponentType<any> | string
+  onChangePage?: () => void
+}
+
+const BreadcrumbItem = ({
+  LinkComponent,
+  page,
+  isLast,
+  onChangePage,
+}: BreadcrumbItemProps) => {
+  const {
+    label,
+    value,
+    isDropdown,
+    dropdownItems,
+    dataEventCategory,
+    dataEventAction,
+    dataEventLabel,
+  } = page
+
+  if (isDropdown) {
+    return (
+      <Dropdown
+        options={dropdownItems}
+        placeholder="..."
+        id=""
+        placeholderIcon={null}
+        onChange={onChangePage}
+        className="collapsed-breadcrumb"
+      />
+    )
+  }
+  return (
+    <StyledTextLink
+      title={typeof label !== 'string' ? value : label}
+      data-last={isLast}
+    >
+      {LinkComponent && (
+        <LinkComponent
+          data-event-category={dataEventCategory}
+          data-event-action={dataEventAction}
+          data-event-label={dataEventLabel}
+          href={value || '#'}
+        >
+          {label}
+        </LinkComponent>
+      )}
+    </StyledTextLink>
+  )
+}
+
+const Breadcrumbs = ({
+  className,
+  pages,
+  size,
+  LinkComponent = 'a',
+  onChangePage,
+  separator,
+}: Props) => {
+  const mappedList: Array<MappedPage> = useMemo(
+    () =>
+      pages
+        .map((item, index) => {
+          if (pages.length > 4) {
+            if (index > 1 && index < pages.length - 2) return null
+            if (index === 1) {
+              return {
+                ...item,
+                isDropdown: index === 1,
+                dropdownItems: pages.slice(1, pages.length - 2),
+              }
+            }
+            return item
+          }
+          return item
+        })
+        .filter(Boolean),
+    [pages],
+  )
+
+  const idList = useId(mappedList.length)
+  return (
+    <StyledBreadcrumb data-size={size} className={className}>
+      {mappedList.map((page, index) => {
+        const isLast = index + 1 === mappedList.length
+        return (
+          <Fragment key={idList[index]}>
+            <BreadcrumbItem
+              LinkComponent={LinkComponent}
+              page={page}
+              isLast={isLast}
+              onChangePage={onChangePage}
+            />
+            {!isLast && (separator || <StyledSeparator data-size={size} />)}
+          </Fragment>
+        )
+      })}
+    </StyledBreadcrumb>
+  )
+}
+
+export { Breadcrumbs }

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

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { CategoryCard } from '../categoryCard'
+import { Props, Carousel } from './index'
+
+export default {
+  component: Carousel,
+  title: 'Molecules/Carousel',
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+}
+const Template: Story<Props> = (args) => {
+  return <Carousel {...args} />
+}
+
+export const Normal = Template.bind({})
+
+Normal.args = {
+  column: 3,
+  row: 2,
+  children: [...Array(20)].map((ele, index) => (
+    <CategoryCard
+      key={index}
+      imgBanner={
+        <img src={`https://picsum.photos/id/${220 + index}/60/60`} alt="img" />
+      }
+      label={`Carousel Sample ${index}`}
+      href={String(index)}
+    />
+  )),
+  mode: 'snap',
+  isDotsShown: true,
+  isArrowShown: true,
+  scheme: 'marrybaby',
+}

package/raw/components/molecules/carousel/index.styled.tsx

@@ -0,0 +1,115 @@
+import { ThemeProps } from 'src/misc/theme'
+import styled from 'styled-components'
+
+type CarouselProps = {
+  row: number
+  column: number
+}
+
+export const StyledArrow = styled.button`
+  background: #ffffff;
+  border: 1px solid ${(props: ThemeProps) => props.theme.colors.neutral200};
+  box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
+    -2px 2px 5px rgba(67, 86, 100, 0.123689);
+  border-radius: 24px;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &[data-is-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+
+  &[data-is-left='true'] {
+    left: -16px;
+  }
+  &[data-is-left='false'] {
+    right: -16px;
+    left: auto;
+  }
+`
+
+export const StyledDot = styled.button`
+  background: ${(props: ThemeProps) => props.theme.colors.neutral200};
+  border-radius: 50%;
+  cursor: pointer;
+  width: 8px;
+  height: 8px;
+
+  &[data-is-active='true'] {
+    background: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+
+    &[data-is-hellosites='false'] {
+      background: ${(props: ThemeProps) => props.theme.mbColors.pink};
+    }
+  }
+`
+
+const KeenSliderStyles = `
+   .keen-slider:not([data-keen-slider-disabled]) {
+    align-content: flex-start;
+    display: flex;
+    overflow: hidden;
+    position: relative;
+    user-select: none;
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+    width: 100%;
+
+    .keen-slider__slide {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      min-height: 100%;
+    }
+
+    &[data-keen-slider-reverse] {
+      flex-direction: row-reverse;
+    }
+
+    &[data-keen-slider-v] {
+      flex-wrap: wrap;
+    }
+  }
+
+  [data-keen-slider-moves] * {
+    pointer-events: none;
+  }
+}
+`
+export const StyledCarousel = styled.div<CarouselProps>`
+  ${KeenSliderStyles}
+
+  .navigation-wrapper {
+    position: relative;
+
+    .page-items {
+      display: grid;
+      grid-template-columns: repeat(
+        ${(props: CarouselProps) => props.column},
+        1fr
+      );
+      grid-template-rows: repeat(${(props: CarouselProps) => props.row}, 1fr);
+      gap: 12px;
+    }
+  }
+
+  .dots {
+    margin-top: 24px;
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+  }
+`

package/raw/components/molecules/carousel/index.tsx

@@ -0,0 +1,178 @@
+import React, { ReactNode, useState } from 'react'
+
+import { useKeenSlider } from 'keen-slider/react'
+
+// import 'keen-slider/keen-slider.min.css'
+import { StyledArrow, StyledCarousel, StyledDot } from './index.styled'
+
+type ArrowProps = {
+  onClick: (e: any) => void
+  isDisabled: boolean
+  className: string
+  scheme?: 'hellosites' | 'marrybaby'
+  isLeft?: boolean
+}
+
+export type Props = {
+  row: number
+  column: number
+  children: ReactNode[]
+  scheme?: 'hellosites' | 'marrybaby'
+  mode?: 'snap' | 'free' | 'free-snap'
+  isDotsShown?: boolean
+  isArrowShown?: boolean
+  classNameLeftArrow?: string
+  classNameRightArrow?: string
+  dataEventCategory?: string
+  dataEventAction?: string
+  dataEventLabel?: string
+  onChangePage?: (page: number) => void
+}
+
+const Arrow = ({
+  isDisabled,
+  isLeft,
+  onClick,
+  className,
+  scheme = 'hellosites',
+}: ArrowProps) => {
+  return (
+    <StyledArrow
+      onClick={onClick}
+      data-is-disabled={isDisabled}
+      data-is-left={isLeft}
+      className={className}
+    >
+      <svg
+        width="8"
+        height="12"
+        viewBox="0 0 8 12"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {isLeft ? (
+          <path
+            d="M2.92902 6.00015L6.75002 2.17915C7.16402 1.76515 7.16402 1.09315 6.75002 0.679152C6.33602 0.265152 5.66402 0.265152 5.25002 0.679152L0.636023 5.29315C0.245023 5.68415 0.245023 6.31715 0.636023 6.70715L5.25002 11.3212C5.66402 11.7352 6.33602 11.7352 6.75002 11.3212C7.16402 10.9072 7.16402 10.2352 6.75002 9.82115L2.92902 6.00015Z"
+            fill={scheme === 'hellosites' ? '#595959' : '#E55C8A'}
+          />
+        ) : (
+          <path
+            d="M5.07095 6.00015L1.24995 2.17915C0.835953 1.76515 0.835953 1.09315 1.24995 0.679152C1.66395 0.265152 2.33595 0.265152 2.74995 0.679152L7.36395 5.29315C7.75495 5.68415 7.75495 6.31715 7.36395 6.70715L2.74995 11.3212C2.33595 11.7352 1.66395 11.7352 1.24995 11.3212C0.835953 10.9072 0.835953 10.2352 1.24995 9.82115L5.07095 6.00015Z"
+            fill={scheme === 'hellosites' ? '#595959' : '#E55C8A'}
+          />
+        )}
+      </svg>
+    </StyledArrow>
+  )
+}
+
+export const Carousel = ({
+  row,
+  column,
+  children,
+  scheme = 'hellosites',
+  classNameLeftArrow = '',
+  classNameRightArrow = '',
+  mode = 'snap',
+  isDotsShown = true,
+  isArrowShown = false,
+  dataEventCategory,
+  dataEventAction,
+  dataEventLabel,
+  onChangePage,
+}: Props) => {
+  const [currentSlide, setCurrentSlide] = React.useState(0)
+  const [loaded, setLoaded] = useState(false)
+  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>({
+    defaultAnimation: {
+      duration: 1000,
+    },
+    initial: 0,
+    slideChanged(slider) {
+      setCurrentSlide(slider.track.details.rel)
+      onChangePage && onChangePage(slider.track.details.rel)
+    },
+    created() {
+      setLoaded(true)
+    },
+    drag: true,
+    mode: mode,
+    slides: {
+      spacing: 12,
+    },
+  })
+
+  // Separate the children by row and column
+  const newChildren: ReactNode[][] = []
+  const itemsPerPage = row * column
+  for (let i = 0; i < children.length; i += itemsPerPage) {
+    const chunk = children.slice(i, i + itemsPerPage)
+    newChildren.push(chunk)
+  }
+
+  return (
+    <StyledCarousel row={row} column={column}>
+      <div className="navigation-wrapper">
+        <div ref={sliderRef} className="keen-slider slides-wrapper">
+          {newChildren.map((itemsInRow, index) => (
+            <div key={index} className="keen-slider__slide page-items">
+              {itemsInRow.map((item, index) => (
+                <div key={index}>{item}</div>
+              ))}
+            </div>
+          ))}
+        </div>
+        {loaded && instanceRef.current && isArrowShown && (
+          <>
+            <Arrow
+              isLeft
+              onClick={(e) =>
+                e.stopPropagation() || instanceRef.current?.prev()
+              }
+              isDisabled={currentSlide === 0}
+              scheme={scheme}
+              className={`left-arrow ${classNameLeftArrow}`}
+              data-event-category={dataEventCategory}
+              data-event-action={dataEventAction}
+              data-event-label={dataEventLabel}
+            />
+
+            <Arrow
+              isLeft={false}
+              onClick={(e) =>
+                e.stopPropagation() || instanceRef.current?.next()
+              }
+              isDisabled={
+                currentSlide ===
+                instanceRef.current.track.details.slides.length - 1
+              }
+              scheme={scheme}
+              className={`right-arrow ${classNameRightArrow}`}
+              data-event-category={dataEventCategory}
+              data-event-action={dataEventAction}
+              data-event-label={dataEventLabel}
+            />
+          </>
+        )}
+      </div>
+      {loaded && instanceRef.current && isDotsShown && (
+        <div className="dots">
+          {[...Array(instanceRef.current.track.details.slides.length)].map(
+            (_, idx) => {
+              return (
+                <StyledDot
+                  key={idx}
+                  onClick={() => {
+                    instanceRef.current?.moveToIdx(idx)
+                  }}
+                  data-is-active={currentSlide === idx}
+                  data-is-hellosites={scheme === 'hellosites'}
+                ></StyledDot>
+              )
+            },
+          )}
+        </div>
+      )}
+    </StyledCarousel>
+  )
+}

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

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { CategoryCard, Props } from './index'
+
+export default {
+  component: CategoryCard,
+  title: 'Molecules/CategoryCard',
+}
+
+const Template: Story<Props> = (args) => <CategoryCard {...args} />
+
+export const Normal = Template.bind({})
+
+Normal.args = {
+  imgBanner: <img src="https://source.unsplash.com/random/74x63" alt="img" />,
+  label: 'Mental Health',
+}

package/raw/components/molecules/categoryCard/index.styled.tsx

@@ -0,0 +1,38 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledCategoryCard = styled.a`
+  display: flex;
+  height: 125px;
+
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+
+  border: 1px solid ${(props: ThemeProps) => props.theme.colors.neutral100};
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08);
+  cursor: pointer;
+  text-decoration: none;
+
+  & > .banner {
+    width: 100%;
+    height: 63px;
+    text-align: center;
+  }
+
+  & > .content {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-align: center;
+    word-break: break-word;
+  }
+
+  * {
+    pointer-events: none;
+  }
+`