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

package/dist/i-ai-design-system.min.css

@@ -0,0 +1 @@
+.govuk-button.govuk-button--tertiary{background-color:#fff;border:1px solid var(--govuk-border-colour);border-bottom:3px solid rgba(0,0,0,0);box-shadow:0 2px 0 #858686;color:var(--govuk-link-colour)}.govuk-button.govuk-button--tertiary:hover{background-color:#f4f8fb;color:var(--govuk-link-colour)}.govuk-button.govuk-button--small{padding:6px 8px 4px;font-size:.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}.govuk-table--summary .govuk-button-group{flex-wrap:nowrap}.govuk-link--warning{color:#ca3535 !important}.govuk-link:focus{color:var(--govuk-link-colour);outline:3px solid rgba(0,0,0,0);background-color:rgba(0,0,0,0);box-shadow:none;text-decoration:none}.govuk-link:focus-visible{outline:3px solid rgba(0,0,0,0);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}.govuk-table--summary .govuk-table__cell--stretch .govuk-link{display:inline-block;width:100%}.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:.5rem}}.govuk-radios--cards .govuk-radios__item{border:2px solid rgba(0,0,0,0);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}.govuk-select--subtle{border:1px solid #858686;min-width:0}.govuk-input--subtle{border:1px solid #858686}.govuk-textarea--subtle{border:1px solid #858686}.govuk-checkboxes--subtle .govuk-checkboxes__label::before{border:1px solid #858686;background-color:#fff}.govuk-table--summary .govuk-checkboxes__label{padding:0}.govuk-table--subtle .govuk-table__header{font-size:1rem;color:#484949}.govuk-table__cell--stretch{width:100%}.govuk-table__cell--no-wrap{white-space:nowrap}.govuk-table__cell--small{font-size:.875rem}.govuk-table--summary .govuk-table__cell{vertical-align:middle}.govuk-form-group--inline{display:flex;flex-direction:row;align-items:center;gap:1rem}.govuk-generic-header__homepage-link svg{display:inline-block}.iai-toggle__item{display:flex;position:relative;align-items:center;gap:8px;margin-bottom:10px}.iai-toggle__item:last-child{margin-bottom:0}.iai-toggle__label{align-self:center;margin-bottom:0;padding:7px 15px;cursor:pointer;touch-action:manipulation}.iai-toggle{display:inline-block;position:relative;width:40px;height:40px;flex:0 0 auto;cursor:pointer}.iai-toggle::before{content:"";box-sizing:border-box;position:absolute;top:0;left:0;width:40px;height:40px;border:2px solid currentcolor;background:rgba(0,0,0,0)}.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:rgba(0,0,0,0);opacity:0;background:rgba(0,0,0,0)}.iai-toggle__input{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.iai-toggle:has(.iai-toggle__input:checked)::after{opacity:1}.iai-toggle:has(.iai-toggle__input:focus)::before{border-width:4px;outline:3px solid rgba(0,0,0,0);outline-offset:1px;box-shadow:0 0 0 3px #fd0}.iai-toggle:has(.iai-toggle__input:disabled){cursor:not-allowed}.iai-toggle__item:has(.iai-toggle__input:disabled) .iai-toggle__label{opacity:.5;cursor:not-allowed}.iai-toggle__display{display:none}.govuk-frontend-supported .iai-toggle{display:inline-flex;width:auto;height:auto}.govuk-frontend-supported .iai-toggle::before,.govuk-frontend-supported .iai-toggle::after{content:none}.govuk-frontend-supported .iai-toggle__display{display:inline-block}.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;pointer-events:none}.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,.25);border-radius:50%;background-color:#fff;transform:translateY(-50%);transition:inherit}.iai-toggle__input:checked~.iai-toggle__display{background-color:#00703c}.iai-toggle__input:checked~.iai-toggle__display .iai-toggle__handle{left:22px}.iai-toggle__input:focus-visible~.iai-toggle__display{outline:3px solid rgba(0,0,0,0);outline-offset:0;box-shadow:0 0 0 4px #fd0}.iai-toggle__input:disabled~.iai-toggle__display{background-color:#b1b4b6;border-color:#6f7276;cursor:not-allowed}.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}}.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/dist/i-ai-design-system.min.js

@@ -0,0 +1 @@
+var a='<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>',n='<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>';function s(o){if(o.dataset.toggleInitialised==="true")return;let t=o.querySelector(".iai-toggle__input");if(!t)return;t.setAttribute("role","switch");let e=t.closest(".iai-toggle");if(e||(e=document.createElement("div"),e.className="iai-toggle",t.parentNode.insertBefore(e,t),e.appendChild(t)),!e.querySelector(".iai-toggle__display")){let i=document.createElement("span");i.className="iai-toggle__display",i.setAttribute("aria-hidden","true"),i.innerHTML=`<span class="iai-toggle__handle"></span>${a}${n}`,e.appendChild(i)}o.dataset.toggleInitialised="true"}function l(){document.querySelectorAll('[data-module="govuk-toggle"]').forEach(s)}function c(){l()}export{c as initAllIAIDesignSystem,l as initToggles};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@i-dot-ai-npm/component-library-frontend",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "i.AI GOV.UK design-system override layer (SCSS + JS). Layered on top of govuk-frontend.",
   "type": "module",
   "exports": {
@@ -35,4 +35,4 @@
     "registry": "https://registry.npmjs.org"
   },
   "license": "MIT"
-}
+}

package/src/components/_button.scss

@@ -1,6 +1,6 @@
 // Button overrides.
 
-.govuk-button--tertiary {
+.govuk-button.govuk-button--tertiary {
     background-color: #ffffff;
     border: 1px solid var(--govuk-border-colour);
     border-bottom: 3px solid transparent;
@@ -8,12 +8,12 @@
     color: var(--govuk-link-colour);
 }
 
-.govuk-button--tertiary:hover {
+.govuk-button.govuk-button--tertiary:hover {
     background-color: #f4f8fb;
     color: var(--govuk-link-colour);
 }
 
-.govuk-button--small {
+.govuk-button.govuk-button--small {
     padding: 6px 8px 4px;
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -29,3 +29,10 @@
     margin-bottom: 0;
     margin-right: 2px;
 }
+
+// summary table pattern
+.govuk-table--summary {
+    .govuk-button-group {
+        flex-wrap: nowrap;
+    }
+}

package/src/components/_checkboxes.scss

@@ -1,6 +1,13 @@
-// Checkboxes overrides.
+// @import "../utils/mixins";
 
 .govuk-checkboxes--subtle .govuk-checkboxes__label::before {
     border: 1px solid #858686;
     background-color: #fff;
 }
+
+// table summary pattern
+.govuk-table--summary {
+    .govuk-checkboxes__label {
+        padding: 0;
+    }
+}

package/src/components/_link.scss

@@ -20,3 +20,13 @@
         0 4px var(--govuk-focus-text-colour, #0b0c0c);
     text-decoration: none;
 }
+
+// table summary pattern
+.govuk-table--summary {
+    .govuk-table__cell--stretch {
+        .govuk-link {
+            display: inline-block;
+            width: 100%;
+        }
+    }
+}

package/src/components/_table.scss

@@ -1,21 +1,24 @@
 // 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__cell--stretch {
+    width: 100%;
 }
 
-.govuk-table__row:hover {
-    background-color: #f2f2f2;
+.govuk-table__cell--no-wrap {
+    white-space: nowrap;
 }
+
+.govuk-table__cell--small {
+    font-size: 0.875rem;
+}
+
+// table summary pattern
+.govuk-table--summary {
+    .govuk-table__cell {
+        vertical-align: middle;
+    }
+}

package/src/utils/_mixins.scss

@@ -0,0 +1,16 @@
+@mixin govuk-visually-hidden {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+    border: 0 !important;
+    white-space: nowrap !important;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}