Merge pull request #188 from carbonplan/Shane98c/scroll-to-figs

use figure/table caption numbers for anchoring

Author: Shane98c

src/figure-caption.js

@@ -9,4 +9,6 @@ const FigureCaption = ({ as = 'figcaption', number, children }) => {
   )
 }
 
+FigureCaption.displayName = 'FigureCaption'
+
 export default FigureCaption

src/figure.js

@@ -4,11 +4,28 @@ import { Box } from 'theme-ui'
 import Group from './group'
 
 const Figure = ({ as = 'figure', children, sx }) => {
+  // try to use figure/table number as id for anchoring
+  const childrenArray = React.Children.toArray(children)
+  const captionElement = childrenArray.find(
+    (child) =>
+      React.isValidElement(child) &&
+      child.type?.displayName &&
+      (child.type.displayName === 'FigureCaption' ||
+        child.type.displayName === 'TableCaption')
+  )
+
+  const elementNumber = captionElement?.props?.number
+  const elementType =
+    captionElement?.type?.displayName === 'TableCaption' ? 'table' : 'figure'
+  const id = elementNumber ? `${elementType}-${elementNumber}` : undefined
+
   return (
     <Box
       as={as}
+      id={id}
       sx={{
         my: [6, 6, 6, 7],
+        scrollMarginTop: '60px', // account for header height
         '@media print': {
           breakInside: 'avoid',
         },

src/table-caption.js

@@ -9,4 +9,6 @@ const TableCaption = ({ as = 'figcaption', number, children }) => {
   )
 }
 
+TableCaption.displayName = 'TableCaption'
+
 export default TableCaption