@hotosm/ui 0.3.1-b4 → 0.3.1-b6

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 (43) hide show
  1. package/README.md +87 -72
  2. package/dist/chunks/chunk.2MK55PUE.js +700 -0
  3. package/dist/chunks/{callout.USQGOL5A.js → chunk.3NBBS2A2.js} +2 -2
  4. package/dist/chunks/chunk.456NATDG.js +1 -0
  5. package/dist/chunks/{chunk.4YLAIDAG.js → chunk.7RJ72M75.js} +3 -3
  6. package/dist/chunks/chunk.AIZM63SF.js +669 -0
  7. package/dist/chunks/chunk.BM3GXGCS.js +1 -0
  8. package/dist/chunks/{chunk.OVCI43FD.js → chunk.MIYFUINI.js} +2 -2
  9. package/dist/chunks/{chunk.NQHNA5TA.js → chunk.PDLGEB7T.js} +3 -3
  10. package/dist/chunks/chunk.SZ46YTWY.js +1 -0
  11. package/dist/chunks/chunk.YYEOK7MA.js +1 -0
  12. package/dist/components/consent/consent.component.d.ts +3 -0
  13. package/dist/components/consent/consent.component.js +1 -1
  14. package/dist/components/consent/consent.d.ts +0 -1
  15. package/dist/components/consent/consent.js +1 -1
  16. package/dist/components/header/header.component.d.ts +4 -0
  17. package/dist/components/header/header.component.js +1 -1
  18. package/dist/components/header/header.d.ts +0 -1
  19. package/dist/components/header/header.js +1 -1
  20. package/dist/components/logo/logo.component.js +1 -1
  21. package/dist/components/logo/logo.d.ts +0 -1
  22. package/dist/components/logo/logo.js +1 -1
  23. package/dist/components/tracking/tracking.component.d.ts +3 -0
  24. package/dist/components/tracking/tracking.component.js +1 -1
  25. package/dist/components/tracking/tracking.d.ts +0 -1
  26. package/dist/components/tracking/tracking.js +1 -1
  27. package/dist/hotosm-ui.d.ts +4 -12
  28. package/dist/hotosm-ui.js +1 -1
  29. package/dist/style.css +7 -1
  30. package/dist/themes/hot-wa-override.css +222 -0
  31. package/dist/themes/hot.css +165 -213
  32. package/package.json +1 -1
  33. package/dist/chunks/button.QMPBLQB7.js +0 -1
  34. package/dist/chunks/chunk.7VBX4GII.js +0 -1
  35. package/dist/chunks/chunk.FIQQYKEP.js +0 -14
  36. package/dist/chunks/chunk.I26W4NHZ.js +0 -460
  37. package/dist/chunks/chunk.OHRBDQCO.js +0 -45
  38. package/dist/chunks/chunk.TFICHQZE.js +0 -186
  39. package/dist/chunks/chunk.XAMKQWQ3.js +0 -92
  40. package/dist/chunks/dialog.ZJLYCG4P.js +0 -217
  41. package/dist/chunks/icon.ZB6BUFKB.js +0 -1
  42. package/dist/chunks/tab-group.M6XGU33J.js +0 -360
  43. package/dist/themes/hot-wa.css +0 -179
package/README.md CHANGED
@@ -52,116 +52,131 @@
52
52
 
53
53
  ## Shared UI Components with HOT Theming
54
54
 
55
- This repository contains HOT themed UI components, with three goals:
55
+ This repository contains advice on how to use the WebAwesome
56
+ [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
57
+ library, references to the HOTOSM style guide, and a few 'wrapper'
58
+ components to assist development:
56
59
 
57
60
  1. Reduced code duplication across HOT tools (we repeat a lot!)
58
61
  2. Simplified developer experience to create a HOT app.
59
62
  3. Reasonably consistent theming and style across tools.
60
63
 
61
- They are available as
62
- [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
63
- and have first-class React support.
64
-
65
64
  The main goal of this project is not to re-invent the wheel, or add an extra burden
66
- of development and maintenance. It should include a minimal number of components:
65
+ of development and maintenance. It should include a minimal number of
66
+ components, such as:
67
67
 
68
68
  - Header, including auth flows (OSM, Google) and login info.
69
69
  - Sidebar with links to extra resources.
70
70
  - Footer with links.
71
- - File upload component (including dropzone).
72
- - Date picker component.
73
- - Workflow stepper component.
74
71
 
75
72
  ## Quick start
76
73
 
77
- There are two options: NPM and Components Bundle.
78
-
79
- ### NPM
80
-
81
- Appropriate for applications that have installable dependencies
74
+ Current HOTOSM UI version used: `0.3.1-b5`
75
+ Current WebAwesome version used: `3.0.0-beta.1`
82
76
 
83
- `npm install @hotosm/ui`
77
+ ### Install WebAwesome
84
78
 
85
- Import the library in your project and use the components.
86
-
87
- ```html
88
- <script>
89
- import '@hotosm/ui/dist/style.css';
90
- import { Logo, Button } from '@hotosm/ui/dist/hotosm-ui';
91
- </script>
79
+ ```bash
80
+ pnpm install "@awesome.me/webawesome@3.0.0-beta.1"
92
81
  ```
93
82
 
94
- ```html
95
- <hot-logo><hot-logo>
96
- <hot-button variant="primary">Click me!</hot-button>
97
- ```
83
+ > [!NOTE]
84
+ > It's important to pin the version of web awesome used to the version in this
85
+ > library, to avoid any conflicts and incompatibilities between components.
98
86
 
99
- #### React
87
+ ### Install HOT Components
100
88
 
101
- ```js
102
- import '@hotosm/ui/dist/style.css';
103
- import { Logo, Button } from '@hotosm/ui/dist/react';
89
+ ```bash
90
+ pnpm install "@hotosm/ui"
104
91
  ```
105
92
 
106
- ```jsx
107
- <Logo />
108
- <Button variant="primary">Click me!</Button>
109
- ```
93
+ ### Configure The Styles
110
94
 
111
- ### Components Bundle
95
+ In your `index.html` or equivalent frontend root, add the following classes
96
+ to your `<html>` block:
112
97
 
113
- - This is the compiled JavaScript bundle generated from the TypeScript code.
114
- - The components require no additional dependencies and are minified.
98
+ ```html
99
+ <!DOCTYPE html>
100
+ <html class="wa-theme-default wa-palette-hotosm wa-brand-red wa-neutral-gray
101
+ wa-success-cyan wa-warning-yellow wa-danger-orange">
102
+ <head>
103
+ xxx
104
+ </head>
105
+ <body>
106
+ xxx
107
+ </body>
108
+ </html>
109
+ ```
115
110
 
116
- Appropriate for HTML / Markdown / HTMX.
111
+ > [!IMPORTANT]
112
+ > These classes determine the colour usage for different component variants,
113
+ > and probably should not be changed!
117
114
 
118
- ```html
119
- <link
120
- rel="stylesheet"
121
- href="https://s3.amazonaws.com/hotosm-ui/latest/dist/style.css"
122
- />
115
+ And import the required styles in your `main.ts` or equivalent (we import from package
116
+ rather than CDN, to allow the bundler to work it's CSS tree-shaking magic).
123
117
 
124
- <script
125
- type="module"
126
- src="https://s3.amazonaws.com/hotosm-ui/latest/dist/ui.js"
127
- ></script>
118
+ ```js
119
+ import '@hotosm/ui/dist/style.css';
120
+ ```
128
121
 
129
- <hot-logo></hot-logo>
130
- ```
122
+ If you wish to use any of the variables in `hot.css` manually, you can reference
123
+ them as variables like so:
131
124
 
132
- ## Using Extra Shoelace Components
125
+ ```css
126
+ /* In your CSS file */
127
+ some-param: var(--hot-some-param);
128
+ /* See all variables in the `theme/hot.css` file */
129
+ ```
133
130
 
134
- The HOT UI library contains many composite components, such as headers, sidebars,
135
- tracking banners, etc, and does not re-invent the wheel for low-level components.
131
+ ### Use The Components
136
132
 
137
- Shoelace is an UI library that is exported directly from `@hotosm/ui`.
133
+ #### Via Bundler
138
134
 
139
- To access the low-level components, such as buttons, dropdowns, modals, etc,
140
- simply import the component of the same name from the [Shoelace docs]
141
- (<https://shoelace.style>):
135
+ Import each component individually into your code:
142
136
 
143
- ```js
144
- import { Button } from '@hotosm/ui/dist/hotosm-ui';
145
- ```
137
+ ```html
138
+ <script>
139
+ import '@hotosm/ui/dist/components/header/header.js';
140
+ </script>
146
141
 
147
- ```html
148
- <hot-button disabled variant="secondary">Can't Click Me</hot-button>
149
- ```
142
+ <hot-header
143
+ param1=""
144
+ param2=""
145
+ >
146
+ </hot-header>
147
+ ```
150
148
 
151
- ### React Shoelace Wrappers
149
+ #### Via CDN
152
150
 
153
- ```js
154
- import { Button } from '@hotosm/ui/dist/react';
155
- ```
151
+ If you are working directly in HTML, or other ways without a configured
152
+ bundler, you can import all the components as a bundle, as use them like so:
156
153
 
157
- ```html
158
- <Button disabled variant="secondary">Can't Click Me</Button>
159
- ```
154
+ ```html
155
+ <script>
156
+ import '@hotosm/ui/dist/style.css';
157
+ import '@hotosm/ui/dist/hotosm-ui';
158
+ </script>
160
159
 
161
- ### Examples
160
+ <hot-logo><hot-logo>
161
+ <hot-button variant="primary">Click me!</hot-button>
162
+ ```
163
+
164
+ #### React
162
165
 
163
- You can found examples for HTML and also all common frameworks
164
- (React, Svelte, Vue) under `/examples`.
166
+ Import in the same way as the bundler example above, except events
167
+ are bound to slightly differently:
168
+
169
+ ```jsx
170
+ <hot-button
171
+ size='small'
172
+ variant='text'
173
+ disabled={currentIndex <= 0}
174
+ onClick={() => {
175
+ console.log('do stuff');
176
+ }}
177
+ >
178
+ </hot-button>
179
+ ```
165
180
 
166
181
  ### Development
167
182