@i-dot-ai-npm/component-library-frontend 0.0.1

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@i-dot-ai-npm/component-library-frontend",
+  "version": "0.0.1",
+  "description": "i.AI GOV.UK design-system override layer (SCSS + JS). Layered on top of govuk-frontend.",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js",
+    "./scss": "./src/index.scss",
+    "./css": "./dist/i-ai-design-system.min.css",
+    "./min.js": "./dist/i-ai-design-system.min.js"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "build": "npm run build:css && npm run build:js",
+    "build:css": "sass --no-source-map --style=compressed src/index.scss dist/i-ai-design-system.min.css",
+    "build:js": "esbuild src/index.js --bundle --minify --format=esm --outfile=dist/i-ai-design-system.min.js"
+  },
+  "peerDependencies": {
+    "govuk-frontend": ">=6"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.0",
+    "sass": "^1.103.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/i-dot-ai/component-library.git",
+    "directory": "packages/frontend"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "license": "MIT"
+}

package/src/components/_button.scss

@@ -0,0 +1,31 @@
+// Button overrides.
+
+.govuk-button--tertiary {
+    background-color: #ffffff;
+    border: 1px solid var(--govuk-border-colour);
+    border-bottom: 3px solid transparent;
+    box-shadow: 0 2px 0 #858686;
+    color: var(--govuk-link-colour);
+}
+
+.govuk-button--tertiary:hover {
+    background-color: #f4f8fb;
+    color: var(--govuk-link-colour);
+}
+
+.govuk-button--small {
+    padding: 6px 8px 4px;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    box-shadow: 0 1px 0 #858686;
+}
+
+.govuk-button-group:has(.govuk-button--small) {
+    margin-bottom: 0;
+    align-items: center;
+}
+
+.govuk-button-group .govuk-button--small {
+    margin-bottom: 0;
+    margin-right: 2px;
+}

package/src/components/_card.scss

@@ -0,0 +1,78 @@
+// Card (i.AI component).
+
+.iai-card-group {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+@media (min-width: 768px) {
+    .iai-card-group {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+.iai-card-group__item {
+    height: 100%;
+}
+
+.iai-card {
+    position: relative;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+    background-color: var(--card-surface, #ffffff);
+    border: var(--card-border-width, 2px) solid var(--card-border, #b1b4b6);
+}
+
+.iai-card__icon {
+    margin-bottom: 15px;
+    color: var(--card-icon, #505a5f);
+}
+
+.iai-card__icon svg {
+    display: block;
+}
+
+.iai-card:hover .iai-card__icon {
+    color: var(--card-text-hover, #ffffff);
+}
+
+.iai-card:hover {
+    background-color: var(--card-surface-hover, #0b0c0c);
+}
+
+.iai-card__heading {
+    margin: 0 0 5px;
+    font-size: 1.1875rem;
+    line-height: 1.3157894737;
+}
+
+.iai-card__link {
+    color: var(--govuk-link-colour, var(--grey-400));
+    text-decoration: underline;
+}
+
+.iai-card__link:after {
+    content: "";
+    position: absolute;
+    inset: 0;
+}
+
+.iai-card__content {
+    margin: 0;
+    color: var(--govuk-text-colour, #0b0c0c);
+}
+
+.iai-card:hover .iai-card__link,
+.iai-card:hover .iai-card__content {
+    color: var(--card-text-hover, #ffffff) !important;
+}
+
+.iai-card--secondary {
+    padding: 15px 20px;
+    background-color: var(--card-surface-secondary, #f3f2f1);
+    border: none;
+}

package/src/components/_checkboxes.scss

@@ -0,0 +1,6 @@
+// Checkboxes overrides.
+
+.govuk-checkboxes--subtle .govuk-checkboxes__label::before {
+    border: 1px solid #858686;
+    background-color: #fff;
+}

package/src/components/_form-group.scss

@@ -0,0 +1,8 @@
+// Form group overrides.
+
+.govuk-form-group--inline {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+}

package/src/components/_header.scss

@@ -0,0 +1,5 @@
+// Header overrides.
+
+.govuk-generic-header__homepage-link svg {
+    display: inline-block;
+}

package/src/components/_input.scss

@@ -0,0 +1,5 @@
+// Text input overrides.
+
+.govuk-input--subtle {
+    border: 1px solid #858686;
+}

package/src/components/_link.scss

@@ -0,0 +1,22 @@
+// Link overrides.
+
+.govuk-link--warning {
+    color: #ca3535 !important;
+}
+
+.govuk-link:focus {
+    color: var(--govuk-link-colour);
+    outline: 3px solid transparent;
+    background-color: transparent;
+    box-shadow: none;
+    text-decoration: none;
+}
+
+.govuk-link:focus-visible {
+    outline: 3px solid transparent;
+    background-color: var(--govuk-focus-colour, #fd0);
+    box-shadow:
+        0 -2px var(--govuk-focus-colour, #fd0),
+        0 4px var(--govuk-focus-text-colour, #0b0c0c);
+    text-decoration: none;
+}

package/src/components/_radios.scss

@@ -0,0 +1,45 @@
+// Radios overrides, including the i.AI card-style radios variant.
+
+.govuk-radios__item {
+    align-content: flex-start;
+}
+
+.govuk-radios--cards {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+@media (width > 48rem) {
+    .govuk-radios--cards {
+        flex-direction: row;
+        gap: 0.5rem;
+    }
+}
+
+.govuk-radios--cards .govuk-radios__item {
+    border: 2px solid transparent;
+    background-color: var(--govuk-surface-background-colour);
+    flex: 1;
+    box-shadow:
+        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-shadow:
+        0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
+        0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+}
+
+.govuk-radios--cards .govuk-radios__item:has(.govuk-radios__input:checked) {
+    border-color: var(--govuk-brand-colour);
+    background-color: #d2e2f1;
+}
+
+.govuk-radios--cards .govuk-radios__input:checked + .govuk-radios__label:after {
+    right: 22px;
+    left: auto;
+}
+
+.govuk-radios--cards .govuk-radios__label::before {
+    right: 15px;
+    left: auto;
+}

package/src/components/_select.scss

@@ -0,0 +1,6 @@
+// Select overrides.
+
+.govuk-select--subtle {
+    border: 1px solid #858686;
+    min-width: 0;
+}

package/src/components/_table.scss

@@ -0,0 +1,21 @@
+// Table overrides.
+
+.govuk-table--subtle {
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+.govuk-table--subtle .govuk-table__header {
+    font-size: 1rem;
+    color: #484949;
+    border-color: #484949;
+}
+
+.govuk-table--subtle .govuk-table__cell {
+    padding: 0;
+    vertical-align: middle;
+}
+
+.govuk-table__row:hover {
+    background-color: #f2f2f2;
+}

package/src/components/_textarea.scss

@@ -0,0 +1,5 @@
+// Textarea overrides.
+
+.govuk-textarea--subtle {
+    border: 1px solid #858686;
+}

package/src/components/_toggle.scss

@@ -0,0 +1,222 @@
+// Toggle
+//
+// Authored as a self-contained control (no dependency on the GOV.UK checkbox
+// classes). The developer writes only:
+//
+//   <div class="iai-toggle__item" data-module="govuk-toggle">
+//     <input class="iai-toggle__input" type="checkbox" id="toggle">
+//     <label class="iai-toggle__label" for="toggle">Toggle label</label>
+//   </div>
+//
+// Progressive enhancement:
+//   - No JS: the control renders as a GOV.UK-style checkbox (box + tick),
+//     drawn here in CSS. Fully functional native checkbox.
+//   - JS (body.govuk-frontend-supported): toggle.js injects the decorative
+//     track (.iai-toggle__display) and the checkmark/cross icons, and the
+//     rules below switch the control into a sliding toggle.
+
+// Item: lays out the control and its label on one line.
+.iai-toggle__item {
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+}
+
+.iai-toggle__item:last-child {
+    margin-bottom: 0;
+}
+
+// Label: mirrors GOV.UK checkbox label styling.
+.iai-toggle__label {
+    align-self: center;
+    margin-bottom: 0;
+    padding: 7px 15px;
+    cursor: pointer;
+    touch-action: manipulation;
+}
+
+// No-JS control wrapper: a 40px square that holds the checkbox box + tick.
+.iai-toggle {
+    display: inline-block;
+    position: relative;
+    width: 40px;
+    height: 40px;
+    flex: 0 0 auto;
+    cursor: pointer;
+}
+
+// Empty check box (GOV.UK: 40px square, 2px current-colour border).
+.iai-toggle::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 40px;
+    height: 40px;
+    border: 2px solid currentcolor;
+    background: transparent;
+}
+
+// Check mark (GOV.UK: rotated corner shape), hidden until checked.
+.iai-toggle::after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 11px;
+    left: 8px;
+    width: 23px;
+    height: 12px;
+    transform: rotate(-45deg);
+    border: solid;
+    border-width: 0 0 5px 5px;
+    border-top-color: transparent;
+    opacity: 0;
+    background: transparent;
+}
+
+// The real checkbox: an invisible overlay filling the wrapper, so the whole
+// box is clickable and it stays focusable/tabbable.
+.iai-toggle__input {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+}
+
+// Reveal the check mark when the input is checked.
+.iai-toggle:has(.iai-toggle__input:checked)::after {
+    opacity: 1;
+}
+
+// Focus ring on the box when the input is focused.
+.iai-toggle:has(.iai-toggle__input:focus)::before {
+    border-width: 4px;
+    outline: 3px solid transparent;
+    outline-offset: 1px;
+    box-shadow: 0 0 0 3px #ffdd00;
+}
+
+// Disabled.
+.iai-toggle:has(.iai-toggle__input:disabled) {
+    cursor: not-allowed;
+}
+
+.iai-toggle__item:has(.iai-toggle__input:disabled) .iai-toggle__label {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+// The decorative track is not rendered until JS injects it.
+.iai-toggle__display {
+    display: none;
+}
+
+// ------------------------------------------------------------------ *
+// JS enhanced: turn the wrapper into the sliding toggle track.        *
+// ------------------------------------------------------------------ *
+
+.govuk-frontend-supported .iai-toggle {
+    display: inline-flex;
+    width: auto;
+    height: auto;
+}
+
+// Hide the no-JS checkbox box + tick.
+.govuk-frontend-supported .iai-toggle::before,
+.govuk-frontend-supported .iai-toggle::after {
+    content: none;
+}
+
+// Show the track.
+.govuk-frontend-supported .iai-toggle__display {
+    display: inline-block;
+}
+
+// Track (pill).
+.iai-toggle__display {
+    box-sizing: content-box;
+    position: relative;
+    width: 44px;
+    height: 24px;
+    border-radius: 100px;
+    background-color: #505a5f;
+    color: #fff;
+    transition: 150ms;
+    cursor: pointer;
+    // Decorative: let clicks fall through to the overlaid real input.
+    pointer-events: none;
+}
+
+// Handle (sliding circle).
+.iai-toggle__handle {
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 0;
+    width: 22px;
+    height: 22px;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    border-radius: 50%;
+    background-color: #fff;
+    transform: translateY(-50%);
+    transition: inherit;
+}
+
+// Checked: green track, handle slides right.
+.iai-toggle__input:checked ~ .iai-toggle__display {
+    background-color: #00703c;
+}
+
+.iai-toggle__input:checked ~ .iai-toggle__display .iai-toggle__handle {
+    left: 22px;
+}
+
+// Focus ring on the track.
+.iai-toggle__input:focus-visible ~ .iai-toggle__display {
+    outline: 3px solid transparent;
+    outline-offset: 0;
+    box-shadow: 0 0 0 4px #ffdd00;
+}
+
+// Disabled track.
+.iai-toggle__input:disabled ~ .iai-toggle__display {
+    background-color: #b1b4b6;
+    border-color: #6f7276;
+    cursor: not-allowed;
+}
+
+// Icons sit at the two handle rest positions.
+.iai-toggle__icon {
+    position: absolute;
+    top: 50%;
+    width: 12px;
+    height: 12px;
+    transform: translate(-50%, -50%);
+    color: inherit;
+    fill: currentcolor;
+}
+
+.iai-toggle__icon--checkmark {
+    left: 14px;
+}
+
+.iai-toggle__icon--cross {
+    left: 32px;
+    width: 10px;
+    height: 10px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .iai-toggle__display,
+    .iai-toggle__handle {
+        transition-duration: 0ms;
+    }
+}

package/src/index.js

@@ -0,0 +1,12 @@
+// i.AI Design System — behaviour layer.
+//
+// Progressive enhancement for i.AI components. Call after govuk-frontend's
+// initAll(). Each component's enhancement lives in its own module.
+
+import { initToggles } from './scripts/toggle.js';
+
+export { initToggles };
+
+export function initAllIAIDesignSystem() {
+  initToggles();
+}

package/src/index.scss

@@ -0,0 +1,19 @@
+// i.AI Design System — override layer for govuk-frontend.
+//
+// Load AFTER govuk-frontend's base styles. This layer only adjusts and adds
+// to GOV.UK components; it has no base layout or typography of its own.
+//
+// Each component (GOV.UK override or i.AI-new) lives in its own module.
+
+@forward "components/button";
+@forward "components/link";
+@forward "components/radios";
+@forward "components/select";
+@forward "components/input";
+@forward "components/textarea";
+@forward "components/checkboxes";
+@forward "components/table";
+@forward "components/form-group";
+@forward "components/header";
+@forward "components/toggle";
+@forward "components/card";

package/src/scripts/toggle.js

@@ -0,0 +1,68 @@
+/*
+ * Toggle enhancement module.
+ *
+ * Progressive enhancement for elements marked with
+ * data-module="govuk-toggle". Without this script the control renders as a
+ * plain, fully-functional checkbox (styled by the toggle styles). With it, the
+ * checkbox is upgraded into a sliding toggle:
+ *
+ *   - the input gains role="switch"
+ *   - the input is wrapped in a .iai-toggle control
+ *   - a decorative .iai-toggle__display track (handle + icons) is injected
+ *
+ * The enhanced appearance itself is gated in CSS on the
+ * body.govuk-frontend-supported class (added by the page template), so this
+ * script only builds the DOM the CSS needs.
+ */
+
+const CHECKMARK_SVG = '<svg aria-hidden="true" focusable="false" class="iai-toggle__icon iai-toggle__icon--checkmark" width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z" fill="currentcolor" stroke="currentcolor"></path></svg>';
+
+const CROSS_SVG = '<svg aria-hidden="true" focusable="false" class="iai-toggle__icon iai-toggle__icon--cross" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z" fill="currentcolor"></path></svg>';
+
+/**
+ * Enhance a single toggle item.
+ * @param {Element} item - element with data-module="govuk-toggle"
+ */
+function enhanceToggle(item) {
+  if (item.dataset.toggleInitialised === 'true') {
+    return;
+  }
+
+  const input = item.querySelector('.iai-toggle__input');
+  if (!input) {
+    return;
+  }
+
+  // Announce as a switch to assistive tech only once the visual switch exists.
+  input.setAttribute('role', 'switch');
+
+  /*
+   * If the input is already inside a control wrapper, reuse it; otherwise
+   * wrap it so the CSS has a .iai-toggle to key off.
+   */
+  let control = input.closest('.iai-toggle');
+  if (!control) {
+    control = document.createElement('div');
+    control.className = 'iai-toggle';
+    input.parentNode.insertBefore(control, input);
+    control.appendChild(input);
+  }
+
+  // Inject the decorative track (handle + icons) if not already present.
+  if (!control.querySelector('.iai-toggle__display')) {
+    const display = document.createElement('span');
+    display.className = 'iai-toggle__display';
+    display.setAttribute('aria-hidden', 'true');
+    display.innerHTML = `<span class="iai-toggle__handle"></span>${CHECKMARK_SVG}${CROSS_SVG}`;
+    control.appendChild(display);
+  }
+
+  item.dataset.toggleInitialised = 'true';
+}
+
+/** Enhance all toggles on the page. */
+export function initToggles() {
+  document
+    .querySelectorAll('[data-module="govuk-toggle"]')
+    .forEach(enhanceToggle);
+}