@justeattakeaway/pie-icon-button 0.9.0 → 0.12.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/.eslintignore +3 -0
- package/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +27 -0
- package/declaration.d.ts +0 -2
- package/dist/index.js +1 -1
- package/dist/types/packages/components/pie-icon-button/src/react.d.ts.map +1 -1
- package/package.json +5 -1
- package/playwright/index.ts +1 -1
- package/playwright-lit-visual.config.ts +0 -1
- package/playwright-lit.config.ts +0 -1
- package/src/iconButton.scss +9 -6
- package/tsconfig.json +1 -1
package/.eslintignore
ADDED
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
[
|
|
1
|
+
[3:34:44 PM] @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 6.
|
|
8
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m 6.06 kB[22m[1m[22m[2m │ gzip: 1.52 kB[22m
|
|
9
9
|
[2mdist/[22m[36mreact.js [39m[1m[2m59.03 kB[22m[1m[22m[2m │ gzip: 15.92 kB[22m
|
|
10
10
|
[32m
|
|
11
11
|
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
-
[32m✓ built in
|
|
13
|
-
[32m[36m[vite:dts][32m Declaration files built in
|
|
12
|
+
[32m✓ built in 11.03s[39m
|
|
13
|
+
[32m[36m[vite:dts][32m Declaration files built in 10164ms.
|
|
14
14
|
[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# @justeattakeaway/pie-icon-button
|
|
2
2
|
|
|
3
|
+
## 0.12.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [Fixed] - Prevent tree-shaking of components in storybook ([#667](https://github.com/justeattakeaway/pie/pull/667)) by [@xander-marjoram](https://github.com/xander-marjoram)
|
|
8
|
+
|
|
9
|
+
[Removed] - Built webc icons from source control
|
|
10
|
+
[Added] - Type declaration files for components
|
|
11
|
+
[Added] - Types for pie-icons
|
|
12
|
+
[Added] - TS version of pie-icons-configs/config.js (Will be used after DSW-1025)
|
|
13
|
+
[Added] - Webc icon tests for width, height and base classes
|
|
14
|
+
[Changed] - Update pie-icons-webc build to generate a slightly different template for regular and large icons (using different types, etc.)
|
|
15
|
+
[Changed] - Update pie-icons-webc rollup config to remove commonjs build
|
|
16
|
+
[Changed] - Use `just-kebab-case` and `just-pascal-case` instead of `kebab-case` and `pascal-case` to simplify usage (and they're more recently maintained)
|
|
17
|
+
|
|
18
|
+
## 0.11.0
|
|
19
|
+
|
|
20
|
+
### Minor Changes
|
|
21
|
+
|
|
22
|
+
- [Changed] - Add js/ts linting and fix errors ([#653](https://github.com/justeattakeaway/pie/pull/653)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
23
|
+
|
|
24
|
+
## 0.10.0
|
|
25
|
+
|
|
26
|
+
### Minor Changes
|
|
27
|
+
|
|
28
|
+
- [Changed] - expose icon-button size css variables for consumers ([#627](https://github.com/justeattakeaway/pie/pull/627)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
29
|
+
|
|
3
30
|
## 0.9.0
|
|
4
31
|
|
|
5
32
|
### Minor Changes
|
package/declaration.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -16,7 +16,7 @@ const b = (i, o, n) => function(t, r) {
|
|
|
16
16
|
), this[a] = n), this.requestUpdate(r, u);
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
}, g =
|
|
19
|
+
}, g = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);min-block-size:var(--btn-dimension);aspect-ratio:1/1;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center}@supports not (aspect-ratio: 1/1){.o-iconBtn{min-inline-size:var(--btn-dimension)}}.o-iconBtn:focus-visible{outline:2px solid var(--btn-focus)}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.o-iconBtn[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-iconBtn[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-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[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-iconBtn[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-iconBtn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=outline] .o-iconBtn{border:1px solid var(--dt-color-border-strong)}.o-iconBtn[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-iconBtn[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-iconBtn[variant=ghost]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[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-iconBtn[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-iconBtn[variant=ghost-secondary]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]: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-iconBtn[variant=ghost-secondary]: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-iconBtn[disabled]{--btn-bg-color: var(--dt-color-disabled-01) !important;--btn-icon-fill: var(--dt-color-content-disabled) !important}.o-iconBtn[disabled] .o-iconBtn{border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}.o-iconBtn[disabled][variant=outline] .o-iconBtn{outline:none}.o-iconBtn[disabled][variant=ghost],.o-iconBtn[disabled][variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-default)}.o-iconBtn[disabled][variant=ghost] .o-iconBtn,.o-iconBtn[disabled][variant=ghost-secondary] .o-iconBtn{outline:none;border:none}.o-iconBtn[size=xsmall]{--btn-dimension: 32px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--btn-icon-size: 28px}
|
|
20
20
|
`, m = ["xsmall", "small", "medium", "large"], B = ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
|
|
21
21
|
var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (i, o, n, e) => {
|
|
22
22
|
for (var t = e > 1 ? void 0 : e ? x(o, n) : o, r = i.length - 1, a; r >= 0; r--)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE9D,eAAO,MAAM,aAAa,qEAMxB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.0",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -8,6 +8,10 @@
|
|
|
8
8
|
"types": "dist/types/index.d.ts",
|
|
9
9
|
"scripts": {
|
|
10
10
|
"build": "yarn build:wrapper pie-icon-button && run -T vite build",
|
|
11
|
+
"lint:scripts": "run -T eslint .",
|
|
12
|
+
"lint:scripts:fix": "run -T eslint . --fix",
|
|
13
|
+
"lint:style": "run -T stylelint ./src/**/*.{css,scss}",
|
|
14
|
+
"lint:style:fix": "yarn lint:style --fix",
|
|
11
15
|
"watch": "run -T vite build --watch",
|
|
12
16
|
"test": "echo \"Error: no test specified\" && exit 0",
|
|
13
17
|
"test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_ICON_BUTTON} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
|
package/playwright/index.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
//Import common styles here
|
|
1
|
+
// Import common styles here
|
package/playwright-lit.config.ts
CHANGED
package/src/iconButton.scss
CHANGED
|
@@ -8,22 +8,25 @@
|
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
// Normally we don't expect consumers to override these, but there are situations where it may be necessary
|
|
12
|
+
:host {
|
|
13
|
+
// The base values are set to the size default, which is for the medium button size
|
|
14
|
+
--btn-dimension: 48px;
|
|
15
|
+
|
|
16
|
+
// Sizing is set to Medium button icon size, as that is the default
|
|
17
|
+
--btn-icon-size: 24px;
|
|
18
|
+
}
|
|
19
|
+
|
|
11
20
|
// Base button styles
|
|
12
21
|
.o-iconBtn {
|
|
13
22
|
--btn-border-radius: var(--dt-radius-rounded-e);
|
|
14
23
|
|
|
15
|
-
// The base values are set to the size default, which is for the medium button size
|
|
16
|
-
--btn-dimension: 48px;
|
|
17
|
-
|
|
18
24
|
// The following values set to default background and color
|
|
19
25
|
// currently this sets the primary button styles
|
|
20
26
|
--btn-bg-color: var(--dt-color-interactive-brand);
|
|
21
27
|
--btn-icon-fill: var(--dt-color-content-interactive-primary);
|
|
22
28
|
--btn-focus: var(--dt-color-focus-outer);
|
|
23
29
|
|
|
24
|
-
// Sizing is set to Medium button icon size, as that is the default
|
|
25
|
-
--btn-icon-size: 24px;
|
|
26
|
-
|
|
27
30
|
min-block-size: var(--btn-dimension);
|
|
28
31
|
aspect-ratio: 1 / 1;
|
|
29
32
|
|
package/tsconfig.json
CHANGED