@justeattakeaway/pie-button 0.25.0 → 0.27.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/README.md +19 -10
- package/dist/index.d.ts +9 -3
- package/dist/index.js +36 -29
- package/dist/react.d.ts +9 -3
- package/dist/react.js +44 -1565
- package/package.json +2 -2
- package/src/button.scss +29 -33
- package/src/defs.ts +7 -1
- package/src/index.ts +19 -8
package/README.md
CHANGED
|
@@ -13,11 +13,12 @@
|
|
|
13
13
|
1. [Introduction](#pie-button)
|
|
14
14
|
2. [Local Development](#local-development)
|
|
15
15
|
3. [Props](#props)
|
|
16
|
-
4. [
|
|
16
|
+
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
+
5. [Events](#events)
|
|
17
18
|
- [HTML example](#html)
|
|
18
19
|
- [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
|
|
19
20
|
- [React example (using Next 13)](#react-templates-using-next-13)
|
|
20
|
-
|
|
21
|
+
6. [Testing](#testing)
|
|
21
22
|
- [Browser Tests](#browser-tests)
|
|
22
23
|
- [Visual Tests](#visual-tests)
|
|
23
24
|
|
|
@@ -60,8 +61,17 @@ import { PieButton } from '@justeattakeaway/pie-button';
|
|
|
60
61
|
// React
|
|
61
62
|
// For React, you will need to import our React specific component build
|
|
62
63
|
// Which wraps the web component using the @lit-labs/react package
|
|
64
|
+
|
|
65
|
+
// Note: When using the React version of the component, please make sure
|
|
66
|
+
// you also include React as a dependency in your project as well. See Peer Dependencies section.
|
|
67
|
+
|
|
63
68
|
import { PieButton } from '@justeattakeaway/pie-button/dist/react';
|
|
64
69
|
```
|
|
70
|
+
## Peer Dependencies
|
|
71
|
+
|
|
72
|
+
> **Note**
|
|
73
|
+
> Before using `@justeattakeaway/pie-button`, please make sure you have the following peer dependencies installed in your project:
|
|
74
|
+
> - `react` (for integration with React apps only)
|
|
65
75
|
|
|
66
76
|
## Props
|
|
67
77
|
|
|
@@ -69,10 +79,11 @@ import { PieButton } from '@justeattakeaway/pie-button/dist/react';
|
|
|
69
79
|
|-------------|-----------|-----------|-------------------------------------------------------------------------------------------------------------------|
|
|
70
80
|
| size | `String` | `medium` | Size of the button, one of `sizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large` |
|
|
71
81
|
| 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`, `destructive`, `destructive-ghost`, `inverse`, `ghost-inverse` |
|
|
82
|
+
| variant | `String` | `primary` | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost`, `destructive`, `destructive-ghost`, `inverse`, `ghost-inverse` or `outline-inverse` |
|
|
73
83
|
| disabled | `Boolean` | `false` | If `true`, disables the button. |
|
|
74
84
|
| isFullWidth | `Boolean` | `false` | If `true`, sets the button width to 100% of its container. |
|
|
75
85
|
| isLoading | `Boolean` | `false` | If `true`, displays a loading indicator inside the button. |
|
|
86
|
+
| iconPlacement | `String` | `leading` | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing` |
|
|
76
87
|
|
|
77
88
|
In your markup or JSX, you can then use these to set the properties for the `pie-button` component:
|
|
78
89
|
|
|
@@ -89,22 +100,20 @@ In your markup or JSX, you can then use these to set the properties for the `pie
|
|
|
89
100
|
| Slot | Description |
|
|
90
101
|
|---------------|------------------------------------------------------------------------------------------------------------------------------------|
|
|
91
102
|
| Default slot | The default slot is used to pass text into the button component. |
|
|
92
|
-
| icon
|
|
93
|
-
| icon-trailing | Used to pass in a trailing icon. We recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. |
|
|
103
|
+
| icon | Used to pass in an icon to the button component. The icon placement can be controlled via the `iconPlacement` prop and we recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. |
|
|
94
104
|
|
|
95
|
-
### Using `pie-icons-webc` with `pie-button`icon
|
|
105
|
+
### Using `pie-icons-webc` with `pie-button` icon slot
|
|
96
106
|
|
|
97
|
-
We recommend using `pie-icons-webc` when using the `icon
|
|
107
|
+
We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this:
|
|
98
108
|
|
|
99
109
|
```html
|
|
100
110
|
<!--
|
|
101
|
-
Note that pie-button and the
|
|
111
|
+
Note that pie-button and the icon that you want to use will need to be imported as components into your application.
|
|
102
112
|
See the `pie-icons-webc` README for more info on importing these icons.
|
|
103
113
|
-->
|
|
104
114
|
<pie-button>
|
|
105
|
-
<icon-plus-circle slot="icon
|
|
115
|
+
<icon-plus-circle slot="icon"></icon-plus-circle>
|
|
106
116
|
Search
|
|
107
|
-
<icon-chevron-down slot="icon-trailing"></icon-chevron-down>
|
|
108
117
|
</pie-button>
|
|
109
118
|
```
|
|
110
119
|
|
package/dist/index.d.ts
CHANGED
|
@@ -15,6 +15,10 @@ export declare interface ButtonProps {
|
|
|
15
15
|
* What style variant the button should be such as primary, outline or ghost.
|
|
16
16
|
*/
|
|
17
17
|
variant: Variant;
|
|
18
|
+
/**
|
|
19
|
+
* The placement of the icon slot, if provided, such as leading or trailing
|
|
20
|
+
*/
|
|
21
|
+
iconPlacement?: typeof iconPlacements[number];
|
|
18
22
|
/**
|
|
19
23
|
* When true, the button element is disabled.
|
|
20
24
|
*/
|
|
@@ -29,15 +33,17 @@ export declare interface ButtonProps {
|
|
|
29
33
|
isLoading: boolean;
|
|
30
34
|
}
|
|
31
35
|
|
|
36
|
+
export declare const iconPlacements: readonly ["leading", "trailing"];
|
|
37
|
+
|
|
32
38
|
/**
|
|
33
|
-
* @slot icon
|
|
34
|
-
* @slot icon-trailing - Trailing icon
|
|
39
|
+
* @slot icon - The icon slot
|
|
35
40
|
* @slot - Default slot
|
|
36
41
|
*/
|
|
37
42
|
export declare class PieButton extends LitElement implements ButtonProps {
|
|
38
43
|
size: ButtonProps['size'];
|
|
39
44
|
type: ButtonProps['type'];
|
|
40
45
|
variant: ButtonProps['variant'];
|
|
46
|
+
iconPlacement: ButtonProps['iconPlacement'];
|
|
41
47
|
disabled: boolean;
|
|
42
48
|
isLoading: boolean;
|
|
43
49
|
isFullWidth: boolean;
|
|
@@ -52,6 +58,6 @@ export declare const types: readonly ["submit", "button", "reset", "menu"];
|
|
|
52
58
|
|
|
53
59
|
export declare type Variant = typeof variants[number];
|
|
54
60
|
|
|
55
|
-
export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "inverse", "ghost-inverse", "destructive", "destructive-ghost"];
|
|
61
|
+
export declare const variants: readonly ["primary", "secondary", "outline", "outline-inverse", "ghost", "inverse", "ghost-inverse", "destructive", "destructive-ghost"];
|
|
56
62
|
|
|
57
63
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,41 +1,42 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
1
|
+
import { unsafeCSS as f, LitElement as g, html as p, nothing as h } from "lit";
|
|
2
2
|
import { property as c } from "lit/decorators.js";
|
|
3
3
|
import "lit/decorators/property.js";
|
|
4
|
-
const b = (
|
|
4
|
+
const b = (d, r, t) => function(o, e) {
|
|
5
5
|
const i = `#${e}`;
|
|
6
6
|
Object.defineProperty(o, e, {
|
|
7
7
|
get() {
|
|
8
8
|
return this[i];
|
|
9
9
|
},
|
|
10
|
-
set(
|
|
11
|
-
const
|
|
12
|
-
r.includes(
|
|
13
|
-
`<${
|
|
10
|
+
set(l) {
|
|
11
|
+
const m = this[i];
|
|
12
|
+
r.includes(l) ? this[i] = l : (console.error(
|
|
13
|
+
`<${d}> Invalid value "${l}" provided for property "${e}".`,
|
|
14
14
|
`Must be one of: ${r.join(" | ")}.`,
|
|
15
15
|
`Falling back to default value: "${t}"`
|
|
16
|
-
), this[i] = t), this.requestUpdate(e,
|
|
16
|
+
), this[i] = t), this.requestUpdate(e, m);
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
}, g = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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-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);--btn-icon-size: 24px;--spinner-size-s: 20px;--spinner-size-m: 24px;--spinner-border-width-s: 2.5px;--spinner-border-width-m: 3px;--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m);--spinner-base-color-h: var(--dt-color-content-interactive-primary-h);--spinner-base-color-s: var(--dt-color-content-interactive-primary-s);--spinner-base-color-l: var(--dt-color-content-interactive-primary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;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;inline-size:var(--btn-inline-size);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased}.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){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.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){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.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){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.o-btn[isFullWidth]{--btn-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],[variant=destructive-ghost]){--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);--btn-icon-size: 16px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.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);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.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);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.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);--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m)}.o-btn:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;opacity:0}.o-btn .o-btn-text{flex-grow:1}.o-btn[isLoading]:before{animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);opacity:1}.o-btn[isLoading] .o-btn-text{opacity:0}::slotted(svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}
|
|
20
|
-
`,
|
|
19
|
+
}, u = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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-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);--btn-icon-size: 24px;--spinner-size-s: 20px;--spinner-size-m: 24px;--spinner-border-width-s: 2.5px;--spinner-border-width-m: 3px;--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m);--spinner-base-color-h: var(--dt-color-content-interactive-primary-h);--spinner-base-color-s: var(--dt-color-content-interactive-primary-s);--spinner-base-color-l: var(--dt-color-content-interactive-primary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;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;inline-size:var(--btn-inline-size);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased}.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){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.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){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.o-btn[variant=outline-inverse]{border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.o-btn[isFullWidth]{--btn-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],[variant=destructive-ghost]){--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);--btn-icon-size: 16px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.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);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.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);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.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);--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m)}.o-btn[isLoading]:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count)}.o-btn[isLoading]>*{visibility:hidden}::slotted(svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}
|
|
20
|
+
`, y = ["xsmall", "small-productive", "small-expressive", "medium", "large"], z = ["submit", "button", "reset", "menu"], x = [
|
|
21
21
|
"primary",
|
|
22
22
|
"secondary",
|
|
23
23
|
"outline",
|
|
24
|
+
"outline-inverse",
|
|
24
25
|
"ghost",
|
|
25
26
|
"inverse",
|
|
26
27
|
"ghost-inverse",
|
|
27
28
|
"destructive",
|
|
28
29
|
"destructive-ghost"
|
|
29
|
-
];
|
|
30
|
-
var
|
|
31
|
-
for (var o = a > 1 ? void 0 : a ?
|
|
32
|
-
(i =
|
|
33
|
-
return a && o &&
|
|
30
|
+
], w = ["leading", "trailing"];
|
|
31
|
+
var L = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, s = (d, r, t, a) => {
|
|
32
|
+
for (var o = a > 1 ? void 0 : a ? $(r, t) : r, e = d.length - 1, i; e >= 0; e--)
|
|
33
|
+
(i = d[e]) && (o = (a ? i(r, t, o) : i(o)) || o);
|
|
34
|
+
return a && o && L(r, t, o), o;
|
|
34
35
|
};
|
|
35
|
-
const
|
|
36
|
-
class n extends
|
|
36
|
+
const v = "pie-button";
|
|
37
|
+
class n extends g {
|
|
37
38
|
constructor() {
|
|
38
|
-
super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1;
|
|
39
|
+
super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1;
|
|
39
40
|
}
|
|
40
41
|
render() {
|
|
41
42
|
const {
|
|
@@ -44,9 +45,10 @@ class n extends m {
|
|
|
44
45
|
isFullWidth: a,
|
|
45
46
|
variant: o,
|
|
46
47
|
size: e,
|
|
47
|
-
isLoading: i
|
|
48
|
+
isLoading: i,
|
|
49
|
+
iconPlacement: l
|
|
48
50
|
} = this;
|
|
49
|
-
return
|
|
51
|
+
return p`
|
|
50
52
|
<button
|
|
51
53
|
class="o-btn"
|
|
52
54
|
type=${r}
|
|
@@ -55,9 +57,9 @@ class n extends m {
|
|
|
55
57
|
?disabled=${t}
|
|
56
58
|
?isFullWidth=${a}
|
|
57
59
|
?isLoading=${i}>
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
60
|
+
${l === "leading" ? p`<slot name="icon"></slot>` : h}
|
|
61
|
+
<slot></slot>
|
|
62
|
+
${l === "trailing" ? p`<slot name="icon"></slot>` : h}
|
|
61
63
|
</button>`;
|
|
62
64
|
}
|
|
63
65
|
focus() {
|
|
@@ -65,19 +67,23 @@ class n extends m {
|
|
|
65
67
|
(t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("button")) == null || t.focus();
|
|
66
68
|
}
|
|
67
69
|
}
|
|
68
|
-
n.styles =
|
|
70
|
+
n.styles = f(u);
|
|
69
71
|
s([
|
|
70
72
|
c(),
|
|
71
|
-
b(
|
|
73
|
+
b(v, y, "medium")
|
|
72
74
|
], n.prototype, "size", 2);
|
|
73
75
|
s([
|
|
74
76
|
c(),
|
|
75
|
-
b(
|
|
77
|
+
b(v, z, "submit")
|
|
76
78
|
], n.prototype, "type", 2);
|
|
77
79
|
s([
|
|
78
80
|
c(),
|
|
79
|
-
b(
|
|
81
|
+
b(v, x, "primary")
|
|
80
82
|
], n.prototype, "variant", 2);
|
|
83
|
+
s([
|
|
84
|
+
c({ type: String }),
|
|
85
|
+
b(v, w, "leading")
|
|
86
|
+
], n.prototype, "iconPlacement", 2);
|
|
81
87
|
s([
|
|
82
88
|
c({ type: Boolean })
|
|
83
89
|
], n.prototype, "disabled", 2);
|
|
@@ -87,10 +93,11 @@ s([
|
|
|
87
93
|
s([
|
|
88
94
|
c({ type: Boolean })
|
|
89
95
|
], n.prototype, "isFullWidth", 2);
|
|
90
|
-
customElements.define(
|
|
96
|
+
customElements.define(v, n);
|
|
91
97
|
export {
|
|
92
98
|
n as PieButton,
|
|
93
|
-
|
|
94
|
-
y as
|
|
99
|
+
w as iconPlacements,
|
|
100
|
+
y as sizes,
|
|
101
|
+
z as types,
|
|
95
102
|
x as variants
|
|
96
103
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -16,6 +16,10 @@ export declare interface ButtonProps {
|
|
|
16
16
|
* What style variant the button should be such as primary, outline or ghost.
|
|
17
17
|
*/
|
|
18
18
|
variant: Variant;
|
|
19
|
+
/**
|
|
20
|
+
* The placement of the icon slot, if provided, such as leading or trailing
|
|
21
|
+
*/
|
|
22
|
+
iconPlacement?: typeof iconPlacements[number];
|
|
19
23
|
/**
|
|
20
24
|
* When true, the button element is disabled.
|
|
21
25
|
*/
|
|
@@ -30,17 +34,19 @@ export declare interface ButtonProps {
|
|
|
30
34
|
isLoading: boolean;
|
|
31
35
|
}
|
|
32
36
|
|
|
37
|
+
export declare const iconPlacements: readonly ["leading", "trailing"];
|
|
38
|
+
|
|
33
39
|
export declare const PieButton: ReactWebComponent<PieButton_2, {}>;
|
|
34
40
|
|
|
35
41
|
/**
|
|
36
|
-
* @slot icon
|
|
37
|
-
* @slot icon-trailing - Trailing icon
|
|
42
|
+
* @slot icon - The icon slot
|
|
38
43
|
* @slot - Default slot
|
|
39
44
|
*/
|
|
40
45
|
declare class PieButton_2 extends LitElement implements ButtonProps {
|
|
41
46
|
size: ButtonProps['size'];
|
|
42
47
|
type: ButtonProps['type'];
|
|
43
48
|
variant: ButtonProps['variant'];
|
|
49
|
+
iconPlacement: ButtonProps['iconPlacement'];
|
|
44
50
|
disabled: boolean;
|
|
45
51
|
isLoading: boolean;
|
|
46
52
|
isFullWidth: boolean;
|
|
@@ -55,6 +61,6 @@ export declare const types: readonly ["submit", "button", "reset", "menu"];
|
|
|
55
61
|
|
|
56
62
|
export declare type Variant = typeof variants[number];
|
|
57
63
|
|
|
58
|
-
export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "inverse", "ghost-inverse", "destructive", "destructive-ghost"];
|
|
64
|
+
export declare const variants: readonly ["primary", "secondary", "outline", "outline-inverse", "ghost", "inverse", "ghost-inverse", "destructive", "destructive-ghost"];
|
|
59
65
|
|
|
60
66
|
export { }
|