@abgov/react-components 3.4.0-beta.8 → 4.0.0-alpha.2

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 (75) hide show
  1. package/README.md +44 -97
  2. package/experimental/index.d.ts +0 -10
  3. package/experimental/package.json +1 -1
  4. package/experimental/react-components.esm.js +0 -1714
  5. package/experimental/react-components.umd.js +5 -1735
  6. package/index.d.ts +33 -16
  7. package/lib/app-header/app-header.d.ts +18 -0
  8. package/lib/badge/badge.d.ts +28 -0
  9. package/lib/button/button.d.ts +27 -35
  10. package/lib/button-group/button-group.d.ts +18 -0
  11. package/lib/callout/callout.d.ts +14 -23
  12. package/lib/card/card-actions.d.ts +16 -0
  13. package/lib/card/card-content.d.ts +13 -0
  14. package/lib/card/card-group.d.ts +16 -0
  15. package/lib/card/card-image.d.ts +18 -0
  16. package/lib/card/card.d.ts +18 -0
  17. package/lib/card/index.d.ts +5 -0
  18. package/lib/checkbox/checkbox.d.ts +27 -36
  19. package/lib/chip/chip.d.ts +23 -0
  20. package/lib/circular-progress/circular-progress.d.ts +29 -0
  21. package/lib/container/container.d.ts +23 -0
  22. package/lib/dropdown/dropdown-option.d.ts +21 -0
  23. package/lib/dropdown/dropdown.d.ts +37 -0
  24. package/lib/flex/index.d.ts +1 -0
  25. package/lib/flex/row.d.ts +7 -0
  26. package/lib/form/form-item.d.ts +22 -0
  27. package/lib/form/index.d.ts +1 -0
  28. package/lib/form/validators.d.ts +10 -0
  29. package/lib/hero-banner/hero-banner-actions.d.ts +4 -0
  30. package/lib/hero-banner/hero-banner.d.ts +18 -0
  31. package/lib/icons/icon-button.d.ts +27 -0
  32. package/lib/icons/icon.d.ts +37 -0
  33. package/lib/icons/index.d.ts +2 -0
  34. package/lib/input/input.d.ts +73 -0
  35. package/lib/microsite-header/microsite-header.d.ts +21 -0
  36. package/lib/modal/modal.d.ts +25 -0
  37. package/lib/notification/notification.d.ts +14 -35
  38. package/lib/page-block/page-block.d.ts +9 -0
  39. package/lib/radio-group/radio-group.d.ts +21 -44
  40. package/lib/radio-group/radio.d.ts +27 -0
  41. package/lib/skeleton/skeleton.d.ts +19 -0
  42. package/lib/spinner/spinner.d.ts +26 -0
  43. package/lib/textarea/textarea.d.ts +30 -0
  44. package/package.json +5 -4
  45. package/react-components.esm.js +755 -2355
  46. package/react-components.umd.js +815 -2397
  47. package/experimental/badge/badge.component.d.ts +0 -8
  48. package/experimental/common.d.ts +0 -3
  49. package/experimental/element-loader/element-loader.d.ts +0 -18
  50. package/experimental/form/form.actions.component.d.ts +0 -3
  51. package/experimental/form/form.component.d.ts +0 -10
  52. package/experimental/form/form.item.component.d.ts +0 -7
  53. package/experimental/form/formFieldValidator.d.ts +0 -4
  54. package/experimental/icons/icons.d.ts +0 -13
  55. package/experimental/input/input.component.d.ts +0 -15
  56. package/experimental/modal/modal.component.d.ts +0 -44
  57. package/experimental/scrollable/scrollable.component.d.ts +0 -12
  58. package/experimental/skeleton/skeleton-element.d.ts +0 -8
  59. package/experimental/skeleton/skeleton-grid-column.d.ts +0 -9
  60. package/experimental/skeleton/skeleton-image-content.d.ts +0 -9
  61. package/experimental/skeleton/skeleton-titled-content.d.ts +0 -9
  62. package/lib/card/card.component.d.ts +0 -26
  63. package/lib/card-group/card.group.component.d.ts +0 -24
  64. package/lib/dropdown/dropdown.component.d.ts +0 -59
  65. package/lib/dropdown/dropdown.context.d.ts +0 -17
  66. package/lib/dropdown/option/option.component.d.ts +0 -10
  67. package/lib/dropdown/option-group/option-group.component.d.ts +0 -6
  68. package/lib/header/header.d.ts +0 -10
  69. package/lib/hero-banner/content/hero-banner-content.component.d.ts +0 -7
  70. package/lib/hero-banner/hero-banner.component.d.ts +0 -11
  71. package/lib/hero-banner/link/hero-banner-link.component.d.ts +0 -8
  72. package/lib/microsite-logo/microsite-logo.d.ts +0 -8
  73. package/lib/page-loader/page-loader.d.ts +0 -43
  74. package/lib/radio-group/radio/radio.d.ts +0 -17
  75. package/lib/radio-group/radio-group.context.d.ts +0 -6
package/README.md CHANGED
@@ -1,112 +1,59 @@
1
- # react-components
1
+ # React UI Components
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
 
7
- 1. Add @abgov/react-components
8
- `npm add --save @abgov/react-components`
9
- 2. OPTIONAL: in package.json specify the allowed versions for installation
10
- 3. Add peer dependencies
10
+ Add Dependencies
11
+ ```bash
12
+ npm i
13
+ npm i @abgov/react-components@3.4.0-alpha.7
14
+ npm i @abgov/styles
15
+ ```
11
16
 
12
- ## Documentation
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>
13
36
 
14
- Documentation is being worked on and will be provided soon.
37
+ ```
15
38
 
16
- ## Usage
39
+ ```typescript
40
+ // App.tsx
41
+ import './App.css'
17
42
 
18
- ```
19
- import { GoACallout } from '@abgov/react-components';
20
- import { GoAButton } from '@abgov/react-components';
21
- import { GoACheckbox } from '@abgov/react-components';
22
- import { GoANotification } from '@abgov/react-components';
23
- import { GoACard } from '@abgov/react-components';
24
- import { GoACardGroup } from '@abgov/react-components';
25
43
  import { GoABadge } from '@abgov/react-components';
26
- import { GoAElementLoader } from '@abgov/react-components';
27
- import { GoAPageLoader } from '@abgov/react-components';
28
- import { GoADropdown, GoAOption } from '@abgov/react-components';
29
- import { GoAHeader } from '@abgov/react-components';
30
- import { GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink} from '@abgov/react-components';
31
- import { GoARadioGroup } from '@abgov/react-components';
32
44
 
33
45
  function App() {
34
- return (
35
- <div>
36
- <GoACallout type="emergency" title="Covid 19 Emergency" content="please be advised that in-center services are closed" />
37
- <GoAButton
38
- buttonType="primary"
39
- buttonSize="normal"
40
- toolTip="Hovering"
41
- onClick={()=> alert("You have clicked the button")}
42
- >Click Me!</GoAButton>
43
- <GoAButton
44
- buttonType="primary"
45
- buttonSize="normal"
46
- toolTip="Hovering"
47
- onClick={()=> alert("You have clicked the button")}
48
- >
49
- <div>Or click me instead</div>
50
- </GoAButton>
51
- <GoACheckbox checked={true}>Checkbox 1</GoACheckbox>
52
- <GoACard
53
- title = 'Energy Diversification Act',
54
- description = 'We're encouraging companies to turn out oil ad gas resources into more valuable products-creating good jobs for Albertans.',
55
- cardImageUrl = 'working-in-cold-hero-3_rdax_75.jpg',
56
- cardSize = 'auto',
57
- titleUrl = 'http://www.google.ca'
58
- />
59
- <GoANotification
60
- type="'important || 'information' || 'event' || 'emergency'",
61
- title='Notification Title',
62
- message="Information to the user goes in the message"
63
- isDismissable: true,
64
- notificationUrl: 'www.google.com',
65
- title: 'Hidden Title',
66
- </>
67
- <GoACardGroup title={'Dashboard'} layout='basic' >
68
- <GoACard title="Energy Diversification Act 1"
69
- description="We are encouraging companies to turn out oil ad gas resources into more valuable products-creating good jobs for Albertans."
70
- titleUrl="http://www.google.ca"
71
- cardWidth={400}
72
- cardImageUrl="working-in-cold-hero-3_rdax_75.jpg"
73
- />
74
- </GoACardGroup>
75
- <GoABadge
76
- type='information'
77
- content='text content'
78
- icon={ icon variable}
79
- />
80
- <GoAElementLoader
81
- visible={true}
82
- size={25}
83
- baseColour='#c8eef9',
84
- spinnerColour='#0070c4'
85
- />
86
- <GoAPageLoader visible={true} type='infinite'>
87
- Loading...
88
- </GoAPageLoader>
89
- <GoADropdown label="Fruits" description="Choose you favorite fruit!" multiple="false" typeAheadMode="none">
90
- {
91
- items.map((i) => <GoAOption key={i.id} value={i.id} label={i.label} />)
92
- }
93
- </GoADropdown>
94
- <GoAHeader serviceName="Sample service" serviceHome="/" serviceLevel="Live" />
95
- <GoAHeroBanner title="Upgrading our bitumen" backgroundUrl='...'}>
96
- <GoAHeroBannerContent content='Resources are available to help ...'/>
97
- <GoAHeroBannerLink linkText='Learn more' linkUrl='...'/>
98
- </GoAHeroBanner>
99
- <GoARadioGroup
100
- name="fileSecurityOptions"
101
- items={getFileTypesValues()}
102
- onChange={(e) => {
103
- setUploadFileType(e);
104
- }}
105
- />
106
- </div>
46
+ return (
47
+ <GoABadge type="information" content="Some info" icon={true} />
48
+ )
49
+ }
107
50
 
51
+ export default App
108
52
 
109
- )
110
- }
111
53
 
112
54
  ```
55
+
56
+ Import the styles in the `src/index.css` file
57
+ ```css
58
+ @import '@abgov/styles/styles.esm.css';
59
+ ```
package/experimental/index.d.ts CHANGED
@@ -1,10 +0,0 @@
1
- import { GoABadge } from './badge/badge.component';
2
- import { GoAElementLoader } from './element-loader/element-loader';
3
- import { GoAInput } from './input/input.component';
4
- import { GoAModal, GoAModalActions, GoAModalContent, GoAModalTitle } from './modal/modal.component';
5
- import { GoAScrollable } from './scrollable/scrollable.component';
6
- import { GoAFormItem, GoAFormActions, GoAForm } from './form/form.component';
7
- import { GoASkeletonContent } from './skeleton/skeleton-titled-content';
8
- import { GoASkeletonGridColumnContent } from './skeleton/skeleton-grid-column';
9
- import { GoASkeletonImageContent } from './skeleton/skeleton-image-content';
10
- export { GoABadge, GoAElementLoader, GoAForm, GoAFormActions, GoAFormItem, GoAInput, GoAModal, GoAModalActions, GoAModalContent, GoAModalTitle, GoAScrollable, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent, };
package/experimental/package.json CHANGED
@@ -5,6 +5,6 @@
5
5
  "typings": "./index.d.ts",
6
6
  "dependencies": {},
7
7
  "peerDependencies": {
8
- "react": "^16.13.1"
8
+ "react": "17.0.2"
9
9
  }
10
10
  }