@justeattakeaway/pie-button 0.26.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.
Files changed (9) hide show
  1. package/README.md +6 -7
  2. package/dist/index.d.ts +8 -2
  3. package/dist/index.js +35 -29
  4. package/dist/react.d.ts +8 -2
  5. package/dist/react.js +21 -20
  6. package/package.json +1 -1
  7. package/src/button.scss +19 -28
  8. package/src/defs.ts +5 -0
  9. package/src/index.ts +19 -8
package/README.md CHANGED
@@ -83,6 +83,7 @@ import { PieButton } from '@justeattakeaway/pie-button/dist/react';
83
83
  | disabled | `Boolean` | `false` | If `true`, disables the button. |
84
84
  | isFullWidth | `Boolean` | `false` | If `true`, sets the button width to 100% of its container. |
85
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` |
86
87
 
87
88
  In your markup or JSX, you can then use these to set the properties for the `pie-button` component:
88
89
 
@@ -99,22 +100,20 @@ In your markup or JSX, you can then use these to set the properties for the `pie
99
100
  | Slot | Description |
100
101
  |---------------|------------------------------------------------------------------------------------------------------------------------------------|
101
102
  | Default slot | The default slot is used to pass text into the button component. |
102
- | icon-leading | Used to pass in a leading icon. We recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. |
103
- | 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. |
104
104
 
105
- ### Using `pie-icons-webc` with `pie-button`icon slots
105
+ ### Using `pie-icons-webc` with `pie-button` icon slot
106
106
 
107
- We recommend using `pie-icons-webc` when using the `icon-leading` and `icon-trailing` slots. Here is an example of how you would do this:
107
+ We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this:
108
108
 
109
109
  ```html
110
110
  <!--
111
- Note that pie-button and the icons that you want to use will need to be imported as components into your application.
111
+ Note that pie-button and the icon that you want to use will need to be imported as components into your application.
112
112
  See the `pie-icons-webc` README for more info on importing these icons.
113
113
  -->
114
114
  <pie-button>
115
- <icon-plus-circle slot="icon-leading"></icon-plus-circle>
115
+ <icon-plus-circle slot="icon"></icon-plus-circle>
116
116
  Search
117
- <icon-chevron-down slot="icon-trailing"></icon-chevron-down>
118
117
  </pie-button>
119
118
  ```
120
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-leading - Leading 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;
package/dist/index.js CHANGED
@@ -1,23 +1,23 @@
1
- import { unsafeCSS as h, LitElement as m, html as f } from "lit";
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 = (l, r, t) => function(o, e) {
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(v) {
11
- const p = this[i];
12
- r.includes(v) ? this[i] = v : (console.error(
13
- `<${l}> Invalid value "${v}" provided for property "${e}".`,
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, p);
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],.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: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
- `, u = ["xsmall", "small-productive", "small-expressive", "medium", "large"], y = ["submit", "button", "reset", "menu"], x = [
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",
@@ -27,16 +27,16 @@ const b = (l, r, t) => function(o, e) {
27
27
  "ghost-inverse",
28
28
  "destructive",
29
29
  "destructive-ghost"
30
- ];
31
- var z = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (l, r, t, a) => {
32
- for (var o = a > 1 ? void 0 : a ? w(r, t) : r, e = l.length - 1, i; e >= 0; e--)
33
- (i = l[e]) && (o = (a ? i(r, t, o) : i(o)) || o);
34
- return a && o && z(r, t, o), 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;
35
35
  };
36
- const d = "pie-button";
37
- class n extends m {
36
+ const v = "pie-button";
37
+ class n extends g {
38
38
  constructor() {
39
- 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;
40
40
  }
41
41
  render() {
42
42
  const {
@@ -45,9 +45,10 @@ class n extends m {
45
45
  isFullWidth: a,
46
46
  variant: o,
47
47
  size: e,
48
- isLoading: i
48
+ isLoading: i,
49
+ iconPlacement: l
49
50
  } = this;
50
- return f`
51
+ return p`
51
52
  <button
52
53
  class="o-btn"
53
54
  type=${r}
@@ -56,9 +57,9 @@ class n extends m {
56
57
  ?disabled=${t}
57
58
  ?isFullWidth=${a}
58
59
  ?isLoading=${i}>
59
- <slot name="icon-leading"></slot>
60
- <span class="o-btn-text"><slot></slot></span>
61
- <slot name="icon-trailing"></slot>
60
+ ${l === "leading" ? p`<slot name="icon"></slot>` : h}
61
+ <slot></slot>
62
+ ${l === "trailing" ? p`<slot name="icon"></slot>` : h}
62
63
  </button>`;
63
64
  }
64
65
  focus() {
@@ -66,19 +67,23 @@ class n extends m {
66
67
  (t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("button")) == null || t.focus();
67
68
  }
68
69
  }
69
- n.styles = h(g);
70
+ n.styles = f(u);
70
71
  s([
71
72
  c(),
72
- b(d, u, "medium")
73
+ b(v, y, "medium")
73
74
  ], n.prototype, "size", 2);
74
75
  s([
75
76
  c(),
76
- b(d, y, "submit")
77
+ b(v, z, "submit")
77
78
  ], n.prototype, "type", 2);
78
79
  s([
79
80
  c(),
80
- b(d, x, "primary")
81
+ b(v, x, "primary")
81
82
  ], n.prototype, "variant", 2);
83
+ s([
84
+ c({ type: String }),
85
+ b(v, w, "leading")
86
+ ], n.prototype, "iconPlacement", 2);
82
87
  s([
83
88
  c({ type: Boolean })
84
89
  ], n.prototype, "disabled", 2);
@@ -88,10 +93,11 @@ s([
88
93
  s([
89
94
  c({ type: Boolean })
90
95
  ], n.prototype, "isFullWidth", 2);
91
- customElements.define(d, n);
96
+ customElements.define(v, n);
92
97
  export {
93
98
  n as PieButton,
94
- u as sizes,
95
- y as types,
99
+ w as iconPlacements,
100
+ y as sizes,
101
+ z as types,
96
102
  x as variants
97
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-leading - Leading 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;
package/dist/react.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as g from "react";
2
- import { PieButton as b } from "./index.js";
3
- import { sizes as D, types as G, variants as O } from "./index.js";
2
+ import { PieButton as P } from "./index.js";
3
+ import { iconPlacements as D, sizes as G, types as O, variants as S } from "./index.js";
4
4
  import "lit";
5
5
  import "lit/decorators.js";
6
6
  import "lit/decorators/property.js";
@@ -9,23 +9,23 @@ import "lit/decorators/property.js";
9
9
  * Copyright 2018 Google LLC
10
10
  * SPDX-License-Identifier: BSD-3-Clause
11
11
  */
12
- const B = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), E = /* @__PURE__ */ new WeakMap(), M = (p, r, d, m, u) => {
13
- const i = u == null ? void 0 : u[r];
14
- i === void 0 || d === m ? d == null && r in HTMLElement.prototype ? p.removeAttribute(r) : p[r] = d : ((s, t, h) => {
12
+ const b = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), E = /* @__PURE__ */ new WeakMap(), B = (m, l, p, d, u) => {
13
+ const i = u == null ? void 0 : u[l];
14
+ i === void 0 || p === d ? p == null && l in HTMLElement.prototype ? m.removeAttribute(l) : m[l] = p : ((s, t, h) => {
15
15
  let o = E.get(s);
16
16
  o === void 0 && E.set(s, o = /* @__PURE__ */ new Map());
17
17
  let a = o.get(t);
18
18
  h !== void 0 ? a === void 0 ? (o.set(t, a = { handleEvent: h }), s.addEventListener(t, a)) : a.handleEvent = h : a !== void 0 && (o.delete(t), s.removeEventListener(t, a));
19
- })(p, i, d);
19
+ })(m, i, p);
20
20
  };
21
- function P(p = window.React, r, d, m, u) {
21
+ function M(m = window.React, l, p, d, u) {
22
22
  let i, s, t;
23
- if (r === void 0) {
24
- const l = p;
25
- ({ tagName: s, elementClass: t, events: m, displayName: u } = l), i = l.react;
23
+ if (l === void 0) {
24
+ const r = m;
25
+ ({ tagName: s, elementClass: t, events: d, displayName: u } = r), i = r.react;
26
26
  } else
27
- i = p, t = d, s = r;
28
- const h = i.Component, o = i.createElement, a = new Set(Object.keys(m ?? {}));
27
+ i = m, t = p, s = l;
28
+ const h = i.Component, o = i.createElement, a = new Set(Object.keys(d ?? {}));
29
29
  class f extends h {
30
30
  constructor() {
31
31
  super(...arguments), this.o = null;
@@ -33,7 +33,7 @@ function P(p = window.React, r, d, m, u) {
33
33
  t(e) {
34
34
  if (this.o !== null)
35
35
  for (const v in this.i)
36
- M(this.o, v, this.props[v], e ? e[v] : void 0, m);
36
+ B(this.o, v, this.props[v], e ? e[v] : void 0, d);
37
37
  }
38
38
  componentDidMount() {
39
39
  this.t();
@@ -50,24 +50,25 @@ function P(p = window.React, r, d, m, u) {
50
50
  }), this.i = {};
51
51
  const y = { ref: this.u };
52
52
  for (const [n, c] of Object.entries(v))
53
- B.has(n) ? y[n === "className" ? "class" : n] = c : a.has(n) || n in t.prototype ? this.i[n] = c : y[n] = c;
53
+ b.has(n) ? y[n === "className" ? "class" : n] = c : a.has(n) || n in t.prototype ? this.i[n] = c : y[n] = c;
54
54
  return o(s, y);
55
55
  }
56
56
  }
57
57
  f.displayName = u ?? t.name;
58
- const N = i.forwardRef((l, e) => o(f, { ...l, _$Gl: e }, l == null ? void 0 : l.children));
58
+ const N = i.forwardRef((r, e) => o(f, { ...r, _$Gl: e }, r == null ? void 0 : r.children));
59
59
  return N.displayName = f.displayName, N;
60
60
  }
61
- const $ = P({
61
+ const $ = M({
62
62
  displayName: "PieButton",
63
- elementClass: b,
63
+ elementClass: P,
64
64
  react: g,
65
65
  tagName: "pie-button",
66
66
  events: {}
67
67
  });
68
68
  export {
69
69
  $ as PieButton,
70
- D as sizes,
71
- G as types,
72
- O as variants
70
+ D as iconPlacements,
71
+ G as sizes,
72
+ O as types,
73
+ S as variants
73
74
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "0.26.0",
3
+ "version": "0.27.0",
4
4
  "description": "PIE design system button built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/src/button.scss CHANGED
@@ -300,39 +300,30 @@
300
300
  --spinner-border-width: var(--spinner-border-width-m);
301
301
  }
302
302
 
303
- &:before {
304
- content: '';
305
-
306
- // Centre the spinner over the top of the button text
307
- position: absolute;
308
- left: 50%;
309
- top: 50%;
310
- translate: -50% -50%;
311
-
312
- height: var(--spinner-size);
313
- width: var(--spinner-size);
314
- display: block;
315
- background-color: transparent;
316
- border-radius: 50%;
317
- border-color: var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);
318
- border-width: var(--spinner-border-width);
319
- border-style: solid;
320
- will-change: transform;
321
- opacity: 0;
322
- }
323
-
324
- .o-btn-text {
325
- flex-grow: 1;
326
- }
327
-
328
303
  &[isLoading] {
329
304
  &:before {
305
+ content: '';
306
+
307
+ // Centre the spinner over the top of the button text
308
+ position: absolute;
309
+ left: 50%;
310
+ top: 50%;
311
+ translate: -50% -50%;
312
+
313
+ height: var(--spinner-size);
314
+ width: var(--spinner-size);
315
+ display: block;
316
+ background-color: transparent;
317
+ border-radius: 50%;
318
+ border-color: var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);
319
+ border-width: var(--spinner-border-width);
320
+ border-style: solid;
321
+ will-change: transform;
330
322
  animation: rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);
331
- opacity: 1;
332
323
  }
333
324
 
334
- & .o-btn-text {
335
- opacity: 0;
325
+ & > * {
326
+ visibility: hidden;
336
327
  }
337
328
  }
338
329
  }
package/src/defs.ts CHANGED
@@ -4,6 +4,7 @@ export const variants = [
4
4
  'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',
5
5
  'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',
6
6
  ] as const;
7
+ export const iconPlacements = ['leading', 'trailing'] as const;
7
8
 
8
9
  export type Variant = typeof variants[number];
9
10
 
@@ -20,6 +21,10 @@ export interface ButtonProps {
20
21
  * What style variant the button should be such as primary, outline or ghost.
21
22
  */
22
23
  variant: Variant;
24
+ /**
25
+ * The placement of the icon slot, if provided, such as leading or trailing
26
+ */
27
+ iconPlacement?: typeof iconPlacements[number];
23
28
  /**
24
29
  * When true, the button element is disabled.
25
30
  */
package/src/index.ts CHANGED
@@ -1,9 +1,11 @@
1
- import { LitElement, html, unsafeCSS } from 'lit';
1
+ import {
2
+ LitElement, html, unsafeCSS, nothing,
3
+ } from 'lit';
2
4
  import { property } from 'lit/decorators.js';
3
5
  import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
4
6
  import styles from './button.scss?inline';
5
7
  import {
6
- ButtonProps, sizes, types, variants,
8
+ ButtonProps, sizes, types, variants, iconPlacements,
7
9
  } from './defs';
8
10
 
9
11
  // Valid values available to consumers
@@ -12,8 +14,7 @@ export * from './defs';
12
14
  const componentSelector = 'pie-button';
13
15
 
14
16
  /**
15
- * @slot icon-leading - Leading icon
16
- * @slot icon-trailing - Trailing icon
17
+ * @slot icon - The icon slot
17
18
  * @slot - Default slot
18
19
  */
19
20
  export class PieButton extends LitElement implements ButtonProps {
@@ -29,6 +30,10 @@ export class PieButton extends LitElement implements ButtonProps {
29
30
  @validPropertyValues(componentSelector, variants, 'primary')
30
31
  public variant: ButtonProps['variant'] = 'primary';
31
32
 
33
+ @property({ type: String })
34
+ @validPropertyValues(componentSelector, iconPlacements, 'leading')
35
+ public iconPlacement: ButtonProps['iconPlacement'] = 'leading';
36
+
32
37
  @property({ type: Boolean })
33
38
  public disabled = false;
34
39
 
@@ -40,7 +45,13 @@ export class PieButton extends LitElement implements ButtonProps {
40
45
 
41
46
  render () {
42
47
  const {
43
- type, disabled, isFullWidth, variant, size, isLoading,
48
+ type,
49
+ disabled,
50
+ isFullWidth,
51
+ variant,
52
+ size,
53
+ isLoading,
54
+ iconPlacement,
44
55
  } = this;
45
56
 
46
57
  return html`
@@ -52,9 +63,9 @@ export class PieButton extends LitElement implements ButtonProps {
52
63
  ?disabled=${disabled}
53
64
  ?isFullWidth=${isFullWidth}
54
65
  ?isLoading=${isLoading}>
55
- <slot name="icon-leading"></slot>
56
- <span class="o-btn-text"><slot></slot></span>
57
- <slot name="icon-trailing"></slot>
66
+ ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
67
+ <slot></slot>
68
+ ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
58
69
  </button>`;
59
70
  }
60
71