@abgov/react-components 4.0.0-alpha.124 → 4.0.0-alpha.126
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.
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { FC } from "react";
|
|
2
2
|
import { Margins } from "../../common/styling";
|
|
3
3
|
import { IconSize, GoAIconType } from "../icon/icon";
|
|
4
|
-
declare type
|
|
4
|
+
export declare type IconButtonVariant = "color" | "nocolor" | "dark" | "destructive";
|
|
5
5
|
interface WCProps extends Margins {
|
|
6
6
|
ref: React.RefObject<HTMLElement>;
|
|
7
7
|
icon: GoAIconType;
|
|
8
8
|
size?: IconSize;
|
|
9
|
-
variant?:
|
|
9
|
+
variant?: IconButtonVariant;
|
|
10
10
|
title?: string;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
}
|
|
@@ -20,7 +20,7 @@ declare global {
|
|
|
20
20
|
interface Props extends Margins {
|
|
21
21
|
icon: GoAIconType;
|
|
22
22
|
size?: IconSize;
|
|
23
|
-
variant?:
|
|
23
|
+
variant?: IconButtonVariant;
|
|
24
24
|
title?: string;
|
|
25
25
|
disabled?: boolean;
|
|
26
26
|
children?: React.ReactNode;
|
package/package.json
CHANGED
package/react-components.esm.js
CHANGED
|
@@ -2176,7 +2176,7 @@ function instance$F($$self, $$props, $$invalidate) {
|
|
|
2176
2176
|
class Badge extends SvelteElement {
|
|
2177
2177
|
constructor(options) {
|
|
2178
2178
|
super();
|
|
2179
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--goa-font-weight-regular)}.icon-only{padding:0.25rem}.goa-badge-content{
|
|
2179
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--goa-font-weight-regular)}.icon-only{padding:0.25rem}.goa-badge-content{font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);padding-bottom:var(--font-valign-fix, 0)}.goa-badge.badge-information{background-color:var(--goa-color-greyscale-100);color:var(--goa-color-info-default)}.goa-badge.badge-success{background-color:var(--goa-color-success-default);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.goa-badge.badge-emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--goa-color-greyscale-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--goa-color-greyscale-700);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-default)}</style>`;
|
|
2180
2180
|
init(this, {
|
|
2181
2181
|
target: this.shadowRoot,
|
|
2182
2182
|
props: attribute_to_object(this.attributes),
|
|
@@ -10277,7 +10277,7 @@ function instance$k($$self, $$props, $$invalidate) {
|
|
|
10277
10277
|
|
|
10278
10278
|
let _paddingSize;
|
|
10279
10279
|
|
|
10280
|
-
const [Variants, validateVariant] = typeValidator("Icon Button Variant", ["color", "nocolor", "dark"], true);
|
|
10280
|
+
const [Variants, validateVariant] = typeValidator("Icon Button Variant", ["color", "nocolor", "dark", "destructive"], true);
|
|
10281
10281
|
let {
|
|
10282
10282
|
icon
|
|
10283
10283
|
} = $$props;
|
|
@@ -10370,7 +10370,7 @@ function instance$k($$self, $$props, $$invalidate) {
|
|
|
10370
10370
|
class IconButton extends SvelteElement {
|
|
10371
10371
|
constructor(options) {
|
|
10372
10372
|
super();
|
|
10373
|
-
this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--goa-font-family-sans)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive-default);fill:var(--goa-color-interactive-default);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);outline:none}button:focus,button:active{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-interactive-focus);color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-interactive-hover)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--goa-color-greyscale-white)}</style>`;
|
|
10373
|
+
this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--goa-font-family-sans)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive-default);fill:var(--goa-color-interactive-default);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover:not(.destructive){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);outline:none}button:focus:not(.destructive),button:active:not(.destructive){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-interactive-focus);color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-interactive-hover)}.destructive{color:var(--goa-color-emergency-dark);fill:var(--goa-color-emergency-dark)}.destructive:hover{background-color:var(--goa-color-emergency-light);border-color:var(--goa-color-emergency-light);outline:none}.destructive:focus,.destructive:active{background-color:var(--goa-color-emergency-light);border-color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--goa-color-greyscale-white)}</style>`;
|
|
10374
10374
|
init(this, {
|
|
10375
10375
|
target: this.shadowRoot,
|
|
10376
10376
|
props: attribute_to_object(this.attributes),
|
package/react-components.umd.js
CHANGED
|
@@ -2217,7 +2217,7 @@
|
|
|
2217
2217
|
class Badge extends SvelteElement {
|
|
2218
2218
|
constructor(options) {
|
|
2219
2219
|
super();
|
|
2220
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--goa-font-weight-regular)}.icon-only{padding:0.25rem}.goa-badge-content{
|
|
2220
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--goa-font-weight-regular)}.icon-only{padding:0.25rem}.goa-badge-content{font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);padding-bottom:var(--font-valign-fix, 0)}.goa-badge.badge-information{background-color:var(--goa-color-greyscale-100);color:var(--goa-color-info-default)}.goa-badge.badge-success{background-color:var(--goa-color-success-default);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.goa-badge.badge-emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--goa-color-greyscale-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--goa-color-greyscale-700);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-default)}</style>`;
|
|
2221
2221
|
init(this, {
|
|
2222
2222
|
target: this.shadowRoot,
|
|
2223
2223
|
props: attribute_to_object(this.attributes),
|
|
@@ -10323,7 +10323,7 @@
|
|
|
10323
10323
|
|
|
10324
10324
|
let _paddingSize;
|
|
10325
10325
|
|
|
10326
|
-
const [Variants, validateVariant] = typeValidator("Icon Button Variant", ["color", "nocolor", "dark"], true);
|
|
10326
|
+
const [Variants, validateVariant] = typeValidator("Icon Button Variant", ["color", "nocolor", "dark", "destructive"], true);
|
|
10327
10327
|
let {
|
|
10328
10328
|
icon
|
|
10329
10329
|
} = $$props;
|
|
@@ -10416,7 +10416,7 @@
|
|
|
10416
10416
|
class IconButton extends SvelteElement {
|
|
10417
10417
|
constructor(options) {
|
|
10418
10418
|
super();
|
|
10419
|
-
this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--goa-font-family-sans)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive-default);fill:var(--goa-color-interactive-default);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);outline:none}button:focus,button:active{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-interactive-focus);color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-interactive-hover)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--goa-color-greyscale-white)}</style>`;
|
|
10419
|
+
this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--goa-font-family-sans)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive-default);fill:var(--goa-color-interactive-default);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover:not(.destructive){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);outline:none}button:focus:not(.destructive),button:active:not(.destructive){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-interactive-focus);color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-interactive-hover)}.destructive{color:var(--goa-color-emergency-dark);fill:var(--goa-color-emergency-dark)}.destructive:hover{background-color:var(--goa-color-emergency-light);border-color:var(--goa-color-emergency-light);outline:none}.destructive:focus,.destructive:active{background-color:var(--goa-color-emergency-light);border-color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--goa-color-greyscale-white)}</style>`;
|
|
10420
10420
|
init(this, {
|
|
10421
10421
|
target: this.shadowRoot,
|
|
10422
10422
|
props: attribute_to_object(this.attributes),
|