@abgov/react-components 4.0.0-alpha.63 → 4.0.0-alpha.64

package/lib/chip/chip.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+declare type ChipVariant = "filter";
 interface WCProps {
     ref: React.RefObject<HTMLElement>;
     leadingicon: string;
     error: boolean;
     deletable: boolean;
     content: string;
+    variant?: string;
 }
 declare global {
     namespace JSX {
@@ -19,6 +21,7 @@ interface Props {
     leadingIcon?: string;
     error?: boolean;
     content: string;
+    variant?: ChipVariant;
 }
-export declare const GoAChip: ({ leadingIcon, deletable, error, content, onClick }: Props) => JSX.Element;
+export declare const GoAChip: ({ leadingIcon, deletable, error, variant, content, onClick }: Props) => JSX.Element;
 export default GoAChip;

package/package.json

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

package/react-components.esm.js

@@ -3456,7 +3456,7 @@ function create_if_block_1$8(ctx) {
     }
 
   };
-} // (42:2) {#if _deletable}
+} // (44:2) {#if _deletable}
 
 
 function create_if_block$e(ctx) {
@@ -3472,14 +3472,14 @@ function create_if_block$e(ctx) {
       set_custom_element_data(goa_icon, "type", "close-circle");
       set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
       /*_error*/
-      ctx[4] ? "var(--goa-color-status-emergency)" :
+      ctx[5] ? "var(--goa-color-status-emergency)" :
       /*_hovering*/
-      ctx[3] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
+      ctx[4] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
       set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value =
       /*_error*/
-      ctx[4] ?
+      ctx[5] ?
       /*_hovering*/
-      ctx[3] ? 1 : 0.5 : 1);
+      ctx[4] ? 1 : 0.5 : 1);
     },
 
     m(target, anchor) {
@@ -3489,21 +3489,21 @@ function create_if_block$e(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*_error, _hovering*/
-      24 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
+      48 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
       /*_error*/
-      ctx[4] ? "var(--goa-color-status-emergency)" :
+      ctx[5] ? "var(--goa-color-status-emergency)" :
       /*_hovering*/
-      ctx[3] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
+      ctx[4] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
         set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
       }
 
       if (dirty &
       /*_error, _hovering*/
-      24 && goa_icon_opacity_value !== (goa_icon_opacity_value =
+      48 && goa_icon_opacity_value !== (goa_icon_opacity_value =
       /*_error*/
-      ctx[4] ?
+      ctx[5] ?
       /*_hovering*/
-      ctx[3] ? 1 : 0.5 : 1)) {
+      ctx[4] ? 1 : 0.5 : 1)) {
         set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value);
       }
     },
@@ -3528,7 +3528,7 @@ function create_fragment$u(ctx) {
   ctx[0] && create_if_block_1$8(ctx);
   let if_block1 =
   /*_deletable*/
-  ctx[5] && create_if_block$e(ctx);
+  ctx[6] && create_if_block$e(ctx);
   return {
     c() {
       div1 = element("div");
@@ -3547,10 +3547,13 @@ function create_fragment$u(ctx) {
       attr(div1, "tabindex", "0");
       toggle_class(div1, "deletable",
       /*_deletable*/
-      ctx[5]);
+      ctx[6]);
       toggle_class(div1, "error",
       /*_error*/
-      ctx[4]);
+      ctx[5]);
+      toggle_class(div1, "variant",
+      /*variant*/
+      ctx[2]);
     },
 
     m(target, anchor) {
@@ -3563,20 +3566,20 @@ function create_fragment$u(ctx) {
       if (if_block1) if_block1.m(div1, null);
       /*div1_binding*/
 
-      ctx[9](div1);
+      ctx[10](div1);
 
       if (!mounted) {
         dispose = [listen(div1, "click",
         /*click_handler*/
-        ctx[10]), listen(div1, "mouseover",
+        ctx[11]), listen(div1, "mouseover",
         /*mouseover_handler*/
-        ctx[11]), listen(div1, "mouseout",
+        ctx[12]), listen(div1, "mouseout",
         /*mouseout_handler*/
-        ctx[12]), listen(div1, "focus",
+        ctx[13]), listen(div1, "focus",
         /*focus_handler*/
-        ctx[13]), listen(div1, "blur",
+        ctx[14]), listen(div1, "blur",
         /*blur_handler*/
-        ctx[14])];
+        ctx[15])];
         mounted = true;
       }
     },
@@ -3605,7 +3608,7 @@ function create_fragment$u(ctx) {
 
       if (
       /*_deletable*/
-      ctx[5]) {
+      ctx[6]) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
@@ -3620,18 +3623,26 @@ function create_fragment$u(ctx) {
 
       if (dirty &
       /*_deletable*/
-      32) {
+      64) {
         toggle_class(div1, "deletable",
         /*_deletable*/
-        ctx[5]);
+        ctx[6]);
       }
 
       if (dirty &
       /*_error*/
-      16) {
+      32) {
         toggle_class(div1, "error",
         /*_error*/
-        ctx[4]);
+        ctx[5]);
+      }
+
+      if (dirty &
+      /*variant*/
+      4) {
+        toggle_class(div1, "variant",
+        /*variant*/
+        ctx[2]);
       }
     },
 
@@ -3644,7 +3655,7 @@ function create_fragment$u(ctx) {
       if (if_block1) if_block1.d();
       /*div1_binding*/
 
-      ctx[9](null);
+      ctx[10](null);
       mounted = false;
       run_all(dispose);
     }
@@ -3665,6 +3676,9 @@ function instance$s($$self, $$props, $$invalidate) {
   let {
     content
   } = $$props;
+  let {
+    variant
+  } = $$props;
   let el;
   let _hovering = false; // booleans
 
@@ -3683,42 +3697,43 @@ function instance$s($$self, $$props, $$invalidate) {
   function div1_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       el = $$value;
-      $$invalidate(2, el);
+      $$invalidate(3, el);
     });
   }
 
   const click_handler = e => _deletable && onDelete(e);
 
-  const mouseover_handler = () => $$invalidate(3, _hovering = true);
+  const mouseover_handler = () => $$invalidate(4, _hovering = true);
 
-  const mouseout_handler = () => $$invalidate(3, _hovering = false);
+  const mouseout_handler = () => $$invalidate(4, _hovering = false);
 
-  const focus_handler = () => $$invalidate(3, _hovering = false);
+  const focus_handler = () => $$invalidate(4, _hovering = false);
 
-  const blur_handler = () => $$invalidate(3, _hovering = false);
+  const blur_handler = () => $$invalidate(4, _hovering = false);
 
   $$self.$$set = $$props => {
     if ('leadingicon' in $$props) $$invalidate(0, leadingicon = $$props.leadingicon);
-    if ('error' in $$props) $$invalidate(7, error = $$props.error);
-    if ('deletable' in $$props) $$invalidate(8, deletable = $$props.deletable);
+    if ('error' in $$props) $$invalidate(8, error = $$props.error);
+    if ('deletable' in $$props) $$invalidate(9, deletable = $$props.deletable);
     if ('content' in $$props) $$invalidate(1, content = $$props.content);
+    if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*error*/
-    128) {
-      $$invalidate(4, _error = toBoolean(error));
+    256) {
+      $$invalidate(5, _error = toBoolean(error));
     }
 
     if ($$self.$$.dirty &
     /*deletable*/
-    256) {
-      $$invalidate(5, _deletable = toBoolean(deletable));
+    512) {
+      $$invalidate(6, _deletable = toBoolean(deletable));
     }
   };
 
-  return [leadingicon, content, el, _hovering, _error, _deletable, onDelete, error, deletable, div1_binding, click_handler, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
+  return [leadingicon, content, variant, el, _hovering, _error, _deletable, onDelete, error, deletable, div1_binding, click_handler, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
 }
 
 class Chip extends SvelteElement {
@@ -3731,9 +3746,10 @@ class Chip extends SvelteElement {
       customElement: true
     }, instance$s, create_fragment$u, safe_not_equal, {
       leadingicon: 0,
-      error: 7,
-      deletable: 8,
-      content: 1
+      error: 8,
+      deletable: 9,
+      content: 1,
+      variant: 2
     }, null);
 
     if (options) {
@@ -3749,7 +3765,7 @@ class Chip extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["leadingicon", "error", "deletable", "content"];
+    return ["leadingicon", "error", "deletable", "content", "variant"];
   }
 
   get leadingicon() {
@@ -3764,7 +3780,7 @@ class Chip extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[8];
   }
 
   set error(error) {
@@ -3775,7 +3791,7 @@ class Chip extends SvelteElement {
   }
 
   get deletable() {
-    return this.$$.ctx[8];
+    return this.$$.ctx[9];
   }
 
   set deletable(deletable) {
@@ -3796,6 +3812,17 @@ class Chip extends SvelteElement {
     flush();
   }
 
+  get variant() {
+    return this.$$.ctx[2];
+  }
+
+  set variant(variant) {
+    this.$$set({
+      variant
+    });
+    flush();
+  }
+
 }
 
 customElements.define("goa-chip", Chip);
@@ -14406,6 +14433,7 @@ const GoAChip = ({
   leadingIcon: _leadingIcon = "",
   deletable: _deletable = false,
   error: _error = false,
+  variant,
   content,
   onClick
 }) => {
@@ -14429,7 +14457,8 @@ const GoAChip = ({
     leadingicon: _leadingIcon,
     error: _error,
     deletable: _deletable,
-    content: content
+    content: content,
+    variant: variant
   }, void 0);
 };
 

package/react-components.umd.js

@@ -3497,7 +3497,7 @@
 	    }
 
 	  };
-	} // (42:2) {#if _deletable}
+	} // (44:2) {#if _deletable}
 
 
 	function create_if_block$e(ctx) {
@@ -3513,14 +3513,14 @@
 	      set_custom_element_data(goa_icon, "type", "close-circle");
 	      set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
 	      /*_error*/
-	      ctx[4] ? "var(--goa-color-status-emergency)" :
+	      ctx[5] ? "var(--goa-color-status-emergency)" :
 	      /*_hovering*/
-	      ctx[3] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
+	      ctx[4] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
 	      set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value =
 	      /*_error*/
-	      ctx[4] ?
+	      ctx[5] ?
 	      /*_hovering*/
-	      ctx[3] ? 1 : 0.5 : 1);
+	      ctx[4] ? 1 : 0.5 : 1);
 	    },
 
 	    m(target, anchor) {
@@ -3530,21 +3530,21 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*_error, _hovering*/
-	      24 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
+	      48 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
 	      /*_error*/
-	      ctx[4] ? "var(--goa-color-status-emergency)" :
+	      ctx[5] ? "var(--goa-color-status-emergency)" :
 	      /*_hovering*/
-	      ctx[3] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
+	      ctx[4] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
 	        set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
 	      }
 
 	      if (dirty &
 	      /*_error, _hovering*/
-	      24 && goa_icon_opacity_value !== (goa_icon_opacity_value =
+	      48 && goa_icon_opacity_value !== (goa_icon_opacity_value =
 	      /*_error*/
-	      ctx[4] ?
+	      ctx[5] ?
 	      /*_hovering*/
-	      ctx[3] ? 1 : 0.5 : 1)) {
+	      ctx[4] ? 1 : 0.5 : 1)) {
 	        set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value);
 	      }
 	    },
@@ -3569,7 +3569,7 @@
 	  ctx[0] && create_if_block_1$8(ctx);
 	  let if_block1 =
 	  /*_deletable*/
-	  ctx[5] && create_if_block$e(ctx);
+	  ctx[6] && create_if_block$e(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -3588,10 +3588,13 @@
 	      attr(div1, "tabindex", "0");
 	      toggle_class(div1, "deletable",
 	      /*_deletable*/
-	      ctx[5]);
+	      ctx[6]);
 	      toggle_class(div1, "error",
 	      /*_error*/
-	      ctx[4]);
+	      ctx[5]);
+	      toggle_class(div1, "variant",
+	      /*variant*/
+	      ctx[2]);
 	    },
 
 	    m(target, anchor) {
@@ -3604,20 +3607,20 @@
 	      if (if_block1) if_block1.m(div1, null);
 	      /*div1_binding*/
 
-	      ctx[9](div1);
+	      ctx[10](div1);
 
 	      if (!mounted) {
 	        dispose = [listen(div1, "click",
 	        /*click_handler*/
-	        ctx[10]), listen(div1, "mouseover",
+	        ctx[11]), listen(div1, "mouseover",
 	        /*mouseover_handler*/
-	        ctx[11]), listen(div1, "mouseout",
+	        ctx[12]), listen(div1, "mouseout",
 	        /*mouseout_handler*/
-	        ctx[12]), listen(div1, "focus",
+	        ctx[13]), listen(div1, "focus",
 	        /*focus_handler*/
-	        ctx[13]), listen(div1, "blur",
+	        ctx[14]), listen(div1, "blur",
 	        /*blur_handler*/
-	        ctx[14])];
+	        ctx[15])];
 	        mounted = true;
 	      }
 	    },
@@ -3646,7 +3649,7 @@
 
 	      if (
 	      /*_deletable*/
-	      ctx[5]) {
+	      ctx[6]) {
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
@@ -3661,18 +3664,26 @@
 
 	      if (dirty &
 	      /*_deletable*/
-	      32) {
+	      64) {
 	        toggle_class(div1, "deletable",
 	        /*_deletable*/
-	        ctx[5]);
+	        ctx[6]);
 	      }
 
 	      if (dirty &
 	      /*_error*/
-	      16) {
+	      32) {
 	        toggle_class(div1, "error",
 	        /*_error*/
-	        ctx[4]);
+	        ctx[5]);
+	      }
+
+	      if (dirty &
+	      /*variant*/
+	      4) {
+	        toggle_class(div1, "variant",
+	        /*variant*/
+	        ctx[2]);
 	      }
 	    },
 
@@ -3685,7 +3696,7 @@
 	      if (if_block1) if_block1.d();
 	      /*div1_binding*/
 
-	      ctx[9](null);
+	      ctx[10](null);
 	      mounted = false;
 	      run_all(dispose);
 	    }
@@ -3706,6 +3717,9 @@
 	  let {
 	    content
 	  } = $$props;
+	  let {
+	    variant
+	  } = $$props;
 	  let el;
 	  let _hovering = false; // booleans
 
@@ -3724,42 +3738,43 @@
 	  function div1_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      el = $$value;
-	      $$invalidate(2, el);
+	      $$invalidate(3, el);
 	    });
 	  }
 
 	  const click_handler = e => _deletable && onDelete(e);
 
-	  const mouseover_handler = () => $$invalidate(3, _hovering = true);
+	  const mouseover_handler = () => $$invalidate(4, _hovering = true);
 
-	  const mouseout_handler = () => $$invalidate(3, _hovering = false);
+	  const mouseout_handler = () => $$invalidate(4, _hovering = false);
 
-	  const focus_handler = () => $$invalidate(3, _hovering = false);
+	  const focus_handler = () => $$invalidate(4, _hovering = false);
 
-	  const blur_handler = () => $$invalidate(3, _hovering = false);
+	  const blur_handler = () => $$invalidate(4, _hovering = false);
 
 	  $$self.$$set = $$props => {
 	    if ('leadingicon' in $$props) $$invalidate(0, leadingicon = $$props.leadingicon);
-	    if ('error' in $$props) $$invalidate(7, error = $$props.error);
-	    if ('deletable' in $$props) $$invalidate(8, deletable = $$props.deletable);
+	    if ('error' in $$props) $$invalidate(8, error = $$props.error);
+	    if ('deletable' in $$props) $$invalidate(9, deletable = $$props.deletable);
 	    if ('content' in $$props) $$invalidate(1, content = $$props.content);
+	    if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
 	  };
 
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*error*/
-	    128) {
-	      $$invalidate(4, _error = toBoolean(error));
+	    256) {
+	      $$invalidate(5, _error = toBoolean(error));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*deletable*/
-	    256) {
-	      $$invalidate(5, _deletable = toBoolean(deletable));
+	    512) {
+	      $$invalidate(6, _deletable = toBoolean(deletable));
 	    }
 	  };
 
-	  return [leadingicon, content, el, _hovering, _error, _deletable, onDelete, error, deletable, div1_binding, click_handler, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
+	  return [leadingicon, content, variant, el, _hovering, _error, _deletable, onDelete, error, deletable, div1_binding, click_handler, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
 	}
 
 	class Chip extends SvelteElement {
@@ -3772,9 +3787,10 @@
 	      customElement: true
 	    }, instance$s, create_fragment$u, safe_not_equal, {
 	      leadingicon: 0,
-	      error: 7,
-	      deletable: 8,
-	      content: 1
+	      error: 8,
+	      deletable: 9,
+	      content: 1,
+	      variant: 2
 	    }, null);
 
 	    if (options) {
@@ -3790,7 +3806,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["leadingicon", "error", "deletable", "content"];
+	    return ["leadingicon", "error", "deletable", "content", "variant"];
 	  }
 
 	  get leadingicon() {
@@ -3805,7 +3821,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[7];
+	    return this.$$.ctx[8];
 	  }
 
 	  set error(error) {
@@ -3816,7 +3832,7 @@
 	  }
 
 	  get deletable() {
-	    return this.$$.ctx[8];
+	    return this.$$.ctx[9];
 	  }
 
 	  set deletable(deletable) {
@@ -3837,6 +3853,17 @@
 	    flush();
 	  }
 
+	  get variant() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set variant(variant) {
+	    this.$$set({
+	      variant
+	    });
+	    flush();
+	  }
+
 	}
 
 	customElements.define("goa-chip", Chip);
@@ -14489,6 +14516,7 @@
 	      deletable = _c === void 0 ? false : _c,
 	      _d = _a.error,
 	      error = _d === void 0 ? false : _d,
+	      variant = _a.variant,
 	      content = _a.content,
 	      onClick = _a.onClick;
 	  var el = react.useRef(null);
@@ -14511,7 +14539,8 @@
 	    leadingicon: leadingIcon,
 	    error: error,
 	    deletable: deletable,
-	    content: content
+	    content: content,
+	    variant: variant
 	  }, void 0);
 	};