carbon-react 114.6.1 → 114.7.0

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

@@ -52,6 +52,9 @@ I18nProvider.propTypes = {
     "link": PropTypes.shape({
       "skipLinkLabel": PropTypes.func.isRequired
     }),
+    "loader": PropTypes.shape({
+      "loading": PropTypes.func.isRequired
+    }),
     "locale": PropTypes.func,
     "message": PropTypes.shape({
       "closeButtonAriaLabel": PropTypes.func.isRequired

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

@@ -1,9 +1,10 @@
 /// <reference types="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 {
-    /** Specify an aria-label for the Loader component */
+export interface LoaderProps extends StyledLoaderSquareProps, MarginProps, TagProps {
+    /** Specify a custom accessible name for the Loader component */
     "aria-label"?: string;
 }
-export declare const Loader: ({ "aria-label": ariaLabel, isInsideButton, isActive, size, ...rest }: LoaderProps) => JSX.Element;
+export declare const Loader: ({ "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => JSX.Element;
 export default Loader;

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

@@ -2,21 +2,26 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import useMediaQuery from "../../hooks/useMediaQuery";
+import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledLoader from "./loader.style";
 import StyledLoaderSquare from "./loader-square.style";
 
 const Loader = ({
-  "aria-label": ariaLabel = "loader",
+  "aria-label": ariaLabel,
+  size = "medium",
   isInsideButton,
   isActive = true,
-  size = "medium",
   ...rest
 }) => {
+  const l = useLocale();
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   return /*#__PURE__*/React.createElement(StyledLoader, _extends({
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabel || l.loader.loading(),
     role: "progressbar"
-  }, tagComponent("loader", rest), rest), /*#__PURE__*/React.createElement(StyledLoaderSquare, {
+  }, 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
@@ -28,11 +33,14 @@ const Loader = ({
     isInsideButton: isInsideButton,
     isActive: isActive,
     size: size
-  }));
+  })));
 };
 
 Loader.propTypes = {
   "aria-label": PropTypes.string,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "isActive": PropTypes.bool,
   "isInsideButton": PropTypes.bool,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { StyledLoaderBarProps } from "./loader-bar.style";
-export interface LoaderBarProps extends StyledLoaderBarProps, MarginProps {
+export interface LoaderBarProps extends StyledLoaderBarProps, MarginProps, TagProps {
 }
 export declare const LoaderBar: {
     ({ size, ...rest }: LoaderBarProps): JSX.Element;

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

@@ -2,6 +2,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import useMediaQuery from "../../hooks/useMediaQuery";
+import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledLoaderBar, { InnerBar, StyledLoader } from "./loader-bar.style";
 
@@ -9,7 +12,12 @@ const LoaderBar = ({
   size = "medium",
   ...rest
 }) => {
-  return /*#__PURE__*/React.createElement(StyledLoader, _extends({}, rest, tagComponent("loader-bar", rest)), /*#__PURE__*/React.createElement(StyledLoaderBar, {
+  const l = useLocale();
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  return /*#__PURE__*/React.createElement(StyledLoader, _extends({
+    "aria-label": l.loader.loading(),
+    role: "progressbar"
+  }, tagComponent("loader-bar", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/React.createElement(StyledLoaderBar, {
     size: size
   }, /*#__PURE__*/React.createElement(InnerBar, {
     size: size
@@ -17,6 +25,9 @@ const LoaderBar = ({
 };
 
 LoaderBar.propTypes = {
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

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

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 export interface StyledLoaderBarProps {
-    /** Size of the loaderBar. */
+    /** Size of the LoaderBar. */
     size?: "small" | "medium" | "large";
 }
 declare const StyledLoader: import("styled-components").StyledComponent<"div", any, StyledLoaderBarProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;

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

@@ -19,9 +19,6 @@ const INNER_BAR_LENGTH = "128px";
 const StyledLoader = styled.div`
   ${margin}
   text-align: center;
-  white-space: nowrap;
-  line-height: 0;
-  font-size: 0;
 `;
 const innerBarAnimation = keyframes`
   0% {

package/esm/components/switch/__internal__/switch-slider.style.js

@@ -20,6 +20,7 @@ const StyledSwitchSlider = styled.span`
     text-transform: uppercase;
     top: 0;
     width: 60px;
+    min-width: fit-content;
     z-index: 2;
     border-radius: 90px;
     border-style: solid;

package/esm/components/switch/switch.component.js

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
-import SwitchStyle from "./switch.style";
+import StyledSwitch from "./switch.style";
 import CheckableInput from "../../__internal__/checkable-input";
 import SwitchSlider from "./__internal__/switch-slider.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
@@ -103,7 +103,7 @@ const Switch = ({
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/React.createElement(SwitchStyle, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps))));
+  }, /*#__PURE__*/React.createElement(StyledSwitch, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps))));
 };
 
 Switch.propTypes = {

package/esm/components/switch/switch.style.js

@@ -26,6 +26,7 @@ const StyledSwitch = styled.div`
       box-sizing: border-box;
       height: 24px;
       width: 60px;
+      min-width: fit-content;
       flex-basis: 100%;
       margin-left: 0;
     }
@@ -125,6 +126,7 @@ const StyledSwitch = styled.div`
       ${StyledCheckableInput}, ${HiddenCheckableInputStyle}, ${StyledSwitchSlider} {
         height: 40px;
         width: 78px;
+        min-width: fit-content;
       }
 
       ${labelInline && !fieldHelpInline && reverse && css`

package/esm/locales/en-gb.js

@@ -60,6 +60,12 @@ const enGB = {
   heading: {
     backLinkAriaLabel: () => "Back"
   },
+  link: {
+    skipLinkLabel: () => "Skip to main content"
+  },
+  loader: {
+    loading: () => "Loading"
+  },
   message: {
     closeButtonAriaLabel: () => "Close"
   },
@@ -94,9 +100,6 @@ const enGB = {
     placeholder: () => "Please Select...",
     noResultsForTerm: term => `No results for "${term}"`
   },
-  link: {
-    skipLinkLabel: () => "Skip to main content"
-  },
   sidebar: {
     ariaLabels: {
       close: () => "Close"

package/esm/locales/locale.d.ts

@@ -36,6 +36,12 @@ interface Locale {
     heading: {
         backLinkAriaLabel: () => string;
     };
+    link: {
+        skipLinkLabel: () => string;
+    };
+    loader: {
+        loading: () => string;
+    };
     message: {
         closeButtonAriaLabel: () => string;
     };
@@ -67,9 +73,6 @@ interface Locale {
         placeholder: () => string;
         noResultsForTerm: (term: string) => string;
     };
-    link: {
-        skipLinkLabel: () => string;
-    };
     sidebar: {
         ariaLabels: {
             close: () => string;

package/esm/locales/pl-pl.js

@@ -58,6 +58,12 @@ const plPL = {
   heading: {
     backLinkAriaLabel: () => "Wstecz"
   },
+  link: {
+    skipLinkLabel: () => "Przejdź do treści"
+  },
+  loader: {
+    loading: () => "Ładowanie"
+  },
   message: {
     closeButtonAriaLabel: () => "Zamknij"
   },
@@ -92,9 +98,6 @@ const plPL = {
     placeholder: () => "Proszę wybierz...",
     noResultsForTerm: term => `Brak wyników dla "${term}"`
   },
-  link: {
-    skipLinkLabel: () => "Przejdź do treści"
-  },
   sidebar: {
     ariaLabels: {
       close: () => "Zamknij"

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

@@ -66,6 +66,9 @@ I18nProvider.propTypes = {
     "link": _propTypes.default.shape({
       "skipLinkLabel": _propTypes.default.func.isRequired
     }),
+    "loader": _propTypes.default.shape({
+      "loading": _propTypes.default.func.isRequired
+    }),
     "locale": _propTypes.default.func,
     "message": _propTypes.default.shape({
       "closeButtonAriaLabel": _propTypes.default.func.isRequired

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

@@ -1,9 +1,10 @@
 /// <reference types="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 {
-    /** Specify an aria-label for the Loader component */
+export interface LoaderProps extends StyledLoaderSquareProps, MarginProps, TagProps {
+    /** Specify a custom accessible name for the Loader component */
     "aria-label"?: string;
 }
-export declare const Loader: ({ "aria-label": ariaLabel, isInsideButton, isActive, size, ...rest }: LoaderProps) => JSX.Element;
+export declare const Loader: ({ "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => JSX.Element;
 export default Loader;

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

@@ -9,6 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("../../style/utils");
+
+var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery"));
+
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
 var _loader = _interopRequireDefault(require("./loader.style"));
@@ -20,16 +26,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 Loader = ({
-  "aria-label": ariaLabel = "loader",
+  "aria-label": ariaLabel,
+  size = "medium",
   isInsideButton,
   isActive = true,
-  size = "medium",
   ...rest
 }) => {
+  const l = (0, _useLocale.default)();
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabel || l.loader.loading(),
     role: "progressbar"
-  }, (0, _tags.default)("loader", rest), rest), /*#__PURE__*/_react.default.createElement(_loaderSquare.default, {
+  }, (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
@@ -41,12 +49,15 @@ const Loader = ({
     isInsideButton: isInsideButton,
     isActive: isActive,
     size: size
-  }));
+  })));
 };
 
 exports.Loader = Loader;
 Loader.propTypes = {
   "aria-label": _propTypes.default.string,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
   "isActive": _propTypes.default.bool,
   "isInsideButton": _propTypes.default.bool,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { StyledLoaderBarProps } from "./loader-bar.style";
-export interface LoaderBarProps extends StyledLoaderBarProps, MarginProps {
+export interface LoaderBarProps extends StyledLoaderBarProps, MarginProps, TagProps {
 }
 export declare const LoaderBar: {
     ({ size, ...rest }: LoaderBarProps): JSX.Element;

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

@@ -9,6 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("../../style/utils");
+
+var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery"));
+
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
 var _loaderBar = _interopRequireWildcard(require("./loader-bar.style"));
@@ -25,7 +31,12 @@ const LoaderBar = ({
   size = "medium",
   ...rest
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_loaderBar.StyledLoader, _extends({}, rest, (0, _tags.default)("loader-bar", rest)), /*#__PURE__*/_react.default.createElement(_loaderBar.default, {
+  const l = (0, _useLocale.default)();
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  return /*#__PURE__*/_react.default.createElement(_loaderBar.StyledLoader, _extends({
+    "aria-label": l.loader.loading(),
+    role: "progressbar"
+  }, (0, _tags.default)("loader-bar", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/_react.default.createElement(_loaderBar.default, {
     size: size
   }, /*#__PURE__*/_react.default.createElement(_loaderBar.InnerBar, {
     size: size
@@ -34,6 +45,9 @@ const LoaderBar = ({
 
 exports.LoaderBar = LoaderBar;
 LoaderBar.propTypes = {
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
   "m": _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,

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

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 export interface StyledLoaderBarProps {
-    /** Size of the loaderBar. */
+    /** Size of the LoaderBar. */
     size?: "small" | "medium" | "large";
 }
 declare const StyledLoader: import("styled-components").StyledComponent<"div", any, StyledLoaderBarProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;

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

@@ -34,9 +34,6 @@ const INNER_BAR_LENGTH = "128px";
 const StyledLoader = _styledComponents.default.div`
   ${_styledSystem.margin}
   text-align: center;
-  white-space: nowrap;
-  line-height: 0;
-  font-size: 0;
 `;
 exports.StyledLoader = StyledLoader;
 const innerBarAnimation = (0, _styledComponents.keyframes)`

package/lib/components/switch/__internal__/switch-slider.style.js

@@ -36,6 +36,7 @@ const StyledSwitchSlider = _styledComponents.default.span`
     text-transform: uppercase;
     top: 0;
     width: 60px;
+    min-width: fit-content;
     z-index: 2;
     border-radius: 90px;
     border-style: solid;

package/lib/components/switch/switch.style.js

@@ -49,6 +49,7 @@ const StyledSwitch = _styledComponents.default.div`
       box-sizing: border-box;
       height: 24px;
       width: 60px;
+      min-width: fit-content;
       flex-basis: 100%;
       margin-left: 0;
     }
@@ -148,6 +149,7 @@ const StyledSwitch = _styledComponents.default.div`
       ${_checkableInput.StyledCheckableInput}, ${_hiddenCheckableInput.default}, ${_switchSlider.default} {
         height: 40px;
         width: 78px;
+        min-width: fit-content;
       }
 
       ${labelInline && !fieldHelpInline && reverse && (0, _styledComponents.css)`

package/lib/locales/en-gb.js

@@ -67,6 +67,12 @@ const enGB = {
   heading: {
     backLinkAriaLabel: () => "Back"
   },
+  link: {
+    skipLinkLabel: () => "Skip to main content"
+  },
+  loader: {
+    loading: () => "Loading"
+  },
   message: {
     closeButtonAriaLabel: () => "Close"
   },
@@ -101,9 +107,6 @@ const enGB = {
     placeholder: () => "Please Select...",
     noResultsForTerm: term => `No results for "${term}"`
   },
-  link: {
-    skipLinkLabel: () => "Skip to main content"
-  },
   sidebar: {
     ariaLabels: {
       close: () => "Close"

package/lib/locales/locale.d.ts

@@ -36,6 +36,12 @@ interface Locale {
     heading: {
         backLinkAriaLabel: () => string;
     };
+    link: {
+        skipLinkLabel: () => string;
+    };
+    loader: {
+        loading: () => string;
+    };
     message: {
         closeButtonAriaLabel: () => string;
     };
@@ -67,9 +73,6 @@ interface Locale {
         placeholder: () => string;
         noResultsForTerm: (term: string) => string;
     };
-    link: {
-        skipLinkLabel: () => string;
-    };
     sidebar: {
         ariaLabels: {
             close: () => string;

package/lib/locales/pl-pl.js

@@ -65,6 +65,12 @@ const plPL = {
   heading: {
     backLinkAriaLabel: () => "Wstecz"
   },
+  link: {
+    skipLinkLabel: () => "Przejdź do treści"
+  },
+  loader: {
+    loading: () => "Ładowanie"
+  },
   message: {
     closeButtonAriaLabel: () => "Zamknij"
   },
@@ -99,9 +105,6 @@ const plPL = {
     placeholder: () => "Proszę wybierz...",
     noResultsForTerm: term => `Brak wyników dla "${term}"`
   },
-  link: {
-    skipLinkLabel: () => "Przejdź do treści"
-  },
   sidebar: {
     ariaLabels: {
       close: () => "Zamknij"

package/package.json

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