@abgov/react-components 4.0.0-alpha.69 → 4.0.0-alpha.70

package/lib/icons/icon-button.d.ts

@@ -1,8 +1,9 @@
 import React, { FC } from 'react';
-import { IconSize, GoAIconType, IconVariant } from './icon';
+import { IconSize, GoAIconType } from './icon';
+declare type IconVariant = 'color' | 'nocolor';
 interface WCProps {
     ref: React.RefObject<HTMLElement>;
-    type: GoAIconType;
+    icon: GoAIconType;
     size?: IconSize;
     variant?: IconVariant;
     title?: string;
@@ -16,13 +17,13 @@ declare global {
     }
 }
 interface Props {
-    type: GoAIconType;
+    icon: GoAIconType;
     size?: IconSize;
     variant?: IconVariant;
     title?: string;
     disabled?: boolean;
     children?: React.ReactNode;
-    onClick: () => void;
+    onClick?: () => void;
 }
 export declare const GoAIconButton: FC<Props>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.69",
+  "version": "4.0.0-alpha.70",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -7646,7 +7646,7 @@ function create_fragment$h(ctx) {
       /*title*/
       ctx[3]);
       set_custom_element_data(goa_icon, "type",
-      /*type*/
+      /*icon*/
       ctx[0]);
       set_custom_element_data(goa_icon, "size",
       /*size*/
@@ -7694,10 +7694,10 @@ function create_fragment$h(ctx) {
       }
 
       if (dirty &
-      /*type*/
+      /*icon*/
       1) {
         set_custom_element_data(goa_icon, "type",
-        /*type*/
+        /*icon*/
         ctx[0]);
       }
 
@@ -7795,7 +7795,7 @@ function instance$f($$self, $$props, $$invalidate) {
   let _size;
 
   let {
-    type
+    icon
   } = $$props;
   let {
     size = "medium"
@@ -7820,7 +7820,7 @@ function instance$f($$self, $$props, $$invalidate) {
   } = $$props;
 
   $$self.$$set = $$props => {
-    if ('type' in $$props) $$invalidate(0, type = $$props.type);
+    if ('icon' in $$props) $$invalidate(0, icon = $$props.icon);
     if ('size' in $$props) $$invalidate(1, size = $$props.size);
     if ('theme' in $$props) $$invalidate(2, theme = $$props.theme);
     if ('variant' in $$props) $$invalidate(9, variant = $$props.variant);
@@ -7861,19 +7861,19 @@ function instance$f($$self, $$props, $$invalidate) {
     }
   };
 
-  return [type, size, theme, title, testId, isInverted, _size, isDisabled, css, variant, disabled, inverted];
+  return [icon, size, theme, title, testId, isInverted, _size, isDisabled, css, variant, disabled, inverted];
 }
 
 class IconButton extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;justify-content:center;background:transparent;cursor:pointer;border:none}.color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.color:active,.nocolor:active{transform:scale(0.9);border:none}.color:hover{background-color:var(--goa-color-primary-light)}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}button:disabled:hover{background-color:transparent}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}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;padding:0 0.75rem}.color{border-radius:0.5rem;padding:calc(var(--size) / 4);color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.nocolor{border-radius:0.5rem;padding:calc(var(--size) / 4)}button:hover{background-color:var(--color-gray-100);border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);outline:none}button:focus,button:active{background-color:var(--color-gray-100);border-color:var(--goa-color-interactive--active);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$f, create_fragment$h, safe_not_equal, {
-      type: 0,
+      icon: 0,
       size: 1,
       theme: 2,
       variant: 9,
@@ -7896,16 +7896,16 @@ class IconButton extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["type", "size", "theme", "variant", "title", "testId", "disabled", "inverted"];
+    return ["icon", "size", "theme", "variant", "title", "testId", "disabled", "inverted"];
   }
 
-  get type() {
+  get icon() {
     return this.$$.ctx[0];
   }
 
-  set type(type) {
+  set icon(icon) {
     this.$$set({
-      type
+      icon
     });
     flush();
   }
@@ -8458,7 +8458,7 @@ function create_if_block_4(ctx) {
       ctx[19]);
       set_custom_element_data(goa_icon_button, "variant", "nocolor");
       set_custom_element_data(goa_icon_button, "size", "medium");
-      set_custom_element_data(goa_icon_button, "type",
+      set_custom_element_data(goa_icon_button, "icon",
       /*trailingicon*/
       ctx[6]);
       set_custom_element_data(goa_icon_button, "data-testid", "trailing-icon-button");
@@ -8485,7 +8485,7 @@ function create_if_block_4(ctx) {
       if (dirty[0] &
       /*trailingicon*/
       64) {
-        set_custom_element_data(goa_icon_button, "type",
+        set_custom_element_data(goa_icon_button, "icon",
         /*trailingicon*/
         ctx[6]);
       }
@@ -10272,7 +10272,7 @@ function create_if_block_2$2(ctx) {
       div = element("div");
       goa_icon_button = element("goa-icon-button");
       set_custom_element_data(goa_icon_button, "data-testid", "modal-close-button");
-      set_custom_element_data(goa_icon_button, "type", "close");
+      set_custom_element_data(goa_icon_button, "icon", "close");
       attr(div, "class", "modal-close");
     },
 
@@ -10618,7 +10618,7 @@ function create_if_block$4(ctx) {
       set_custom_element_data(goa_icon, "inverted", "");
       attr(div0, "class", "icon");
       attr(div1, "class", "content");
-      set_custom_element_data(goa_icon_button, "type", "close");
+      set_custom_element_data(goa_icon_button, "icon", "close");
       set_custom_element_data(goa_icon_button, "inverted", "");
       attr(div2, "class", "close");
       attr(div3, "class", div3_class_value = "notification " +
@@ -14668,9 +14668,9 @@ function GoAIcon({
 }
 
 const GoAIconButton = ({
-  type,
+  icon,
   disabled,
-  variant: _variant = 'primary',
+  variant: _variant = 'color',
   onClick,
   size: _size = 'medium',
   title,
@@ -14682,6 +14682,10 @@ const GoAIconButton = ({
       return;
     }
 
+    if (!onClick) {
+      return;
+    }
+
     const current = ref.current;
 
     const listener = e => {
@@ -14695,7 +14699,7 @@ const GoAIconButton = ({
   }, [ref, onClick]);
   return jsx("goa-icon-button", Object.assign({
     ref: ref,
-    type: type,
+    icon: icon,
     disabled: disabled,
     variant: _variant,
     size: _size,

package/react-components.umd.js

@@ -7693,7 +7693,7 @@
 	      /*title*/
 	      ctx[3]);
 	      set_custom_element_data(goa_icon, "type",
-	      /*type*/
+	      /*icon*/
 	      ctx[0]);
 	      set_custom_element_data(goa_icon, "size",
 	      /*size*/
@@ -7741,10 +7741,10 @@
 	      }
 
 	      if (dirty &
-	      /*type*/
+	      /*icon*/
 	      1) {
 	        set_custom_element_data(goa_icon, "type",
-	        /*type*/
+	        /*icon*/
 	        ctx[0]);
 	      }
 
@@ -7842,7 +7842,7 @@
 	  let _size;
 
 	  let {
-	    type
+	    icon
 	  } = $$props;
 	  let {
 	    size = "medium"
@@ -7867,7 +7867,7 @@
 	  } = $$props;
 
 	  $$self.$$set = $$props => {
-	    if ('type' in $$props) $$invalidate(0, type = $$props.type);
+	    if ('icon' in $$props) $$invalidate(0, icon = $$props.icon);
 	    if ('size' in $$props) $$invalidate(1, size = $$props.size);
 	    if ('theme' in $$props) $$invalidate(2, theme = $$props.theme);
 	    if ('variant' in $$props) $$invalidate(9, variant = $$props.variant);
@@ -7908,19 +7908,19 @@
 	    }
 	  };
 
-	  return [type, size, theme, title, testId, isInverted, _size, isDisabled, css, variant, disabled, inverted];
+	  return [icon, size, theme, title, testId, isInverted, _size, isDisabled, css, variant, disabled, inverted];
 	}
 
 	class IconButton extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;justify-content:center;background:transparent;cursor:pointer;border:none}.color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.color:active,.nocolor:active{transform:scale(0.9);border:none}.color:hover{background-color:var(--goa-color-primary-light)}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}button:disabled:hover{background-color:transparent}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}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;padding:0 0.75rem}.color{border-radius:0.5rem;padding:calc(var(--size) / 4);color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.nocolor{border-radius:0.5rem;padding:calc(var(--size) / 4)}button:hover{background-color:var(--color-gray-100);border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);outline:none}button:focus,button:active{background-color:var(--color-gray-100);border-color:var(--goa-color-interactive--active);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$f, create_fragment$h, safe_not_equal, {
-	      type: 0,
+	      icon: 0,
 	      size: 1,
 	      theme: 2,
 	      variant: 9,
@@ -7943,16 +7943,16 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["type", "size", "theme", "variant", "title", "testId", "disabled", "inverted"];
+	    return ["icon", "size", "theme", "variant", "title", "testId", "disabled", "inverted"];
 	  }
 
-	  get type() {
+	  get icon() {
 	    return this.$$.ctx[0];
 	  }
 
-	  set type(type) {
+	  set icon(icon) {
 	    this.$$set({
-	      type
+	      icon
 	    });
 	    flush();
 	  }
@@ -8505,7 +8505,7 @@
 	      ctx[19]);
 	      set_custom_element_data(goa_icon_button, "variant", "nocolor");
 	      set_custom_element_data(goa_icon_button, "size", "medium");
-	      set_custom_element_data(goa_icon_button, "type",
+	      set_custom_element_data(goa_icon_button, "icon",
 	      /*trailingicon*/
 	      ctx[6]);
 	      set_custom_element_data(goa_icon_button, "data-testid", "trailing-icon-button");
@@ -8532,7 +8532,7 @@
 	      if (dirty[0] &
 	      /*trailingicon*/
 	      64) {
-	        set_custom_element_data(goa_icon_button, "type",
+	        set_custom_element_data(goa_icon_button, "icon",
 	        /*trailingicon*/
 	        ctx[6]);
 	      }
@@ -10319,7 +10319,7 @@
 	      div = element("div");
 	      goa_icon_button = element("goa-icon-button");
 	      set_custom_element_data(goa_icon_button, "data-testid", "modal-close-button");
-	      set_custom_element_data(goa_icon_button, "type", "close");
+	      set_custom_element_data(goa_icon_button, "icon", "close");
 	      attr(div, "class", "modal-close");
 	    },
 
@@ -10665,7 +10665,7 @@
 	      set_custom_element_data(goa_icon, "inverted", "");
 	      attr(div0, "class", "icon");
 	      attr(div1, "class", "content");
-	      set_custom_element_data(goa_icon_button, "type", "close");
+	      set_custom_element_data(goa_icon_button, "icon", "close");
 	      set_custom_element_data(goa_icon_button, "inverted", "");
 	      attr(div2, "class", "close");
 	      attr(div3, "class", div3_class_value = "notification " +
@@ -14741,10 +14741,10 @@
 	}
 
 	var GoAIconButton = function GoAIconButton(_a) {
-	  var type = _a.type,
+	  var icon = _a.icon,
 	      disabled = _a.disabled,
 	      _b = _a.variant,
-	      variant = _b === void 0 ? 'primary' : _b,
+	      variant = _b === void 0 ? 'color' : _b,
 	      onClick = _a.onClick,
 	      _c = _a.size,
 	      size = _c === void 0 ? 'medium' : _c,
@@ -14756,6 +14756,10 @@
 	      return;
 	    }
 
+	    if (!onClick) {
+	      return;
+	    }
+
 	    var current = ref.current;
 
 	    var listener = function listener(e) {
@@ -14769,7 +14773,7 @@
 	  }, [ref, onClick]);
 	  return jsxRuntime.jsx("goa-icon-button", __assign({
 	    ref: ref,
-	    type: type,
+	    icon: icon,
 	    disabled: disabled,
 	    variant: variant,
 	    size: size,