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

package/README.md

@@ -1,5 +1,7 @@
 # @bcgov/design-system-react-components
 
+[![Lifecycle:Experimental](https://img.shields.io/badge/Lifecycle-Experimental-339999)](https://github.com/bcgov/repomountie/blob/master/doc/lifecycle-badges.md)
+
 This package contains a library of React components built using [React Aria Components](https://react-spectrum.adobe.com/react-aria/react-aria-components.html) to implement the BC Design System.
 
 Questions? Please email the <a href="mailto:DesignSystem@gov.bc.ca">GDX OSS Design Team</a>.
@@ -12,13 +14,13 @@ To use, install this package and import the components into your application.
 
 `npm install @bcgov/design-system-react-components`
 
-## BC Sans font dependency
+### 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
+## Use
 
 ```jsx
 // App.jsx
@@ -29,18 +31,33 @@ This package installs [@bcgov/bc-sans](https://www.npmjs.com/package/@bcgov/bc-s
 import "@bcgov/bc-sans/css/BC_Sans.css";
 
 // Import the individual components you need
-import { TagGroup, TagList } from "@bcgov/design-system-react-components";
+import {
+  Button,
+  Header,
+  TagGroup,
+  TagList
+} from "@bcgov/design-system-react-components";
 
 export default function App() {
   return (
-    <TagGroup aria-label="Tag group with two items">
-      <TagList
-        items={[
-          { id: "one", textValue: "One" },
-          { id: "two", textValue: "Two" },
-        ]}
-      />
-    </TagGroup>
+    <Header
+      title="My application"
+      skipLinks={[
+        <a href="#main-content">Skip to main content</a>
+      ]}
+    >
+      <Button variant="primary" size="small">Log in</Button>
+    </Header>
+    <main id="main-content">
+      <TagGroup aria-label="Tag group with two items">
+        <TagList
+          items={[
+            { id: "one", textValue: "One" },
+            { id: "two", textValue: "Two" },
+          ]}
+        />
+      </TagGroup>
+    </main>
   );
 }
 ```
@@ -50,6 +67,8 @@ export default function App() {
 | Component              | React Aria Components docs link                           |
 | ---------------------- | --------------------------------------------------------- |
 | Button                 | https://react-spectrum.adobe.com/react-aria/Button.html   |
+| Header                 | N/A                                                       |
+| Select                 | https://react-spectrum.adobe.com/react-aria/Select.html   |
 | TagGroup, TagList, Tag | https://react-spectrum.adobe.com/react-aria/TagGroup.html |
 
 ## Supported React versions
@@ -64,6 +83,10 @@ By targeting v16.4.0 as a minimum, we get to use [React's modern JSX transformat
 
 This means there's no need for unused `import React from "react"` statements in your JSX files.
 
+## Versions
+
+This project follows semantic versioning. See [CHANGELOG.md](./CHANGELOG.md) for version details.
+
 ## Development
 
 ### Components

package/dist/assets/index-t1vEzjyT.css

@@ -0,0 +1 @@
+#root{max-width:1280px;margin:0 auto;padding:2rem}h1,h2,h3,h4,h5,h6{font-family:var(--typography-font-families-bc-sans)}:root{--surface-opacity-0: 0;--surface-opacity-10: .1;--surface-opacity-20: .2;--surface-opacity-30: .3;--surface-opacity-40: .4;--surface-opacity-50: .5;--surface-opacity-60: .6;--surface-opacity-70: .7;--surface-opacity-80: .8;--surface-opacity-90: .9;--surface-opacity-100: 1;--surface-primary-default: #013366;--surface-primary-hover: #1E5189;--surface-primary-disabled: #edebe9;--surface-primary-active: #2E5DD7;--surface-secondary-default: #ffffff;--surface-secondary-hover: #edebe9;--surface-secondary-disabled: #edebe9;--surface-secondary-active: #2E5DD7;--surface-tertiary-default: #ffffff00;--surface-tertiary-hover: #eceae8;--surface-tertiary-disabled: #edebe9;--surface-tertiary-active: #2E5DD7;--surface-danger-default: #ce3e39;--surface-danger-hover: #a2312d;--surface-danger-active: #2E5DD7;--surface-danger-disabled: #edebe9;--surface-background-white: #ffffff;--surface-background-light: #faf9f8;--surface-border-light: #d8d8d8;--surface-border-medium: #898785;--surface-border-dark: #353433;--surface-overlay-default: #00000073;--surface-brand-gold-10: #fff8e9;--surface-brand-gold-20: #feebc2;--surface-brand-gold-30: #fddf9d;--surface-brand-gold-40: #fdd47b;--surface-brand-gold-50: #fcc85d;--surface-brand-gold-60: #f8ba47;--surface-brand-gold-70: #ce9737;--surface-brand-gold-80: #a5792b;--surface-brand-gold-90: #7e5d21;--surface-brand-gold-100: #584215;--surface-brand-blue-10: #f1f8fe;--surface-brand-blue-20: #d8eafd;--surface-brand-blue-30: #c1ddfc;--surface-brand-blue-40: #a8d0fb;--surface-brand-blue-50: #91c4fa;--surface-brand-blue-60: #7ab8f9;--surface-brand-blue-70: #5595d9;--surface-brand-blue-80: #3470b1;--surface-brand-blue-90: #1e5189;--surface-brand-blue-100: #053662;--surface-brand-gray-10: #faf9f8;--surface-brand-gray-20: #f3f2f1;--surface-brand-gray-30: #eceae8;--surface-brand-gray-40: #e0dedc;--surface-brand-gray-50: #d1cfcd;--surface-brand-gray-60: #c6c5c3;--surface-brand-gray-70: #9f9d9c;--surface-brand-gray-80: #605e5c;--surface-brand-gray-90: #3d3c3b;--surface-brand-gray-100: #353433;--surface-brand-gray-110: #252423;--surface-brand-gray-white: #ffffff;--surface-icons-primary: #2d2d2d;--surface-icons-secondary: #474543;--surface-icons-disabled: #9f9d9c;--surface-icons-link: #255a90;--surface-icons-info: #053662;--surface-icons-danger: #ce3e39;--surface-icons-success: #42814a;--surface-icons-warning: #f8bb47;--surface-support-surface-color-info: #f7f9fc;--surface-support-surface-color-danger: #f4e1e2;--surface-support-surface-color-success: #f6fff8;--surface-support-surface-color-warning: #fef1d8;--surface-support-border-color-info: #053662;--surface-support-border-color-danger: #ce3e39;--surface-support-border-color-success: #42814a;--surface-support-border-color-warning: #f8bb47;--surface-shadow-none: 0 .30000001192092896px .8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021;--surface-shadow-small: 0 .6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021;--surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021;--surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038;--surface-border-radius-none: 0;--surface-border-radius-small: 2px;--surface-border-radius-medium: 4px;--surface-border-radius-large: 6px;--surface-border-width-none: 0;--surface-border-width-small: 1px;--surface-border-width-medium: 2px;--surface-border-width-large: 4px;--surface-size-small: 0px 8px;--surface-size-medium: 6px 16px;--support-support-surface-color-info: #f7f9fc;--support-support-surface-color-danger: #f4e1e2;--support-support-surface-color-success: #f6fff8;--support-support-surface-color-warning: #fef1d8;--support-support-border-color-info: #053662;--support-support-border-color-danger: #ce3e39;--support-support-border-color-success: #42814a;--support-support-border-color-warning: #f8bb47;--icons-icons-primary: #2d2d2d;--icons-icons-secondary: #474543;--icons-icons-disabled: #9f9d9c;--icons-icons-link: #255a90;--icons-icons-info: #053662;--icons-icons-danger: #ce3e39;--icons-icons-success: #42814a;--icons-icons-warning: #f8bb47;--icons-icons-primary-invert: #ffffff;--icons-size-xsmall: 14px;--icons-size-small: 16px;--icons-size-medium: 20px;--icons-size-large: 24px;--icons-size-xlarge: 32px;--layout-border-width-none: 0;--layout-border-width-small: 1px;--layout-border-width-medium: 2px;--layout-border-width-large: 4px;--layout-padding-none: 0;--layout-padding-xsmall: 4px;--layout-padding-small: 8px;--layout-padding-medium: 16px;--layout-padding-large: 24px;--layout-padding-xlarge: 32px;--layout-margin-none: 0;--layout-margin-hair: 2px;--layout-margin-xsmall: 4px;--layout-margin-small: 8px;--layout-margin-medium: 16px;--layout-margin-large: 24px;--layout-margin-xlarge: 32px;--layout-margin-xxlarge: 40px;--layout-margin-xxxlarge: 48px;--layout-margin-huge: 56px;--typography-font-families-bc-sans: "BC Sans";--typography-line-heights-xxdense: 1.313rem;--typography-line-heights-xdense: 1.688rem;--typography-line-heights-dense: 1.913rem;--typography-line-heights-regular: 2.125rem;--typography-line-heights-sparse: 2.25rem;--typography-line-heights-xsparse: 3rem;--typography-line-heights-xxsparse: 3.375rem;--typography-line-heights-auto: AUTO;--typography-font-weights-regular: 400;--typography-font-weights-bold: 700;--typography-font-weights-italic: Italic;--typography-font-size-label: .875rem;--typography-font-size-body: 1rem;--typography-font-size-large-body: 1.125rem;--typography-font-size-h5: 1.25rem;--typography-font-size-h4: 1.5rem;--typography-font-size-h3: 1.75rem;--typography-font-size-h2: 2rem;--typography-font-size-h1: 2.25rem;--typography-font-size-display: 3rem;--typography-letter-spacing-0: 0em;--typography-paragraph-spacing-0: 0;--typography-regular-label: 400 .875rem/1.313rem "BC Sans";--typography-regular-body: 400 1rem/1.688rem "BC Sans";--typography-regular-large-body: 400 1.125rem/1.913rem "BC Sans";--typography-regular-h5: 400 1.25rem/2.125rem "BC Sans";--typography-regular-h4: 400 1.5rem/2.25rem "BC Sans";--typography-regular-h3: 400 1.75rem/3rem "BC Sans";--typography-regular-h2: 400 2rem/3.375rem "BC Sans";--typography-regular-h1: 400 2.25rem/3rem "BC Sans";--typography-regular-display: 400 3rem/AUTO "BC Sans";--typography-bold-label: 700 .875rem/1.313rem "BC Sans";--typography-bold-body: 700 1rem/1.688rem "BC Sans";--typography-bold-large-body: 700 1.125rem/1.913rem "BC Sans";--typography-bold-h5: 700 1.25rem/2.125rem "BC Sans";--typography-bold-h4: 700 1.5rem/2.25rem "BC Sans";--typography-bold-h3: 700 1.75rem/3.375rem "BC Sans";--typography-bold-h2: 700 2rem/3rem "BC Sans";--typography-bold-h1: 700 2.25rem/AUTO "BC Sans";--typography-bold-display: 700 3rem/AUTO "BC Sans";--typography-italic-label: 400 italic .875rem/1.313rem "BC Sans";--typography-italic-body: 400 italic 1rem/1.688rem "BC Sans";--typography-italic-large-body: 400 italic 1.125rem/1.913rem "BC Sans";--typography-italic-h5: 400 italic 1.25rem/2.125rem "BC Sans";--typography-italic-h4: 400 italic 1.5rem/2.25rem "BC Sans";--typography-italic-h3: 400 italic 1.75rem/3.375rem "BC Sans";--typography-italic-h2: 400 italic 2rem/3.375rem "BC Sans";--typography-italic-h1: 400 italic 2.25rem/3rem "BC Sans";--typography-italic-display: 400 italic 3rem/AUTO "BC Sans";--typography-text-case-none: none;--typography-text-decoration-none: none;--typography-paragraph-indent-0: 0px;--typography-color-primary: #2D2D2D;--typography-color-secondary: #474543;--typography-color-disabled: #9F9D9C;--typography-color-link: #255A90;--typography-color-primary-invert: #FFFFFF;--typography-color-secondary-invert: #ECEAE8}@font-face{font-family:BC Sans;font-style:normal;font-weight:400;src:url(/assets/BCSans-Regular-ysGfRp0T.woff2) format("woff2"),url(/assets/BCSans-Regular-jMf6NRx3.woff) format("woff")}@font-face{font-family:BC Sans;font-style:italic;font-weight:400;src:url(/assets/BCSans-Italic-Pz_cGW4F.woff2) format("woff2"),url(/assets/BCSans-Italic-UhTyhoET.woff) format("woff")}@font-face{font-family:BC Sans;font-style:normal;font-weight:700;src:url(/assets/BCSans-Bold-onJZunl0.woff2) format("woff2"),url(/assets/BCSans-Bold-ZqE3sZik.woff) format("woff")}@font-face{font-family:BC Sans;font-style:italic;font-weight:700;src:url(/assets/BCSans-BoldItalic-GxGpSOWy.woff2) format("woff2"),url(/assets/BCSans-BoldItalic-4P_OlA2s.woff) format("woff")}@font-face{font-family:BC Sans;font-style:normal;font-weight:300;src:url(/assets/BCSans-Light-A03rbYd1.woff2) format("woff2"),url(/assets/BCSans-Light-playkmYo.woff) format("woff")}@font-face{font-family:BC Sans;font-style:italic;font-weight:300;src:url(/assets/BCSans-LightItalic-HTeW1g69.woff2) format("woff2"),url(/assets/BCSans-LightItalic-tgMWPWlK.woff) format("woff")}.react-aria-Button{border:none;border-radius:var(--layout-border-radius-medium, 4px);cursor:pointer;display:inline-flex;align-items:center;gap:var(--layout-padding-small);font:var(--typography-regular-body);padding-left:16px;padding-right:16px}.react-aria-Button[data-disabled]{cursor:not-allowed}.react-aria-Button[data-focused]{outline:2px solid var(--surface-primary-active)}.react-aria-Button.icon{align-items:center;justify-content:space-around}.react-aria-Button.small{min-height:32px}.react-aria-Button.small.icon{padding:unset;height:32px;width:32px}.react-aria-Button.medium{min-height:40px}.react-aria-Button.medium.icon{padding:unset;height:40px;width:40px}.react-aria-Button.primary{background:var(--surface-primary-default);color:var(--typography-color-primary-invert)}.react-aria-Button.primary.danger{background-color:var(--surface-danger-default)}.react-aria-Button.primary[data-disabled]{background-color:var(--surface-primary-disabled);color:var(--typography-color-disabled)}.react-aria-Button.primary[data-hovered]{background-color:var(--surface-primary-hover)}.react-aria-Button.primary.danger[data-hovered]{background-color:var(--surface-danger-hover)}.react-aria-Button.secondary{background-color:var(--surface-secondary-default);border:1px solid var(--surface-border-dark);color:var(--typography-color-primary)}.react-aria-Button.secondary.danger{border-color:var(--surface-support-border-color-danger);color:var(--surface-danger-default)}.react-aria-Button.secondary[data-disabled]{background-color:var(--surface-primary-disabled);border-color:var(--surface-border-light);color:var(--typography-color-disabled)}.react-aria-Button.secondary[data-hovered]{background-color:var(--surface-secondary-hover)}.react-aria-Button.secondary.danger[data-hovered]{background-color:var(--surface-support-surface-color-danger)}.react-aria-Button.tertiary{background-color:var(--surface-tertiary-default);color:var(--typography-color-primary)}.react-aria-Button.tertiary.danger{color:var(--surface-danger-default)}.react-aria-Button.tertiary[data-disabled]{background-color:var(--surface-tertiary-default);color:var(--typography-color-disabled)}.react-aria-Button.tertiary[data-hovered]{background-color:var(--surface-tertiary-hover)}.react-aria-Button.tertiary.danger[data-hovered]{background-color:var(--surface-support-surface-color-danger)}.react-aria-Button.link{background-color:var(--surface-tertiary-default);color:var(--typography-color-link);text-decoration:underline;text-underline-offset:.3em}.react-aria-Button.link.danger{color:var(--surface-danger-default)}.react-aria-Button.link[data-disabled]{color:var(--typography-color-disabled)}.react-aria-TagGroup{color:var(--typography-color-primary, #2d2d2d);font:var(--typography-regular-label, 400 .875rem/1.313rem "BC Sans")}.react-aria-Label,.react-aria-Text{display:block;margin:var(--layout-margin-small) var(--layout-margin-none)}.react-aria-Text.error{color:var(--surface-danger-default, #ce3e39)}.react-aria-Tag{color:var(--typography-color-primary, #2d2d2d);cursor:pointer;border-radius:var(--layout-margin-hair, 2px);border:1px solid;box-sizing:content-box;font:var(--typography-regular-label, 400 .875rem/1.313rem "BC Sans");padding:2px 8px;width:fit-content}.react-aria-Tag__contents{display:flex;align-items:center;gap:8px}.react-aria-Tag__contents .react-aria-Button{background:none;border:none;color:var(--typography-color-primary, #2d2d2d);cursor:pointer;display:flex;margin:0;padding:0}.react-aria-Tag.bc-blue{background-color:var(--surface-color-primary-default, #013366);border-color:var(--surface-color-primary-hover, #1e5189);color:var(--typography-color-primary-invert, #ffffff)}.react-aria-Tag.bc-blue .react-aria-Tag__contents>.react-aria-Button{color:var(--typography-color-primary-invert, #ffffff)}.react-aria-Tag.bc-gold{background-color:var(--surface-color-brand-gold-60, #f8ba47);border-color:var(--surface-color-primary-hover, #1e5189)}.react-aria-Tag.blue{background-color:var(--surface-support-surface-color-info, #f7f9fc);border-color:var(--surface-support-border-color-info, #053662)}.react-aria-Tag.dark{border-color:var(--surface-primary-hover, #1e5189);background:var(--surface-brand-gray-110, #252423);color:var(--typography-color-primary-invert, #ffffff)}.react-aria-Tag.dark .react-aria-Tag__contents>.react-aria-Button{color:var(--typography-color-primary-invert, #ffffff)}.react-aria-Tag.gray,.react-aria-Tag.grey{background-color:var(--surface-brand-gray-20, #f3f2f1);border-color:var(--surface-border-dark, #353433)}.react-aria-Tag.green{background-color:var(--surface-support-surface-color-success, #f6fff8);border-color:var(--surface-support-border-color-success, #42814a)}.react-aria-Tag.red{background-color:var(--surface-support-surface-color-danger, #f4e1e2);border-color:var(--surface-support-border-color-danger, #ce3e39)}.react-aria-Tag.yellow{background-color:var(--surface-support-surface-color-warning, #fef1d8);border-color:var(--surface-support-border-color-warning, #f8bb47)}.react-aria-Tag[data-selected]{border:2px solid var(--surface-primary-active, #2e5dd7);padding:1px 7px}.react-aria-Tag[data-focused]{outline:4px solid #3b99fc;outline-offset:1px}.react-aria-Tag[data-disabled]{background-color:var(--surface-primary-disabled, #edebe9);border-color:var(--surface-border-light, #d8d8d8);color:var(--typography-color-disabled, #9f9d9c);cursor:not-allowed}.react-aria-TagList{display:flex;flex-wrap:wrap;gap:var(--layout-padding-small);width:fit-content}.horizontal{flex-direction:row}.vertical{flex-direction:column}