@canonical/react-components 0.37.1 → 0.37.4

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,29 @@
+import { HTMLProps } from "react";
+import type { ClassName, PropsWithSpread, ValueOf } from "../../types";
+export declare const BadgeType: {
+    readonly ROUNDED_LARGE_NUMBER: "ROUNDED_LARGE_NUMBER";
+    readonly UNDEFINED_LARGE_NUMBER: "UNDEFINED_LARGE_NUMBER";
+};
+/**
+ * The props for the Badge component.
+ */
+export declare type Props = PropsWithSpread<{
+    /**
+     * Numeric value to be displayed.
+     */
+    value: number;
+    /**
+     * The type of the badge component.
+     */
+    badgeType?: ValueOf<typeof BadgeType>;
+    /**
+     * The appearance of the badge.
+     */
+    isNegative?: boolean;
+    /**
+     * Optional class(es) to give to the badge.
+     */
+    className?: ClassName;
+}, HTMLProps<HTMLSpanElement>>;
+declare const Badge: ({ value, badgeType, className, isNegative, ...spanProps }: Props) => JSX.Element;
+export default Badge;

package/dist/components/Badge/Badge.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BadgeType = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _excluded = ["value", "badgeType", "className", "isNegative"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var BadgeType = {
+  ROUNDED_LARGE_NUMBER: "ROUNDED_LARGE_NUMBER",
+  UNDEFINED_LARGE_NUMBER: "UNDEFINED_LARGE_NUMBER"
+};
+/**
+ * The props for the Badge component.
+ */
+
+exports.BadgeType = BadgeType;
+var MAX_VAL = 999;
+var units = ["", "k", "M", "B", "T"];
+
+var round = function round(value) {
+  var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+  if (value < 1000) {
+    var truncatedValue = Number(value.toString().slice(0, 3));
+    return "".concat(truncatedValue).concat(units[unit]);
+  }
+
+  if (unit >= units.length - 1) {
+    return "999T";
+  }
+
+  var newValue = value / 1000;
+  return round(newValue, unit + 1);
+};
+
+var clamp = function clamp(value) {
+  if (value > MAX_VAL) {
+    return "".concat(MAX_VAL, "+");
+  }
+
+  return value;
+};
+
+var Badge = function Badge(_ref) {
+  var _classNames;
+
+  var value = _ref.value,
+      _ref$badgeType = _ref.badgeType,
+      badgeType = _ref$badgeType === void 0 ? BadgeType.UNDEFINED_LARGE_NUMBER : _ref$badgeType,
+      className = _ref.className,
+      isNegative = _ref.isNegative,
+      spanProps = _objectWithoutProperties(_ref, _excluded);
+
+  var badgeClassName = (0, _classnames.default)((_classNames = {}, _defineProperty(_classNames, "p-badge--negative", !!isNegative), _defineProperty(_classNames, "p-badge", !isNegative), _classNames), className);
+  var safeValue = Math.round(value);
+
+  if (value < 0) {
+    console.error("The value used in the badge should be positive");
+    safeValue = 0;
+  }
+
+  var formattedValue = badgeType === BadgeType.ROUNDED_LARGE_NUMBER ? round(safeValue) : clamp(safeValue);
+  return /*#__PURE__*/_react.default.createElement("span", _extends({}, spanProps, {
+    className: badgeClassName
+  }), formattedValue);
+};
+
+var _default = Badge;
+exports.default = _default;

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Badge";
+export type { Props as BadgeProps } from "./Badge";

package/dist/components/Badge/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Badge.default;
+  }
+});
+
+var _Badge = _interopRequireDefault(require("./Badge"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/Navigation/Navigation.js

@@ -231,13 +231,13 @@ var Navigation = function Navigation(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "p-navigation__search-label"
-  }, "Search"))) : null, /*#__PURE__*/_react.default.createElement("li", {
+  }, "Search"))) : null, (items === null || items === void 0 ? void 0 : items.length) > 0 || (itemsRight === null || itemsRight === void 0 ? void 0 : itemsRight.length) > 0 ? /*#__PURE__*/_react.default.createElement("li", {
     className: "p-navigation__item"
   }, /*#__PURE__*/_react.default.createElement("button", {
     "aria-pressed": mobileMenuOpen,
     className: "p-navigation__link",
     onClick: toggleMobileMenu
-  }, mobileMenuOpen ? "Close menu" : "Menu")))), /*#__PURE__*/_react.default.createElement("nav", _extends({
+  }, mobileMenuOpen ? "Close menu" : "Menu")) : null)), /*#__PURE__*/_react.default.createElement("nav", _extends({
     className: "p-navigation__nav"
   }, navProps), /*#__PURE__*/_react.default.createElement("ul", _extends({
     className: "p-navigation__items"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.37.1",
+  "version": "0.37.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -27,20 +27,20 @@
     "@babel/preset-typescript": "7.17.12",
     "@percy/cli": "1.2.1",
     "@percy/storybook": "4.2.1",
-    "@storybook/addon-a11y": "6.5.6",
-    "@storybook/addon-controls": "6.5.6",
-    "@storybook/addon-docs": "6.5.6",
-    "@storybook/addons": "6.5.6",
-    "@storybook/react": "6.5.6",
-    "@storybook/theming": "6.5.6",
+    "@storybook/addon-a11y": "6.4.22",
+    "@storybook/addon-controls": "6.4.22",
+    "@storybook/addon-docs": "6.4.22",
+    "@storybook/addons": "6.4.22",
+    "@storybook/react": "6.4.22",
+    "@storybook/theming": "6.4.22",
     "@testing-library/cypress": "8.0.2",
-    "@testing-library/dom": "8.13.0",
+    "@testing-library/dom": "8.14.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.5.0",
-    "@typescript-eslint/eslint-plugin": "5.27.0",
-    "@typescript-eslint/parser": "5.27.0",
+    "@typescript-eslint/eslint-plugin": "5.29.0",
+    "@typescript-eslint/parser": "5.29.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "babel-jest": "27.5.1",
     "babel-loader": "8.2.5",
@@ -81,7 +81,7 @@
     "ts-jest": "27.1.5",
     "tsc-alias": "1.6.8",
     "typescript": "4.7.2",
-    "vanilla-framework": "3.4.0",
+    "vanilla-framework": "3.6.1",
     "wait-on": "5.3.0"
   },
   "dependencies": {
@@ -102,9 +102,9 @@
     "postcss": "^8.3.11"
   },
   "peerDependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "vanilla-framework": "3.4.0"
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0",
+    "vanilla-framework": "3.6.1"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",