scorer-ui-kit 1.9.0-beta.2 → 2.0.0

package/README.md

@@ -0,0 +1,101 @@
+# SCORER UI KIT LIBRARY
+
+  SCORER UI KIT is a UI components library created in react for faster web applications development.
+
+## Version 2
+
+  Our default branch is Version 2 release but we keep a legacy branch available.
+  This version provides dark mode, the newest components and tools as well as been up to date with npm dependencies.
+
+  You can review online a React project example and test some of the components on storybook in the live page
+
+  https://future-standard.github.io/scorer-ui-kit
+
+## Enabling Dark and Light theme in your project
+  You can read an example about how to configure dark and light theme in the [Dark Light Mode Usage document](../../dark_light_mode_usage.md)
+
+## Development
+
+If you want to run the project follow the next steps
+
+- Clone repository
+```
+  git clone git@github.com:future-standard/scorer-ui-kit.git
+```
+
+- Install with npm version 8 node 16 or above from the root folder
+```
+  npm install
+```
+
+- Use npm dedupe to fix react-refresh difference between Storybook and Example project
+```
+  npm dedupe
+```
+
+- If you want to run the example project, run library workspace first and then the example workspace in a different terminal
+
+```
+  // Terminal 1
+
+  npm start --workspace=packages/ui-lib
+```
+
+```
+  // Terminal 2
+
+  npm start --workspace=packages/example
+```
+
+- If you want to run the storybook
+
+```
+  // Terminal 3
+
+  npm start --workspace=packages/storybook
+```
+
+## Contributing
+
+This is an open source project, if you are interested in participating please contact [@atomworks](https://github.com/atomworks) or [@JoshLipps](https://github.com/JoshLipps).
+
+Theres a list of issues and we recommend to pick one of the tagged Quick Wins as starter.
+
+You can make a branch out the main, we don't have a strong preference in the naming of the branch but when submitting these changes please review the PR template.
+
+
+## Icons
+
+The icons used in this UI Kit are licensed from [Streamline Icons](https://streamlineicons.com/). We are able to provide a limited set in this kit with as per our license agreement. If you wish to extend the icons included in this kit yourself, we highly recommend checking those out if you want to keep a consistent style.
+
+We tend to use the regular weighted icons and process them first to ungroup them. Then we use the above command to process them for inclusion in the UI Kit.
+
+
+## Image Credits
+
+Some stock photos were used as placeholders in this UI Kit. These were sourced through Unsplash.com and we give credit for the following photographs and their photographers.
+
+Photo by [Van Thanh](https://unsplash.com/@vanthanh2608?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/cafe?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
+
+
+## License
+
+The Scorer UI Kit is released under the [MIT license](../../LICENSE.md).
+
+Please note however that the icon set included in this software is included under license and remains property of Webalys LLC. These icons can be used only in the context of this open source project. For more information regarding this license, see [Streamline Icons Premium License](https://help.streamlineicons.com/license-premium).
+
+## Release
+1. Update the version in package.json in this ui-lib folder and commit it. (this can done on a branch and then merged)
+2. Add a release tag with the following format: vXX.XX.XX or vXX.XX.XX-beta.x(for beta) - this should match the package.json version
+3. Push the tag to Github (this should cause the release)
+
+```
+// Updating to v1.5.2
+
+  git commit -m "Bump 1.5.2"
+  grep version package.json
+  ~  "version": "1.5.2",
+  git tag v1.5.2
+  git push origin v1.5.2
+```
+

package/dist/index.js

@@ -3183,55 +3183,58 @@ var FeedbackMessage = styled__default.div(_templateObject5$5 || (_templateObject
   var theme = _ref2.theme;
   return theme.typography.form.feedback.message;
 });
-var FeedbackIcon = styled__default.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 40px;\n  width: 40px;\n  display: flex;\n  justify-content:center;\n  align-items:center;\n"])));
-var StyledInput = styled__default.input(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n\n  height: 100%;\n  width: 100%;\n  border-radius: 3px;\n\n  padding: 0 15px 0 15px;\n  box-sizing: border-box;\n  outline: none;\n\n  ", ";\n"])), removeAutoFillStyle, function (_ref3) {
-  var theme = _ref3.theme,
-      fieldState = _ref3.fieldState;
+var FeedbackIcon = styled__default.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 40px;\n  width: 40px;\n  display: flex;\n  justify-content:center;\n  align-items:center;\n\n  ", " {\n    [stroke]{\n      stroke: ", ";\n    }\n  }\n"])), IconWrapper, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.pureBase;
+});
+var StyledInput = styled__default.input(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n\n  height: 100%;\n  width: 100%;\n  border-radius: 3px;\n\n  padding: 0 15px 0 15px;\n  box-sizing: border-box;\n  outline: none;\n\n  ", ";\n"])), removeAutoFillStyle, function (_ref4) {
+  var theme = _ref4.theme,
+      fieldState = _ref4.fieldState;
   return styled.css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n    min-height: ", ";\n    font-family: ", ";\n    border: 1px solid ", ";\n  "])), theme.dimensions.form.input.height, theme.fontFamily.data, theme.styles.form.input[fieldState].normal.borderColor);
-}, function (_ref4) {
-  var typography = _ref4.theme.typography;
+}, function (_ref5) {
+  var typography = _ref5.theme.typography;
   return styled.css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n    ", ";\n    &::placeholder {\n      ", ";\n    }\n  "])), typography.form.input.value.normal, typography.form.input.placeholder.normal);
 });
-var InputContainer = styled__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n\n  flex: 1;\n  position: relative;\n\n  ", "\n\n"])), function (_ref5) {
-  var hasAction = _ref5.hasAction;
+var InputContainer = styled__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n\n  flex: 1;\n  position: relative;\n\n  ", "\n\n"])), function (_ref6) {
+  var hasAction = _ref6.hasAction;
   return hasAction && styled.css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n    ", "{\n      padding-right: 60px;\n\n      // Used to control password manager injection.\n      background-position: calc(100% - 50px) 50% !important;\n    }\n  "])), StyledInput);
 });
-var Container$2 = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n\n  ", "{\n    ", ";\n\n    &:focus {}\n\n    ", "\n  }\n\n  ", " {\n    background: ", ";\n    border-color: ", ";\n\n    ", "\n  }\n\n  &:focus-within ", " {\n    ", ";\n  }\n\n"])), StyledInput, function (_ref6) {
-  var theme = _ref6.theme,
-      fieldState = _ref6.fieldState;
+var Container$2 = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n\n  ", "{\n    ", ";\n\n    &:focus {}\n\n    ", "\n  }\n\n  ", " {\n    background: ", ";\n    border-color: ", ";\n\n    ", "\n  }\n\n  &:focus-within ", " {\n    ", ";\n  }\n\n"])), StyledInput, function (_ref7) {
+  var theme = _ref7.theme,
+      fieldState = _ref7.fieldState;
   return theme.styles.form.input[fieldState].normal;
-}, function (_ref7) {
-  var fieldState = _ref7.fieldState;
+}, function (_ref8) {
+  var fieldState = _ref8.fieldState;
   return ['default', 'disabled'].indexOf(fieldState) === -1 && styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      border-top-right-radius: 0px;\n      border-bottom-right-radius: 0px;\n    "])));
-}, FeedbackContainer, function (_ref8) {
-  var theme = _ref8.theme,
-      fieldState = _ref8.fieldState;
-  return theme.styles.form.input[fieldState].normal.borderColor;
-}, function (_ref9) {
+}, FeedbackContainer, function (_ref9) {
   var theme = _ref9.theme,
       fieldState = _ref9.fieldState;
   return theme.styles.form.input[fieldState].normal.borderColor;
 }, function (_ref10) {
-  var fieldState = _ref10.fieldState;
+  var theme = _ref10.theme,
+      fieldState = _ref10.fieldState;
+  return theme.styles.form.input[fieldState].normal.borderColor;
+}, function (_ref11) {
+  var fieldState = _ref11.fieldState;
   return ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      display:none;\n    "])));
-}, StyledInput, function (_ref11) {
-  var theme = _ref11.theme,
-      fieldState = _ref11.fieldState;
+}, StyledInput, function (_ref12) {
+  var theme = _ref12.theme,
+      fieldState = _ref12.fieldState;
   return theme.styles.form.input[fieldState].focused;
 });
 
-var Input = function Input(_ref12) {
-  var _ref12$type = _ref12.type,
-      type = _ref12$type === void 0 ? 'text' : _ref12$type,
-      _ref12$placeholder = _ref12.placeholder,
-      placeholder = _ref12$placeholder === void 0 ? '' : _ref12$placeholder,
-      defaultValue = _ref12.defaultValue,
-      _ref12$fieldState = _ref12.fieldState,
-      fieldState = _ref12$fieldState === void 0 ? 'default' : _ref12$fieldState,
-      feedbackMessage = _ref12.feedbackMessage,
-      actionCallback = _ref12.actionCallback,
-      actionIcon = _ref12.actionIcon,
-      props = _objectWithoutPropertiesLoose(_ref12, _excluded$4);
+var Input = function Input(_ref13) {
+  var _ref13$type = _ref13.type,
+      type = _ref13$type === void 0 ? 'text' : _ref13$type,
+      _ref13$placeholder = _ref13.placeholder,
+      placeholder = _ref13$placeholder === void 0 ? '' : _ref13$placeholder,
+      defaultValue = _ref13.defaultValue,
+      _ref13$fieldState = _ref13.fieldState,
+      fieldState = _ref13$fieldState === void 0 ? 'default' : _ref13$fieldState,
+      feedbackMessage = _ref13.feedbackMessage,
+      actionCallback = _ref13.actionCallback,
+      actionIcon = _ref13.actionIcon,
+      props = _objectWithoutPropertiesLoose(_ref13, _excluded$4);
 
   var isActionButton = actionCallback !== undefined;
 
@@ -3246,22 +3249,19 @@ var Input = function Input(_ref12) {
       case 'required':
         return React__default.createElement(Icon, {
           icon: 'Required',
-          size: 20,
-          color: 'inverse'
+          size: 20
         });
 
       case 'valid':
         return React__default.createElement(Icon, {
           icon: 'Success',
-          size: 20,
-          color: 'inverse'
+          size: 20
         });
 
       case 'invalid':
         return React__default.createElement(Icon, {
           icon: 'Invalid',
-          size: 20,
-          color: 'inverse'
+          size: 20
         });
 
       case 'processing':