Uncategorize capabilities

hugo/content/_index.md

@@ -57,7 +57,7 @@ bannerSubtitle: "DORA is the largest and longest running research program of its
     img_src="/img/homepage/snipes/core.png"
     eyebrow="Framework"
     headline="DORA Core"
-    url="/research/"
+    url="/research/#core-model"
   >}}
     DORA Core represents the most well-established findings across the history and breadth our research program. Use it to guide transformation efforts in your organization.
     {{< /homepage/snipe >}}

hugo/content/research/_index.md

@@ -15,7 +15,7 @@ bannerBackgroundColor: yellow  # choose one of "yellow", "blue", "red", "purple"
 <!-- the timestamp shortcode is appended as a cache buster -->
 <script type="module" src="core/assets/index.js?t={{% timestamp %}}"></script>
 <link rel="stylesheet" href="core/assets/index.css?t={{% timestamp %}}">
-<div id="app"></div>
+<div id="core-model"></div>
 
 
 <section class="dark-section">

hugo/themes/dora-2025/assets/scss/capabilities.scss

@@ -9,40 +9,45 @@
     article {
         border: 1px solid $border-light;
         border-radius: 0.5em;
-        display: grid;
-        grid-template-columns: 1fr 3rem;
-        grid-auto-rows: min-content;
-        gap: 0px 0px;
+        display: flex;
+       flex-direction: column;
         grid-template-areas:
-            "heading core"
-            "content content";
+            "heading"
+            "content";
 
         h4 {
             font-size: 1em;
             grid-area: heading;
             margin: 0;
-            padding: 1rem 0.5rem 0 0.75rem;
+            padding: .75rem 0.5rem 0 0.75rem;
+            display: flex;
+            gap:4px;
+            flex-direction: row;
 
             a {
                 color: $color-text;
                 text-decoration: none;
+                flex-grow:1;
             }
-        }
 
-        .core {
-            grid-area: core;
+            .core,
+            .ai {
 
-            a {
-                font-weight: 400;
-                background-color: var(--dora-secondary-b-30);
-                border-top-right-radius: 0.5em;
-                border-bottom-left-radius: 0.5em;
-                text-align: center;
-                display: block;
-                font-size: 0.8rem;
-                padding: 0.25rem 0;
-                color: var(--dora-primary-dark);
-                text-decoration: none;
+                a {
+                    font-weight: 400;
+                    background-color: var(--dora-secondary-b-30);
+                    border-radius: 4px;
+                    text-align: center;
+                    display: inline;
+                    font-size: 0.7rem;
+                    padding: 4px 6px;
+                    color: var(--dora-primary-dark);
+                    text-decoration: none;
+                }
+            }
+
+            .ai a {
+                background-color: var(--dora-secondary-c-30);
             }
         }
 

hugo/themes/dora-2025/assets/scss/research.scss

@@ -86,7 +86,7 @@ article {
 }
 
 // Wider page allows room for Core diagram
-main:has(#app) {
+main:has(#core-model) {
     padding: 0;
 }
 

hugo/themes/dora-2025/assets/scss/section.scss

@@ -47,6 +47,14 @@
     background-color: var(--dora-secondary-c);
   }
 
+  &.capabilities {
+    background-color: var(--dora-secondary-b);
+
+    .content {
+      background-image: url(/capabilities/banner-capabilities.png);
+    }
+  }
+
   &.research {
     background-color: var(--dora-highlight);
 

hugo/themes/dora-2025/layouts/capabilities/section.html

@@ -1,30 +1,30 @@
 {{ define "main" }}
 
-    {{- partial "link_styles" "scss/capabilities.scss" -}}
+{{- partial "link_styles" "scss/capabilities.scss" -}}
 
-    {{ range (slice "climate for learning" "fast flow" "fast feedback") }}
-        {{ if eq . "climate for learning" }}
-            <h2 id="{{ . }}">Capabilities that enable a {{ . | title }}</h2>
-        {{ else }}
-            <h2 id="{{ . }}">Capabilities that enable {{ . | title }}</h2>
-        {{ end  }}
-        <section class="capabilitiesGrid">
-            {{ $capabilities := where site.RegularPages "Params.category" . }}
-            {{ range ($capabilities.ByParam "title") }}
-                <article>
-                        <h4><a href="{{ .RelPermalink }}">{{ .Params.title }}</a></h4>
-                        {{ if .Params.core }}
-                            <div class="core"><a href='{{ relref . "/research/"}}'>core</a></div>
-                        {{ end }}
-                        <p>
-                            <a href="{{ .RelPermalink }}">
-                                {{ .Params.headline }}
-                                <span class="learn_more">Learn&nbsp;more&nbsp;<img src="https://www.gstatic.com/images/icons/material/system_gm/svg/arrow_right_alt_24px.svg"></span>
-                            </a>
-                        </p>
-                </article>
+
+<section class="capabilitiesGrid">
+    {{ $capabilities := where .Site.RegularPages "Section" "capabilities" }}
+    {{ range ($capabilities.ByParam "title") }}
+    <article>
+        <h4><a href="{{ .RelPermalink }}">{{ .Params.title }}</a>
+            {{ if .Params.core }}
+                <div class="core"><a href='{{ relref . "/research/"}}#core-model'>core</a></div>
+            {{ end }}
+            {{ if .Params.ai }}
+                <div class="ai"><a href='{{ relref . "/ai/"}}#explore-the-model'>AI</a></div>
             {{ end }}
-        </section>
+        </h4>
+        <p>
+            <a href="{{ .RelPermalink }}">
+                {{ .Params.headline }}
+                <span class="learn_more">Learn&nbsp;more&nbsp;<img
+                        src="https://www.gstatic.com/images/icons/material/system_gm/svg/arrow_right_alt_24px.svg"></span>
+            </a>
+        </p>
+    </article>
     {{ end }}
+</section>
+
 
 {{ end }}

hugo/themes/dora-2025/layouts/capabilities/single.html

@@ -1,12 +1,11 @@
 {{ define "main" }}
 {{- partial "link_styles" "scss/capabilities.scss" -}}
 
-<h4 class="categories"><a href="/capabilities">Capabilities</a>: {{ .Params.category }}</h4>
 <h1 class="tags">
     {{ .Title }}
     <span class="labels">
-        {{ if .Params.core }}<a class="core" href='{{ relref . "/research/" }}'>core</a>{{ end }}
-        {{ if .Params.ai }}<a class="ai" href='{{ relref . "/ai/#explore-the-model" }}'>AI</a>{{ end }}
+        {{ if .Params.core }}<a class="core" href='{{ relref . "/research/" }}#core-model'>core</a>{{ end }}
+        {{ if .Params.ai }}<a class="ai" href='{{ relref . "/ai/" }}#explore-the-model'>AI</a>{{ end }}
     </span>
 </h1>
 {{ if .Params.authors }}
@@ -16,33 +15,10 @@ <h1 class="tags">
     {{ end }}
 </div>
 {{ end }}
-<section class="hasSidebar">
+<section>
     <article>
         {{ .Content }}
     </article>
-    <sidebar>
-        <section>
-            <h4>Capabilities</h4>
-            <h5>Climate for Learning</h5>
-            <ul>
-                {{ range (where (where .Site.RegularPages "Section" .Section) "Params.Category" "climate for learning").ByParam "Title" }}
-                <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
-                {{ end }}
-            </ul>
-            <h5>Fast Flow</h5>
-            <ul>
-                {{ range (where (where .Site.RegularPages "Section" .Section) "Params.Category" "fast flow").ByParam "Title" }}
-                <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
-                {{ end }}
-            </ul>
-            <h5>Fast Feedback</h5>
-            <ul>
-                {{ range (where (where .Site.RegularPages "Section" .Section) "Params.Category" "fast feedback").ByParam "Title" }}
-                <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
-                {{ end }}
-            </ul>
-        </section>
-    </sidebar>
 </section>
 
 {{ if .Params.updated }}

hugo/themes/dora-2025/layouts/partials/capabilities_header.html

@@ -0,0 +1,5 @@
+<div class="section-header capabilities">
+  <div class="content">
+    <a href="/capabilities">Capabilities</a>
+  </div>
+</div>

hugo/themes/dora-2025/layouts/partials/header.html

@@ -69,3 +69,8 @@
 {{ if and (eq .Section "research") (ne .RelPermalink "/research/") }}
 {{- partial "research_header" . -}}
 {{ end }}
+
+<!-- if this is in the "capabilities" section and not the root, show the partial: capabilities_header -->
+{{ if and (eq .Section "capabilities") (ne .RelPermalink "/capabilities/") }}
+{{- partial "capabilities_header" . -}}
+{{ end }}

svelte/core-v2/src/app.css

@@ -1,6 +1,6 @@
 @import url("./assets/_variables.css");
 
-#app {
+#core-model {
     max-width: 1280px;
     margin: 0 auto;
     text-align: center;

svelte/core-v2/src/lib/Popover.svelte

@@ -61,8 +61,11 @@
 
     <p>{@html summary}</p>
     <div class="footer">
-        {#if link}
-            <a href={link} target="_blank">Learn more about {name.toLowerCase()}</a>
+        <!-- TODO: Remove this conditional check. To permanently remove the "Learn more" links for these items, remove the "link" property from the corresponding entries in src/core_data.json -->
+        {#if link && !["Climate for learning", "Fast flow", "Fast feedback"].includes(name)}
+            <a href={link} target="_blank"
+                >Learn more about {name.toLowerCase()}</a
+            >
         {/if}
     </div>
 </div>
@@ -143,13 +146,13 @@
 
         .footer {
             text-align: center;
-            padding: 0 .5rem 1rem .5rem;
+            padding: 0 0.5rem 1rem 0.5rem;
 
             a {
-                border:1px solid var(--color-grey-light);
-                display:inline-block;
-                border-radius: .25rem;
-                padding:.25rem .75rem;
+                border: 1px solid var(--color-grey-light);
+                display: inline-block;
+                border-radius: 0.25rem;
+                padding: 0.25rem 0.75rem;
                 text-decoration: none;
             }
         }

svelte/core-v2/src/main.js

@@ -2,6 +2,6 @@ import { mount } from 'svelte';
 import './app.css'
 import App from './App.svelte'
 
-const app = mount(App, { target: document.getElementById("app") });
+const app = mount(App, { target: document.getElementById("core-model") });
 
 export default app

test/playwright/tests/capabilities/ai-accessible-internal-data.spec.ts

@@ -24,8 +24,4 @@ test.describe("AI-accessible internal data capability", () => {
     await expect(page.locator(".labels")).toContainText("AI");
     await expect(page.locator("h1").getByRole('link', { name: 'AI', exact: true })).toBeVisible();
   });
-
-  test("has the correct categories", async ({ page }) => {
-    await expect(page.locator(".categories")).toContainText("AI");
-  });
 });

test/playwright/tests/capabilities/clear-and-communicated-ai-stance.spec.ts

@@ -24,13 +24,4 @@ test.describe("Clear and communicated AI stance capability", () => {
     await expect(page.locator(".labels")).toContainText("AI");
     await expect(page.locator("h1").getByRole('link', { name: 'AI', exact: true })).toBeVisible();
   });
-
-  test("has the correct categories", async ({ page }) => {
-    const categories = [
-      "AI"
-    ];
-    for (const category of categories) {
-      await expect(page.locator(".categories")).toContainText(category);
-    }
-  });
 });

test/playwright/tests/capabilities/continuous-delivery.spec.ts

@@ -11,9 +11,4 @@ test('Continuous delivery page loads correctly', async ({ page }) => {
 
   // This is a core capability
   await expect(page.getByRole('link', { name: 'core', exact: true })).toBeVisible();
-
-  //Check the sidebar
-  await expect(page.getByRole('heading', { name: 'Climate for Learning', exact: true })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Fast Flow', exact: true })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Fast Feedback', exact: true })).toBeVisible();
 });

test/playwright/tests/capabilities/continuous-integration.spec.ts

@@ -11,9 +11,4 @@ test('Continuous integration page loads correctly', async ({ page }) => {
 
   // This is a core capability
   await expect(page.getByRole('link', { name: 'core', exact: true })).toBeVisible();
-
-  //Check the sidebar
-  await expect(page.getByRole('heading', { name: 'Climate for Learning', exact: true })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Fast Flow', exact: true })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Fast Feedback', exact: true })).toBeVisible();
 });

test/playwright/tests/capabilities/documentation-quality.spec.ts

@@ -32,13 +32,6 @@ test('Documentation quality page contains all expected links', async ({ page })
   }
 });
 
-test('Documentation quality page contains all expected headings', async ({ page }) => {
-  const headings = ['Climate for Learning', 'Fast Flow', 'Fast Feedback'];
-  for (const heading of headings) {
-    await expect(page.getByRole('heading', { name: heading, exact: true })).toBeVisible();
-  }
-});
-
 test('Documentation quality page contains "core" link', async ({ page }) => {
   await expect(page.getByRole('link', { name: 'core', exact: true })).toBeVisible();
 });

test/playwright/tests/capabilities/healthy-data-ecosystems.spec.ts

@@ -14,10 +14,6 @@ test.describe("Healthy data ecosystems capability", () => {
     await expect(page.locator("h1")).toContainText("Healthy data ecosystems");
   });
 
-  test("has the correct categories", async ({ page }) => {
-    await expect(page.locator(".categories")).toContainText("AI");
-  });
-
   test("displays its last updated date", async ({ page }) => {
     await expect(page.locator(".updated")).toContainText(
       LAST_UPDATED_DATE_REGEX,

test/playwright/tests/capabilities/index.spec.ts

@@ -1,15 +1,18 @@
 import { test, expect } from '@playwright/test';
 
 test('Capabilities index page loads correctly', async ({ page }) => {
-await page.goto('/capabilities/');
+  await page.goto('/capabilities/');
 
   // Check for page title
   await expect(page).toHaveTitle('DORA | Capabilities');
 
   // Check for page heading
   await expect(page.locator('h1')).toContainText('Capability catalog');
+});
 
-  await expect(page.getByRole('heading', { name: 'Capabilities that enable a Climate for Learning', exact: true })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Capabilities that enable Fast Flow', exact: true })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Capabilities that enable Fast Feedback', exact: true })).toBeVisible();
-});
+test('Capabilities index page displays AI tag', async ({ page }) => {
+  await page.goto('/capabilities/');
+  const capabilityCard = page.locator('article', { hasText: 'AI-accessible internal data' });
+  await expect(capabilityCard.locator('.ai')).toBeVisible();
+  await expect(capabilityCard.locator('.ai')).toHaveText('AI');
+});

test/playwright/tests/capabilities/job-satisfaction.spec.ts

@@ -15,9 +15,3 @@ test('Job satisfaction page has the correct header.', async ({ page }) => {
 test('Job satisfaction is a core capability.', async ({ page }) => {
   await expect(page.getByRole('link', { name: 'core', exact: true })).toBeVisible();
 });
-
-test('Job satisfaction page displays a sidebar', async ({ page }) => {
-  await expect(page.getByRole('heading', { name: 'Climate for Learning', exact: true })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Fast Flow', exact: true })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Fast Feedback', exact: true })).toBeVisible();
-});

test/playwright/tests/capabilities/loosely-coupled-teams.spec.ts

@@ -15,9 +15,3 @@ test('Loosely coupled teams page has the correct header.', async ({ page }) => {
 test('Loosely coupled teams is a core capability.', async ({ page }) => {
   await expect(page.getByRole('link', { name: 'core', exact: true })).toBeVisible();
 });
-
-test('Loosely coupled teams page displays a sidebar', async ({ page }) => {
-  await expect(page.getByRole('heading', { name: 'Climate for Learning', exact: true })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Fast Flow', exact: true })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Fast Feedback', exact: true })).toBeVisible();
-});