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

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

@@ -1,99 +0,0 @@
-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/src/components/molecules/breadcrumbs/index.test.tsx

@@ -1,45 +0,0 @@
-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/src/components/molecules/breadcrumbs/index.tsx

@@ -1,141 +0,0 @@
-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/src/components/molecules/carousel/index.stories.tsx

@@ -1,40 +0,0 @@
-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/src/components/molecules/carousel/index.styled.tsx

@@ -1,115 +0,0 @@
-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/src/components/molecules/carousel/index.tsx

@@ -1,178 +0,0 @@
-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/src/components/molecules/categoryCard/index.stories.tsx

@@ -1,19 +0,0 @@
-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/src/components/molecules/categoryCard/index.styled.tsx

@@ -1,38 +0,0 @@
-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;
-  }
-`