carbon-react 99.0.1 → 99.1.0

package/lib/components/progress-tracker/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./progress-tracker";

package/lib/components/progress-tracker/index.js

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

package/lib/components/progress-tracker/progress-tracker-test.stories.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _progressTracker = require("./progress-tracker.config");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  component: _.default,
+  title: "Progress Tracker/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  },
+  argTypes: {
+    size: {
+      options: _progressTracker.PROGRESS_TRACKER_SIZES,
+      control: {
+        type: "select"
+      }
+    },
+    progress: {
+      control: {
+        type: "number"
+      }
+    },
+    currentProgressLabel: {
+      options: ["", "$100", "100ml"],
+      control: {
+        type: "select"
+      }
+    },
+    maxProgressLabel: {
+      options: ["", "$200", "200ml"],
+      control: {
+        type: "select"
+      }
+    },
+    variant: {
+      options: _progressTracker.PROGRESS_TRACKER_VARIANTS,
+      control: {
+        type: "select"
+      }
+    },
+    orientation: {
+      options: ["horizontal", "vertical"],
+      control: {
+        type: "select"
+      }
+    },
+    direction: {
+      options: ["up", "down"],
+      control: {
+        type: "select"
+      }
+    },
+    labelsPosition: {
+      options: ["top", "bottom", "left", "right"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+const Default = ({ ...args
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_.default, args);
+};
+
+exports.Default = Default;
+Default.storyName = "default";

package/lib/components/progress-tracker/progress-tracker.component.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
+
+var _utils = require("../../style/utils");
+
+var _progressTracker = require("./progress-tracker.style");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
+
+const ProgressTracker = ({
+  size = "medium",
+  progress = 0,
+  showDefaultLabels = false,
+  currentProgressLabel,
+  maxProgressLabel,
+  variant = "default",
+  orientation = "horizontal",
+  direction = "up",
+  labelsPosition,
+  ...rest
+}) => {
+  const isVertical = orientation === "vertical";
+  const prefixLabels = !isVertical && labelsPosition !== "bottom" || isVertical && labelsPosition === "left";
+
+  const renderValueLabels = () => {
+    if (!showDefaultLabels && !currentProgressLabel && !maxProgressLabel) {
+      return null;
+    }
+
+    const label = (value, defaultValue) => {
+      if (value) {
+        return value;
+      }
+
+      return showDefaultLabels ? defaultValue : undefined;
+    };
+
+    return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValuesLabel, {
+      position: labelsPosition,
+      isVertical: isVertical
+    }, isVertical && direction === "up" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, {
+      isMaxValue: true
+    }, label(maxProgressLabel, "100%")), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, null, label(currentProgressLabel, `${progress}%`))), (direction === "down" || !isVertical) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, null, label(currentProgressLabel, `${progress}%`)), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, {
+      isMaxValue: true
+    }, label(maxProgressLabel, "100%"))));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressTracker, _extends({
+    size: size,
+    isVertical: isVertical
+  }, rest, (0, _tags.default)("progress-bar", rest)), prefixLabels && renderValueLabels(), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
+    direction: isVertical ? direction : undefined,
+    isVertical: isVertical,
+    size: size
+  }, /*#__PURE__*/_react.default.createElement(_progressTracker.InnerBar, {
+    isVertical: isVertical,
+    size: size,
+    progress: progress,
+    variant: variant
+  })), !prefixLabels && renderValueLabels());
+};
+
+ProgressTracker.propTypes = { ...marginPropTypes,
+
+  /** Size of the progress bar. */
+  size: _propTypes.default.oneOf(["small", "medium", "large"]),
+
+  /** Current progress (percentage). */
+  progress: _propTypes.default.number,
+
+  /** Flag to control whether the default value labels (as percentages) should be rendered. */
+  showDefaultLabels: _propTypes.default.bool,
+
+  /** Value to display as current progress. */
+  currentProgressLabel: _propTypes.default.string,
+
+  /** Value to display as the maximum progress limit. */
+  maxProgressLabel: _propTypes.default.string,
+
+  /**
+   * Sets the colour of the bar that shows the current progress.
+   * The "traffic" variant changes the colour of status bar depending on current progress.
+   */
+  variant: _propTypes.default.oneOf(["default", "traffic"]),
+
+  /** The orientation of the component. */
+  orientation: _propTypes.default.oneOf(["horizontal", "vertical"]),
+
+  /** The direction the bar should move as progress increases, only applies in vertical orientation. */
+  direction: _propTypes.default.oneOf(["up", "down"]),
+
+  /**
+   * The position the value label are rendered in.
+   * Top/bottom apply to horizontal and left/right to vertical orientation.
+   */
+  labelsPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
+};
+var _default = ProgressTracker;
+exports.default = _default;

package/lib/components/progress-tracker/progress-tracker.config.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PROGRESS_TRACKER_VARIANTS = exports.PROGRESS_TRACKER_SIZES = exports.OUTER_TRACKER_LENGTH = void 0;
+const OUTER_TRACKER_LENGTH = "256px";
+exports.OUTER_TRACKER_LENGTH = OUTER_TRACKER_LENGTH;
+const PROGRESS_TRACKER_SIZES = ["small", "medium", "large"];
+exports.PROGRESS_TRACKER_SIZES = PROGRESS_TRACKER_SIZES;
+const PROGRESS_TRACKER_VARIANTS = ["default", "traffic"];
+exports.PROGRESS_TRACKER_VARIANTS = PROGRESS_TRACKER_VARIANTS;

package/lib/components/progress-tracker/progress-tracker.d.ts

@@ -0,0 +1,32 @@
+import { MarginProps } from "styled-system";
+
+export interface ProgressBarProps extends MarginProps {
+  /** Size of the progressBar. */
+  size?: "small" | "medium" | "large";
+  /** Current progress (percentage). */
+  progress?: number;
+  /** Flag to control whether the default value labels (as percentages) should be rendered. */
+  showDefaultLabels?: boolean;
+  /** Value to display as current progress. */
+  currentProgressLabel?: string;
+  /** Value to display as the maximum progress limit. */
+  maxProgressLabel?: string;
+  /**
+   * Sets the colour of the bar that shows the current progress.
+   * The "traffic" variant changes the colour of status bar depending on current progress.
+   * */
+  variant?: "default" | "traffic";
+  /** The orientation of the component. */
+  orientation?: "horizontal" | "vertical";
+  /** The direction the bar should move as progress increases, only applies in vertical orientation. */
+  direction?: "up" | "down";
+  /**
+   * The position the value label are rendered in.
+   * Top/bottom apply to horizontal and left/right to vertical orientation.
+   */
+  labelsPosition?: "top" | "bottom" | "left" | "right";
+}
+
+declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+
+export default ProgressBar;

package/lib/components/progress-tracker/progress-tracker.style.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledValue = exports.StyledValuesLabel = exports.StyledProgressTracker = exports.InnerBar = exports.StyledProgressBar = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledSystem = require("styled-system");
+
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
+var _progressTracker = require("./progress-tracker.config");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const StyledProgressTracker = _styledComponents.default.div`
+  ${_styledSystem.margin}
+  text-align: center;
+  white-space: nowrap;
+
+  ${({
+  isVertical
+}) => (0, _styledComponents.css)`
+    ${!isVertical && `
+      width: ${_progressTracker.OUTER_TRACKER_LENGTH};
+    `}
+    ${isVertical && `
+      height: ${_progressTracker.OUTER_TRACKER_LENGTH};
+      display: flex;
+    `}
+  `}
+`;
+exports.StyledProgressTracker = StyledProgressTracker;
+const StyledProgressBar = _styledComponents.default.span`
+  ${({
+  direction,
+  isVertical,
+  size,
+  theme
+}) => (0, _styledComponents.css)`
+    display: flex;
+    position: relative;
+    background-color: ${theme.progressTracker.background};
+
+    ${!isVertical && (0, _styledComponents.css)`
+      overflow-x: hidden;
+      height: ${getHeight(size)};
+      width: 100%;
+    `}
+    ${isVertical && (0, _styledComponents.css)`
+      overflow-y: hidden;
+      width: ${getHeight(size)};
+      height: 100%;
+
+      ${direction === "up" && `
+        align-items: flex-end;
+      `}
+    `}
+  `}
+`;
+exports.StyledProgressBar = StyledProgressBar;
+const StyledValue = _styledComponents.default.span`
+  ${({
+  isMaxValue,
+  theme
+}) => (0, _styledComponents.css)`
+    ${isMaxValue && `
+      color: ${theme.text.placeholder};
+    `}
+    ${!isMaxValue && `
+      font-weight: bold;
+    `}
+  `}
+`;
+exports.StyledValue = StyledValue;
+const StyledValuesLabel = _styledComponents.default.span`
+  text-align: start;
+  display: flex;
+  justify-content: space-between;
+  ${({
+  isVertical,
+  position
+}) => (0, _styledComponents.css)`
+    ${isVertical && (0, _styledComponents.css)`
+      flex-direction: column;
+
+      ${position !== "left" && (0, _styledComponents.css)`
+        padding-left: 4px;
+      `}
+
+      ${position === "left" && (0, _styledComponents.css)`
+        padding-right: 4px;
+
+        ${StyledValue} {
+          text-align: right;
+        }
+      `}
+    `}
+
+    ${!isVertical && (0, _styledComponents.css)`
+      ${position !== "bottom" && (0, _styledComponents.css)`
+        padding-bottom: 4px;
+      `}
+
+      ${position === "bottom" && (0, _styledComponents.css)`
+        padding-top: 4px;
+      `}
+    `}
+  `}
+`;
+exports.StyledValuesLabel = StyledValuesLabel;
+const InnerBar = _styledComponents.default.span`
+  ${({
+  isVertical,
+  progress,
+  size,
+  theme,
+  variant
+}) => (0, _styledComponents.css)`
+    position: absolute;
+    left: 0;
+    background-color: ${getInnerBarColour(variant, progress, theme)};
+
+    ${!isVertical && (0, _styledComponents.css)`
+      width: calc(${_progressTracker.OUTER_TRACKER_LENGTH} * ${progress / 100});
+      min-width: 2px;
+      height: ${getHeight(size)};
+    `}
+    ${isVertical && (0, _styledComponents.css)`
+      height: calc(${_progressTracker.OUTER_TRACKER_LENGTH} * ${progress / 100});
+      min-height: 2px;
+      width: ${getHeight(size)};
+    `}
+  `}
+`;
+exports.InnerBar = InnerBar;
+
+function getHeight(size) {
+  switch (size) {
+    case "small":
+      return "4px";
+
+    case "large":
+      return "16px";
+
+    default:
+      return "8px";
+  }
+}
+
+function getInnerBarColour(variant, progress, theme) {
+  if (progress >= 100) return theme.colors.success;
+  if (variant === "default") return theme.progressTracker.innerBackground;
+  if (progress < 20) return theme.colors.error;
+  return theme.progressTracker.trafficNeutral;
+}
+
+StyledProgressTracker.defaultProps = {
+  theme: _base.default
+};
+StyledProgressBar.defaultProps = {
+  theme: _base.default,
+  size: "medium"
+};
+InnerBar.propTypes = {
+  size: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_SIZES),
+  progress: _propTypes.default.number,
+  variant: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_VARIANTS)
+};
+InnerBar.defaultProps = {
+  progress: 0,
+  theme: _base.default,
+  size: "medium",
+  variant: "default"
+};
+StyledValue.defaultProps = {
+  theme: _base.default
+};
+StyledProgressBar.propTypes = {
+  size: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_SIZES)
+};

package/lib/style/themes/base/base-theme.config.js

@@ -51,6 +51,11 @@ var _default = palette => {
       },
       asterisk: palette.errorRed
     },
+    progressTracker: {
+      background: palette.slateTint(90),
+      innerBackground: palette.slateTint(40),
+      trafficNeutral: palette.productBlueShade(3)
+    },
     anchorNavigation: {
       divider: palette.slateTint(80),
       navItemHoverBackground: palette.slateTint(90)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "99.0.1",
+  "version": "99.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -18,7 +18,6 @@
     "test": "jest --config=./jest.conf.json",
     "test-update": "jest --config=./jest.conf.json --updateSnapshot",
     "test-cypress": "cypress open",
-    "cypress:ci": "cypress run --record --parallel",
     "debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
     "format": "prettier --write './src'",
     "lint": "eslint ./src",
@@ -94,9 +93,9 @@
     "core-js": "^3.1.4",
     "cpy-cli": "^3.1.1",
     "cross-env": "^5.2.0",
-    "cypress": "^8.3.1",
+    "cypress": "^9.0.0",
     "cypress-axe": "^0.13.0",
-    "cypress-cucumber-preprocessor": "^4.2.0",
+    "cypress-cucumber-preprocessor": "^4.3.0",
     "cypress-each": "^1.5.0",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.5.1",