Tell us where things stand, what\'s working, and what\'s not. We\'ll be straight with you about whether we\'re the right fit.
'), + ]; + + foreach ($components as $component) { + $component->save(); + } + + $stale = array_merge( + ContentBuilder::stageBanner( + $node, + 'Your websiteTell us where things stand. We\'ll be straight with you about whether we\'re the right fit.
'), + ]; + + foreach ($components as $component) { + $component->save(); + } + + $stale = array_merge( + ContentBuilder::stageBanner( + $node, + 'Engineering that keeps' . $subtitle . '
'; + + if ($cta !== NULL) { + $html .= ''; + } + + return Paragraph::create([ + 'type' => 'civictheme_content', + 'field_c_p_theme' => 'dark', + 'field_c_p_content' => [ + 'value' => $html, + 'format' => 'civictheme_rich_text', + ], + ]); + } + + /** + * Build a dark CivicTheme snippet (title + summary) list item. + * + * @param string $title + * The snippet title. + * @param string $summary + * The snippet summary. + * @param string $variant + * Optional appearance variant key (e.g. 'itemized'). Empty for none. + * + * @return \Drupal\paragraphs\Entity\Paragraph + * An unsaved snippet paragraph. + */ + public static function snippet(string $title, string $summary, string $variant = ''): Paragraph { + $values = [ + 'type' => 'civictheme_snippet', + 'field_c_p_theme' => 'dark', + 'field_c_p_title' => $title, + 'field_c_p_summary' => $summary, + ]; + + if ($variant !== '') { + $values['field_p_snippet_appearance'] = $variant; + } + + return Paragraph::create($values); + } + + /** + * Build a dark Fact card (a large figure above a label). + * + * @param string $fact + * The figure, e.g. "0" or "40". + * @param string $label + * The label beneath the figure. + * @param string $suffix + * A small unit after the figure, e.g. "day", "yrs" or "+". + * + * @return \Drupal\paragraphs\Entity\Paragraph + * An unsaved fact card paragraph. + */ + public static function factCard(string $fact, string $label, string $suffix = ''): Paragraph { + return Paragraph::create([ + 'type' => 'do_fact_card', + 'field_c_p_theme' => 'dark', + 'field_c_p_title' => $fact, + 'field_p_suffix' => $suffix, + 'field_c_p_summary' => $label, + ]); + } + + /** + * Build a dark CivicTheme manual list of snippet items. + * + * Design treatments are driven by per-item variant classes on the snippets + * themselves; the list carries no style field. + * + * @param string $title + * The section heading. + * @param int $columns + * Column count (1-4). + * @param \Drupal\paragraphs\Entity\Paragraph[] $items + * The snippet list items. + * @param string $eyebrow + * The small eyebrow label above the heading. + * + * @return \Drupal\paragraphs\Entity\Paragraph + * An unsaved manual list paragraph referencing the saved items. + */ + public static function manualList(string $title, int $columns, array $items, string $eyebrow = ''): Paragraph { + foreach ($items as $item) { + $item->save(); + } + + return Paragraph::create([ + 'type' => 'civictheme_manual_list', + 'field_c_p_theme' => 'dark', + 'field_c_p_title' => $title, + 'field_c_p_list_column_count' => $columns, + 'field_p_eyebrow' => $eyebrow, + 'field_c_p_list_items' => $items, + ]); + } + + /** + * Build a dark CivicTheme callout (title + rich-text body + link). + * + * @param string $title + * The callout heading. + * @param string $body + * The callout body, rendered through the rich-text format. + * @param string $link_title + * The link text. + * @param string $link_uri + * The link URI. + * + * @return \Drupal\paragraphs\Entity\Paragraph + * An unsaved callout paragraph. + */ + public static function callout(string $title, string $body, string $link_title = '', string $link_uri = ''): Paragraph { + $values = [ + 'type' => 'civictheme_callout', + 'field_c_p_theme' => 'dark', + 'field_c_p_title' => $title, + 'field_c_p_content' => [ + 'value' => $body, + 'format' => 'civictheme_rich_text', + ], + ]; + + // The callout button renders external links (a mailto) with a new-window + // target and an arrow. Only add the button for a real call-to-action link; + // the homepage CTA renders its email inside the body as a plain link + // instead. + if ($link_uri !== '') { + $values['field_c_p_links'] = [['uri' => self::linkUri($link_uri), 'title' => $link_title]]; + } + + return Paragraph::create($values); + } + + /** + * Build a Service detail paragraph. + * + * @param string $title + * The service name. + * @param string $tagline + * The one-line summary shown beside the title. + * @param string[] $paras + * Description paragraphs. + * @param string[] $includes + * The "what's included" list items. + * @param string $price_label + * The price label, e.g. "Typical engagement". + * @param string $price_value + * The price, e.g. "$40K - $180K". + * @param string $link_title + * The call-to-action button text. + * @param string $link_uri + * The call-to-action button URI. + * + * @return \Drupal\paragraphs\Entity\Paragraph + * An unsaved Service detail paragraph. + */ + public static function serviceDetail(string $title, string $tagline, array $paras, array $includes, string $price_label, string $price_value, string $link_title, string $link_uri): Paragraph { + $description = ''; + + foreach ($paras as $para) { + $description .= '' . $para . '
'; + } + + return Paragraph::create([ + 'type' => 'do_service_detail', + 'field_c_p_theme' => 'dark', + 'field_c_p_title' => $title, + 'field_p_tagline' => $tagline, + 'field_c_p_content' => [ + 'value' => $description, + 'format' => 'civictheme_rich_text', + ], + 'field_p_includes' => $includes, + 'field_p_price_label' => $price_label, + 'field_p_price_value' => $price_value, + 'field_c_p_link' => [ + 'uri' => self::linkUri($link_uri), + 'title' => $link_title, + ], + ]); + } + + /** + * Build a dark CivicTheme content paragraph from rich-text markup. + * + * @param string $html + * The body markup, rendered through the rich-text format. + * + * @return \Drupal\paragraphs\Entity\Paragraph + * An unsaved content paragraph. + */ + public static function contentRichText(string $html): Paragraph { + return Paragraph::create([ + 'type' => 'civictheme_content', + 'field_c_p_theme' => 'dark', + 'field_c_p_content' => [ + 'value' => $html, + 'format' => 'civictheme_rich_text', + ], + ]); + } + + /** + * Delete entities staged for removal after the referencing node was saved. + * + * @param \Drupal\Core\Entity\EntityInterface[] $entities + * Entities to delete. + */ + public static function deleteEntities(array $entities): void { + foreach ($entities as $entity) { + $entity->delete(); + } + } + + /** + * Normalise a link URI for a Drupal link field. + * + * Root-relative paths are stored with the `internal:` scheme; absolute URLs + * and schemes such as `mailto:` are left untouched. + * + * @param string $uri + * The raw URI. + * + * @return string + * The normalised URI. + */ + protected static function linkUri(string $uri): string { + return str_starts_with($uri, '/') ? 'internal:' . $uri : $uri; + } + + /** + * Build the rich-text body for contact details and "what to expect" steps. + * + * @return string + * The rich-text HTML body. + */ + public static function contactInfo(): string { + return <<<'HTML' +We typically respond within one business day.
+Available weekdays, Melbourne time (AEST).
+Melbourne, Australia
+We work with organisations across Australia and New Zealand.
+Most Drupal teams accept slow CI pipelines as a fact of life. Builds that take 15 minutes, test suites that timeout, and deployments that require a coffee break. It doesn't have to be this way.
+We've audited dozens of Drupal CI pipelines across government, education, and enterprise organisations. The same problems come up repeatedly. Here's what we find and how to fix it.
+Before diving into solutions, it helps to understand where time actually goes in a typical Drupal CI build. We measured 24 pipelines across different hosting providers and CI platforms:
+| Build Phase | Median Time | Worst Case | Optimised |
|---|---|---|---|
| Docker image pull | 2m 30s | 6m 15s | 15s |
| Composer install | 1m 45s | 4m 20s | 12s |
| Database import | 3m 10s | 8m 00s | 45s |
| PHPUnit tests | 4m 20s | 12m 00s | 1m 30s |
| Behat/Cypress | 6m 45s | 18m 00s | 2m 15s |
| Total | 18m 30s | 48m 35s | 4m 57s |
The gap between worst-case and optimised is significant. Let's walk through the fixes.
+The single biggest time sink is rebuilding or pulling Docker images. Most CI configurations start with a base image pull on every run. If you're using docker-compose pull without layer caching, you're downloading gigabytes of data every build.
Build a dedicated CI image with your PHP extensions, Node version, and system dependencies baked in. Push it to your container registry and reference it directly:
+# .circleci/config.yml
+jobs:
+ test:
+ docker:
+ - image: ghcr.io/your-org/drupal-ci:php8.3
+ auth:
+ username: $GITHUB_USER
+ password: $GITHUB_TOKEN
+ steps:
+ - checkout
+ - run: composer install --no-interaction --prefer-dist
+ - run: vendor/bin/phpunitThis alone typically cuts 2-4 minutes off every build.
+Composer install is deceptively slow because it resolves dependencies, downloads packages, and runs post-install scripts. Most of this work is redundant between builds.
+#!/usr/bin/env bash
+# Restore Composer cache from CI provider's cache layer.
+COMPOSER_HASH=$(md5sum composer.lock | cut -d' ' -f1)
+CACHE_KEY="composer-v1-${COMPOSER_HASH}"
+
+if [ -d "/tmp/composer-cache/${CACHE_KEY}" ]; then
+ cp -r "/tmp/composer-cache/${CACHE_KEY}/vendor" ./vendor
+ echo "Cache hit: restored vendor from ${CACHE_KEY}"
+else
+ composer install --no-interaction --prefer-dist
+ mkdir -p "/tmp/composer-cache/${CACHE_KEY}"
+ cp -r vendor "/tmp/composer-cache/${CACHE_KEY}/vendor"
+ echo "Cache miss: saved vendor to ${CACHE_KEY}"
+fi++Key insight: Cache on
+composer.lockhash, notcomposer.json. The lock file captures exact versions, so the cache is only invalidated when dependencies actually change.
Many teams import a full production database dump for testing. This is slow, wasteful, and a compliance risk. A typical government Drupal site has 500MB+ of database content that tests don't need.
+What you actually need for CI:
+We use a sanitisation script that strips the database down to essentials:
+/**
+ * Sanitise database for CI usage.
+ *
+ * Removes user data, reduces content to representative sample,
+ * and strips session/cache tables.
+ */
+function ci_sanitise_database(): void {
+ $connection = \Drupal::database();
+
+ // Truncate cache and session tables.
+ $tables = $connection->schema()->findTables('cache_%');
+ $tables = array_merge($tables, $connection->schema()->findTables('sessions'));
+ foreach ($tables as $table) {
+ $connection->truncate($table)->execute();
+ }
+
+ // Keep only 10 nodes per content type.
+ $types = \Drupal::entityTypeManager()
+ ->getStorage('node_type')
+ ->loadMultiple();
+
+ foreach (array_keys($types) as $type) {
+ $nids = \Drupal::entityQuery('node')
+ ->condition('type', $type)
+ ->sort('changed', 'DESC')
+ ->range(10, 999999)
+ ->accessCheck(FALSE)
+ ->execute();
+
+ $storage = \Drupal::entityTypeManager()->getStorage('node');
+ $nodes = $storage->loadMultiple($nids);
+ $storage->delete($nodes);
+ }
+}Running all tests sequentially is the default in most setups. But PHPUnit supports parallel execution via tools like paratest, and Behat scenarios can be split across multiple containers.
| Strategy | Effort | Time Saved |
|---|---|---|
| Paratest for PHPUnit | Low - drop-in replacement | 40-60% |
| Split Behat by tag | Medium - needs CI config | 50-70% |
| Parallel CI jobs | Medium - matrix builds | 60-80% |
| Test selection (changed files only) | High - needs test mapping | 70-90% |
If your CI pipeline runs drush sql:dump and stores the result as a build artifact, you're wasting time on compression and upload. Use S3 (or equivalent) with a dedicated bucket:
# Upload sanitised DB dump to S3 (run nightly, not per-build).
+drush sql:dump --gzip --result-file=/tmp/db.sql.gz
+aws s3 cp /tmp/db.sql.gz s3://ci-artifacts/drupal-db/latest.sql.gz
+
+# In CI: download pre-built dump (fast, cached at edge).
+aws s3 cp s3://ci-artifacts/drupal-db/latest.sql.gz /tmp/db.sql.gz
+gunzip -c /tmp/db.sql.gz | drush sql:cliEach optimisation on its own saves a few minutes. Together, they transform the development experience. A team pushing 20 commits per day at 18 minutes per build is spending 6 hours of CI time daily. Cut that to 5 minutes and you reclaim 4.3 hours - every day.
+++Fast CI isn't a luxury. It's the difference between developers who test before merging and developers who push to main and hope for the best.
+
If your Drupal CI pipeline takes more than 5 minutes, there's room to improve. We offer a free 30-minute review of your pipeline configuration - no commitment, just practical advice.
+ +HTML; + } + +} diff --git a/web/modules/custom/do_base/tests/src/Kernel/ContentBuilderTest.php b/web/modules/custom/do_base/tests/src/Kernel/ContentBuilderTest.php new file mode 100644 index 00000000..e058110b --- /dev/null +++ b/web/modules/custom/do_base/tests/src/Kernel/ContentBuilderTest.php @@ -0,0 +1,408 @@ +installEntitySchema('user'); + $this->installEntitySchema('node'); + $this->installEntitySchema('file'); + $this->installEntitySchema('paragraph'); + + $this->createParagraphTextField('field_c_p_theme', 'string'); + $this->createParagraphTextField('field_c_p_title', 'string'); + $this->createParagraphTextField('field_c_p_summary', 'string_long'); + $this->createParagraphTextField('field_c_p_content', 'text_long'); + $this->createParagraphTextField('field_p_suffix', 'string'); + $this->createParagraphTextField('field_p_eyebrow', 'string'); + $this->createParagraphTextField('field_c_p_list_column_count', 'integer'); + $this->createParagraphTextField('field_p_tagline', 'string'); + $this->createParagraphTextField('field_p_includes', 'string', -1); + $this->createParagraphTextField('field_p_price_label', 'string'); + $this->createParagraphTextField('field_p_price_value', 'string'); + $this->createParagraphTextField('field_c_p_link', 'link'); + $this->createParagraphTextField('field_c_p_links', 'link', -1); + $this->createParagraphTextField('field_c_p_list_items', 'entity_reference_revisions', -1, ['target_type' => 'paragraph']); + + $this->createParagraphType('civictheme_content', ['field_c_p_theme', 'field_c_p_content']); + $this->createParagraphType('civictheme_snippet', ['field_c_p_theme', 'field_c_p_title', 'field_c_p_summary']); + $this->createParagraphType('do_fact_card', ['field_c_p_theme', 'field_c_p_title', 'field_p_suffix', 'field_c_p_summary']); + $this->createParagraphType('civictheme_manual_list', ['field_c_p_theme', 'field_c_p_title', 'field_c_p_list_column_count', 'field_p_eyebrow', 'field_c_p_list_items']); + $this->createParagraphType('civictheme_callout', ['field_c_p_theme', 'field_c_p_title', 'field_c_p_content', 'field_c_p_links']); + $this->createParagraphType('do_service_detail', ['field_c_p_theme', 'field_c_p_title', 'field_p_tagline', 'field_c_p_content', 'field_p_includes', 'field_p_price_label', 'field_p_price_value', 'field_c_p_link']); + + NodeType::create(['type' => 'civictheme_page', 'name' => 'Page'])->save(); + NodeType::create(['type' => 'bare', 'name' => 'Bare'])->save(); + + $this->createNodeField('field_c_n_banner_title', 'string'); + $this->createNodeField('field_c_n_banner_type', 'string'); + $this->createNodeField('field_c_n_banner_theme', 'string'); + $this->createNodeField('field_c_n_banner_background', 'string'); + $this->createNodeField('field_c_n_banner_featured_image', 'string'); + $this->createNodeField('field_c_n_banner_components', 'entity_reference_revisions', ['target_type' => 'paragraph']); + $this->createNodeField('field_c_n_banner_components_bott', 'entity_reference_revisions', ['target_type' => 'paragraph']); + } + + /** + * Tests snippet() builds a dark snippet with title and summary. + */ + public function testSnippet(): void { + $snippet = ContentBuilder::snippet('Snippet title', 'Snippet summary'); + + $this->assertInstanceOf(Paragraph::class, $snippet); + $this->assertSame('civictheme_snippet', $snippet->bundle()); + $this->assertSame('dark', $snippet->get('field_c_p_theme')->value); + $this->assertSame('Snippet title', $snippet->get('field_c_p_title')->value); + $this->assertSame('Snippet summary', $snippet->get('field_c_p_summary')->value); + } + + /** + * Tests factCard() builds a dark fact card with figure, suffix and label. + */ + public function testFactCard(): void { + $card = ContentBuilder::factCard('40', 'Projects', '+'); + + $this->assertInstanceOf(Paragraph::class, $card); + $this->assertSame('do_fact_card', $card->bundle()); + $this->assertSame('dark', $card->get('field_c_p_theme')->value); + $this->assertSame('40', $card->get('field_c_p_title')->value); + $this->assertSame('+', $card->get('field_p_suffix')->value); + $this->assertSame('Projects', $card->get('field_c_p_summary')->value); + } + + /** + * Tests factCard() default suffix is empty. + */ + public function testFactCardDefaultSuffix(): void { + $card = ContentBuilder::factCard('0', 'Downtime'); + + $this->assertSame('', $card->get('field_p_suffix')->value); + } + + /** + * Tests manualList() saves its items and references them. + */ + public function testManualList(): void { + $items = [ + ContentBuilder::snippet('One', 'First', 'itemized'), + ContentBuilder::snippet('Two', 'Second', 'itemized'), + ]; + + $list = ContentBuilder::manualList('How it works', 2, $items, 'Process'); + + $this->assertInstanceOf(Paragraph::class, $list); + $this->assertSame('civictheme_manual_list', $list->bundle()); + $this->assertSame('dark', $list->get('field_c_p_theme')->value); + $this->assertSame('How it works', $list->get('field_c_p_title')->value); + $this->assertSame(2, $list->get('field_c_p_list_column_count')->value); + $this->assertSame('Process', $list->get('field_p_eyebrow')->value); + $this->assertCount(2, $list->get('field_c_p_list_items')); + + // Each item is saved by the builder before being referenced. + $this->assertNotNull($items[0]->id()); + $this->assertNotNull($items[1]->id()); + } + + /** + * Tests manualList() default eyebrow is empty. + */ + public function testManualListDefaultEyebrow(): void { + $list = ContentBuilder::manualList('Stats', 3, [ContentBuilder::snippet('A', 'B')]); + + $this->assertSame('', $list->get('field_p_eyebrow')->value); + } + + /** + * Tests callout() with a root-relative link stores an internal URI. + */ + public function testCalloutWithLink(): void { + $callout = ContentBuilder::callout('Ready?', 'Body
', 'Contact us', '/contact'); + + $this->assertInstanceOf(Paragraph::class, $callout); + $this->assertSame('civictheme_callout', $callout->bundle()); + $this->assertSame('dark', $callout->get('field_c_p_theme')->value); + $this->assertSame('Ready?', $callout->get('field_c_p_title')->value); + $this->assertSame('Body
', $callout->get('field_c_p_content')->value); + $this->assertSame('civictheme_rich_text', $callout->get('field_c_p_content')->format); + $this->assertSame('internal:/contact', $callout->get('field_c_p_links')->uri); + $this->assertSame('Contact us', $callout->get('field_c_p_links')->title); + } + + /** + * Tests callout() without a link omits the button. + */ + public function testCalloutWithoutLink(): void { + $callout = ContentBuilder::callout('Ready?', 'Body
'); + + $this->assertSame('civictheme_callout', $callout->bundle()); + $this->assertTrue($callout->get('field_c_p_links')->isEmpty()); + } + + /** + * Tests serviceDetail() builds the service paragraph with all fields. + */ + public function testServiceDetail(): void { + $service = ContentBuilder::serviceDetail( + 'Platform audit', + 'Know where you stand', + ['First paragraph.', 'Second paragraph.'], + ['Architecture review', 'Performance report'], + 'Typical engagement', + '$40K - $180K', + 'Book a call', + '/contact', + ); + + $this->assertInstanceOf(Paragraph::class, $service); + $this->assertSame('do_service_detail', $service->bundle()); + $this->assertSame('dark', $service->get('field_c_p_theme')->value); + $this->assertSame('Platform audit', $service->get('field_c_p_title')->value); + $this->assertSame('Know where you stand', $service->get('field_p_tagline')->value); + $this->assertSame('First paragraph.
Second paragraph.
', $service->get('field_c_p_content')->value); + $this->assertSame('Typical engagement', $service->get('field_p_price_label')->value); + $this->assertSame('$40K - $180K', $service->get('field_p_price_value')->value); + $this->assertSame('internal:/contact', $service->get('field_c_p_link')->uri); + $this->assertSame('Book a call', $service->get('field_c_p_link')->title); + $this->assertCount(2, $service->get('field_p_includes')); + } + + /** + * Tests contentRichText() builds a dark content paragraph. + */ + public function testContentRichText(): void { + $content = ContentBuilder::contentRichText('Hello
'); + + $this->assertInstanceOf(Paragraph::class, $content); + $this->assertSame('civictheme_content', $content->bundle()); + $this->assertSame('dark', $content->get('field_c_p_theme')->value); + $this->assertSame('Hello
', $content->get('field_c_p_content')->value); + $this->assertSame('civictheme_rich_text', $content->get('field_c_p_content')->format); + } + + /** + * Tests stageBanner() turns the node banner into the dark hero. + */ + public function testStageBanner(): void { + $node = Node::create([ + 'type' => 'civictheme_page', + 'title' => 'Home', + 'field_c_n_banner_background' => 'old-background', + 'field_c_n_banner_featured_image' => 'old-image', + ]); + + $previous = ContentBuilder::stageBanner($node, 'Hero heading', 'Hero subtitle', ['title' => 'Talk to us', 'uri' => '/contact']); + + $this->assertSame([], $previous); + $this->assertSame('Hero heading', $node->get('field_c_n_banner_title')->value); + $this->assertSame('hero', $node->get('field_c_n_banner_type')->value); + $this->assertSame('dark', $node->get('field_c_n_banner_theme')->value); + $this->assertTrue($node->get('field_c_n_banner_background')->isEmpty()); + $this->assertTrue($node->get('field_c_n_banner_featured_image')->isEmpty()); + + $components = $node->get('field_c_n_banner_components')->referencedEntities(); + $this->assertCount(1, $components); + + $intro = reset($components); + $this->assertInstanceOf(Paragraph::class, $intro); + $this->assertSame('civictheme_content', $intro->bundle()); + $this->assertSame('dark', $intro->get('field_c_p_theme')->value); + $this->assertStringContainsString('Hero subtitle', $intro->get('field_c_p_content')->value); + $this->assertStringContainsString('href="/contact"', $intro->get('field_c_p_content')->value); + $this->assertStringContainsString('Talk to us', $intro->get('field_c_p_content')->value); + $this->assertNotNull($intro->id()); + } + + /** + * Tests stageBanner() without a subtitle adds no banner component. + */ + public function testStageBannerWithoutSubtitle(): void { + $node = Node::create(['type' => 'civictheme_page', 'title' => 'Plain']); + + ContentBuilder::stageBanner($node, 'Just a heading'); + + $this->assertSame('Just a heading', $node->get('field_c_n_banner_title')->value); + $this->assertTrue($node->get('field_c_n_banner_components')->isEmpty()); + } + + /** + * Tests stageBanner() skips banner fields the node bundle does not have. + */ + public function testStageBannerSkipsMissingFields(): void { + $node = Node::create(['type' => 'bare', 'title' => 'No banner fields']); + + $previous = ContentBuilder::stageBanner($node, 'Heading', 'Subtitle', ['title' => 'Go', 'uri' => '/contact']); + + $this->assertSame([], $previous); + $this->assertFalse($node->hasField('field_c_n_banner_title')); + } + + /** + * Tests stageBanner() returns previously referenced banner components. + */ + public function testStageBannerReturnsPreviousComponents(): void { + $existing = ContentBuilder::contentRichText('Old
'); + $existing->save(); + + $node = Node::create([ + 'type' => 'civictheme_page', + 'title' => 'Home', + 'field_c_n_banner_components' => [$existing], + ]); + + $previous = ContentBuilder::stageBanner($node, 'Hero heading', 'New subtitle'); + + $this->assertCount(1, $previous); + $previous_item = reset($previous); + $this->assertInstanceOf(EntityInterface::class, $previous_item); + $this->assertSame($existing->id(), $previous_item->id()); + } + + /** + * Tests deleteEntities() deletes each saved entity. + */ + public function testDeleteEntities(): void { + $one = ContentBuilder::contentRichText('One
'); + $one->save(); + $two = ContentBuilder::contentRichText('Two
'); + $two->save(); + + $id_one = $one->id(); + $id_two = $two->id(); + + ContentBuilder::deleteEntities([$one, $two]); + + $this->assertNull(Paragraph::load($id_one)); + $this->assertNull(Paragraph::load($id_two)); + } + + /** + * Tests contactInfo() returns the expected contact rich-text markers. + */ + public function testContactInfo(): void { + $html = ContentBuilder::contactInfo(); + + $this->assertStringContainsString('info@drevops.com', $html); + $this->assertStringContainsString('What to expect', $html); + } + + /** + * Tests blogBody() returns the expected blog rich-text markers. + */ + public function testBlogBody(): void { + $html = ContentBuilder::blogBody(); + + $this->assertStringContainsString('ct-table', $html); + $this->assertStringContainsString('language-php', $html); + } + + /** + * Creates a paragraph field storage and config on the given bundles. + * + * @param string $field_name + * The field machine name. + * @param string $type + * The field storage type. + * @param int $cardinality + * The field cardinality. + * @param array $settings + * Field storage settings. + */ + protected function createParagraphTextField(string $field_name, string $type, int $cardinality = 1, array $settings = []): void { + FieldStorageConfig::create([ + 'field_name' => $field_name, + 'entity_type' => 'paragraph', + 'type' => $type, + 'cardinality' => $cardinality, + 'settings' => $settings, + ])->save(); + } + + /** + * Creates a paragraph type and attaches the given fields to it. + * + * @param string $bundle + * The paragraph type machine name. + * @param string[] $field_names + * The field machine names to attach. + */ + protected function createParagraphType(string $bundle, array $field_names): void { + ParagraphsType::create(['id' => $bundle, 'label' => $bundle])->save(); + + foreach ($field_names as $field_name) { + FieldConfig::create([ + 'field_name' => $field_name, + 'entity_type' => 'paragraph', + 'bundle' => $bundle, + 'label' => $field_name, + ])->save(); + } + } + + /** + * Creates a node field storage and config on the civictheme_page bundle. + * + * @param string $field_name + * The field machine name. + * @param string $type + * The field storage type. + * @param array $settings + * Field storage settings. + */ + protected function createNodeField(string $field_name, string $type, array $settings = []): void { + FieldStorageConfig::create([ + 'field_name' => $field_name, + 'entity_type' => 'node', + 'type' => $type, + 'settings' => $settings, + ])->save(); + + FieldConfig::create([ + 'field_name' => $field_name, + 'entity_type' => 'node', + 'bundle' => 'civictheme_page', + 'label' => $field_name, + ])->save(); + } + +} diff --git a/web/modules/custom/do_base/tests/src/Unit/Hook/FormAlterHookTest.php b/web/modules/custom/do_base/tests/src/Unit/Hook/FormAlterHookTest.php new file mode 100644 index 00000000..17fbe0ca --- /dev/null +++ b/web/modules/custom/do_base/tests/src/Unit/Hook/FormAlterHookTest.php @@ -0,0 +1,63 @@ +alter($form); + + $attached = $form['#attached']['library'] ?? []; + + if ($expected_attached) { + $this->assertContains('do_base/recaptcha_v3_guard', $attached); + } + else { + $this->assertNotContains('do_base/recaptcha_v3_guard', $attached); + } + } + + /** + * Data provider for testAlter(). + */ + public static function dataProviderAlter(): \Iterator { + yield 'recaptcha v3 attaches guard' => [ + ['captcha' => ['#captcha_type' => 'recaptcha_v3/recaptcha3']], + TRUE, + ]; + + yield 'different captcha type does not attach' => [ + ['captcha' => ['#captcha_type' => 'image_captcha/Image']], + FALSE, + ]; + + yield 'no captcha key returns early' => [ + ['name' => ['#type' => 'textfield']], + FALSE, + ]; + + yield 'captcha without type does not attach' => [ + ['captcha' => []], + FALSE, + ]; + } + +} diff --git a/web/modules/custom/do_base/tests/src/Unit/Hook/LibraryInfoAlterHookTest.php b/web/modules/custom/do_base/tests/src/Unit/Hook/LibraryInfoAlterHookTest.php new file mode 100644 index 00000000..c8b3e4f5 --- /dev/null +++ b/web/modules/custom/do_base/tests/src/Unit/Hook/LibraryInfoAlterHookTest.php @@ -0,0 +1,61 @@ +alter($libraries, $extension); + + $dependencies = $libraries['highlight_js.custom']['dependencies'] ?? []; + + if ($expected_attached) { + $this->assertContains('do_base/highlight_js.gherkin', $dependencies); + } + else { + $this->assertNotContains('do_base/highlight_js.gherkin', $dependencies); + } + } + + /** + * Data provider for testAlter(). + */ + public static function dataProviderAlter(): \Iterator { + yield 'matching extension and library attaches gherkin' => [ + ['highlight_js.custom' => ['dependencies' => ['core/drupal']]], + 'highlight_js', + TRUE, + ]; + + yield 'wrong extension does not attach' => [ + ['highlight_js.custom' => ['dependencies' => ['core/drupal']]], + 'civictheme', + FALSE, + ]; + + yield 'matching extension without custom library does not attach' => [ + ['highlight_js.other' => ['dependencies' => []]], + 'highlight_js', + FALSE, + ]; + } + +} diff --git a/web/modules/custom/do_base/tests/src/Unit/Twig/IconAssetsExtensionTest.php b/web/modules/custom/do_base/tests/src/Unit/Twig/IconAssetsExtensionTest.php new file mode 100644 index 00000000..e79c6610 --- /dev/null +++ b/web/modules/custom/do_base/tests/src/Unit/Twig/IconAssetsExtensionTest.php @@ -0,0 +1,46 @@ +createMock(ActiveTheme::class); + $active_theme->method('getName')->willReturn($theme_name); + + $theme_manager = $this->createMock(ThemeManagerInterface::class); + $theme_manager->method('getActiveTheme')->willReturn($active_theme); + + $extension = new IconAssetsExtension($theme_manager); + + $this->assertSame(['assets_dir' => $expected], $extension->getGlobals()); + } + + /** + * Data provider for testGetGlobals(). + */ + public static function dataProviderGetGlobals(): \Iterator { + yield 'drevops theme' => ['drevops', '@drevops/../assets']; + yield 'civictheme theme' => ['civictheme', '@civictheme/../assets']; + } + +} diff --git a/web/themes/custom/drevops/assets/js/reveal.js b/web/themes/custom/drevops/assets/js/reveal.js new file mode 100644 index 00000000..98e9dbbb --- /dev/null +++ b/web/themes/custom/drevops/assets/js/reveal.js @@ -0,0 +1,52 @@ +/** + * @file + * Reveal-on-scroll behaviour. + * + * Mounts a subtle fade-and-rise reveal on the outer wrapper of each homepage + * section component (manual lists and callouts) as it enters the viewport. The + * design uses this treatment on the homepage only; every other page renders its + * sections statically. + * + * The hiding class is added by this script, never in the stylesheet, so the + * content is only ever hidden once the reveal has been initialised. If the + * script does not run, the browser lacks IntersectionObserver, or the visitor + * prefers reduced motion, every section stays fully visible. + */ +((Drupal, once) => { + Drupal.behaviors.drevopsReveal = { + attach(context) { + if (!document.body.classList.contains('path-frontpage')) { + return; + } + + const elements = once('do-reveal', '.ct-list, .ct-callout', context); + + if (!elements.length) { + return; + } + + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + if (prefersReducedMotion || !('IntersectionObserver' in window)) { + return; + } + + const observer = new IntersectionObserver( + (entries, obs) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('do-reveal--in'); + obs.unobserve(entry.target); + } + }); + }, + { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }, + ); + + elements.forEach((el) => { + el.classList.add('do-reveal'); + observer.observe(el); + }); + }, + }; +})(Drupal, once); diff --git a/web/themes/custom/drevops/assets/sass/brand/_animations.scss b/web/themes/custom/drevops/assets/sass/brand/_animations.scss new file mode 100644 index 00000000..1e7e7c6c --- /dev/null +++ b/web/themes/custom/drevops/assets/sass/brand/_animations.scss @@ -0,0 +1,30 @@ +// +// DrevOps - Scroll reveal. +// +// The `do-reveal` class is added by assets/js/reveal.js to each homepage +// section component (manual lists, callouts) as the page loads, so the hidden +// state only ever applies once the reveal behaviour is running. reveal.js then +// adds `do-reveal--in` when the element scrolls into view. +// + +.do-reveal { + opacity: 0; + transform: translateY(24px); + transition: opacity 0.6s ease, transform 0.6s ease; + will-change: opacity, transform; +} + +.do-reveal--in { + opacity: 1; + transform: none; +} + +// Belt-and-braces: reveal.js already bails out for reduced motion, but keep the +// content visible if the class is present for any other reason. +@media (prefers-reduced-motion: reduce) { + .do-reveal { + opacity: 1; + transform: none; + transition: none; + } +} diff --git a/web/themes/custom/drevops/assets/sass/brand/_blog.scss b/web/themes/custom/drevops/assets/sass/brand/_blog.scss new file mode 100644 index 00000000..88daad30 --- /dev/null +++ b/web/themes/custom/drevops/assets/sass/brand/_blog.scss @@ -0,0 +1,171 @@ +// +// DrevOps - Blog. +// +// CivicTheme renders a post's topics as a primary tag list inside each promo +// card; the design shows them as small bordered pill chips (its +// `.component-tag--sm`): a dark surface, cyan label and a faint border. +// +.ct-promo-card__tags { + margin-top: var(--space-y-2); + + .ct-tag-list__content { + display: flex; + flex-wrap: wrap; + gap: var(--space-x-1); + margin: 0; + padding: 0; + list-style: none; + } + + .ct-item-list__item { + margin: 0; + } + + .ct-tag { + // Override CivicTheme's primary-tag tokens to the design's pill colours; + // defining them on the element outranks the :root defaults regardless of + // CSS load order. + --ct-tag-dark-primary-background-color: var(--tag-bg); + --ct-tag-dark-primary-border-color: var(--border-subtle-color); + --ct-tag-dark-primary-color: var(--tag-color); + + display: inline-block; + font-size: var(--font-size-2xs); + font-weight: var(--label-font-weight); + letter-spacing: var(--label-letter-spacing); + text-transform: var(--label-text-transform); + padding: var(--space-y-1) var(--space-x-1); + border-radius: var(--radius-sm); + + a { + color: inherit; + text-decoration: none; + } + } +} + +// Featured post: the single-item (full-width) automated list renders the promo +// card as the design's feature - a 50/50 grid with the image filling the left +// half and the content centred on the right, in a bordered, rounded panel. +.ct-list [class~='col-m-12'] .ct-promo-card--with-image { + display: grid; + grid-template-columns: 1fr 1fr; + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + overflow: hidden; + + // Absolutely fill the image so a tall (e.g. square) source does not stretch + // the card past the content; the content column then sets the card height, + // and the image covers its half - matching the design's feature panel. + .ct-promo-card__image { + position: relative; + height: 100%; + margin: 0; + overflow: hidden; + + .ct-image, + img { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .ct-promo-card__content { + display: flex; + flex-direction: column; + justify-content: center; + padding: var(--space-y-6); + } + + // The feature title is the design's h2, not the smaller grid-card title. + .ct-promo-card__title { + font-size: var(--heading-h2-font-size); + font-weight: var(--font-weight-normal); + line-height: var(--line-height-sm); + letter-spacing: -0.01em; + color: var(--text-color); + margin-bottom: var(--space-y-2); + + a { + color: inherit; + } + } + + @media (max-width: 767.98px) { + grid-template-columns: 1fr; + } +} + +// Article grid: a muted section panel behind the card list. The card columns +// are left to CivicTheme's native grid; only the "Showing N of M" results count +// is hidden so the panel opens straight into the cards. +.ct-list:has([class~='col-m-4']) { + background: var(--surface-muted-color); + + .ct-list__results-count { + display: none; + } +} + +// Blog cards (featured + grid): the design's bordered page-bg panel that lifts +// on hover. CivicTheme's promo card ships a filled surface and a white border, +// so restate the design colours and add the hover transform. +.ct-list .ct-promo-card--with-image.ct-theme-dark { + background: var(--page-bg); + border-color: var(--border-color); + border-radius: var(--radius-md); + overflow: hidden; + transition: border-color 0.3s ease, transform 0.3s ease; + + &:hover { + border-color: var(--color-secondary-6); + transform: translateY(-4px); + } + + .ct-promo-card__image img { + transition: transform 0.5s ease; + } + + &:hover .ct-promo-card__image img { + transform: scale(1.05); + } +} + +// Grid card internals matching the design's blog-card: a 16/9 image, an h4 +// title and a small excerpt (CivicTheme's promo card uses a taller image and +// larger type). +.ct-list [class~='col-m-4'] .ct-promo-card--with-image { + .ct-promo-card__image { + // Force a 16/9 image box. CivicTheme pins a fixed image height that wins + // over `aspect-ratio`, so use the height:0 + padding ratio box (which the + // fixed height cannot override) and stretch the image to fill it. + height: 0; + padding-bottom: 56.25%; + overflow: hidden; + position: relative; + + .ct-image, + img { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .ct-promo-card__title { + font-size: var(--heading-h4-font-size); + font-weight: var(--font-weight-normal); + line-height: var(--line-height-sm); + letter-spacing: -0.01em; + } + + .ct-promo-card__summary { + font-size: var(--font-size-sm); + line-height: var(--line-height-md); + } +} diff --git a/web/themes/custom/drevops/assets/sass/brand/_buttons.scss b/web/themes/custom/drevops/assets/sass/brand/_buttons.scss new file mode 100644 index 00000000..ab352ede --- /dev/null +++ b/web/themes/custom/drevops/assets/sass/brand/_buttons.scss @@ -0,0 +1,76 @@ +// +// DrevOps - Brand buttons. +// +// The design renders every call-to-action as one outline button: transparent +// with a cyan border and label, filling softly on hover. CivicTheme emits its +// buttons - and the promo, callout and rich-text CTAs - with the `.ct-button` +// class, so the design treatment is applied there through the button tokens +// rather than the design's original `.btn` classes. +// + +.ct-button { + &, + &:focus-visible, + &:active, + &:visited { + display: inline-block; + font-family: var(--font-family-primary); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-normal); + line-height: 1; + padding: var(--space-y-2) var(--space-x-4); + border: 1px solid var(--btn-secondary-border); + border-radius: 0; + letter-spacing: 0.12em; + text-transform: uppercase; + text-decoration: none; + background-color: var(--btn-secondary-bg); + color: var(--btn-secondary-color); + transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; + } + + &:hover { + background-color: var(--btn-secondary-hover-bg); + border-color: var(--btn-secondary-color); + color: var(--btn-secondary-hover-color); + text-decoration: none; + } +} + +// CivicTheme's dark content-link rule (high specificity) restyles every anchor +// inside content as an underlined text link, which would otherwise strip the +// button box from rich-text CTAs (the hero "Talk to us" button and the blog +// "Get a free CI review" button). Re-assert the button appearance at a +// matching specificity; the base `.ct-button` rule still supplies the box. +.ct-basic-content.ct-theme-dark a.ct-button { + &, + &:hover, + &:focus-visible, + &:active, + &:visited { + margin: 0; + padding: var(--space-y-2) var(--space-x-4); + line-height: 1; + text-decoration: none; + color: var(--btn-secondary-color); + } + + &:hover { + color: var(--btn-secondary-hover-color); + } +} + +// CivicTheme's own secondary-button rule (`.ct-button--secondary.ct-theme-dark`, +// specificity 0,2,0) sets colour, border and background from its dark-interaction +// tokens, overriding the design button treatment. Redefine those tokens on the +// button itself so CivicTheme's rule resolves to the design's secondary colour +// (the element-level definition outranks the `:root` default regardless of CSS +// load order). +.ct-button.ct-theme-dark { + --ct-button-dark-secondary-color: var(--btn-secondary-color); + --ct-button-dark-secondary-background-color: var(--btn-secondary-bg); + --ct-button-dark-secondary-border-color: var(--btn-secondary-border); + --ct-button-dark-secondary-hover-color: var(--btn-secondary-hover-color); + --ct-button-dark-secondary-hover-background-color: var(--btn-secondary-hover-bg); + --ct-button-dark-secondary-hover-border-color: var(--btn-secondary-color); +} diff --git a/web/themes/custom/drevops/assets/sass/brand/_contact.scss b/web/themes/custom/drevops/assets/sass/brand/_contact.scss new file mode 100644 index 00000000..7080307d --- /dev/null +++ b/web/themes/custom/drevops/assets/sass/brand/_contact.scss @@ -0,0 +1,223 @@ +// +// DrevOps - Contact page. +// +// The contact page renders two CivicTheme components in its node components +// region: the contact webform and a rich-text block with the direct-contact +// details. The design lays these out as two columns - the form on the left and +// the contact details on the right - and styles the form fields and the detail +// blocks to the design tokens. +// +// The contact page is the only page whose components region contains a +// webform, so `:has(> .ct-webform)` scopes the layout (and the contact-detail +// typography) to it without needing a page-specific body class. The form-field +// styling is scoped to `.ct-webform`, which only appears on this page. +// + +// The Layout Builder field block that renders `field_c_n_components`. Every +// civictheme_page node uses this class, so the `:has(> .ct-webform)` guard +// narrows it to the contact page's instance. +$contact-region: '.block-field-blocknodecivictheme-pagefield-c-n-components'; + +#{$contact-region}:has(> .ct-webform) { + // Constrain the region to the shared page measure and centre it, so the + // two-column grid lines up with the hero and the other sections. + @include ct-container(); + + // Each component carries its own inner `.container`; neutralise it so the + // content fills its grid column instead of re-centring at the page measure. + > .ct-webform > .container, + > .ct-basic-content > .container { + max-width: none; + margin-inline: 0; + } + + // Two equal columns from the desktop-menu breakpoint up: form left, details + // right (the design switches to a single column at 768px). Below it the + // components stack (CivicTheme's default flow). + @include ct-breakpoint(m) { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-y-10); + align-items: start; + } +} + +// The contact webform, styled to the design's form tokens. +.ct-webform { + // Field labels: uppercase small-caps in the muted colour (the design `label`). + .ct-label { + font-family: var(--body-font-family); + font-size: var(--label-font-size); + font-weight: var(--label-font-weight); + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--text-muted-color); + margin-bottom: var(--space-y-1); + } + + // The design relies on the `required` attribute for the cue and shows no + // visible marker; keep it in the accessibility tree but hide it visually. + .ct-label__required { + @include ct-visually-hidden(); + } + + // Inputs, select and textarea: secondary font on the subtle surface with the + // subtle border, matching the design's field treatment. + .ct-textfield, + .ct-textarea, + .ct-select { + font-family: var(--body-font-family); + font-size: var(--body-font-size); + font-weight: var(--body-font-weight); + color: var(--text-color); + background-color: var(--surface-subtle-color); + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + + &::placeholder { + color: var(--text-muted-color); + } + + &:focus, + &:focus-visible { + // Draw the focus ring inside the field's border box so focusing does not + // expand the field's footprint outward (the default outline sits 2px + // outside, which reads as the field shifting up on focus). Keeps a + // visible, keyboard-accessible focus indicator. + outline-offset: -2px; + border-color: var(--color-secondary-6); + background-color: var(--surface-muted-color); + } + } + + // Field rhythm: space groups by the design's form gap and the label/control + // gap, overriding CivicTheme's default field margins. + .ct-field { + margin-bottom: var(--space-y-3); + } + + // The submit sits left, set off from the last field. + .ct-button--submit { + margin-top: var(--space-y-1); + } +} + +// The direct-contact details (the right column). Scoped to the contact page's +// rich-text block so the blog article's headings and lists are untouched. The +// `.ct-theme-dark` qualifier matches the specificity of CivicTheme's themed +// content rules (its link colour uses `a:not(.ct-button):not(.ct-link)`), so +// these design overrides win without `!important`. +#{$contact-region}:has(> .ct-webform) .ct-basic-content.ct-theme-dark { + // Block labels ("Email us directly", "Call us", ...): coral small-caps, the + // design's `.component-label--accent`. The rich text stores them as{{ tagline }}
+ {% endif %} +What's included
+{{ eyebrow }}
+ {% endif %} + + {% block title_block %} + {% if title -%} + {% include 'civictheme:heading' with { + content: title, + level: 2, + theme: theme, + modifier_class: 'ct-list__title', + } only %} + {% endif %} + {% endblock %} +