@chronogrove/ui 0.79.0 → 0.81.0

package/src/pagination.spec.js

@@ -0,0 +1,281 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import Pagination from './pagination.js'
+
+const mockTheme = {
+  colors: {
+    primary: '#422EA3',
+    primaryRgb: '66, 46, 163',
+    modes: {
+      dark: {
+        text: '#ffffff',
+        background: '#000000'
+      }
+    }
+  }
+}
+
+const renderWithProviders = component => {
+  return render(<ThemeUIProvider theme={mockTheme}>{component}</ThemeUIProvider>)
+}
+
+describe('Pagination', () => {
+  const defaultProps = {
+    currentPage: 1,
+    totalPages: 5,
+    onPageChange: jest.fn()
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders pagination controls', () => {
+    renderWithProviders(<Pagination {...defaultProps} />)
+
+    expect(screen.getByLabelText('Previous page')).toBeInTheDocument()
+    expect(screen.getByLabelText('Next page')).toBeInTheDocument()
+    expect(screen.getByText('1')).toBeInTheDocument()
+    expect(screen.getByText('2')).toBeInTheDocument()
+    expect(screen.getByText('3')).toBeInTheDocument()
+  })
+
+  it('renders page info', () => {
+    renderWithProviders(<Pagination {...defaultProps} />)
+
+    expect(screen.getByText('Page 1 of 5')).toBeInTheDocument()
+  })
+
+  it('hides page info when showPageInfo is false', () => {
+    renderWithProviders(<Pagination {...defaultProps} showPageInfo={false} />)
+
+    expect(screen.queryByText('Page 1 of 5')).not.toBeInTheDocument()
+  })
+
+  it('handles page changes', () => {
+    renderWithProviders(<Pagination {...defaultProps} />)
+
+    const page2Button = screen.getByText('2')
+    fireEvent.click(page2Button)
+
+    expect(defaultProps.onPageChange).toHaveBeenCalledWith(2)
+  })
+
+  it('does not call onPageChange when clicking the already active page', () => {
+    renderWithProviders(<Pagination {...defaultProps} currentPage={2} />)
+    jest.clearAllMocks()
+    fireEvent.click(screen.getByText('2'))
+    expect(defaultProps.onPageChange).not.toHaveBeenCalled()
+  })
+
+  it('handles previous button click', () => {
+    renderWithProviders(<Pagination {...defaultProps} currentPage={2} />)
+
+    const prevButton = screen.getByLabelText('Previous page')
+    fireEvent.click(prevButton)
+
+    expect(defaultProps.onPageChange).toHaveBeenCalledWith(1)
+  })
+
+  it('handles next button click', () => {
+    renderWithProviders(<Pagination {...defaultProps} />)
+
+    const nextButton = screen.getByLabelText('Next page')
+    fireEvent.click(nextButton)
+
+    expect(defaultProps.onPageChange).toHaveBeenCalledWith(2)
+  })
+
+  it('disables previous button on first page', () => {
+    renderWithProviders(<Pagination {...defaultProps} currentPage={1} />)
+
+    const prevButton = screen.getByLabelText('Previous page')
+    expect(prevButton).toBeDisabled()
+  })
+
+  it('disables next button on last page', () => {
+    renderWithProviders(<Pagination {...defaultProps} currentPage={5} />)
+
+    const nextButton = screen.getByLabelText('Next page')
+    expect(nextButton).toBeDisabled()
+  })
+
+  it('highlights current page', () => {
+    renderWithProviders(<Pagination {...defaultProps} currentPage={3} />)
+
+    const currentPageButton = screen.getByText('3')
+    expect(currentPageButton).toHaveAttribute('aria-current', 'page')
+  })
+
+  it('shows ellipsis for large page ranges', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={5} maxVisiblePages={3} />)
+
+    expect(screen.getAllByText('...')).toHaveLength(2)
+  })
+
+  it('shows first and last pages when needed', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={8} maxVisiblePages={3} />)
+
+    expect(screen.getByText('1')).toBeInTheDocument()
+    expect(screen.getByText('10')).toBeInTheDocument()
+  })
+
+  it('returns null when totalPages is 1', () => {
+    const { container } = renderWithProviders(<Pagination {...defaultProps} totalPages={1} />)
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('returns null when totalPages is 0', () => {
+    const { container } = renderWithProviders(<Pagination {...defaultProps} totalPages={0} />)
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('applies custom variant', () => {
+    renderWithProviders(<Pagination {...defaultProps} variant='secondary' currentPage={2} />)
+
+    const pageButton = screen.getByText('1')
+    expect(pageButton).toHaveStyle({
+      color: 'rgb(102, 102, 102)'
+    })
+  })
+
+  it('applies custom size', () => {
+    renderWithProviders(<Pagination {...defaultProps} size='large' />)
+
+    const pageButton = screen.getByText('1')
+    expect(pageButton).toHaveStyle({
+      fontSize: '12px',
+      minWidth: '32px',
+      height: '32px'
+    })
+  })
+
+  it('shows ellipsis when gap is exactly 2 pages from start', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={4} maxVisiblePages={3} />)
+
+    const ellipsis = screen.getAllByText('...')
+    expect(ellipsis.length).toBeGreaterThan(0)
+    expect(screen.getByText('1')).toBeInTheDocument()
+  })
+
+  it('shows ellipsis when gap is exactly 2 pages from end', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={7} maxVisiblePages={3} />)
+
+    const ellipsis = screen.getAllByText('...')
+    expect(ellipsis.length).toBeGreaterThan(0)
+    expect(screen.getByText('10')).toBeInTheDocument()
+  })
+
+  it('handles clicking first page button when first page is not visible', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={5} maxVisiblePages={3} />)
+
+    const firstPageButton = screen.getByLabelText('Go to page 1')
+    fireEvent.click(firstPageButton)
+
+    expect(defaultProps.onPageChange).toHaveBeenCalledWith(1)
+  })
+
+  it('handles clicking last page button when last page is not visible', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={5} maxVisiblePages={3} />)
+
+    const lastPageButton = screen.getByLabelText('Go to page 10')
+    fireEvent.click(lastPageButton)
+
+    expect(defaultProps.onPageChange).toHaveBeenCalledWith(10)
+  })
+
+  it('uses custom prev and next icons when provided', () => {
+    renderWithProviders(
+      <Pagination
+        {...defaultProps}
+        prevIcon={<span data-testid='prev-custom'>«</span>}
+        nextIcon={<span data-testid='next-custom'>»</span>}
+      />
+    )
+    expect(screen.getByTestId('prev-custom')).toBeInTheDocument()
+    expect(screen.getByTestId('next-custom')).toBeInTheDocument()
+  })
+
+  it('expands page window from the end when the range is narrower than maxVisiblePages', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={10} maxVisiblePages={5} />)
+    expect(screen.getByLabelText('Go to page 10')).toBeInTheDocument()
+  })
+
+  describe('Simple mode', () => {
+    it('renders only prev/next buttons in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} />)
+
+      expect(screen.getByLabelText('Previous page')).toBeInTheDocument()
+      expect(screen.getByLabelText('Next page')).toBeInTheDocument()
+      expect(screen.queryByText('1')).not.toBeInTheDocument()
+      expect(screen.queryByText('2')).not.toBeInTheDocument()
+    })
+
+    it('shows page counter in simple mode when showPageInfo is true', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} showPageInfo={true} />)
+
+      expect(screen.getByText('1/5')).toBeInTheDocument()
+    })
+
+    it('hides page counter in simple mode when showPageInfo is false', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} showPageInfo={false} />)
+
+      expect(screen.queryByText('1/5')).not.toBeInTheDocument()
+      expect(screen.getByLabelText('Previous page')).toBeInTheDocument()
+      expect(screen.getByLabelText('Next page')).toBeInTheDocument()
+    })
+
+    it('handles previous button click in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} currentPage={2} />)
+
+      const prevButton = screen.getByLabelText('Previous page')
+      fireEvent.click(prevButton)
+
+      expect(defaultProps.onPageChange).toHaveBeenCalledWith(1)
+    })
+
+    it('handles next button click in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} />)
+
+      const nextButton = screen.getByLabelText('Next page')
+      fireEvent.click(nextButton)
+
+      expect(defaultProps.onPageChange).toHaveBeenCalledWith(2)
+    })
+
+    it('disables previous button on first page in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} currentPage={1} />)
+
+      const prevButton = screen.getByLabelText('Previous page')
+      expect(prevButton).toBeDisabled()
+    })
+
+    it('disables next button on last page in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} currentPage={5} />)
+
+      const nextButton = screen.getByLabelText('Next page')
+      expect(nextButton).toBeDisabled()
+    })
+
+    it('applies custom variant in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} variant='secondary' />)
+
+      expect(screen.getByLabelText('Previous page')).toBeInTheDocument()
+      expect(screen.getByLabelText('Next page')).toBeInTheDocument()
+    })
+
+    it('applies custom size in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} size='small' />)
+
+      const prevButton = screen.getByLabelText('Previous page')
+      expect(prevButton).toHaveStyle({
+        fontSize: '10px',
+        minWidth: '24px',
+        height: '24px'
+      })
+    })
+  })
+})

package/src/skip-nav/SkipNavLink.js

@@ -1,6 +1,6 @@
-/** @jsx jsx */
-import { jsx, useThemeUI } from 'theme-ui'
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
+import { Box } from '@theme-ui/components'
+import { useThemeUI } from 'theme-ui'
 import isDarkMode from '../helpers/isDarkMode.js'
 
 const SkipNavLink = forwardRef(function SkipNavLink(
@@ -13,7 +13,8 @@ const SkipNavLink = forwardRef(function SkipNavLink(
   const primaryRgb = theme?.colors?.primaryRgb ?? (darkModeActive ? '74, 158, 255' : '66, 46, 163')
 
   return (
-    <Comp
+    <Box
+      as={Comp}
       {...props}
       ref={forwardedRef}
       href={`#${contentId}`}
@@ -63,7 +64,7 @@ const SkipNavLink = forwardRef(function SkipNavLink(
       }}
     >
       {children}
-    </Comp>
+    </Box>
   )
 })
 

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

@@ -30,6 +30,17 @@ describe('SkipNavLink', () => {
     expect(link).toHaveAttribute('data-skip-nav-link', '')
   })
 
+  it('respects custom contentId for the hash target', () => {
+    renderLink(<SkipNavLink contentId='main'>Jump</SkipNavLink>)
+    expect(screen.getByRole('link', { name: /jump/i })).toHaveAttribute('href', '#main')
+  })
+
+  it('uses default label and skip target when props are omitted', () => {
+    renderLink(<SkipNavLink />)
+    const link = screen.getByRole('link', { name: /skip to content/i })
+    expect(link).toHaveAttribute('href', '#skip-nav-content')
+  })
+
   it('uses fallback colors when theme omits primary tokens', () => {
     render(
       <ThemeUIProvider theme={{ colors: {} }}>

package/src/status-card.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Card } from '@theme-ui/components'
+import { useThemeUI } from 'theme-ui'
+
+import isDarkMode from './helpers/isDarkMode.js'
+
+const StatusCard = ({ message, ...props }) => {
+  const { colorMode } = useThemeUI()
+  const variant = isDarkMode(colorMode) ? 'metricCardDark' : 'metricCard'
+
+  return (
+    <Card variant={variant} sx={{ mb: 3 }} {...props}>
+      {message}
+    </Card>
+  )
+}
+
+export default StatusCard

package/src/status-card.spec.js

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import StatusCard from './status-card.js'
+
+jest.mock('theme-ui', () => {
+  const actual = jest.requireActual('theme-ui')
+  return {
+    ...actual,
+    useThemeUI: jest.fn(() => ({ colorMode: 'default' }))
+  }
+})
+
+const { useThemeUI } = require('theme-ui')
+
+const theme = {}
+
+describe('StatusCard', () => {
+  it('renders message in light mode variant', () => {
+    useThemeUI.mockReturnValue({ colorMode: 'default' })
+    render(
+      <ThemeUIProvider theme={theme}>
+        <StatusCard message='No data' />
+      </ThemeUIProvider>
+    )
+    expect(screen.getByText('No data')).toBeInTheDocument()
+  })
+
+  it('uses dark card variant when dark', () => {
+    useThemeUI.mockReturnValue({ colorMode: 'dark' })
+    render(
+      <ThemeUIProvider theme={theme}>
+        <StatusCard message='Err' />
+      </ThemeUIProvider>
+    )
+    expect(screen.getByText('Err')).toBeInTheDocument()
+  })
+})

package/src/theme.js

@@ -1,6 +1,11 @@
 import { tailwind } from '@theme-ui/presets'
 import { merge } from 'theme-ui'
 
+import {
+  chronogroveThemeSurfaceColorsDark,
+  chronogroveThemeSurfaceColorsLight
+} from './chronogrove-theme-surface-colors.js'
+
 const fonts = {
   sans: '-apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif',
   serif:
@@ -74,8 +79,8 @@ export const backdropBlurLight = {
 
 export const card = {
   borderRadius: 'card',
-  background: 'var(--theme-ui-colors-panel-background)',
-  color: 'var(--theme-ui-colors-panel-text)',
+  bg: 'panel-background',
+  color: 'text',
   boxShadow: 'default',
   flexGrow: 1,
   padding: 3,
@@ -86,22 +91,18 @@ export const card = {
 }
 
 export const metricCard = {
-  backgroundColor: 'var(--theme-ui-colors-panel-background)',
+  backgroundColor: 'panel-background',
   boxShadow: 'none',
-  color: 'var(--theme-ui-colors-panel-text)',
-  span: {
-    fontFamily: 'heading',
-    fontWeight: 'bold',
-    padding: 2
-  }
+  color: 'text',
+  /** Stat tiles read clearly on animated / busy page backgrounds */
+  border: '1px solid',
+  borderColor: 'panel-divider'
 }
 
 export const PostCard = {
   ...card,
   ...floatOnHover,
   ...glassmorhismPanel,
-  backgroundColor: 'var(--theme-ui-colors-panel-background)',
-  color: 'var(--theme-ui-colors-panel-text)',
   display: 'flex',
   height: '100%',
   flexDirection: 'column',
@@ -253,6 +254,12 @@ export default merge(tailwind, {
       ...metricCard
     },
 
+    metricCardDark: {
+      ...card,
+      ...metricCard,
+      backgroundColor: '#1e2530'
+    },
+
     /* The following styles represent specific card components, indicated in PascalCase. */
 
     UserProfile: {
@@ -369,20 +376,16 @@ export default merge(tailwind, {
 
   colors: {
     accent: 'deeppink',
-    background: '#fdf8f5',
-    'panel-background': 'rgba(255, 255, 255, 0.45)',
+    ...chronogroveThemeSurfaceColorsLight,
     'panel-divider': () => '1px solid rgba(255, 229, 224, 0.17)',
     'panel-highlight': theme => theme.colors.gray[1],
     modes: {
       dark: {
-        background: '#14141F',
-        'panel-background': 'rgba(20, 20, 31, 0.45)',
+        ...chronogroveThemeSurfaceColorsDark,
         'panel-divider': theme => `1px solid ${theme.colors.gray[8]}`,
         'panel-highlight': theme => theme.colors.gray[8],
         primary: '#4a9eff',
         primaryRgb: '74, 158, 255',
-        text: '#fff',
-        textMuted: '#d8d8d8',
         tableText: '#fff',
         tableBackground: 'rgba(30, 30, 47, 0.45)',
         tableHeaderBackground: 'rgba(30, 37, 48, 0.8)',
@@ -400,9 +403,7 @@ export default merge(tailwind, {
     tableHeaderBackground: '#f4f4f9',
     tableRowBackground: 'transparent',
     tableRowAlternateBackground: '#fafafa',
-    tableBorder: 'muted',
-    text: '#111',
-    textMuted: '#333'
+    tableBorder: 'muted'
   },
 
   fonts: {
@@ -566,6 +567,12 @@ export default merge(tailwind, {
       mt: 2
     },
 
+    mutedCardFooter: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      mt: 2
+    },
+
     PageFooter: {
       zIndex: '10',
       color: 'text',

package/src/widget-call-to-action.js

@@ -0,0 +1,106 @@
+import React from 'react'
+import { Box } from '@theme-ui/components'
+
+/**
+ * Default loading indicator for widget CTAs (SVG spinner, no extra dependencies).
+ */
+export const WidgetCtaLoadingIndicator = () => (
+  <Box
+    as='svg'
+    role='status'
+    aria-label='Loading'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    sx={{
+      verticalAlign: 'middle',
+      color: 'primary',
+      animation: 'spin 0.8s linear infinite',
+      '@keyframes spin': { to: { transform: 'rotate(360deg)' } }
+    }}
+  >
+    <circle
+      cx='12'
+      cy='12'
+      r='10'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='3'
+      strokeLinecap='round'
+      strokeDasharray='31.4 31.4'
+    />
+  </Box>
+)
+
+const linkSxBase = {
+  variant: 'links.widgetCta',
+  '.read-more-icon': {
+    opacity: 0,
+    transition: 'all .3s ease',
+    ml: 1
+  },
+  '&:hover .read-more-icon, &:focus .read-more-icon': {
+    opacity: 1
+  }
+}
+
+/**
+ * Text-style CTA used next to widget headlines. Pass `linkComponent` (e.g. Gatsby `Link` with `to`, or Next `Link` with `href`).
+ * External links: set `href` or `url` (no `linkComponent`).
+ */
+export const WidgetCallToAction = ({
+  children,
+  isLoading = false,
+  loadingSlot,
+  title,
+  to,
+  url,
+  href,
+  linkComponent,
+  sx: sxProp,
+  ...rest
+}) => {
+  const ctaSx = { ...linkSxBase, ...sxProp }
+
+  if (isLoading) {
+    return loadingSlot ?? <WidgetCtaLoadingIndicator />
+  }
+
+  if (linkComponent) {
+    const L = linkComponent
+    // Theme UI `sx` only applies when the outer node is a Theme UI `Box` (or other `sx`-aware
+    // primitive). Router links (Next.js `Link`, Gatsby `Link`) do not accept `sx` themselves.
+    if (href != null && href !== '') {
+      return (
+        <Box as={L} href={href} sx={ctaSx} title={title} {...rest}>
+          {children}
+        </Box>
+      )
+    }
+    if (to) {
+      return (
+        <Box as={L} to={to} sx={ctaSx} title={title} {...rest}>
+          {children}
+        </Box>
+      )
+    }
+  }
+
+  if (to) {
+    return (
+      <Box as='a' href={to} sx={ctaSx} title={title} {...rest}>
+        {children}
+      </Box>
+    )
+  }
+
+  const externalHref = href ?? url
+
+  return (
+    <Box as='a' href={externalHref} sx={ctaSx} title={title} {...rest}>
+      {children}
+    </Box>
+  )
+}
+
+export default WidgetCallToAction