@chronogrove/ui 0.83.3 → 0.84.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chronogrove/ui",
-  "version": "0.83.3",
+  "version": "0.84.1",
   "description": "Chronogrove Theme UI theme, color mode helpers, and shared UI primitives",
   "license": "MIT",
   "type": "module",
@@ -142,6 +142,10 @@
       "import": "./src/article-column-container.js",
       "default": "./src/article-column-container.js"
     },
+    "./category-index-layout": {
+      "import": "./src/category-index-layout.js",
+      "default": "./src/category-index-layout.js"
+    },
     "./home-dashboard-layout": {
       "import": "./src/home-dashboard-layout.js",
       "default": "./src/home-dashboard-layout.js"

package/src/action-button.js

@@ -61,7 +61,7 @@ const ActionButton = ({ children, href, onClick, variant = 'primary', size = 'me
   const content = (
     <>
       {children}
-      {icon && icon}
+      {icon}
     </>
   )
 

package/src/category-index-layout.js

@@ -0,0 +1,55 @@
+/**
+ * Shared layout for category-style index pages (blog, travel, music, etc.)
+ * under the animated hero background.
+ */
+
+import React, { Fragment } from 'react'
+import { Box } from '@theme-ui/components'
+
+import AnimatedPageBackground from './animated-page-background/index.js'
+
+/** Outer column flex (below site chrome): stacks header + content with consistent vertical rhythm. */
+export const categoryIndexMainColumnFlexSx = {
+  flexDirection: 'column',
+  flexGrow: 1,
+  position: 'relative',
+  py: 3
+}
+
+/** `sx` for the post list `<section>` (matches Travel index spacing). */
+export const categoryIndexPostListSectionSx = {
+  display: 'grid',
+  gridGap: [2, 2, 3, 3],
+  gridTemplateColumns: '1fr',
+  mt: 4
+}
+
+/** `sx` for the empty-state wrapper under the header. */
+export const categoryIndexEmptyStateBoxSx = {
+  textAlign: 'center',
+  py: 6,
+  mt: 4
+}
+
+/**
+ * Animated gradient hero + elevated content layer (same stacking as Travel/Music/Blog indexes).
+ *
+ * @param {object} props
+ * @param {React.ReactNode} props.children
+ * @param {string} [props.overlayHeight]
+ */
+export function CategoryIndexHeroChrome({ children, overlayHeight = 'min(75vh, 1000px)' }) {
+  return (
+    <Fragment>
+      <AnimatedPageBackground overlayHeight={overlayHeight} />
+      <Box
+        sx={{
+          position: 'relative',
+          zIndex: 1
+        }}
+      >
+        {children}
+      </Box>
+    </Fragment>
+  )
+}

package/src/category-index-layout.spec.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import {
+  CategoryIndexHeroChrome,
+  categoryIndexEmptyStateBoxSx,
+  categoryIndexMainColumnFlexSx,
+  categoryIndexPostListSectionSx
+} from './category-index-layout.js'
+
+jest.mock('./animated-page-background/index.js', () => ({
+  __esModule: true,
+  default: ({ overlayHeight }) => <div data-testid='animated-page-background' data-overlay={overlayHeight} />
+}))
+
+describe('categoryIndexPostListSectionSx', () => {
+  it('matches shared index grid layout', () => {
+    expect(categoryIndexPostListSectionSx).toMatchObject({
+      display: 'grid',
+      gridGap: [2, 2, 3, 3],
+      gridTemplateColumns: '1fr',
+      mt: 4
+    })
+  })
+})
+
+describe('categoryIndexEmptyStateBoxSx', () => {
+  it('matches shared empty state spacing', () => {
+    expect(categoryIndexEmptyStateBoxSx).toMatchObject({
+      textAlign: 'center',
+      py: 6,
+      mt: 4
+    })
+  })
+})
+
+describe('categoryIndexMainColumnFlexSx', () => {
+  it('matches main column flex rhythm', () => {
+    expect(categoryIndexMainColumnFlexSx).toMatchObject({
+      flexDirection: 'column',
+      flexGrow: 1,
+      position: 'relative',
+      py: 3
+    })
+  })
+})
+
+describe('CategoryIndexHeroChrome', () => {
+  it('defaults overlay height when omitted', () => {
+    render(
+      <CategoryIndexHeroChrome>
+        <div data-testid='inner'>Hello</div>
+      </CategoryIndexHeroChrome>
+    )
+
+    expect(screen.getByTestId('animated-page-background')).toHaveAttribute('data-overlay', 'min(75vh, 1000px)')
+    expect(screen.getByTestId('inner')).toHaveTextContent('Hello')
+  })
+
+  it('renders animated background and stacks children above it', () => {
+    render(
+      <CategoryIndexHeroChrome overlayHeight='42vh'>
+        <div data-testid='inner'>Hello</div>
+      </CategoryIndexHeroChrome>
+    )
+
+    expect(screen.getByTestId('animated-page-background')).toHaveAttribute('data-overlay', '42vh')
+    expect(screen.getByTestId('inner')).toHaveTextContent('Hello')
+  })
+})

package/src/pagination-button.js

@@ -92,7 +92,7 @@ const PaginationButton = ({
   const content = (
     <>
       {children}
-      {icon && icon}
+      {icon}
     </>
   )