@justeattakeaway/pie-button 0.17.0 → 0.18.0
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/.turbo/turbo-build.log +7 -7
- package/CHANGELOG.md +8 -0
- package/README.md +1 -1
- package/dist/index.js +27 -27
- package/dist/react.js +0 -0
- package/dist/types/index.d.ts +0 -0
- package/dist/types/packages/components/pie-button/src/defs.d.ts +1 -1
- package/dist/types/packages/components/pie-button/src/defs.d.ts.map +1 -1
- package/dist/types/packages/components/pie-button/src/index.d.ts +0 -0
- package/dist/types/packages/components/pie-button/src/index.d.ts.map +1 -1
- package/dist/types/packages/components/pie-button/src/react.d.ts +0 -0
- package/dist/types/packages/components/pie-button/src/react.d.ts.map +0 -0
- package/dist/types/react.d.ts +0 -0
- package/package.json +1 -1
- package/src/button.scss +16 -2
- package/src/defs.ts +1 -1
- package/src/index.ts +5 -5
- package/test/visual/pie-button.spec.ts +2 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
[
|
|
1
|
+
[13:50:20] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
2
|
react wrapper has been added!
|
|
3
3
|
[36mvite v4.3.9 [32mbuilding for production...[36m[39m
|
|
4
4
|
transforming...
|
|
5
5
|
[32m✓[39m 22 modules transformed.
|
|
6
6
|
rendering chunks...
|
|
7
7
|
computing gzip size...
|
|
8
|
-
[2mdist/[22m[36mindex.js [39m[1m[2m
|
|
8
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m 8.26 kB[22m[1m[22m[2m │ gzip: 1.86 kB[22m
|
|
9
9
|
[2mdist/[22m[36mreact.js [39m[1m[2m59.01 kB[22m[1m[22m[2m │ gzip: 15.91 kB[22m
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
[32m✓ built in
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
|
|
11
|
+
[vite:dts] Start generate declaration files...
|
|
12
|
+
[32m✓ built in 4.60s[39m
|
|
13
|
+
[vite:dts] Declaration files built in 4021ms.
|
|
14
|
+
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.18.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [Added] - inverse and ghost-inverse variants to pie-button ([#596](https://github.com/justeattakeaway/pie/pull/596)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
8
|
+
|
|
9
|
+
- [Changed] - Set all component props to public ([#597](https://github.com/justeattakeaway/pie/pull/597)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
10
|
+
|
|
3
11
|
## 0.17.0
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -69,7 +69,7 @@ import { PieButton } from '@justeattakeaway/pie-button/dist/react';
|
|
|
69
69
|
|-------------|-----------|-----------------|----------------------------------------------------------------------|
|
|
70
70
|
| size | `String` | `medium` | Size of the button, one of `sizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large` |
|
|
71
71
|
| type | `String` | `submit` | Type of the button, one of `types` – `submit`, `button`, `reset`, `menu` |
|
|
72
|
-
| variant | `String` | `primary` | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost` |
|
|
72
|
+
| variant | `String` | `primary` | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost`, `inverse`, `ghost-inverse` |
|
|
73
73
|
| disabled | `Boolean` | `false` | If `true`, disables the button. |
|
|
74
74
|
| isFullWidth | `Boolean` | `false` | If `true`, sets the button width to 100% of it's container. |
|
|
75
75
|
|
package/dist/index.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import { unsafeCSS as h, LitElement as u, html as
|
|
2
|
-
import { property as
|
|
1
|
+
import { unsafeCSS as h, LitElement as u, html as g } from "lit";
|
|
2
|
+
import { property as l } from "lit/decorators.js";
|
|
3
3
|
import "lit/decorators/property.js";
|
|
4
|
-
const b = (
|
|
5
|
-
const
|
|
4
|
+
const b = (c, o, e) => function(t, r) {
|
|
5
|
+
const a = `#${r}`;
|
|
6
6
|
Object.defineProperty(t, r, {
|
|
7
7
|
get() {
|
|
8
|
-
return this[
|
|
8
|
+
return this[a];
|
|
9
9
|
},
|
|
10
10
|
set(v) {
|
|
11
|
-
const p = this[
|
|
12
|
-
o.includes(v) ? this[
|
|
13
|
-
`<${
|
|
11
|
+
const p = this[a];
|
|
12
|
+
o.includes(v) ? this[a] = v : (console.error(
|
|
13
|
+
`<${c}> Invalid value "${v}" provided for property "${r}".`,
|
|
14
14
|
`Must be one of: ${o.join(" | ")}.`,
|
|
15
|
-
`Falling back to default value: "${
|
|
16
|
-
), this[
|
|
15
|
+
`Falling back to default value: "${e}"`
|
|
16
|
+
), this[a] = e), this.requestUpdate(r, p);
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
},
|
|
20
|
-
`,
|
|
21
|
-
var z = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (
|
|
22
|
-
for (var t = n > 1 ? void 0 : n ? k(o,
|
|
23
|
-
(
|
|
24
|
-
return n && t && z(o,
|
|
19
|
+
}, m = `.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-padding: 10px var(--dt-spacing-e);--btn-min-height: 48px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);min-block-size:var(--btn-min-block-size);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner);outline:none;position:relative}.o-btn:focus-visible:after{content:"";display:block;position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border-radius:var(--btn-border-radius);box-shadow:0 0 0 2px var(--dt-color-focus-outer)}.o-btn[variant=primary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.o-btn[variant=primary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-primary-h),var(--dt-color-interactive-primary-s),calc(var(--dt-color-interactive-primary-l) - var(--dt-color-hover-01)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-primary-h),var(--dt-color-interactive-primary-s),calc(var(--dt-color-interactive-primary-l) - var(--dt-color-active-01)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-hover-01)))}.o-btn[variant=secondary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-active-01)))}.o-btn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-btn[variant=outline]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-btn[variant=ghost]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-inverse-h),var(--dt-color-interactive-inverse-s),calc(var(--dt-color-interactive-inverse-l) - var(--dt-color-hover-01)))}.o-btn[variant=inverse]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-inverse-h),var(--dt-color-interactive-inverse-s),calc(var(--dt-color-interactive-inverse-l) - var(--dt-color-active-01)))}.o-btn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-inverse-h),var(--dt-color-container-inverse-s),calc(var(--dt-color-container-inverse-l) - var(--dt-color-hover-01)))}.o-btn[variant=ghost-inverse]:active:not(:disabled){background-color:hsl(var(--dt-color-container-inverse-h),var(--dt-color-container-inverse-s),calc(var(--dt-color-container-inverse-l) - var(--dt-color-active-01)))}.o-btn[isFullWidth]{inline-size:100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px)}.o-btn[size=small-expressive]{--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px)}.o-btn[size=small-productive]{--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px)}.o-btn[size=large]{--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px)}
|
|
20
|
+
`, f = ["xsmall", "small-productive", "small-expressive", "medium", "large"], y = ["submit", "button", "reset", "menu"], x = ["primary", "secondary", "outline", "ghost", "inverse", "ghost-inverse"];
|
|
21
|
+
var z = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (c, o, e, n) => {
|
|
22
|
+
for (var t = n > 1 ? void 0 : n ? k(o, e) : o, r = c.length - 1, a; r >= 0; r--)
|
|
23
|
+
(a = c[r]) && (t = (n ? a(o, e, t) : a(t)) || t);
|
|
24
|
+
return n && t && z(o, e, t), t;
|
|
25
25
|
};
|
|
26
26
|
const s = "pie-button";
|
|
27
27
|
class i extends u {
|
|
@@ -31,46 +31,46 @@ class i extends u {
|
|
|
31
31
|
render() {
|
|
32
32
|
const {
|
|
33
33
|
type: o,
|
|
34
|
-
disabled:
|
|
34
|
+
disabled: e,
|
|
35
35
|
isFullWidth: n,
|
|
36
36
|
variant: t,
|
|
37
37
|
size: r
|
|
38
38
|
} = this;
|
|
39
|
-
return
|
|
39
|
+
return g`
|
|
40
40
|
<button
|
|
41
41
|
class="o-btn"
|
|
42
42
|
type=${o}
|
|
43
43
|
variant=${t}
|
|
44
44
|
size=${r}
|
|
45
|
-
?disabled=${
|
|
45
|
+
?disabled=${e}
|
|
46
46
|
?isFullWidth=${n}>
|
|
47
47
|
<slot></slot>
|
|
48
48
|
</button>`;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
i.styles = h(
|
|
51
|
+
i.styles = h(m);
|
|
52
52
|
d([
|
|
53
|
-
|
|
54
|
-
b(s,
|
|
53
|
+
l(),
|
|
54
|
+
b(s, f, "medium")
|
|
55
55
|
], i.prototype, "size", 2);
|
|
56
56
|
d([
|
|
57
|
-
|
|
57
|
+
l(),
|
|
58
58
|
b(s, y, "submit")
|
|
59
59
|
], i.prototype, "type", 2);
|
|
60
60
|
d([
|
|
61
|
-
|
|
61
|
+
l(),
|
|
62
62
|
b(s, x, "primary")
|
|
63
63
|
], i.prototype, "variant", 2);
|
|
64
64
|
d([
|
|
65
|
-
|
|
65
|
+
l({ type: Boolean })
|
|
66
66
|
], i.prototype, "disabled", 2);
|
|
67
67
|
d([
|
|
68
|
-
|
|
68
|
+
l({ type: Boolean })
|
|
69
69
|
], i.prototype, "isFullWidth", 2);
|
|
70
70
|
customElements.define(s, i);
|
|
71
71
|
export {
|
|
72
72
|
i as PieButton,
|
|
73
|
-
|
|
73
|
+
f as sizes,
|
|
74
74
|
y as types,
|
|
75
75
|
x as variants
|
|
76
76
|
};
|
package/dist/react.js
CHANGED
|
File without changes
|
package/dist/types/index.d.ts
CHANGED
|
File without changes
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
|
|
2
2
|
export declare const types: readonly ["submit", "button", "reset", "menu"];
|
|
3
|
-
export declare const variants: readonly ["primary", "secondary", "outline", "ghost"];
|
|
3
|
+
export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "inverse", "ghost-inverse"];
|
|
4
4
|
export interface ButtonProps {
|
|
5
5
|
/**
|
|
6
6
|
* (Optional) What size the button should be.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,gFAAiF,CAAC;AACpG,eAAO,MAAM,KAAK,gDAAiD,CAAC;AACpE,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,gFAAiF,CAAC;AACpG,eAAO,MAAM,KAAK,gDAAiD,CAAC;AACpE,eAAO,MAAM,QAAQ,mFAAoF,CAAC;AAE1G,MAAM,WAAW,WAAW;IACxB;;;OAGG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,OAAO,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,EAAE,OAAO,CAAC;CACxB"}
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,EACH,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EACtC,MAAM,QAAQ,CAAC;AAGhB,OAAO,EACH,KAAK,WAAW,EAChB,KAAK,EACL,KAAK,EACL,QAAQ,GACX,CAAC;AAEF,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC,qBAAa,SAAU,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,EACH,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EACtC,MAAM,QAAQ,CAAC;AAGhB,OAAO,EACH,KAAK,WAAW,EAChB,KAAK,EACL,KAAK,EACL,QAAQ,GACX,CAAC;AAEF,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC,qBAAa,SAAU,SAAQ,UAAU;IAG9B,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAa;IAG5C,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAE3B,MAAM;IAkBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;KAClC;CACJ"}
|
|
File without changes
|
|
File without changes
|
package/dist/types/react.d.ts
CHANGED
|
File without changes
|
package/package.json
CHANGED
package/src/button.scss
CHANGED
|
@@ -122,6 +122,20 @@
|
|
|
122
122
|
@include button-interactive-states('--dt-color-container-default');
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
+
&[variant='inverse'] {
|
|
126
|
+
--btn-bg-color: var(--dt-color-interactive-inverse);
|
|
127
|
+
--btn-text-color: var(--dt-color-content-interactive-secondary);
|
|
128
|
+
|
|
129
|
+
@include button-interactive-states('--dt-color-interactive-inverse');
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
&[variant='ghost-inverse'] {
|
|
133
|
+
--btn-bg-color: transparent;
|
|
134
|
+
--btn-text-color: var(--dt-color-content-interactive-primary);
|
|
135
|
+
|
|
136
|
+
@include button-interactive-states('--dt-color-container-inverse');
|
|
137
|
+
}
|
|
138
|
+
|
|
125
139
|
// Additional modifiers
|
|
126
140
|
&[isFullWidth] {
|
|
127
141
|
inline-size: 100%;
|
|
@@ -132,8 +146,8 @@
|
|
|
132
146
|
|
|
133
147
|
cursor: not-allowed;
|
|
134
148
|
|
|
135
|
-
// For every variant except ghost, set the disabled background color
|
|
136
|
-
&:not([variant='ghost']) {
|
|
149
|
+
// For every variant except ghost and ghost-inverse, set the disabled background color
|
|
150
|
+
&:not([variant='ghost'], [variant='ghost-inverse']) {
|
|
137
151
|
--btn-bg-color: var(--dt-color-disabled-01) !important;
|
|
138
152
|
}
|
|
139
153
|
|
package/src/defs.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const;
|
|
2
2
|
export const types = ['submit', 'button', 'reset', 'menu'] as const;
|
|
3
|
-
export const variants = ['primary', 'secondary', 'outline', 'ghost'] as const;
|
|
3
|
+
export const variants = ['primary', 'secondary', 'outline', 'ghost', 'inverse', 'ghost-inverse'] as const;
|
|
4
4
|
|
|
5
5
|
export interface ButtonProps {
|
|
6
6
|
/**
|
package/src/index.ts
CHANGED
|
@@ -19,21 +19,21 @@ const componentSelector = 'pie-button';
|
|
|
19
19
|
export class PieButton extends LitElement {
|
|
20
20
|
@property()
|
|
21
21
|
@validPropertyValues(componentSelector, sizes, 'medium')
|
|
22
|
-
|
|
22
|
+
public size: ButtonProps['size'] = 'medium';
|
|
23
23
|
|
|
24
24
|
@property()
|
|
25
25
|
@validPropertyValues(componentSelector, types, 'submit')
|
|
26
|
-
|
|
26
|
+
public type: ButtonProps['type'] = 'submit';
|
|
27
27
|
|
|
28
28
|
@property()
|
|
29
29
|
@validPropertyValues(componentSelector, variants, 'primary')
|
|
30
|
-
|
|
30
|
+
public variant: ButtonProps['variant'] = 'primary';
|
|
31
31
|
|
|
32
32
|
@property({ type: Boolean })
|
|
33
|
-
|
|
33
|
+
public disabled = false;
|
|
34
34
|
|
|
35
35
|
@property({ type: Boolean })
|
|
36
|
-
|
|
36
|
+
public isFullWidth = false;
|
|
37
37
|
|
|
38
38
|
render () {
|
|
39
39
|
const {
|
|
@@ -49,11 +49,12 @@ componentVariants.forEach((variant) => test(`Render all prop variations for Vari
|
|
|
49
49
|
await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
|
|
50
50
|
const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieButton);
|
|
51
51
|
const propKeyValues = `size: ${testComponent.propValues.size}, isFullWidth: ${testComponent.propValues.isFullWidth}, disabled: ${testComponent.propValues.disabled}`;
|
|
52
|
+
const darkMode = variant === 'inverse' || variant === 'ghost-inverse';
|
|
52
53
|
|
|
53
54
|
await mount(
|
|
54
55
|
WebComponentTestWrapper,
|
|
55
56
|
{
|
|
56
|
-
props: { propKeyValues },
|
|
57
|
+
props: { propKeyValues, darkMode },
|
|
57
58
|
slots: {
|
|
58
59
|
component: testComponent.renderedString.trim(),
|
|
59
60
|
},
|