@abgov/react-components 3.4.0-alpha.14 → 3.4.0-alpha.17

package/lib/badge/badge.d.ts

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { GoAIconType } from '../icons';
-import './badge.scss';
 export declare type GoABadgeType = 'information' | 'success' | 'warning' | 'emergency' | 'dark' | 'midtone' | 'light' | 'inactive';
 interface GoABadgeProps {
     type: GoABadgeType;

package/lib/flex/row.d.ts

@@ -1,5 +1,4 @@
 import { FC } from "react";
-import './row.scss';
 interface Props {
     gap?: 'small' | 'medium' | 'large';
     minWidth?: number | string;

package/lib/input/input.d.ts

@@ -13,7 +13,9 @@ interface WCProps {
     disabled?: boolean;
     error?: string;
     readonly?: boolean;
+    focused?: boolean;
     handletrailingiconclick: boolean;
+    testid?: string;
 }
 declare global {
     namespace JSX {
@@ -22,7 +24,7 @@ declare global {
         }
     }
 }
-interface Props {
+export interface Props {
     name: string;
     value: string;
     onChange: (name: string, value: string) => void;
@@ -36,6 +38,7 @@ interface Props {
     focused?: boolean;
     readonly?: boolean;
     error?: string;
+    testId?: string;
 }
 export declare const GoAInput: FC<Props & {
     type: string;

package/lib/service-level-header/service-level-header.d.ts

@@ -9,9 +9,11 @@ declare global {
 export declare type ServiceLevel = 'alpha' | 'beta' | 'live';
 interface WebComponentProps {
     level: ServiceLevel;
+    version?: string;
 }
 export interface HeaderProps {
     level: ServiceLevel;
+    version?: string;
 }
 export declare const GoAServiceLevelHeader: FC<HeaderProps>;
 export default GoAServiceLevelHeader;

package/package.json

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

package/react-components.esm.js

@@ -15,36 +15,6 @@ const GoAAppHeader = ({
   }), void 0);
 };
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$3 = "goa-badge {\n  margin-left: 0.25rem;\n}";
-styleInject(css_248z$3);
-
 const GoABadge = ({
   type,
   content,
@@ -103,8 +73,35 @@ const GoAEmergencyBadge = ({
   }, void 0);
 };
 
-var css_248z$2 = "goa-button + goa-button {\n  margin-top: 1.5rem;\n}\n\n/* TODO: these margins need to match UI specs */\n@media (min-width: 480px) {\n  goa-button + goa-button {\n    margin-left: 1rem;\n  }\n}\n";
-styleInject(css_248z$2);
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = "goa-button + goa-button {\n  margin-top: 1.5rem;\n}\n\n/* TODO: these margins need to match UI specs */\n@media (min-width: 480px) {\n  goa-button + goa-button {\n    margin-left: 1rem;\n  }\n}\n";
+styleInject(css_248z$1);
 
 const GoAButton = ({
   title,
@@ -144,8 +141,8 @@ const GoAButton = ({
   }), void 0);
 };
 
-var css_248z$1 = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n    /* margin-left: 0.25rem; */\n  }\n}\n";
-styleInject(css_248z$1);
+var css_248z = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n    /* margin-left: 0.25rem; */\n  }\n}\n";
+styleInject(css_248z);
 
 const GoAButtonGroup = ({
   alignment,
@@ -220,7 +217,7 @@ const GoAContainer = ({
   title,
   children,
   actions,
-  variant: _variant = 'primary'
+  variant: _variant = 'default'
 }) => {
   return jsxs("goa-container", Object.assign({
     variant: _variant,
@@ -287,9 +284,6 @@ const GoADropdown = props => {
   }), void 0);
 };
 
-var css_248z = "";
-styleInject(css_248z);
-
 const GoAFlexRow = ({
   gap,
   minWidth,
@@ -475,6 +469,7 @@ const GoAInput = ({
   value,
   placeholder,
   error,
+  testId,
   onTrailingIconClick,
   onChange
 }) => {
@@ -492,8 +487,7 @@ const GoAInput = ({
         value
       } = e.detail.data;
       onChange(name, value);
-    }; // TODO: determinw the propery type of the e (CustomEvent does not work)
-
+    };
 
     const clickListener = e => {
       onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
@@ -501,21 +495,15 @@ const GoAInput = ({
 
     current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
 
-    current.addEventListener('_ontrailingiconclick', clickListener);
+    current.addEventListener('_trailingIconClick', clickListener);
     return () => {
       current.removeEventListener('_change', changeListener);
-      current.removeEventListener('_ontrailingiconclick', clickListener);
+      current.removeEventListener('_trailingIconClick', clickListener);
     };
-  }, [ref, onChange, onTrailingIconClick]); // useEffect(() => {
-  //   if (focused) {
-  //     inputRef.current?.focus();
-  //   } else {
-  //     inputRef.current?.blur();
-  //   }
-  // }, [focused, inputRef]);
-
+  }, [ref, onChange, onTrailingIconClick]);
   return jsx("goa-input", {
     ref: ref,
+    focused: focused,
     type: type,
     name: name,
     id: id,
@@ -526,6 +514,7 @@ const GoAInput = ({
     readonly: readonly,
     placeholder: placeholder,
     error: error,
+    "data-testid": testId,
     value: value,
     handletrailingiconclick: !!onTrailingIconClick
   }, void 0);
@@ -600,9 +589,8 @@ const GoAInputNumber = props => {
 const GoAInputRange = _a => {
   var props = __rest(_a, ["step"]);
 
-  return jsx("input", Object.assign({}, props, {
-    type: "range",
-    onChange: e => props.onChange(e.target.name, e.target.value)
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "range"
   }), void 0);
 };
 
@@ -727,10 +715,12 @@ const GoARadioGroup = ({
 };
 
 const GoAServiceLevelHeader = ({
-  level
+  level,
+  version
 }) => {
   return jsx("goa-service-level-header", {
-    level: level
+    level: level,
+    version: version
   }, void 0);
 };
 

package/react-components.umd.js

@@ -58,36 +58,6 @@
       }), void 0);
     };
 
-    function styleInject(css, ref) {
-      if ( ref === void 0 ) ref = {};
-      var insertAt = ref.insertAt;
-
-      if (!css || typeof document === 'undefined') { return; }
-
-      var head = document.head || document.getElementsByTagName('head')[0];
-      var style = document.createElement('style');
-      style.type = 'text/css';
-
-      if (insertAt === 'top') {
-        if (head.firstChild) {
-          head.insertBefore(style, head.firstChild);
-        } else {
-          head.appendChild(style);
-        }
-      } else {
-        head.appendChild(style);
-      }
-
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(document.createTextNode(css));
-      }
-    }
-
-    var css_248z$3 = "goa-badge {\n  margin-left: 0.25rem;\n}";
-    styleInject(css_248z$3);
-
     var GoABadge = function GoABadge(_a) {
       var type = _a.type,
           content = _a.content,
@@ -141,8 +111,35 @@
       }, void 0);
     };
 
-    var css_248z$2 = "goa-button + goa-button {\n  margin-top: 1.5rem;\n}\n\n/* TODO: these margins need to match UI specs */\n@media (min-width: 480px) {\n  goa-button + goa-button {\n    margin-left: 1rem;\n  }\n}\n";
-    styleInject(css_248z$2);
+    function styleInject(css, ref) {
+      if ( ref === void 0 ) ref = {};
+      var insertAt = ref.insertAt;
+
+      if (!css || typeof document === 'undefined') { return; }
+
+      var head = document.head || document.getElementsByTagName('head')[0];
+      var style = document.createElement('style');
+      style.type = 'text/css';
+
+      if (insertAt === 'top') {
+        if (head.firstChild) {
+          head.insertBefore(style, head.firstChild);
+        } else {
+          head.appendChild(style);
+        }
+      } else {
+        head.appendChild(style);
+      }
+
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(document.createTextNode(css));
+      }
+    }
+
+    var css_248z$1 = "goa-button + goa-button {\n  margin-top: 1.5rem;\n}\n\n/* TODO: these margins need to match UI specs */\n@media (min-width: 480px) {\n  goa-button + goa-button {\n    margin-left: 1rem;\n  }\n}\n";
+    styleInject(css_248z$1);
 
     var GoAButton = function GoAButton(_a) {
       var title = _a.title,
@@ -185,8 +182,8 @@
       }), void 0);
     };
 
-    var css_248z$1 = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n    /* margin-left: 0.25rem; */\n  }\n}\n";
-    styleInject(css_248z$1);
+    var css_248z = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n    /* margin-left: 0.25rem; */\n  }\n}\n";
+    styleInject(css_248z);
 
     var GoAButtonGroup = function GoAButtonGroup(_a) {
       var alignment = _a.alignment,
@@ -261,7 +258,7 @@
           children = _a.children,
           actions = _a.actions,
           _b = _a.variant,
-          variant = _b === void 0 ? 'primary' : _b;
+          variant = _b === void 0 ? 'default' : _b;
       return jsxRuntime.jsxs("goa-container", __assign({
         variant: variant,
         headingsize: headingSize
@@ -326,9 +323,6 @@
       }), void 0);
     };
 
-    var css_248z = "";
-    styleInject(css_248z);
-
     var GoAFlexRow = function GoAFlexRow(_a) {
       var gap = _a.gap,
           minWidth = _a.minWidth,
@@ -478,13 +472,14 @@
           leadingIcon = _a.leadingIcon,
           trailingIcon = _a.trailingIcon,
           _b = _a.variant,
-          variant = _b === void 0 ? 'goa' : _b;
-          _a.focused;
-          var disabled = _a.disabled,
+          variant = _b === void 0 ? 'goa' : _b,
+          focused = _a.focused,
+          disabled = _a.disabled,
           readonly = _a.readonly,
           value = _a.value,
           placeholder = _a.placeholder,
           error = _a.error,
+          testId = _a.testId,
           onTrailingIconClick = _a.onTrailingIconClick,
           onChange = _a.onChange;
       var ref = React.useRef(null);
@@ -500,8 +495,7 @@
               name = _a.name,
               value = _a.value;
           onChange(name, value);
-        }; // TODO: determinw the propery type of the e (CustomEvent does not work)
-
+        };
 
         var clickListener = function clickListener(e) {
           onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
@@ -509,21 +503,15 @@
 
         current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
 
-        current.addEventListener('_ontrailingiconclick', clickListener);
+        current.addEventListener('_trailingIconClick', clickListener);
         return function () {
           current.removeEventListener('_change', changeListener);
-          current.removeEventListener('_ontrailingiconclick', clickListener);
+          current.removeEventListener('_trailingIconClick', clickListener);
         };
-      }, [ref, onChange, onTrailingIconClick]); // useEffect(() => {
-      //   if (focused) {
-      //     inputRef.current?.focus();
-      //   } else {
-      //     inputRef.current?.blur();
-      //   }
-      // }, [focused, inputRef]);
-
+      }, [ref, onChange, onTrailingIconClick]);
       return jsxRuntime.jsx("goa-input", {
         ref: ref,
+        focused: focused,
         type: type,
         name: name,
         id: id,
@@ -534,6 +522,7 @@
         readonly: readonly,
         placeholder: placeholder,
         error: error,
+        "data-testid": testId,
         value: value,
         handletrailingiconclick: !!onTrailingIconClick
       }, void 0);
@@ -611,11 +600,8 @@
       _a.step;
           var props = __rest(_a, ["step"]);
 
-      return jsxRuntime.jsx("input", __assign({}, props, {
-        type: "range",
-        onChange: function (e) {
-          return props.onChange(e.target.name, e.target.value);
-        }
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "range"
       }), void 0);
     };
 
@@ -737,9 +723,11 @@
     };
 
     var GoAServiceLevelHeader = function GoAServiceLevelHeader(_a) {
-      var level = _a.level;
+      var level = _a.level,
+          version = _a.version;
       return jsxRuntime.jsx("goa-service-level-header", {
-        level: level
+        level: level,
+        version: version
       }, void 0);
     };