@abgov/react-components 7.2.0-dev.24 → 7.2.0-dev.26

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.js

@@ -138,6 +138,7 @@ function getIconValue(icon, iconType) {
   return iconType ? "true" : "false";
 }
 function GoabBadge({
+  content,
   icon,
   iconType,
   size = "medium",
@@ -150,10 +151,12 @@ function GoabBadge({
     {
       icon: getIconValue(icon, iconType),
       icontype: iconType,
+      content: typeof content === "string" ? content : void 0,
       ..._props,
       version: "2",
       size,
-      emphasis
+      emphasis,
+      children: typeof content !== "string" && content != null && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "content", children: content })
     }
   );
 }