From 5d88ffbef71e0195a305ee471da202da68827f89 Mon Sep 17 00:00:00 2001
From: Robert Sese <robert.sese@gmail.com>
Date: Fri, 17 Dec 2021 13:52:49 -0600
Subject: [PATCH] Use ol for LearningTracks (#23461)

* Use ol for LearningTracks

* Flip li counter bg/fg colors

Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com>
---
 components/guides/LearningTrack.tsx | 100 +++++++++++++++-------------
 1 file changed, 54 insertions(+), 46 deletions(-)

diff --git a/components/guides/LearningTrack.tsx b/components/guides/LearningTrack.tsx
index 4d3d0ecb03eb..f4ae20b9b49f 100644
--- a/components/guides/LearningTrack.tsx
+++ b/components/guides/LearningTrack.tsx
@@ -50,55 +50,63 @@ export const LearningTrack = ({ track }: Props) => {
         </div>
 
         {track && track.guides && (
-          <ActionList
-            {...{ as: 'ul' }}
-            items={track?.guides?.slice(0, numVisible).map((guide) => {
-              return {
-                renderItem: () => (
-                  <ActionList.Item
-                    as="li"
-                    key={guide.href + track?.trackName}
-                    sx={{
-                      borderRadius: 0,
-                      padding: 0,
-                      ':hover': {
+          <div style={{ counterReset: 'li' }}>
+            <ActionList
+              {...{ as: 'ol' }}
+              items={track?.guides?.slice(0, numVisible).map((guide) => {
+                return {
+                  renderItem: () => (
+                    <ActionList.Item
+                      as="li"
+                      key={guide.href + track?.trackName}
+                      sx={{
+                        position: 'relative',
                         borderRadius: 0,
-                      },
-                      ':last-of-type': {
-                        marginBottom: '-8px',
-                      },
-                      ':first-of-type': {
-                        marginTop: '-8px',
-                      },
-                    }}
-                  >
-                    <a
-                      className="rounded-0 width-full d-block Box-row d-flex flex-items-center color-fg-default no-underline"
-                      href={`${guide.href}?learn=${track?.trackName}&learnProduct=${track?.trackProduct}`}
+                        padding: 0,
+                        ':hover': {
+                          borderRadius: 0,
+                        },
+                        ':last-of-type': {
+                          marginBottom: '-8px',
+                        },
+                        ':first-of-type': {
+                          marginTop: '-8px',
+                        },
+                        ':before': {
+                          width: 'calc(1.5rem - 0px)',
+                          height: 'calc(1.5rem - 0px)',
+                          fontSize: 'calc(1rem - 1px)',
+                          margin: '22px 0 0 1rem',
+                          content: 'counter(li)',
+                          counterIncrement: 'li',
+                          position: 'absolute',
+                          left: 0,
+                          color: 'var(--color-canvas-default)',
+                          fontWeight: 500,
+                          textAlign: 'center',
+                          borderRadius: '50%',
+                          backgroundColor: 'var(--color-fg-default)',
+                        },
+                      }}
                     >
-                      <div
-                        className="color-bg-subtle d-inline-flex mr-4 circle flex-items-center flex-justify-center"
-                        style={{ width: 32, height: 32 }}
+                      <a
+                        className="rounded-0 pl-7 py-4 width-full d-block Box-row d-flex flex-items-center color-fg-default no-underline"
+                        href={`${guide.href}?learn=${track?.trackName}&learnProduct=${track?.trackProduct}`}
                       >
-                        {track?.guides && (
-                          <span className="m-2 f3 lh-condensed-ultra text-center text-bold step-circle-text">
-                            {track.guides?.indexOf(guide) + 1}
-                          </span>
-                        )}
-                      </div>
-                      <h5
-                        className="flex-auto pr-2"
-                        dangerouslySetInnerHTML={{ __html: guide.title }}
-                      />
-                      <div className="color-fg-muted h6 text-uppercase flex-shrink-0">
-                        {t('guide_types')[guide.page?.type || '']}
-                      </div>
-                    </a>
-                  </ActionList.Item>
-                ),
-              }
-            })}
-          ></ActionList>
+                        <h5
+                          className="flex-auto pr-2"
+                          dangerouslySetInnerHTML={{ __html: guide.title }}
+                        />
+                        <div className="color-fg-muted h6 text-uppercase flex-shrink-0">
+                          {t('guide_types')[guide.page?.type || '']}
+                        </div>
+                      </a>
+                    </ActionList.Item>
+                  ),
+                }
+              })}
+            ></ActionList>
+          </div>
         )}
         {(track?.guides?.length || 0) > numVisible ? (
           <button