@abgov/react-components 3.4.0-alpha.15 → 3.4.0-alpha.18

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.15",
+  "version": "3.4.0-alpha.18",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -469,6 +469,7 @@ const GoAInput = ({
   value,
   placeholder,
   error,
+  testId,
   onTrailingIconClick,
   onChange
 }) => {
@@ -486,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();
@@ -495,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,
@@ -520,6 +514,7 @@ const GoAInput = ({
     readonly: readonly,
     placeholder: placeholder,
     error: error,
+    "data-testid": testId,
     value: value,
     handletrailingiconclick: !!onTrailingIconClick
   }, void 0);
@@ -594,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);
 };
 
@@ -721,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

@@ -472,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);
@@ -494,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();
@@ -503,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,
@@ -528,6 +522,7 @@
         readonly: readonly,
         placeholder: placeholder,
         error: error,
+        "data-testid": testId,
         value: value,
         handletrailingiconclick: !!onTrailingIconClick
       }, void 0);
@@ -605,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);
     };
 
@@ -731,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);
     };