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

package/src/components/molecules/scrollList/index.tsx

@@ -0,0 +1,786 @@
+import React, {
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+import { throttle } from 'lodash'
+import smoothscroll from 'smoothscroll-polyfill'
+
+import { StyledScrollList } from './index.styled'
+
+if (typeof window !== 'undefined') {
+  smoothscroll.polyfill()
+}
+
+type Distance = {
+  amount: number
+  unit: 'percentage' | 'pixel'
+}
+
+type StatusChildren = {
+  index: number
+  status: 'inActive' | 'active' | 'done'
+}
+
+type Status = {
+  status?: 'inActive' | 'active' | 'done'
+}
+
+export type Props = {
+  row: 1 | 2 | 3 | 4 | 5 | 6
+  column: 1 | 2 | 3 | 4 | 5 | 6
+  children: ReactNode
+  mode?: 'snapped' | 'infinity'
+  type?: 'separated' | 'intertwined'
+  arrowType?: 'Care' | 'Discover'
+  distanceOverlappedLeft?: Distance
+  isDotsShown?: boolean
+  isImageGalleryShown?: boolean
+  className?: string
+  isProgressShown?: boolean
+  statusChildren?: Array<StatusChildren>
+  isArrowShown?: boolean
+  classNameLeftArrow?: string
+  classNameRightArrow?: string
+  dataEventCategory?: string
+  dataEventAction?: string
+  dataEventLabel?: string
+  onChangePage?: (page: number) => void
+  page?: number
+  customPageWidth?: number
+  scheme?: 'hellosites' | 'marrybaby'
+}
+
+const RenderIconStatus = ({ status }: Status) => {
+  if (status === 'inActive') {
+    return (
+      <svg
+        width="6"
+        height="6"
+        viewBox="0 0 6 6"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="3" cy="3" r="3" fill="#ADB3BC" />
+      </svg>
+    )
+  } else if (status === 'active') {
+    return (
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="6" cy="6" r="4" fill="#2D87F3" />
+        <circle cx="6" cy="6" r="5.5" stroke="#2D87F3" />
+      </svg>
+    )
+  } else if (status === 'done') {
+    return (
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12Z"
+          fill="#00B16A"
+        />
+        <path
+          d="M8.76061 4.20029L4.80061 7.80029L3.00061 6.16392"
+          stroke="white"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    )
+  }
+
+  return (
+    <svg
+      width="6"
+      height="6"
+      viewBox="0 0 6 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="3" cy="3" r="3" fill="#ADB3BC" />
+    </svg>
+  )
+}
+
+export const ScrollList = ({
+  row = 2,
+  column = 3,
+  isDotsShown = true,
+  isImageGalleryShown = false,
+  mode = 'infinity',
+  type = 'separated',
+  distanceOverlappedLeft = {
+    amount: 0,
+    unit: 'pixel',
+  },
+  children,
+  className,
+  isProgressShown = false,
+  statusChildren,
+  isArrowShown = false,
+  classNameLeftArrow,
+  classNameRightArrow,
+  dataEventCategory,
+  dataEventAction,
+  dataEventLabel,
+  onChangePage,
+  page,
+  customPageWidth,
+  scheme = 'hellosites',
+  arrowType = 'Discover',
+}: Props) => {
+  const hasPageProps = typeof page === 'number'
+  const [section, setSection] = useState(hasPageProps ? page : 0)
+  //Create groups
+  const groups = []
+  const indexChildren = []
+  React.Children.map(children, (element: ReactElement, idx) => {
+    indexChildren.push(idx)
+    if (idx % (row * column) === 0) {
+      groups.push([])
+    }
+    groups[groups.length - 1].push(React.cloneElement(element))
+  })
+
+  const scrollRef = useRef<HTMLDivElement>()
+  const currentPage = useRef(0)
+
+  const scrollToPage = (index) => {
+    if (!scrollRef.current) return
+    const { clientWidth } = scrollRef.current
+    const pageWidth = customPageWidth || clientWidth
+    const distance =
+      type === 'intertwined'
+        ? distanceOverlappedLeft.unit === 'percentage'
+          ? index * pageWidth +
+            (distanceOverlappedLeft.amount / 100) * pageWidth * index
+          : index * pageWidth +
+            distanceOverlappedLeft.amount * pageWidth * index
+        : index * pageWidth
+
+    scrollRef.current.scrollTo({
+      top: 0,
+      left: distance,
+      behavior: 'smooth',
+    })
+    currentPage.current = index
+    setSection(index)
+  }
+
+  const handleClick = (index) => {
+    if (!scrollRef.current) return
+    const { clientWidth } = scrollRef.current
+    const pageWidth = customPageWidth || clientWidth
+
+    const distance =
+      type === 'intertwined'
+        ? distanceOverlappedLeft.unit === 'percentage'
+          ? index * pageWidth +
+            (distanceOverlappedLeft.amount / 100) * pageWidth * index
+          : index * pageWidth +
+            distanceOverlappedLeft.amount * pageWidth * index
+        : index * pageWidth
+
+    scrollRef.current.scrollTo({
+      top: 0,
+      left: distance,
+      behavior: 'smooth',
+    })
+    currentPage.current = index
+    setSection(index)
+    onChangePage && onChangePage(index)
+  }
+
+  useEffect(() => {
+    if (typeof page === 'number') scrollToPage(page)
+  }, [page])
+
+  const handleClickArrow = (type: string) => {
+    if (!scrollRef.current) return
+    const { clientWidth } = scrollRef.current
+    const pageWidth = customPageWidth || clientWidth
+
+    let distance
+    section === 0 ? (distance = 0) : (distance = section * pageWidth)
+
+    if (type === 'forward') {
+      if (distance === pageWidth * (groups.length - 1)) {
+        setSection(groups.length - 1)
+        distance = pageWidth * (groups.length - 1)
+
+        onChangePage && onChangePage(groups.length - 1)
+      } else {
+        setSection(section + 1)
+        distance += pageWidth
+
+        onChangePage && onChangePage(section + 1)
+      }
+
+      scrollRef.current.scrollTo({
+        top: 0,
+        left: distance,
+        behavior: 'smooth',
+      })
+    }
+
+    if (type === 'back') {
+      if (distance === 0) {
+        setSection(0)
+        onChangePage && onChangePage(0)
+
+        distance = 0
+      } else {
+        setSection(section - 1)
+        onChangePage && onChangePage(section - 1)
+        distance -= pageWidth
+      }
+
+      scrollRef.current.scrollTo({
+        top: 0,
+        left: distance,
+        behavior: 'smooth',
+      })
+    }
+  }
+
+  const handleScroll = () => {
+    if (mode === 'infinity') {
+      if (!scrollRef.current) return
+      const { clientWidth, scrollLeft } = scrollRef.current
+
+      const pageWidth = customPageWidth || clientWidth
+
+      const page = Math.floor(scrollLeft / pageWidth)
+      setSection(page)
+      onChangePage && onChangePage(page)
+    }
+  }
+
+  const handleScrollThrottle = throttle(handleScroll, 400)
+
+  useEffect(() => {
+    if (mode === 'snapped') {
+      let isDown = false
+      let startX: number
+      let startY: number
+
+      let isSlidingY: boolean
+      let isSlidingX: boolean
+
+      let scrollLeft: number
+      let direction: 'rtl' | 'ltr' | 'none'
+
+      const slider: HTMLDivElement = scrollRef.current
+
+      const start = (pageX: number, pageY) => {
+        isDown = true
+        isSlidingY = false
+        isSlidingX = false
+
+        startX = pageX - slider.offsetLeft
+        startY = pageY - slider.offsetTop
+        scrollLeft = slider.scrollLeft
+      }
+
+      const startMouse = (e: MouseEvent) => {
+        start(e.pageX, e.pageY)
+      }
+
+      const startTouch = (e: TouchEvent) => {
+        start(e.touches[0].pageX, e.touches[0].pageY)
+      }
+
+      const end = () => {
+        isDown = false
+        isSlidingY = false
+        isSlidingX = false
+
+        if (!scrollRef.current) return
+        const { clientWidth } = scrollRef.current
+        const pageWidth = customPageWidth || clientWidth
+
+        const page =
+          direction === 'ltr'
+            ? currentPage.current !== 0
+              ? currentPage.current - 1
+              : currentPage.current
+            : direction === 'rtl'
+            ? currentPage.current < groups.length - 1
+              ? currentPage.current + 1
+              : currentPage.current
+            : currentPage.current
+
+        const distance =
+          type === 'intertwined'
+            ? distanceOverlappedLeft.unit === 'percentage'
+              ? page * pageWidth +
+                (distanceOverlappedLeft.amount / 100) * pageWidth * page
+              : page * pageWidth +
+                distanceOverlappedLeft.amount * pageWidth * page
+            : page * pageWidth
+        scrollRef.current.scrollTo({
+          top: 0,
+          left: distance,
+          behavior: 'smooth',
+        })
+
+        direction = 'none'
+        if (currentPage.current !== page) {
+          currentPage.current = page
+          setSection(page)
+          onChangePage && onChangePage(page)
+        }
+      }
+
+      const move = (pageX: number, pageY: number) => {
+        if (!isDown) return
+
+        const x = pageX - slider.offsetLeft
+        const y = pageY - slider.offsetTop
+
+        const walkX = x - startX
+        const walkY = y - startY
+
+        if (!isSlidingY && !isSlidingX && (walkY > 20 || walkY < -20)) {
+          isSlidingY = true
+        }
+
+        if (!isSlidingY && (walkX > 20 || walkX < -20)) {
+          isSlidingX = true
+
+          slider.scrollLeft = scrollLeft - walkX
+
+          if (walkX > 0) {
+            direction = 'ltr'
+          }
+
+          if (walkX < 0) {
+            direction = 'rtl'
+          }
+
+          if (walkX === 0) {
+            direction = 'none'
+          }
+        }
+      }
+
+      const moveMouse = (e: MouseEvent) => {
+        if (isSlidingX) {
+          e.preventDefault()
+        }
+
+        move(e.pageX, e.pageY)
+      }
+
+      const moveTouch = (e: TouchEvent) => {
+        if (isSlidingX) {
+          e.preventDefault()
+        }
+
+        move(e.touches[0].pageX, e.touches[0].pageY)
+      }
+
+      slider?.addEventListener('mousedown', startMouse)
+      slider?.addEventListener('touchstart', startTouch)
+
+      window.addEventListener('mouseup', end)
+      window.addEventListener('touchend', end)
+
+      slider?.addEventListener('mousemove', moveMouse)
+      slider?.addEventListener('touchmove', moveTouch)
+
+      return () => {
+        slider?.removeEventListener('mousedown', startMouse)
+        slider?.removeEventListener('touchstart', startTouch)
+
+        window.removeEventListener('mouseup', end)
+        window.removeEventListener('touchend', end)
+
+        slider?.removeEventListener('mousemove', moveMouse)
+        slider?.removeEventListener('touchmove', moveTouch)
+      }
+    }
+  }, [])
+
+  return (
+    <StyledScrollList
+      className={className}
+      data-row={row}
+      onScroll={handleScrollThrottle}
+    >
+      {isArrowShown && section > 0 && (
+        <div
+          className={`${classNameLeftArrow} arrow-left`}
+          onClick={() => handleClickArrow('back')}
+          data-event-category={dataEventCategory}
+          data-event-action={dataEventAction}
+          data-event-label={dataEventLabel}
+        >
+          {arrowType === 'Care' ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="42"
+              height="42"
+              viewBox="0 0 42 42"
+              fill="none"
+            >
+              <g filter="url(#filter0_dd_12599_34420)">
+                <path
+                  d="M7.00024 19C7.00024 10.1634 14.1637 3 23.0002 3V3C31.8368 3 39.0002 10.1634 39.0002 19V19C39.0002 27.8366 31.8368 35 23.0002 35V35C14.1637 35 7.00024 27.8366 7.00024 19V19Z"
+                  fill="white"
+                />
+                <path
+                  d="M20.9293 19L24.7503 15.179C25.1643 14.765 25.1643 14.093 24.7503 13.679C24.3363 13.265 23.6643 13.265 23.2503 13.679L18.6363 18.293C18.2453 18.684 18.2453 19.317 18.6363 19.707L23.2503 24.321C23.6643 24.735 24.3363 24.735 24.7503 24.321C25.1643 23.907 25.1643 23.235 24.7503 22.821L20.9293 19Z"
+                  fill="#595959"
+                />
+                <path
+                  d="M23.0002 34C14.716 34 8.00024 27.2843 8.00024 19H6.00024C6.00024 28.3888 13.6114 36 23.0002 36V34ZM38.0002 19C38.0002 27.2843 31.2845 34 23.0002 34V36C32.3891 36 40.0002 28.3888 40.0002 19H38.0002ZM23.0002 4C31.2845 4 38.0002 10.7157 38.0002 19H40.0002C40.0002 9.61116 32.3891 2 23.0002 2V4ZM23.0002 2C13.6114 2 6.00024 9.61116 6.00024 19H8.00024C8.00024 10.7157 14.716 4 23.0002 4V2Z"
+                  fill="#DBDFE5"
+                />
+              </g>
+              <defs>
+                <filter
+                  id="filter0_dd_12599_34420"
+                  x="0.000244141"
+                  y="0"
+                  width="42"
+                  height="42"
+                  filterUnits="userSpaceOnUse"
+                  colorInterpolationFilters="sRGB"
+                >
+                  <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                  <feColorMatrix
+                    in="SourceAlpha"
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                    result="hardAlpha"
+                  />
+                  <feOffset dx="-2" dy="2" />
+                  <feGaussianBlur stdDeviation="2.5" />
+                  <feColorMatrix
+                    type="matrix"
+                    values="0 0 0 0 0.263201 0 0 0 0 0.335725 0 0 0 0 0.393257 0 0 0 0.123689 0"
+                  />
+                  <feBlend
+                    mode="normal"
+                    in2="BackgroundImageFix"
+                    result="effect1_dropShadow_12599_34420"
+                  />
+                  <feColorMatrix
+                    in="SourceAlpha"
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                    result="hardAlpha"
+                  />
+                  <feOffset dx="-1" dy="1" />
+                  <feGaussianBlur stdDeviation="1" />
+                  <feColorMatrix
+                    type="matrix"
+                    values="0 0 0 0 0.264489 0 0 0 0 0.275745 0 0 0 0 0.28861 0 0 0 0.01 0"
+                  />
+                  <feBlend
+                    mode="normal"
+                    in2="effect1_dropShadow_12599_34420"
+                    result="effect2_dropShadow_12599_34420"
+                  />
+                  <feBlend
+                    mode="normal"
+                    in="SourceGraphic"
+                    in2="effect2_dropShadow_12599_34420"
+                    result="shape"
+                  />
+                </filter>
+              </defs>
+            </svg>
+          ) : (
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 32 32"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.9996 28.2218C22.7497 28.2218 28.2218 22.7497 28.2218 15.9996C28.2218 9.24942 22.7497 3.77734 15.9996 3.77734C9.24942 3.77734 3.77734 9.24942 3.77734 15.9996C3.77734 22.7497 9.24942 28.2218 15.9996 28.2218Z"
+                stroke={scheme === 'hellosites' ? '#2D87F3' : '#e85388'}
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M15.9997 11.1109L11.1108 15.9998L15.9997 20.8887"
+                stroke={scheme === 'hellosites' ? '#2D87F3' : '#e85388'}
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M20.8886 15.999L11.1108 15.999"
+                stroke={scheme === 'hellosites' ? '#2D87F3' : '#e85388'}
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          )}
+        </div>
+      )}
+
+      <div
+        ref={scrollRef}
+        className="container"
+        style={{
+          overflowX: mode === 'snapped' || isArrowShown ? 'hidden' : 'scroll',
+        }}
+      >
+        {groups.map((group, groupIndex) => {
+          let baseIndex = 0
+          for (let i = 0; i < groupIndex; i++) {
+            baseIndex += groups[i].length
+          }
+
+          return (
+            <div
+              key={groupIndex}
+              className="section"
+              style={{
+                marginLeft:
+                  type === 'intertwined' && groupIndex !== 0
+                    ? distanceOverlappedLeft.amount +
+                      '' +
+                      (distanceOverlappedLeft.unit === 'percentage'
+                        ? '%'
+                        : 'px')
+                    : '0px',
+              }}
+            >
+              {row === 1 && isProgressShown && (
+                <div
+                  className="progress-bar"
+                  style={{
+                    gridTemplateColumns: `repeat(${column}, calc(100% / ${column}))`,
+                  }}
+                >
+                  {group.map((item, itemIndex) => {
+                    const realIndex = baseIndex + itemIndex
+                    const foundStatusItem = statusChildren.find(
+                      (statusItem) => statusItem.index === realIndex,
+                    )
+
+                    return (
+                      <div className="items-progress" key={itemIndex}>
+                        {itemIndex === 0 && groupIndex === 0 ? (
+                          <div
+                            className="line"
+                            style={{ visibility: 'hidden' }}
+                          ></div>
+                        ) : (
+                          <div className="line"></div>
+                        )}
+                        <div className="icon-status">
+                          <RenderIconStatus status={foundStatusItem?.status} />
+                        </div>
+                        {groupIndex === groups.length - 1 &&
+                        itemIndex === group.length - 1 ? (
+                          <div
+                            className="line"
+                            style={{ visibility: 'hidden' }}
+                          ></div>
+                        ) : (
+                          <div className="line"></div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+
+              <div
+                className="grid-layout"
+                data-index={groupIndex}
+                style={{
+                  gridTemplateColumns: `repeat(${column}, calc(100% / ${column}))`,
+                  gridTemplateRows: `repeat(${row}, 1fr)`,
+                }}
+              >
+                {group.map((item, itemIndex) => (
+                  <React.Fragment key={itemIndex}>
+                    <div className="item-grid" key={itemIndex}>
+                      {item}
+                    </div>
+                  </React.Fragment>
+                ))}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {isArrowShown && section < groups.length - 1 && (
+        <div
+          className={`${classNameRightArrow} arrow-right`}
+          onClick={() => handleClickArrow('forward')}
+          data-event-category={dataEventCategory}
+          data-event-action={dataEventAction}
+          data-event-label={dataEventLabel}
+        >
+          {' '}
+          {arrowType === 'Care' ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="42"
+              height="42"
+              viewBox="0 0 42 42"
+              fill="none"
+            >
+              <g filter="url(#filter0_dd_12597_34423)">
+                <path
+                  d="M7.00024 19C7.00024 10.1634 14.1637 3 23.0002 3C31.8368 3 39.0002 10.1634 39.0002 19C39.0002 27.8366 31.8368 35 23.0002 35C14.1637 35 7.00024 27.8366 7.00024 19Z"
+                  fill="white"
+                />
+                <path
+                  d="M24.0712 19L20.2502 15.179C19.8362 14.765 19.8362 14.093 20.2502 13.679C20.6642 13.265 21.3362 13.265 21.7502 13.679L26.3642 18.293C26.7552 18.684 26.7552 19.317 26.3642 19.707L21.7502 24.321C21.3362 24.735 20.6642 24.735 20.2502 24.321C19.8362 23.907 19.8362 23.235 20.2502 22.821L24.0712 19Z"
+                  fill="#595959"
+                />
+                <path
+                  d="M23.0002 34C14.716 34 8.00024 27.2843 8.00024 19H6.00024C6.00024 28.3888 13.6114 36 23.0002 36V34ZM38.0002 19C38.0002 27.2843 31.2845 34 23.0002 34V36C32.3891 36 40.0002 28.3888 40.0002 19H38.0002ZM23.0002 4C31.2845 4 38.0002 10.7157 38.0002 19H40.0002C40.0002 9.61116 32.3891 2 23.0002 2V4ZM23.0002 2C13.6114 2 6.00024 9.61116 6.00024 19H8.00024C8.00024 10.7157 14.716 4 23.0002 4V2Z"
+                  fill="#DBDFE5"
+                />
+              </g>
+              <defs>
+                <filter
+                  id="filter0_dd_12597_34423"
+                  x="0.000244141"
+                  y="0"
+                  width="42"
+                  height="42"
+                  filterUnits="userSpaceOnUse"
+                  colorInterpolationFilters="sRGB"
+                >
+                  <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                  <feColorMatrix
+                    in="SourceAlpha"
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                    result="hardAlpha"
+                  />
+                  <feOffset dx="-2" dy="2" />
+                  <feGaussianBlur stdDeviation="2.5" />
+                  <feColorMatrix
+                    type="matrix"
+                    values="0 0 0 0 0.263201 0 0 0 0 0.335725 0 0 0 0 0.393257 0 0 0 0.123689 0"
+                  />
+                  <feBlend
+                    mode="normal"
+                    in2="BackgroundImageFix"
+                    result="effect1_dropShadow_12597_34423"
+                  />
+                  <feColorMatrix
+                    in="SourceAlpha"
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                    result="hardAlpha"
+                  />
+                  <feOffset dx="-1" dy="1" />
+                  <feGaussianBlur stdDeviation="1" />
+                  <feColorMatrix
+                    type="matrix"
+                    values="0 0 0 0 0.264489 0 0 0 0 0.275745 0 0 0 0 0.28861 0 0 0 0.01 0"
+                  />
+                  <feBlend
+                    mode="normal"
+                    in2="effect1_dropShadow_12597_34423"
+                    result="effect2_dropShadow_12597_34423"
+                  />
+                  <feBlend
+                    mode="normal"
+                    in="SourceGraphic"
+                    in2="effect2_dropShadow_12597_34423"
+                    result="shape"
+                  />
+                </filter>
+              </defs>
+            </svg>
+          ) : (
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 32 32"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.9996 28.2218C22.7497 28.2218 28.2218 22.7497 28.2218 15.9996C28.2218 9.24942 22.7497 3.77734 15.9996 3.77734C9.24942 3.77734 3.77734 9.24942 3.77734 15.9996C3.77734 22.7497 9.24942 28.2218 15.9996 28.2218Z"
+                stroke={scheme === 'hellosites' ? '#2D87F3' : '#e85388'}
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M15.9998 20.8891L20.8887 16.0002L15.9998 11.1113"
+                stroke={scheme === 'hellosites' ? '#2D87F3' : '#e85388'}
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M11.1109 16L20.8887 16"
+                stroke={scheme === 'hellosites' ? '#2D87F3' : '#e85388'}
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          )}
+        </div>
+      )}
+
+      {isDotsShown && (
+        <ul className="bullet-nav">
+          {groups.map((group, index) => (
+            <li key={index} className="bullet-nav__item ">
+              <p
+                onClick={() => handleClick(index)}
+                className={`bullet-nav__link scroll ${
+                  section == index ? 'active' : null
+                }`}
+                data-scheme={scheme}
+              ></p>
+            </li>
+          ))}
+        </ul>
+      )}
+      {isImageGalleryShown && (
+        <div className="image-gallery-wrapper" data-test={groups.length}>
+          {groups.slice(0, 3).map((item, itemIndex) => (
+            <div
+              className={`image-block ${
+                section == itemIndex ? 'active' : null
+              }`}
+              key={itemIndex}
+              onClick={() => handleClick(itemIndex)}
+              data-scheme={scheme}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+      )}
+    </StyledScrollList>
+  )
+}