@politiet/sheriff-web-components 1.0.0 → 1.0.2
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/playwright-util/custom-matchers.d.ts +6 -0
- package/dist/playwright-util/custom-matchers.d.ts.map +1 -0
- package/dist/playwright-util/custom-matchers.js +12 -0
- package/dist/playwright-util/custom-matchers.js.map +1 -0
- package/dist/playwright-util/form.d.ts +3 -0
- package/dist/playwright-util/form.d.ts.map +1 -0
- package/dist/playwright-util/form.js +39 -0
- package/dist/playwright-util/form.js.map +1 -0
- package/dist/sds-button/sds-button.spec.d.ts +2 -0
- package/dist/sds-button/sds-button.spec.d.ts.map +1 -0
- package/dist/sds-button/sds-button.spec.js +131 -0
- package/dist/sds-button/sds-button.spec.js.map +1 -0
- package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
- package/dist/sds-button/sds-button.styles.js +1 -0
- package/dist/sds-button/sds-button.styles.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.d.ts +1 -0
- package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.js +15 -1
- package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.spec.d.ts +2 -0
- package/dist/sds-checkbox/sds-checkbox.spec.d.ts.map +1 -0
- package/dist/sds-checkbox/sds-checkbox.spec.js +68 -0
- package/dist/sds-checkbox/sds-checkbox.spec.js.map +1 -0
- package/dist/sds-checkbox/sds-checkbox.styles.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.js +1 -0
- package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
- package/dist/sds-radio/sds-radio.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.js +1 -0
- package/dist/sds-radio/sds-radio.js.map +1 -1
- package/dist/sds-radio/sds-radio.styles.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.styles.js +1 -0
- package/dist/sds-radio/sds-radio.styles.js.map +1 -1
- package/dist/sheriff-web-components.js +18 -1
- package/package.json +2 -2
- package/dist/sds-icon/sds-icon.allowed-colors.d.ts +0 -3
- package/dist/sds-icon/sds-icon.allowed-colors.d.ts.map +0 -1
- package/dist/sds-icon/sds-icon.allowed-colors.js +0 -17
- package/dist/sds-icon/sds-icon.allowed-colors.js.map +0 -1
- package/dist/sds-icon/sds-icon.allowed-names.d.ts +0 -3
- package/dist/sds-icon/sds-icon.allowed-names.d.ts.map +0 -1
- package/dist/sds-icon/sds-icon.allowed-names.js +0 -2
- package/dist/sds-icon/sds-icon.allowed-names.js.map +0 -1
- package/dist/sds-icon/sds-icon.color-types.d.ts +0 -2
- package/dist/sds-icon/sds-icon.color-types.d.ts.map +0 -1
- package/dist/sds-icon/sds-icon.color-types.js +0 -2
- package/dist/sds-icon/sds-icon.color-types.js.map +0 -1
- package/dist/sds-icon/sds-icon.icon-types.d.ts +0 -2
- package/dist/sds-icon/sds-icon.icon-types.d.ts.map +0 -1
- package/dist/sds-icon/sds-icon.icon-types.js +0 -2
- package/dist/sds-icon/sds-icon.icon-types.js.map +0 -1
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ExpectMatcherState, Locator, MatcherReturnType } from '@playwright/test';
|
|
2
|
+
export declare const expect: import("@playwright/test").Expect<{
|
|
3
|
+
isChecked(this: ExpectMatcherState, receiver: Locator): Promise<MatcherReturnType>;
|
|
4
|
+
isNotChecked(this: ExpectMatcherState, receiver: Locator): Promise<MatcherReturnType>;
|
|
5
|
+
}>;
|
|
6
|
+
//# sourceMappingURL=custom-matchers.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"custom-matchers.d.ts","sourceRoot":"","sources":["../../src/playwright-util/custom-matchers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,kBAAkB,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEtG,eAAO,MAAM,MAAM;oBACI,kBAAkB,YAAY,OAAO,GAAG,OAAO,CAAC,iBAAiB,CAAC;uBAI/D,kBAAkB,YAAY,OAAO,GAAG,OAAO,CAAC,iBAAiB,CAAC;EAI1F,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { expect as pwExpect } from '@playwright/test';
|
|
2
|
+
export const expect = pwExpect.extend({
|
|
3
|
+
async isChecked(receiver) {
|
|
4
|
+
expect(await receiver.getAttribute('checked')).toBe('');
|
|
5
|
+
return { message: () => 'Pass', pass: true };
|
|
6
|
+
},
|
|
7
|
+
async isNotChecked(receiver) {
|
|
8
|
+
expect(await receiver.getAttribute('checked')).toBeNull();
|
|
9
|
+
return { message: () => 'Pass', pass: true };
|
|
10
|
+
},
|
|
11
|
+
});
|
|
12
|
+
//# sourceMappingURL=custom-matchers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"custom-matchers.js","sourceRoot":"","sources":["../../src/playwright-util/custom-matchers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAkD,MAAM,kBAAkB,CAAC;AAEtG,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;IACrC,KAAK,CAAC,SAAS,CAA2B,QAAiB;QAC1D,MAAM,CAAC,MAAM,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxD,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC9C,CAAC;IACD,KAAK,CAAC,YAAY,CAA2B,QAAiB;QAC7D,MAAM,CAAC,MAAM,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;QAC1D,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC9C,CAAC;CACD,CAAC,CAAC","sourcesContent":["import { expect as pwExpect, ExpectMatcherState, Locator, MatcherReturnType } from '@playwright/test';\n\nexport const expect = pwExpect.extend({\n\tasync isChecked(this: ExpectMatcherState, receiver: Locator): Promise<MatcherReturnType> {\n\t\texpect(await receiver.getAttribute('checked')).toBe('');\n\t\treturn { message: () => 'Pass', pass: true };\n\t},\n\tasync isNotChecked(this: ExpectMatcherState, receiver: Locator): Promise<MatcherReturnType> {\n\t\texpect(await receiver.getAttribute('checked')).toBeNull();\n\t\treturn { message: () => 'Pass', pass: true };\n\t},\n});\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/playwright-util/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,eAAO,MAAM,oBAAoB,GAChC,MAAM,IAAI,EACV,cAAc,MAAM,EACpB,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,oCA0C7D,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
export const onFormSubmitCallback = async (page, formSelector, callback) => {
|
|
2
|
+
let hasBeenCalled = false;
|
|
3
|
+
// Expose a callback function into the browser's context
|
|
4
|
+
// that can call function in our context, too.
|
|
5
|
+
// Used to receive the form data from the submission callback.
|
|
6
|
+
await page.exposeFunction('callback', async (formDataAsJson) => {
|
|
7
|
+
await callback(JSON.parse(formDataAsJson));
|
|
8
|
+
hasBeenCalled = true;
|
|
9
|
+
});
|
|
10
|
+
await page.waitForTimeout(500);
|
|
11
|
+
// Setup a submit listener on the form found by the formSelector.
|
|
12
|
+
// Note that this runs in a separate browser context, so we cannot pass in
|
|
13
|
+
// non-serializable variables, such as a function reference.
|
|
14
|
+
const result = await page.evaluate((selector) => {
|
|
15
|
+
const form = document.getElementById(selector);
|
|
16
|
+
if (!(form instanceof HTMLFormElement)) {
|
|
17
|
+
return new Error('Form to attach listeners to not found');
|
|
18
|
+
}
|
|
19
|
+
form.addEventListener('submit', async (event) => {
|
|
20
|
+
event.preventDefault();
|
|
21
|
+
const formData = new FormData(form);
|
|
22
|
+
if ('callback' in window && typeof window.callback === 'function') {
|
|
23
|
+
await window.callback(JSON.stringify(Object.fromEntries(formData)));
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
return true;
|
|
27
|
+
}, formSelector);
|
|
28
|
+
if (result instanceof Error) {
|
|
29
|
+
throw result;
|
|
30
|
+
}
|
|
31
|
+
// Playwright handles the timeout and will break the loop when the test suite times out
|
|
32
|
+
return async () => {
|
|
33
|
+
while (!hasBeenCalled) {
|
|
34
|
+
await page.waitForTimeout(100);
|
|
35
|
+
}
|
|
36
|
+
return true;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=form.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/playwright-util/form.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,EACxC,IAAU,EACV,YAAoB,EACpB,QAA6D,EAC5D,EAAE;IACH,IAAI,aAAa,GAAG,KAAK,CAAC;IAC1B,wDAAwD;IACxD,8CAA8C;IAC9C,8DAA8D;IAC9D,MAAM,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,KAAK,EAAE,cAAsB,EAAE,EAAE;QACtE,MAAM,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QAC3C,aAAa,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAE/B,iEAAiE;IACjE,0EAA0E;IAC1E,4DAA4D;IAC5D,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,EAAE;QAC/C,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC/C,IAAI,CAAC,CAAC,IAAI,YAAY,eAAe,CAAC,EAAE,CAAC;YACxC,OAAO,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;QAC3D,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAkB,EAAE,EAAE;YAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;YACpC,IAAI,UAAU,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;gBACnE,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YACrE,CAAC;QACF,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,CAAC;IACb,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,IAAI,MAAM,YAAY,KAAK,EAAE,CAAC;QAC7B,MAAM,MAAM,CAAC;IACd,CAAC;IAED,uFAAuF;IACvF,OAAO,KAAK,IAAI,EAAE;QACjB,OAAO,CAAC,aAAa,EAAE,CAAC;YACvB,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,IAAI,CAAC;IACb,CAAC,CAAC;AACH,CAAC,CAAC","sourcesContent":["import { Page } from '@playwright/test';\n\nexport const onFormSubmitCallback = async (\n\tpage: Page,\n\tformSelector: string,\n\tcallback: (formData: Record<string, string>) => Promise<void>\n) => {\n\tlet hasBeenCalled = false;\n\t// Expose a callback function into the browser's context\n\t// that can call function in our context, too.\n\t// Used to receive the form data from the submission callback.\n\tawait page.exposeFunction('callback', async (formDataAsJson: string) => {\n\t\tawait callback(JSON.parse(formDataAsJson));\n\t\thasBeenCalled = true;\n\t});\n\n\tawait page.waitForTimeout(500);\n\n\t// Setup a submit listener on the form found by the formSelector.\n\t// Note that this runs in a separate browser context, so we cannot pass in\n\t// non-serializable variables, such as a function reference.\n\tconst result = await page.evaluate((selector) => {\n\t\tconst form = document.getElementById(selector);\n\t\tif (!(form instanceof HTMLFormElement)) {\n\t\t\treturn new Error('Form to attach listeners to not found');\n\t\t}\n\t\tform.addEventListener('submit', async (event: SubmitEvent) => {\n\t\t\tevent.preventDefault();\n\t\t\tconst formData = new FormData(form);\n\t\t\tif ('callback' in window && typeof window.callback === 'function') {\n\t\t\t\tawait window.callback(JSON.stringify(Object.fromEntries(formData)));\n\t\t\t}\n\t\t});\n\t\treturn true;\n\t}, formSelector);\n\n\tif (result instanceof Error) {\n\t\tthrow result;\n\t}\n\n\t// Playwright handles the timeout and will break the loop when the test suite times out\n\treturn async () => {\n\t\twhile (!hasBeenCalled) {\n\t\t\tawait page.waitForTimeout(100);\n\t\t}\n\t\treturn true;\n\t};\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-button.spec.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.spec.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { test, expect } from '@playwright/test';
|
|
2
|
+
const primaryButtonIds = [
|
|
3
|
+
// Primary
|
|
4
|
+
'button-primary-large',
|
|
5
|
+
'button-primary-medium',
|
|
6
|
+
'button-primary-small',
|
|
7
|
+
'button-primary-disabled',
|
|
8
|
+
'button-primary-large-icon-before',
|
|
9
|
+
'button-primary-medium-icon-before',
|
|
10
|
+
'button-primary-small-icon-before',
|
|
11
|
+
'button-primary-disabled-icon-before',
|
|
12
|
+
'button-primary-large-icon-after',
|
|
13
|
+
'button-primary-medium-icon-after',
|
|
14
|
+
'button-primary-small-icon-after',
|
|
15
|
+
'button-primary-disabled-icon-after',
|
|
16
|
+
'button-primary-large-icon-only',
|
|
17
|
+
'button-primary-medium-icon-only',
|
|
18
|
+
'button-primary-small-icon-only',
|
|
19
|
+
'button-primary-disabled-icon-only',
|
|
20
|
+
];
|
|
21
|
+
const secondaryButtonIds = [
|
|
22
|
+
// Secondary
|
|
23
|
+
'button-secondary-large',
|
|
24
|
+
'button-secondary-medium',
|
|
25
|
+
'button-secondary-small',
|
|
26
|
+
'button-secondary-disabled',
|
|
27
|
+
'button-secondary-large-icon-before',
|
|
28
|
+
'button-secondary-medium-icon-before',
|
|
29
|
+
'button-secondary-small-icon-before',
|
|
30
|
+
'button-secondary-disabled-icon-before',
|
|
31
|
+
'button-secondary-large-icon-after',
|
|
32
|
+
'button-secondary-medium-icon-after',
|
|
33
|
+
'button-secondary-small-icon-after',
|
|
34
|
+
'button-secondary-disabled-icon-after',
|
|
35
|
+
'button-secondary-large-icon-only',
|
|
36
|
+
'button-secondary-medium-icon-only',
|
|
37
|
+
'button-secondary-small-icon-only',
|
|
38
|
+
'button-secondary-disabled-icon-only',
|
|
39
|
+
];
|
|
40
|
+
const tertiaryButtonIds = [
|
|
41
|
+
// Tertiary
|
|
42
|
+
'button-tertiary-large',
|
|
43
|
+
'button-tertiary-medium',
|
|
44
|
+
'button-tertiary-small',
|
|
45
|
+
'button-tertiary-disabled',
|
|
46
|
+
'button-tertiary-large-icon-before',
|
|
47
|
+
'button-tertiary-medium-icon-before',
|
|
48
|
+
'button-tertiary-small-icon-before',
|
|
49
|
+
'button-tertiary-disabled-icon-before',
|
|
50
|
+
'button-tertiary-large-icon-after',
|
|
51
|
+
'button-tertiary-medium-icon-after',
|
|
52
|
+
'button-tertiary-small-icon-after',
|
|
53
|
+
'button-tertiary-disabled-icon-after',
|
|
54
|
+
'button-tertiary-large-icon-only',
|
|
55
|
+
'button-tertiary-medium-icon-only',
|
|
56
|
+
'button-tertiary-small-icon-only',
|
|
57
|
+
'button-tertiary-disabled-icon-only',
|
|
58
|
+
];
|
|
59
|
+
const criticalButtonIds = [
|
|
60
|
+
// Critical
|
|
61
|
+
'button-critical-large',
|
|
62
|
+
'button-critical-medium',
|
|
63
|
+
'button-critical-small',
|
|
64
|
+
'button-critical-disabled',
|
|
65
|
+
'button-critical-large-icon-before',
|
|
66
|
+
'button-critical-medium-icon-before',
|
|
67
|
+
'button-critical-small-icon-before',
|
|
68
|
+
'button-critical-disabled-icon-before',
|
|
69
|
+
'button-critical-large-icon-after',
|
|
70
|
+
'button-critical-medium-icon-after',
|
|
71
|
+
'button-critical-small-icon-after',
|
|
72
|
+
'button-critical-disabled-icon-after',
|
|
73
|
+
'button-critical-large-icon-only',
|
|
74
|
+
'button-critical-medium-icon-only',
|
|
75
|
+
'button-critical-small-icon-only',
|
|
76
|
+
'button-critical-disabled-icon-only',
|
|
77
|
+
];
|
|
78
|
+
test.describe('button-component', () => {
|
|
79
|
+
test.beforeEach(async ({ page }) => {
|
|
80
|
+
await page.goto('iframe.html?viewMode=docs&id=test-button--docs');
|
|
81
|
+
});
|
|
82
|
+
test('visibility', async ({ page }) => {
|
|
83
|
+
const buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds];
|
|
84
|
+
for (const id of buttonIds) {
|
|
85
|
+
await expect(page.locator(`#${id}`)).toBeVisible();
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
test('design-implementation', async ({ page }) => {
|
|
89
|
+
const buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds];
|
|
90
|
+
await page.reload();
|
|
91
|
+
for (const id of buttonIds) {
|
|
92
|
+
// Default state
|
|
93
|
+
await expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}.png`);
|
|
94
|
+
// Hover state
|
|
95
|
+
page.locator(`#${id}`).hover();
|
|
96
|
+
await expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}-hover.png`);
|
|
97
|
+
// Focus state
|
|
98
|
+
await page.evaluate((id) => {
|
|
99
|
+
const element = document.getElementById(id);
|
|
100
|
+
if (element) {
|
|
101
|
+
const parentDiv = document.createElement('div');
|
|
102
|
+
parentDiv.style.padding = '10px';
|
|
103
|
+
parentDiv.style.backgroundColor = 'white';
|
|
104
|
+
element.parentNode?.insertBefore(parentDiv, element);
|
|
105
|
+
parentDiv.appendChild(element);
|
|
106
|
+
}
|
|
107
|
+
}, id);
|
|
108
|
+
page.locator(`#${id}`).focus();
|
|
109
|
+
const parentDiv = await page.locator(`#${id}`).locator('xpath=..');
|
|
110
|
+
await expect(parentDiv).toHaveScreenshot(`${id}-focus.png`);
|
|
111
|
+
}
|
|
112
|
+
});
|
|
113
|
+
test('form-submission', async ({ page }) => {
|
|
114
|
+
let requestUrl;
|
|
115
|
+
page.on('request', (request) => {
|
|
116
|
+
if (request.url().includes('iframe.html?first-name=John')) {
|
|
117
|
+
requestUrl = new URL(request.url());
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
await page.locator('#first-name').pressSequentially('John');
|
|
121
|
+
await page.locator('#submit-button').click();
|
|
122
|
+
await expect(requestUrl?.searchParams.get('first-name')).toBe('John');
|
|
123
|
+
});
|
|
124
|
+
test('form-reset', async ({ page }) => {
|
|
125
|
+
await page.locator('#first-name').pressSequentially('John');
|
|
126
|
+
await page.locator('#reset-button').click();
|
|
127
|
+
const value = await page.locator('#first-name').getAttribute('value');
|
|
128
|
+
expect(value).toBeNull();
|
|
129
|
+
});
|
|
130
|
+
});
|
|
131
|
+
//# sourceMappingURL=sds-button.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-button.spec.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\n\nconst primaryButtonIds = [\n\t// Primary\n\t'button-primary-large',\n\t'button-primary-medium',\n\t'button-primary-small',\n\t'button-primary-disabled',\n\t'button-primary-large-icon-before',\n\t'button-primary-medium-icon-before',\n\t'button-primary-small-icon-before',\n\t'button-primary-disabled-icon-before',\n\t'button-primary-large-icon-after',\n\t'button-primary-medium-icon-after',\n\t'button-primary-small-icon-after',\n\t'button-primary-disabled-icon-after',\n\t'button-primary-large-icon-only',\n\t'button-primary-medium-icon-only',\n\t'button-primary-small-icon-only',\n\t'button-primary-disabled-icon-only',\n];\nconst secondaryButtonIds = [\n\t// Secondary\n\t'button-secondary-large',\n\t'button-secondary-medium',\n\t'button-secondary-small',\n\t'button-secondary-disabled',\n\t'button-secondary-large-icon-before',\n\t'button-secondary-medium-icon-before',\n\t'button-secondary-small-icon-before',\n\t'button-secondary-disabled-icon-before',\n\t'button-secondary-large-icon-after',\n\t'button-secondary-medium-icon-after',\n\t'button-secondary-small-icon-after',\n\t'button-secondary-disabled-icon-after',\n\t'button-secondary-large-icon-only',\n\t'button-secondary-medium-icon-only',\n\t'button-secondary-small-icon-only',\n\t'button-secondary-disabled-icon-only',\n];\nconst tertiaryButtonIds = [\n\t// Tertiary\n\t'button-tertiary-large',\n\t'button-tertiary-medium',\n\t'button-tertiary-small',\n\t'button-tertiary-disabled',\n\t'button-tertiary-large-icon-before',\n\t'button-tertiary-medium-icon-before',\n\t'button-tertiary-small-icon-before',\n\t'button-tertiary-disabled-icon-before',\n\t'button-tertiary-large-icon-after',\n\t'button-tertiary-medium-icon-after',\n\t'button-tertiary-small-icon-after',\n\t'button-tertiary-disabled-icon-after',\n\t'button-tertiary-large-icon-only',\n\t'button-tertiary-medium-icon-only',\n\t'button-tertiary-small-icon-only',\n\t'button-tertiary-disabled-icon-only',\n];\nconst criticalButtonIds = [\n\t// Critical\n\t'button-critical-large',\n\t'button-critical-medium',\n\t'button-critical-small',\n\t'button-critical-disabled',\n\t'button-critical-large-icon-before',\n\t'button-critical-medium-icon-before',\n\t'button-critical-small-icon-before',\n\t'button-critical-disabled-icon-before',\n\t'button-critical-large-icon-after',\n\t'button-critical-medium-icon-after',\n\t'button-critical-small-icon-after',\n\t'button-critical-disabled-icon-after',\n\t'button-critical-large-icon-only',\n\t'button-critical-medium-icon-only',\n\t'button-critical-small-icon-only',\n\t'button-critical-disabled-icon-only',\n];\n\ntest.describe('button-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-button--docs');\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tconst buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds];\n\n\t\tfor (const id of buttonIds) {\n\t\t\tawait expect(page.locator(`#${id}`)).toBeVisible();\n\t\t}\n\t});\n\n\ttest('design-implementation', async ({ page }) => {\n\t\tconst buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds];\n\t\tawait page.reload();\n\n\t\tfor (const id of buttonIds) {\n\t\t\t// Default state\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}.png`);\n\t\t\t// Hover state\n\t\t\tpage.locator(`#${id}`).hover();\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}-hover.png`);\n\t\t\t// Focus state\n\t\t\tawait page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\tif (element) {\n\t\t\t\t\tconst parentDiv = document.createElement('div');\n\t\t\t\t\tparentDiv.style.padding = '10px';\n\t\t\t\t\tparentDiv.style.backgroundColor = 'white';\n\t\t\t\t\telement.parentNode?.insertBefore(parentDiv, element);\n\t\t\t\t\tparentDiv.appendChild(element);\n\t\t\t\t}\n\t\t\t}, id);\n\t\t\tpage.locator(`#${id}`).focus();\n\t\t\tconst parentDiv = await page.locator(`#${id}`).locator('xpath=..');\n\t\t\tawait expect(parentDiv).toHaveScreenshot(`${id}-focus.png`);\n\t\t}\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tlet requestUrl: URL | undefined;\n\t\tpage.on('request', (request) => {\n\t\t\tif (request.url().includes('iframe.html?first-name=John')) {\n\t\t\t\trequestUrl = new URL(request.url());\n\t\t\t}\n\t\t});\n\n\t\tawait page.locator('#first-name').pressSequentially('John');\n\t\tawait page.locator('#submit-button').click();\n\t\tawait expect(requestUrl?.searchParams.get('first-name')).toBe('John');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#first-name').pressSequentially('John');\n\t\tawait page.locator('#reset-button').click();\n\t\tconst value = await page.locator('#first-name').getAttribute('value');\n\t\texpect(value).toBeNull();\n\t});\n});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkJlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_color-semantic-surface-critical-hover: #b32a23;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3, 8px);\n\t\tjustify-content: center;\n\t\tpadding: var(--sds-spacing-3) var(--sds-spacing-4);\n\t\tinline-size: 100%;\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: var(--sds-radius-4);\n\t\tcursor: pointer;\n\n\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.5;\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.sds-button:focus,\n\t:host(:focus) .give-focus {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\toutline-offset: 1px;\n\t}\n\n\t.sds-button--secondary {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\t\t\tbackground: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--sds-color-semantic-text-action-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid transparent;\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--critical {\n\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\tcolor: var(--sds-color-semantic-text-on-critical);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--_color-semantic-surface-critical-hover);\n\t\t\tborder: 2px solid var(--_color-semantic-surface-critical-hover);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t}\n\t}\n\n\t.sds-button--medium {\n\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t}\n\n\t.sds-button--small {\n\t\tfont-size: 0.875rem;\n\t\tpadding: 0 var(--sds-spacing-3);\n\t}\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMhE,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,qBACa,WAAY,SAAQ,UAAU;IAE1C,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,QAAQ,UAAS;IAE1C,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;
|
|
1
|
+
{"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMhE,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,qBACa,WAAY,SAAQ,UAAU;IAE1C,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,QAAQ,UAAS;IAE1C,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAkBjB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQ/D,iBAAiB;IAUjB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAc5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAQ3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAQ1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAUjE,MAAM;CAgCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}
|
|
@@ -44,6 +44,12 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
44
44
|
composed: true,
|
|
45
45
|
}));
|
|
46
46
|
};
|
|
47
|
+
this._handleClick = (event) => {
|
|
48
|
+
event.stopImmediatePropagation();
|
|
49
|
+
if (event.currentTarget === event.target && !this.disabled) {
|
|
50
|
+
this.shadowRoot?.querySelector('input')?.click();
|
|
51
|
+
}
|
|
52
|
+
};
|
|
47
53
|
this.internals = this.attachInternals();
|
|
48
54
|
this.attachShadow({ mode: 'open', delegatesFocus: true });
|
|
49
55
|
}
|
|
@@ -51,6 +57,14 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
51
57
|
super.connectedCallback();
|
|
52
58
|
this._initialChecked = this.checked;
|
|
53
59
|
this.internals.role = 'checkbox';
|
|
60
|
+
if ('FormDataEvent' in window) {
|
|
61
|
+
this.internals.form?.addEventListener('formdata', (event) => {
|
|
62
|
+
if (this.disabled || !this.name || !this.checked) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
event.formData.set(this.name, this.value ?? 'on');
|
|
66
|
+
});
|
|
67
|
+
}
|
|
54
68
|
if (this.checked) {
|
|
55
69
|
this.internals.setFormValue(this.value ? this.value : '');
|
|
56
70
|
}
|
|
@@ -110,7 +124,7 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
110
124
|
'sds-checkbox__input--error': Boolean(this.error),
|
|
111
125
|
};
|
|
112
126
|
return html `
|
|
113
|
-
<div class="${classMap(checkboxClasses)}">
|
|
127
|
+
<div class="${classMap(checkboxClasses)}" @click="${this._handleClick}">
|
|
114
128
|
<label class="sds-checkbox__label">
|
|
115
129
|
<input
|
|
116
130
|
id="control"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-checkbox.styles';\n\nexport interface SDSCheckboxProps {\n\tname?: string;\n\tlabel?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\terror?: boolean;\n\trequired?: boolean;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonFocus?: (event: CustomEvent<{ checked: boolean }>) => void;\n\tonBlur?: (event: CustomEvent<{ checked: boolean }>) => void;\n}\n\n@customElement('sds-checkbox')\nexport class SDSCheckbox extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\t@property({ type: Boolean, reflect: true }) required = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ? this.value : '');\n\t\t}\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tif (this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tthis._validate();\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tif (this.control) {\n\t\t\tthis.control.checked = this._initialChecked;\n\t\t}\n\t\tconst resetValue = this.checked && this.value ? this.value : '';\n\t\tthis.internals.setFormValue(resetValue);\n\t\tthis._validate();\n\t}\n\n\tprivate _validate() {\n\t\tif (this.required && !this.checked) {\n\t\t\tthis.internals.setValidity({ valueMissing: true }, this.control.validationMessage, this.control);\n\t\t} else {\n\t\t\tthis.internals.setValidity({});\n\t\t}\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tthis.internals.setFormValue(elem.checked ? elem.value : '');\n\t\t\tthis._validate();\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('focus', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('blur', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis._validate();\n\t\t}\n\t}\n\n\toverride render() {\n\t\tconst checkboxClasses = {\n\t\t\t'sds-checkbox': true,\n\t\t\t'sds-checkbox--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-checkbox__input': true,\n\t\t\t'sds-checkbox__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(checkboxClasses)}\">\n\t\t\t\t<label class=\"sds-checkbox__label\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tid=\"control\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t\t/>\n\t\t\t\t\t${this.label ? html`<span class=\"sds-checkbox__text\">${this.label}</span>` : nothing}\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox': SDSCheckbox;\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sds-checkbox.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAgBxC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAoB1C;QACC,KAAK,EAAE,CAAC;QAVmC,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QACjB,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;QAIrD,oBAAe,GAAY,KAAK,CAAC;QAoDxB,kBAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YACjD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpB,MAAM,IAAI,GAAG,KAAK,CAAC,MAA0B,CAAC;gBAC9C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;gBAC5B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;gBAC5D,IAAI,CAAC,SAAS,EAAE,CAAC;gBACjB,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACzB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;QAEe,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,OAAO,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;QAEe,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACpD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,MAAM,EAAE;gBACvB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;QAEe,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,KAAK,CAAC,aAAa,KAAK,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC5D,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;YAClD,CAAC;QACF,CAAC,CAAC;QAzFD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3D,CAAC;IAEQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,UAAU,CAAC;QACjC,IAAI,eAAe,IAAI,MAAM,EAAE,CAAC;YAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,gBAAgB,CAAC,UAAU,EAAE,CAAC,KAAoB,EAAE,EAAE;gBAC1E,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;oBAClD,OAAO;gBACR,CAAC;gBACD,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;YACnD,CAAC,CAAC,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC3D,CAAC;IACF,CAAC;IAEQ,YAAY,CAAC,kBAAkC;QACvD,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,SAAS,EAAE,CAAC;IAClB,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;QAC7C,CAAC;QACD,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QACxC,IAAI,CAAC,SAAS,EAAE,CAAC;IAClB,CAAC;IAEO,SAAS;QAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACpC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAClG,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAChC,CAAC;IACF,CAAC;IA6CQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;IACtE,CAAC;IAEQ,IAAI;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC;IACrE,CAAC;IAEQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;IACtE,CAAC;IAEQ,OAAO,CAAC,iBAAyD;QACzE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACvD,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QACvC,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,SAAS,EAAE,CAAC;QAClB,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,MAAM,eAAe,GAAG;YACvB,cAAc,EAAE,IAAI;YACpB,qBAAqB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;SAC1C,CAAC;QAEF,MAAM,YAAY,GAAG;YACpB,qBAAqB,EAAE,IAAI;YAC3B,4BAA4B,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;SACjD,CAAC;QAEF,OAAO,IAAI,CAAA;iBACI,QAAQ,CAAC,eAAe,CAAC,aAAa,IAAI,CAAC,YAAY;;;;;cAK1D,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;eACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;kBAClB,IAAI,CAAC,OAAO;mBACX,IAAI,CAAC,QAAQ;mBACb,IAAI,CAAC,QAAQ;iBACf,IAAI,CAAC,aAAa;gBACnB,IAAI,CAAC,YAAY;eAClB,IAAI,CAAC,WAAW;eAChB,QAAQ,CAAC,YAAY,CAAC;;OAE9B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,oCAAoC,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO;;;GAGtF,CAAC;IACH,CAAC;;AArKD,UAAU;AACM,kBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAE3B,0BAAc,GAAG,IAAI,AAAP,CAAQ;AAIc;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAe;AACd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAgB;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAgB;AACC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAiB;AAChB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AACd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAE1C;IAAlB,KAAK,CAAC,UAAU,CAAC;4CAA4B;AAhBlC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAuKvB","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-checkbox.styles';\n\nexport interface SDSCheckboxProps {\n\tname?: string;\n\tlabel?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\terror?: boolean;\n\trequired?: boolean;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonFocus?: (event: CustomEvent<{ checked: boolean }>) => void;\n\tonBlur?: (event: CustomEvent<{ checked: boolean }>) => void;\n}\n\n@customElement('sds-checkbox')\nexport class SDSCheckbox extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\t@property({ type: Boolean, reflect: true }) required = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\t\tif ('FormDataEvent' in window) {\n\t\t\tthis.internals.form?.addEventListener('formdata', (event: FormDataEvent) => {\n\t\t\t\tif (this.disabled || !this.name || !this.checked) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tevent.formData.set(this.name, this.value ?? 'on');\n\t\t\t});\n\t\t}\n\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ? this.value : '');\n\t\t}\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tif (this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tthis._validate();\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tif (this.control) {\n\t\t\tthis.control.checked = this._initialChecked;\n\t\t}\n\t\tconst resetValue = this.checked && this.value ? this.value : '';\n\t\tthis.internals.setFormValue(resetValue);\n\t\tthis._validate();\n\t}\n\n\tprivate _validate() {\n\t\tif (this.required && !this.checked) {\n\t\t\tthis.internals.setValidity({ valueMissing: true }, this.control.validationMessage, this.control);\n\t\t} else {\n\t\t\tthis.internals.setValidity({});\n\t\t}\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tthis.internals.setFormValue(elem.checked ? elem.value : '');\n\t\t\tthis._validate();\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('focus', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('blur', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _handleClick = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (event.currentTarget === event.target && !this.disabled) {\n\t\t\tthis.shadowRoot?.querySelector('input')?.click();\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis._validate();\n\t\t}\n\t}\n\n\toverride render() {\n\t\tconst checkboxClasses = {\n\t\t\t'sds-checkbox': true,\n\t\t\t'sds-checkbox--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-checkbox__input': true,\n\t\t\t'sds-checkbox__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(checkboxClasses)}\" @click=\"${this._handleClick}\">\n\t\t\t\t<label class=\"sds-checkbox__label\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tid=\"control\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t\t/>\n\t\t\t\t\t${this.label ? html`<span class=\"sds-checkbox__text\">${this.label}</span>` : nothing}\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox': SDSCheckbox;\n\t}\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-checkbox.spec.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.spec.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { test } from '@playwright/test';
|
|
2
|
+
import { onFormSubmitCallback } from 'src/playwright-util/form';
|
|
3
|
+
import { expect } from '../playwright-util/custom-matchers';
|
|
4
|
+
test.describe('checkbox-component', () => {
|
|
5
|
+
test.beforeEach(async ({ page }) => {
|
|
6
|
+
await page.goto('iframe.html?viewMode=docs&id=test-checkbox--docs');
|
|
7
|
+
});
|
|
8
|
+
test('visibility', async ({ page }) => {
|
|
9
|
+
await expect(page.locator('#with-label')).toBeVisible();
|
|
10
|
+
await expect(page.locator('#unchecked')).toBeVisible();
|
|
11
|
+
await expect(page.locator('#checked')).toBeVisible();
|
|
12
|
+
await expect(page.locator('#custom-value')).toBeVisible();
|
|
13
|
+
await expect(page.locator('#disabled')).toBeVisible();
|
|
14
|
+
await expect(page.locator('#checked-disabled')).toBeVisible();
|
|
15
|
+
});
|
|
16
|
+
test('states', async ({ page }) => {
|
|
17
|
+
const checkboxWithLabel = page.locator('#with-label');
|
|
18
|
+
await expect(checkboxWithLabel).isNotChecked();
|
|
19
|
+
const uncheckedCheckbox = page.locator('#unchecked');
|
|
20
|
+
await expect(uncheckedCheckbox).isNotChecked();
|
|
21
|
+
const checkedCheckbox = page.locator('#checked');
|
|
22
|
+
await expect(checkedCheckbox).isChecked();
|
|
23
|
+
const disabledCheckbox = page.locator('#disabled');
|
|
24
|
+
await expect(disabledCheckbox).toHaveAttribute('disabled', '');
|
|
25
|
+
const checkedDisabledCheckbox = page.locator('#checked-disabled');
|
|
26
|
+
await expect(checkedDisabledCheckbox).isChecked();
|
|
27
|
+
await expect(checkedDisabledCheckbox).toHaveAttribute('disabled', '');
|
|
28
|
+
});
|
|
29
|
+
test('interaction', async ({ page }) => {
|
|
30
|
+
await page.getByLabel('Checkbox with label').click();
|
|
31
|
+
const checkboxWithLabel = page.locator('#with-label');
|
|
32
|
+
await expect(checkboxWithLabel).isChecked();
|
|
33
|
+
const uncheckedCheckbox = page.locator('#unchecked');
|
|
34
|
+
await uncheckedCheckbox.click();
|
|
35
|
+
await expect(uncheckedCheckbox).isChecked();
|
|
36
|
+
const checkedCheckbox = page.locator('#checked');
|
|
37
|
+
await checkedCheckbox.click();
|
|
38
|
+
await expect(checkedCheckbox).isNotChecked();
|
|
39
|
+
const disabledCheckbox = page.locator('#disabled');
|
|
40
|
+
await disabledCheckbox.click();
|
|
41
|
+
await expect(checkedCheckbox).isNotChecked();
|
|
42
|
+
const checkedDisabledCheckbox = page.locator('#checked-disabled');
|
|
43
|
+
await checkedDisabledCheckbox.click();
|
|
44
|
+
await expect(checkedDisabledCheckbox).isChecked();
|
|
45
|
+
});
|
|
46
|
+
test('form-submission', async ({ page }) => {
|
|
47
|
+
const callback = async (formData) => {
|
|
48
|
+
expect(formData).toMatchObject({
|
|
49
|
+
checked: 'on',
|
|
50
|
+
'custom-value': 'custom-value',
|
|
51
|
+
});
|
|
52
|
+
expect(formData).not.toHaveProperty('unchecked');
|
|
53
|
+
expect(formData).not.toHaveProperty('disabled');
|
|
54
|
+
expect(formData).not.toHaveProperty('checked-disabled');
|
|
55
|
+
};
|
|
56
|
+
const hasBeenCalled = await onFormSubmitCallback(page, 'checkbox-form', callback);
|
|
57
|
+
await page.locator('#submit-button').click();
|
|
58
|
+
await expect.poll(async () => await hasBeenCalled(), 'Form submission callback not called').toBeTruthy();
|
|
59
|
+
});
|
|
60
|
+
test('form-reset', async ({ page }) => {
|
|
61
|
+
await page.locator('#unchecked').click();
|
|
62
|
+
await page.locator('#checked').click();
|
|
63
|
+
await page.locator('#reset-button').click();
|
|
64
|
+
await expect(page.locator('#unchecked')).isNotChecked();
|
|
65
|
+
await expect(page.locator('#checked')).isChecked();
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
//# sourceMappingURL=sds-checkbox.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-checkbox.spec.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test } from '@playwright/test';\nimport { onFormSubmitCallback } from 'src/playwright-util/form';\nimport { expect } from '../playwright-util/custom-matchers';\n\ntest.describe('checkbox-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-checkbox--docs');\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tawait expect(page.locator('#with-label')).toBeVisible();\n\t\tawait expect(page.locator('#unchecked')).toBeVisible();\n\t\tawait expect(page.locator('#checked')).toBeVisible();\n\t\tawait expect(page.locator('#custom-value')).toBeVisible();\n\t\tawait expect(page.locator('#disabled')).toBeVisible();\n\t\tawait expect(page.locator('#checked-disabled')).toBeVisible();\n\t});\n\n\ttest('states', async ({ page }) => {\n\t\tconst checkboxWithLabel = page.locator('#with-label');\n\t\tawait expect(checkboxWithLabel).isNotChecked();\n\n\t\tconst uncheckedCheckbox = page.locator('#unchecked');\n\t\tawait expect(uncheckedCheckbox).isNotChecked();\n\n\t\tconst checkedCheckbox = page.locator('#checked');\n\t\tawait expect(checkedCheckbox).isChecked();\n\n\t\tconst disabledCheckbox = page.locator('#disabled');\n\t\tawait expect(disabledCheckbox).toHaveAttribute('disabled', '');\n\n\t\tconst checkedDisabledCheckbox = page.locator('#checked-disabled');\n\t\tawait expect(checkedDisabledCheckbox).isChecked();\n\t\tawait expect(checkedDisabledCheckbox).toHaveAttribute('disabled', '');\n\t});\n\n\ttest('interaction', async ({ page }) => {\n\t\tawait page.getByLabel('Checkbox with label').click();\n\t\tconst checkboxWithLabel = page.locator('#with-label');\n\t\tawait expect(checkboxWithLabel).isChecked();\n\n\t\tconst uncheckedCheckbox = page.locator('#unchecked');\n\t\tawait uncheckedCheckbox.click();\n\t\tawait expect(uncheckedCheckbox).isChecked();\n\n\t\tconst checkedCheckbox = page.locator('#checked');\n\t\tawait checkedCheckbox.click();\n\t\tawait expect(checkedCheckbox).isNotChecked();\n\n\t\tconst disabledCheckbox = page.locator('#disabled');\n\t\tawait disabledCheckbox.click();\n\t\tawait expect(checkedCheckbox).isNotChecked();\n\n\t\tconst checkedDisabledCheckbox = page.locator('#checked-disabled');\n\t\tawait checkedDisabledCheckbox.click();\n\t\tawait expect(checkedDisabledCheckbox).isChecked();\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tconst callback = async (formData: Record<string, string>) => {\n\t\t\texpect(formData).toMatchObject({\n\t\t\t\tchecked: 'on',\n\t\t\t\t'custom-value': 'custom-value',\n\t\t\t});\n\t\t\texpect(formData).not.toHaveProperty('unchecked');\n\t\t\texpect(formData).not.toHaveProperty('disabled');\n\t\t\texpect(formData).not.toHaveProperty('checked-disabled');\n\t\t};\n\t\tconst hasBeenCalled = await onFormSubmitCallback(page, 'checkbox-form', callback);\n\n\t\tawait page.locator('#submit-button').click();\n\t\tawait expect.poll(async () => await hasBeenCalled(), 'Form submission callback not called').toBeTruthy();\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#unchecked').click();\n\t\tawait page.locator('#checked').click();\n\n\t\tawait page.locator('#reset-button').click();\n\n\t\tawait expect(page.locator('#unchecked')).isNotChecked();\n\t\tawait expect(page.locator('#checked')).isChecked();\n\t});\n});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4GlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox__label {\n\t\talign-items: flex-start;\n\t\tcursor: pointer;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay: inline-flex;\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 400;\n\t\tgap: var(--sds-spacing-3);\n\t\tline-height: 1.25;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-checkbox__input {\n\t\tappearance: none;\n\t\tbackground-color: transparent;\n\t\tcolor: currentColor;\n\t\tcursor: pointer;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\taspect-ratio: 1;\n\t\tborder: 1px solid var(--sds-color-semantic-border-default);\n\t\tborder-radius: var(--sds-radius-2);\n\t\tmargin: 0;\n\t\t/*transition:\n\t\t\tbackground-color 0.3s ease,\n\t\t\tbox-shadow 0.3s ease;*/\n\n\t\t&:checked {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-selected);\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-selected);\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 24px;\n\t\t\t\theight: 24px;\n\t\t\t\tbackground-color: white;\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M9.54998 18L3.84998 12.3L5.27498 10.875L9.54998 15.15L18.725 5.97501L20.15 7.40001L9.54998 18Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-1px, -1px);\n\t\t\t\t/*transition:\n\t\t\t\t\tbackground-color 0.3s ease,\n\t\t\t\t\tbox-shadow 0.3s ease;*/\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\tborder-width: 2px;\n\n\t\t\t&:checked {\n\t\t\t\t&::after {\n\t\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\toutline-offset: 2px;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-critical-xtreme);\n\n\t\t\t&:checked {\n\t\t\t\t// TODO: Decide if checked checkbox with error should be fully red\n\t\t\t\t//background-color: var(--sds-color-semantic-border-critical);\n\n\t\t\t\t&::after {\n\t\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\n\t\t\t&:checked {\n\t\t\t\tbackground-color: var(--sds-color-semantic-border-disabled);\n\n\t\t\t\t&::after {\n\t\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& + .sds-checkbox__text {\n\t\t\t\tcolor: var(--sds-color-semantic-border-disabled);\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__text {\n\t\tdisplay: inline-block;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding-top: 2px;\n\t}\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMhE,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC9E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACtC;AAED,qBACa,QAAS,SAAQ,UAAU;IAEvC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAEA,QAAQ,EAAE,OAAO,CAAS;IAC1B,QAAQ,EAAE,OAAO,CAAS;IAC3B,KAAK,EAAE,MAAM,CAAM;IACO,SAAS,EAAE,OAAO,CAAS;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAQ;IACL,OAAO,UAAS;IAChB,KAAK,UAAS;IAEvC,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IASjB,oBAAoB;IAKpB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAK/D,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,sBAAsB;IAyB9B,OAAO,CAAC,QAAQ,CAAC,cAAc,CA4B7B;IAEF,iBAAiB;
|
|
1
|
+
{"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMhE,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC9E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACtC;AAED,qBACa,QAAS,SAAQ,UAAU;IAEvC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAEA,QAAQ,EAAE,OAAO,CAAS;IAC1B,QAAQ,EAAE,OAAO,CAAS;IAC3B,KAAK,EAAE,MAAM,CAAM;IACO,SAAS,EAAE,OAAO,CAAS;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAQ;IACL,OAAO,UAAS;IAChB,KAAK,UAAS;IAEvC,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IASjB,oBAAoB;IAKpB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAK/D,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,sBAAsB;IAyB9B,OAAO,CAAC,QAAQ,CAAC,cAAc,CA4B7B;IAEF,iBAAiB;IAQR,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAiB1E,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAU5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,IAAI,IAAI,2BAEP;IAED,IAAI,IAAI,WAEP;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIxC,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKpC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CAgCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}
|
|
@@ -112,6 +112,7 @@ let SDSRadio = class SDSRadio extends LitElement {
|
|
|
112
112
|
formResetCallback() {
|
|
113
113
|
this.checked = this._initialChecked;
|
|
114
114
|
this.control.checked = this._initialChecked;
|
|
115
|
+
// TODO: "on" skal bare assignes til value dersom radio er avhuket og mangler value. Unchecked radio uten value skal settes til null
|
|
115
116
|
this.internals.setFormValue(this.checked ? this.value ?? 'on' : 'on');
|
|
116
117
|
this._updateGroupValidation();
|
|
117
118
|
}
|