carbon-react 132.0.0 → 132.2.0

package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.component.js

@@ -24,10 +24,7 @@ export const FileUploadStatus = ({
   switch (status) {
     case "uploading":
       buttonText = locale.fileInput.actions.cancel();
-      progressBar = statusProps.progress === undefined ? /*#__PURE__*/React.createElement(LoaderBar, {
-        size: "small"
-      }) : /*#__PURE__*/React.createElement(ProgressTracker, {
-        size: "small",
+      progressBar = statusProps.progress === undefined ? /*#__PURE__*/React.createElement(LoaderBar, null) : /*#__PURE__*/React.createElement(ProgressTracker, {
         progress: statusProps.progress,
         length: "100%"
       });

package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.style.js

@@ -76,7 +76,6 @@ export const StyledFileUploadStatus = styled.div`
     `;
 }}
   border-radius: var(--borderRadius050);
-  width: 100%;
 
   ${StyledProgressBar}, ${ProgressTrackerInnerBar} {
     border-radius: var(--borderRadius050);
@@ -93,5 +92,6 @@ export const StyledFileUploadStatus = styled.div`
 
   ${LoaderBarInnerBar} {
     background-color: var(--colorsSemanticNeutral500);
+    border-radius: var(--borderRadius050);
   }
 `;

package/esm/components/file-input/file-input.component.d.ts

@@ -19,13 +19,13 @@ export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<Inp
     isVertical?: boolean;
     /** Label content */
     label?: string;
-    /** A valid CSS string for the max-height CSS property. Defaults to the same as the minHeight. */
+    /** A valid CSS string for the max-height CSS property. */
     maxHeight?: string;
     /** A valid CSS string for the max-width CSS property. Defaults to the same as the minWidth. */
     maxWidth?: string;
-    /** A valid CSS string for the min-height CSS property. Defaults to 40px. */
+    /** A valid CSS string for the min-height CSS property. */
     minHeight?: string;
-    /** A valid CSS string for the min-width CSS property. Defaults to 256px. */
+    /** A valid CSS string for the min-width CSS property. */
     minWidth?: string;
     /** onChange event handler. Accepts a list of all files currently entered to the input. */
     onChange: (files: FileList) => void;

package/esm/components/file-input/file-input.component.js

@@ -27,8 +27,8 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
   isVertical,
   maxHeight,
   maxWidth,
-  minHeight = "40px",
-  minWidth = "256px",
+  minHeight,
+  minWidth = "280px",
   name,
   onChange,
   required,
@@ -40,7 +40,7 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
   const textOnButton = buttonText || locale.fileInput.selectFile();
   const mainText = dragAndDropText || locale.fileInput.dragAndDrop();
   const sizeProps = {
-    maxHeight: maxHeight || (isVertical ? undefined : minHeight),
+    maxHeight: maxHeight || undefined,
     maxWidth: maxWidth || minWidth,
     minHeight,
     minWidth
@@ -137,7 +137,8 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
     error: error,
     onDragLeave: onDragLeave,
     onDragOver: onDragOver,
-    onDrop: onDrop
+    onDrop: onDrop,
+    isVertical: isVertical
   }, sizeProps), /*#__PURE__*/React.createElement(ButtonMinor, {
     buttonType: "primary",
     onClick: onSelectFileClick

package/esm/components/file-input/file-input.style.d.ts

@@ -9,6 +9,7 @@ interface StyledFileInputPresentationProps extends Pick<ValidationProps, "error"
     maxWidth?: string;
     minHeight?: string;
     minWidth?: string;
+    isVertical?: boolean;
 }
 export declare const StyledFileInputPresentation: import("styled-components").StyledComponent<"div", any, StyledFileInputPresentationProps, never>;
 export {};

package/esm/components/file-input/file-input.style.js

@@ -15,8 +15,9 @@ export const StyledFileInputPresentation = styled.div`
     min-height: ${minHeight};
     max-width: ${maxWidth};
     ${!hasUploadStatus && css`
-      padding: var(--spacing150);
+      padding: 11px; /* not 12px to account for 1px border */
       max-height: ${maxHeight};
+      box-sizing: border-box;
     `}
   `}
 
@@ -24,7 +25,8 @@ export const StyledFileInputPresentation = styled.div`
   hasUploadStatus,
   isDraggedOver,
   isDraggingFile,
-  error
+  error,
+  isVertical
 }) => {
   const borderWidthToken = error || isDraggingFile ? "borderWidth200" : "borderWidth100";
   let borderColorToken = "colorsUtilityMajor300";
@@ -40,13 +42,13 @@ export const StyledFileInputPresentation = styled.div`
   }
   return !hasUploadStatus && css`
         display: flex;
-        flex-direction: column;
+        ${isVertical && "flex-direction: column;"}
         flex-wrap: wrap;
         justify-content: center;
         align-content: center;
         align-items: center;
         text-align: center;
-        gap: var(--spacing150);
+        gap: var(--spacing100);
         border-radius: var(--borderRadius050);
         border: var(--${borderWidthToken}) dashed var(--${borderColorToken});
         background: var(--${backgroundColorToken});

package/esm/components/loader-spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LoaderSpinner } from "./loader-spinner.component";
+export type { LoaderSpinnerProps } from "./loader-spinner.component";

package/esm/components/loader-spinner/index.js

@@ -0,0 +1 @@
+export { default as LoaderSpinner } from "./loader-spinner.component";

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+import { LoaderSpinnerSizes, LoaderSpinnerVariants } from "./loader-spinner.config";
+export interface LoaderSpinnerProps extends MarginProps, TagProps {
+    /**
+     * The size prop allows a specific size to be set, ranging from
+     * `extra-small` to `extra-large`
+     */
+    size?: LoaderSpinnerSizes;
+    /**
+     * If set to `false` no visual label will be displayed, however
+     * a visually hidden label will still be available for assistive technologies
+     */
+    showSpinnerLabel?: boolean;
+    /**
+     * The variant prop can be used to change the appearance of the component.
+     * Typically both the outer and inner spinner will change color,
+     * however there will still be sufficient contrast between them
+     */
+    variant?: LoaderSpinnerVariants;
+    /** If set to `false` all motion will be suspended */
+    hasMotion?: boolean;
+    /**
+     * If set to `true` the animation type will become tracked, this is
+     * used specifically for when wait times are predictable
+     */
+    isTracked?: boolean;
+    /**
+     * The total animation time (in seconds). Default animation is time `1` second.
+     * For any gradient variants the default animation time is `2` seconds
+     */
+    animationTime?: number;
+}
+export declare const LoaderSpinner: ({ size, showSpinnerLabel, variant, isTracked, hasMotion, animationTime, ...rest }: LoaderSpinnerProps) => React.JSX.Element;
+export default LoaderSpinner;

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

@@ -0,0 +1,60 @@
+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); }
+import React from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import { StyledSpinnerWrapper, StyledLabel, StyledSpinnerCircleSvg } from "./loader-spinner.style";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import useLocale from "../../hooks/__internal__/useLocale";
+import useMediaQuery from "../../hooks/useMediaQuery";
+import Typography from "../typography";
+export const LoaderSpinner = ({
+  size = "medium",
+  showSpinnerLabel = true,
+  variant = "action",
+  isTracked = false,
+  hasMotion = true,
+  animationTime,
+  ...rest
+}) => {
+  const locale = useLocale();
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  const isLabelDark = variant !== "inverse" && variant !== "gradient-white";
+  const spinnerLabel = /*#__PURE__*/React.createElement(StyledLabel, {
+    "data-role": "visible-label",
+    variant: "span",
+    fontWeight: "500",
+    size: size,
+    color: isLabelDark ? "var(--colorsUtilityYin090);" : "var(--colorsActionMajorYang100);",
+    fontSize: size === "extra-large" ? "var(--sizing200)" : "var(--sizing175)",
+    lineHeight: size === "extra-large" ? "var(--sizing300)" : "var(--sizing250)"
+  }, locale.loaderSpinner.loading());
+  const isGradientVariant = variant === "gradient-white" || variant === "gradient-grey";
+  const calculateDefaultAnimationTime = () => {
+    if (animationTime) {
+      return animationTime;
+    }
+    return isGradientVariant ? 2 : 1;
+  };
+  return /*#__PURE__*/React.createElement(StyledSpinnerWrapper, _extends({
+    size: size,
+    role: "status"
+  }, tagComponent("loader-spinner", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? spinnerLabel : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpinnerCircleSvg, {
+    role: "presentation",
+    size: size,
+    variant: variant,
+    hasMotion: hasMotion,
+    isTracked: isTracked,
+    isGradientVariant: isGradientVariant,
+    animationTime: calculateDefaultAnimationTime(),
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("circle", {
+    "data-role": "outer-arc"
+  }), /*#__PURE__*/React.createElement("circle", {
+    "data-role": "inner-arc"
+  })), showSpinnerLabel ? spinnerLabel : /*#__PURE__*/React.createElement(Typography, {
+    "data-role": "hidden-label",
+    variant: "span",
+    screenReaderOnly: true
+  }, locale.loaderSpinner.loading())));
+};
+export default LoaderSpinner;

package/esm/components/loader-spinner/loader-spinner.config.d.ts

@@ -0,0 +1,11 @@
+declare const LOADER_SPINNER_VARIANTS: readonly ["action", "neutral", "inverse", "gradient-grey", "gradient-white"];
+declare type LoaderSpinnerVariants = typeof LOADER_SPINNER_VARIANTS[number];
+declare const LOADER_SPINNER_SIZES: readonly ["extra-small", "small", "medium", "large", "extra-large"];
+declare type LoaderSpinnerSizes = typeof LOADER_SPINNER_SIZES[number];
+declare type LoaderSpinnerSizeParams = Record<LoaderSpinnerSizes, {
+    wrapperDimensions: number;
+    strokeWidth: number;
+}>;
+declare const LOADER_SPINNER_SIZE_PARAMS: LoaderSpinnerSizeParams;
+export type { LoaderSpinnerSizes, LoaderSpinnerVariants };
+export { LOADER_SPINNER_SIZES, LOADER_SPINNER_VARIANTS, LOADER_SPINNER_SIZE_PARAMS, };

package/esm/components/loader-spinner/loader-spinner.config.js

@@ -0,0 +1,25 @@
+const LOADER_SPINNER_VARIANTS = ["action", "neutral", "inverse", "gradient-grey", "gradient-white"];
+const LOADER_SPINNER_SIZES = ["extra-small", "small", "medium", "large", "extra-large"];
+const LOADER_SPINNER_SIZE_PARAMS = {
+  "extra-small": {
+    wrapperDimensions: 20,
+    strokeWidth: 4
+  },
+  small: {
+    wrapperDimensions: 32,
+    strokeWidth: 4
+  },
+  medium: {
+    wrapperDimensions: 56,
+    strokeWidth: 3.3
+  },
+  large: {
+    wrapperDimensions: 80,
+    strokeWidth: 3.7
+  },
+  "extra-large": {
+    wrapperDimensions: 104,
+    strokeWidth: 3.7
+  }
+};
+export { LOADER_SPINNER_SIZES, LOADER_SPINNER_VARIANTS, LOADER_SPINNER_SIZE_PARAMS };

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { LoaderSpinnerProps } from "./loader-spinner.component";
+export declare const StyledSpinnerWrapper: import("styled-components").StyledComponent<"div", any, Pick<LoaderSpinnerProps, "size">, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<{
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    displayName: string;
+}, any, Required<Pick<LoaderSpinnerProps, "size">>, never>;
+interface StyledSpinnerCircleSvgProps extends Omit<LoaderSpinnerProps, "showSpinnerLabel"> {
+    isGradientVariant?: boolean;
+    size: Required<LoaderSpinnerProps>["size"];
+}
+export declare const StyledSpinnerCircleSvg: import("styled-components").StyledComponent<"svg", any, StyledSpinnerCircleSvgProps, never>;
+export {};

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

@@ -0,0 +1,127 @@
+import styled, { css } from "styled-components";
+import { margin } from "styled-system";
+import { LOADER_SPINNER_SIZE_PARAMS } from "./loader-spinner.config";
+import Typography from "../typography";
+const calculateColors = (isWheel, variant) => {
+  switch (variant) {
+    case "neutral":
+      return isWheel ? "var(--colorsSemanticNeutral500)" : "var(--colorsSemanticNeutral200)";
+    case "gradient-grey":
+      return isWheel ? "#00D639" : "#0000001A";
+    case "gradient-white":
+      return isWheel ? "#00D639" : "var(--colorsActionMajorYang100)";
+    case "inverse":
+      return "var(--colorsActionMajorYang100)";
+    default:
+      return isWheel ? "var(--colorsActionMajor500)" : "var(--colorsActionMajor150)";
+  }
+};
+export const StyledSpinnerWrapper = styled.div`
+  ${margin}
+  display: flex;
+  flex-direction: ${({
+  size
+}) => size === "extra-small" ? "row" : "column"};
+`;
+export const StyledLabel = styled(Typography)`
+  ${({
+  size
+}) => css`
+      display: flex;
+      justify-content: center;
+      ${size !== "extra-small" && `width: ${LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`};
+      ${size === "extra-small" && `margin-left: var(--spacing100)`};
+    `}
+`;
+export const StyledSpinnerCircleSvg = styled.svg`
+  ${({
+  size,
+  isTracked,
+  hasMotion,
+  isGradientVariant,
+  animationTime,
+  variant
+}) => {
+  const dimensions = `${LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`;
+  return size && css`
+        width: ${dimensions};
+        height: ${dimensions};
+        min-width: ${dimensions};
+        min-height: ${dimensions};
+
+        circle[data-role="outer-arc"] {
+          fill: transparent;
+          stroke-width: ${LOADER_SPINNER_SIZE_PARAMS[size].strokeWidth}px;
+          stroke: ${calculateColors(false, variant)};
+          ${variant === "inverse" && `stroke-opacity: 0.3`}
+          cx: 12px;
+          cy: 12px;
+          r: 10px;
+        }
+
+        circle[data-role="inner-arc"] {
+          fill: transparent;
+          stroke-width: ${LOADER_SPINNER_SIZE_PARAMS[size].strokeWidth}px;
+          stroke: ${calculateColors(true, variant)};
+          stroke-linecap: round;
+          stroke-dasharray: 100px;
+          stroke-dashoffset: 80px;
+          transform-origin: 12px 12px 0px;
+          cx: 12px;
+          cy: 12px;
+          r: 10px;
+          transform: rotate(270deg);
+
+          @keyframes gradientAnimation {
+            0% {
+              stroke: #00d639;
+            }
+
+            33% {
+              stroke: #11afff;
+            }
+
+            66% {
+              stroke: #8f49fe;
+            }
+          }
+
+          @keyframes trackedAnimation {
+            from {
+              stroke-dasharray: 100;
+              stroke-dashoffset: 100;
+            }
+
+            to {
+              stroke-dasharray: 100;
+              stroke-dashoffset: 20;
+            }
+          }
+
+          @keyframes untrackedAnimation {
+            0% {
+              transform: rotate(0deg);
+              stroke-dasharray: 100;
+            }
+
+            40% {
+              stroke-dasharray: 80;
+            }
+
+            80% {
+              stroke-dasharray: 100;
+            }
+
+            100% {
+              transform: rotate(360deg);
+            }
+          }
+
+          animation-name: ${isTracked && !isGradientVariant ? "trackedAnimation" : "untrackedAnimation"},
+            ${variant === "gradient-grey" || variant === "gradient-white" && "gradientAnimation" ? "gradientAnimation" : "none"};
+          ${hasMotion && `animation-duration: ${animationTime}s`};
+          animation-timing-function: cubic-bezier(0.2, 0.1, 0.8, 1);
+          animation-iteration-count: ${hasMotion ? "infinite" : "none"};
+        `;
+}};
+`;

package/esm/locales/__internal__/es-es.js

@@ -89,6 +89,9 @@ const esES = {
   loader: {
     loading: () => "Cargando"
   },
+  loaderSpinner: {
+    loading: () => "Cargando..."
+  },
   menuFullscreen: {
     ariaLabels: {
       closeButton: () => "Cerrar"

package/esm/locales/en-gb.js

@@ -91,6 +91,9 @@ const enGB = {
   loader: {
     loading: () => "Loading"
   },
+  loaderSpinner: {
+    loading: () => "Loading..."
+  },
   menuFullscreen: {
     ariaLabels: {
       closeButton: () => "Close"

package/esm/locales/locale.d.ts

@@ -74,6 +74,9 @@ interface Locale {
     loader: {
         loading: () => string;
     };
+    loaderSpinner: {
+        loading: () => string;
+    };
     menuFullscreen: {
         ariaLabels: {
             closeButton: () => string;

package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.component.js

@@ -31,10 +31,7 @@ const FileUploadStatus = ({
   switch (status) {
     case "uploading":
       buttonText = locale.fileInput.actions.cancel();
-      progressBar = statusProps.progress === undefined ? /*#__PURE__*/_react.default.createElement(_loaderBar.default, {
-        size: "small"
-      }) : /*#__PURE__*/_react.default.createElement(_progressTracker.default, {
-        size: "small",
+      progressBar = statusProps.progress === undefined ? /*#__PURE__*/_react.default.createElement(_loaderBar.default, null) : /*#__PURE__*/_react.default.createElement(_progressTracker.default, {
         progress: statusProps.progress,
         length: "100%"
       });

package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.style.js

@@ -85,7 +85,6 @@ const StyledFileUploadStatus = exports.StyledFileUploadStatus = _styledComponent
     `;
 }}
   border-radius: var(--borderRadius050);
-  width: 100%;
 
   ${_progressTracker.StyledProgressBar}, ${_progressTracker.InnerBar} {
     border-radius: var(--borderRadius050);
@@ -102,5 +101,6 @@ const StyledFileUploadStatus = exports.StyledFileUploadStatus = _styledComponent
 
   ${_loaderBar.InnerBar} {
     background-color: var(--colorsSemanticNeutral500);
+    border-radius: var(--borderRadius050);
   }
 `;

package/lib/components/file-input/file-input.component.d.ts

@@ -19,13 +19,13 @@ export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<Inp
     isVertical?: boolean;
     /** Label content */
     label?: string;
-    /** A valid CSS string for the max-height CSS property. Defaults to the same as the minHeight. */
+    /** A valid CSS string for the max-height CSS property. */
     maxHeight?: string;
     /** A valid CSS string for the max-width CSS property. Defaults to the same as the minWidth. */
     maxWidth?: string;
-    /** A valid CSS string for the min-height CSS property. Defaults to 40px. */
+    /** A valid CSS string for the min-height CSS property. */
     minHeight?: string;
-    /** A valid CSS string for the min-width CSS property. Defaults to 256px. */
+    /** A valid CSS string for the min-width CSS property. */
     minWidth?: string;
     /** onChange event handler. Accepts a list of all files currently entered to the input. */
     onChange: (files: FileList) => void;

package/lib/components/file-input/file-input.component.js

@@ -36,8 +36,8 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
   isVertical,
   maxHeight,
   maxWidth,
-  minHeight = "40px",
-  minWidth = "256px",
+  minHeight,
+  minWidth = "280px",
   name,
   onChange,
   required,
@@ -49,7 +49,7 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
   const textOnButton = buttonText || locale.fileInput.selectFile();
   const mainText = dragAndDropText || locale.fileInput.dragAndDrop();
   const sizeProps = {
-    maxHeight: maxHeight || (isVertical ? undefined : minHeight),
+    maxHeight: maxHeight || undefined,
     maxWidth: maxWidth || minWidth,
     minHeight,
     minWidth
@@ -146,7 +146,8 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
     error: error,
     onDragLeave: onDragLeave,
     onDragOver: onDragOver,
-    onDrop: onDrop
+    onDrop: onDrop,
+    isVertical: isVertical
   }, sizeProps), /*#__PURE__*/_react.default.createElement(_buttonMinor.default, {
     buttonType: "primary",
     onClick: onSelectFileClick

package/lib/components/file-input/file-input.style.d.ts

@@ -9,6 +9,7 @@ interface StyledFileInputPresentationProps extends Pick<ValidationProps, "error"
     maxWidth?: string;
     minHeight?: string;
     minWidth?: string;
+    isVertical?: boolean;
 }
 export declare const StyledFileInputPresentation: import("styled-components").StyledComponent<"div", any, StyledFileInputPresentationProps, never>;
 export {};

package/lib/components/file-input/file-input.style.js

@@ -24,8 +24,9 @@ const StyledFileInputPresentation = exports.StyledFileInputPresentation = _style
     min-height: ${minHeight};
     max-width: ${maxWidth};
     ${!hasUploadStatus && (0, _styledComponents.css)`
-      padding: var(--spacing150);
+      padding: 11px; /* not 12px to account for 1px border */
       max-height: ${maxHeight};
+      box-sizing: border-box;
     `}
   `}
 
@@ -33,7 +34,8 @@ const StyledFileInputPresentation = exports.StyledFileInputPresentation = _style
   hasUploadStatus,
   isDraggedOver,
   isDraggingFile,
-  error
+  error,
+  isVertical
 }) => {
   const borderWidthToken = error || isDraggingFile ? "borderWidth200" : "borderWidth100";
   let borderColorToken = "colorsUtilityMajor300";
@@ -49,13 +51,13 @@ const StyledFileInputPresentation = exports.StyledFileInputPresentation = _style
   }
   return !hasUploadStatus && (0, _styledComponents.css)`
         display: flex;
-        flex-direction: column;
+        ${isVertical && "flex-direction: column;"}
         flex-wrap: wrap;
         justify-content: center;
         align-content: center;
         align-items: center;
         text-align: center;
-        gap: var(--spacing150);
+        gap: var(--spacing100);
         border-radius: var(--borderRadius050);
         border: var(--${borderWidthToken}) dashed var(--${borderColorToken});
         background: var(--${backgroundColorToken});

package/lib/components/loader-spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LoaderSpinner } from "./loader-spinner.component";
+export type { LoaderSpinnerProps } from "./loader-spinner.component";

package/lib/components/loader-spinner/index.js

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

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+import { LoaderSpinnerSizes, LoaderSpinnerVariants } from "./loader-spinner.config";
+export interface LoaderSpinnerProps extends MarginProps, TagProps {
+    /**
+     * The size prop allows a specific size to be set, ranging from
+     * `extra-small` to `extra-large`
+     */
+    size?: LoaderSpinnerSizes;
+    /**
+     * If set to `false` no visual label will be displayed, however
+     * a visually hidden label will still be available for assistive technologies
+     */
+    showSpinnerLabel?: boolean;
+    /**
+     * The variant prop can be used to change the appearance of the component.
+     * Typically both the outer and inner spinner will change color,
+     * however there will still be sufficient contrast between them
+     */
+    variant?: LoaderSpinnerVariants;
+    /** If set to `false` all motion will be suspended */
+    hasMotion?: boolean;
+    /**
+     * If set to `true` the animation type will become tracked, this is
+     * used specifically for when wait times are predictable
+     */
+    isTracked?: boolean;
+    /**
+     * The total animation time (in seconds). Default animation is time `1` second.
+     * For any gradient variants the default animation time is `2` seconds
+     */
+    animationTime?: number;
+}
+export declare const LoaderSpinner: ({ size, showSpinnerLabel, variant, isTracked, hasMotion, animationTime, ...rest }: LoaderSpinnerProps) => React.JSX.Element;
+export default LoaderSpinner;

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

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LoaderSpinner = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
+var _loaderSpinner = require("./loader-spinner.style");
+var _utils = require("../../style/utils");
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery"));
+var _typography = _interopRequireDefault(require("../typography"));
+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 LoaderSpinner = ({
+  size = "medium",
+  showSpinnerLabel = true,
+  variant = "action",
+  isTracked = false,
+  hasMotion = true,
+  animationTime,
+  ...rest
+}) => {
+  const locale = (0, _useLocale.default)();
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  const isLabelDark = variant !== "inverse" && variant !== "gradient-white";
+  const spinnerLabel = /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledLabel, {
+    "data-role": "visible-label",
+    variant: "span",
+    fontWeight: "500",
+    size: size,
+    color: isLabelDark ? "var(--colorsUtilityYin090);" : "var(--colorsActionMajorYang100);",
+    fontSize: size === "extra-large" ? "var(--sizing200)" : "var(--sizing175)",
+    lineHeight: size === "extra-large" ? "var(--sizing300)" : "var(--sizing250)"
+  }, locale.loaderSpinner.loading());
+  const isGradientVariant = variant === "gradient-white" || variant === "gradient-grey";
+  const calculateDefaultAnimationTime = () => {
+    if (animationTime) {
+      return animationTime;
+    }
+    return isGradientVariant ? 2 : 1;
+  };
+  return /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledSpinnerWrapper, _extends({
+    size: size,
+    role: "status"
+  }, (0, _tags.default)("loader-spinner", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? spinnerLabel : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledSpinnerCircleSvg, {
+    role: "presentation",
+    size: size,
+    variant: variant,
+    hasMotion: hasMotion,
+    isTracked: isTracked,
+    isGradientVariant: isGradientVariant,
+    animationTime: calculateDefaultAnimationTime(),
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    "data-role": "outer-arc"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    "data-role": "inner-arc"
+  })), showSpinnerLabel ? spinnerLabel : /*#__PURE__*/_react.default.createElement(_typography.default, {
+    "data-role": "hidden-label",
+    variant: "span",
+    screenReaderOnly: true
+  }, locale.loaderSpinner.loading())));
+};
+exports.LoaderSpinner = LoaderSpinner;
+var _default = exports.default = LoaderSpinner;

package/lib/components/loader-spinner/loader-spinner.config.d.ts

@@ -0,0 +1,11 @@
+declare const LOADER_SPINNER_VARIANTS: readonly ["action", "neutral", "inverse", "gradient-grey", "gradient-white"];
+declare type LoaderSpinnerVariants = typeof LOADER_SPINNER_VARIANTS[number];
+declare const LOADER_SPINNER_SIZES: readonly ["extra-small", "small", "medium", "large", "extra-large"];
+declare type LoaderSpinnerSizes = typeof LOADER_SPINNER_SIZES[number];
+declare type LoaderSpinnerSizeParams = Record<LoaderSpinnerSizes, {
+    wrapperDimensions: number;
+    strokeWidth: number;
+}>;
+declare const LOADER_SPINNER_SIZE_PARAMS: LoaderSpinnerSizeParams;
+export type { LoaderSpinnerSizes, LoaderSpinnerVariants };
+export { LOADER_SPINNER_SIZES, LOADER_SPINNER_VARIANTS, LOADER_SPINNER_SIZE_PARAMS, };

package/lib/components/loader-spinner/loader-spinner.config.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LOADER_SPINNER_VARIANTS = exports.LOADER_SPINNER_SIZE_PARAMS = exports.LOADER_SPINNER_SIZES = void 0;
+const LOADER_SPINNER_VARIANTS = exports.LOADER_SPINNER_VARIANTS = ["action", "neutral", "inverse", "gradient-grey", "gradient-white"];
+const LOADER_SPINNER_SIZES = exports.LOADER_SPINNER_SIZES = ["extra-small", "small", "medium", "large", "extra-large"];
+const LOADER_SPINNER_SIZE_PARAMS = exports.LOADER_SPINNER_SIZE_PARAMS = {
+  "extra-small": {
+    wrapperDimensions: 20,
+    strokeWidth: 4
+  },
+  small: {
+    wrapperDimensions: 32,
+    strokeWidth: 4
+  },
+  medium: {
+    wrapperDimensions: 56,
+    strokeWidth: 3.3
+  },
+  large: {
+    wrapperDimensions: 80,
+    strokeWidth: 3.7
+  },
+  "extra-large": {
+    wrapperDimensions: 104,
+    strokeWidth: 3.7
+  }
+};

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { LoaderSpinnerProps } from "./loader-spinner.component";
+export declare const StyledSpinnerWrapper: import("styled-components").StyledComponent<"div", any, Pick<LoaderSpinnerProps, "size">, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<{
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    displayName: string;
+}, any, Required<Pick<LoaderSpinnerProps, "size">>, never>;
+interface StyledSpinnerCircleSvgProps extends Omit<LoaderSpinnerProps, "showSpinnerLabel"> {
+    isGradientVariant?: boolean;
+    size: Required<LoaderSpinnerProps>["size"];
+}
+export declare const StyledSpinnerCircleSvg: import("styled-components").StyledComponent<"svg", any, StyledSpinnerCircleSvgProps, never>;
+export {};

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

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSpinnerWrapper = exports.StyledSpinnerCircleSvg = exports.StyledLabel = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledSystem = require("styled-system");
+var _loaderSpinner = require("./loader-spinner.config");
+var _typography = _interopRequireDefault(require("../typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const calculateColors = (isWheel, variant) => {
+  switch (variant) {
+    case "neutral":
+      return isWheel ? "var(--colorsSemanticNeutral500)" : "var(--colorsSemanticNeutral200)";
+    case "gradient-grey":
+      return isWheel ? "#00D639" : "#0000001A";
+    case "gradient-white":
+      return isWheel ? "#00D639" : "var(--colorsActionMajorYang100)";
+    case "inverse":
+      return "var(--colorsActionMajorYang100)";
+    default:
+      return isWheel ? "var(--colorsActionMajor500)" : "var(--colorsActionMajor150)";
+  }
+};
+const StyledSpinnerWrapper = exports.StyledSpinnerWrapper = _styledComponents.default.div`
+  ${_styledSystem.margin}
+  display: flex;
+  flex-direction: ${({
+  size
+}) => size === "extra-small" ? "row" : "column"};
+`;
+const StyledLabel = exports.StyledLabel = (0, _styledComponents.default)(_typography.default)`
+  ${({
+  size
+}) => (0, _styledComponents.css)`
+      display: flex;
+      justify-content: center;
+      ${size !== "extra-small" && `width: ${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`};
+      ${size === "extra-small" && `margin-left: var(--spacing100)`};
+    `}
+`;
+const StyledSpinnerCircleSvg = exports.StyledSpinnerCircleSvg = _styledComponents.default.svg`
+  ${({
+  size,
+  isTracked,
+  hasMotion,
+  isGradientVariant,
+  animationTime,
+  variant
+}) => {
+  const dimensions = `${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`;
+  return size && (0, _styledComponents.css)`
+        width: ${dimensions};
+        height: ${dimensions};
+        min-width: ${dimensions};
+        min-height: ${dimensions};
+
+        circle[data-role="outer-arc"] {
+          fill: transparent;
+          stroke-width: ${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].strokeWidth}px;
+          stroke: ${calculateColors(false, variant)};
+          ${variant === "inverse" && `stroke-opacity: 0.3`}
+          cx: 12px;
+          cy: 12px;
+          r: 10px;
+        }
+
+        circle[data-role="inner-arc"] {
+          fill: transparent;
+          stroke-width: ${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].strokeWidth}px;
+          stroke: ${calculateColors(true, variant)};
+          stroke-linecap: round;
+          stroke-dasharray: 100px;
+          stroke-dashoffset: 80px;
+          transform-origin: 12px 12px 0px;
+          cx: 12px;
+          cy: 12px;
+          r: 10px;
+          transform: rotate(270deg);
+
+          @keyframes gradientAnimation {
+            0% {
+              stroke: #00d639;
+            }
+
+            33% {
+              stroke: #11afff;
+            }
+
+            66% {
+              stroke: #8f49fe;
+            }
+          }
+
+          @keyframes trackedAnimation {
+            from {
+              stroke-dasharray: 100;
+              stroke-dashoffset: 100;
+            }
+
+            to {
+              stroke-dasharray: 100;
+              stroke-dashoffset: 20;
+            }
+          }
+
+          @keyframes untrackedAnimation {
+            0% {
+              transform: rotate(0deg);
+              stroke-dasharray: 100;
+            }
+
+            40% {
+              stroke-dasharray: 80;
+            }
+
+            80% {
+              stroke-dasharray: 100;
+            }
+
+            100% {
+              transform: rotate(360deg);
+            }
+          }
+
+          animation-name: ${isTracked && !isGradientVariant ? "trackedAnimation" : "untrackedAnimation"},
+            ${variant === "gradient-grey" || variant === "gradient-white" && "gradientAnimation" ? "gradientAnimation" : "none"};
+          ${hasMotion && `animation-duration: ${animationTime}s`};
+          animation-timing-function: cubic-bezier(0.2, 0.1, 0.8, 1);
+          animation-iteration-count: ${hasMotion ? "infinite" : "none"};
+        `;
+}};
+`;

package/lib/components/loader-spinner/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/components/loader-spinner/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/locales/__internal__/es-es.js

@@ -95,6 +95,9 @@ const esES = {
   loader: {
     loading: () => "Cargando"
   },
+  loaderSpinner: {
+    loading: () => "Cargando..."
+  },
   menuFullscreen: {
     ariaLabels: {
       closeButton: () => "Cerrar"

package/lib/locales/en-gb.js

@@ -97,6 +97,9 @@ const enGB = {
   loader: {
     loading: () => "Loading"
   },
+  loaderSpinner: {
+    loading: () => "Loading..."
+  },
   menuFullscreen: {
     ariaLabels: {
       closeButton: () => "Close"

package/lib/locales/locale.d.ts

@@ -74,6 +74,9 @@ interface Locale {
     loader: {
         loading: () => string;
     };
+    loaderSpinner: {
+        loading: () => string;
+    };
     menuFullscreen: {
         ariaLabels: {
             closeButton: () => string;

package/package.json

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