Scaffold TableOfContents compact view

packages/embla-carousel-docs/gatsby-browser.js

@@ -8,7 +8,7 @@ export const onRouteUpdate = ({ location }) => {
   const element = document.getElementById(id)
 
   if (element) {
-    const topOffset = 60
+    const topOffset = 72
     const Y = element.getBoundingClientRect().top + window.scrollY - topOffset
     window.scroll(0, Y)
   }

packages/embla-carousel-docs/gatsby-config.js

@@ -62,7 +62,7 @@ module.exports = {
           {
             resolve: 'gatsby-remark-autolink-headers',
             options: {
-              offsetY: '60',
+              offsetY: '72',
               className: 'anchor',
               elements: ['h2', 'h3', 'h4', 'h5', 'h6'],
               icon: `<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" fill="currentColor" /></svg>`,

packages/embla-carousel-docs/src/components/Button/BareButton.tsx

@@ -1,17 +1,17 @@
-import React, { PropsWithChildren, ButtonHTMLAttributes } from 'react'
+import React, { PropsWithRef } from 'react'
 import styled, { css } from 'styled-components'
-import { useTabAccess } from 'hooks/useTabAccess'
+import { useKeyNavigating } from 'hooks/useKeyNavigating'
 import { COLORS } from 'consts/themes'
 import {
-  tabAccessStyles,
+  keyNavigatingStyles,
   OUTLINE_SIZE,
-} from 'components/TabAccess/tabAccessStyles'
+} from 'components/KeyNavigating/keyNavigatingStyles'
 
 export const bareButtonStyles = css<{
-  $isTabbing: boolean
+  $isKeyNavigating: boolean
   $isButton?: boolean
 }>`
-  ${tabAccessStyles};
+  ${keyNavigatingStyles};
   color: ${COLORS.TEXT_BODY};
   outline-offset: -${OUTLINE_SIZE};
   -webkit-tap-highlight-color: rgba(
@@ -38,22 +38,32 @@ export const bareButtonStyles = css<{
     `}
 `
 
-const Wrapper = styled.button`
+const BareButtonWrapper = styled.button`
   ${bareButtonStyles};
   position: relative;
 `
 
-export type PropType = PropsWithChildren<
-  ButtonHTMLAttributes<HTMLButtonElement>
+export type PropType = PropsWithRef<
+  React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >
 >
 
-export const BareButton = (props: PropType) => {
-  const { children, ...restProps } = props
-  const isTabbing = useTabAccess()
+export const BareButton = React.forwardRef(
+  (props: PropType, ref: React.ForwardedRef<HTMLButtonElement>) => {
+    const { children, ...restProps } = props
+    const { isKeyNavigating } = useKeyNavigating()
 
-  return (
-    <Wrapper $isTabbing={isTabbing} $isButton {...restProps}>
-      {children}
-    </Wrapper>
-  )
-}
+    return (
+      <BareButtonWrapper
+        $isKeyNavigating={isKeyNavigating}
+        ref={ref}
+        $isButton
+        {...restProps}
+      >
+        {children}
+      </BareButtonWrapper>
+    )
+  },
+)

packages/embla-carousel-docs/src/components/CodeSandbox/SelectCodeSandbox.tsx

@@ -25,7 +25,7 @@ const DESKTOP_END_SPACING = SPACINGS.TEN
 const BUTTON_SIZE = '4rem'
 const ICON_SIZE = '2.35rem'
 
-const Wrapper = styled.div`
+const SelectCodeSandboxWrapper = styled.div`
   margin-top: -${SPACINGS.THREE};
 `
 
@@ -118,7 +118,7 @@ export const SelectCodeSandbox = (props: PropType) => {
   useEventListener('keyup', onKeyUp)
 
   return (
-    <Wrapper>
+    <SelectCodeSandboxWrapper>
       <SelectCodeSandboxButton
         id={SELECT_CODESANDBOX_DIALOG_ID}
         aria-expanded={selectionOpen}
@@ -157,6 +157,6 @@ export const SelectCodeSandbox = (props: PropType) => {
           </FocusTrap>
         </Portal>
       )}
-    </Wrapper>
+    </SelectCodeSandboxWrapper>
   )
 }

packages/embla-carousel-docs/src/components/CodeSandbox/SelectCodeSandboxForm.tsx

@@ -8,7 +8,7 @@ import { SelectCodeSandboxType } from './sandboxTypes'
 import { PrimaryButtonFilled } from 'components/Button/PrimaryButtonFilled'
 import { COLORS } from 'consts/themes'
 import { SANDBOX_CREATE_LABELS } from './createSandboxFunctionsWithLabels'
-import { OUTLINE_SIZE } from 'components/TabAccess/tabAccessStyles'
+import { OUTLINE_SIZE } from 'components/KeyNavigating/keyNavigatingStyles'
 import { FONT_SIZES } from 'consts/fontSizes'
 import { IconType } from 'assets/icons'
 import { Icon } from 'components/Icon/Icon'
@@ -24,7 +24,7 @@ const ICONS_BY_LABEL: { [key: string]: IconType } = {
   [SANDBOX_CREATE_LABELS.REACT_TS]: 'react',
 }
 
-const Wrapper = styled.form`
+const SelectCodeSandboxFormWrapper = styled.form`
   display: flex;
   flex-direction: column;
 `
@@ -141,7 +141,11 @@ export const SelectCodeSandboxForm = (props: PropType) => {
   }, [chosenSandboxLabel])
 
   return (
-    <Wrapper action={URLS.CODESANDBOX_DEFINE} method="POST" target="_blank">
+    <SelectCodeSandboxFormWrapper
+      action={URLS.CODESANDBOX_DEFINE}
+      method="POST"
+      target="_blank"
+    >
       <Fieldset>
         <Legend>Select CodeSandbox</Legend>
 
@@ -180,6 +184,6 @@ export const SelectCodeSandboxForm = (props: PropType) => {
           />
         )}
       </SubmitButton>
-    </Wrapper>
+    </SelectCodeSandboxFormWrapper>
   )
 }

packages/embla-carousel-docs/src/components/Footer/Footer.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { Frame, FRAME_SPACING } from 'components/SiteLayout/Frame'
 import { Links } from './Links'
 
-const Wrapper = styled.footer`
+const FooterWrapper = styled.footer`
   padding-top: ${FRAME_SPACING};
   padding-bottom: ${FRAME_SPACING};
 `
@@ -15,10 +15,10 @@ const Content = styled(Frame)`
 
 export const Footer = () => {
   return (
-    <Wrapper>
+    <FooterWrapper>
       <Content>
         <Links />
       </Content>
-    </Wrapper>
+    </FooterWrapper>
   )
 }

packages/embla-carousel-docs/src/components/Footer/Links.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react'
 import styled from 'styled-components'
 import { PlainLink } from 'components/Link/PlainLink'
-import { OUTLINE_SIZE } from 'components/TabAccess/tabAccessStyles'
+import { OUTLINE_SIZE } from 'components/KeyNavigating/keyNavigatingStyles'
 import { COLORS } from 'consts/themes'
 import { SPACINGS } from 'consts/spacings'
 import { URLS } from 'consts/urls'
@@ -10,7 +10,7 @@ import { IconWithText } from 'components/Icon/IconWithText'
 const LINK_SPACING = SPACINGS.FIVE
 const ICON_SPACING = SPACINGS.CUSTOM(({ TWO }) => TWO - 0.2)
 
-const Wrapper = styled.ul`
+const LinksWrapper = styled.ul`
   margin-left: -${LINK_SPACING};
   display: flex;
 `
@@ -31,7 +31,7 @@ export const Links = (props: PropType) => {
   const { ...restProps } = props
 
   return (
-    <Wrapper {...restProps}>
+    <LinksWrapper {...restProps}>
       <li>
         <Link to={URLS.NPM_PACKAGE}>
           <IconWithText iconSvg="npm" spacing={ICON_SPACING}>
@@ -46,6 +46,6 @@ export const Links = (props: PropType) => {
           </IconWithText>
         </Link>
       </li>
-    </Wrapper>
+    </LinksWrapper>
   )
 }

packages/embla-carousel-docs/src/components/Header/Actions.tsx

@@ -11,7 +11,7 @@ import { hiddenAtBreakpointStyles } from 'utils/hiddenAtBreakpointStyles'
 
 const ITEM_SPACING_SM_UP = SPACINGS.CUSTOM(({ FOUR }) => FOUR + 0.4)
 
-const Wrapper = styled.ul`
+const ActionsWrapper = styled.ul`
   display: flex;
   align-items: center;
   line-height: 1.65;
@@ -40,16 +40,16 @@ export const Actions = () => {
   const { hierarchical: routes } = useRoutes()
 
   return (
-    <Wrapper>
+    <ActionsWrapper>
       <Item $hidden="COMPACT">
         <nav aria-label="Quick Navigation Menu">
-          <Wrapper>
+          <ActionsWrapper>
             {routes.map((route) => (
               <Item key={route.id}>
                 <Link slug={route.slug}>{route.title}</Link>
               </Item>
             ))}
-          </Wrapper>
+          </ActionsWrapper>
         </nav>
       </Item>
       <Item>
@@ -58,6 +58,6 @@ export const Actions = () => {
       <Item $hidden="COMPACT">
         <ThemeToggle />
       </Item>
-    </Wrapper>
+    </ActionsWrapper>
   )
 }

packages/embla-carousel-docs/src/components/Header/Header.tsx

@@ -16,7 +16,7 @@ const HEIGHT = css`
   height: ${HEADER_HEIGHT};
 `
 
-const Wrapper = styled.header`
+const HeaderWrapper = styled.header`
   ${HEIGHT};
 `
 
@@ -45,14 +45,14 @@ const Content = styled(Frame)`
 
 export const Header = () => {
   return (
-    <Wrapper id={HEADER_ID}>
+    <HeaderWrapper id={HEADER_ID}>
       <Fixed>
         <Content>
           <SiteNavigationToggle />
           <Logo />
           <Actions />
         </Content>
       </Fixed>
-    </Wrapper>
+    </HeaderWrapper>
   )
 }

packages/embla-carousel-docs/src/components/Header/Logo.tsx

@@ -9,7 +9,7 @@ import { FONT_SIZES } from 'consts/fontSizes'
 import { PlainLink } from 'components/Link/PlainLink'
 import { SiteLogo } from 'components/SiteLogo/SiteLogo'
 
-const Wrapper = styled(PlainLink)`
+const LogoWrapper = styled(PlainLink)`
   color: ${COLORS.TEXT_HIGH_CONTRAST};
   font-size: ${FONT_SIZES.H4};
   display: flex;
@@ -41,9 +41,9 @@ export const Logo = () => {
   const { title } = useSiteMetadata()
 
   return (
-    <Wrapper aria-label="Permalink to home page" to="/">
+    <LogoWrapper aria-label="Permalink to home page" to="/">
       <HeaderLogo />
       <span>{title}</span>
-    </Wrapper>
+    </LogoWrapper>
   )
 }

packages/embla-carousel-docs/src/components/Hero/Brand.tsx

@@ -8,7 +8,7 @@ import { SiteLogo } from 'components/SiteLogo/SiteLogo'
 import { createSquareSizeStyles } from 'utils/createSquareSizeStyles'
 import { gradientTextStyles } from 'utils/gradientTextStyles'
 import { useSiteMetadata } from 'hooks/useSiteMetadata'
-import { SKIP_TO_CONTENT_ID } from 'components/TabAccess/SkipToContent'
+import { MAIN_CONTENT_ID } from 'components/KeyNavigating/SkipToContent'
 import { PrimaryButtonFilledLink } from 'components/Link/ButtonLink'
 
 const MAX_CONTENT_WIDTH = '50rem'
@@ -113,7 +113,7 @@ export const Brand = () => {
           ))}
         </H1>
         <H2>{description}</H2>
-        <CtaWrapper id={SKIP_TO_CONTENT_ID}>
+        <CtaWrapper id={MAIN_CONTENT_ID}>
           <PrimaryButtonFilledLink to="/examples/static/">
             Try Examples
           </PrimaryButtonFilledLink>

packages/embla-carousel-docs/src/components/Icon/IconWithText.tsx

@@ -4,7 +4,7 @@ import { IconType } from 'assets/icons'
 import { Icon } from './Icon'
 import { SPACINGS } from 'consts/spacings'
 
-const Wrapper = styled.div<{ $spacing: string }>`
+const IconWithTextWrapper = styled.div<{ $spacing: string }>`
   display: flex;
   align-items: center;
 
@@ -33,10 +33,10 @@ export const IconWithText = (props: PropType) => {
   const svg = <Icon svg={iconSvg} size={iconSize} />
 
   return (
-    <Wrapper $spacing={spacing} {...restProps}>
+    <IconWithTextWrapper $spacing={spacing} {...restProps}>
       {svgOnLeftSide && svg}
       <span>{children}</span>
       {!svgOnLeftSide && svg}
-    </Wrapper>
+    </IconWithTextWrapper>
   )
 }

packages/embla-carousel-docs/src/components/KeyNavigating/Context.tsx

@@ -0,0 +1,53 @@
+import React, {
+  useState,
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useMemo,
+} from 'react'
+import { useEventListener } from 'hooks/useEventListener'
+
+export type KeyNavigatingContextType = {
+  isKeyNavigating: boolean
+  setIsKeyNavigating: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export const KeyNavigatingContext = createContext<KeyNavigatingContextType>({
+  isKeyNavigating: false,
+  setIsKeyNavigating: () => undefined,
+})
+
+type PropType = PropsWithChildren<{}>
+
+export const KeyNavigatingProvider = (props: PropType) => {
+  const { children } = props
+  const [isKeyNavigating, setIsKeyNavigating] = useState(false)
+
+  const onMouseDown = useCallback(() => {
+    if (isKeyNavigating) setIsKeyNavigating(false)
+  }, [isKeyNavigating, setIsKeyNavigating])
+
+  const onKeyDown = useCallback(
+    ({ key }: KeyboardEvent) => {
+      if (key === 'Tab' && !isKeyNavigating) setIsKeyNavigating(true)
+    },
+    [isKeyNavigating, setIsKeyNavigating],
+  )
+
+  const value = useMemo(
+    () => ({
+      isKeyNavigating,
+      setIsKeyNavigating,
+    }),
+    [isKeyNavigating, setIsKeyNavigating],
+  )
+
+  useEventListener('keydown', onKeyDown)
+  useEventListener('mousedown', onMouseDown)
+
+  return (
+    <KeyNavigatingContext.Provider value={value}>
+      {children}
+    </KeyNavigatingContext.Provider>
+  )
+}