@bcgov/design-system-react-components 0.0.1 → 0.0.2

package/README.md

@@ -12,19 +12,36 @@ To use, install this package and import the components into your application.
 
 `npm install @bcgov/design-system-react-components`
 
-## Use
+## BC Sans font dependency
+
+This package installs [@bcgov/bc-sans](https://www.npmjs.com/package/@bcgov/bc-sans) as a peer dependency. You must import the font-face declarations from @bcgov/bc-sans and ensure the font is reachable for your end user. The React components require that the `BC Sans` font-face is available to display correctly. The components do not ship their own copies of the font to minimize your bundle size.
+
+**Important!** If you are on a BC Government-provisioned laptop, you already have the BC Sans font installed on your machine. This package uses `BC Sans` (with a space) for its font styles. If you are using this component library but not supplying the font, it's possible that your machine will still display the font correctly for you, **but not your end user**. Make sure to check this by disabling the font on your machine or by testing with another machine.
+
+### Use
 
 ```jsx
 // App.jsx
 
+// If you're already importing the BC Sans font-face somewhere else in your
+// project, there is no need to import it again. Just make sure the `BC Sans`
+// declaration and font files are available.
+import "@bcgov/bc-sans/css/BC_Sans.css";
+
+// Import the individual components you need
 import { TagGroup, TagList } from "@bcgov/design-system-react-components";
 
 export default function App() {
   return (
-    <TagGroup aria-label="Tags">
-      <TagList items={[]}>
+    <TagGroup aria-label="Tag group with two items">
+      <TagList
+        items={[
+          { id: "one", textValue: "One" },
+          { id: "two", textValue: "Two" },
+        ]}
+      />
     </TagGroup>
-  )
+  );
 }
 ```
 
@@ -32,6 +49,7 @@ export default function App() {
 
 | Component              | React Aria Components docs link                           |
 | ---------------------- | --------------------------------------------------------- |
+| Button                 | https://react-spectrum.adobe.com/react-aria/Button.html   |
 | TagGroup, TagList, Tag | https://react-spectrum.adobe.com/react-aria/TagGroup.html |
 
 ## Supported React versions
@@ -56,13 +74,13 @@ Components live in `./src/components` and are targeted by the build process with
 
 Storybook stories live in `./src/stories`.
 
-Run `npm run storybook` to access the Storybook instance for the component library.
+Run `npm run storybook-dev` to access the Storybook instance for the component library.
 
 ### Vite kitchen sink application
 
 Vite uses the components code directly from `./src/components` in groups of content in `./src/pages`.
 
-Run `npm run vite` to access the Vite React demo app.
+Run `npm run vite-dev` to access the Vite React demo app.
 
 ### Publish new versions
 
@@ -70,4 +88,4 @@ To generate an updated copy of the package for distribution, run the included Ro
 
 This will place artifacts in the `dist` folder, which is targeted for publishing in `package.json` with the [`files` field](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#files).
 
-Update the package version in `package.json` and run `npm run publish` to push a new version.
+Update the package version in `package.json` and run `npm publish` to push a new version.