Add ids to page sections

vovacodes · Mar 26, 2021 · 5d3a45e · 5d3a45e
1 parent 19cff13
commit 5d3a45e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/demo/src/apps/Home/components/DemoSelector.tsx b/packages/demo/src/apps/Home/components/DemoSelector.tsx
@@ -9,7 +9,7 @@ export function DemoSelector() {
     const history = useHistory()
 
     return (
-        <PageSlide>
+        <PageSlide id="demo-selector">
             <h1
                 style={{
                     ...Typography.heading2,

diff --git a/packages/demo/src/apps/Home/components/Hero.tsx b/packages/demo/src/apps/Home/components/Hero.tsx
@@ -10,7 +10,7 @@ export function Hero() {
     const [focused, setFocused] = useState(false)
 
     return (
-        <PageSlide ref={ref} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}>
+        <PageSlide id="hero" ref={ref} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}>
             <div
                 style={{
                     display: "flex",

diff --git a/packages/demo/src/components/PageSlide.tsx b/packages/demo/src/components/PageSlide.tsx
@@ -4,7 +4,12 @@ import { Branch, useFocusable, useFocusManager } from "react-sunbeam"
 import { useMergedRef } from "../apps/utils/useMergedRef.js"
 
 export const PageSlide = React.forwardRef(function PageSlide(
-    { children, onFocus, onBlur }: { children: React.ReactNode; onFocus?: () => void; onBlur?: () => void },
+    {
+        id,
+        children,
+        onFocus,
+        onBlur,
+    }: { id: string; children: React.ReactNode; onFocus?: () => void; onBlur?: () => void },
     ref
 ) {
     const innerRef = React.useRef<HTMLDivElement>(null)
@@ -49,6 +54,7 @@ export const PageSlide = React.forwardRef(function PageSlide(
     return (
         <Branch node={node}>
             <div
+                id={id}
                 ref={useMergedRef(innerRef, ref)}
                 style={{
                     boxSizing: "border-box",