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

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 (18) hide show
  1. package/README.md +48 -6
  2. package/index.d.ts +3 -2
  3. package/lib/app-header/app-header.d.ts +2 -2
  4. package/lib/badge/badge.d.ts +0 -1
  5. package/lib/button/button.d.ts +1 -1
  6. package/lib/container/container.d.ts +3 -3
  7. package/lib/flex/index.d.ts +1 -1
  8. package/lib/flex/row.d.ts +0 -1
  9. package/lib/form/index.d.ts +1 -1
  10. package/lib/input/input.d.ts +4 -1
  11. package/lib/page-block/page-block.d.ts +9 -0
  12. package/lib/service-level-header/service-level-header.d.ts +2 -0
  13. package/lib/spinner/spinner.d.ts +10 -8
  14. package/lib/textarea/textarea.d.ts +5 -2
  15. package/package.json +2 -2
  16. package/react-components.esm.js +79 -84
  17. package/react-components.umd.js +83 -90
  18. package/lib/hero-banner/hero-banner-content.d.ts +0 -4
package/README.md CHANGED
@@ -2,16 +2,58 @@
2
2
 
3
3
  This library contains react components from the Government of Alberta.
4
4
 
5
- ## Installation
5
+ Create react app
6
+ ```bash
7
+ npm init vite@latest
8
+ ```
6
9
 
10
+ Add Dependencies
7
11
  ```bash
8
- npm add --save @abgov/react-components
12
+ npm i
13
+ npm i @abgov/react-components@3.4.0-alpha.7
14
+ npm i @abgov/styles
9
15
  ```
10
16
 
11
- ## Usage
17
+ Link ionicons in app/index.html
18
+ ```html
19
+ <!DOCTYPE html>
20
+ <html lang="en">
21
+ <head>
22
+ <meta charset="UTF-8" />
23
+ <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
24
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
25
+ <title>Vite App</title>
26
+ <!-- Ionicons -->
27
+ <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
28
+ <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
29
+ <!-- -->
30
+ </head>
31
+ <body>
32
+ <div id="root"></div>
33
+ <script type="module" src="/src/main.tsx"></script>
34
+ </body>
35
+ </html>
36
+
37
+ ```
12
38
 
13
- Insert the following into your base index.html file's `<head>` section:
39
+ ```typescript
40
+ // App.tsx
41
+ import './App.css'
14
42
 
15
- ```html
16
- <script src="https://unpkg.com/ionicons@5.5.3/dist/ionicons.js"></script>
43
+ import { GoABadge } from '@abgov/react-components';
44
+
45
+ function App() {
46
+ return (
47
+ <GoABadge type="information" content="Some info" icon={true} />
48
+ )
49
+ }
50
+
51
+ export default App
52
+
53
+
54
+ ```
55
+
56
+ Import the styles in the `src/index.css` file
57
+ ```css
58
+ @import '@abgov/styles/styles.esm.css';
17
59
  ```
package/index.d.ts CHANGED
@@ -13,18 +13,19 @@ import { GoADropdown, GoADropdownOption } from './lib/dropdown/dropdown';
13
13
  import { GoAFlexRow } from './lib/flex';
14
14
  import { GoAFormItem } from './lib/form';
15
15
  import { GoAHeroBanner } from './lib/hero-banner/hero-banner';
16
- import { GoAHeroBannerContent } from './lib/hero-banner/hero-banner-content';
17
16
  import { GoAHeroBannerActions } from './lib/hero-banner/hero-banner-actions';
18
17
  import { GoAIcon, GoAIconButton } from './lib/icons';
19
18
  import { GoAInput, GoAInputText, GoAInputPassword, GoAInputDate, GoAInputTime, GoAInputDateTime, GoAInputEmail, GoAInputSearch, GoAInputUrl, GoAInputTel, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputRange } from './lib/input/input';
20
19
  import { GoAModal } from './lib/modal/modal';
21
20
  import { GoANotification } from './lib/notification/notification';
21
+ import { GoAPageBlock } from './lib/page-block/page-block';
22
22
  import { GoAPageLoader } from './lib/page-loader/page-loader';
23
23
  import { GoARadioGroup, GoARadio } from './lib/radio-group/radio-group';
24
24
  import { GoAServiceLevelHeader } from './lib/service-level-header/service-level-header';
25
25
  import { GoATextArea } from './lib/textarea/textarea';
26
+ import { GoASpinner } from './lib/spinner/spinner';
26
27
  import type { GoAIconType } from './lib/icons';
27
28
  import type { GoABadgeType } from './lib/badge/badge';
28
29
  export type { GoAIconType };
29
30
  export type { GoABadgeType };
30
- 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, };
31
+ 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
@@ -1,7 +1,7 @@
1
1
  import React, { FC } from 'react';
2
2
  interface WCProps {
3
3
  title: string;
4
- url: string;
4
+ url?: string;
5
5
  }
6
6
  declare global {
7
7
  namespace JSX {
@@ -12,7 +12,7 @@ declare global {
12
12
  }
13
13
  interface Props {
14
14
  title: string;
15
- url: string;
15
+ url?: string;
16
16
  }
17
17
  export declare const GoAAppHeader: FC<Props>;
18
18
  export default GoAAppHeader;
package/lib/badge/badge.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { FC } from 'react';
2
2
  import { GoAIconType } from '../icons';
3
- import './badge.scss';
4
3
  export declare type GoABadgeType = 'information' | 'success' | 'warning' | 'emergency' | 'dark' | 'midtone' | 'light' | 'inactive';
5
4
  interface GoABadgeProps {
6
5
  type: GoABadgeType;
package/lib/button/button.d.ts CHANGED
@@ -24,7 +24,7 @@ declare type ButtonProps = {
24
24
  size?: ButtonSize;
25
25
  variant?: ButtonVariant;
26
26
  disabled?: boolean;
27
- onClick: () => void;
27
+ onClick: (e: any) => void;
28
28
  children: ReactNode;
29
29
  };
30
30
  export declare const GoAButton: FC<ButtonProps>;
package/lib/container/container.d.ts CHANGED
@@ -14,9 +14,9 @@ declare global {
14
14
  }
15
15
  interface Props {
16
16
  headingSize: HeadingSize;
17
- variant: ContainerVariant;
18
- title: ReactNode;
19
- actions: ReactNode;
17
+ variant?: ContainerVariant;
18
+ title?: ReactNode;
19
+ actions?: ReactNode;
20
20
  children: ReactNode;
21
21
  }
22
22
  export declare const GoAContainer: FC<Props>;
package/lib/flex/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * as GoAFlexRow from './row';
1
+ export { GoAFlexRow } from './row';
package/lib/flex/row.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { FC } from "react";
2
- import './row.scss';
3
2
  interface Props {
4
3
  gap?: 'small' | 'medium' | 'large';
5
4
  minWidth?: number | string;
package/lib/form/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * as GoAFormItem from './form-item';
1
+ export { GoAFormItem } from './form-item';
package/lib/input/input.d.ts CHANGED
@@ -13,7 +13,9 @@ interface WCProps {
13
13
  disabled?: boolean;
14
14
  error?: string;
15
15
  readonly?: boolean;
16
+ focused?: boolean;
16
17
  handletrailingiconclick: boolean;
18
+ testid?: string;
17
19
  }
18
20
  declare global {
19
21
  namespace JSX {
@@ -22,7 +24,7 @@ declare global {
22
24
  }
23
25
  }
24
26
  }
25
- interface Props {
27
+ export interface Props {
26
28
  name: string;
27
29
  value: string;
28
30
  onChange: (name: string, value: string) => void;
@@ -36,6 +38,7 @@ interface Props {
36
38
  focused?: boolean;
37
39
  readonly?: boolean;
38
40
  error?: string;
41
+ testId?: string;
39
42
  }
40
43
  export declare const GoAInput: FC<Props & {
41
44
  type: string;
package/lib/page-block/page-block.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import React, { FC } from 'react';
2
+ declare global {
3
+ namespace JSX {
4
+ interface IntrinsicElements {
5
+ 'goa-page-block': React.HTMLAttributes<HTMLElement>;
6
+ }
7
+ }
8
+ }
9
+ export declare const GoAPageBlock: FC;
package/lib/service-level-header/service-level-header.d.ts CHANGED
@@ -9,9 +9,11 @@ declare global {
9
9
  export declare type ServiceLevel = 'alpha' | 'beta' | 'live';
10
10
  interface WebComponentProps {
11
11
  level: ServiceLevel;
12
+ version?: string;
12
13
  }
13
14
  export interface HeaderProps {
14
15
  level: ServiceLevel;
16
+ version?: string;
15
17
  }
16
18
  export declare const GoAServiceLevelHeader: FC<HeaderProps>;
17
19
  export default GoAServiceLevelHeader;
package/lib/spinner/spinner.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
- declare type SpinnerType = "infinite" | "progress";
3
- declare type SpinnerSize = "small" | "medium" | "large" | "xlarge";
2
+ export declare type SpinnerType = "infinite" | "progress";
3
+ export declare type SpinnerSize = "small" | "medium" | "large" | "xlarge";
4
4
  interface WCProps {
5
5
  size: SpinnerSize;
6
6
  type: SpinnerType;
7
- invert: boolean;
8
- progress: number;
7
+ invert?: boolean;
8
+ progress?: number;
9
+ testid?: string;
9
10
  }
10
11
  declare global {
11
12
  namespace JSX {
@@ -16,9 +17,10 @@ declare global {
16
17
  }
17
18
  export interface SpinnerProps {
18
19
  type: SpinnerType;
19
- size?: SpinnerSize;
20
- invert: boolean;
21
- progress: number;
20
+ size: SpinnerSize;
21
+ invert?: boolean;
22
+ progress?: number;
23
+ testId?: string;
22
24
  }
23
- export declare const GoASpinner: ({ type, size, progress, invert }: SpinnerProps) => JSX.Element;
25
+ export declare const GoASpinner: ({ type, size, progress, invert, testId }: SpinnerProps) => JSX.Element;
24
26
  export default GoASpinner;
package/lib/textarea/textarea.d.ts CHANGED
@@ -4,7 +4,8 @@ interface WCProps {
4
4
  name: string;
5
5
  value: string;
6
6
  placeholder?: string;
7
- rows: number;
7
+ rows?: number;
8
+ error: boolean;
8
9
  disabled: boolean;
9
10
  }
10
11
  declare global {
@@ -19,8 +20,10 @@ interface Props {
19
20
  value: string;
20
21
  id?: string;
21
22
  placeholder?: string;
22
- rows: number;
23
+ rows?: number;
24
+ error: boolean;
23
25
  disabled: boolean;
26
+ testId: string;
24
27
  onChange: (name: string, value: string) => void;
25
28
  }
26
29
  export declare const GoATextArea: FC<Props>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/react-components",
3
- "version": "3.4.0-alpha.3",
3
+ "version": "3.4.0-alpha.30",
4
4
  "description": "Government of Alberta - UI components for React",
5
5
  "bugs": {
6
6
  "url": "https://github.com/GovAlta/ui-components/issues"
@@ -17,7 +17,7 @@
17
17
  "directory": "libs/react-components"
18
18
  },
19
19
  "dependencies": {
20
- "@abgov/web-components": "^0.0.1"
20
+ "@abgov/web-components": "^1.0.0-alpha.23"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "react": "^17.0.2",
package/react-components.esm.js CHANGED
@@ -15,36 +15,6 @@ const GoAAppHeader = ({
15
15
  }), void 0);
16
16
  };
17
17
 
18
- function styleInject(css, ref) {
19
- if ( ref === void 0 ) ref = {};
20
- var insertAt = ref.insertAt;
21
-
22
- if (!css || typeof document === 'undefined') { return; }
23
-
24
- var head = document.head || document.getElementsByTagName('head')[0];
25
- var style = document.createElement('style');
26
- style.type = 'text/css';
27
-
28
- if (insertAt === 'top') {
29
- if (head.firstChild) {
30
- head.insertBefore(style, head.firstChild);
31
- } else {
32
- head.appendChild(style);
33
- }
34
- } else {
35
- head.appendChild(style);
36
- }
37
-
38
- if (style.styleSheet) {
39
- style.styleSheet.cssText = css;
40
- } else {
41
- style.appendChild(document.createTextNode(css));
42
- }
43
- }
44
-
45
- var css_248z$3 = "goa-badge {\n margin-left: 0.25rem;\n}";
46
- styleInject(css_248z$3);
47
-
48
18
  const GoABadge = ({
49
19
  type,
50
20
  content,
@@ -103,8 +73,35 @@ const GoAEmergencyBadge = ({
103
73
  }, void 0);
104
74
  };
105
75
 
106
- 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";
107
- styleInject(css_248z$2);
76
+ function styleInject(css, ref) {
77
+ if ( ref === void 0 ) ref = {};
78
+ var insertAt = ref.insertAt;
79
+
80
+ if (!css || typeof document === 'undefined') { return; }
81
+
82
+ var head = document.head || document.getElementsByTagName('head')[0];
83
+ var style = document.createElement('style');
84
+ style.type = 'text/css';
85
+
86
+ if (insertAt === 'top') {
87
+ if (head.firstChild) {
88
+ head.insertBefore(style, head.firstChild);
89
+ } else {
90
+ head.appendChild(style);
91
+ }
92
+ } else {
93
+ head.appendChild(style);
94
+ }
95
+
96
+ if (style.styleSheet) {
97
+ style.styleSheet.cssText = css;
98
+ } else {
99
+ style.appendChild(document.createTextNode(css));
100
+ }
101
+ }
102
+
103
+ 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";
104
+ styleInject(css_248z$1);
108
105
 
109
106
  const GoAButton = ({
110
107
  title,
@@ -124,7 +121,7 @@ const GoAButton = ({
124
121
  const current = el.current;
125
122
 
126
123
  const listener = e => {
127
- onClick();
124
+ onClick(e);
128
125
  };
129
126
 
130
127
  current.addEventListener('_click', listener);
@@ -144,8 +141,8 @@ const GoAButton = ({
144
141
  }), void 0);
145
142
  };
146
143
 
147
- 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";
148
- styleInject(css_248z$1);
144
+ 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";
145
+ styleInject(css_248z);
149
146
 
150
147
  const GoAButtonGroup = ({
151
148
  alignment,
@@ -220,7 +217,7 @@ const GoAContainer = ({
220
217
  title,
221
218
  children,
222
219
  actions,
223
- variant: _variant = 'primary'
220
+ variant: _variant = 'default'
224
221
  }) => {
225
222
  return jsxs("goa-container", Object.assign({
226
223
  variant: _variant,
@@ -287,9 +284,6 @@ const GoADropdown = props => {
287
284
  }), void 0);
288
285
  };
289
286
 
290
- var css_248z = "";
291
- styleInject(css_248z);
292
-
293
287
  const GoAFlexRow = ({
294
288
  gap,
295
289
  minWidth,
@@ -321,12 +315,6 @@ const GoAFlexRow = ({
321
315
  }), void 0);
322
316
  };
323
317
 
324
- var row = /*#__PURE__*/Object.freeze({
325
- __proto__: null,
326
- GoAFlexRow: GoAFlexRow,
327
- 'default': GoAFlexRow
328
- });
329
-
330
318
  const GoAFormItem = ({
331
319
  children,
332
320
  helpText,
@@ -346,12 +334,6 @@ const GoAFormItem = ({
346
334
  }), void 0);
347
335
  };
348
336
 
349
- var formItem = /*#__PURE__*/Object.freeze({
350
- __proto__: null,
351
- GoAFormItem: GoAFormItem,
352
- 'default': GoAFormItem
353
- });
354
-
355
337
  const GoAHeroBanner = ({
356
338
  title,
357
339
  backgroundUrl,
@@ -365,16 +347,6 @@ const GoAHeroBanner = ({
365
347
  }), void 0);
366
348
  };
367
349
 
368
- const GoAHeroBannerContent = ({
369
- children
370
- }) => {
371
- return jsx("div", Object.assign({
372
- slot: "content"
373
- }, {
374
- children: children
375
- }), void 0);
376
- };
377
-
378
350
  const GoAHeroBannerActions = ({
379
351
  children
380
352
  }) => {
@@ -475,6 +447,7 @@ const GoAInput = ({
475
447
  value,
476
448
  placeholder,
477
449
  error,
450
+ testId,
478
451
  onTrailingIconClick,
479
452
  onChange
480
453
  }) => {
@@ -490,32 +463,24 @@ const GoAInput = ({
490
463
  const {
491
464
  name,
492
465
  value
493
- } = e.detail.data;
466
+ } = e.detail;
494
467
  onChange(name, value);
495
- }; // TODO: determinw the propery type of the e (CustomEvent does not work)
496
-
468
+ };
497
469
 
498
470
  const clickListener = e => {
499
471
  onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
500
472
  };
501
473
 
502
- current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
503
-
504
- current.addEventListener('_ontrailingiconclick', clickListener);
474
+ current.addEventListener('_change', changeListener);
475
+ current.addEventListener('_trailingIconClick', clickListener);
505
476
  return () => {
506
477
  current.removeEventListener('_change', changeListener);
507
- current.removeEventListener('_ontrailingiconclick', clickListener);
478
+ current.removeEventListener('_trailingIconClick', clickListener);
508
479
  };
509
- }, [ref, onChange, onTrailingIconClick]); // useEffect(() => {
510
- // if (focused) {
511
- // inputRef.current?.focus();
512
- // } else {
513
- // inputRef.current?.blur();
514
- // }
515
- // }, [focused, inputRef]);
516
-
480
+ }, [ref, onChange, onTrailingIconClick]);
517
481
  return jsx("goa-input", {
518
482
  ref: ref,
483
+ focused: focused,
519
484
  type: type,
520
485
  name: name,
521
486
  id: id,
@@ -526,6 +491,7 @@ const GoAInput = ({
526
491
  readonly: readonly,
527
492
  placeholder: placeholder,
528
493
  error: error,
494
+ "data-testid": testId,
529
495
  value: value,
530
496
  handletrailingiconclick: !!onTrailingIconClick
531
497
  }, void 0);
@@ -600,9 +566,8 @@ const GoAInputNumber = props => {
600
566
  const GoAInputRange = _a => {
601
567
  var props = __rest(_a, ["step"]);
602
568
 
603
- return jsx("input", Object.assign({}, props, {
604
- type: "range",
605
- onChange: e => props.onChange(e.target.name, e.target.value)
569
+ return jsx(GoAInput, Object.assign({}, props, {
570
+ type: "range"
606
571
  }), void 0);
607
572
  };
608
573
 
@@ -652,6 +617,14 @@ const GoANotification = ({
652
617
  }), void 0);
653
618
  };
654
619
 
620
+ const GoAPageBlock = ({
621
+ children
622
+ }) => {
623
+ return jsx("goa-page-block", {
624
+ children: children
625
+ }, void 0);
626
+ };
627
+
655
628
  const GoAPageLoader = ({
656
629
  type,
657
630
  visible,
@@ -727,10 +700,12 @@ const GoARadioGroup = ({
727
700
  };
728
701
 
729
702
  const GoAServiceLevelHeader = ({
730
- level
703
+ level,
704
+ version
731
705
  }) => {
732
706
  return jsx("goa-service-level-header", {
733
- level: level
707
+ level: level,
708
+ version: version
734
709
  }, void 0);
735
710
  };
736
711
 
@@ -740,6 +715,8 @@ const GoATextArea = ({
740
715
  placeholder,
741
716
  rows,
742
717
  disabled,
718
+ testId,
719
+ error,
743
720
  onChange
744
721
  }) => {
745
722
  const el = useRef(null);
@@ -754,7 +731,7 @@ const GoATextArea = ({
754
731
  const {
755
732
  name,
756
733
  value
757
- } = e.detail.data;
734
+ } = e.detail;
758
735
  onChange(name, value);
759
736
  };
760
737
 
@@ -769,8 +746,26 @@ const GoATextArea = ({
769
746
  placeholder: placeholder,
770
747
  value: value,
771
748
  rows: rows,
772
- disabled: disabled
749
+ disabled: disabled,
750
+ error: error,
751
+ "data-testid": testId
752
+ }, void 0);
753
+ };
754
+
755
+ const GoASpinner = ({
756
+ type,
757
+ size,
758
+ progress,
759
+ invert,
760
+ testId
761
+ }) => {
762
+ return jsx("goa-spinner", {
763
+ type: type,
764
+ size: size,
765
+ progress: progress,
766
+ invert: invert,
767
+ testid: testId
773
768
  }, void 0);
774
769
  };
775
770
 
776
- 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 };
771
+ 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
@@ -58,36 +58,6 @@
58
58
  }), void 0);
59
59
  };
60
60
 
61
- function styleInject(css, ref) {
62
- if ( ref === void 0 ) ref = {};
63
- var insertAt = ref.insertAt;
64
-
65
- if (!css || typeof document === 'undefined') { return; }
66
-
67
- var head = document.head || document.getElementsByTagName('head')[0];
68
- var style = document.createElement('style');
69
- style.type = 'text/css';
70
-
71
- if (insertAt === 'top') {
72
- if (head.firstChild) {
73
- head.insertBefore(style, head.firstChild);
74
- } else {
75
- head.appendChild(style);
76
- }
77
- } else {
78
- head.appendChild(style);
79
- }
80
-
81
- if (style.styleSheet) {
82
- style.styleSheet.cssText = css;
83
- } else {
84
- style.appendChild(document.createTextNode(css));
85
- }
86
- }
87
-
88
- var css_248z$3 = "goa-badge {\n margin-left: 0.25rem;\n}";
89
- styleInject(css_248z$3);
90
-
91
61
  var GoABadge = function GoABadge(_a) {
92
62
  var type = _a.type,
93
63
  content = _a.content,
@@ -141,8 +111,35 @@
141
111
  }, void 0);
142
112
  };
143
113
 
144
- 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";
145
- styleInject(css_248z$2);
114
+ function styleInject(css, ref) {
115
+ if ( ref === void 0 ) ref = {};
116
+ var insertAt = ref.insertAt;
117
+
118
+ if (!css || typeof document === 'undefined') { return; }
119
+
120
+ var head = document.head || document.getElementsByTagName('head')[0];
121
+ var style = document.createElement('style');
122
+ style.type = 'text/css';
123
+
124
+ if (insertAt === 'top') {
125
+ if (head.firstChild) {
126
+ head.insertBefore(style, head.firstChild);
127
+ } else {
128
+ head.appendChild(style);
129
+ }
130
+ } else {
131
+ head.appendChild(style);
132
+ }
133
+
134
+ if (style.styleSheet) {
135
+ style.styleSheet.cssText = css;
136
+ } else {
137
+ style.appendChild(document.createTextNode(css));
138
+ }
139
+ }
140
+
141
+ 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";
142
+ styleInject(css_248z$1);
146
143
 
147
144
  var GoAButton = function GoAButton(_a) {
148
145
  var title = _a.title,
@@ -165,7 +162,7 @@
165
162
  var current = el.current;
166
163
 
167
164
  var listener = function listener(e) {
168
- onClick();
165
+ onClick(e);
169
166
  };
170
167
 
171
168
  current.addEventListener('_click', listener);
@@ -185,8 +182,8 @@
185
182
  }), void 0);
186
183
  };
187
184
 
188
- 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";
189
- styleInject(css_248z$1);
185
+ 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";
186
+ styleInject(css_248z);
190
187
 
191
188
  var GoAButtonGroup = function GoAButtonGroup(_a) {
192
189
  var alignment = _a.alignment,
@@ -261,7 +258,7 @@
261
258
  children = _a.children,
262
259
  actions = _a.actions,
263
260
  _b = _a.variant,
264
- variant = _b === void 0 ? 'primary' : _b;
261
+ variant = _b === void 0 ? 'default' : _b;
265
262
  return jsxRuntime.jsxs("goa-container", __assign({
266
263
  variant: variant,
267
264
  headingsize: headingSize
@@ -326,9 +323,6 @@
326
323
  }), void 0);
327
324
  };
328
325
 
329
- var css_248z = "";
330
- styleInject(css_248z);
331
-
332
326
  var GoAFlexRow = function GoAFlexRow(_a) {
333
327
  var gap = _a.gap,
334
328
  minWidth = _a.minWidth,
@@ -359,12 +353,6 @@
359
353
  }), void 0);
360
354
  };
361
355
 
362
- var row = /*#__PURE__*/Object.freeze({
363
- __proto__: null,
364
- GoAFlexRow: GoAFlexRow,
365
- 'default': GoAFlexRow
366
- });
367
-
368
356
  var GoAFormItem = function GoAFormItem(_a) {
369
357
  var children = _a.children,
370
358
  helpText = _a.helpText,
@@ -383,12 +371,6 @@
383
371
  }), void 0);
384
372
  };
385
373
 
386
- var formItem = /*#__PURE__*/Object.freeze({
387
- __proto__: null,
388
- GoAFormItem: GoAFormItem,
389
- 'default': GoAFormItem
390
- });
391
-
392
374
  var GoAHeroBanner = function GoAHeroBanner(_a) {
393
375
  var title = _a.title,
394
376
  backgroundUrl = _a.backgroundUrl,
@@ -401,15 +383,6 @@
401
383
  }), void 0);
402
384
  };
403
385
 
404
- var GoAHeroBannerContent = function GoAHeroBannerContent(_a) {
405
- var children = _a.children;
406
- return jsxRuntime.jsx("div", __assign({
407
- slot: "content"
408
- }, {
409
- children: children
410
- }), void 0);
411
- };
412
-
413
386
  var GoAHeroBannerActions = function GoAHeroBannerActions(_a) {
414
387
  var children = _a.children;
415
388
  return jsxRuntime.jsx("div", __assign({
@@ -478,13 +451,14 @@
478
451
  leadingIcon = _a.leadingIcon,
479
452
  trailingIcon = _a.trailingIcon,
480
453
  _b = _a.variant,
481
- variant = _b === void 0 ? 'goa' : _b;
482
- _a.focused;
483
- var disabled = _a.disabled,
454
+ variant = _b === void 0 ? 'goa' : _b,
455
+ focused = _a.focused,
456
+ disabled = _a.disabled,
484
457
  readonly = _a.readonly,
485
458
  value = _a.value,
486
459
  placeholder = _a.placeholder,
487
460
  error = _a.error,
461
+ testId = _a.testId,
488
462
  onTrailingIconClick = _a.onTrailingIconClick,
489
463
  onChange = _a.onChange;
490
464
  var ref = React.useRef(null);
@@ -496,34 +470,26 @@
496
470
  var current = ref.current;
497
471
 
498
472
  var changeListener = function changeListener(e) {
499
- var _a = e.detail.data,
473
+ var _a = e.detail,
500
474
  name = _a.name,
501
475
  value = _a.value;
502
476
  onChange(name, value);
503
- }; // TODO: determinw the propery type of the e (CustomEvent does not work)
504
-
477
+ };
505
478
 
506
479
  var clickListener = function clickListener(e) {
507
480
  onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
508
481
  };
509
482
 
510
- current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
511
-
512
- current.addEventListener('_ontrailingiconclick', clickListener);
483
+ current.addEventListener('_change', changeListener);
484
+ current.addEventListener('_trailingIconClick', clickListener);
513
485
  return function () {
514
486
  current.removeEventListener('_change', changeListener);
515
- current.removeEventListener('_ontrailingiconclick', clickListener);
487
+ current.removeEventListener('_trailingIconClick', clickListener);
516
488
  };
517
- }, [ref, onChange, onTrailingIconClick]); // useEffect(() => {
518
- // if (focused) {
519
- // inputRef.current?.focus();
520
- // } else {
521
- // inputRef.current?.blur();
522
- // }
523
- // }, [focused, inputRef]);
524
-
489
+ }, [ref, onChange, onTrailingIconClick]);
525
490
  return jsxRuntime.jsx("goa-input", {
526
491
  ref: ref,
492
+ focused: focused,
527
493
  type: type,
528
494
  name: name,
529
495
  id: id,
@@ -534,6 +500,7 @@
534
500
  readonly: readonly,
535
501
  placeholder: placeholder,
536
502
  error: error,
503
+ "data-testid": testId,
537
504
  value: value,
538
505
  handletrailingiconclick: !!onTrailingIconClick
539
506
  }, void 0);
@@ -611,11 +578,8 @@
611
578
  _a.step;
612
579
  var props = __rest(_a, ["step"]);
613
580
 
614
- return jsxRuntime.jsx("input", __assign({}, props, {
615
- type: "range",
616
- onChange: function (e) {
617
- return props.onChange(e.target.name, e.target.value);
618
- }
581
+ return jsxRuntime.jsx(GoAInput, __assign({}, props, {
582
+ type: "range"
619
583
  }), void 0);
620
584
  };
621
585
 
@@ -664,6 +628,13 @@
664
628
  }), void 0);
665
629
  };
666
630
 
631
+ var GoAPageBlock = function GoAPageBlock(_a) {
632
+ var children = _a.children;
633
+ return jsxRuntime.jsx("goa-page-block", {
634
+ children: children
635
+ }, void 0);
636
+ };
637
+
667
638
  var GoAPageLoader = function GoAPageLoader(_a) {
668
639
  var type = _a.type,
669
640
  visible = _a.visible,
@@ -737,9 +708,11 @@
737
708
  };
738
709
 
739
710
  var GoAServiceLevelHeader = function GoAServiceLevelHeader(_a) {
740
- var level = _a.level;
711
+ var level = _a.level,
712
+ version = _a.version;
741
713
  return jsxRuntime.jsx("goa-service-level-header", {
742
- level: level
714
+ level: level,
715
+ version: version
743
716
  }, void 0);
744
717
  };
745
718
 
@@ -749,6 +722,8 @@
749
722
  placeholder = _a.placeholder,
750
723
  rows = _a.rows,
751
724
  disabled = _a.disabled,
725
+ testId = _a.testId,
726
+ error = _a.error,
752
727
  onChange = _a.onChange;
753
728
  var el = React.useRef(null);
754
729
  React.useEffect(function () {
@@ -759,7 +734,7 @@
759
734
  var current = el.current;
760
735
 
761
736
  var listener = function listener(e) {
762
- var _a = e.detail.data,
737
+ var _a = e.detail,
763
738
  name = _a.name,
764
739
  value = _a.value;
765
740
  onChange(name, value);
@@ -776,7 +751,24 @@
776
751
  placeholder: placeholder,
777
752
  value: value,
778
753
  rows: rows,
779
- disabled: disabled
754
+ disabled: disabled,
755
+ error: error,
756
+ "data-testid": testId
757
+ }, void 0);
758
+ };
759
+
760
+ var GoASpinner = function GoASpinner(_a) {
761
+ var type = _a.type,
762
+ size = _a.size,
763
+ progress = _a.progress,
764
+ invert = _a.invert,
765
+ testId = _a.testId;
766
+ return jsxRuntime.jsx("goa-spinner", {
767
+ type: type,
768
+ size: size,
769
+ progress: progress,
770
+ invert: invert,
771
+ testid: testId
780
772
  }, void 0);
781
773
  };
782
774
 
@@ -790,11 +782,10 @@
790
782
  exports.GoADropdown = GoADropdown;
791
783
  exports.GoADropdownOption = GoADropdownOption;
792
784
  exports.GoAEmergencyBadge = GoAEmergencyBadge;
793
- exports.GoAFlexRow = row;
794
- exports.GoAFormItem = formItem;
785
+ exports.GoAFlexRow = GoAFlexRow;
786
+ exports.GoAFormItem = GoAFormItem;
795
787
  exports.GoAHeroBanner = GoAHeroBanner;
796
788
  exports.GoAHeroBannerActions = GoAHeroBannerActions;
797
- exports.GoAHeroBannerContent = GoAHeroBannerContent;
798
789
  exports.GoAIcon = GoAIcon;
799
790
  exports.GoAIconButton = GoAIconButton;
800
791
  exports.GoAInfoBadge = GoAInfoBadge;
@@ -814,10 +805,12 @@
814
805
  exports.GoAInputUrl = GoAInputUrl;
815
806
  exports.GoAModal = GoAModal;
816
807
  exports.GoANotification = GoANotification;
808
+ exports.GoAPageBlock = GoAPageBlock;
817
809
  exports.GoAPageLoader = GoAPageLoader;
818
810
  exports.GoARadio = GoARadio;
819
811
  exports.GoARadioGroup = GoARadioGroup;
820
812
  exports.GoAServiceLevelHeader = GoAServiceLevelHeader;
813
+ exports.GoASpinner = GoASpinner;
821
814
  exports.GoASuccessBadge = GoASuccessBadge;
822
815
  exports.GoATextArea = GoATextArea;
823
816
  exports.GoAWarningBadge = GoAWarningBadge;
package/lib/hero-banner/hero-banner-content.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import { FC } from 'react';
2
- export declare type GoAHeroBannerContentType = FC;
3
- export declare const GoAHeroBannerContent: GoAHeroBannerContentType;
4
- export default GoAHeroBannerContent;