Function LearningTrack

components/guides/LearningTrack.tsx:17–133

({ track }: Props)

const DEFAULT_VISIBLE_GUIDES = 4
export const LearningTrack = ({ track }: Props) => {
  const [numVisible, setNumVisible] = useState(DEFAULT_VISIBLE_GUIDES)
  const { t } = useTranslation('product_guides')
  const titleSlug = track?.title ? slug(track?.title) : ''
  const showAll = () => {
    setNumVisible(track?.guides?.length || 0)
  }

  return (
    <div data-testid="learning-track" className="my-3 px-4 col-12 col-md-6">
      <div className="Box d-flex flex-column">
        <div className="Box-header color-bg-subtle p-4 d-flex flex-1 flex-items-start flex-wrap">
          <div className="d-flex flex-auto flex-items-start col-7 col-md-7 col-xl-7">
            <div className="my-xl-0 mr-xl-3">
              <h3
                id={titleSlug}
                className={cx('mb-3 color-text f3 text-semibold', styles.hashAnchor)}
              >
                <a className="color-unset" href={`#${titleSlug}`}>
                  {track?.title}
                </a>
              </h3>
              <TruncateLines as="p" maxLines={3} className="color-text">
                {track?.description}
              </TruncateLines>
            </div>
          </div>
          <Link
            {...{ 'aria-label': `${track?.title} - ${t('start_path')}` }}
            className="d-inline-flex btn no-wrap mt-3 mt-md-0 flex-items-center flex-justify-center"
            href={`${track?.guides && track?.guides[0].href}?learn=${
              track?.trackName
            }&learnProduct=${track?.trackProduct}`}
          >
            <span>{t('start_path')}</span>
            <ArrowRightIcon size={20} className="ml-2" />
          </Link>
        </div>

        {track && track.guides && (
          <div style={{ counterReset: 'li' }}>
            <ActionList as="ol" variant="full">
              {track?.guides?.slice(0, numVisible).map((guide) => {
                return (
                  <ActionList.Item
                    as="li"
                    key={guide.href + track?.trackName}
                    className="width-full p-0"
                    sx={{
                      position: 'relative',
                      borderRadius: 0,
                      ':hover': {
                        borderRadius: 0,
                      },
                      ':before': {
                        width: 'calc(1.5rem - 0px)',
                        height: 'calc(1.5rem - 0px)',
                        fontSize: 'calc(1rem - 1px)',