@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

package/dist/src/components/molecules/MoreDocsMobile/MoreDocsMobile.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px'
+import { MoreDocsItem } from '../../atoms'
+import { type MoreDocsMobileProps } from './MoreDocsMobileProps'
+// import './MoreDocsMobile.scss'
+
+export const MoreDocsMobile: React.FC<MoreDocsMobileProps> = ({ title, documents }) => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <>
+      <div
+        className='more-docs-mobile'
+        onClick={() => {
+          setIsOpen(!isOpen)
+        }}
+        tabIndex={0}
+        role='button'
+        onKeyUp={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            setIsOpen(!isOpen)
+          }
+        }}
+      >
+        <div className='box-closed'>
+          <p className='box-title'>{title}</p>
+          <div className={`icon-see-more ${!isOpen ? 'open' : ''}`}>
+            <ChevronRight24px />
+          </div>
+        </div>
+      </div>
+      {isOpen && (
+        <div className='more-docs-list'>
+          {documents.map((document) => {
+            return (
+              <div className='docs-list' key={document.id}>
+                <MoreDocsItem {...document} />
+                <div className='separation-line'></div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </>
+  )
+}

package/dist/src/components/molecules/MoreDocsMobile/MoreDocsMobileProps.ts

@@ -0,0 +1,6 @@
+import { type MoreDocsItemProps } from '../../atoms'
+
+export interface MoreDocsMobileProps {
+  title: string
+  documents: MoreDocsItemProps[]
+}

package/dist/src/components/molecules/MoreDocsMobile/index.ts

@@ -0,0 +1,2 @@
+export * from './MoreDocsMobile'
+export * from './MoreDocsMobileProps'

package/dist/src/components/molecules/NavBarDropDown/NavBarDropDown.scss

@@ -0,0 +1,33 @@
+@import '../../../globalStyles/variables.scss';
+
+.navbar-drop-down__container {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  left: 0;
+  right: 0;
+  z-index: 4;
+  &__menu_items {
+    background: get-color(others, white);
+    padding: 1.5rem;
+    box-shadow: $box-shadow-container;
+    ul {
+      li {
+        margin-bottom: 1rem;
+        padding: 0.5rem 1rem;
+      }
+
+      li:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__shadow {
+    position: absolute;
+    background: get-color(neutral, neutral-3);
+    opacity: 0.4;
+    width: 100%;
+    height: 100vh;
+  }
+}

package/dist/src/components/molecules/NavBarDropDown/NavBarDropDown.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { type FC, useEffect } from 'react'
+import { MenuItems } from '../../atoms'
+import { type NavBarDropDownProps } from './NavBarDropDownProps.types'
+import { useIntersectionObserver } from '../../../hooks'
+// import './NavBarDropDown.scss'
+
+let scrollPosition = 0
+let touchStartPosY: Touch
+let isDisabledScroll = false
+
+export const NavBarDropDown: FC<NavBarDropDownProps> = ({
+  isOpen,
+  list,
+  hasBullets = true,
+  initialActiveContent,
+  setEnableScrollbarOnClose,
+  setIsOpen
+}): React.ReactElement | null => {
+  const [ref, isIntersectingWithElement] = useIntersectionObserver({
+    options: { threshold: 0.15 }
+  })
+
+  const onTouchStart = (event: TouchEvent): void => {
+    touchStartPosY = event.changedTouches[0]
+  }
+
+  const onTouchMove = (event: TouchEvent): void => {
+    const touchEndPosY = event.changedTouches[0]
+    if (isDisabledScroll && touchEndPosY?.screenY - touchStartPosY?.screenY > 0) {
+      enableScrollbarOnClose(true)
+      isDisabledScroll = false
+    }
+  }
+
+  const disableScrollbarOnOpen = (): void => {
+    if (isOpen && typeof window !== 'undefined') {
+      const body = document.querySelector('body')
+      scrollPosition = window.scrollY
+      if (body != null) {
+        body.style.overflow = 'hidden'
+        body.style.position = 'fixed'
+        body.style.top = `-${scrollPosition}px`
+        body.style.width = '100%'
+      }
+    }
+  }
+
+  const enableScrollbarOnClose = (onTouch = false): void => {
+    const body = document.querySelector('body')
+    body?.style.removeProperty('overflow')
+    body?.style.removeProperty('position')
+    body?.style.removeProperty('top')
+    body?.style.removeProperty('width')
+    window.scrollTo(0, onTouch ? scrollPosition : window.scrollY)
+  }
+
+  const closeMenu = (): void => {
+    enableScrollbarOnClose()
+    setIsOpen(false)
+  }
+
+  useEffect(() => {
+    document.addEventListener('touchmove', onTouchMove)
+    document.addEventListener('touchstart', onTouchStart)
+    return () => {
+      document.removeEventListener('touchmove', onTouchMove)
+      document.removeEventListener('touchstart', onTouchStart)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (isIntersectingWithElement) {
+      disableScrollbarOnOpen()
+      isDisabledScroll = true
+    }
+  }, [isOpen, isIntersectingWithElement])
+
+  useEffect(() => {
+    setEnableScrollbarOnClose(() => enableScrollbarOnClose)
+  }, [])
+
+  return (
+    <>
+      {isOpen ? (
+        <div className='navbar-drop-down__container'>
+          <div className='navbar-drop-down__container__menu_items'>
+            <MenuItems list={list} hasBullets={hasBullets} initialActiveContent={initialActiveContent} />
+          </div>
+          <div ref={ref} className='navbar-drop-down__container__shadow' onClick={closeMenu}></div>
+        </div>
+      ) : null}
+    </>
+  )
+}

package/dist/src/components/molecules/NavBarDropDown/NavBarDropDownProps.types.ts

@@ -0,0 +1,13 @@
+interface List {
+  onClick: () => void
+  content: string
+  dataQA?: string
+}
+export interface NavBarDropDownProps {
+  isOpen: boolean
+  hasBullets?: boolean
+  initialActiveContent?: string
+  setEnableScrollbarOnClose: React.Dispatch<React.SetStateAction<(() => void) | undefined>>
+  setIsOpen: (open: boolean) => void
+  list: List[]
+}

package/dist/src/components/molecules/NavBarDropDown/index.ts

@@ -0,0 +1,2 @@
+export { NavBarDropDown } from './NavBarDropDown'
+export { type NavBarDropDownProps } from './NavBarDropDownProps.types'

package/dist/src/components/molecules/Pagination/PageStepControl.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { type FC, useCallback } from 'react'
+import classNames from 'classnames'
+
+import { ArrowRight } from '../../../../images/componentsSvg/ArrowRight'
+import { type PageStepControlProps } from './PageStepControlProps.types'
+
+const PageStepControl: FC<PageStepControlProps> = ({
+  activePage,
+  direction,
+  onClick,
+  totalPages,
+  nextControl = 'next',
+  prevControl = 'prev'
+}) => {
+  const hideStepControl =
+    (direction === prevControl && activePage <= 1) || (direction === nextControl && activePage >= totalPages)
+
+  const handleClick = useCallback(() => {
+    if (!hideStepControl) onClick(direction)
+  }, [hideStepControl, onClick])
+
+  if (totalPages === undefined) return null
+
+  const classes = classNames('pagination__control', {
+    [`pagination__control--${direction}`]: direction,
+    'pagination__control--hidden': hideStepControl
+  })
+
+  return (
+    <span className={classes} onClick={handleClick}>
+      <ArrowRight />
+    </span>
+  )
+}
+
+export default PageStepControl

package/dist/src/components/molecules/Pagination/PageStepControlProps.types.ts

@@ -0,0 +1,8 @@
+export interface PageStepControlProps {
+  direction: string
+  activePage: number
+  totalPages: number
+  onClick: (direction: string) => void
+  nextControl?: 'next'
+  prevControl?: 'prev'
+}

package/dist/src/components/molecules/Pagination/PageSteps.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { type FC, type MouseEventHandler } from 'react'
+import classNames from 'classnames'
+
+const getPageClassName = (activePage: number, step: string | number, ellipsisControls: string): string =>
+  classNames('pagination__page', {
+    'pagination__page--ellipsis': step === ellipsisControls,
+    'pagination__page--active': step === activePage
+  })
+
+export interface PageStepsProps {
+  activePage: number
+  totalPages: number
+  onClick: MouseEventHandler<HTMLSpanElement>
+  ellipsisControls?: string
+  extendedMaxSteps?: number
+}
+
+const PageSteps: FC<PageStepsProps> = ({
+  activePage,
+  onClick,
+  totalPages,
+  ellipsisControls = '...',
+  extendedMaxSteps = 5
+}) => {
+  if (totalPages === undefined || totalPages < 1) return null
+
+  const renderStep = (className: string, step: string | number, key: number): React.JSX.Element => {
+    const onClickPage = activePage !== step ? onClick : undefined
+    return (
+      <span className={className} id={step.toString()} key={key} onClick={onClickPage}>
+        {step}
+      </span>
+    )
+  }
+
+  const renderExtendedSteps = (): React.JSX.Element[] => {
+    return new Array(extendedMaxSteps).fill(null).map((page, index) => {
+      let firstVisibleStep = totalPages - extendedMaxSteps
+      let step: string | number = firstVisibleStep + index + 1
+
+      if (activePage <= firstVisibleStep + 1) {
+        firstVisibleStep = activePage > 1 ? activePage - 2 : 0
+
+        if (index < extendedMaxSteps - 2) {
+          step = firstVisibleStep + index + 1
+        }
+
+        if (index > extendedMaxSteps - 2) {
+          const reverseIndex = extendedMaxSteps - 1 - index
+          step = totalPages - reverseIndex
+        }
+
+        if (index === extendedMaxSteps - 2) {
+          step = ellipsisControls
+        }
+      }
+
+      const pageClassName = getPageClassName(activePage, step, ellipsisControls)
+      return renderStep(pageClassName, step, index)
+    })
+  }
+
+  const renderSteps = (): React.JSX.Element[] => {
+    if (totalPages > extendedMaxSteps) {
+      return renderExtendedSteps()
+    }
+
+    return new Array(totalPages).fill(null).map((page, index) => {
+      const step = index + 1
+      const pageClassName = getPageClassName(activePage, step, ellipsisControls)
+      return renderStep(pageClassName, step, step)
+    })
+  }
+
+  return <div className='pagination__page-wrapper'>{renderSteps()}</div>
+}
+
+export default PageSteps

package/dist/src/components/molecules/Pagination/Pagination.scss

@@ -0,0 +1,62 @@
+@import '../../../globalStyles/variables.scss';
+
+.pagination {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  &__control {
+    display: flex;
+    svg {
+      cursor: pointer;
+      fill: get-color(neutral, neutral-2);
+      width: 1rem;
+      path {
+        pointer-events: none;
+      }
+    }
+    &--prev svg {
+      transform: rotate(180deg);
+    }
+    &--hidden {
+      cursor: default;
+      pointer-events: none;
+      visibility: hidden;
+    }
+  }
+
+  &__page-wrapper {
+    display: flex;
+    margin: 0 1rem;
+  }
+
+  &__page {
+    align-items: center;
+    background: get-color(neutral, neutral-6);
+    border: 2px solid get-color(neutral, neutral-3);
+    border-radius: 4px;
+    box-sizing: border-box;
+    color: get-color(neutral, neutral-2);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    height: 2.125rem;
+    margin: 0 0.25rem;
+    min-width: 2.125rem;
+    padding: 0.3rem;
+
+    &--active {
+      background: get-color(neutral, neutral-4);
+      border: 2px solid get-color(neutral, neutral-2);
+      color: get-color(neutral, neutral-1);
+    }
+
+    &--ellipsis {
+      cursor: default;
+    }
+  }
+}

package/dist/src/components/molecules/Pagination/Pagination.tsx

@@ -0,0 +1,42 @@
+import React, { type FC, type SyntheticEvent, useCallback, useState } from 'react'
+
+import PageStepControl from './PageStepControl'
+import PageSteps from './PageSteps'
+import { type PaginationProps } from './PaginationProps.types'
+// import './Pagination.scss'
+
+const Pagination: FC<PaginationProps> = ({
+  activePage,
+  totalPages,
+  onChange,
+  nextControl = 'next',
+  prevControl = 'prev'
+}) => {
+  const [active, setActive] = useState(activePage)
+
+  const handleControl = useCallback((direction: string): void => {
+    const page = direction === prevControl ? activePage - 1 : activePage + 1
+    setActive(page)
+    onChange(page)
+  }, [])
+
+  const handleCurrentPage = useCallback((e: SyntheticEvent<HTMLSpanElement>): void => {
+    const page = Number(e.currentTarget.id)
+    if (!Number.isNaN(page)) {
+      setActive(page)
+      onChange(page)
+    }
+  }, [])
+
+  if (totalPages === undefined) return null
+
+  return (
+    <div className='pagination'>
+      <PageStepControl activePage={active} totalPages={totalPages} onClick={handleControl} direction={prevControl} />
+      <PageSteps activePage={active} onClick={handleCurrentPage} totalPages={totalPages} />
+      <PageStepControl activePage={active} totalPages={totalPages} onClick={handleControl} direction={nextControl} />
+    </div>
+  )
+}
+
+export default Pagination

package/dist/src/components/molecules/Pagination/PaginationProps.types.ts

@@ -0,0 +1,7 @@
+export interface PaginationProps {
+  totalPages: number
+  activePage: number
+  onChange: (page: number) => void
+  nextControl?: 'next'
+  prevControl?: 'prev'
+}

package/dist/src/components/molecules/Pagination/index.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination'
+export { type PaginationProps } from './PaginationProps.types'

package/dist/src/components/molecules/PhoneContactBoxDesktop/PhoneContactBoxDesktop.scss

@@ -0,0 +1,60 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.phone-contact {
+  &-box-container {
+    background-color: get-color(others, white);
+    width: 100%;
+    border-radius: 4px;
+    margin-bottom: 2rem;
+    display: none;
+    padding: 2rem 1.5rem;
+    text-decoration: none;
+    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) {
+        letter-spacing: -1px;
+      }
+    }
+
+    @include landscape-tablets {
+      display: flex;
+    }
+
+    img {
+      align-self: center;
+      &:not(.onlyIE) {
+        display: block;
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          display: none;
+        }
+      }
+      &.onlyIE {
+        display: none;
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          display: block;
+        }
+      }
+    }
+  }
+
+  &-info {
+    margin-left: 1.5rem;
+  }
+
+  &-phone {
+    font-size: 1.5rem;
+    color: get-color(primary, main-dark-1);
+    font-weight: bold;
+    text-decoration: none;
+
+    @include laptop {
+      font-size: 1.7rem;
+    }
+  }
+
+  &-text {
+    color: get-color(neutral, neutral-2);
+  }
+}

package/dist/src/components/molecules/PhoneContactBoxDesktop/PhoneContactBoxDesktop.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import ContactPhoneIcon from '../../../../images/webp/customer-support.webp'
+import ContactPhoneIconIE from '../../../../images/png/customer-support.png'
+import { type PhoneContactBoxDesktopProps } from './PhoneContactBoxDesktopProps.types'
+// import './PhoneContactBoxDesktop.scss'
+
+export const PhoneContactBoxDesktop: React.FC<PhoneContactBoxDesktopProps> = ({ phones, schedule }) => {
+  return (
+    <div className='phone-contact-box-container'>
+      <img src={ContactPhoneIcon} alt='Contact phone icon' width='40' height='40'></img>
+      <img src={ContactPhoneIconIE} className='onlyIE' alt='Contact phone icon' width='40' height='40'></img>
+      <div className='phone-contact-info'>
+        {phones.map((phone, index) => (
+          <p key={`${phone}-${index}`} className='phone-contact-phone'>
+            {phone}
+          </p>
+        ))}
+        <p className='email-contact-text'>{schedule}</p>
+      </div>
+    </div>
+  )
+}

package/dist/src/components/molecules/PhoneContactBoxDesktop/PhoneContactBoxDesktopProps.types.ts

@@ -0,0 +1,4 @@
+export interface PhoneContactBoxDesktopProps {
+  phones: string[]
+  schedule: string
+}

package/dist/src/components/molecules/PhoneContactBoxDesktop/index.ts

@@ -0,0 +1,2 @@
+export { PhoneContactBoxDesktop } from './PhoneContactBoxDesktop'
+export { type PhoneContactBoxDesktopProps } from './PhoneContactBoxDesktopProps.types'

package/dist/src/components/molecules/PhoneContactBoxMobile/PhoneContactBoxMobile.scss

@@ -0,0 +1,33 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.phone-mobile-contact {
+  &-box-container {
+    display: block;
+    padding-top: 1rem;
+
+    @include landscape-tablets {
+      display: none;
+    }
+  }
+
+  &-button {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+
+    &:before {
+      content: '';
+      width: 20px;
+      height: 20px;
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iZXA3dHIycDdyYSIgZD0iTTIwLjAxIDE1LjM4Yy0xLjIzIDAtMi40Mi0uMi0zLjUzLS41Ni0uMzUtLjEyLS43NC0uMDMtMS4wMS4yNGwtMS41NyAxLjk3Yy0yLjgzLTEuMzUtNS40OC0zLjktNi44OS02LjgzbDEuOTUtMS42NmMuMjctLjI4LjM1LS42Ny4yNC0xLjAyLS4zNy0xLjExLS41Ni0yLjMtLjU2LTMuNTMgMC0uNTQtLjQ1LS45OS0uOTktLjk5SDQuMTlDMy42NSAzIDMgMy4yNCAzIDMuOTkgMyAxMy4yOCAxMC43MyAyMSAyMC4wMSAyMWMuNzEgMCAuOTktLjYzLjk5LTEuMTh2LTMuNDVjMC0uNTQtLjQ1LS45OS0uOTktLjk5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Zz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzc2LjAwMDAwMCwgLTMxNC4wMDAwMDApIHRyYW5zbGF0ZSgzMjguMDAwMDAwLCAyMDUuMDAwMDAwKSB0cmFuc2xhdGUoMzIuMDAwMDAwLCA5MC4wMDAwMDApIHRyYW5zbGF0ZSgxNi4wMDAwMDAsIDE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSI3dHZidm9pbXpiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2VwN3RyMnA3cmEiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBjbGFzcz0iaWNvbi13ZWItMjQtcCIgZmlsbD0iI2ZmZiIgbWFzaz0idXJsKCM3dHZidm9pbXpiKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');
+      margin-right: 0.5rem;
+    }
+  }
+
+  &-text {
+    color: get-color(neutral, neutral-2);
+    text-align: center;
+    margin: 0rem 0 2rem;
+  }
+}

package/dist/src/components/molecules/PhoneContactBoxMobile/PhoneContactBoxMobile.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { Button } from '../../atoms'
+import { type PhoneContactBoxMobileProps } from './PhoneContactBoxMobileProps.types'
+// import './PhoneContactBoxMobile.scss'
+
+export const PhoneContactBoxMobile: React.FC<PhoneContactBoxMobileProps> = ({ phones, schedule }) => {
+  return (
+    <div className='phone-mobile-contact-box-container wrapper wrapper--responsive'>
+      {phones.map((phone, index) => (
+        <Button
+          key={`${phone}-${index}`}
+          centered
+          isExternal
+          link={`tel:${phone}`}
+          gtmTag={'clicked_phone_contactus'}
+          givenClass='phone-mobile-contact-button e-button e-button--link e-button--primary-1 e-button--center'
+          label={phone}
+          dataQa={'phone_contact_box'}
+        />
+      ))}
+      <p className='phone-mobile-contact-text'>{schedule}</p>
+    </div>
+  )
+}

package/dist/src/components/molecules/PhoneContactBoxMobile/PhoneContactBoxMobileProps.types.ts

@@ -0,0 +1,4 @@
+export interface PhoneContactBoxMobileProps {
+  phones: string[]
+  schedule: string
+}

package/dist/src/components/molecules/PhoneContactBoxMobile/index.ts

@@ -0,0 +1,2 @@
+export { PhoneContactBoxMobile } from './PhoneContactBoxMobile'
+export { type PhoneContactBoxMobileProps } from './PhoneContactBoxMobileProps.types'

package/dist/src/components/molecules/PopularDocs/PopularDocs.scss

@@ -0,0 +1,34 @@
+@import '../../../globalStyles/mediaqueries.scss';
+
+.popular-docs {
+  width: 80%;
+  margin-left: 3rem;
+
+  @media only screen and (max-width: #{$md}) {
+    margin-left: 0;
+  }
+
+  @media only screen and (max-width: #{$xs}) {
+    width: 95%;
+  }
+
+  .title {
+    text-align: left;
+    padding-left: 0.5rem;
+    font-size: 18px;
+    line-height: 1.33;
+    letter-spacing: -0.3px;
+    color: get-color(primary, main-dark-1);
+    margin-bottom: 16px;
+
+    @media only screen and (max-width: #{$md}) {
+      text-align: center;
+    }
+  }
+
+  .documents {
+    display: flex;
+    flex-direction: column;
+    gap: $global-gap;
+  }
+}

package/dist/src/components/molecules/PopularDocs/PopularDocs.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { PopularDocsItem } from '../../atoms'
+import { type PopularDocsProps } from './PopularDocsProps'
+// import './PopularDocs.scss'
+
+export const PopularDocs: React.FC<PopularDocsProps> = ({ title, documents }) => {
+  return (
+    <div className='popular-docs'>
+      <h2 className='title'>{title}</h2>
+      <div className='documents'>
+        {documents.map((document) => (
+          <PopularDocsItem key={document.id} {...document} />
+        ))}
+      </div>
+    </div>
+  )
+}