@chronogrove/ui 0.80.0 → 0.82.0

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

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

@@ -0,0 +1,115 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import WidgetCallToAction, { WidgetCtaLoadingIndicator } from './widget-call-to-action.js'
+
+const LinkMock = ({ to, href, children, ...rest }) => (
+  <a href={href ?? to} data-testid='router-link' {...rest}>
+    {children}
+  </a>
+)
+
+const theme = { links: { widgetCta: { color: 'text' } } }
+
+const wrap = ui => render(<ThemeUIProvider theme={theme}>{ui}</ThemeUIProvider>)
+
+describe('WidgetCtaLoadingIndicator', () => {
+  it('renders svg', () => {
+    const { container } = wrap(<WidgetCtaLoadingIndicator />)
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+})
+
+describe('WidgetCallToAction', () => {
+  it('renders external link with url', () => {
+    wrap(
+      <WidgetCallToAction title='t' url='https://example.com'>
+        Go
+      </WidgetCallToAction>
+    )
+    const a = screen.getByRole('link')
+    expect(a).toHaveAttribute('href', 'https://example.com')
+  })
+
+  it('prefers href over url', () => {
+    wrap(
+      <WidgetCallToAction href='https://a.test' url='https://b.test'>
+        Go
+      </WidgetCallToAction>
+    )
+    expect(screen.getByRole('link')).toHaveAttribute('href', 'https://a.test')
+  })
+
+  it('uses linkComponent with to (Gatsby-style)', () => {
+    wrap(
+      <WidgetCallToAction linkComponent={LinkMock} to='/blog'>
+        Posts
+      </WidgetCallToAction>
+    )
+    expect(screen.getByTestId('router-link')).toHaveAttribute('href', '/blog')
+  })
+
+  it('uses linkComponent with href (Next.js-style)', () => {
+    wrap(
+      <WidgetCallToAction linkComponent={LinkMock} href='/dashboard'>
+        Dash
+      </WidgetCallToAction>
+    )
+    expect(screen.getByTestId('router-link')).toHaveAttribute('href', '/dashboard')
+  })
+
+  it('uses linkComponent with to when href is empty', () => {
+    wrap(
+      <WidgetCallToAction linkComponent={LinkMock} href='' to='/blog'>
+        Posts
+      </WidgetCallToAction>
+    )
+    expect(screen.getByTestId('router-link')).toHaveAttribute('href', '/blog')
+  })
+
+  it('ignores linkComponent for external url when no href or to', () => {
+    wrap(
+      <WidgetCallToAction linkComponent={LinkMock} url='https://example.com/out'>
+        Out
+      </WidgetCallToAction>
+    )
+    expect(screen.queryByTestId('router-link')).not.toBeInTheDocument()
+    expect(screen.getByRole('link')).toHaveAttribute('href', 'https://example.com/out')
+  })
+
+  it('uses plain anchor when to without linkComponent', () => {
+    wrap(
+      <WidgetCallToAction to='/path' linkComponent={undefined}>
+        P
+      </WidgetCallToAction>
+    )
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/path')
+  })
+
+  it('shows loading indicator', () => {
+    const { container } = wrap(
+      <WidgetCallToAction isLoading title='t'>
+        X
+      </WidgetCallToAction>
+    )
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('uses custom loadingSlot', () => {
+    wrap(
+      <WidgetCallToAction isLoading loadingSlot={<span data-testid='ld'>wait</span>}>
+        X
+      </WidgetCallToAction>
+    )
+    expect(screen.getByTestId('ld')).toBeInTheDocument()
+  })
+
+  it('merges sx', () => {
+    wrap(
+      <WidgetCallToAction href='https://x.test' sx={{ m: 2 }}>
+        L
+      </WidgetCallToAction>
+    )
+    expect(screen.getByRole('link')).toBeInTheDocument()
+  })
+})

package/src/widget-header.js

@@ -0,0 +1,93 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Box, Heading } from '@theme-ui/components'
+
+import ProfileMetricsBadge from './profile-metrics-badge.js'
+
+const baseHeaderStyles = {
+  display: 'flex',
+  flexDirection: ['column', 'row'],
+  alignItems: ['center', 'baseline'],
+  justifyContent: ['center', 'space-between'],
+  gap: [2, 3],
+  flexWrap: 'wrap',
+  pb: 2,
+  // Soft separator: visible but not harsh (gray[4] in theme scale; fallback ~12% black)
+  borderBottom: '1px solid',
+  borderColor: theme => theme?.colors?.gray?.[4] ?? 'rgba(0,0,0,0.12)'
+}
+
+/**
+ * Groups headline + CTA so they sit together on the left; metrics stay on the right.
+ * Always row so headline + CTA stay on one line at every breakpoint (including mobile).
+ */
+const titleGroupStyles = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'baseline',
+  gap: [1, 2],
+  order: 1
+}
+
+/**
+ * Override default heading margin, padding, and line-height so the headline and CTA
+ * align on the same baseline at every breakpoint. Theme/global styles often add
+ * vertical space to h2; zeroing it and using a tight line-height prevents offset.
+ * Baseline alignment for icon + text keeps the headline baseline consistent.
+ */
+const headingStyles = {
+  fontSize: [4, 5],
+  display: 'flex',
+  alignItems: 'baseline',
+  m: 0,
+  py: 0,
+  pt: 0,
+  pb: 0,
+  lineHeight: 1
+}
+
+const metricsStyles = {
+  order: 2
+}
+
+const WidgetHeader = ({ aside, children, icon, metrics, metricsLoading }) => {
+  const hasMetrics = (Array.isArray(metrics) && metrics.length > 0) || metricsLoading
+  return (
+    <Box
+      as='header'
+      sx={{
+        ...baseHeaderStyles,
+        // Extra margin below header when metrics are present so spacing matches Latest Posts (no metrics)
+        mb: hasMetrics ? 4 : 2
+      }}
+    >
+      <Box sx={titleGroupStyles}>
+        <Heading as='h2' sx={headingStyles}>
+          {icon && (
+            <Box
+              as='span'
+              sx={{
+                display: 'inline-flex',
+                alignItems: 'baseline',
+                mr: 2,
+                fontSize: 4,
+                '& svg': { width: '1em', height: '1em' }
+              }}
+            >
+              <FontAwesomeIcon icon={icon} aria-hidden='true' />
+            </Box>
+          )}
+          {children}
+        </Heading>
+        {aside}
+      </Box>
+      {((Array.isArray(metrics) && metrics.length > 0) || metricsLoading) && (
+        <Box sx={metricsStyles}>
+          <ProfileMetricsBadge compact isLoading={metricsLoading} metrics={metrics} />
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default WidgetHeader

package/src/widget-header.spec.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import chronogroveTheme from './theme.js'
+import WidgetHeader from './widget-header.js'
+
+jest.mock('@fortawesome/react-fontawesome', () => ({
+  FontAwesomeIcon: ({ icon }) => <span data-testid='fa-icon' data-icon={icon?.iconName ?? ''} aria-hidden />
+}))
+
+const aside = <div className='sidebar-content'>Sidebar</div>
+const mockIcon = { iconName: 'spotify', prefix: 'fab' }
+
+describe('WidgetHeader', () => {
+  it('matches the snapshot', () => {
+    const widgetTitle = 'Neat & Interesting Widget'
+    const { asFragment } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <WidgetHeader aside={aside} icon={mockIcon}>
+          {widgetTitle}
+        </WidgetHeader>
+      </ThemeUIProvider>
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('renders metrics row when metrics are provided', () => {
+    const metrics = [{ displayName: 'Stars', id: 's', value: 12 }]
+    const { getByText } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <WidgetHeader metrics={metrics}>Title</WidgetHeader>
+      </ThemeUIProvider>
+    )
+    expect(getByText('12 Stars')).toBeInTheDocument()
+  })
+
+  it('renders loading metrics placeholders when metricsLoading', () => {
+    const { container } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <WidgetHeader metrics={[]} metricsLoading>
+          Title
+        </WidgetHeader>
+      </ThemeUIProvider>
+    )
+    const badges = container.querySelectorAll('[class*="css-"]')
+    expect(badges.length).toBeGreaterThan(0)
+  })
+
+  it('renders without icon', () => {
+    render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <WidgetHeader aside={aside}>No icon</WidgetHeader>
+      </ThemeUIProvider>
+    )
+    expect(screen.getByText('No icon')).toBeInTheDocument()
+    expect(screen.queryByTestId('fa-icon')).not.toBeInTheDocument()
+  })
+
+  it('uses borderColor fallback when gray[4] is missing', () => {
+    const themeMissingGray4 = {
+      ...chronogroveTheme,
+      colors: {
+        ...chronogroveTheme.colors,
+        gray: { 0: '#111', 1: '#222', 2: '#333', 3: '#444' }
+      }
+    }
+    const { container } = render(
+      <ThemeUIProvider theme={themeMissingGray4}>
+        <WidgetHeader>Border test</WidgetHeader>
+      </ThemeUIProvider>
+    )
+    expect(container.querySelector('header')).toBeTruthy()
+    expect(screen.getByText('Border test')).toBeInTheDocument()
+  })
+})

package/src/widget-section.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Box } from '@theme-ui/components'
+import { useThemeUI } from 'theme-ui'
+
+import isDarkMode from './helpers/isDarkMode.js'
+
+const sectionSx = {
+  mb: 4,
+  pt: [0, 3, 4],
+  pb: [0, 3, 4]
+}
+
+/**
+ * Wraps a dashboard widget: vertical spacing and optional fatal-error overlay.
+ */
+const WidgetSection = ({ children, hasFatalError, id, styleOverrides = {}, ...props }) => {
+  const { colorMode } = useThemeUI()
+  const darkMode = isDarkMode(colorMode)
+
+  return (
+    <Box
+      as='section'
+      sx={{
+        ...sectionSx,
+        ...styleOverrides,
+        ...(hasFatalError
+          ? {
+              position: 'relative'
+            }
+          : {})
+      }}
+      {...(id ? { id } : {})}
+      {...props}
+    >
+      {hasFatalError && (
+        <Box
+          sx={{
+            alignItems: 'center',
+            bottom: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            left: 0,
+            position: 'absolute',
+            right: 0,
+            top: 0
+          }}
+        >
+          <Box
+            sx={{
+              background: darkMode ? '#252e3c' : 'white',
+              borderLeft: '2px solid red',
+              borderRight: '2px solid red',
+              borderRadius: '2px',
+              boxShadow: 'xl',
+              py: 3,
+              px: 4,
+              zIndex: 480
+            }}
+          >
+            <h4>Something went wrong</h4>
+            <p>Failed to load this widget.</p>
+          </Box>
+          <Box
+            sx={{
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              background: darkMode
+                ? 'radial-gradient(rgba(14.5,18,23.5,0.4) 20%, transparent 50%);'
+                : 'radial-gradient(rgba(255, 255, 255, 0.4) 20%, transparent 50%)',
+              position: 'absolute',
+              zIndex: 470
+            }}
+          />
+        </Box>
+      )}
+      {children}
+    </Box>
+  )
+}
+
+export default WidgetSection

package/src/widget-section.spec.js

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import WidgetSection from './widget-section.js'
+
+jest.mock('theme-ui', () => {
+  const actual = jest.requireActual('theme-ui')
+  return {
+    ...actual,
+    useThemeUI: jest.fn(() => ({ colorMode: 'default' }))
+  }
+})
+
+const { useThemeUI } = require('theme-ui')
+
+describe('WidgetSection', () => {
+  it('renders children', () => {
+    useThemeUI.mockReturnValue({ colorMode: 'default' })
+    render(
+      <ThemeUIProvider theme={{}}>
+        <WidgetSection>
+          <span>content</span>
+        </WidgetSection>
+      </ThemeUIProvider>
+    )
+    expect(screen.getByText('content')).toBeInTheDocument()
+  })
+
+  it('sets id when provided', () => {
+    useThemeUI.mockReturnValue({ colorMode: 'default' })
+    render(
+      <ThemeUIProvider theme={{}}>
+        <WidgetSection id='w1'>x</WidgetSection>
+      </ThemeUIProvider>
+    )
+    expect(document.getElementById('w1')).toBeTruthy()
+  })
+
+  it('shows fatal error overlay', () => {
+    useThemeUI.mockReturnValue({ colorMode: 'dark' })
+    render(
+      <ThemeUIProvider theme={{}}>
+        <WidgetSection hasFatalError>inside</WidgetSection>
+      </ThemeUIProvider>
+    )
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+    expect(screen.getByText('inside')).toBeInTheDocument()
+  })
+
+  it('uses light overlay colors in light mode', () => {
+    useThemeUI.mockReturnValue({ colorMode: 'default' })
+    render(
+      <ThemeUIProvider theme={{}}>
+        <WidgetSection hasFatalError />
+      </ThemeUIProvider>
+    )
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+  })
+})

package/src/page-backdrop.js

@@ -1,42 +0,0 @@
-'use client'
-
-import { Box } from '@theme-ui/components'
-import { useColorMode } from 'theme-ui'
-
-import isDarkMode from './helpers/isDarkMode.js'
-
-/**
- * Fixed viewport layer behind page content (`z-index: 0`), matching the role of
- * `AnimatedPageBackground` on the Gatsby home: a real surface under `z-index: 1` UI so
- * frosted panels (`backdrop-filter` + `panel-background`) have something to blur and tint
- * against. The full site uses WebGL Color Bends there; this package ships a **lightweight**
- * CSS gradient treatment only (no three.js).
- */
-export function ChronogrovePageBackdrop() {
-  const [colorMode] = useColorMode()
-  const dark = isDarkMode(colorMode)
-
-  return (
-    <Box
-      aria-hidden
-      sx={{
-        position: 'fixed',
-        inset: 0,
-        width: '100vw',
-        minHeight: '100vh',
-        zIndex: 0,
-        pointerEvents: 'none',
-        bg: 'background',
-        // Dark: subtle primary/secondary glows — same intent as Color Bends, fraction of the cost.
-        backgroundImage: dark
-          ? `
-            radial-gradient(ellipse 120% 85% at 50% -15%, rgba(74, 158, 255, 0.16) 0%, transparent 52%),
-            radial-gradient(ellipse 90% 70% at 95% 85%, rgba(113, 30, 155, 0.12) 0%, transparent 48%),
-            radial-gradient(ellipse 70% 50% at 10% 60%, rgba(128, 0, 128, 0.08) 0%, transparent 45%)
-          `
-          : 'none',
-        transition: 'background-image 0.3s ease'
-      }}
-    />
-  )
-}

package/src/page-backdrop.spec.js

@@ -1,41 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react'
-import { render } from '@testing-library/react'
-import { ThemeUIProvider } from 'theme-ui'
-
-import chronogroveTheme from './theme.js'
-import { ChronogrovePageBackdrop } from './page-backdrop.js'
-
-describe('ChronogrovePageBackdrop', () => {
-  beforeEach(() => {
-    window.localStorage.removeItem('theme-ui-color-mode')
-  })
-
-  it('renders a fixed backdrop layer', () => {
-    const { container } = render(
-      <ThemeUIProvider theme={chronogroveTheme}>
-        <ChronogrovePageBackdrop />
-      </ThemeUIProvider>
-    )
-    const layer = container.querySelector('[aria-hidden="true"]')
-    expect(layer).toBeTruthy()
-  })
-
-  it('adds gradient overlays in dark mode', () => {
-    window.localStorage.setItem('theme-ui-color-mode', 'dark')
-    const { container } = render(
-      <ThemeUIProvider
-        theme={{
-          ...chronogroveTheme,
-          config: { useLocalStorage: true, useColorSchemeMediaQuery: false }
-        }}
-      >
-        <ChronogrovePageBackdrop />
-      </ThemeUIProvider>
-    )
-    const layer = container.querySelector('[aria-hidden="true"]')
-    expect(window.getComputedStyle(layer).backgroundImage).toMatch(/radial-gradient/)
-  })
-})