carbon-react 126.2.1 → 126.3.0

package/esm/components/loader/loader-square.style.d.ts

@@ -5,6 +5,8 @@ export interface StyledLoaderSquareProps {
     isInsideButton?: boolean;
     /** Applies slate color. Available only when isInsideButton is true. */
     isActive?: boolean;
+    /** The background color of each loader square */
+    backgroundColor?: string;
 }
 declare const StyledLoaderSquare: import("styled-components").StyledComponent<"div", any, StyledLoaderSquareProps, never>;
 export default StyledLoaderSquare;

package/esm/components/loader/loader-square.style.js

@@ -38,10 +38,11 @@ const StyledLoaderSquare = styled.div`
   size,
   isInsideButton,
   isActive,
-  theme
+  theme,
+  backgroundColor
 }) => css`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
-    background-color: var(--colorsActionMajor500);
+    background-color: ${backgroundColor};
     display: inline-block;
     ${getDimentions(size, theme.roundedCornersOptOut)}
 

package/esm/components/loader/loader.component.d.ts

@@ -2,9 +2,11 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { StyledLoaderSquareProps } from "./loader-square.style";
-export interface LoaderProps extends StyledLoaderSquareProps, MarginProps, TagProps {
+export interface LoaderProps extends Omit<StyledLoaderSquareProps, "backgroundColor">, MarginProps, TagProps {
+    /** Toggle between the default variant and gradient variant */
+    variant?: string;
     /** Specify a custom accessible name for the Loader component */
     "aria-label"?: string;
 }
-export declare const Loader: ({ "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => React.JSX.Element;
+export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => React.JSX.Element;
 export default Loader;

package/esm/components/loader/loader.component.js

@@ -8,6 +8,7 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledLoader from "./loader.style";
 import StyledLoaderSquare from "./loader-square.style";
 export const Loader = ({
+  variant = "default",
   "aria-label": ariaLabel,
   size = "medium",
   isInsideButton,
@@ -16,21 +17,20 @@ export const Loader = ({
 }) => {
   const l = useLocale();
   const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  const loaderSquareProps = {
+    isInsideButton,
+    isActive,
+    size,
+    variant
+  };
+
+  // FE-6368 has been raised for the below, changed hex values for design tokens (when added)
   return /*#__PURE__*/React.createElement(StyledLoader, _extends({
     "aria-label": ariaLabel || l.loader.loading(),
     role: "progressbar"
-  }, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledLoaderSquare, {
-    isInsideButton: isInsideButton,
-    isActive: isActive,
-    size: size
-  }), /*#__PURE__*/React.createElement(StyledLoaderSquare, {
-    isInsideButton: isInsideButton,
-    isActive: isActive,
-    size: size
-  }), /*#__PURE__*/React.createElement(StyledLoaderSquare, {
-    isInsideButton: isInsideButton,
-    isActive: isActive,
-    size: size
-  })));
+  }, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/React.createElement(React.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/React.createElement(StyledLoaderSquare, _extends({
+    key: color,
+    backgroundColor: variant === "gradient" ? color : "var(--colorsActionMajor500)"
+  }, loaderSquareProps)))));
 };
 export default Loader;

package/lib/components/loader/loader-square.style.d.ts

@@ -5,6 +5,8 @@ export interface StyledLoaderSquareProps {
     isInsideButton?: boolean;
     /** Applies slate color. Available only when isInsideButton is true. */
     isActive?: boolean;
+    /** The background color of each loader square */
+    backgroundColor?: string;
 }
 declare const StyledLoaderSquare: import("styled-components").StyledComponent<"div", any, StyledLoaderSquareProps, never>;
 export default StyledLoaderSquare;

package/lib/components/loader/loader-square.style.js

@@ -47,10 +47,11 @@ const StyledLoaderSquare = _styledComponents.default.div`
   size,
   isInsideButton,
   isActive,
-  theme
+  theme,
+  backgroundColor
 }) => (0, _styledComponents.css)`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
-    background-color: var(--colorsActionMajor500);
+    background-color: ${backgroundColor};
     display: inline-block;
     ${getDimentions(size, theme.roundedCornersOptOut)}
 

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

@@ -2,9 +2,11 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { StyledLoaderSquareProps } from "./loader-square.style";
-export interface LoaderProps extends StyledLoaderSquareProps, MarginProps, TagProps {
+export interface LoaderProps extends Omit<StyledLoaderSquareProps, "backgroundColor">, MarginProps, TagProps {
+    /** Toggle between the default variant and gradient variant */
+    variant?: string;
     /** Specify a custom accessible name for the Loader component */
     "aria-label"?: string;
 }
-export declare const Loader: ({ "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => React.JSX.Element;
+export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => React.JSX.Element;
 export default Loader;

package/lib/components/loader/loader.component.js

@@ -15,6 +15,7 @@ var _loaderSquare = _interopRequireDefault(require("./loader-square.style"));
 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); }
 const Loader = ({
+  variant = "default",
   "aria-label": ariaLabel,
   size = "medium",
   isInsideButton,
@@ -23,22 +24,21 @@ const Loader = ({
 }) => {
   const l = (0, _useLocale.default)();
   const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  const loaderSquareProps = {
+    isInsideButton,
+    isActive,
+    size,
+    variant
+  };
+
+  // FE-6368 has been raised for the below, changed hex values for design tokens (when added)
   return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
     "aria-label": ariaLabel || l.loader.loading(),
     role: "progressbar"
-  }, (0, _tags.default)("loader", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loaderSquare.default, {
-    isInsideButton: isInsideButton,
-    isActive: isActive,
-    size: size
-  }), /*#__PURE__*/_react.default.createElement(_loaderSquare.default, {
-    isInsideButton: isInsideButton,
-    isActive: isActive,
-    size: size
-  }), /*#__PURE__*/_react.default.createElement(_loaderSquare.default, {
-    isInsideButton: isInsideButton,
-    isActive: isActive,
-    size: size
-  })));
+  }, (0, _tags.default)("loader", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/_react.default.createElement(_loaderSquare.default, _extends({
+    key: color,
+    backgroundColor: variant === "gradient" ? color : "var(--colorsActionMajor500)"
+  }, loaderSquareProps)))));
 };
 exports.Loader = Loader;
 var _default = exports.default = Loader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "126.2.1",
+  "version": "126.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",