@abgov/react-components 3.4.0-alpha.2 → 3.4.0-alpha.22

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 (11) hide show
  1. package/README.md +48 -6
  2. package/index.d.ts +2 -2
  3. package/lib/badge/badge.d.ts +0 -1
  4. package/lib/flex/row.d.ts +0 -1
  5. package/lib/input/input.d.ts +4 -1
  6. package/lib/service-level-header/service-level-header.d.ts +2 -0
  7. package/lib/spinner/spinner.d.ts +10 -8
  8. package/package.json +2 -2
  9. package/react-components.esm.js +64 -69
  10. package/react-components.umd.js +66 -73
  11. 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,7 +13,6 @@ 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';
@@ -23,8 +22,9 @@ import { GoAPageLoader } from './lib/page-loader/page-loader';
23
22
  import { GoARadioGroup, GoARadio } from './lib/radio-group/radio-group';
24
23
  import { GoAServiceLevelHeader } from './lib/service-level-header/service-level-header';
25
24
  import { GoATextArea } from './lib/textarea/textarea';
25
+ import { GoASpinner } from './lib/spinner/spinner';
26
26
  import type { GoAIconType } from './lib/icons';
27
27
  import type { GoABadgeType } from './lib/badge/badge';
28
28
  export type { GoAIconType };
29
29
  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, };
30
+ 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, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, GoASuccessBadge, GoASpinner, GoATextArea, GoAWarningBadge, };
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/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/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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/react-components",
3
- "version": "3.4.0-alpha.2",
3
+ "version": "3.4.0-alpha.22",
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.4"
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,
@@ -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,
@@ -365,16 +359,6 @@ const GoAHeroBanner = ({
365
359
  }), void 0);
366
360
  };
367
361
 
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
362
  const GoAHeroBannerActions = ({
379
363
  children
380
364
  }) => {
@@ -475,6 +459,7 @@ const GoAInput = ({
475
459
  value,
476
460
  placeholder,
477
461
  error,
462
+ testId,
478
463
  onTrailingIconClick,
479
464
  onChange
480
465
  }) => {
@@ -490,32 +475,24 @@ const GoAInput = ({
490
475
  const {
491
476
  name,
492
477
  value
493
- } = e.detail.data;
478
+ } = e.detail;
494
479
  onChange(name, value);
495
- }; // TODO: determinw the propery type of the e (CustomEvent does not work)
496
-
480
+ };
497
481
 
498
482
  const clickListener = e => {
499
483
  onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
500
484
  };
501
485
 
502
- current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
503
-
504
- current.addEventListener('_ontrailingiconclick', clickListener);
486
+ current.addEventListener('_change', changeListener);
487
+ current.addEventListener('_trailingIconClick', clickListener);
505
488
  return () => {
506
489
  current.removeEventListener('_change', changeListener);
507
- current.removeEventListener('_ontrailingiconclick', clickListener);
490
+ current.removeEventListener('_trailingIconClick', clickListener);
508
491
  };
509
- }, [ref, onChange, onTrailingIconClick]); // useEffect(() => {
510
- // if (focused) {
511
- // inputRef.current?.focus();
512
- // } else {
513
- // inputRef.current?.blur();
514
- // }
515
- // }, [focused, inputRef]);
516
-
492
+ }, [ref, onChange, onTrailingIconClick]);
517
493
  return jsx("goa-input", {
518
494
  ref: ref,
495
+ focused: focused,
519
496
  type: type,
520
497
  name: name,
521
498
  id: id,
@@ -526,6 +503,7 @@ const GoAInput = ({
526
503
  readonly: readonly,
527
504
  placeholder: placeholder,
528
505
  error: error,
506
+ "data-testid": testId,
529
507
  value: value,
530
508
  handletrailingiconclick: !!onTrailingIconClick
531
509
  }, void 0);
@@ -600,9 +578,8 @@ const GoAInputNumber = props => {
600
578
  const GoAInputRange = _a => {
601
579
  var props = __rest(_a, ["step"]);
602
580
 
603
- return jsx("input", Object.assign({}, props, {
604
- type: "range",
605
- onChange: e => props.onChange(e.target.name, e.target.value)
581
+ return jsx(GoAInput, Object.assign({}, props, {
582
+ type: "range"
606
583
  }), void 0);
607
584
  };
608
585
 
@@ -727,10 +704,12 @@ const GoARadioGroup = ({
727
704
  };
728
705
 
729
706
  const GoAServiceLevelHeader = ({
730
- level
707
+ level,
708
+ version
731
709
  }) => {
732
710
  return jsx("goa-service-level-header", {
733
- level: level
711
+ level: level,
712
+ version: version
734
713
  }, void 0);
735
714
  };
736
715
 
@@ -773,4 +752,20 @@ const GoATextArea = ({
773
752
  }, void 0);
774
753
  };
775
754
 
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 };
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
768
+ }, void 0);
769
+ };
770
+
771
+ export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, row as GoAFlexRow, formItem as GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, 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,
@@ -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,
@@ -401,15 +395,6 @@
401
395
  }), void 0);
402
396
  };
403
397
 
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
398
  var GoAHeroBannerActions = function GoAHeroBannerActions(_a) {
414
399
  var children = _a.children;
415
400
  return jsxRuntime.jsx("div", __assign({
@@ -478,13 +463,14 @@
478
463
  leadingIcon = _a.leadingIcon,
479
464
  trailingIcon = _a.trailingIcon,
480
465
  _b = _a.variant,
481
- variant = _b === void 0 ? 'goa' : _b;
482
- _a.focused;
483
- var disabled = _a.disabled,
466
+ variant = _b === void 0 ? 'goa' : _b,
467
+ focused = _a.focused,
468
+ disabled = _a.disabled,
484
469
  readonly = _a.readonly,
485
470
  value = _a.value,
486
471
  placeholder = _a.placeholder,
487
472
  error = _a.error,
473
+ testId = _a.testId,
488
474
  onTrailingIconClick = _a.onTrailingIconClick,
489
475
  onChange = _a.onChange;
490
476
  var ref = React.useRef(null);
@@ -496,34 +482,26 @@
496
482
  var current = ref.current;
497
483
 
498
484
  var changeListener = function changeListener(e) {
499
- var _a = e.detail.data,
485
+ var _a = e.detail,
500
486
  name = _a.name,
501
487
  value = _a.value;
502
488
  onChange(name, value);
503
- }; // TODO: determinw the propery type of the e (CustomEvent does not work)
504
-
489
+ };
505
490
 
506
491
  var clickListener = function clickListener(e) {
507
492
  onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
508
493
  };
509
494
 
510
- current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
511
-
512
- current.addEventListener('_ontrailingiconclick', clickListener);
495
+ current.addEventListener('_change', changeListener);
496
+ current.addEventListener('_trailingIconClick', clickListener);
513
497
  return function () {
514
498
  current.removeEventListener('_change', changeListener);
515
- current.removeEventListener('_ontrailingiconclick', clickListener);
499
+ current.removeEventListener('_trailingIconClick', clickListener);
516
500
  };
517
- }, [ref, onChange, onTrailingIconClick]); // useEffect(() => {
518
- // if (focused) {
519
- // inputRef.current?.focus();
520
- // } else {
521
- // inputRef.current?.blur();
522
- // }
523
- // }, [focused, inputRef]);
524
-
501
+ }, [ref, onChange, onTrailingIconClick]);
525
502
  return jsxRuntime.jsx("goa-input", {
526
503
  ref: ref,
504
+ focused: focused,
527
505
  type: type,
528
506
  name: name,
529
507
  id: id,
@@ -534,6 +512,7 @@
534
512
  readonly: readonly,
535
513
  placeholder: placeholder,
536
514
  error: error,
515
+ "data-testid": testId,
537
516
  value: value,
538
517
  handletrailingiconclick: !!onTrailingIconClick
539
518
  }, void 0);
@@ -611,11 +590,8 @@
611
590
  _a.step;
612
591
  var props = __rest(_a, ["step"]);
613
592
 
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
- }
593
+ return jsxRuntime.jsx(GoAInput, __assign({}, props, {
594
+ type: "range"
619
595
  }), void 0);
620
596
  };
621
597
 
@@ -737,9 +713,11 @@
737
713
  };
738
714
 
739
715
  var GoAServiceLevelHeader = function GoAServiceLevelHeader(_a) {
740
- var level = _a.level;
716
+ var level = _a.level,
717
+ version = _a.version;
741
718
  return jsxRuntime.jsx("goa-service-level-header", {
742
- level: level
719
+ level: level,
720
+ version: version
743
721
  }, void 0);
744
722
  };
745
723
 
@@ -780,6 +758,21 @@
780
758
  }, void 0);
781
759
  };
782
760
 
761
+ var GoASpinner = function GoASpinner(_a) {
762
+ var type = _a.type,
763
+ size = _a.size,
764
+ progress = _a.progress,
765
+ invert = _a.invert,
766
+ testId = _a.testId;
767
+ return jsxRuntime.jsx("goa-spinner", {
768
+ type: type,
769
+ size: size,
770
+ progress: progress,
771
+ invert: invert,
772
+ testid: testId
773
+ }, void 0);
774
+ };
775
+
783
776
  exports.GoAAppHeader = GoAAppHeader;
784
777
  exports.GoABadge = GoABadge;
785
778
  exports.GoAButton = GoAButton;
@@ -794,7 +787,6 @@
794
787
  exports.GoAFormItem = formItem;
795
788
  exports.GoAHeroBanner = GoAHeroBanner;
796
789
  exports.GoAHeroBannerActions = GoAHeroBannerActions;
797
- exports.GoAHeroBannerContent = GoAHeroBannerContent;
798
790
  exports.GoAIcon = GoAIcon;
799
791
  exports.GoAIconButton = GoAIconButton;
800
792
  exports.GoAInfoBadge = GoAInfoBadge;
@@ -818,6 +810,7 @@
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;