@justeattakeaway/pie-icon-button 2.2.4 → 2.3.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 +7 -7
  2. package/custom-elements.json +2 -2
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.js +37 -36
  5. package/dist/react.d.ts +2 -2
  6. package/package.json +1 -1
  7. package/src/defs.ts +1 -1
  8. package/src/iconButton.scss +12 -8
  9. package/src/index.ts +1 -1
package/README.md CHANGED
@@ -30,13 +30,13 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
30
30
  ## Documentation
31
31
 
32
32
  ### Properties
33
- | Prop | Options | Description | Default |
34
- |-------------|--------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------|-------------|
35
- | `aria` | `{ label?: string }`, `{ labelledby?: string }`, `{ describedby?: string }`, `{ expanded?: boolean }`, `{ controls?: string }` | The ARIA attributes available to use on the icon button. Offers `label`, `labelledby`, `describedby`, `expanded` and `controls`. | `undefined` |
36
- | `size` | `"xsmall"`, `"small"`, `"medium"`, `"large"` | Set the size of the icon button. | `"medium"` |
37
- | `variant` | `"primary"`, `"secondary"`, `"outline"`, `"ghost"`, `"ghost-secondary"`, `"inverse"`, `"ghost-inverse"` | Set the variant of the icon button. | `"primary"` |
38
- | `disabled` | `true`, `false` | If true, disables the icon button. | `false` |
39
- | `isLoading` | `true`, `false` | If true, displays a loading indicator inside the icon button. | `false` |
33
+ | Prop | Options | Description | Default |
34
+ |------|---------|-------------|---------|
35
+ | `aria` | `{ label?: string }`, `{ labelledby?: string }`, `{ describedby?: string }`, `{ expanded?: boolean }`, `{ controls?: string }` | The ARIA attributes available to use on the icon button. Offers `label`, `labelledby`, `describedby`, `expanded` and `controls`. | `undefined` |
36
+ | `size` | `"xsmall"`, `"small"`, `"medium"`, `"large"` | Set the size of the icon button. | `"medium"` |
37
+ | `variant` | `"primary"`, `"secondary"`, `"outline"`, `"ghost"`, `"ghost-secondary"`, `"inverse"`, `"ghost-inverse"`, `"translucent"` | Set the variant of the icon button. | `"primary"` |
38
+ | `disabled` | `true`, `false` | If true, disables the icon button. | `false` |
39
+ | `isLoading` | `true`, `false` | If true, displays a loading indicator inside the icon button. | `false` |
40
40
 
41
41
 
42
42
  ### Slots
package/custom-elements.json CHANGED
@@ -24,9 +24,9 @@
24
24
  "kind": "variable",
25
25
  "name": "variants",
26
26
  "type": {
27
- "text": "['primary', 'secondary', 'outline', 'ghost',\n 'ghost-secondary', 'inverse', 'ghost-inverse']"
27
+ "text": "['primary', 'secondary', 'outline', 'ghost',\n 'ghost-secondary', 'inverse', 'ghost-inverse', 'translucent']"
28
28
  },
29
- "default": "['primary', 'secondary', 'outline', 'ghost',\n 'ghost-secondary', 'inverse', 'ghost-inverse']"
29
+ "default": "['primary', 'secondary', 'outline', 'ghost',\n 'ghost-secondary', 'inverse', 'ghost-inverse', 'translucent']"
30
30
  },
31
31
  {
32
32
  "kind": "variable",
package/dist/index.d.ts CHANGED
@@ -48,7 +48,7 @@ export declare interface IconButtonProps {
48
48
  export declare class PieIconButton extends PieIconButton_base implements IconButtonProps {
49
49
  aria: IconButtonProps['aria'];
50
50
  size: "xsmall" | "small" | "medium" | "large";
51
- variant: "primary" | "secondary" | "outline" | "ghost" | "ghost-secondary" | "inverse" | "ghost-inverse";
51
+ variant: "primary" | "secondary" | "outline" | "ghost" | "ghost-secondary" | "inverse" | "ghost-inverse" | "translucent";
52
52
  disabled: boolean;
53
53
  isLoading: boolean;
54
54
  /**
@@ -65,6 +65,6 @@ declare const PieIconButton_base: typeof PieElement;
65
65
 
66
66
  export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
67
67
 
68
- export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse"];
68
+ export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse", "translucent"];
69
69
 
70
70
  export { }
package/dist/index.js CHANGED
@@ -1,39 +1,40 @@
1
- import { LitElement as B, html as m, unsafeCSS as x } from "lit";
2
- import { classMap as f } from "lit/directives/class-map.js";
1
+ import { LitElement as p, html as m, unsafeCSS as u } from "lit";
2
+ import { classMap as x } from "lit/directives/class-map.js";
3
3
  import { property as d } from "lit/decorators.js";
4
4
  import { ifDefined as l } from "lit/directives/if-defined.js";
5
- import { DelegatesFocusMixin as u, validPropertyValues as g, safeCustomElement as y } from "@justeattakeaway/pie-webc-core";
5
+ import { DelegatesFocusMixin as f, validPropertyValues as g, safeCustomElement as y } from "@justeattakeaway/pie-webc-core";
6
6
  import "@justeattakeaway/pie-spinner";
7
- const v = class v extends B {
7
+ const v = class v extends p {
8
8
  willUpdate() {
9
9
  this.getAttribute("v") || this.setAttribute("v", v.v);
10
10
  }
11
11
  };
12
- v.v = "2.2.4";
12
+ v.v = "2.3.0";
13
13
  let h = v;
14
- const k = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--btn-dimension-default: 48px;--icon-size-override: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--int-states-mixin-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-light);--icon-display-override: block;block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--int-states-mixin-bg-color);color:var(--btn-icon-fill);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--icon-size-override);width:var(--icon-size-override)}.o-iconBtn.o-iconBtn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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-iconBtn.o-iconBtn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}.o-iconBtn.o-iconBtn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}.o-iconBtn.o-iconBtn--secondary{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary-solid)}.o-iconBtn.o-iconBtn--secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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-iconBtn.o-iconBtn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--secondary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary))}.o-iconBtn.o-iconBtn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--secondary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-secondary))}}.o-iconBtn.o-iconBtn--outline{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand-solid);border:1px solid var(--dt-color-border-strong)}.o-iconBtn.o-iconBtn--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--outline.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--outline.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-iconBtn.o-iconBtn--ghost{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand-solid)}.o-iconBtn.o-iconBtn--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-iconBtn.o-iconBtn--ghost-secondary{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--ghost-secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost-secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-secondary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost-secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--ghost-secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-secondary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-iconBtn.o-iconBtn--inverse{--int-states-mixin-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand-solid)}.o-iconBtn.o-iconBtn--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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-iconBtn.o-iconBtn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-inverse))}.o-iconBtn.o-iconBtn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-inverse))}}.o-iconBtn.o-iconBtn--ghost-inverse{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-primary-solid)}.o-iconBtn.o-iconBtn--ghost-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-transparent))}}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled-solid);cursor:not-allowed}.o-iconBtn[disabled]:not(.o-iconBtn--ghost,.o-iconBtn--ghost-secondary,.o-iconBtn--ghost-inverse){--int-states-mixin-bg-color: var(--dt-color-disabled-01);--btn-icon-fill: var(--dt-color-content-disabled)}.o-iconBtn[disabled].o-iconBtn--outline{border-color:var(--dt-color-disabled-01)}.o-iconBtn.o-iconBtn--xsmall{--btn-dimension: 32px;--icon-size-override: 20px}.o-iconBtn.o-iconBtn--small{--btn-dimension: 40px}.o-iconBtn.o-iconBtn--large{--btn-dimension: 56px;--icon-size-override: 28px}", z = ["xsmall", "small", "medium", "large"], w = [
14
+ const k = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--btn-dimension-default: 48px;--icon-size-override: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--int-states-mixin-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-light);block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));border-radius:var(--btn-border-radius);background-color:var(--int-states-mixin-bg-color);color:var(--btn-icon-fill);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn.o-iconBtn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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-iconBtn.o-iconBtn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}.o-iconBtn.o-iconBtn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}.o-iconBtn.o-iconBtn--secondary{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary-solid)}.o-iconBtn.o-iconBtn--secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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-iconBtn.o-iconBtn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--secondary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary))}.o-iconBtn.o-iconBtn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--secondary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-secondary))}}.o-iconBtn.o-iconBtn--outline{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand-solid);border:1px solid var(--dt-color-border-strong)}.o-iconBtn.o-iconBtn--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--outline.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--outline.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-iconBtn.o-iconBtn--ghost{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand-solid)}.o-iconBtn.o-iconBtn--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-iconBtn.o-iconBtn--ghost-secondary{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--ghost-secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost-secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-secondary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost-secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--ghost-secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-secondary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-iconBtn.o-iconBtn--inverse{--int-states-mixin-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand-solid)}.o-iconBtn.o-iconBtn--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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-iconBtn.o-iconBtn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-inverse))}.o-iconBtn.o-iconBtn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-inverse))}}.o-iconBtn.o-iconBtn--ghost-inverse{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-primary-solid)}.o-iconBtn.o-iconBtn--ghost-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-transparent))}}.o-iconBtn.o-iconBtn--translucent{--int-states-mixin-bg-color: var(--dt-color-container-neutral);--btn-icon-fill: var(--dt-color-content-interactive-secondary-solid);-webkit-backdrop-filter:blur(var(--dt-blur-neutral));backdrop-filter:blur(var(--dt-blur-neutral));border:1px solid var(--dt-color-border-neutral)}.o-iconBtn.o-iconBtn--translucent:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-neutral-h), var(--dt-color-container-neutral-s), calc(var(--dt-color-container-neutral-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--translucent.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-neutral-h), var(--dt-color-container-neutral-s), calc(var(--dt-color-container-neutral-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--translucent:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-neutral))}.o-iconBtn.o-iconBtn--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--translucent.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-neutral))}}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled-solid);cursor:not-allowed}.o-iconBtn[disabled]:not(.o-iconBtn--ghost,.o-iconBtn--ghost-secondary,.o-iconBtn--ghost-inverse){--int-states-mixin-bg-color: var(--dt-color-disabled-01);--btn-icon-fill: var(--dt-color-content-disabled)}.o-iconBtn[disabled].o-iconBtn--outline,.o-iconBtn[disabled].o-iconBtn--translucent{border-color:var(--dt-color-disabled-01)}.o-iconBtn.o-iconBtn--xsmall{--btn-dimension: 32px;--icon-size-override: 20px}.o-iconBtn.o-iconBtn--small{--btn-dimension: 40px}.o-iconBtn.o-iconBtn--large{--btn-dimension: 56px;--icon-size-override: 28px}", z = ["xsmall", "small", "medium", "large"], w = [
15
15
  "primary",
16
16
  "secondary",
17
17
  "outline",
18
18
  "ghost",
19
19
  "ghost-secondary",
20
20
  "inverse",
21
- "ghost-inverse"
22
- ], s = {
21
+ "ghost-inverse",
22
+ "translucent"
23
+ ], a = {
23
24
  size: "medium",
24
25
  variant: "primary",
25
26
  disabled: !1,
26
27
  isLoading: !1
27
28
  };
28
- var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (i, t, e, r) => {
29
- for (var o = r > 1 ? void 0 : r ? S(t, e) : t, c = i.length - 1, b; c >= 0; c--)
30
- (b = i[c]) && (o = (r ? b(t, e, o) : b(o)) || o);
31
- return r && o && $(t, e, o), o;
29
+ var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (t, r, e, i) => {
30
+ for (var o = i > 1 ? void 0 : i ? S(r, e) : r, c = t.length - 1, b; c >= 0; c--)
31
+ (b = t[c]) && (o = (i ? b(r, e, o) : b(o)) || o);
32
+ return i && o && $(r, e, o), o;
32
33
  };
33
- const p = "pie-icon-button";
34
- let n = class extends u(h) {
34
+ const B = "pie-icon-button";
35
+ let n = class extends f(h) {
35
36
  constructor() {
36
- super(...arguments), this.size = s.size, this.variant = s.variant, this.disabled = s.disabled, this.isLoading = s.isLoading;
37
+ super(...arguments), this.size = a.size, this.variant = a.variant, this.disabled = a.disabled, this.isLoading = a.isLoading;
37
38
  }
38
39
  /**
39
40
  * Template for the loading state
@@ -41,65 +42,65 @@ let n = class extends u(h) {
41
42
  * @private
42
43
  */
43
44
  renderSpinner() {
44
- const { variant: i, size: t, disabled: e } = this, r = t === "xsmall" ? "small" : "medium";
45
+ const { variant: t, size: r, disabled: e } = this, i = r === "xsmall" ? "small" : "medium";
45
46
  let o = "brand";
46
- return i != null && i.includes("secondary") && (o = "secondary"), (i === "primary" && !e || i === "ghost-inverse") && (o = "inverse"), m`
47
+ return /secondary|translucent/.test(t) && (o = "secondary"), (t === "primary" && !e || t === "ghost-inverse") && (o = "inverse"), m`
47
48
  <pie-spinner
48
- size="${r}"
49
+ size="${i}"
49
50
  variant="${o}">
50
51
  </pie-spinner>`;
51
52
  }
52
53
  render() {
53
54
  const {
54
- disabled: i,
55
- size: t,
55
+ disabled: t,
56
+ size: r,
56
57
  variant: e,
57
- isLoading: r,
58
+ isLoading: i,
58
59
  aria: o
59
60
  } = this, c = {
60
61
  "o-iconBtn": !0,
61
- [`o-iconBtn--${t}`]: !0,
62
+ [`o-iconBtn--${r}`]: !0,
62
63
  [`o-iconBtn--${e}`]: !0,
63
- "is-loading": r
64
+ "is-loading": i
64
65
  };
65
66
  return m`
66
67
  <button
67
- class="${f(c)}"
68
+ class="${x(c)}"
68
69
  data-test-id="pie-icon-button"
69
- ?disabled="${i}"
70
+ ?disabled="${t}"
70
71
  aria-label="${l(o == null ? void 0 : o.label)}"
71
72
  aria-labelledby="${l(o == null ? void 0 : o.labelledby)}"
72
73
  aria-describedby="${l(o == null ? void 0 : o.describedby)}"
73
74
  aria-expanded="${l(o == null ? void 0 : o.expanded)}"
74
75
  aria-controls="${l(o == null ? void 0 : o.controls)}">
75
- ${r ? this.renderSpinner() : m`<slot></slot>`}
76
+ ${i ? this.renderSpinner() : m`<slot></slot>`}
76
77
  </button>`;
77
78
  }
78
79
  };
79
- n.styles = x(k);
80
- a([
80
+ n.styles = u(k);
81
+ s([
81
82
  d({ type: Object })
82
83
  ], n.prototype, "aria", 2);
83
- a([
84
+ s([
84
85
  d({ type: String }),
85
- g(p, z, s.size)
86
+ g(B, z, a.size)
86
87
  ], n.prototype, "size", 2);
87
- a([
88
+ s([
88
89
  d({ type: String }),
89
- g(p, w, s.variant)
90
+ g(B, w, a.variant)
90
91
  ], n.prototype, "variant", 2);
91
- a([
92
+ s([
92
93
  d({ type: Boolean })
93
94
  ], n.prototype, "disabled", 2);
94
- a([
95
+ s([
95
96
  d({ type: Boolean })
96
97
  ], n.prototype, "isLoading", 2);
97
- n = a([
98
+ n = s([
98
99
  y("pie-icon-button")
99
100
  ], n);
100
101
  export {
101
102
  n as PieIconButton,
102
- s as defaultProps,
103
+ a as defaultProps,
103
104
  z as sizes,
104
105
  w as variants
105
106
  };
package/dist/react.d.ts CHANGED
@@ -51,7 +51,7 @@ export declare const PieIconButton: React_2.ForwardRefExoticComponent<React_2.Pr
51
51
  declare class PieIconButton_2 extends PieIconButton_base implements IconButtonProps {
52
52
  aria: IconButtonProps['aria'];
53
53
  size: "xsmall" | "small" | "medium" | "large";
54
- variant: "primary" | "secondary" | "outline" | "ghost" | "ghost-secondary" | "inverse" | "ghost-inverse";
54
+ variant: "primary" | "secondary" | "outline" | "ghost" | "ghost-secondary" | "inverse" | "ghost-inverse" | "translucent";
55
55
  disabled: boolean;
56
56
  isLoading: boolean;
57
57
  /**
@@ -70,6 +70,6 @@ declare type ReactBaseType = React_2.ButtonHTMLAttributes<HTMLButtonElement>;
70
70
 
71
71
  export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
72
72
 
73
- export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse"];
73
+ export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse", "translucent"];
74
74
 
75
75
  export { }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-icon-button",
3
- "version": "2.2.4",
3
+ "version": "2.3.0",
4
4
  "description": "PIE Design System Icon Button built using Web Components",
5
5
  "repository": {
6
6
  "type": "git",
package/src/defs.ts CHANGED
@@ -2,7 +2,7 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
 
3
3
  export const sizes = ['xsmall', 'small', 'medium', 'large'] as const;
4
4
  export const variants = ['primary', 'secondary', 'outline', 'ghost',
5
- 'ghost-secondary', 'inverse', 'ghost-inverse'] as const;
5
+ 'ghost-secondary', 'inverse', 'ghost-inverse', 'translucent'] as const;
6
6
 
7
7
  type AriaProps = {
8
8
  label?: string;
package/src/iconButton.scss CHANGED
@@ -17,12 +17,10 @@
17
17
  --btn-border-radius: var(--dt-radius-rounded-e);
18
18
  --int-states-mixin-bg-color: var(--dt-color-interactive-brand);
19
19
  --btn-icon-fill: var(--dt-color-content-interactive-light);
20
- --icon-display-override: block;
21
20
 
22
21
  block-size: var(--btn-dimension, var(--btn-dimension-default));
23
22
  inline-size: var(--btn-dimension, var(--btn-dimension-default));
24
23
 
25
- border-color: var(--btn-border-color);
26
24
  border-radius: var(--btn-border-radius);
27
25
  background-color: var(--int-states-mixin-bg-color);
28
26
  color: var(--btn-icon-fill);
@@ -39,11 +37,6 @@
39
37
  @include p.focus;
40
38
  }
41
39
 
42
- svg {
43
- height: var(--icon-size-override);
44
- width: var(--icon-size-override);
45
- }
46
-
47
40
  &.o-iconBtn--primary {
48
41
  /* Same as default styles */
49
42
 
@@ -94,6 +87,16 @@
94
87
  @include p.interactive-states('--dt-color-transparent', 'transparent', '02');
95
88
  }
96
89
 
90
+ &.o-iconBtn--translucent {
91
+ --int-states-mixin-bg-color: var(--dt-color-container-neutral);
92
+ --btn-icon-fill: var(--dt-color-content-interactive-secondary-solid);
93
+
94
+ backdrop-filter: blur(var(--dt-blur-neutral));
95
+ border: 1px solid var(--dt-color-border-neutral);
96
+
97
+ @include p.interactive-states('--dt-color-container-neutral');
98
+ }
99
+
97
100
  &[disabled] {
98
101
  --btn-icon-fill: var(--dt-color-content-disabled-solid);
99
102
 
@@ -106,7 +109,8 @@
106
109
  }
107
110
 
108
111
  // For outline variants, set the border to the disabled color
109
- &.o-iconBtn--outline {
112
+ &.o-iconBtn--outline,
113
+ &.o-iconBtn--translucent {
110
114
  border-color: var(--dt-color-disabled-01);
111
115
  }
112
116
  }
package/src/index.ts CHANGED
@@ -46,7 +46,7 @@ export class PieIconButton extends DelegatesFocusMixin(PieElement) implements Ic
46
46
  const { variant, size, disabled } = this;
47
47
  const spinnerSize = size === 'xsmall' ? 'small' : 'medium';
48
48
  let spinnerVariant = 'brand';
49
- if (variant?.includes('secondary')) spinnerVariant = 'secondary';
49
+ if (/secondary|translucent/.test(variant)) spinnerVariant = 'secondary';
50
50
  if ((variant === 'primary' && !disabled) || variant === 'ghost-inverse') spinnerVariant = 'inverse';
51
51
 
52
52
  return html`