diff --git a/assets/css/animations.css b/assets/css/animations.css index 2cdd681..d08f7d9 100644 --- a/assets/css/animations.css +++ b/assets/css/animations.css @@ -406,6 +406,19 @@ gap: var(--wp--preset--spacing--10); } +/* Card - Work Project (Case Study) */ +.is-style-card-case-study { + --ls-card-case-study-border-active: var(--wp--custom--color--link--accent); + --ls-card-case-study-shadow-active: var(--wp--custom--shadow--card--hover); + --ls-card-case-study-lift: -4px; + transition: border-color var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--standard), box-shadow var(--wp--custom--animation--duration--medium) var(--wp--custom--animation--easing--standard), transform var(--wp--custom--animation--duration--medium) var(--wp--custom--animation--easing--emphasised); +} +.is-style-card-case-study:hover, .is-style-card-case-study:focus-within { + border-color: var(--ls-card-case-study-border-active); + box-shadow: var(--ls-card-case-study-shadow-active); + transform: translateY(var(--ls-card-case-study-lift)); +} + /* Card - Services */ .is-style-card-services { --ls-card-services-border-rest: var(--wp--custom--color--border--card); @@ -672,6 +685,7 @@ .is-style-card-feature, .is-style-card-feature :is(.ls-card__icon-shell, .ls-card-feature__icon-shell), .is-style-card-category, + .is-style-card-case-study, .is-style-card-link-row, .is-style-card-services, .is-style-card-services::before, @@ -687,6 +701,8 @@ .is-style-card-feature:focus-within, .is-style-card-category:hover, .is-style-card-category:focus-within, + .is-style-card-case-study:hover, + .is-style-card-case-study:focus-within, .is-style-card-services:hover, .is-style-card-services:focus-within { transform: none; @@ -2001,3 +2017,20 @@ background-color: var(--wp--custom--color--card--platform--wordpress); color: var(--wp--custom--color--text--on-dark); } + +@media (max-width: 833.98px) { + .is-style-card-divider-both { + flex-wrap: wrap !important; + } + .is-style-card-divider-both > .wp-block-column { + flex-basis: 100% !important; + } + .is-style-card-divider-both > .wp-block-column:first-child > .is-not-stacked-on-mobile > .wp-block-column:last-child > .is-style-stat-segment { + border-inline-end: none !important; + } +} +@media (min-width: 601px) and (max-width: 800px) { + .work-selected-projects-grid .wp-block-post-template.is-layout-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } +} diff --git a/patterns/cards/work-engagement-stat.php b/patterns/cards/work-engagement-stat.php index d5e1c9c..1177830 100644 --- a/patterns/cards/work-engagement-stat.php +++ b/patterns/cards/work-engagement-stat.php @@ -13,10 +13,10 @@ */ ?> - -
+ +
- +

@@ -33,7 +33,7 @@ -

+

diff --git a/patterns/cards/work-next-steps-card.php b/patterns/cards/work-next-steps-card.php index 6efce63..27d856a 100644 --- a/patterns/cards/work-next-steps-card.php +++ b/patterns/cards/work-next-steps-card.php @@ -13,7 +13,7 @@ */ ?> - +
diff --git a/patterns/hero/work-hero.php b/patterns/hero/work-hero.php index ea9afe9..55b2cc2 100644 --- a/patterns/hero/work-hero.php +++ b/patterns/hero/work-hero.php @@ -31,7 +31,7 @@
- +
diff --git a/patterns/section-stats-grid.php b/patterns/section-stats-grid.php index 68da9ca..7707d67 100644 --- a/patterns/section-stats-grid.php +++ b/patterns/section-stats-grid.php @@ -19,28 +19,50 @@
- +
- -
- -

- - - -

- -
- - - -
- -

- + +
+ + +
+ +
+ +
+ + +
+ +

+ + + +

+ +
+ +
+ +
+ +
+ + + +
+ +
+ +

+ +
+ +
+
- +
@@ -49,91 +71,109 @@
- -
- -
- -

- - - -

- + +
+ + +
+ +
+ +
+ +

+ + + +

+ +
+ + + +

+ + + +

+ +
+
- - - -

- - - -

- -
- -
- - - -
- -
- + - -
- -
- -
- -

- - - -

- + +
+
- - - -

- - - -

- -
- + +
+
- -
- -
- -

- - - -

- + +
+ + +
+ +
+ +
+ +

+ + + +

+ +
+ + + +

+ + + +

+ +
+
- - - -

- - - -

- -
- + + + +
+ +
+ +
+ +

+ + + +

+ +
+ + + +

+ + + +

+ +
+ +
+ +
+
diff --git a/patterns/sections/work-categories.php b/patterns/sections/work-categories.php index 0e196a0..50475fe 100644 --- a/patterns/sections/work-categories.php +++ b/patterns/sections/work-categories.php @@ -24,7 +24,17 @@
- + +
+ +
+ + + +

+ +
+

diff --git a/patterns/sections/work-discuss-project.php b/patterns/sections/work-discuss-project.php index 121408b..d776d3e 100644 --- a/patterns/sections/work-discuss-project.php +++ b/patterns/sections/work-discuss-project.php @@ -13,8 +13,8 @@ */ ?> - -
+ +
@@ -22,12 +22,12 @@
- -
+ +
- +
diff --git a/patterns/sections/work-related-routes.php b/patterns/sections/work-related-routes.php index 0faaee2..9569ece 100644 --- a/patterns/sections/work-related-routes.php +++ b/patterns/sections/work-related-routes.php @@ -21,7 +21,7 @@
- +
@@ -40,7 +40,7 @@ - +
@@ -60,7 +60,7 @@
- +
@@ -80,7 +80,7 @@
- +
@@ -100,7 +100,7 @@
- +
@@ -120,7 +120,7 @@
- +
@@ -140,7 +140,7 @@
- +
@@ -160,7 +160,7 @@
- +
diff --git a/patterns/sections/work-selected-projects.php b/patterns/sections/work-selected-projects.php index 3da705a..48a9604 100644 --- a/patterns/sections/work-selected-projects.php +++ b/patterns/sections/work-selected-projects.php @@ -13,8 +13,8 @@ */ ?> - -
+ +
@@ -26,7 +26,7 @@
- +
@@ -52,10 +52,12 @@
- -
+ +
- + +
+ diff --git a/src/scss/animations.scss b/src/scss/animations.scss index c9594a0..fafc32d 100644 --- a/src/scss/animations.scss +++ b/src/scss/animations.scss @@ -9,4 +9,6 @@ @use "animations/mobile-menu-motion"; @use "animations/footer-motion"; @use "animations/header-motion"; -@use "animations/taxonomy-filter"; \ No newline at end of file +@use "animations/taxonomy-filter"; +@use "sections/stats-grid"; +@use "sections/selected-projects"; \ No newline at end of file diff --git a/src/scss/animations/_card-motion.scss b/src/scss/animations/_card-motion.scss index 80d77fd..201e33e 100644 --- a/src/scss/animations/_card-motion.scss +++ b/src/scss/animations/_card-motion.scss @@ -241,6 +241,28 @@ } } +/* Card - Work Project (Case Study) */ +.is-style-card-case-study { + --ls-card-case-study-border-active: var(--wp--custom--color--link--accent); + --ls-card-case-study-shadow-active: var(--wp--custom--shadow--card--hover); + --ls-card-case-study-lift: -4px; + + transition: + border-color var(--wp--custom--animation--duration--base) + var(--wp--custom--animation--easing--standard), + box-shadow var(--wp--custom--animation--duration--medium) + var(--wp--custom--animation--easing--standard), + transform var(--wp--custom--animation--duration--medium) + var(--wp--custom--animation--easing--emphasised); + + &:hover, + &:focus-within { + border-color: var(--ls-card-case-study-border-active); + box-shadow: var(--ls-card-case-study-shadow-active); + transform: translateY(var(--ls-card-case-study-lift)); + } +} + /* Card - Services */ .is-style-card-services { --ls-card-services-border-rest: var(--wp--custom--color--border--card); @@ -571,6 +593,7 @@ .is-style-card-feature, .is-style-card-feature :is(.ls-card__icon-shell, .ls-card-feature__icon-shell), .is-style-card-category, + .is-style-card-case-study, .is-style-card-link-row, .is-style-card-services, .is-style-card-services::before, @@ -588,6 +611,8 @@ .is-style-card-feature:focus-within, .is-style-card-category:hover, .is-style-card-category:focus-within, + .is-style-card-case-study:hover, + .is-style-card-case-study:focus-within, .is-style-card-services:hover, .is-style-card-services:focus-within { transform: none; diff --git a/src/scss/sections/_selected-projects.scss b/src/scss/sections/_selected-projects.scss new file mode 100644 index 0000000..da74ec3 --- /dev/null +++ b/src/scss/sections/_selected-projects.scss @@ -0,0 +1,16 @@ +// Selected Projects (patterns/sections/work-selected-projects.php): the +// project-card Query Loop is a fixed 3-column grid (post-template +// columnCount: 3). WordPress's own responsive fallback for a fixed-column +// grid has exactly one native breakpoint — max-width: 600px, collapsing to +// 1 column — with no native way to add an intermediate 2-column step above +// that, so this override is necessary rather than avoidable. It's scoped to +// the 600.01px–800px gap ONLY, so it never touches WordPress's own native +// 1-column mobile behaviour at 600px and below. Also scoped to +// .work-selected-projects-grid (set on the wp:query block itself) so it +// can't affect any other 3-column grid elsewhere on the site. + +@media (min-width: 601px) and (max-width: 800px) { + .work-selected-projects-grid .wp-block-post-template.is-layout-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } +} diff --git a/src/scss/sections/_stats-grid.scss b/src/scss/sections/_stats-grid.scss new file mode 100644 index 0000000..954b4a5 --- /dev/null +++ b/src/scss/sections/_stats-grid.scss @@ -0,0 +1,26 @@ +// Stats Grid (patterns/section-stats-grid.php): the 4-stat row switches from +// 4-across to 2-per-row below 834px — narrower than that starts to look +// squeezed, based on direct testing. WordPress's own default column-stacking +// breakpoint (782px) is too low for this section specifically, and core has +// no attribute to pick a custom breakpoint value, so this override is +// necessary rather than avoidable. +// Below the same breakpoint, the Subscribers card's border-right (needed on +// desktop as the divider before TTFB) becomes a trailing edge instead, once +// it's the last card in its 2-per-row line — same fix already applied to the +// Tokens card directly in the pattern markup, but Subscribers needs it +// removed conditionally instead of always, since it's a real divider above +// this breakpoint. + +@media (max-width: 833.98px) { + .is-style-card-divider-both { + flex-wrap: wrap !important; + + > .wp-block-column { + flex-basis: 100% !important; + } + } + + .is-style-card-divider-both > .wp-block-column:first-child > .is-not-stacked-on-mobile > .wp-block-column:last-child > .is-style-stat-segment { + border-inline-end: none !important; + } +} diff --git a/styles/sections/cards/card-divider-both.json b/styles/blocks/columns/card-divider-both.json similarity index 100% rename from styles/sections/cards/card-divider-both.json rename to styles/blocks/columns/card-divider-both.json diff --git a/styles/sections/cards/stat-segment.json b/styles/blocks/groups/stat-segment.json similarity index 87% rename from styles/sections/cards/stat-segment.json rename to styles/blocks/groups/stat-segment.json index 1690937..9361121 100644 --- a/styles/sections/cards/stat-segment.json +++ b/styles/blocks/groups/stat-segment.json @@ -19,7 +19,6 @@ "bottom": "var:preset|spacing|40", "left": "var:preset|spacing|30" } - }, - "css": "&{border-inline-end:1px solid var(--wp--custom--color--border--card);}" + } } } diff --git a/styles/dark.json b/styles/dark.json index bc08418..be9fbaf 100644 --- a/styles/dark.json +++ b/styles/dark.json @@ -17,6 +17,7 @@ }, "surface": { "canvas": "var:preset|color|contrast", + "canvas-alt": "var:preset|color|neutral-850", "card": "var:preset|color|neutral-900", "card-raised": "var:preset|color|neutral-800", "highlight": "var:preset|color|base", diff --git a/styles/sections/content/content-band-alt.json b/styles/sections/content/content-band-alt.json new file mode 100644 index 0000000..ef9ce87 --- /dev/null +++ b/styles/sections/content/content-band-alt.json @@ -0,0 +1,26 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.9/theme.json", + "version": 3, + "title": "Content Band - Alt", + "slug": "content-band-alt", + "blockTypes": [ + "core/group" + ], + "description": "Alternate full-width content band for a page section: same padding as Content Band, but uses the tinted canvas-alt surface so alternating sections read as visually distinct from the default white/dark canvas.", + "styles": { + "color": { + "background": "var:custom|color|surface|canvas-alt" + }, + "border": { + "radius": "16px" + }, + "spacing": { + "padding": { + "top": "var:preset|spacing|80", + "right": "var:preset|spacing|30", + "bottom": "var:preset|spacing|90", + "left": "var:preset|spacing|30" + } + } + } +} diff --git a/tests/helpers/assertions.ts b/tests/helpers/assertions.ts new file mode 100644 index 0000000..92aaf25 --- /dev/null +++ b/tests/helpers/assertions.ts @@ -0,0 +1,126 @@ +import { expect, type Page } from '@playwright/test'; + +/** + * Generic Playwright assertion helpers for ls-theme. + * + * None of these know about any specific page, pattern, or template — every + * input (selector, text, count, viewport width, expected value) is a + * parameter. They were extracted from testing the Work Archive template, + * but apply to any pattern in the theme with the same shape. + */ + +/** Asserts a list of text markers appears on the page in that exact order. */ +export async function expectSectionOrder(page: Page, markers: string[]) { + const bodyText = await page.locator('body').innerText(); + const positions = markers.map((marker) => bodyText.indexOf(marker)); + + positions.forEach((pos, i) => { + expect(pos, `Expected to find "${markers[i]}" on the page`).toBeGreaterThan(-1); + }); + + for (let i = 1; i < positions.length; i++) { + expect( + positions[i], + `Expected "${markers[i]}" to appear after "${markers[i - 1]}"` + ).toBeGreaterThan(positions[i - 1]); + } +} + +/** Asserts a selector matches exactly `count` elements. */ +export async function expectElementCount(page: Page, selector: string, count: number) { + await expect(page.locator(selector)).toHaveCount(count); +} + +/** + * Asserts every element matching `cardSelector` contains all of its + * `requiredParts` (each a sub-selector, e.g. 'a', '.wp-block-post-excerpt'). + */ +export async function expectCardParts(page: Page, cardSelector: string, requiredParts: string[]) { + const cards = page.locator(cardSelector); + const count = await cards.count(); + expect(count, `Expected at least one "${cardSelector}" card`).toBeGreaterThan(0); + + for (let i = 0; i < count; i++) { + const card = cards.nth(i); + for (const part of requiredParts) { + await expect( + card.locator(part).first(), + `Card ${i} (${cardSelector}) is missing required part "${part}"` + ).toBeAttached({ timeout: 2000 }); + } + } +} + +/** Asserts a link, found by its visible text, has the expected href. */ +export async function expectLinkHref(page: Page, linkText: string, expectedHref: string) { + const link = page.getByRole('link', { name: linkText, exact: false }); + await expect(link).toHaveAttribute('href', expectedHref); +} + +/** + * Resizes the viewport to `viewportWidth` and asserts the grid at + * `gridSelector` shows exactly `expectedColumns` columns — works for both + * CSS Grid (reads grid-template-columns) and flex-wrap layouts (groups + * elements by their top offset). + */ +export async function expectGridColumnsAtViewport( + page: Page, + gridSelector: string, + viewportWidth: number, + expectedColumns: number, + viewportHeight = 900 +) { + await page.setViewportSize({ width: viewportWidth, height: viewportHeight }); + + const grid = page.locator(gridSelector).first(); + const display = await grid.evaluate((el) => getComputedStyle(el).display); + + if (display === 'grid') { + const columns = await grid.evaluate( + (el) => getComputedStyle(el).gridTemplateColumns.split(' ').length + ); + expect(columns, `Expected ${expectedColumns} grid columns at ${viewportWidth}px`).toBe( + expectedColumns + ); + return; + } + + // Flex/columns layout: count distinct items sharing the first row's top offset. + const tops: number[] = await grid.evaluate((el) => + [...el.children].map((child) => Math.round(child.getBoundingClientRect().top)) + ); + const firstRowCount = tops.filter((t) => t === tops[0]).length; + expect( + firstRowCount, + `Expected ${expectedColumns} items in the first row at ${viewportWidth}px` + ).toBe(expectedColumns); +} + +/** + * Asserts a computed CSS property on `selector` equals `expectedValue`, + * optionally after resizing to `viewportWidth` first. + */ +export async function expectComputedStyle( + page: Page, + selector: string, + property: string, + expectedValue: string, + viewportWidth?: number, + viewportHeight = 900 +) { + if (viewportWidth) { + await page.setViewportSize({ width: viewportWidth, height: viewportHeight }); + } + + const value = await page + .locator(selector) + .first() + .evaluate((el, prop) => getComputedStyle(el).getPropertyValue(prop).trim(), property); + + expect( + value, + `Expected ${selector} to have ${property}: ${expectedValue}${ + viewportWidth ? ` at ${viewportWidth}px` : '' + }` + ).toBe(expectedValue); +} diff --git a/tests/specs/work-single.spec.ts b/tests/specs/work-single.spec.ts new file mode 100644 index 0000000..f70a257 --- /dev/null +++ b/tests/specs/work-single.spec.ts @@ -0,0 +1,57 @@ +import { test } from '@playwright/test'; +import { + expectSectionOrder, + expectElementCount, + expectCardParts, + expectLinkHref, + expectGridColumnsAtViewport, + expectComputedStyle, +} from '../helpers/assertions'; + +// ILLUSTRATIVE — selectors below are guesses at what work-single will look +// like, based on today's conventions (breadcrumbs, eyebrow badge, CTA +// buttons, a related-projects card row). Swap these for the real selectors +// once the pattern exists. This file exists to show the *shape* of how the +// 6 helpers get used, not to test anything real yet. + +const SINGLE_PROJECT_URL = '/portfolio/african-safari-consultants/'; + +// Skipped: work-single doesn't exist yet, and these selectors/URL are illustrative +// guesses, not real markup. Un-skip once the template is built and selectors are +// swapped for the real ones. +test.describe.skip('Work Single template', () => { + test('renders sections in order', async ({ page }) => { + await page.goto(SINGLE_PROJECT_URL); + await expectSectionOrder(page, ['Home', 'Portfolio', 'Related projects']); + }); + + test('shows exactly 3 related-project cards', async ({ page }) => { + await page.goto(SINGLE_PROJECT_URL); + await expectElementCount(page, '.is-style-card-case-study', 3); + }); + + test('each related-project card has its required parts', async ({ page }) => { + await page.goto(SINGLE_PROJECT_URL); + await expectCardParts(page, '.is-style-card-case-study', [ + '.wp-block-post-title a', + '.wp-block-post-excerpt', + 'text=View project', + ]); + }); + + test('the CTA button links to the consultation page', async ({ page }) => { + await page.goto(SINGLE_PROJECT_URL); + await expectLinkHref(page, 'Book a consultation', '/free-consultation/'); + }); + + test('related-projects grid reflows from 3 to 1 column on mobile', async ({ page }) => { + await page.goto(SINGLE_PROJECT_URL); + await expectGridColumnsAtViewport(page, '.related-projects-grid', 1280, 3); + await expectGridColumnsAtViewport(page, '.related-projects-grid', 375, 1); + }); + + test('the single-project hero keeps its bottom divider border', async ({ page }) => { + await page.goto(SINGLE_PROJECT_URL); + await expectComputedStyle(page, '.work-single-hero', 'border-bottom-width', '1px'); + }); +}); diff --git a/theme.json b/theme.json index 41d8a46..554249f 100644 --- a/theme.json +++ b/theme.json @@ -25,6 +25,11 @@ "slug": "neutral-100", "color": "#F4F4F4" }, + { + "name": "Neutral 150", + "slug": "neutral-150", + "color": "#F0F0F0" + }, { "name": "Neutral 200", "slug": "neutral-200", @@ -60,6 +65,11 @@ "slug": "neutral-800", "color": "#303030" }, + { + "name": "Neutral 850", + "slug": "neutral-850", + "color": "#262626" + }, { "name": "Neutral 900", "slug": "neutral-900", @@ -482,13 +492,14 @@ "inverse": "var:preset|color|base", "muted": "var:preset|color|neutral-700", "subtle": "var:preset|color|neutral-600", - "brand": "var:preset|color|brand-500", + "brand": "var:preset|color|brand-600", "brand-strong": "var:preset|color|brand-800", "on-dark": "var:preset|color|base", "on-dark-muted": "var:preset|color|neutral-400" }, "surface": { "canvas": "var:preset|color|base", + "canvas-alt": "var:preset|color|neutral-150", "card": "var:preset|color|neutral-100", "card-raised": "var:preset|color|neutral-200", "highlight": "var:preset|color|base",