npm - @abgov/react-components - Versions diffs - 3.4.0-alpha.3 → 3.4.0-alpha.32 - Mend

@abgov/react-components 3.4.0-alpha.3 → 3.4.0-alpha.32

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.

Files changed (20) hide show

package/README.md +48 -6
package/index.d.ts +3 -2
package/lib/app-header/app-header.d.ts +2 -2
package/lib/badge/badge.d.ts +0 -1
package/lib/button/button.d.ts +1 -1
package/lib/checkbox/checkbox.d.ts +2 -2
package/lib/container/container.d.ts +3 -3
package/lib/flex/index.d.ts +1 -1
package/lib/flex/row.d.ts +0 -1
package/lib/form/index.d.ts +1 -1
package/lib/input/input.d.ts +4 -1
package/lib/modal/modal.d.ts +8 -6
package/lib/page-block/page-block.d.ts +9 -0
package/lib/service-level-header/service-level-header.d.ts +2 -0
package/lib/spinner/spinner.d.ts +10 -8
package/lib/textarea/textarea.d.ts +5 -2
package/package.json +2 -2
package/react-components.esm.js +94 -93
package/react-components.umd.js +98 -100
package/lib/hero-banner/hero-banner-content.d.ts +0 -4

package/README.md CHANGED Viewed

@@ -2,16 +2,58 @@
 This library contains react components from the Government of Alberta.
-## Installation
+Create react app
+```bash
+npm init vite@latest
+```
+Add Dependencies
 ```bash
-npm add --save @abgov/react-components
+npm i
+npm i @abgov/react-components@3.4.0-alpha.7
+npm i @abgov/styles
 ```
-## Usage
+Link ionicons in app/index.html
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <!-- Ionicons -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <!-- -->
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+```
-Insert the following into your base index.html file's `<head>` section:
+```typescript
+// App.tsx
+import './App.css'
-```html
-<script src="https://unpkg.com/ionicons@5.5.3/dist/ionicons.js"></script>
+import { GoABadge } from '@abgov/react-components';
+function App() {
+  return (
+    <GoABadge type="information" content="Some info" icon={true} />
+  )
+}
+export default App
+```
+Import the styles in the `src/index.css` file
+```css
+@import '@abgov/styles/styles.esm.css';
 ```

package/index.d.ts CHANGED Viewed

@@ -13,18 +13,19 @@ import { GoADropdown, GoADropdownOption } from './lib/dropdown/dropdown';
 import { GoAFlexRow } from './lib/flex';
 import { GoAFormItem } from './lib/form';
 import { GoAHeroBanner } from './lib/hero-banner/hero-banner';
-import { GoAHeroBannerContent } from './lib/hero-banner/hero-banner-content';
 import { GoAHeroBannerActions } from './lib/hero-banner/hero-banner-actions';
 import { GoAIcon, GoAIconButton } from './lib/icons';
 import { GoAInput, GoAInputText, GoAInputPassword, GoAInputDate, GoAInputTime, GoAInputDateTime, GoAInputEmail, GoAInputSearch, GoAInputUrl, GoAInputTel, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputRange } from './lib/input/input';
 import { GoAModal } from './lib/modal/modal';
 import { GoANotification } from './lib/notification/notification';
+import { GoAPageBlock } from './lib/page-block/page-block';
 import { GoAPageLoader } from './lib/page-loader/page-loader';
 import { GoARadioGroup, GoARadio } from './lib/radio-group/radio-group';
 import { GoAServiceLevelHeader } from './lib/service-level-header/service-level-header';
 import { GoATextArea } from './lib/textarea/textarea';
+import { GoASpinner } from './lib/spinner/spinner';
 import type { GoAIconType } from './lib/icons';
 import type { GoABadgeType } from './lib/badge/badge';
 export type { GoAIconType };
 export type { GoABadgeType };
-export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, GoASuccessBadge, GoATextArea, GoAWarningBadge, };
+export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, GoAPageBlock, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, GoASuccessBadge, GoASpinner, GoATextArea, GoAWarningBadge, };

package/lib/app-header/app-header.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 interface WCProps {
     title: string;
-    url: string;
+    url?: string;
 }
 declare global {
     namespace JSX {
@@ -12,7 +12,7 @@ declare global {
 }
 interface Props {
     title: string;
-    url: string;
+    url?: string;
 }
 export declare const GoAAppHeader: FC<Props>;
 export default GoAAppHeader;

package/lib/badge/badge.d.ts CHANGED Viewed

@@ -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/button/button.d.ts CHANGED Viewed

@@ -24,7 +24,7 @@ declare type ButtonProps = {
     size?: ButtonSize;
     variant?: ButtonVariant;
     disabled?: boolean;
-    onClick: () => void;
+    onClick: (e: any) => void;
     children: ReactNode;
 };
 export declare const GoAButton: FC<ButtonProps>;

package/lib/checkbox/checkbox.d.ts CHANGED Viewed

@@ -8,19 +8,19 @@ declare global {
 }
 interface CheckboxProps {
     ref: React.RefObject<HTMLElement>;
+    id?: string;
     name: string;
     checked?: boolean;
     disabled?: boolean;
-    indeterminate?: boolean;
     error?: boolean;
     text?: string;
     value?: string | number | boolean;
 }
 export interface Props {
+    id?: string;
     name: string;
     checked?: boolean;
     disabled?: boolean;
-    indeterminate?: boolean;
     error?: boolean;
     text?: string;
     value?: string | number | boolean;

package/lib/container/container.d.ts CHANGED Viewed

@@ -14,9 +14,9 @@ declare global {
 }
 interface Props {
     headingSize: HeadingSize;
-    variant: ContainerVariant;
-    title: ReactNode;
-    actions: ReactNode;
+    variant?: ContainerVariant;
+    title?: ReactNode;
+    actions?: ReactNode;
     children: ReactNode;
 }
 export declare const GoAContainer: FC<Props>;

package/lib/flex/index.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export * as GoAFlexRow from './row';
1	+ export { GoAFlexRow } from './row';

package/lib/flex/row.d.ts CHANGED Viewed

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

package/lib/form/index.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export * as GoAFormItem from './form-item';
1	+ export { GoAFormItem } from './form-item';

package/lib/input/input.d.ts CHANGED Viewed

@@ -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/modal/modal.d.ts CHANGED Viewed

@@ -1,10 +1,11 @@
 import React, { FC } from 'react';
 interface WCProps {
     ref: React.RefObject<HTMLElement>;
-    title: string;
-    closable: boolean;
-    scrollable: boolean;
+    title?: string;
     open?: boolean;
+    width?: string;
+    closable?: boolean;
+    scrollable?: boolean;
 }
 declare global {
     namespace JSX {
@@ -14,10 +15,11 @@ declare global {
     }
 }
 interface Props {
-    title: string;
-    closable: boolean;
-    open?: boolean;
+    title?: string;
+    width?: string;
+    actions?: React.ReactElement;
     onClose?: () => void;
+    open?: boolean;
 }
 export declare const GoAModal: FC<Props>;
 export default GoAModal;

package/lib/page-block/page-block.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-page-block': React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export declare const GoAPageBlock: FC;

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

@@ -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/lib/spinner/spinner.d.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 import React from 'react';
-declare type SpinnerType = "infinite" | "progress";
-declare type SpinnerSize = "small" | "medium" | "large" | "xlarge";
+export declare type SpinnerType = "infinite" | "progress";
+export declare type SpinnerSize = "small" | "medium" | "large" | "xlarge";
 interface WCProps {
     size: SpinnerSize;
     type: SpinnerType;
-    invert: boolean;
-    progress: number;
+    invert?: boolean;
+    progress?: number;
+    testid?: string;
 }
 declare global {
     namespace JSX {
@@ -16,9 +17,10 @@ declare global {
 }
 export interface SpinnerProps {
     type: SpinnerType;
-    size?: SpinnerSize;
-    invert: boolean;
-    progress: number;
+    size: SpinnerSize;
+    invert?: boolean;
+    progress?: number;
+    testId?: string;
 }
-export declare const GoASpinner: ({ type, size, progress, invert }: SpinnerProps) => JSX.Element;
+export declare const GoASpinner: ({ type, size, progress, invert, testId }: SpinnerProps) => JSX.Element;
 export default GoASpinner;

package/lib/textarea/textarea.d.ts CHANGED Viewed

@@ -4,7 +4,8 @@ interface WCProps {
     name: string;
     value: string;
     placeholder?: string;
-    rows: number;
+    rows?: number;
+    error: boolean;
     disabled: boolean;
 }
 declare global {
@@ -19,8 +20,10 @@ interface Props {
     value: string;
     id?: string;
     placeholder?: string;
-    rows: number;
+    rows?: number;
+    error: boolean;
     disabled: boolean;
+    testId: string;
     onChange: (name: string, value: string) => void;
 }
 export declare const GoATextArea: FC<Props>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.32",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"
@@ -17,7 +17,7 @@
     "directory": "libs/react-components"
   },
   "dependencies": {
-    "@abgov/web-components": "^0.0.1"
+    "@abgov/web-components": "^1.0.0-alpha.23"
   },
   "peerDependencies": {
     "react": "^17.0.2",

package/react-components.esm.js CHANGED Viewed

@@ -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,
@@ -124,7 +121,7 @@ const GoAButton = ({
     const current = el.current;
     const listener = e => {
-      onClick();
+      onClick(e);
     };
     current.addEventListener('_click', listener);
@@ -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,
@@ -172,13 +169,13 @@ const GoACallout = ({
 };
 const GoACheckbox = ({
+  id,
   name,
   testId,
   error,
   disabled,
   checked,
-  indeterminate,
-  value: _value = true,
+  value,
   text,
   children,
   onChange
@@ -203,13 +200,13 @@ const GoACheckbox = ({
   return jsx("goa-checkbox", Object.assign({
     "data-testid": testId,
     ref: el,
+    id: id,
     name: name,
     error: error,
     checked: checked,
     disabled: disabled,
-    indeterminate: indeterminate,
     text: text,
-    value: _value
+    value: value
   }, {
     children: children
   }), void 0);
@@ -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,
@@ -321,12 +315,6 @@ const GoAFlexRow = ({
   }), void 0);
 };
-var row = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  GoAFlexRow: GoAFlexRow,
-  'default': GoAFlexRow
-});
 const GoAFormItem = ({
   children,
   helpText,
@@ -346,12 +334,6 @@ const GoAFormItem = ({
   }), void 0);
 };
-var formItem = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  GoAFormItem: GoAFormItem,
-  'default': GoAFormItem
-});
 const GoAHeroBanner = ({
   title,
   backgroundUrl,
@@ -365,16 +347,6 @@ const GoAHeroBanner = ({
   }), void 0);
 };
-const GoAHeroBannerContent = ({
-  children
-}) => {
-  return jsx("div", Object.assign({
-    slot: "content"
-  }, {
-    children: children
-  }), void 0);
-};
 const GoAHeroBannerActions = ({
   children
 }) => {
@@ -475,6 +447,7 @@ const GoAInput = ({
   value,
   placeholder,
   error,
+  testId,
   onTrailingIconClick,
   onChange
 }) => {
@@ -490,32 +463,24 @@ const GoAInput = ({
       const {
         name,
         value
-      } = e.detail.data;
+      } = e.detail;
       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();
     };
-    current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
-    current.addEventListener('_ontrailingiconclick', clickListener);
+    current.addEventListener('_change', changeListener);
+    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 +491,7 @@ const GoAInput = ({
     readonly: readonly,
     placeholder: placeholder,
     error: error,
+    "data-testid": testId,
     value: value,
     handletrailingiconclick: !!onTrailingIconClick
   }, void 0);
@@ -600,9 +566,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);
 };
@@ -610,7 +575,8 @@ const GoAModal = ({
   title,
   children,
   open,
-  closable,
+  width,
+  actions,
   onClose
 }) => {
   const el = useRef(null);
@@ -630,14 +596,19 @@ const GoAModal = ({
       current.removeEventListener('_close', listener);
     };
   }, [el, onClose]);
-  return jsx("goa-modal", Object.assign({
+  return jsxs("goa-modal", Object.assign({
     ref: el,
     title: title,
     open: open,
-    closable: closable,
-    scrollable: true
+    closable: !!onClose,
+    scrollable: true,
+    width: width
   }, {
-    children: children
+    children: [actions && jsx("div", Object.assign({
+      slot: "actions"
+    }, {
+      children: actions
+    }), void 0), children]
   }), void 0);
 };
@@ -652,6 +623,14 @@ const GoANotification = ({
   }), void 0);
 };
+const GoAPageBlock = ({
+  children
+}) => {
+  return jsx("goa-page-block", {
+    children: children
+  }, void 0);
+};
 const GoAPageLoader = ({
   type,
   visible,
@@ -727,10 +706,12 @@ const GoARadioGroup = ({
 };
 const GoAServiceLevelHeader = ({
-  level
+  level,
+  version
 }) => {
   return jsx("goa-service-level-header", {
-    level: level
+    level: level,
+    version: version
   }, void 0);
 };
@@ -740,6 +721,8 @@ const GoATextArea = ({
   placeholder,
   rows,
   disabled,
+  testId,
+  error,
   onChange
 }) => {
   const el = useRef(null);
@@ -754,7 +737,7 @@ const GoATextArea = ({
       const {
         name,
         value
-      } = e.detail.data;
+      } = e.detail;
       onChange(name, value);
     };
@@ -769,8 +752,26 @@ const GoATextArea = ({
     placeholder: placeholder,
     value: value,
     rows: rows,
-    disabled: disabled
+    disabled: disabled,
+    error: error,
+    "data-testid": testId
+  }, void 0);
+};
+const GoASpinner = ({
+  type,
+  size,
+  progress,
+  invert,
+  testId
+}) => {
+  return jsx("goa-spinner", {
+    type: type,
+    size: size,
+    progress: progress,
+    invert: invert,
+    testid: testId
   }, void 0);
 };
-export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, row as GoAFlexRow, formItem as GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAHeroBannerContent, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, GoASuccessBadge, GoATextArea, GoAWarningBadge };
+export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, GoAPageBlock, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };

package/react-components.umd.js CHANGED Viewed

@@ -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,
@@ -165,7 +162,7 @@
         var current = el.current;
         var listener = function listener(e) {
-          onClick();
+          onClick(e);
         };
         current.addEventListener('_click', listener);
@@ -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,
@@ -212,14 +209,13 @@
     };
     var GoACheckbox = function GoACheckbox(_a) {
-      var name = _a.name,
+      var id = _a.id,
+          name = _a.name,
           testId = _a.testId,
           error = _a.error,
           disabled = _a.disabled,
           checked = _a.checked,
-          indeterminate = _a.indeterminate,
-          _b = _a.value,
-          value = _b === void 0 ? true : _b,
+          value = _a.value,
           text = _a.text,
           children = _a.children,
           onChange = _a.onChange;
@@ -243,11 +239,11 @@
       return jsxRuntime.jsx("goa-checkbox", __assign({
         "data-testid": testId,
         ref: el,
+        id: id,
         name: name,
         error: error,
         checked: checked,
         disabled: disabled,
-        indeterminate: indeterminate,
         text: text,
         value: value
       }, {
@@ -261,7 +257,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 +322,6 @@
       }), void 0);
     };
-    var css_248z = "";
-    styleInject(css_248z);
     var GoAFlexRow = function GoAFlexRow(_a) {
       var gap = _a.gap,
           minWidth = _a.minWidth,
@@ -359,12 +352,6 @@
       }), void 0);
     };
-    var row = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        GoAFlexRow: GoAFlexRow,
-        'default': GoAFlexRow
-    });
     var GoAFormItem = function GoAFormItem(_a) {
       var children = _a.children,
           helpText = _a.helpText,
@@ -383,12 +370,6 @@
       }), void 0);
     };
-    var formItem = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        GoAFormItem: GoAFormItem,
-        'default': GoAFormItem
-    });
     var GoAHeroBanner = function GoAHeroBanner(_a) {
       var title = _a.title,
           backgroundUrl = _a.backgroundUrl,
@@ -401,15 +382,6 @@
       }), void 0);
     };
-    var GoAHeroBannerContent = function GoAHeroBannerContent(_a) {
-      var children = _a.children;
-      return jsxRuntime.jsx("div", __assign({
-        slot: "content"
-      }, {
-        children: children
-      }), void 0);
-    };
     var GoAHeroBannerActions = function GoAHeroBannerActions(_a) {
       var children = _a.children;
       return jsxRuntime.jsx("div", __assign({
@@ -478,13 +450,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);
@@ -496,34 +469,26 @@
         var current = ref.current;
         var changeListener = function changeListener(e) {
-          var _a = e.detail.data,
+          var _a = e.detail,
               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();
         };
-        current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
-        current.addEventListener('_ontrailingiconclick', clickListener);
+        current.addEventListener('_change', changeListener);
+        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 +499,7 @@
         readonly: readonly,
         placeholder: placeholder,
         error: error,
+        "data-testid": testId,
         value: value,
         handletrailingiconclick: !!onTrailingIconClick
       }, void 0);
@@ -611,11 +577,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);
     };
@@ -623,7 +586,8 @@
       var title = _a.title,
           children = _a.children,
           open = _a.open,
-          closable = _a.closable,
+          width = _a.width,
+          actions = _a.actions,
           onClose = _a.onClose;
       var el = React.useRef(null);
       React.useEffect(function () {
@@ -642,14 +606,19 @@
           current.removeEventListener('_close', listener);
         };
       }, [el, onClose]);
-      return jsxRuntime.jsx("goa-modal", __assign({
+      return jsxRuntime.jsxs("goa-modal", __assign({
         ref: el,
         title: title,
         open: open,
-        closable: closable,
-        scrollable: true
+        closable: !!onClose,
+        scrollable: true,
+        width: width
       }, {
-        children: children
+        children: [actions && jsxRuntime.jsx("div", __assign({
+          slot: "actions"
+        }, {
+          children: actions
+        }), void 0), children]
       }), void 0);
     };
@@ -664,6 +633,13 @@
       }), void 0);
     };
+    var GoAPageBlock = function GoAPageBlock(_a) {
+      var children = _a.children;
+      return jsxRuntime.jsx("goa-page-block", {
+        children: children
+      }, void 0);
+    };
     var GoAPageLoader = function GoAPageLoader(_a) {
       var type = _a.type,
           visible = _a.visible,
@@ -737,9 +713,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);
     };
@@ -749,6 +727,8 @@
           placeholder = _a.placeholder,
           rows = _a.rows,
           disabled = _a.disabled,
+          testId = _a.testId,
+          error = _a.error,
           onChange = _a.onChange;
       var el = React.useRef(null);
       React.useEffect(function () {
@@ -759,7 +739,7 @@
         var current = el.current;
         var listener = function listener(e) {
-          var _a = e.detail.data,
+          var _a = e.detail,
               name = _a.name,
               value = _a.value;
           onChange(name, value);
@@ -776,7 +756,24 @@
         placeholder: placeholder,
         value: value,
         rows: rows,
-        disabled: disabled
+        disabled: disabled,
+        error: error,
+        "data-testid": testId
+      }, void 0);
+    };
+    var GoASpinner = function GoASpinner(_a) {
+      var type = _a.type,
+          size = _a.size,
+          progress = _a.progress,
+          invert = _a.invert,
+          testId = _a.testId;
+      return jsxRuntime.jsx("goa-spinner", {
+        type: type,
+        size: size,
+        progress: progress,
+        invert: invert,
+        testid: testId
       }, void 0);
     };
@@ -790,11 +787,10 @@
     exports.GoADropdown = GoADropdown;
     exports.GoADropdownOption = GoADropdownOption;
     exports.GoAEmergencyBadge = GoAEmergencyBadge;
-    exports.GoAFlexRow = row;
-    exports.GoAFormItem = formItem;
+    exports.GoAFlexRow = GoAFlexRow;
+    exports.GoAFormItem = GoAFormItem;
     exports.GoAHeroBanner = GoAHeroBanner;
     exports.GoAHeroBannerActions = GoAHeroBannerActions;
-    exports.GoAHeroBannerContent = GoAHeroBannerContent;
     exports.GoAIcon = GoAIcon;
     exports.GoAIconButton = GoAIconButton;
     exports.GoAInfoBadge = GoAInfoBadge;
@@ -814,10 +810,12 @@
     exports.GoAInputUrl = GoAInputUrl;
     exports.GoAModal = GoAModal;
     exports.GoANotification = GoANotification;
+    exports.GoAPageBlock = GoAPageBlock;
     exports.GoAPageLoader = GoAPageLoader;
     exports.GoARadio = GoARadio;
     exports.GoARadioGroup = GoARadioGroup;
     exports.GoAServiceLevelHeader = GoAServiceLevelHeader;
+    exports.GoASpinner = GoASpinner;
     exports.GoASuccessBadge = GoASuccessBadge;
     exports.GoATextArea = GoATextArea;
     exports.GoAWarningBadge = GoAWarningBadge;

package/lib/hero-banner/hero-banner-content.d.ts DELETED Viewed

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-export declare type GoAHeroBannerContentType = FC;
-export declare const GoAHeroBannerContent: GoAHeroBannerContentType;
-export default GoAHeroBannerContent;