@abgov/react-components 7.2.0-dev.3 → 7.2.0-dev.31

package/README.md

@@ -0,0 +1,60 @@
+# React UI Components
+
+[![npm version](https://img.shields.io/npm/v/@abgov/react-components?color=%230081a2&label=react-components&style=flat-square)](https://www.npmjs.com/package/@abgov/react-components)
+
+React wrappers for the Government of Alberta Design System web components.
+
+Supported React versions: 17, 18, and 19.
+
+## Install
+
+```bash
+npm i @abgov/react-components @abgov/web-components @abgov/ui-components-common @abgov/design-tokens
+```
+
+## Register the web components
+
+Import the underlying web components once in your application entry point, such as
+`src/main.tsx`:
+
+```typescript
+import "@abgov/web-components";
+```
+
+## Add styles
+
+Import the component styles and design tokens in your main stylesheet, such as
+`src/index.css`:
+
+```css
+@import "@abgov/web-components/index.css";
+@import "@abgov/design-tokens/dist/tokens.css";
+```
+
+## Add icons
+
+Add Ionicons to the `<head>` of `index.html`:
+
+```html
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"
+></script>
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.js"
+></script>
+```
+
+## Use a component
+
+```tsx
+import { GoabButton } from "@abgov/react-components";
+
+export function App() {
+  return <GoabButton type="primary">Continue</GoabButton>;
+}
+```
+
+See the [developer setup guide](https://design.alberta.ca/get-started/developers/setup/) and
+[Government of Alberta Design System](https://design.alberta.ca) for more information.

package/index.d.ts

@@ -19,6 +19,7 @@ export * from './lib/divider/divider';
 export * from './lib/drawer/drawer';
 export * from './lib/dropdown/dropdown';
 export * from './lib/dropdown/dropdown-item';
+export * from './lib/dropdown-multiselect/dropdown-multiselect';
 export * from './lib/file-upload-card/file-upload-card';
 export * from './lib/file-upload-input/file-upload-input';
 export * from './lib/footer/footer';
@@ -62,6 +63,7 @@ export * from './lib/side-menu/side-menu';
 export * from './lib/skeleton/skeleton';
 export * from './lib/spacer/spacer';
 export * from './lib/spinner/spinner';
+export * from './lib/scroll-panel/scroll-panel';
 export * from './lib/table/table';
 export * from './lib/table/table-sort-header';
 export * from './lib/tabs/tabs';
@@ -79,3 +81,5 @@ export * from './lib/work-side-menu-group/work-side-menu-group';
 export * from './lib/work-side-menu-item/work-side-menu-item';
 export * from './lib/work-side-notification-item/work-side-notification-item';
 export * from './lib/work-side-notification-panel/work-side-notification-panel';
+export * from './lib/theme/theme-context';
+export * from './lib/workspace-layout/workspace-layout';