@i-dot-ai-npm/component-library-frontend 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/i-ai-design-system.min.css +1 -1
- package/dist/i-ai-design-system.min.js +1 -1
- package/package.json +3 -2
- package/src/components/_app-masthead.scss +5 -0
- package/src/components/_button.scss +10 -8
- package/src/components/_card.scss +11 -9
- package/src/components/_checkboxes.scss +4 -4
- package/src/components/_contents-panel.scss +47 -0
- package/src/components/_input.scss +3 -1
- package/src/components/_link.scss +7 -5
- package/src/components/_select.scss +3 -1
- package/src/components/_table.scss +5 -3
- package/src/components/_textarea.scss +3 -1
- package/src/components/_toggle.scss +55 -169
- package/src/index.js +1 -5
- package/src/index.scss +2 -2
- package/src/components/_radios.scss +0 -45
- package/src/scripts/toggle.js +0 -68
- package/src/utils/_mixins.scss +0 -16
|
@@ -1 +1 @@
|
|
|
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
|
|
1
|
+
.app-masthead{background-color:#d2e2f1}.govuk-button.govuk-button--tertiary{background-color:#fff;border:1px solid var(--govuk-border-colour, #cecece);border-bottom:3px solid rgba(0,0,0,0);box-shadow:0 2px 0 #858686;color:var(--govuk-link-colour, #1a65a6)}.govuk-button.govuk-button--tertiary:hover{background-color:#f4f8fb;color:var(--govuk-link-colour, #1a65a6)}.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:var(--govuk-error-colour, #ca3535) !important}.govuk-link:focus{color:var(--govuk-link-colour, #1a65a6);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, #ffdd00);box-shadow:0 -2px var(--govuk-focus-colour, #ffdd00),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-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;line-height:1.25}@media print{.govuk-table--subtle .govuk-table__header{font-size:14pt;line-height:1.2}}.govuk-table--subtle .govuk-table__header{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;align-items:center;gap:8px;margin-bottom:10px}.iai-toggle__item:last-child{margin-bottom:0}.iai-toggle__input{box-sizing:content-box;position:relative;flex:0 0 auto;width:46px;height:24px;margin:0;appearance:none;-webkit-appearance:none;background:none;cursor:pointer}.iai-toggle__input::before{content:"";box-sizing:border-box;position:absolute;top:0;left:0;width:46px;height:24px;border-radius:100px;background-color:#484949;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'%3E%3Cpath d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='white' stroke='white'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath 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='white'/%3E%3C/svg%3E");background-repeat:no-repeat,no-repeat;background-position:8px center,30px center;background-size:12px 12px,10px 10px;transition:150ms}.iai-toggle__input::after{content:"";box-sizing:border-box;position:absolute;top:50%;left:1px;width:22px;height:22px;border:1px solid rgba(0,0,0,.25);border-radius:50%;background-color:#fff;transform:translateY(-50%);transition:150ms}.iai-toggle__input:checked::before{background-color:var(--govuk-success-colour, #0f7a52)}.iai-toggle__input:checked::after{left:23px}.iai-toggle__input:focus-visible::before{outline:3px solid rgba(0,0,0,0);outline-offset:0;box-shadow:0 0 0 4px var(--govuk-focus-colour, #ffdd00)}.iai-toggle__label{align-self:center;margin-bottom:0;padding:7px 0;cursor:pointer;touch-action:manipulation}.iai-toggle__input:disabled{cursor:not-allowed}.iai-toggle__input:disabled::before{background-color:#cecece}.iai-toggle__item:has(.iai-toggle__input:disabled) .iai-toggle__label{opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion: reduce){.iai-toggle__input::before,.iai-toggle__input::after{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:#fff;border:2px solid #cecece}.iai-card__icon{margin-bottom:15px;color:#484949}.iai-card__icon svg{display:block}.iai-card:hover .iai-card__icon{color:#fff}.iai-card:hover{background-color:#0b0c0c}.iai-card__heading{margin:0 0 5px;font-size:1.1875rem;line-height:1.3157894737}.iai-card__link{color:var(--govuk-link-colour, #1a65a6);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:#fff !important}.iai-card--secondary{padding:15px 20px;background-color:#f3f3f3;border:none}.contents-panel{padding-right:15px;font-family:"GDS Transport",arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */@font-face{font-family:"GDS Transport";font-style:normal;font-weight:normal;font-display:fallback;src:url("/assets/fonts/light-94a07e06a1-v2.woff2") format("woff2"),url("/assets/fonts/light-f591b13f7d-v2.woff") format("woff")}@font-face{font-family:"GDS Transport";font-style:normal;font-weight:bold;font-display:fallback;src:url("/assets/fonts/bold-b542beb274-v2.woff2") format("woff2"),url("/assets/fonts/bold-affa96571d-v2.woff") format("woff")}@media print{.contents-panel{font-family:sans-serif}}.contents-panel{font-weight:400;font-size:1rem;line-height:1.25}@media print{.contents-panel{font-size:14pt;line-height:1.2}}.contents-panel__list-heading{font-size:1.1875rem;line-height:1.3157894737}@media print{.contents-panel__list-heading{font-size:14pt;line-height:1.15}}.contents-panel__list-heading{font-weight:400;margin:0;padding:10px 15px 10px 0;color:#484949}.contents-panel__list-heading:first-of-type{padding-top:0}.contents-panel__list{margin:0 0 20px;padding:0;list-style-type:none}.contents-panel__list-item{margin-bottom:5px;padding-top:5px;padding-bottom:5px}.contents-panel__link{padding:2px 0}.contents-panel__list-item--current{margin-left:-14px;padding-left:10px;border-left:4px solid #1d70b8;background-color:#fff}.contents-panel__list-item--current .contents-panel__link[aria-current=page]{font-weight:700}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
function i(){}export{i as initAllIAIDesignSystem};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@i-dot-ai-npm/component-library-frontend",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "i.AI GOV.UK design-system override layer (SCSS + JS). Layered on top of govuk-frontend.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
],
|
|
16
16
|
"scripts": {
|
|
17
17
|
"build": "npm run build:css && npm run build:js",
|
|
18
|
-
"build:css": "sass --no-source-map --style=compressed src/index.scss dist/i-ai-design-system.min.css",
|
|
18
|
+
"build:css": "sass --no-source-map --style=compressed --pkg-importer=node src/index.scss dist/i-ai-design-system.min.css",
|
|
19
19
|
"build:js": "esbuild src/index.js --bundle --minify --format=esm --outfile=dist/i-ai-design-system.min.js"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"esbuild": "^0.25.0",
|
|
26
|
+
"govuk-frontend": "^6.5.0",
|
|
26
27
|
"sass": "^1.103.0"
|
|
27
28
|
},
|
|
28
29
|
"repository": {
|
|
@@ -1,23 +1,25 @@
|
|
|
1
|
+
@use "pkg:govuk-frontend/base" as *;
|
|
2
|
+
|
|
1
3
|
// Button overrides.
|
|
2
4
|
|
|
3
5
|
.govuk-button.govuk-button--tertiary {
|
|
4
|
-
background-color:
|
|
5
|
-
border: 1px solid
|
|
6
|
+
background-color: govuk-colour("white");
|
|
7
|
+
border: 1px solid govuk-functional-colour("border");
|
|
6
8
|
border-bottom: 3px solid transparent;
|
|
7
|
-
box-shadow: 0 2px 0
|
|
8
|
-
color:
|
|
9
|
+
box-shadow: 0 2px 0 govuk-colour("black", $variant: "tint-50");
|
|
10
|
+
color: govuk-functional-colour("link");
|
|
9
11
|
}
|
|
10
12
|
|
|
11
13
|
.govuk-button.govuk-button--tertiary:hover {
|
|
12
|
-
background-color:
|
|
13
|
-
color:
|
|
14
|
+
background-color: govuk-colour("blue", $variant: "tint-95");
|
|
15
|
+
color: govuk-functional-colour("link");
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
.govuk-button.govuk-button--small {
|
|
17
19
|
padding: 6px 8px 4px;
|
|
18
20
|
font-size: 0.875rem;
|
|
19
21
|
line-height: 1.25rem;
|
|
20
|
-
box-shadow: 0 1px 0
|
|
22
|
+
box-shadow: 0 1px 0 govuk-colour("black", $variant: "tint-50");
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
.govuk-button-group:has(.govuk-button--small) {
|
|
@@ -35,4 +37,4 @@
|
|
|
35
37
|
.govuk-button-group {
|
|
36
38
|
flex-wrap: nowrap;
|
|
37
39
|
}
|
|
38
|
-
}
|
|
40
|
+
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use "pkg:govuk-frontend/base" as *;
|
|
2
|
+
|
|
1
3
|
// Card (i.AI component).
|
|
2
4
|
|
|
3
5
|
.iai-card-group {
|
|
@@ -23,13 +25,13 @@
|
|
|
23
25
|
height: 100%;
|
|
24
26
|
box-sizing: border-box;
|
|
25
27
|
padding: 20px;
|
|
26
|
-
background-color:
|
|
27
|
-
border:
|
|
28
|
+
background-color: govuk-colour("white");
|
|
29
|
+
border: 2px solid govuk-colour("black", $variant: "tint-80");
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
.iai-card__icon {
|
|
31
33
|
margin-bottom: 15px;
|
|
32
|
-
color:
|
|
34
|
+
color: govuk-colour("black", $variant: "tint-25");
|
|
33
35
|
}
|
|
34
36
|
|
|
35
37
|
.iai-card__icon svg {
|
|
@@ -37,11 +39,11 @@
|
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
.iai-card:hover .iai-card__icon {
|
|
40
|
-
color:
|
|
42
|
+
color: govuk-colour("white");
|
|
41
43
|
}
|
|
42
44
|
|
|
43
45
|
.iai-card:hover {
|
|
44
|
-
background-color:
|
|
46
|
+
background-color: govuk-colour("black");
|
|
45
47
|
}
|
|
46
48
|
|
|
47
49
|
.iai-card__heading {
|
|
@@ -51,7 +53,7 @@
|
|
|
51
53
|
}
|
|
52
54
|
|
|
53
55
|
.iai-card__link {
|
|
54
|
-
color:
|
|
56
|
+
color: govuk-functional-colour("link");
|
|
55
57
|
text-decoration: underline;
|
|
56
58
|
}
|
|
57
59
|
|
|
@@ -63,16 +65,16 @@
|
|
|
63
65
|
|
|
64
66
|
.iai-card__content {
|
|
65
67
|
margin: 0;
|
|
66
|
-
color:
|
|
68
|
+
color: govuk-functional-colour("text");
|
|
67
69
|
}
|
|
68
70
|
|
|
69
71
|
.iai-card:hover .iai-card__link,
|
|
70
72
|
.iai-card:hover .iai-card__content {
|
|
71
|
-
color:
|
|
73
|
+
color: govuk-colour("white") !important;
|
|
72
74
|
}
|
|
73
75
|
|
|
74
76
|
.iai-card--secondary {
|
|
75
77
|
padding: 15px 20px;
|
|
76
|
-
background-color:
|
|
78
|
+
background-color: govuk-colour("black", $variant: "tint-95");
|
|
77
79
|
border: none;
|
|
78
80
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
@use "pkg:govuk-frontend/base" as *;
|
|
2
2
|
|
|
3
3
|
.govuk-checkboxes--subtle .govuk-checkboxes__label::before {
|
|
4
|
-
border: 1px solid
|
|
5
|
-
background-color:
|
|
4
|
+
border: 1px solid govuk-colour("black", $variant: "tint-50");
|
|
5
|
+
background-color: govuk-colour("white");
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
// table summary pattern
|
|
@@ -10,4 +10,4 @@
|
|
|
10
10
|
.govuk-checkboxes__label {
|
|
11
11
|
padding: 0;
|
|
12
12
|
}
|
|
13
|
-
}
|
|
13
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
@use "pkg:govuk-frontend/base" as *;
|
|
2
|
+
|
|
3
|
+
.contents-panel {
|
|
4
|
+
padding-right: govuk-spacing(3);
|
|
5
|
+
@include govuk-font(16);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.contents-panel__list-heading {
|
|
9
|
+
@include govuk-font-size($size: 19);
|
|
10
|
+
@include govuk-typography-weight-regular;
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: govuk-spacing(2) govuk-spacing(3) govuk-spacing(2) 0;
|
|
13
|
+
color: govuk-colour("black", $variant: "tint-25");
|
|
14
|
+
|
|
15
|
+
&:first-of-type {
|
|
16
|
+
padding-top: 0;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.contents-panel__list {
|
|
21
|
+
margin: 0 0 govuk-spacing(4);
|
|
22
|
+
padding: 0;
|
|
23
|
+
list-style-type: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.contents-panel__list-item {
|
|
27
|
+
margin-bottom: govuk-spacing(1);
|
|
28
|
+
padding-top: govuk-spacing(1);
|
|
29
|
+
padding-bottom: govuk-spacing(1);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.contents-panel__link {
|
|
33
|
+
padding: 2px 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.contents-panel__list-item--current {
|
|
37
|
+
$_current-indicator-width: 4px;
|
|
38
|
+
|
|
39
|
+
margin-left: -(govuk-spacing(2) + $_current-indicator-width);
|
|
40
|
+
padding-left: govuk-spacing(2);
|
|
41
|
+
border-left: $_current-indicator-width solid govuk-colour("blue");
|
|
42
|
+
background-color: govuk-colour("white");
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.contents-panel__list-item--current .contents-panel__link[aria-current="page"] {
|
|
46
|
+
@include govuk-typography-weight-bold;
|
|
47
|
+
}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
+
@use "pkg:govuk-frontend/base" as *;
|
|
2
|
+
|
|
1
3
|
// Link overrides.
|
|
2
4
|
|
|
3
5
|
.govuk-link--warning {
|
|
4
|
-
color:
|
|
6
|
+
color: govuk-functional-colour("error") !important;
|
|
5
7
|
}
|
|
6
8
|
|
|
7
9
|
.govuk-link:focus {
|
|
8
|
-
color:
|
|
10
|
+
color: govuk-functional-colour("link");
|
|
9
11
|
outline: 3px solid transparent;
|
|
10
12
|
background-color: transparent;
|
|
11
13
|
box-shadow: none;
|
|
@@ -14,10 +16,10 @@
|
|
|
14
16
|
|
|
15
17
|
.govuk-link:focus-visible {
|
|
16
18
|
outline: 3px solid transparent;
|
|
17
|
-
background-color:
|
|
19
|
+
background-color: $govuk-focus-colour;
|
|
18
20
|
box-shadow:
|
|
19
|
-
0 -2px
|
|
20
|
-
0 4px
|
|
21
|
+
0 -2px $govuk-focus-colour,
|
|
22
|
+
0 4px $govuk-focus-text-colour;
|
|
21
23
|
text-decoration: none;
|
|
22
24
|
}
|
|
23
25
|
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
@use "pkg:govuk-frontend/base" as *;
|
|
2
|
+
|
|
1
3
|
// Table overrides.
|
|
2
4
|
.govuk-table--subtle .govuk-table__header {
|
|
3
|
-
font-size
|
|
4
|
-
color:
|
|
5
|
+
@include govuk-font-size(16);
|
|
6
|
+
color: govuk-colour("black", $variant: "tint-25");
|
|
5
7
|
}
|
|
6
8
|
|
|
7
9
|
.govuk-table__cell--stretch {
|
|
@@ -21,4 +23,4 @@
|
|
|
21
23
|
.govuk-table__cell {
|
|
22
24
|
vertical-align: middle;
|
|
23
25
|
}
|
|
24
|
-
}
|
|
26
|
+
}
|
|
@@ -1,26 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
// Progressive enhancement:
|
|
12
|
-
// - No JS: the control renders as a GOV.UK-style checkbox (box + tick),
|
|
13
|
-
// drawn here in CSS. Fully functional native checkbox.
|
|
14
|
-
// - JS (body.govuk-frontend-supported): toggle.js injects the decorative
|
|
15
|
-
// track (.iai-toggle__display) and the checkmark/cross icons, and the
|
|
16
|
-
// rules below switch the control into a sliding toggle.
|
|
1
|
+
@use "pkg:govuk-frontend/base" as *;
|
|
2
|
+
|
|
3
|
+
$iai-toggle-track-width: 46px;
|
|
4
|
+
$iai-toggle-track-height: 24px;
|
|
5
|
+
$iai-toggle-handle-size: 22px;
|
|
6
|
+
$iai-toggle-handle-inset: 1px;
|
|
7
|
+
$iai-toggle-track-gap: 8px;
|
|
8
|
+
|
|
9
|
+
$iai-toggle-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'%3E%3Cpath d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='white' stroke='white'/%3E%3C/svg%3E");
|
|
10
|
+
$iai-toggle-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath 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='white'/%3E%3C/svg%3E");
|
|
17
11
|
|
|
18
|
-
// Item: lays out the control and its label on one line.
|
|
19
12
|
.iai-toggle__item {
|
|
20
13
|
display: flex;
|
|
21
|
-
position: relative;
|
|
22
14
|
align-items: center;
|
|
23
|
-
gap:
|
|
15
|
+
gap: $iai-toggle-track-gap;
|
|
24
16
|
margin-bottom: 10px;
|
|
25
17
|
}
|
|
26
18
|
|
|
@@ -28,195 +20,89 @@
|
|
|
28
20
|
margin-bottom: 0;
|
|
29
21
|
}
|
|
30
22
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
align-self: center;
|
|
34
|
-
margin-bottom: 0;
|
|
35
|
-
padding: 7px 15px;
|
|
36
|
-
cursor: pointer;
|
|
37
|
-
touch-action: manipulation;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
// No-JS control wrapper: a 40px square that holds the checkbox box + tick.
|
|
41
|
-
.iai-toggle {
|
|
42
|
-
display: inline-block;
|
|
23
|
+
.iai-toggle__input {
|
|
24
|
+
box-sizing: content-box;
|
|
43
25
|
position: relative;
|
|
44
|
-
width: 40px;
|
|
45
|
-
height: 40px;
|
|
46
26
|
flex: 0 0 auto;
|
|
27
|
+
width: $iai-toggle-track-width;
|
|
28
|
+
height: $iai-toggle-track-height;
|
|
29
|
+
margin: 0;
|
|
30
|
+
appearance: none;
|
|
31
|
+
-webkit-appearance: none;
|
|
32
|
+
background: none;
|
|
47
33
|
cursor: pointer;
|
|
48
34
|
}
|
|
49
35
|
|
|
50
|
-
|
|
51
|
-
.iai-toggle::before {
|
|
36
|
+
.iai-toggle__input::before {
|
|
52
37
|
content: "";
|
|
53
38
|
box-sizing: border-box;
|
|
54
39
|
position: absolute;
|
|
55
40
|
top: 0;
|
|
56
41
|
left: 0;
|
|
57
|
-
width:
|
|
58
|
-
height:
|
|
59
|
-
border: 2px solid currentcolor;
|
|
60
|
-
background: transparent;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
// Check mark (GOV.UK: rotated corner shape), hidden until checked.
|
|
64
|
-
.iai-toggle::after {
|
|
65
|
-
content: "";
|
|
66
|
-
box-sizing: border-box;
|
|
67
|
-
position: absolute;
|
|
68
|
-
top: 11px;
|
|
69
|
-
left: 8px;
|
|
70
|
-
width: 23px;
|
|
71
|
-
height: 12px;
|
|
72
|
-
transform: rotate(-45deg);
|
|
73
|
-
border: solid;
|
|
74
|
-
border-width: 0 0 5px 5px;
|
|
75
|
-
border-top-color: transparent;
|
|
76
|
-
opacity: 0;
|
|
77
|
-
background: transparent;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
// The real checkbox: an invisible overlay filling the wrapper, so the whole
|
|
81
|
-
// box is clickable and it stays focusable/tabbable.
|
|
82
|
-
.iai-toggle__input {
|
|
83
|
-
position: absolute;
|
|
84
|
-
inset: 0;
|
|
85
|
-
z-index: 3;
|
|
86
|
-
width: 100%;
|
|
87
|
-
height: 100%;
|
|
88
|
-
margin: 0;
|
|
89
|
-
opacity: 0;
|
|
90
|
-
cursor: pointer;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
// Reveal the check mark when the input is checked.
|
|
94
|
-
.iai-toggle:has(.iai-toggle__input:checked)::after {
|
|
95
|
-
opacity: 1;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
// Focus ring on the box when the input is focused.
|
|
99
|
-
.iai-toggle:has(.iai-toggle__input:focus)::before {
|
|
100
|
-
border-width: 4px;
|
|
101
|
-
outline: 3px solid transparent;
|
|
102
|
-
outline-offset: 1px;
|
|
103
|
-
box-shadow: 0 0 0 3px #ffdd00;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
// Disabled.
|
|
107
|
-
.iai-toggle:has(.iai-toggle__input:disabled) {
|
|
108
|
-
cursor: not-allowed;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.iai-toggle__item:has(.iai-toggle__input:disabled) .iai-toggle__label {
|
|
112
|
-
opacity: 0.5;
|
|
113
|
-
cursor: not-allowed;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
// The decorative track is not rendered until JS injects it.
|
|
117
|
-
.iai-toggle__display {
|
|
118
|
-
display: none;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
// ------------------------------------------------------------------ *
|
|
122
|
-
// JS enhanced: turn the wrapper into the sliding toggle track. *
|
|
123
|
-
// ------------------------------------------------------------------ *
|
|
124
|
-
|
|
125
|
-
.govuk-frontend-supported .iai-toggle {
|
|
126
|
-
display: inline-flex;
|
|
127
|
-
width: auto;
|
|
128
|
-
height: auto;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
// Hide the no-JS checkbox box + tick.
|
|
132
|
-
.govuk-frontend-supported .iai-toggle::before,
|
|
133
|
-
.govuk-frontend-supported .iai-toggle::after {
|
|
134
|
-
content: none;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
// Show the track.
|
|
138
|
-
.govuk-frontend-supported .iai-toggle__display {
|
|
139
|
-
display: inline-block;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
// Track (pill).
|
|
143
|
-
.iai-toggle__display {
|
|
144
|
-
box-sizing: content-box;
|
|
145
|
-
position: relative;
|
|
146
|
-
width: 44px;
|
|
147
|
-
height: 24px;
|
|
42
|
+
width: $iai-toggle-track-width;
|
|
43
|
+
height: $iai-toggle-track-height;
|
|
148
44
|
border-radius: 100px;
|
|
149
|
-
background-color:
|
|
150
|
-
|
|
45
|
+
background-color: govuk-colour("black", $variant: "tint-25");
|
|
46
|
+
background-image: $iai-toggle-checkmark, $iai-toggle-cross;
|
|
47
|
+
background-repeat: no-repeat, no-repeat;
|
|
48
|
+
background-position: 8px center, 30px center;
|
|
49
|
+
background-size: 12px 12px, 10px 10px;
|
|
151
50
|
transition: 150ms;
|
|
152
|
-
cursor: pointer;
|
|
153
|
-
// Decorative: let clicks fall through to the overlaid real input.
|
|
154
|
-
pointer-events: none;
|
|
155
51
|
}
|
|
156
52
|
|
|
157
|
-
|
|
158
|
-
|
|
53
|
+
.iai-toggle__input::after {
|
|
54
|
+
content: "";
|
|
159
55
|
box-sizing: border-box;
|
|
160
56
|
position: absolute;
|
|
161
|
-
z-index: 2;
|
|
162
57
|
top: 50%;
|
|
163
|
-
left:
|
|
164
|
-
width:
|
|
165
|
-
height:
|
|
58
|
+
left: $iai-toggle-handle-inset;
|
|
59
|
+
width: $iai-toggle-handle-size;
|
|
60
|
+
height: $iai-toggle-handle-size;
|
|
166
61
|
border: 1px solid rgba(0, 0, 0, 0.25);
|
|
167
62
|
border-radius: 50%;
|
|
168
|
-
background-color:
|
|
63
|
+
background-color: govuk-colour("white");
|
|
169
64
|
transform: translateY(-50%);
|
|
170
|
-
transition:
|
|
65
|
+
transition: 150ms;
|
|
171
66
|
}
|
|
172
67
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
background-color: #00703c;
|
|
68
|
+
.iai-toggle__input:checked::before {
|
|
69
|
+
background-color: govuk-functional-colour("success");
|
|
176
70
|
}
|
|
177
71
|
|
|
178
|
-
.iai-toggle__input:checked
|
|
179
|
-
left:
|
|
72
|
+
.iai-toggle__input:checked::after {
|
|
73
|
+
left: $iai-toggle-track-width - $iai-toggle-handle-size - $iai-toggle-handle-inset;
|
|
180
74
|
}
|
|
181
75
|
|
|
182
|
-
|
|
183
|
-
.iai-toggle__input:focus-visible ~ .iai-toggle__display {
|
|
76
|
+
.iai-toggle__input:focus-visible::before {
|
|
184
77
|
outline: 3px solid transparent;
|
|
185
78
|
outline-offset: 0;
|
|
186
|
-
box-shadow: 0 0 0 4px
|
|
79
|
+
box-shadow: 0 0 0 4px $govuk-focus-colour;
|
|
187
80
|
}
|
|
188
81
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
cursor:
|
|
82
|
+
.iai-toggle__label {
|
|
83
|
+
align-self: center;
|
|
84
|
+
margin-bottom: 0;
|
|
85
|
+
padding: 7px 0;
|
|
86
|
+
cursor: pointer;
|
|
87
|
+
touch-action: manipulation;
|
|
194
88
|
}
|
|
195
89
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
position: absolute;
|
|
199
|
-
top: 50%;
|
|
200
|
-
width: 12px;
|
|
201
|
-
height: 12px;
|
|
202
|
-
transform: translate(-50%, -50%);
|
|
203
|
-
color: inherit;
|
|
204
|
-
fill: currentcolor;
|
|
90
|
+
.iai-toggle__input:disabled {
|
|
91
|
+
cursor: not-allowed;
|
|
205
92
|
}
|
|
206
93
|
|
|
207
|
-
.iai-
|
|
208
|
-
|
|
94
|
+
.iai-toggle__input:disabled::before {
|
|
95
|
+
background-color: govuk-colour("black", $variant: "tint-80");
|
|
209
96
|
}
|
|
210
97
|
|
|
211
|
-
.iai-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
height: 10px;
|
|
98
|
+
.iai-toggle__item:has(.iai-toggle__input:disabled) .iai-toggle__label {
|
|
99
|
+
opacity: 0.5;
|
|
100
|
+
cursor: not-allowed;
|
|
215
101
|
}
|
|
216
102
|
|
|
217
103
|
@media (prefers-reduced-motion: reduce) {
|
|
218
|
-
.iai-
|
|
219
|
-
.iai-
|
|
104
|
+
.iai-toggle__input::before,
|
|
105
|
+
.iai-toggle__input::after {
|
|
220
106
|
transition-duration: 0ms;
|
|
221
107
|
}
|
|
222
108
|
}
|
package/src/index.js
CHANGED
|
@@ -3,10 +3,6 @@
|
|
|
3
3
|
// Progressive enhancement for i.AI components. Call after govuk-frontend's
|
|
4
4
|
// initAll(). Each component's enhancement lives in its own module.
|
|
5
5
|
|
|
6
|
-
import { initToggles } from './scripts/toggle.js';
|
|
7
|
-
|
|
8
|
-
export { initToggles };
|
|
9
|
-
|
|
10
6
|
export function initAllIAIDesignSystem() {
|
|
11
|
-
|
|
7
|
+
// No component enhancements yet.
|
|
12
8
|
}
|
package/src/index.scss
CHANGED
|
@@ -4,10 +4,9 @@
|
|
|
4
4
|
// to GOV.UK components; it has no base layout or typography of its own.
|
|
5
5
|
//
|
|
6
6
|
// Each component (GOV.UK override or i.AI-new) lives in its own module.
|
|
7
|
-
|
|
7
|
+
@forward "components/app-masthead";
|
|
8
8
|
@forward "components/button";
|
|
9
9
|
@forward "components/link";
|
|
10
|
-
@forward "components/radios";
|
|
11
10
|
@forward "components/select";
|
|
12
11
|
@forward "components/input";
|
|
13
12
|
@forward "components/textarea";
|
|
@@ -17,3 +16,4 @@
|
|
|
17
16
|
@forward "components/header";
|
|
18
17
|
@forward "components/toggle";
|
|
19
18
|
@forward "components/card";
|
|
19
|
+
@forward "components/contents-panel";
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
// Radios overrides, including the i.AI card-style radios variant.
|
|
2
|
-
|
|
3
|
-
.govuk-radios__item {
|
|
4
|
-
align-content: flex-start;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.govuk-radios--cards {
|
|
8
|
-
align-items: stretch;
|
|
9
|
-
flex-direction: column;
|
|
10
|
-
gap: 1rem;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@media (width > 48rem) {
|
|
14
|
-
.govuk-radios--cards {
|
|
15
|
-
flex-direction: row;
|
|
16
|
-
gap: 0.5rem;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.govuk-radios--cards .govuk-radios__item {
|
|
21
|
-
border: 2px solid transparent;
|
|
22
|
-
background-color: var(--govuk-surface-background-colour);
|
|
23
|
-
flex: 1;
|
|
24
|
-
box-shadow:
|
|
25
|
-
var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
|
|
26
|
-
var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
27
|
-
--tw-shadow:
|
|
28
|
-
0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
|
|
29
|
-
0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.govuk-radios--cards .govuk-radios__item:has(.govuk-radios__input:checked) {
|
|
33
|
-
border-color: var(--govuk-brand-colour);
|
|
34
|
-
background-color: #d2e2f1;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.govuk-radios--cards .govuk-radios__input:checked + .govuk-radios__label:after {
|
|
38
|
-
right: 22px;
|
|
39
|
-
left: auto;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.govuk-radios--cards .govuk-radios__label::before {
|
|
43
|
-
right: 15px;
|
|
44
|
-
left: auto;
|
|
45
|
-
}
|
package/src/scripts/toggle.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Toggle enhancement module.
|
|
3
|
-
*
|
|
4
|
-
* Progressive enhancement for elements marked with
|
|
5
|
-
* data-module="govuk-toggle". Without this script the control renders as a
|
|
6
|
-
* plain, fully-functional checkbox (styled by the toggle styles). With it, the
|
|
7
|
-
* checkbox is upgraded into a sliding toggle:
|
|
8
|
-
*
|
|
9
|
-
* - the input gains role="switch"
|
|
10
|
-
* - the input is wrapped in a .iai-toggle control
|
|
11
|
-
* - a decorative .iai-toggle__display track (handle + icons) is injected
|
|
12
|
-
*
|
|
13
|
-
* The enhanced appearance itself is gated in CSS on the
|
|
14
|
-
* body.govuk-frontend-supported class (added by the page template), so this
|
|
15
|
-
* script only builds the DOM the CSS needs.
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
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>';
|
|
19
|
-
|
|
20
|
-
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>';
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* Enhance a single toggle item.
|
|
24
|
-
* @param {Element} item - element with data-module="govuk-toggle"
|
|
25
|
-
*/
|
|
26
|
-
function enhanceToggle(item) {
|
|
27
|
-
if (item.dataset.toggleInitialised === 'true') {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
const input = item.querySelector('.iai-toggle__input');
|
|
32
|
-
if (!input) {
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
// Announce as a switch to assistive tech only once the visual switch exists.
|
|
37
|
-
input.setAttribute('role', 'switch');
|
|
38
|
-
|
|
39
|
-
/*
|
|
40
|
-
* If the input is already inside a control wrapper, reuse it; otherwise
|
|
41
|
-
* wrap it so the CSS has a .iai-toggle to key off.
|
|
42
|
-
*/
|
|
43
|
-
let control = input.closest('.iai-toggle');
|
|
44
|
-
if (!control) {
|
|
45
|
-
control = document.createElement('div');
|
|
46
|
-
control.className = 'iai-toggle';
|
|
47
|
-
input.parentNode.insertBefore(control, input);
|
|
48
|
-
control.appendChild(input);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
// Inject the decorative track (handle + icons) if not already present.
|
|
52
|
-
if (!control.querySelector('.iai-toggle__display')) {
|
|
53
|
-
const display = document.createElement('span');
|
|
54
|
-
display.className = 'iai-toggle__display';
|
|
55
|
-
display.setAttribute('aria-hidden', 'true');
|
|
56
|
-
display.innerHTML = `<span class="iai-toggle__handle"></span>${CHECKMARK_SVG}${CROSS_SVG}`;
|
|
57
|
-
control.appendChild(display);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
item.dataset.toggleInitialised = 'true';
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
/** Enhance all toggles on the page. */
|
|
64
|
-
export function initToggles() {
|
|
65
|
-
document
|
|
66
|
-
.querySelectorAll('[data-module="govuk-toggle"]')
|
|
67
|
-
.forEach(enhanceToggle);
|
|
68
|
-
}
|
package/src/utils/_mixins.scss
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
@mixin govuk-visually-hidden {
|
|
2
|
-
position: absolute !important;
|
|
3
|
-
width: 1px !important;
|
|
4
|
-
height: 1px !important;
|
|
5
|
-
margin: 0 !important;
|
|
6
|
-
padding: 0 !important;
|
|
7
|
-
overflow: hidden !important;
|
|
8
|
-
clip: rect(0 0 0 0) !important;
|
|
9
|
-
-webkit-clip-path: inset(50%) !important;
|
|
10
|
-
clip-path: inset(50%) !important;
|
|
11
|
-
border: 0 !important;
|
|
12
|
-
white-space: nowrap !important;
|
|
13
|
-
-webkit-user-select: none;
|
|
14
|
-
-ms-user-select: none;
|
|
15
|
-
user-select: none;
|
|
16
|
-
}
|