feat(Learn): mark learn section title as read (#3098)

shanpriyan · web-flow · commit 1394e9fa646f · 2022-12-19T16:31:01.000+01:00
* Feat: mark section title as read

* Chore: update snapshot
diff --git a/src/navigations/learn.module.scss b/src/navigations/learn.module.scss
@@ -17,6 +17,15 @@
     height: 14px;
     padding: 0 var(--space-24) 0 0;
   }
+
+  &--done::before {
+    content: $checkSvg;
+  }
+
+  &--done::before,
+  &--done:hover::before {
+    box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
+  }
 }
 
 .item {
diff --git a/src/navigations/learn.tsx b/src/navigations/learn.tsx
@@ -14,13 +14,16 @@ const LearnNavigationSection = ({
   section,
   children,
   currentSlug,
+  isAllRead,
 }: React.PropsWithChildren<NavigationSectionData>) => {
   const { isSectionOpen, toggleSection } = useNavigationSection({
     section,
     currentSlug,
   });
 
-  const titleClassNames = classnames('t-body2', styles.title);
+  const titleClassNames = classnames('t-body2', styles.title, {
+    [styles.titleDone]: isAllRead,
+  });
 
   const sectionTitle = (
     <button
@@ -67,6 +70,7 @@ const LearnNavigation = ({ sections, currentSlug }: Props) => {
       title={key}
       section={data}
       currentSlug={currentSlug}
+      isAllRead={data.every(({ slug }) => isRead(slug))}
     >
       {data.map(item => (
         <NavigationComponents.NavigationItem
diff --git a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
@@ -263,7 +263,7 @@ exports[`Learn Template renders correctly 1`] = `
         >
           <button
             aria-expanded="false"
-            class="t-body2 title"
+            class="t-body2 title titleDone"
             type="button"
           >
             <span>
@@ -311,7 +311,7 @@ exports[`Learn Template renders correctly 1`] = `
         >
           <button
             aria-expanded="false"
-            class="t-body2 title"
+            class="t-body2 title titleDone"
             type="button"
           >
             <span>
diff --git a/src/types/navigation.ts b/src/types/navigation.ts
@@ -2,6 +2,7 @@ export interface NavigationSectionData {
   title: string;
   section: NavigationItemData[];
   currentSlug: string;
+  isAllRead?: boolean;
 }
 
 export interface NavigationItemData {

Original file line number	Diff line number	Diff line change
@@ -263,7 +263,7 @@ exports[`Learn Template renders correctly 1`] = `
`263`	`263`	`>`
`264`	`264`	`<button`
`265`	`265`	`aria-expanded="false"`
`266`		`- class="t-body2 title"`
	`266`	`+ class="t-body2 title titleDone"`
`267`	`267`	`type="button"`
`268`	`268`	`>`
`269`	`269`	`<span>`
@@ -311,7 +311,7 @@ exports[`Learn Template renders correctly 1`] = `
`311`	`311`	`>`
`312`	`312`	`<button`
`313`	`313`	`aria-expanded="false"`
`314`		`- class="t-body2 title"`
	`314`	`+ class="t-body2 title titleDone"`
`315`	`315`	`type="button"`
`316`	`316`	`>`
`317`	`317`	`<span>`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ export interface NavigationSectionData {`
`2`	`2`	`title: string;`
`3`	`3`	`section: NavigationItemData[];`
`4`	`4`	`currentSlug: string;`
	`5`	`+ isAllRead?: boolean;`
`5`	`6`	`}`
`6`	`7`
`7`	`8`	`export interface NavigationItemData {`