carbon-react 113.0.3 → 114.1.0

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/show-edit-pod/show-edit-pod.style.js

@@ -9,18 +9,18 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _form = require("../form/form.style");
 
-var _podStyle = require("../pod/pod.style.js");
+var _pod = require("../pod/pod.style");
 
-var _pod = _interopRequireDefault(require("../pod"));
+var _pod2 = _interopRequireDefault(require("../pod"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledPod = (0, _styledComponents.default)(_pod.default)`
+const StyledPod = (0, _styledComponents.default)(_pod2.default)`
   ${_form.StyledFormFooter} {
     margin-top: 24px;
   }
 
-  ${_podStyle.StyledContent} {
+  ${_pod.StyledContent} {
     padding: 16px;
   }
 

package/lib/components/tile/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./tile";
+export { default } from "./tile.component";
+export type { TileProps } from "./tile.component";

package/lib/components/tile/tile-footer/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./tile-footer";
+export { default } from "./tile-footer.component";
+export type { TileFooterProps } from "./tile-footer.component";

package/lib/components/tile/tile-footer/tile-footer.component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+export interface TileFooterProps extends PaddingProps {
+    children?: React.ReactNode;
+    /** set which background color variant should be used */
+    variant?: "default" | "black" | "transparent";
+}
+export declare const TileFooter: ({ variant, children, ...props }: TileFooterProps) => JSX.Element;
+export default TileFooter;

package/lib/components/tile/tile-footer/tile-footer.component.js

@@ -9,18 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
 var _tileFooter = _interopRequireDefault(require("./tile-footer.style"));
 
-var _utils = require("../../../style/utils");
-
 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 paddingPropTypes = (0, _utils.filterStyledSystemPaddingProps)(_propTypes2.default.space);
-
 const TileFooter = ({
   variant,
   children,
@@ -33,11 +27,163 @@ const TileFooter = ({
 };
 
 exports.TileFooter = TileFooter;
-TileFooter.propTypes = { ...paddingPropTypes,
-
-  /** Sets which background color variant should be used */
-  variant: _propTypes.default.oneOf(["default", "black", "transparent"]),
-  children: _propTypes.default.node
+TileFooter.propTypes = {
+  "children": _propTypes.default.node,
+  "p": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "padding": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pl": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "px": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "py": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "variant": _propTypes.default.oneOf(["black", "default", "transparent"])
 };
 var _default = TileFooter;
 exports.default = _default;

package/lib/components/tile/tile-footer/tile-footer.style.d.ts

@@ -0,0 +1,5 @@
+import { TileFooterProps } from "./tile-footer.component";
+declare const StyledTileFooter: import("styled-components").StyledComponent<"div", any, {
+    variant: TileFooterProps["variant"];
+}, never>;
+export default StyledTileFooter;

package/lib/components/tile/tile.component.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
+import { SpaceProps, WidthProps } from "styled-system";
+declare type DesignTokensType = keyof typeof DesignTokens;
+export interface TileProps extends SpaceProps, WidthProps {
+    /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
+    variant?: "tile" | "transparent" | "active";
+    /**
+     * The content to render within the tile. Each child will be wrapped with
+     * a TileContent wrapper, which allows any individual child component to take a
+     * percentage-based width prop, dictating the percentage of the tile width it will take up.
+     *
+     * Width will have no effect on a child component if the tile orientation is set to 'vertical'.
+     */
+    children?: React.ReactNode;
+    /** The orientation of the tile - set to either horizontal or vertical */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Set a percentage-based width for the whole Tile component, relative to its parent.
+     * If unset or zero, this will default to 100%.
+     */
+    width?: string | number;
+    /** Sets the border width by using these design tokens */
+    borderWidth?: Extract<DesignTokensType, `borderWidth${string}`>;
+    /** Sets the border variant that should be used */
+    borderVariant?: "default" | "selected" | "positive" | "negative" | "caution" | "info";
+}
+export declare const Tile: ({ variant, p, children, orientation, width, ...props }: TileProps) => JSX.Element;
+export default Tile;