@intellihr/blueberry 1.0.0-alpha.1

package/README.md

@@ -0,0 +1,116 @@
+# Blueberry Design System
+
+[Alpha - 0.0.1]  
+Blueberry is currently a work in progress. Check out [ui-components](https://gitlab.com/intellihr/engineering/ui-components) for our currently-in-use component library.
+
+Component status tracker: https://www.notion.so/ihr/cd77ab4f45634527b0ac495a83c27ad5?v=e96dc48e0a774a15b5bfb9f60cfddb23  
+Storybook: https://intellihr.gitlab.io/engineering/blueberry/storybook  
+Playroom: https://intellihr.gitlab.io/engineering/blueberry/playroom
+
+## Run Blueberry locally
+
+Running Blueberry locally is super simple.
+
+1. Clone this repo to your local dev environment
+2. Add a `.npmrc` file with our FontAwesome auth token to the root of the project. Look for _'Font Awesome Pro .npmrc'_ on 1Password for the contents of this file.
+3. Run `yarn`
+4. Run Storybook (`yarn storybook`) and/or Playroom (`yarn playroom`) using their respective commands
+
+## Consume Blueberry components (yum!)
+
+Blueberry exports a single package containing all the components and utilities you need to build awesome, accessible UIs. The library is versioned as a single package to keep maintenance simple and straightforward for both consumers and the design team.
+
+### First time set up
+
+1. Add Blueberry as a dependency
+   - `yarn add @intellihr/blueberry`
+2. Wrap the `BlueberryProvider` component around the top level of your app (you'll likely have a stack of providers already).
+   - This provider sets up the global styles and theme variables - none of our components will work correctly without this.
+3. Start importing components!
+
+#### BlueberryProvider configuration
+
+The following props can be used to customize your implementation:
+
+- `theme` takes a string to select what theme to use.
+  - `intelliLight` will be used if no theme is specified.
+  - The theme object cannot be directly configured or passed through from a consumer.
+- `i18n` takes an object of all the translation strings required for components. Default English translations are located in `_private/BlueberryContext/i18n.ts`
+- `i18nLocale` takes a locale for certain require components that require it. Defaults to `en`.
+- `anchorOnClick` takes a function that gets called when a user interacts with any `a` element rendered by Blueberry.
+  - `undefined` will be used if no callback is specified.
+  - If you don't use a routing library like `react-router` you can ignore this prop.
+  - Example for running a custom callback only on `href`s that start with `/spa/`:
+    ```tsx
+    anchorOnClick={(e) => {
+      if (e.currentTarget.href.startsWith('/spa/') {
+        myCustomOnClick(e)
+      }
+    }}
+    ```
+
+## Our Foundations
+
+### Vanilla Extract (CSS-in-JS)
+
+We're using [Vanilla Extract](https://vanilla-extract.style/) as it gives us great performance with its zero-runtime atomic CSS and type safety through its Typescript preprocessor.
+
+### Radix (Component Primitives)
+
+We're using [Radix](https://www.radix-ui.com/) components as the basis for many of our components to save time and effort instead of re-implementing accessibility (a11y) standards and common interactions. Radix primitives should never be re-exported directly by Blueberry.
+
+### FontAwesome (Icons)
+
+We're using [Font Awesome 6 Pro](https://fontawesome.com/) icons for a consistent library of icons. Blueberry uses the [Individual import method](https://fontawesome.com/docs/web/use-with/react/add-icons#add-individual-icons-explicitly) and exports a curated subset of icons with our own wrapper.
+
+## Contributing to Blueberry
+
+Blueberry is composed of a few separate apps which can each be run individually both inside and outside of docker. We recommend running outside of docker for local development.
+
+### Storybook (Component Development)
+
+`yarn storybook`
+
+Storybook is great for developing and prototyping components in an isolated environment.
+
+- [Blueberry Storybook](https://intellihr.gitlab.io/engineering/blueberry/storybook)
+- All components should have a `.stories.tsx` file.
+- Built with [Storybook](https://storybook.js.org/)
+
+### Playroom (Design Prototyping via Code)
+
+`yarn playroom`
+
+Playroom is an awesome tool for live prototyping and designing UIs with code.
+
+- [Blueberry Playroom](https://intellihr.gitlab.io/engineering/blueberry/playroom)
+- All components exported from `index.ts` should be available in Playroom.
+- All components should have a `.snippets.tsx` file.
+- Built with [Playroom](https://github.com/seek-oss/playroom)
+
+### Tests
+
+`yarn test`
+
+We expect all of our components and interactions to be thoroughly tested for accessibility and functionality.
+
+- All components should have a `.test.tsx` file
+- Components have an `data-cy` attribute that can be used for testing with Jest and Cypress. This is equivalent to the [data-component-context](https://intellihr.gitlab.io/engineering/ui-components/#/UI%20Components/Testing%20and%20Context) attribute in UI Components. Set this value with the component's `id` prop.
+- Tests run on [Jest](https://jestjs.io/)
+- Built with [Interactors by Frontside](https://frontside.com/interactors/) and [Testing Library (React)](https://testing-library.com/docs/react-testing-library/intro/)
+
+### Docs Site
+
+-Coming eventually-
+
+The landing point for all things Blueberry that clearly displays all of our design principles, tokens, and patterns as well as component usage documentation with links out to Storybook and Playroom.
+
+## Misc
+
+### Create React App
+
+Blueberry is built on top of Create React App. The following scripts are available:
+
+- `npm run build` - Builds the app for production to the `build` folder.
+
+- `npm run eject` - Ejects the app from CRA's single build config

package/dist/_virtual/TextareaAutosize.js

@@ -0,0 +1,2 @@
+var r={};export{r as __exports};
+//# sourceMappingURL=TextareaAutosize.js.map

package/dist/_virtual/TextareaAutosize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaAutosize.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,2 @@
+var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}export{e as commonjsGlobal,o as getDefaultExportFromCjs};
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/autosize.js

@@ -0,0 +1,2 @@
+var a={exports:{}};export{a};
+//# sourceMappingURL=autosize.js.map

package/dist/_virtual/autosize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autosize.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/index.js

@@ -0,0 +1,2 @@
+var r={exports:{}};export{r};
+//# sourceMappingURL=index.js.map

package/dist/_virtual/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/index2.js

@@ -0,0 +1,2 @@
+var p={exports:{}};export{p};
+//# sourceMappingURL=index2.js.map

package/dist/_virtual/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/index3.js

@@ -0,0 +1,2 @@
+var r={exports:{}};export{r};
+//# sourceMappingURL=index3.js.map

package/dist/_virtual/index3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/index4.js

@@ -0,0 +1,2 @@
+var r={};export{r as __exports};
+//# sourceMappingURL=index4.js.map

package/dist/_virtual/index4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/index5.js

@@ -0,0 +1,2 @@
+var r={exports:{}};export{r};
+//# sourceMappingURL=index5.js.map

package/dist/_virtual/index5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/index6.js

@@ -0,0 +1,2 @@
+var r={exports:{}};export{r};
+//# sourceMappingURL=index6.js.map

package/dist/_virtual/index6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index6.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/react-is.development.js

@@ -0,0 +1,2 @@
+var r={};export{r as __exports};
+//# sourceMappingURL=react-is.development.js.map

package/dist/_virtual/react-is.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/react-is.development2.js

@@ -0,0 +1,2 @@
+var r={};export{r as __exports};
+//# sourceMappingURL=react-is.development2.js.map

package/dist/_virtual/react-is.development2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.development2.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/react-is.development3.js

@@ -0,0 +1,2 @@
+var r={};export{r as __exports};
+//# sourceMappingURL=react-is.development3.js.map

package/dist/_virtual/react-is.development3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.development3.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/react-is.development4.js

@@ -0,0 +1,2 @@
+var r={};export{r as __exports};
+//# sourceMappingURL=react-is.development4.js.map

package/dist/_virtual/react-is.development4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.development4.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/react-is.production.min.js

@@ -0,0 +1,2 @@
+var r={};export{r as __exports};
+//# sourceMappingURL=react-is.production.min.js.map

package/dist/_virtual/react-is.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.production.min.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/react-is.production.min2.js

@@ -0,0 +1,2 @@
+var r={};export{r as __exports};
+//# sourceMappingURL=react-is.production.min2.js.map

package/dist/_virtual/react-is.production.min2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.production.min2.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/react-is.production.min3.js

@@ -0,0 +1,2 @@
+var r={};export{r as __exports};
+//# sourceMappingURL=react-is.production.min3.js.map

package/dist/_virtual/react-is.production.min3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.production.min3.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/_virtual/react-is.production.min4.js

@@ -0,0 +1,2 @@
+var r={};export{r as __exports};
+//# sourceMappingURL=react-is.production.min4.js.map

package/dist/_virtual/react-is.production.min4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.production.min4.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/assets/src/Alert/Alert.css.ts.vanilla-b1a5e782.css

@@ -0,0 +1,17 @@
+._124oo840 {
+  border-left-width: var(--_1uyhemt2l);
+  border-left-style: solid;
+  line-height: var(--_1uyhemt22);
+}
+._124oo841 {
+  border-left-color: var(--_1uyhemth);
+}
+._124oo842 {
+  border-left-color: var(--_1uyhemt9);
+}
+._124oo843 {
+  border-left-color: var(--_1uyhemtx);
+}
+._124oo844 {
+  border-left-color: var(--_1uyhemt15);
+}

package/dist/assets/src/Avatar/Avatar.css.ts.vanilla-bc6cf0e4.css

@@ -0,0 +1,97 @@
+._139vb0v3 {
+  --_139vb0v0: var(--_1uyhemt2c);
+  --_139vb0v1: var(--_1uyhemt2f);
+  --_139vb0v2: var(--_1uyhemt2h);
+  background-color: var(--_1uyhemt1h);
+  border-radius: var(--_1uyhemt26);
+  color: var(--_1uyhemt1k);
+  overflow: hidden;
+  font-weight: var(--_1uyhemt1x);
+  position: relative;
+  text-align: center;
+}
+._139vb0v3:after {
+  content: "";
+  border-radius: var(--_1uyhemt26);
+  box-shadow: 0 0 1px rgba(0,0,0,0.15) inset;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  width: 100%;
+}
+._139vb0v4 {
+  font-size: var(--_1uyhemt1q);
+  height: var(--_139vb0v0);
+  line-height: var(--_139vb0v0);
+  width: var(--_139vb0v0);
+}
+._139vb0v5 {
+  font-size: var(--_1uyhemt1s);
+  height: var(--_139vb0v1);
+  line-height: var(--_139vb0v1);
+  width: var(--_139vb0v1);
+}
+._139vb0v6 {
+  font-size: var(--_1uyhemt1v);
+  height: var(--_139vb0v2);
+  line-height: var(--_139vb0v2);
+  width: var(--_139vb0v2);
+}
+._139vb0v7 {
+  border: 2px dashed var(--_1uyhemt1j);
+  color: var(--_1uyhemt1e);
+}
+._139vb0v7:after {
+  display: none;
+}
+._139vb0v9 {
+  align-items: center;
+  border-radius: var(--_1uyhemt25);
+  display: flex;
+}
+._139vb0v9:after {
+  display: none;
+}
+._139vb0vb {
+  mask: radial-gradient(circle at calc(var(--_139vb0v0) * 1.1 + 2px), transparent calc(var(--_139vb0v0) * 0.5 + 2px), white 0);
+  -webkit-mask: radial-gradient(circle at calc(var(--_139vb0v0) * 1.1 + 2px), transparent calc(var(--_139vb0v0) * 0.5 + 2px), white 0);
+  margin-left: calc(var(--_139vb0v0) * -0.35);
+}
+._12idioy0 > ._139vb0vb:first-child {
+  margin-left: 0;
+}
+._12idioy0 > ._139vb0vb:last-child {
+  -webkit-mask: none;
+  mask: none;
+}
+._139vb0vc {
+  mask: radial-gradient(circle at calc(var(--_139vb0v1) * 1.1 + 2px), transparent calc(var(--_139vb0v1) * 0.5 + 2px), white 0);
+  -webkit-mask: radial-gradient(circle at calc(var(--_139vb0v1) * 1.1 + 2px), transparent calc(var(--_139vb0v1) * 0.5 + 2px), white 0);
+  margin-left: calc(var(--_139vb0v1) * -0.35);
+}
+._12idioy0 > ._139vb0vc:first-child {
+  margin-left: 0;
+}
+._12idioy0 > ._139vb0vc:last-child {
+  -webkit-mask: none;
+  mask: none;
+}
+._139vb0vd {
+  mask: radial-gradient(circle at calc(var(--_139vb0v2) * 1.1 + 2px), transparent calc(var(--_139vb0v2) * 0.5 + 2px), white 0);
+  -webkit-mask: radial-gradient(circle at calc(var(--_139vb0v2) * 1.1 + 2px), transparent calc(var(--_139vb0v2) * 0.5 + 2px), white 0);
+  margin-left: calc(var(--_139vb0v2) * -0.35);
+}
+._12idioy0 > ._139vb0vd:first-child {
+  margin-left: 0;
+}
+._12idioy0 > ._139vb0vd:last-child {
+  -webkit-mask: none;
+  mask: none;
+}
+@supports not (mask: radial-gradient(white 0, black 0)) and not (-webkit-mask: radial-gradient(white 0, black 0)) {
+  ._139vb0va {
+    outline: 2px solid var(--_1uyhemt1l);
+  }
+}

package/dist/assets/src/AvatarGroup/AvatarGroup.css.ts.vanilla-1c28d357.css

@@ -0,0 +1,4 @@
+._12idioy0 {
+  align-items: center;
+  display: flex;
+}

package/dist/assets/src/Button/Button.css.ts.vanilla-ff813fa3.css

@@ -0,0 +1,121 @@
+.knav6p0 {
+  appearance: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--_1uyhemt24);
+  cursor: pointer;
+  display: inline-block;
+  font-size: var(--_1uyhemt1r);
+  font-weight: var(--_1uyhemt1x);
+  line-height: var(--_1uyhemt1z);
+  padding: var(--_1uyhemt2a) var(--_1uyhemt2b);
+  text-decoration: none;
+  transition: background-color var(--_1uyhemt2t) ease-out, color var(--_1uyhemt2t) ease-out;
+  position: relative;
+}
+.knav6p1 {
+  background-color: var(--_1uyhemt1);
+  color: var(--_1uyhemt4);
+}
+.knav6p1:hover, .knav6p1:focus {
+  background-color: var(--_1uyhemt2);
+}
+.knav6p1:active {
+  background-color: var(--_1uyhemt3);
+}
+.knav6p2 {
+  background-color: var(--_1uyhemtl);
+  color: var(--_1uyhemto);
+}
+.knav6p2:hover, .knav6p2:focus {
+  background-color: var(--_1uyhemtm);
+}
+.knav6p2:active {
+  background-color: var(--_1uyhemtn);
+}
+.knav6p3 {
+  background-color: var(--_1uyhemt1h);
+  color: var(--_1uyhemt1k);
+}
+.knav6p3:hover, .knav6p3:focus {
+  background-color: var(--_1uyhemt1i);
+}
+.knav6p3:active {
+  background-color: var(--_1uyhemt1j);
+}
+.knav6p4 {
+  background-color: transparent;
+  color: var(--_1uyhemt1k);
+}
+.knav6p4:hover, .knav6p4:focus {
+  background-color: var(--_1uyhemt1i);
+}
+.knav6p4:active {
+  background-color: var(--_1uyhemt1j);
+}
+.knav6p5 {
+  background-color: var(--_1uyhemt19);
+  color: var(--_1uyhemt1c);
+}
+.knav6p5:hover, .knav6p5:focus {
+  background-color: var(--_1uyhemt1a);
+}
+.knav6p5:active {
+  background-color: var(--_1uyhemt1b);
+}
+.knav6p6 {
+  background-color: var(--_1uyhemt1i);
+  color: var(--_1uyhemt1f);
+  cursor: not-allowed;
+}
+.knav6p6:hover, .knav6p6:focus, .knav6p6:active {
+  background-color: var(--_1uyhemt1i);
+}
+.knav6p7 {
+  cursor: default;
+}
+.knav6p8 {
+  padding: var(--_1uyhemt2a) var(--_1uyhemt2b);
+}
+.knav6p9 {
+  padding: var(--_1uyhemt29) var(--_1uyhemt2a);
+}
+.knav6pa {
+  border-radius: var(--_1uyhemt26);
+  min-width: var(--_1uyhemt2r);
+  padding-left: var(--_1uyhemt28);
+  padding-right: var(--_1uyhemt28);
+}
+.knav6pb {
+  margin-bottom: calc(var(--_1uyhemt2a) * -1);
+  margin-top: calc(var(--_1uyhemt2a) * -1);
+}
+.knav6pc {
+  background-color: transparent;
+  color: var(--_1uyhemt1e);
+}
+.knav6pc:hover, .knav6pc:focus, .knav6pc:active {
+  background-color: transparent;
+  color: var(--_1uyhemt1e);
+}
+.knav6pd:hover, .knav6pd:focus, .knav6pd:active {
+  background-color: var(--_1uyhemt1);
+}
+.knav6pe:hover, .knav6pe:focus, .knav6pe:active {
+  background-color: var(--_1uyhemtl);
+}
+.knav6pf:hover, .knav6pf:focus, .knav6pf:active {
+  background-color: var(--_1uyhemt1h);
+}
+.knav6pg:hover, .knav6pg:focus, .knav6pg:active {
+  background-color: transparent;
+}
+.knav6ph:hover, .knav6ph:focus, .knav6ph:active {
+  background-color: var(--_1uyhemt19);
+}
+.knav6pi {
+  margin: calc(var(--_1uyhemt2a) * -1);
+}
+.knav6pj {
+  min-width: var(--_1uyhemt2q);
+}

package/dist/assets/src/ButtonIcon/ButtonIcon.css.ts.vanilla-4c9e1498.css

@@ -0,0 +1,55 @@
+._1wya8s20 {
+  appearance: none;
+  border-radius: var(--_1uyhemt26);
+  cursor: pointer;
+  display: inline-block;
+  font-size: var(--_1uyhemt1s);
+  height: var(--_1uyhemt2e);
+  line-height: var(--_1uyhemt2e);
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: background-color var(--_1uyhemt2t) ease-out, color var(--_1uyhemt2t) ease-out;
+  width: var(--_1uyhemt2e);
+}
+._1wya8s21 {
+  color: var(--_1uyhemt8);
+}
+._1wya8s21:hover, ._1wya8s21:focus {
+  background-color: var(--_1uyhemt6);
+}
+._1wya8s21:active {
+  background-color: var(--_1uyhemt7);
+}
+._1wya8s22 {
+  color: var(--_1uyhemt1c);
+}
+._1wya8s22:hover, ._1wya8s22:focus {
+  background-color: var(--_1uyhemt1a);
+}
+._1wya8s22:active {
+  background-color: var(--_1uyhemt1b);
+}
+._1wya8s23 {
+  color: var(--_1uyhemt1p);
+}
+._1wya8s23:hover, ._1wya8s23:focus {
+  color: var(--_1uyhemt1);
+}
+._1wya8s23:active {
+  background-color: rgba(0,0,0,0.1);
+}
+._1wya8s24 {
+  color: var(--_1uyhemt1d);
+  cursor: not-allowed;
+}
+._1wya8s24:hover, ._1wya8s24:focus, ._1wya8s24:active {
+  background-color: transparent;
+}
+._1wya8s25 {
+  margin-bottom: calc(var(--_1uyhemt2a) * -1);
+  margin-top: calc(var(--_1uyhemt2a) * -1);
+}
+._1wya8s26 {
+  margin: calc(var(--_1uyhemt2a) * -1) calc(var(--_1uyhemt28) * -1);
+}

package/dist/assets/src/CardList/CardList.css.ts.vanilla-99976025.css

@@ -0,0 +1,7 @@
+._11awgdy0 {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding: 0;
+  row-gap: var(--_1uyhemt2k);
+}