@chronogrove/ui 0.79.0 → 0.81.0

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-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()
+  })
+})