@onewelcome/react-lib-components 0.1.10-alpha → 0.1.11-alpha

package/README.md

@@ -2,30 +2,32 @@
 
 This project provides React components built according to the [UI Component Library design](https://xd.adobe.com/view/1f7161d7-5ade-4e54-bb3d-6e4aa3a1d1a0-4a22/grid/). It uses the [DTS tool](https://weiran-zsd.github.io/dts-cli/) which provides for a consistent setup and configuration.
 
-> Note: the package is publicly available.
+> Note: the package is publicly available [on npm](https://www.npmjs.com/package/@onewelcome/react-lib-components).
 
 ## Commands
 
 ### Component library
 
-Run lib locally:
+When you are developing for the component library, you're going to want to run the Typescript compiler, test watcher and storybook. Please see the commands below for more information.
+
+Run the Typescript compiler:
 
 ```bash
-npm start # or yarn start
+npm start
 ```
 
 This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
 
-To run tests, use `npm test` or `yarn test`.
+To run tests, use `npm test`
 
 ```bash
-npm test # or yarn test
+npm test
 ```
 
-For running and watching tests, use `npm run test:watch`.
+For running and watching tests, use `npm test -- --watch`.
 
 ```bash
-npm run test:watch
+npm test -- --watch
 ```
 
 ### Storybook
@@ -33,7 +35,7 @@ npm run test:watch
 Run Storybook locally:
 
 ```bash
-npm run storybook # or yarn storybook
+npm run storybook
 ```
 
 ### All at once
@@ -52,13 +54,13 @@ Please see the [CONTRIBUTING.md](https://github.com/onewelcome/react-lib-compone
 
 See [adding icons to font manual](font/README.md)
 
-## Configuration
+## Code quality
 
-Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
+Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. This is to ensure that formatting is the same in every file of the component library. If you would like to suggest a change, please let the `SASSy` team know.
 
 ### Bundle analysis
 
-Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
+Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visualise it with `npm run analyze`.
 
 ### Rollup
 

package/dist/react-lib-components.cjs.development.js

@@ -691,8 +691,8 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   }, children));
 });
 
-var css$P = ".ContextMenu_module_contextMenu__56e15c16 {\n  position: relative;\n  display: inline-block;\n  box-sizing: border-box;\n}\n.ContextMenu_module_contextMenu__56e15c16 ul {\n  white-space: nowrap;\n  margin: 1rem 0;\n}\n\n.ContextMenu_module_menu__56e15c16 {\n  list-style: none;\n  padding: 0;\n  min-width: 200px;\n}\n.ContextMenu_module_menu__56e15c16 button {\n  text-align: left;\n}";
-var modules_846e6042 = {"context-menu":"ContextMenu_module_contextMenu__56e15c16","menu":"ContextMenu_module_menu__56e15c16"};
+var css$P = ".ContextMenu_module_contextMenu__d1c1d796 {\n  position: relative;\n  display: inline-block;\n  box-sizing: border-box;\n}\n\n.ContextMenu_module_menu__d1c1d796 {\n  white-space: nowrap;\n  margin: 1rem 0;\n  list-style: none;\n  padding: 0;\n  min-width: 200px;\n}\n.ContextMenu_module_menu__d1c1d796 button {\n  text-align: left;\n}";
+var modules_846e6042 = {"context-menu":"ContextMenu_module_contextMenu__d1c1d796","menu":"ContextMenu_module_menu__d1c1d796"};
 n(css$P,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var useBodyClick = function useBodyClick(checkFunction, callbackFunction, dependingStateVariable) {
@@ -882,7 +882,7 @@ var ContextMenu = /*#__PURE__*/React__default["default"].forwardRef(function (_r
     anchorEl: anchorEl,
     show: showContextMenu
   }, React__default["default"].createElement("ul", {
-    className: modules_846e6042.menu,
+    className: modules_846e6042['menu'],
     id: id + "-menu",
     "aria-describedby": id,
     role: "menu"
@@ -1624,8 +1624,8 @@ var Skeleton = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   }));
 });
 
-var css$C = ".Pagination_module_paginationWrapper__87a18f48 {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--greyed-out);\n  display: flex;\n  flex-direction: column;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_formElement__87a18f48 {\n  height: 2.5rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_formElement__87a18f48 button {\n  min-height: 2.5rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_total__87a18f48 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_total__87a18f48 span > span {\n  font-weight: 700;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  margin-left: 0.25rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 1rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_previous__87a18f48,\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_next__87a18f48 {\n  display: flex;\n  align-items: center;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_previous__87a18f48 button,\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_next__87a18f48 button {\n  margin: 0.25rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_previous__87a18f48 button span:before,\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_next__87a18f48 button span:before {\n  font-size: 0.75rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_perPage__87a18f48 {\n  display: none;\n  align-items: center;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_page__87a18f48 {\n  display: flex;\n  align-items: center;\n  flex-basis: min-content;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pageSizeSelect__87a18f48 {\n  border-color: #fff;\n  margin: 0 0.25rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pageSizeSelect__87a18f48 button {\n  min-width: 3.4375rem;\n  padding: 0;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pageSizeSelect__87a18f48 button div[data-display] {\n  left: 0.5rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pageSizeSelect__87a18f48 button div:not([data-display]) {\n  right: 0.5rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_currentValueInput__87a18f48 {\n  margin: 0 0.25rem 0 0;\n  padding: 0;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_currentValueInput__87a18f48 input {\n  border-radius: var(--input-border-radius);\n  padding: 0 1rem;\n  width: auto;\n  text-align: center;\n}\n\n@media screen and (min-width: 30em) {\n  .Pagination_module_paginationWrapper__87a18f48 {\n    flex-direction: row;\n  }\n  .Pagination_module_paginationWrapper__87a18f48 .Pagination_module_total__87a18f48 {\n    justify-content: flex-start;\n  }\n  .Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 {\n    margin-top: 0;\n    justify-content: flex-end;\n  }\n  .Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_previous__87a18f48 button,\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_next__87a18f48 button {\n    margin: 0 0.5rem;\n  }\n}\n@media screen and (min-width: 48em) {\n  .Pagination_module_paginationWrapper__87a18f48 .Pagination_module_perPage__87a18f48 {\n    display: flex;\n  }\n}";
-var modules_e3c5bce1 = {"pagination-wrapper":"Pagination_module_paginationWrapper__87a18f48","form-element":"Pagination_module_formElement__87a18f48","total":"Pagination_module_total__87a18f48","pagination":"Pagination_module_pagination__87a18f48","previous":"Pagination_module_previous__87a18f48","next":"Pagination_module_next__87a18f48","per-page":"Pagination_module_perPage__87a18f48","page":"Pagination_module_page__87a18f48","page-size-select":"Pagination_module_pageSizeSelect__87a18f48","current-value-input":"Pagination_module_currentValueInput__87a18f48"};
+var css$C = ".Pagination_module_paginationWrapper__f9057960 {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--greyed-out);\n  display: flex;\n  flex-direction: column;\n}\n.Pagination_module_paginationWrapper__f9057960 label {\n  margin-bottom: 0;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_formElement__f9057960 {\n  height: 2.5rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_formElement__f9057960 button {\n  min-height: 2.5rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_total__f9057960 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_total__f9057960 span > span {\n  font-weight: 700;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  margin-left: 0.25rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 1rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_previous__f9057960,\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_next__f9057960 {\n  display: flex;\n  align-items: center;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_previous__f9057960 button,\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_next__f9057960 button {\n  margin: 0.25rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_previous__f9057960 button span:before,\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_next__f9057960 button span:before {\n  font-size: 0.75rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_perPage__f9057960 {\n  display: none;\n  align-items: center;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_page__f9057960 {\n  display: flex;\n  align-items: center;\n  flex-basis: min-content;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pageSizeSelect__f9057960 {\n  border-color: #fff;\n  margin: 0 0.25rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pageSizeSelect__f9057960 button {\n  min-width: 3.4375rem;\n  padding: 0;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pageSizeSelect__f9057960 button div[data-display] {\n  left: 0.5rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pageSizeSelect__f9057960 button div:not([data-display]) {\n  right: 0.5rem;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_currentValueInput__f9057960 {\n  margin: 0 0.25rem 0 0;\n  padding: 0;\n}\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_currentValueInput__f9057960 input {\n  border-radius: var(--input-border-radius);\n  padding: 0 1rem;\n  width: auto;\n  text-align: center;\n}\n\n@media screen and (min-width: 30em) {\n  .Pagination_module_paginationWrapper__f9057960 {\n    flex-direction: row;\n  }\n  .Pagination_module_paginationWrapper__f9057960 .Pagination_module_total__f9057960 {\n    justify-content: flex-start;\n  }\n  .Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 {\n    margin-top: 0;\n    justify-content: flex-end;\n  }\n  .Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_previous__f9057960 button,\n.Pagination_module_paginationWrapper__f9057960 .Pagination_module_pagination__f9057960 .Pagination_module_next__f9057960 button {\n    margin: 0 0.5rem;\n  }\n}\n@media screen and (min-width: 48em) {\n  .Pagination_module_paginationWrapper__f9057960 .Pagination_module_perPage__f9057960 {\n    display: flex;\n  }\n}";
+var modules_e3c5bce1 = {"pagination-wrapper":"Pagination_module_paginationWrapper__f9057960","form-element":"Pagination_module_formElement__f9057960","total":"Pagination_module_total__f9057960","pagination":"Pagination_module_pagination__f9057960","previous":"Pagination_module_previous__f9057960","next":"Pagination_module_next__f9057960","per-page":"Pagination_module_perPage__f9057960","page":"Pagination_module_page__f9057960","page-size-select":"Pagination_module_pageSizeSelect__f9057960","current-value-input":"Pagination_module_currentValueInput__f9057960"};
 n(css$C,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var css$B = ".Input_module_inputWrapper__ca7df3b0 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 1.25rem;\n  background-color: var(--input-background-color);\n  border-color: var(--input-border-color);\n  border-style: var(--input-border-style);\n  border-width: var(--input-border-width);\n  border-radius: var(--input-border-radius);\n  transition: all 0.2s ease-in-out;\n}\n.Input_module_inputWrapper__ca7df3b0:hover:not(:disabled) {\n  border-color: var(--default);\n}\n.Input_module_inputWrapper__ca7df3b0.Input_module_disabled__ca7df3b0, .Input_module_inputWrapper__ca7df3b0.Input_module_disabled__ca7df3b0 input {\n  background-color: var(--disabled);\n  border-color: #fff;\n  cursor: not-allowed;\n}\n.Input_module_inputWrapper__ca7df3b0.Input_module_error__ca7df3b0 {\n  border-color: var(--error);\n}\n.Input_module_inputWrapper__ca7df3b0.Input_module_focus__ca7df3b0 {\n  border-color: var(--color-primary);\n}\n\n.Input_module_input__ca7df3b0 {\n  height: 4rem;\n  border: 0;\n  color: var(--greyed-out);\n  font-size: var(--font-size);\n  font-family: var(--font-family);\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0;\n}\n.Input_module_input__ca7df3b0:focus:not(:disabled) {\n  outline: none;\n  border-color: var(--color-primary);\n}\n\n.Input_module_error__ca7df3b0 input {\n  color: var(--error);\n  padding-right: 3.75rem;\n}\n.Input_module_error__ca7df3b0 input.Input_module_removeExtraIndent__ca7df3b0 {\n  padding-right: 1.25rem;\n}\n\n.Input_module_warning__ca7df3b0 {\n  color: var(--error);\n  position: absolute;\n  height: 100%;\n  width: 1.25rem;\n  right: 1.25rem;\n  top: 0px;\n  font-size: 1.125rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.Input_module_warning__ca7df3b0:before {\n  height: 1.3125rem;\n}\n.Input_module_warning__ca7df3b0.Input_module_extraIndent__ca7df3b0 {\n  right: 3.75rem;\n}\n\n.Input_module_inputWrapper__ca7df3b0 [data-prefix],\n.Input_module_inputWrapper__ca7df3b0 [data-suffix] {\n  transition: all 0.2s ease-in-out;\n  display: block;\n  z-index: 1;\n}";
@@ -2251,7 +2251,7 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function (_re
           }, React__default["default"].createElement(Label, {
             id: "current-value-input-label",
             htmlFor: "current-value-input",
-            className: modules_35a251a6['sr-only']
+            className: modules_35a251a6['sr-only'] + " " + modules_e3c5bce1['current-value-input-label']
           }, translate.currentPageLabel), React__default["default"].createElement(Input, {
             "aria-labelledby": "current-value-input-label",
             key: "input",
@@ -2563,8 +2563,8 @@ var BaseModalContent = /*#__PURE__*/React__default["default"].forwardRef(functio
   }), children);
 });
 
-var css$w = ".BaseModalActions_module_actions__382b7c32 {\n  margin: 1.875rem 1.25rem 1.875rem 1.25rem;\n  display: flex;\n  justify-content: flex-end;\n}\n.BaseModalActions_module_actions__382b7c32 * + * {\n  margin-left: 1.25rem;\n}";
-var modules_6b4a9db0 = {"actions":"BaseModalActions_module_actions__382b7c32"};
+var css$w = ".BaseModalActions_module_actions__430700e8 {\n  margin: 1.875rem 1.25rem 1.875rem 1.25rem;\n  display: flex;\n  justify-content: flex-end;\n}\n.BaseModalActions_module_actions__430700e8 * + * {\n  margin-left: 2rem;\n}";
+var modules_6b4a9db0 = {"actions":"BaseModalActions_module_actions__430700e8"};
 n(css$w,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var _excluded$y = ["children", "className"];