feat: update components to align with brand color from govuk-frontend v6

Author: CyrilAdelekan

assets/uml-diagram.svg

@@ -24,9 +24,10 @@
     "storybook": "storybook dev -p 6006 --debug-webpack",
     "build-storybook": "storybook build --debug-webpack",
     "test-storybook": "test-storybook",
-    "lint": "eslint 'src/**/*.ts*' && stylelint 'src/**/*.{css,scss,less}'",
-    "lint-fix": "eslint --fix 'src/**/*.ts*' && stylelint --fix 'src/**/*.{css,scss,less}' ",
+    "format:check": "prettier --ignore-path .gitignore --check '**/*.+(js|mjs|ts|tsx|json|css|scss|html|md)'",
+    "lint": "eslint 'src/**/*.ts*' && npm run format:check && stylelint 'src/**/*.{css,scss,less}'",
     "format": "prettier --ignore-path .gitignore --write '**/*.+(js|mjs|ts|tsx|json|css|scss|html|md)'",
+    "lint-fix": "eslint --fix 'src/**/*.ts*' && npm run format && stylelint --fix 'src/**/*.{css,scss,less}' ",
     "prepare": "husky",
     "release": "standard-version",
     "uml": "tsuml2 --glob './src/**/\\!(*.spec|*.test|TestUtilities|JestSetup).[t]s?(x)' -o './assets/uml-diagram.svg'",
@@ -58,7 +59,7 @@
     "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@chromatic-com/storybook": "^5.0.1",
+    "@chromatic-com/storybook": "^5.0.2",
     "@commitlint/cli": "^20.5.0",
     "@commitlint/config-conventional": "^20.5.0",
     "@eslint/js": "^9.37.0",
@@ -171,4 +172,4 @@
   "dependencies": {
     "ts-dedent": "^2.2.0"
   }
-}
+}

bundle-analysis-main.html

@@ -15,9 +15,12 @@ let configured = false;
 const meta: Meta<typeof Accordion> = {
   title: "GOVUK Design System/Accordion",
   component: Accordion,
-  decorators: [(Story, { parameters }) => {
+  decorators: [
+    (Story, { parameters }) => {
       React.useEffect(() => {
-        const isDocsMode = window.location.search.includes("path=/docs/govuk-design-system-accordion--docs");
+        const isDocsMode = window.location.search.includes(
+          "path=/docs/govuk-design-system-accordion--docs",
+        );
         if (isDocsMode && !configured && parameters.initializeConfigurations) {
           ConfigureOverallAccordion();
           configured = true;
@@ -26,7 +29,8 @@ const meta: Meta<typeof Accordion> = {
         }
       }, []);
       return <Story />;
-    }],
+    },
+  ],
   tags: ["autodocs"],
 };
 
@@ -35,7 +39,8 @@ type Story = StoryObj<typeof Accordion>;
 
 // extractShownFixtures transforms raw govuk-frontend fixture data into
 // React-compatible props (e.g. text → children, classes → className).
-const examplesFromFixtures: Array<ComponentFixture> = extractShownFixtures(fixtures);
+const examplesFromFixtures: Array<ComponentFixture> =
+  extractShownFixtures(fixtures);
 
 export const Default: Story = {
   name: "default",
@@ -44,15 +49,27 @@ export const Default: Story = {
 
 export const WithAdditionalDescriptions: Story = {
   name: "with additional descriptions",
-  args: { ...examplesFromFixtures.find((f) => f.name === "with additional descriptions")?.options },
+  args: {
+    ...examplesFromFixtures.find(
+      (f) => f.name === "with additional descriptions",
+    )?.options,
+  },
 };
 
 export const WithLongContentAndDescription: Story = {
   name: "with long content and description",
-  args: { ...examplesFromFixtures.find((f) => f.name === "with long content and description")?.options },
+  args: {
+    ...examplesFromFixtures.find(
+      (f) => f.name === "with long content and description",
+    )?.options,
+  },
 };
 
 export const WithAllSectionsAlreadyOpen: Story = {
   name: "with all sections already open",
-  args: { ...examplesFromFixtures.find((f) => f.name === "with all sections already open")?.options },
-};
+  args: {
+    ...examplesFromFixtures.find(
+      (f) => f.name === "with all sections already open",
+    )?.options,
+  },
+};

bundle-analysis-pdfvc.html

@@ -12,9 +12,11 @@ import { ComponentFixture } from "../../dynamics";
 const meta: Meta<typeof BackLink> = {
   title: "GOVUK Design System/Back link",
   component: BackLink,
-  decorators: [(Story) => {
+  decorators: [
+    (Story) => {
       return <Story />;
-    }],
+    },
+  ],
   tags: ["autodocs"],
 };
 
@@ -23,7 +25,8 @@ type Story = StoryObj<typeof BackLink>;
 
 // extractShownFixtures transforms raw govuk-frontend fixture data into
 // React-compatible props (e.g. text → children, classes → className).
-const examplesFromFixtures: Array<ComponentFixture> = extractShownFixtures(fixtures);
+const examplesFromFixtures: Array<ComponentFixture> =
+  extractShownFixtures(fixtures);
 
 export const Default: Story = {
   name: "default",
@@ -33,4 +36,4 @@ export const Default: Story = {
 export const Inverse: Story = {
   name: "inverse",
   args: { ...examplesFromFixtures.find((f) => f.name === "inverse")?.options },
-};
+};

package-lock.json

@@ -12,9 +12,11 @@ import { ComponentFixture } from "../../dynamics";
 const meta: Meta<typeof Breadcrumbs> = {
   title: "GOVUK Design System/Breadcrumbs",
   component: Breadcrumbs,
-  decorators: [(Story) => {
+  decorators: [
+    (Story) => {
       return <Story />;
-    }],
+    },
+  ],
   tags: ["autodocs"],
 };
 
@@ -23,7 +25,8 @@ type Story = StoryObj<typeof Breadcrumbs>;
 
 // extractShownFixtures transforms raw govuk-frontend fixture data into
 // React-compatible props (e.g. text → children, classes → className).
-const examplesFromFixtures: Array<ComponentFixture> = extractShownFixtures(fixtures);
+const examplesFromFixtures: Array<ComponentFixture> =
+  extractShownFixtures(fixtures);
 
 export const Default: Story = {
   name: "default",
@@ -32,25 +35,37 @@ export const Default: Story = {
 
 export const WithOneLevel: Story = {
   name: "with one level",
-  args: { ...examplesFromFixtures.find((f) => f.name === "with one level")?.options },
+  args: {
+    ...examplesFromFixtures.find((f) => f.name === "with one level")?.options,
+  },
 };
 
 export const WithoutTheHomeSection: Story = {
   name: "without the home section",
-  args: { ...examplesFromFixtures.find((f) => f.name === "without the home section")?.options },
+  args: {
+    ...examplesFromFixtures.find((f) => f.name === "without the home section")
+      ?.options,
+  },
 };
 
 export const WithLastBreadcrumbAsCurrentPage: Story = {
   name: "with last breadcrumb as current page",
-  args: { ...examplesFromFixtures.find((f) => f.name === "with last breadcrumb as current page")?.options },
+  args: {
+    ...examplesFromFixtures.find(
+      (f) => f.name === "with last breadcrumb as current page",
+    )?.options,
+  },
 };
 
 export const WithCollapseOnMobile: Story = {
   name: "with collapse on mobile",
-  args: { ...examplesFromFixtures.find((f) => f.name === "with collapse on mobile")?.options },
+  args: {
+    ...examplesFromFixtures.find((f) => f.name === "with collapse on mobile")
+      ?.options,
+  },
 };
 
 export const Inverse: Story = {
   name: "inverse",
   args: { ...examplesFromFixtures.find((f) => f.name === "inverse")?.options },
-};
+};

package.json

@@ -15,9 +15,12 @@ let configured = false;
 const meta: Meta<typeof Button> = {
   title: "GOVUK Design System/Button",
   component: Button,
-  decorators: [(Story, { parameters }) => {
+  decorators: [
+    (Story, { parameters }) => {
       React.useEffect(() => {
-        const isDocsMode = window.location.search.includes("path=/docs/govuk-design-system-button--docs");
+        const isDocsMode = window.location.search.includes(
+          "path=/docs/govuk-design-system-button--docs",
+        );
         if (isDocsMode && !configured && parameters.initializeConfigurations) {
           ConfigureOverallButton();
           configured = true;
@@ -26,7 +29,8 @@ const meta: Meta<typeof Button> = {
         }
       }, []);
       return <Story />;
-    }],
+    },
+  ],
   tags: ["autodocs"],
 };
 
@@ -35,7 +39,8 @@ type Story = StoryObj<typeof Button>;
 
 // extractShownFixtures transforms raw govuk-frontend fixture data into
 // React-compatible props (e.g. text → children, classes → className).
-const examplesFromFixtures: Array<ComponentFixture> = extractShownFixtures(fixtures);
+const examplesFromFixtures: Array<ComponentFixture> =
+  extractShownFixtures(fixtures);
 
 export const Default: Story = {
   name: "default",
@@ -59,7 +64,9 @@ export const Start: Story = {
 
 export const Secondary: Story = {
   name: "secondary",
-  args: { ...examplesFromFixtures.find((f) => f.name === "secondary")?.options },
+  args: {
+    ...examplesFromFixtures.find((f) => f.name === "secondary")?.options,
+  },
 };
 
 export const Warning: Story = {
@@ -70,4 +77,4 @@ export const Warning: Story = {
 export const Inverse: Story = {
   name: "inverse",
   args: { ...examplesFromFixtures.find((f) => f.name === "inverse")?.options },
-};
+};

src/components/Accordion/Accordion.stories.tsx

@@ -1,28 +1,49 @@
 // src/components/CardColumn/CardColumn.scss
+//  --
+// Colours use CSS custom properties with govuk-frontend helper fallbacks.
+//  --
+// The --card-text-color and --card-hover-color custom properties are set
+// inline on the <Card> element when the textColor / hoverColor props are
+// passed. When they are absent, var() falls back to the govuk-frontend
+// functional colour / palette helpers so the govuk theme remains the default.
+//  --
+// govuk-functional-colour() tokens (design-system.service.gov.uk/styles/colour/):
+//   "brand"       → #1d70b8  — GOV.UK brand blue
+//   "link"        → #1a65a6  — standard link colour
+//   "link-hover"  → #0f385c  — link hover colour
+//   "focus"       → #ffdd00  — focus/active highlight
+//   "focus-text"  → #0b0c0c  — text on focus yellow background
+//  --
+// govuk-colour() palette values:
+//   govuk-colour("black")  → #0b0c0c  — header bar background
+//   govuk-colour("white")  → #ffffff
+
+@use "~govuk-frontend/dist/govuk/helpers/colour" as *;
 @use "~bootstrap/scss/bootstrap";
 
 .card-link {
-  color: #1d70b8;
-}
+  color: var(--card-text-color, #{govuk-functional-colour("link")});
 
-.card-link :hover {
-  color: #003078;
-  border-color: #fd0;
+  &:hover {
+    color: var(--card-hover-color, #{govuk-functional-colour("link-hover")});
+    border-color: govuk-functional-colour("focus");
+  }
 }
 
 .card-header {
   padding-bottom: 65px;
-  color: #005ea5;
+  color: var(--card-text-color, #{govuk-functional-colour("brand")});
+  transition-duration: 0.3s;
 
   &:hover {
-    color: #f8f8f8;
-    background-color: #005ea5;
-    transition-duration: 0.3s;
+    color: govuk-colour("white");
+    background-color: var(--card-hover-color, #{govuk-colour("black")});
   }
 
   &:active {
-    background-color: gold;
-    border-bottom: #000 groove;
+    color: govuk-functional-colour("focus-text");
+    background-color: govuk-functional-colour("focus");
+    border-bottom: govuk-functional-colour("focus-text") groove;
     transition: ease-in-out;
   }
 }