@chronogrove/ui 0.76.0

package/src/skip-nav/SkipNavContent.spec.js

@@ -0,0 +1,22 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import SkipNavContent from './SkipNavContent'
+
+describe('SkipNavContent', () => {
+  it('renders target region with id and data attribute', () => {
+    render(
+      <SkipNavContent>
+        <span>main</span>
+      </SkipNavContent>
+    )
+    const region = document.getElementById('skip-nav-content')
+    expect(region).not.toBeNull()
+    expect(region).toHaveAttribute('data-skip-nav-content', '')
+    expect(region).toHaveAttribute('tabIndex', '-1')
+    expect(screen.getByText('main')).toBeInTheDocument()
+  })
+})

package/src/skip-nav/SkipNavLink.js

@@ -0,0 +1,72 @@
+/** @jsx jsx */
+import { jsx, useThemeUI } from 'theme-ui'
+import { forwardRef } from 'react'
+import isDarkMode from '@chronogrove/ui/is-dark-mode'
+
+const SkipNavLink = forwardRef(function SkipNavLink(
+  { as: Comp = 'a', children = 'Skip to content', contentId = 'skip-nav-content', ...props },
+  forwardedRef
+) {
+  const { colorMode, theme } = useThemeUI()
+  const darkModeActive = isDarkMode(colorMode)
+  const primaryColor = theme?.colors?.primary ?? (darkModeActive ? '#4a9eff' : '#422EA3')
+  const primaryRgb = theme?.colors?.primaryRgb ?? (darkModeActive ? '74, 158, 255' : '66, 46, 163')
+
+  return (
+    <Comp
+      {...props}
+      ref={forwardedRef}
+      href={`#${contentId}`}
+      data-skip-nav-link=''
+      tabIndex={0}
+      sx={{
+        border: 0,
+        clip: 'rect(0 0 0 0)',
+        height: '1px',
+        width: '1px',
+        margin: '-1px',
+        padding: 0,
+        overflow: 'hidden',
+        position: 'absolute',
+        whiteSpace: 'nowrap',
+        wordWrap: 'normal',
+        '&:focus': {
+          clip: 'auto',
+          height: 'auto',
+          width: 'auto',
+          margin: 0,
+          overflow: 'visible',
+          whiteSpace: 'normal',
+          position: 'fixed',
+          top: 3,
+          left: 3,
+          zIndex: 9999,
+          color: primaryColor,
+          textDecoration: 'none',
+          fontWeight: 'medium',
+          fontSize: ['12px', '13px'],
+          display: 'inline-flex',
+          alignItems: 'center',
+          padding: '8px 12px',
+          borderRadius: '6px',
+          background: `rgba(${primaryRgb}, 0.15)`,
+          border: `1px solid rgba(${primaryRgb}, 0.3)`,
+          cursor: 'pointer',
+          outline: 'none',
+          boxShadow: `0 0 0 2px ${primaryColor}40`,
+          backdropFilter: 'blur(8px)',
+          '&:hover': {
+            background: `rgba(${primaryRgb}, 0.25)`,
+            textDecoration: 'none'
+          }
+        }
+      }}
+    >
+      {children}
+    </Comp>
+  )
+})
+
+SkipNavLink.displayName = 'SkipNavLink'
+
+export default SkipNavLink

package/src/skip-nav/SkipNavLink.spec.js

@@ -0,0 +1,56 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+import SkipNavLink from './SkipNavLink'
+
+const wrapperTheme = {
+  colors: {
+    primary: '#ff00aa',
+    primaryRgb: '255, 0, 170'
+  }
+}
+
+describe('SkipNavLink', () => {
+  beforeEach(() => {
+    window.localStorage.clear()
+  })
+
+  function renderLink(ui) {
+    return render(<ThemeUIProvider theme={wrapperTheme}>{ui}</ThemeUIProvider>)
+  }
+
+  it('links to skip content id and uses theme primary for focus styles context', () => {
+    renderLink(<SkipNavLink>Skip</SkipNavLink>)
+    const link = screen.getByRole('link', { name: /skip/i })
+    expect(link).toHaveAttribute('href', '#skip-nav-content')
+    expect(link).toHaveAttribute('data-skip-nav-link', '')
+  })
+
+  it('uses fallback colors when theme omits primary tokens', () => {
+    render(
+      <ThemeUIProvider theme={{ colors: {} }}>
+        <SkipNavLink>Go</SkipNavLink>
+      </ThemeUIProvider>
+    )
+    expect(screen.getByRole('link', { name: /go/i })).toBeInTheDocument()
+  })
+
+  it('uses dark-mode fallback primaries when colorMode is dark', () => {
+    window.localStorage.setItem('theme-ui-color-mode', 'dark')
+    render(
+      <ThemeUIProvider
+        theme={{
+          colors: {},
+          config: { useLocalStorage: true, useColorSchemeMediaQuery: false }
+        }}
+      >
+        <SkipNavLink>Go</SkipNavLink>
+      </ThemeUIProvider>
+    )
+    expect(screen.getByRole('link', { name: /go/i })).toBeInTheDocument()
+  })
+})

package/src/skip-nav/index.js

@@ -0,0 +1,2 @@
+export { default as SkipNavLink } from './SkipNavLink.js'
+export { default as SkipNavContent } from './SkipNavContent.js'