@bundle-stats/ui 4.1.1-alpha.1 → 4.1.1

package/lib-esm/ui/tabs/tabs.js

@@ -1,10 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './tabs.module.css';
-
 const Item = _ref => {
   let {
     isTabActive,
@@ -16,7 +14,6 @@ const Item = _ref => {
     className: cx(css.item, className, isTabActive && css.itemActive)
   }, restProps));
 };
-
 Item.defaultProps = {
   isTabActive: false,
   className: '',
@@ -42,7 +39,6 @@ Tabs.defaultProps = {
 Tabs.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
-
   /** Component children */
   children: PropTypes.node.isRequired
 };

package/lib-esm/ui/tabs/tabs.module.css

@@ -23,12 +23,16 @@
   background: transparent;
 }
 
-.item:hover {
+.item:hover,
+.item:active,
+.item:focus {
   color: var(--color-primary-dark);
   outline: none;
 }
 
-.item:hover::after {
+.item:hover::after,
+.item:active::after,
+.item:focus::after {
   background: currentColor;
 }
 

package/lib-esm/ui/tag/tag.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';

package/lib-esm/ui/tooltip/tooltip.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -50,7 +49,7 @@ Tooltip.propTypes = {
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
   containerRef: PropTypes.shape({
     current: PropTypes.object // eslint-disable-line react/forbid-prop-types
-
   }),
+
   darkMode: PropTypes.bool
 };

package/lib-esm/ui/tooltip/tooltip.stories.js

@@ -12,9 +12,7 @@ export default {
     title: 'View job #123'
   }
 };
-
 const Template = props => /*#__PURE__*/React.createElement(Tooltip, props, "Job #123");
-
 export const Default = Template.bind();
 export const LongTooltip = Template.bind();
 LongTooltip.args = {

package/lib-esm/utils.js

@@ -6,18 +6,14 @@ export const getColors = function (count) {
   if (count === void 0) {
     count = 2;
   }
-
   const chunks = _chunk(COLORS, Math.round(COLORS.length / count));
-
   return chunks.map((chunkColors, index) => {
     if (index === 0) {
       return chunkColors[0];
     }
-
     if (index === chunks.length - 1) {
       return chunkColors[chunkColors.length - 1];
     }
-
     return chunkColors[Math.floor(chunkColors.length / 2)];
   });
 };
@@ -25,19 +21,16 @@ export const getRenderChildWithClassName = className => child => {
   if (child === null || child === '') {
     return null;
   }
-
   const {
     props
   } = child;
-
   if (!props) {
     return /*#__PURE__*/React.createElement("div", {
       className: className
     }, child);
   }
-
-  return /*#__PURE__*/React.cloneElement(child, { ...props,
+  return /*#__PURE__*/React.cloneElement(child, {
+    ...props,
     className: cx(className, props.className) // eslint-disable-line react/prop-types
-
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.1.1-alpha.1",
+  "version": "4.1.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -37,27 +37,27 @@
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
     "@babel/cli": "7.19.3",
-    "@babel/core": "7.19.3",
+    "@babel/core": "7.19.6",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.19.3",
+    "@babel/preset-env": "7.19.4",
     "@babel/preset-react": "7.18.6",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
-    "@storybook/addon-essentials": "6.5.12",
+    "@storybook/addon-essentials": "6.5.13",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.5.12",
-    "@storybook/addons": "6.5.12",
-    "@storybook/builder-webpack5": "6.5.12",
-    "@storybook/manager-webpack5": "6.5.12",
-    "@storybook/react": "6.5.12",
+    "@storybook/addon-storyshots": "6.5.13",
+    "@storybook/addons": "6.5.13",
+    "@storybook/builder-webpack5": "6.5.13",
+    "@storybook/manager-webpack5": "6.5.13",
+    "@storybook/react": "6.5.13",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "29.1.2",
+    "babel-jest": "29.2.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.10.1",
+    "chromatic": "6.11.0",
     "classnames": "2.3.2",
     "colormap": "2.3.2",
-    "core-js": "3.25.5",
+    "core-js": "3.26.0",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -67,7 +67,7 @@
     "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.17",
+    "postcss": "8.4.18",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.1.1-alpha.1",
+    "@bundle-stats/utils": "^4.1.1",
     "ariakit": "^2.0.0-next.41",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^2.0.0"
   },
-  "gitHead": "2f7d0a6c40dbf5bcf4ec161aa7aeae3c3e26fff4"
+  "gitHead": "ec3bcf5dcb6e9cf793bcfcf6e2f8f644f168af50"
 }

package/src/components/duplicate-packages-warning/duplicate-packages-warning.module.css

@@ -18,4 +18,5 @@
   padding: 1px 2px;
   vertical-align: super;
   font-size: 9px;
+  line-height: 1;
 }

package/src/components/summary/summary.module.css

@@ -9,6 +9,9 @@
   text-decoration: none;
 }
 
-.item:hover {
+.item:hover,
+.item:active,
+.item:focus {
   border-color: var(--color-outline-dark);
+  outline: none;
 }

package/src/css/default.css

@@ -63,8 +63,10 @@ a {
 }
 
 a:hover,
-a:active {
+a:active,
+a:focus {
   color: var(--color-primary-dark);
+  outline: none;
 }
 
 .ui-button--primary {

package/src/css/variables.css

@@ -23,42 +23,42 @@
   --size-xxlarge: 1.424rem;
   --size-xxxlarge: 1.602rem;
 
-  --line-height: 1.6em;
+  --line-height: 1.66em;
 
   /*
    * Color scheme:
-   * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23585d63&mcgpalette4=%233385d6&themename=mcgtheme
+   * https://coolors.co/287acc-da444e-55b950-f6e179-192339
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
    */
-  --color-gray-25: #fafbfb;
-  --color-gray-50: #ebeced;
-  --color-gray-100: #cdced0;
-  --color-gray-200: #acaeb1;
-  --color-gray-300: #8a8e92;
-  --color-gray-400: #71757a;
-  --color-gray-500: #585d63;
-  --color-gray-600: #50555b;
-  --color-gray-700: #474b51;
-  --color-gray-800: #3d4147;
-  --color-gray-900: #2d3035;
+  --color-gray-25: #F7F7F7;
+  --color-gray-50 : #eaebec;
+  --color-gray-100: #cbcdd0;
+  --color-gray-200: #a8acb0;
+  --color-gray-300: #858a90;
+  --color-gray-400: #6a7179;
+  --color-gray-500: #505861;
+  --color-gray-600: #495059;
+  --color-gray-700: #40474f;
+  --color-gray-800: #373d45;
+  --color-gray-900: #272d33;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
   --color-gray: var(--color-gray-500);
-  --color-gray-dark: var(--color-gray-600);
-  --color-gray-ultra-dark: var(--color-gray-700);
+  --color-gray-dark: var(--color-gray-700);
+  --color-gray-ultra-dark: var(--color-gray-900);
 
   --color-red-25: #fdf5f6;
-  --color-red-50: #fbebec;
-  --color-red-100: #f5cccf;
-  --color-red-200: #eeaaaf;
-  --color-red-300: #e7888e;
-  --color-red-400: #e26f76;
-  --color-red-500: #dd555e;
-  --color-red-600: #d94e56;
-  --color-red-700: #d4444c;
-  --color-red-800: #cf3b42;
-  --color-red-900: #c72a31;
+  --color-red-50: #fbe9ea;
+  --color-red-100: #f4c7ca;
+  --color-red-200: #eda2a7;
+  --color-red-300: #e57c83;
+  --color-red-400: #e06069;
+  --color-red-500: #da444e;
+  --color-red-600: #d63e47;
+  --color-red-700: #d0353d;
+  --color-red-800: #cb2d35;
+  --color-red-900: #c21f25;
   --color-red-ultra-light: var(--color-red-100);
   --color-red-light: var(--color-red-300);
   --color-red: var(--color-red-500);
@@ -66,16 +66,16 @@
   --color-red-ultra-dark: var(--color-red-900);
 
   --color-blue-25: #f3f8fd;
-  --color-blue-50: #e7f0fa;
-  --color-blue-100: #c2daf3;
-  --color-blue-200: #99c2eb;
-  --color-blue-300: #70aae2;
-  --color-blue-400: #5297dc;
-  --color-blue-500: #3385d6;
-  --color-blue-600: #2e7dd1;
-  --color-blue-700: #2772cc;
-  --color-blue-800: #2068c6;
-  --color-blue-900: #1455bc;
+  --color-blue-50: #e5eff9;
+  --color-blue-100: #bfd7f0;
+  --color-blue-200: #94bde6;
+  --color-blue-300: #69a2db;
+  --color-blue-400: #488ed4;
+  --color-blue-500: #287acc;
+  --color-blue-600: #2472c7;
+  --color-blue-700: #1e67c0;
+  --color-blue-800: #185db9;
+  --color-blue-900: #0f4aad;
 
   --color-blue-ultra-light: var(--color-blue-100);
   --color-blue-light: var(--color-blue-300);
@@ -84,16 +84,16 @@
   --color-blue-ultra-dark: var(--color-blue-900);
 
   --color-green-25: #f6fbf6;
-  --color-green-50: #ecf7ec;
-  --color-green-100: #d0eccf;
-  --color-green-200: #b1dfaf;
-  --color-green-300: #92d28e;
-  --color-green-400: #7ac976;
-  --color-green-500: #63bf5e;
-  --color-green-600: #5bb956;
-  --color-green-700: #51b14c;
-  --color-green-800: #47a942;
-  --color-green-900: #359b31;
+  --color-green-50: #ebf7ea;
+  --color-green-100: #cceacb;
+  --color-green-200: #aadca8;
+  --color-green-300: #88ce85;
+  --color-green-400: #6fc46a;
+  --color-green-500: #55b950;
+  --color-green-600: #4eb249;
+  --color-green-700: #44aa40;
+  --color-green-800: #3ba237;
+  --color-green-900: #2a9327;
 
   --color-green-ultra-light: var(--color-green-100);
   --color-green-light: var(--color-green-300);
@@ -102,16 +102,16 @@
   --color-green-ultra-dark: var(--color-green-900);
 
   --color-yellow-25: #FFFDF2;
-  --color-yellow-50: #fefcef;
-  --color-yellow-100: #fdf7d8;
-  --color-yellow-200: #fbf1be;
-  --color-yellow-300: #f9eba4;
-  --color-yellow-400: #f8e791;
-  --color-yellow-500: #f7e37d;
-  --color-yellow-600: #f6e075;
-  --color-yellow-700: #f5dc6a;
-  --color-yellow-800: #f3d860;
-  --color-yellow-900: #f1d04d;
+  --color-yellow-50: #fefbef;
+  --color-yellow-100: #fcf6d7;
+  --color-yellow-200: #fbf0bc;
+  --color-yellow-300: #f9eaa1;
+  --color-yellow-400: #f7e68d;
+  --color-yellow-500: #f6e179;
+  --color-yellow-600: #f5dd71;
+  --color-yellow-700: #f3d966;
+  --color-yellow-800: #f2d55c;
+  --color-yellow-900: #efcd49;
 
   --color-yellow-light-background: var(--color-yellow-25);
   --color-yellow-ultra-light: var(--color-yellow-100);

package/src/ui/tabs/tabs.module.css

@@ -23,12 +23,16 @@
   background: transparent;
 }
 
-.item:hover {
+.item:hover,
+.item:active,
+.item:focus {
   color: var(--color-primary-dark);
   outline: none;
 }
 
-.item:hover::after {
+.item:hover::after,
+.item:active::after,
+.item:focus::after {
   background: currentColor;
 }