Make steps clickable

code-hike · Mar 8, 2021 · 4333a8b · 4333a8b
1 parent c4d2631
commit 4333a8b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/external/new-react-website b/external/new-react-website
diff --git a/packages/scrollycoding/src/fluid-layout.tsx b/packages/scrollycoding/src/fluid-layout.tsx
@@ -139,14 +139,21 @@ function StepContent({
   stepIndex: number
 }) {
   const c = useClasser("ch-hike-step")
-  const { hikeState } = useFluidContext()
+  const { dispatch, hikeState } = useFluidContext()
   const focusStepIndex =
     hikeState.focusStepIndex ?? hikeState.scrollStepIndex
   const isOn = stepIndex === focusStepIndex
   return (
     <Step
       as="div"
       index={stepIndex}
+      onClick={() =>
+        dispatch({
+          type: "set-focus",
+          stepIndex,
+          codeProps: {},
+        })
+      }
       className={c("", isOn ? "focused" : "unfocused")}
     >
       {stepIndex > 0 && <div className={c("gap")} />}

diff --git a/packages/scrollycoding/src/focus.tsx b/packages/scrollycoding/src/focus.tsx
@@ -53,15 +53,16 @@ function FocusButton({
         isFocused ? "focus-active" : "focus-inactive"
       )}
       title="Show code"
-      onClick={() =>
+      onClick={e => {
         isFocused
           ? dispatch({ type: "reset-focus" })
           : dispatch({
               type: "set-focus",
               stepIndex,
               codeProps,
             })
-      }
+        e.stopPropagation()
+      }}
     >
       {children}
       <Icon isFocused={isFocused} />

diff --git a/packages/storybook/src/assets/scrollycoding.repeat.mdx b/packages/storybook/src/assets/scrollycoding.repeat.mdx
@@ -24,7 +24,7 @@ export default function App() {
 
 ## Step 1
 
-Sed quis ipsum nisl. Ut eget turpis id justo lobortis molestie sed in turpis. Pellentesque maximus erat ut eleifend rutrum. Nulla lectus sem, pulvinar eu tortor at, lacinia auctor felis. Aenean semper, quam a pellentesque laoreet, ex diam vehicula urna, eget ornare nulla enim vitae massa. Nulla lacus sem, sodales non felis quis, tincidunt porta turpis. Donec suscipit vulputate purus eu elementum.
+Sed quis ipsum nisl. Ut eget [turpis](https://codehike.org) id justo lobortis molestie sed in turpis. Pellentesque maximus erat ut eleifend rutrum. Nulla lectus sem, pulvinar eu tortor at, lacinia auctor felis. Aenean semper, quam a pellentesque laoreet, ex diam vehicula urna, eget ornare nulla enim vitae massa. Nulla lacus sem, sodales non felis quis, tincidunt porta turpis. Donec suscipit vulputate purus eu elementum.
 
 <CodeSlot style={{ height: 200 }} />