carbon-react 113.0.2 → 114.0.0

package/esm/components/i18n-provider/i18n-provider.component.js

@@ -73,6 +73,9 @@ I18nProvider.propTypes = {
       "records": PropTypes.func.isRequired,
       "show": PropTypes.func.isRequired
     }),
+    "progressTracker": PropTypes.shape({
+      "of": PropTypes.func.isRequired
+    }),
     "select": PropTypes.shape({
       "actionButtonText": PropTypes.func.isRequired,
       "noResultsForTerm": PropTypes.func.isRequired,

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

@@ -3,12 +3,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
+import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue } from "./progress-tracker.style";
+import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue, StyledDescription } from "./progress-tracker.style";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
-import Logger from "../../__internal__/utils/logger";
-let deprecatedWarningTriggered = false;
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const ProgressTracker = ({
@@ -20,42 +19,32 @@ const ProgressTracker = ({
   "aria-valuetext": ariaValueText,
   size = "medium",
   length = "256px",
+  error = false,
   progress = 0,
+  description,
   showDefaultLabels = false,
   currentProgressLabel,
+  customValuePreposition,
   maxProgressLabel,
-  orientation,
-  direction,
   labelsPosition,
   ...rest
 }) => {
-  if (!deprecatedWarningTriggered && (orientation || direction)) {
-    deprecatedWarningTriggered = true;
-    Logger.deprecate("The `orientation` and `direction` props in `ProgressTracker` component are deprecated and will soon be removed.");
-  }
-
-  const internalOrientation = orientation || "horizontal";
-  const internalDirection = direction || "up";
+  const l = useLocale();
   const barRef = useRef();
   const [barLength, setBarLength] = useState(0);
-  const isVertical = internalOrientation === "vertical";
-  const prefixLabels = !isVertical && labelsPosition !== "bottom" || isVertical && labelsPosition === "left";
+  const prefixLabels = labelsPosition !== "bottom";
   const updateBarLength = useCallback(() => {
-    if (internalOrientation === "horizontal") {
-      setBarLength(`${barRef.current.offsetWidth}px`);
-    } else {
-      setBarLength(`${barRef.current.offsetHeight}px`);
-    }
-  }, [barRef, internalOrientation]);
+    setBarLength(`${barRef.current.offsetWidth}px`);
+  }, []);
   useLayoutEffect(() => {
     updateBarLength();
-  }, [barRef, internalOrientation, updateBarLength]);
+  }, [updateBarLength]);
   useResizeObserver(barRef, () => {
     updateBarLength();
   });
 
   const renderValueLabels = () => {
-    if (!showDefaultLabels && !currentProgressLabel && !maxProgressLabel) {
+    if (!showDefaultLabels && !currentProgressLabel) {
       return null;
     }
 
@@ -67,21 +56,18 @@ const ProgressTracker = ({
       return showDefaultLabels ? defaultValue : undefined;
     };
 
+    const displayedCurrentProgressLabel = label(currentProgressLabel, `${progress}%`);
+    const displayedMaxProgressLabel = label(maxProgressLabel, "100%");
     return /*#__PURE__*/React.createElement(StyledValuesLabel, {
       position: labelsPosition,
-      isVertical: isVertical
-    }, isVertical && internalDirection === "up" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledValue, {
-      isMaxValue: true
-    }, label(maxProgressLabel, "100%")), /*#__PURE__*/React.createElement(StyledValue, null, label(currentProgressLabel, `${progress}%`))), (internalDirection === "down" || !isVertical) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledValue, null, label(currentProgressLabel, `${progress}%`)), /*#__PURE__*/React.createElement(StyledValue, {
-      isMaxValue: true
-    }, label(maxProgressLabel, "100%"))));
+      size: size
+    }, displayedCurrentProgressLabel && /*#__PURE__*/React.createElement(StyledValue, null, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, customValuePreposition || l.progressTracker.of()), /*#__PURE__*/React.createElement(StyledValue, null, displayedMaxProgressLabel)), description && /*#__PURE__*/React.createElement(StyledDescription, null, description));
   };
 
   const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
   return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
     size: size,
-    length: length,
-    isVertical: isVertical
+    length: length
   }, rest, tagComponent("progress-bar", rest), {
     role: "progressbar",
     "aria-label": ariaLabel,
@@ -91,15 +77,15 @@ const ProgressTracker = ({
     "aria-valuemax": ariaValueMax,
     "aria-valuetext": ariaValueText
   }), prefixLabels && renderValueLabels(), /*#__PURE__*/React.createElement(StyledProgressBar, {
-    direction: isVertical ? internalDirection : undefined,
-    isVertical: isVertical,
     size: size,
-    ref: barRef
+    ref: barRef,
+    progress: progress,
+    error: error
   }, /*#__PURE__*/React.createElement(InnerBar, {
-    isVertical: isVertical,
     size: size,
     length: barLength,
-    progress: progress
+    progress: progress,
+    error: error
   })), !prefixLabels && renderValueLabels());
 };
 
@@ -134,7 +120,13 @@ ProgressTracker.propTypes = { ...marginPropTypes,
   /** Current progress (percentage). */
   progress: PropTypes.number,
 
+  /** If error occurs. */
+  error: PropTypes.bool,
+
   /** Flag to control whether the default value labels (as percentages) should be rendered. */
+  description: PropTypes.string,
+
+  /** Value to add a description to the label */
   showDefaultLabels: PropTypes.bool,
 
   /** Value to display as current progress. */
@@ -143,16 +135,13 @@ ProgressTracker.propTypes = { ...marginPropTypes,
   /** Value to display as the maximum progress limit. */
   maxProgressLabel: PropTypes.string,
 
-  /** The orientation of the component. */
-  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
-
-  /** The direction the bar should move as progress increases, only applies in vertical orientation. */
-  direction: PropTypes.oneOf(["up", "down"]),
+  /** Value of the preposition defined between Value1 and Value2 on the label. */
+  customValuePreposition: PropTypes.string,
 
   /**
    * The position the value label are rendered in.
    * Top/bottom apply to horizontal and left/right to vertical orientation.
    */
-  labelsPosition: PropTypes.oneOf(["top", "bottom", "left", "right"])
+  labelsPosition: PropTypes.oneOf(["top", "bottom"])
 };
 export default ProgressTracker;

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

@@ -26,15 +26,13 @@ export interface ProgressTrackerProps extends MarginProps {
   currentProgressLabel?: string;
   /** Value to display as the maximum progress limit. */
   maxProgressLabel?: string;
-  /** 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";
+  labelsPosition?: "top" | "bottom";
+  /** Value of the preposition defined between Value1 and Value2 on the label. */
+  customValuePreposition?: string;
 }
 
 declare function ProgressTracker(props: ProgressTrackerProps): JSX.Element;

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

@@ -9,109 +9,69 @@ const StyledProgressTracker = styled.div`
   white-space: nowrap;
 
   ${({
-  isVertical,
   length
 }) => css`
-    ${!isVertical && `
       width: ${length};
-    `}
-    ${isVertical && `
-      height: ${length};
-      display: flex;
-    `}
-  `}
+    `};
 `;
 const StyledProgressBar = styled.span`
   ${({
-  direction,
-  isVertical,
-  size
+  size,
+  progress,
+  error
 }) => css`
     display: flex;
     position: relative;
     background-color: var(--colorsSemanticNeutral200);
-
-    ${!isVertical && css`
-      overflow-x: hidden;
-      height: ${getHeight(size)};
-      width: 100%;
-    `}
-    ${isVertical && css`
-      overflow-y: hidden;
-      width: ${getHeight(size)};
-      height: 100%;
-
-      ${direction === "up" && `
-        align-items: flex-end;
-      `}
-    `}
+    border: 1px solid ${getBorderColour(progress, error)};
+    border-radius: 25px;
+    overflow-x: hidden;
+    height: ${getHeight(size)};
+    width: 100%;
   `}
 `;
+const fontSizes = {
+  small: "var(--fontSizes100)",
+  medium: "var(--fontSizes100)",
+  large: "var(--fontSizes200)"
+};
 const StyledValue = styled.span`
-  color: var(--colorsUtilityYin090);
-  ${({
-  isMaxValue
-}) => css`
-    ${isMaxValue && `color: var(--colorsUtilityYin055);`}
-    ${!isMaxValue && `font-weight: bold;`}
-  `}
+  display: inline-block;
+  font-weight: bold;
+`;
+const StyledDescription = styled.span`
+  color: var(--colorsUtilityYin055);
+  margin-left: 4px;
 `;
 const StyledValuesLabel = styled.span`
   text-align: start;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 4px;
+  font-size: ${({
+  size
+}) => fontSizes[size]};
   ${({
-  isVertical,
   position
-}) => css`
-    ${isVertical && css`
-      flex-direction: column;
-
-      ${position !== "left" && css`
-        padding-left: 4px;
-      `}
-
-      ${position === "left" && css`
-        padding-right: 4px;
-
-        ${StyledValue} {
-          text-align: right;
-        }
-      `}
-    `}
-
-    ${!isVertical && css`
-      ${position !== "bottom" && css`
-        padding-bottom: 4px;
-      `}
-
-      ${position === "bottom" && css`
-        padding-top: 4px;
-      `}
-    `}
-  `}
+}) => position === "bottom" && "margin-top: 8px"};
+  ${({
+  position
+}) => position !== "bottom" && "margin-bottom: 8px"};
 `;
 const InnerBar = styled.span`
   ${({
-  isVertical,
   progress,
   size,
-  length
+  length,
+  error
 }) => css`
-    position: absolute;
+    position: relative;
     left: 0;
-    background-color: ${getInnerBarColour(progress)};
-
-    ${!isVertical && css`
-      width: calc(${length} * ${progress / 100});
-      min-width: 2px;
-      height: ${getHeight(size)};
-    `}
-    ${isVertical && css`
-      height: calc(${length} * ${progress / 100});
-      min-height: 2px;
-      width: ${getHeight(size)};
-    `}
+    background-color: ${getBackgroundColour(progress, error)};
+    border-radius: 25px;
+    width: calc(${length} * ${progress / 100});
+    min-width: 2px;
+    height: ${getHeight(size)};
   `}
 `;
 
@@ -128,11 +88,18 @@ function getHeight(size) {
   }
 }
 
-function getInnerBarColour(progress) {
+function getBackgroundColour(progress, error) {
+  if (error) return "var(--colorsSemanticNegative500)";
   if (progress >= 100) return "var(--colorsSemanticPositive500)";
   return "var(--colorsSemanticNeutral500)";
 }
 
+function getBorderColour(progress, error) {
+  if (error) return "var(--colorsSemanticNegative500)";
+  if (progress === 100) return "var(--colorsSemanticPositive500)";
+  return "var(--colorsSemanticNeutral500)";
+}
+
 StyledProgressTracker.defaultProps = {
   theme: baseTheme
 };
@@ -145,23 +112,18 @@ InnerBar.defaultProps = {
 };
 InnerBar.propTypes = {
   size: PropTypes.oneOf(PROGRESS_TRACKER_SIZES),
-  progress: PropTypes.number,
-  isVertical: PropTypes.bool
+  progress: PropTypes.number
 };
 StyledProgressTracker.propTypes = {
-  theme: PropTypes.object,
-  isVertical: PropTypes.bool
+  theme: PropTypes.object
 };
 StyledValuesLabel.propTypes = {
-  isVertical: PropTypes.bool,
   position: PropTypes.oneOf(["top", "bottom", "left", "right"])
 };
 StyledValue.propTypes = {
   isMaxValue: PropTypes.bool
 };
 StyledProgressBar.propTypes = {
-  direction: PropTypes.oneOf(["up", "down"]),
-  isVertical: PropTypes.bool,
   size: PropTypes.oneOf(PROGRESS_TRACKER_SIZES)
 };
-export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue };
+export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription };

package/esm/components/tile-select/tile-select-group.component.js

@@ -41,7 +41,9 @@ const TileSelectGroup = props => {
     legend: legend
   }, tagComponent("tile-select-group", rest), {
     multiSelect: multiSelect
-  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledGroupDescription, null, description), /*#__PURE__*/React.createElement("div", null, tiles));
+  }, filterStyledSystemMarginProps(rest)), description ? /*#__PURE__*/React.createElement(StyledGroupDescription, {
+    "data-element": "tile-select-group-description"
+  }, description) : null, /*#__PURE__*/React.createElement("div", null, tiles));
 };
 
 TileSelectGroup.propTypes = { ...marginPropTypes,

package/esm/locales/en-gb.js

@@ -83,6 +83,9 @@ const enGB = {
     pageX: () => "Page",
     ofY: count => `of ${count}`
   },
+  progressTracker: {
+    of: () => "of"
+  },
   select: {
     actionButtonText: () => "Add New Item",
     placeholder: () => "Please Select...",

package/esm/locales/locale.d.ts

@@ -56,6 +56,9 @@ interface Locale {
         pageX: () => string;
         ofY: (count: string | number) => string;
     };
+    progressTracker: {
+        of: () => string;
+    };
     select: {
         actionButtonText: () => string;
         placeholder: () => string;

package/esm/locales/pl-pl.js

@@ -81,6 +81,9 @@ const plPL = {
     pageX: () => "Strona",
     ofY: count => `z ${count}`
   },
+  progressTracker: {
+    of: () => "z"
+  },
   select: {
     actionButtonText: () => "Dodaj nowy element",
     placeholder: () => "Proszę wybierz...",

package/lib/components/i18n-provider/i18n-provider.component.js

@@ -87,6 +87,9 @@ I18nProvider.propTypes = {
       "records": _propTypes.default.func.isRequired,
       "show": _propTypes.default.func.isRequired
     }),
+    "progressTracker": _propTypes.default.shape({
+      "of": _propTypes.default.func.isRequired
+    }),
     "select": _propTypes.default.shape({
       "actionButtonText": _propTypes.default.func.isRequired,
       "noResultsForTerm": _propTypes.default.func.isRequired,

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

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 
 var _utils = require("../../style/utils");
@@ -19,8 +21,6 @@ var _progressTracker = require("./progress-tracker.style");
 
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-
 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; }
@@ -29,7 +29,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return 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); }
 
-let deprecatedWarningTriggered = false;
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const ProgressTracker = ({
@@ -41,43 +40,32 @@ const ProgressTracker = ({
   "aria-valuetext": ariaValueText,
   size = "medium",
   length = "256px",
+  error = false,
   progress = 0,
+  description,
   showDefaultLabels = false,
   currentProgressLabel,
+  customValuePreposition,
   maxProgressLabel,
-  orientation,
-  direction,
   labelsPosition,
   ...rest
 }) => {
-  if (!deprecatedWarningTriggered && (orientation || direction)) {
-    deprecatedWarningTriggered = true;
-
-    _logger.default.deprecate("The `orientation` and `direction` props in `ProgressTracker` component are deprecated and will soon be removed.");
-  }
-
-  const internalOrientation = orientation || "horizontal";
-  const internalDirection = direction || "up";
+  const l = (0, _useLocale.default)();
   const barRef = (0, _react.useRef)();
   const [barLength, setBarLength] = (0, _react.useState)(0);
-  const isVertical = internalOrientation === "vertical";
-  const prefixLabels = !isVertical && labelsPosition !== "bottom" || isVertical && labelsPosition === "left";
+  const prefixLabels = labelsPosition !== "bottom";
   const updateBarLength = (0, _react.useCallback)(() => {
-    if (internalOrientation === "horizontal") {
-      setBarLength(`${barRef.current.offsetWidth}px`);
-    } else {
-      setBarLength(`${barRef.current.offsetHeight}px`);
-    }
-  }, [barRef, internalOrientation]);
+    setBarLength(`${barRef.current.offsetWidth}px`);
+  }, []);
   (0, _react.useLayoutEffect)(() => {
     updateBarLength();
-  }, [barRef, internalOrientation, updateBarLength]);
+  }, [updateBarLength]);
   (0, _useResizeObserver.default)(barRef, () => {
     updateBarLength();
   });
 
   const renderValueLabels = () => {
-    if (!showDefaultLabels && !currentProgressLabel && !maxProgressLabel) {
+    if (!showDefaultLabels && !currentProgressLabel) {
       return null;
     }
 
@@ -89,21 +77,18 @@ const ProgressTracker = ({
       return showDefaultLabels ? defaultValue : undefined;
     };
 
+    const displayedCurrentProgressLabel = label(currentProgressLabel, `${progress}%`);
+    const displayedMaxProgressLabel = label(maxProgressLabel, "100%");
     return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValuesLabel, {
       position: labelsPosition,
-      isVertical: isVertical
-    }, isVertical && internalDirection === "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}%`))), (internalDirection === "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%"))));
+      size: size
+    }, displayedCurrentProgressLabel && /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, null, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, customValuePreposition || l.progressTracker.of()), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, null, displayedMaxProgressLabel)), description && /*#__PURE__*/_react.default.createElement(_progressTracker.StyledDescription, null, description));
   };
 
   const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
   return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressTracker, _extends({
     size: size,
-    length: length,
-    isVertical: isVertical
+    length: length
   }, rest, (0, _tags.default)("progress-bar", rest), {
     role: "progressbar",
     "aria-label": ariaLabel,
@@ -113,15 +98,15 @@ const ProgressTracker = ({
     "aria-valuemax": ariaValueMax,
     "aria-valuetext": ariaValueText
   }), prefixLabels && renderValueLabels(), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
-    direction: isVertical ? internalDirection : undefined,
-    isVertical: isVertical,
     size: size,
-    ref: barRef
+    ref: barRef,
+    progress: progress,
+    error: error
   }, /*#__PURE__*/_react.default.createElement(_progressTracker.InnerBar, {
-    isVertical: isVertical,
     size: size,
     length: barLength,
-    progress: progress
+    progress: progress,
+    error: error
   })), !prefixLabels && renderValueLabels());
 };
 
@@ -156,7 +141,13 @@ ProgressTracker.propTypes = { ...marginPropTypes,
   /** Current progress (percentage). */
   progress: _propTypes.default.number,
 
+  /** If error occurs. */
+  error: _propTypes.default.bool,
+
   /** Flag to control whether the default value labels (as percentages) should be rendered. */
+  description: _propTypes.default.string,
+
+  /** Value to add a description to the label */
   showDefaultLabels: _propTypes.default.bool,
 
   /** Value to display as current progress. */
@@ -165,17 +156,14 @@ ProgressTracker.propTypes = { ...marginPropTypes,
   /** Value to display as the maximum progress limit. */
   maxProgressLabel: _propTypes.default.string,
 
-  /** 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"]),
+  /** Value of the preposition defined between Value1 and Value2 on the label. */
+  customValuePreposition: _propTypes.default.string,
 
   /**
    * 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"])
+  labelsPosition: _propTypes.default.oneOf(["top", "bottom"])
 };
 var _default = ProgressTracker;
 exports.default = _default;

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

@@ -26,15 +26,13 @@ export interface ProgressTrackerProps extends MarginProps {
   currentProgressLabel?: string;
   /** Value to display as the maximum progress limit. */
   maxProgressLabel?: string;
-  /** 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";
+  labelsPosition?: "top" | "bottom";
+  /** Value of the preposition defined between Value1 and Value2 on the label. */
+  customValuePreposition?: string;
 }
 
 declare function ProgressTracker(props: ProgressTrackerProps): JSX.Element;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledValue = exports.StyledValuesLabel = exports.StyledProgressTracker = exports.InnerBar = exports.StyledProgressBar = void 0;
+exports.StyledDescription = exports.StyledValue = exports.StyledValuesLabel = exports.StyledProgressTracker = exports.InnerBar = exports.StyledProgressBar = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -27,113 +27,74 @@ const StyledProgressTracker = _styledComponents.default.div`
   white-space: nowrap;
 
   ${({
-  isVertical,
   length
 }) => (0, _styledComponents.css)`
-    ${!isVertical && `
       width: ${length};
-    `}
-    ${isVertical && `
-      height: ${length};
-      display: flex;
-    `}
-  `}
+    `};
 `;
 exports.StyledProgressTracker = StyledProgressTracker;
 const StyledProgressBar = _styledComponents.default.span`
   ${({
-  direction,
-  isVertical,
-  size
+  size,
+  progress,
+  error
 }) => (0, _styledComponents.css)`
     display: flex;
     position: relative;
     background-color: var(--colorsSemanticNeutral200);
-
-    ${!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;
-      `}
-    `}
+    border: 1px solid ${getBorderColour(progress, error)};
+    border-radius: 25px;
+    overflow-x: hidden;
+    height: ${getHeight(size)};
+    width: 100%;
   `}
 `;
 exports.StyledProgressBar = StyledProgressBar;
+const fontSizes = {
+  small: "var(--fontSizes100)",
+  medium: "var(--fontSizes100)",
+  large: "var(--fontSizes200)"
+};
 const StyledValue = _styledComponents.default.span`
-  color: var(--colorsUtilityYin090);
-  ${({
-  isMaxValue
-}) => (0, _styledComponents.css)`
-    ${isMaxValue && `color: var(--colorsUtilityYin055);`}
-    ${!isMaxValue && `font-weight: bold;`}
-  `}
+  display: inline-block;
+  font-weight: bold;
 `;
 exports.StyledValue = StyledValue;
+const StyledDescription = _styledComponents.default.span`
+  color: var(--colorsUtilityYin055);
+  margin-left: 4px;
+`;
+exports.StyledDescription = StyledDescription;
 const StyledValuesLabel = _styledComponents.default.span`
   text-align: start;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 4px;
+  font-size: ${({
+  size
+}) => fontSizes[size]};
   ${({
-  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;
-      `}
-    `}
-  `}
+}) => position === "bottom" && "margin-top: 8px"};
+  ${({
+  position
+}) => position !== "bottom" && "margin-bottom: 8px"};
 `;
 exports.StyledValuesLabel = StyledValuesLabel;
 const InnerBar = _styledComponents.default.span`
   ${({
-  isVertical,
   progress,
   size,
-  length
+  length,
+  error
 }) => (0, _styledComponents.css)`
-    position: absolute;
+    position: relative;
     left: 0;
-    background-color: ${getInnerBarColour(progress)};
-
-    ${!isVertical && (0, _styledComponents.css)`
-      width: calc(${length} * ${progress / 100});
-      min-width: 2px;
-      height: ${getHeight(size)};
-    `}
-    ${isVertical && (0, _styledComponents.css)`
-      height: calc(${length} * ${progress / 100});
-      min-height: 2px;
-      width: ${getHeight(size)};
-    `}
+    background-color: ${getBackgroundColour(progress, error)};
+    border-radius: 25px;
+    width: calc(${length} * ${progress / 100});
+    min-width: 2px;
+    height: ${getHeight(size)};
   `}
 `;
 exports.InnerBar = InnerBar;
@@ -151,11 +112,18 @@ function getHeight(size) {
   }
 }
 
-function getInnerBarColour(progress) {
+function getBackgroundColour(progress, error) {
+  if (error) return "var(--colorsSemanticNegative500)";
   if (progress >= 100) return "var(--colorsSemanticPositive500)";
   return "var(--colorsSemanticNeutral500)";
 }
 
+function getBorderColour(progress, error) {
+  if (error) return "var(--colorsSemanticNegative500)";
+  if (progress === 100) return "var(--colorsSemanticPositive500)";
+  return "var(--colorsSemanticNeutral500)";
+}
+
 StyledProgressTracker.defaultProps = {
   theme: _base.default
 };
@@ -168,22 +136,17 @@ InnerBar.defaultProps = {
 };
 InnerBar.propTypes = {
   size: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_SIZES),
-  progress: _propTypes.default.number,
-  isVertical: _propTypes.default.bool
+  progress: _propTypes.default.number
 };
 StyledProgressTracker.propTypes = {
-  theme: _propTypes.default.object,
-  isVertical: _propTypes.default.bool
+  theme: _propTypes.default.object
 };
 StyledValuesLabel.propTypes = {
-  isVertical: _propTypes.default.bool,
   position: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
 };
 StyledValue.propTypes = {
   isMaxValue: _propTypes.default.bool
 };
 StyledProgressBar.propTypes = {
-  direction: _propTypes.default.oneOf(["up", "down"]),
-  isVertical: _propTypes.default.bool,
   size: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_SIZES)
 };

package/lib/components/tile-select/tile-select-group.component.js

@@ -58,7 +58,9 @@ const TileSelectGroup = props => {
     legend: legend
   }, (0, _tags.default)("tile-select-group", rest), {
     multiSelect: multiSelect
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_tileSelect2.StyledGroupDescription, null, description), /*#__PURE__*/_react.default.createElement("div", null, tiles));
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), description ? /*#__PURE__*/_react.default.createElement(_tileSelect2.StyledGroupDescription, {
+    "data-element": "tile-select-group-description"
+  }, description) : null, /*#__PURE__*/_react.default.createElement("div", null, tiles));
 };
 
 TileSelectGroup.propTypes = { ...marginPropTypes,

package/lib/locales/en-gb.js

@@ -90,6 +90,9 @@ const enGB = {
     pageX: () => "Page",
     ofY: count => `of ${count}`
   },
+  progressTracker: {
+    of: () => "of"
+  },
   select: {
     actionButtonText: () => "Add New Item",
     placeholder: () => "Please Select...",

package/lib/locales/locale.d.ts

@@ -56,6 +56,9 @@ interface Locale {
         pageX: () => string;
         ofY: (count: string | number) => string;
     };
+    progressTracker: {
+        of: () => string;
+    };
     select: {
         actionButtonText: () => string;
         placeholder: () => string;

package/lib/locales/pl-pl.js

@@ -88,6 +88,9 @@ const plPL = {
     pageX: () => "Strona",
     ofY: count => `z ${count}`
   },
+  progressTracker: {
+    of: () => "z"
+  },
   select: {
     actionButtonText: () => "Dodaj nowy element",
     placeholder: () => "Proszę wybierz...",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "113.0.2",
+  "version": "114.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -8,7 +8,7 @@
     "scripts/check_rfcs/check_rfcs.js"
   ],
   "scripts": {
-    "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -c .storybook",
+    "start": "node ./scripts/check_node_version.js && NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 9001 -c .storybook",
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
     "test": "jest --config=./jest.config.json",
     "test-update": "jest --config=./jest.config.json --updateSnapshot",
@@ -22,8 +22,8 @@
     "prepublishOnly": "npm run precompile",
     "postinstall": "node ./scripts/check_rfcs/check_rfcs.js",
     "watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
-    "build-storybook": "cross-env STORYBOOK_BUILD=true build-storybook -c .storybook",
-    "start-storybook": "cross-env STORYBOOK_BUILD=true start-storybook -c .storybook",
+    "build-storybook": "cross-env STORYBOOK_BUILD=true NODE_OPTIONS=--openssl-legacy-provider build-storybook -c .storybook",
+    "start-storybook": "cross-env STORYBOOK_BUILD=true NODE_OPTIONS=--openssl-legacy-provider start-storybook -c .storybook",
     "start:static": "npx http-server -p 9001 ./storybook-static",
     "babel": "cross-env NODE_ENV=production babel ./src --config-file ./babel.config.js --out-dir ./lib --ignore '**/*/__spec__.js','**/*.spec.js','**/*.spec.ts','**/*.spec.tsx','**/*.test.js','**/*.d.ts' --quiet --extensions '.js','.ts','.tsx'",
     "clean-lib": "rimraf ./lib && rimraf ./esm",

package/esm/__internal__/utils/argTypes/specialCharacters.d.ts

@@ -1,36 +0,0 @@
-export declare const singleSpecialCharacters: {
-    options: string[];
-    mapping: {
-        minus: string;
-        questionMark: string;
-        hash: string;
-        at: string;
-        dollar: string;
-        percent: string;
-        caret: string;
-        exclamation: string;
-        asterisk: string;
-    };
-};
-export declare const email: {
-    options: string[];
-    mapping: {
-        email: string;
-    };
-};
-export declare const number: {
-    options: string[];
-    mapping: {
-        floatNumberCommaString: string;
-        floatMinusNumberCommaString: string;
-    };
-};
-declare const _default: {
-    options: string[];
-    mapping: {
-        undefined: undefined;
-        otherLanguage: string;
-        specialCharacters: string;
-    };
-};
-export default _default;

package/esm/__internal__/utils/argTypes/specialCharacters.js

@@ -1,36 +0,0 @@
-export const singleSpecialCharacters = {
-  options: ["minus", "questionMark", "hash", "at", "dollar", "percent", "caret", "exclamation", "asterisk"],
-  mapping: {
-    minus: "-",
-    questionMark: "?",
-    hash: "#",
-    at: "@",
-    dollar: "$",
-    percent: "%",
-    caret: "^",
-    exclamation: "!",
-    asterisk: "*"
-  }
-};
-export const email = {
-  options: ["email"],
-  mapping: {
-    email: "test.frontend.squad@gmail.com"
-  }
-};
-export const number = {
-  options: ["floatNumberCommaString", "floatMinusNumberCommaString"],
-  mapping: {
-    floatNumberCommaString: "0,112",
-    floatMinusNumberCommaString: "-0,112"
-  }
-};
-export default {
-  options: ["undefined", "otherLanguage", "specialCharacters"],
-  mapping: {
-    // eslint-disable-next-line object-shorthand
-    undefined: undefined,
-    otherLanguage: "mp150ú¿¡üßä",
-    specialCharacters: "!@#$%^*()_+-=~[];:.,?{}&\"'<>"
-  }
-};

package/lib/__internal__/utils/argTypes/specialCharacters.d.ts

@@ -1,36 +0,0 @@
-export declare const singleSpecialCharacters: {
-    options: string[];
-    mapping: {
-        minus: string;
-        questionMark: string;
-        hash: string;
-        at: string;
-        dollar: string;
-        percent: string;
-        caret: string;
-        exclamation: string;
-        asterisk: string;
-    };
-};
-export declare const email: {
-    options: string[];
-    mapping: {
-        email: string;
-    };
-};
-export declare const number: {
-    options: string[];
-    mapping: {
-        floatNumberCommaString: string;
-        floatMinusNumberCommaString: string;
-    };
-};
-declare const _default: {
-    options: string[];
-    mapping: {
-        undefined: undefined;
-        otherLanguage: string;
-        specialCharacters: string;
-    };
-};
-export default _default;

package/lib/__internal__/utils/argTypes/specialCharacters.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.number = exports.email = exports.singleSpecialCharacters = void 0;
-const singleSpecialCharacters = {
-  options: ["minus", "questionMark", "hash", "at", "dollar", "percent", "caret", "exclamation", "asterisk"],
-  mapping: {
-    minus: "-",
-    questionMark: "?",
-    hash: "#",
-    at: "@",
-    dollar: "$",
-    percent: "%",
-    caret: "^",
-    exclamation: "!",
-    asterisk: "*"
-  }
-};
-exports.singleSpecialCharacters = singleSpecialCharacters;
-const email = {
-  options: ["email"],
-  mapping: {
-    email: "test.frontend.squad@gmail.com"
-  }
-};
-exports.email = email;
-const number = {
-  options: ["floatNumberCommaString", "floatMinusNumberCommaString"],
-  mapping: {
-    floatNumberCommaString: "0,112",
-    floatMinusNumberCommaString: "-0,112"
-  }
-};
-exports.number = number;
-var _default = {
-  options: ["undefined", "otherLanguage", "specialCharacters"],
-  mapping: {
-    // eslint-disable-next-line object-shorthand
-    undefined: undefined,
-    otherLanguage: "mp150ú¿¡üßä",
-    specialCharacters: "!@#$%^*()_+-=~[];:.,?{}&\"'<>"
-  }
-};
-exports.default = _default;