carbon-react 126.6.0 → 126.7.1

package/esm/components/dismissible-box/dismissible-box.component.d.ts

@@ -2,9 +2,12 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 import { StyledDismissibleBoxProps } from "./dismissible-box.style";
 import { BoxProps } from "../box";
-export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxProps, Omit<BoxProps, "display" | "justifyContent"> {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxProps, Omit<BoxProps, "display" | "justifyContent">, Omit<TagProps, "data-component"> {
     /** The content to render in the component */
     children?: React.ReactNode;
+    /** Data tag prop bag for close Button */
+    closeButtonDataProps?: TagProps;
     /** Callback to be called when the close icon button is clicked */
     onClose: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Use this prop to override the default width. Numbers from 0-1 are converted to percentage widths. Numbers greater
@@ -13,5 +16,5 @@ export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxPro
      * Please note this component has a minWidth of 600px */
     width?: number | string;
 }
-export declare const DismissibleBox: ({ children, onClose, borderRadius, ...rest }: DismissibleBoxProps) => React.JSX.Element;
+export declare const DismissibleBox: ({ children, closeButtonDataProps, onClose, borderRadius, ...rest }: DismissibleBoxProps) => React.JSX.Element;
 export default DismissibleBox;

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -1,26 +1,35 @@
 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 useLocale from "../../hooks/__internal__/useLocale";
 import { StyledDismissibleBox } from "./dismissible-box.style";
 import IconButton from "../icon-button";
 import Icon from "../icon";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 export const DismissibleBox = ({
   children,
+  closeButtonDataProps,
   onClose,
   borderRadius = "borderRadius100",
   ...rest
-}) => /*#__PURE__*/React.createElement(StyledDismissibleBox, _extends({
-  p: "20px 24px 20px 20px",
-  "data-component": "dismissible-box",
-  borderRadius: borderRadius
-}, rest), children, /*#__PURE__*/React.createElement("span", {
-  "data-element": "close-button-wrapper"
-}, /*#__PURE__*/React.createElement(IconButton, {
-  onClick: onClose,
-  "aria-label": "close-button",
-  ml: 3
-}, /*#__PURE__*/React.createElement(Icon, {
-  type: "close",
-  color: "--colorsActionMinor500"
-}))));
+}) => {
+  const locale = useLocale();
+  return /*#__PURE__*/React.createElement(StyledDismissibleBox, _extends({
+    p: "20px 24px 20px 20px",
+    "data-component": "dismissible-box",
+    borderRadius: borderRadius
+  }, rest), children, /*#__PURE__*/React.createElement("span", {
+    "data-element": "close-button-wrapper"
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: onClose,
+    "aria-label": locale.dismissibleBox.ariaLabels.close(),
+    ml: 3
+  }, tagComponent("close-button", {
+    "data-element": "close-button",
+    ...closeButtonDataProps
+  })), /*#__PURE__*/React.createElement(Icon, {
+    type: "close",
+    color: "--colorsActionMinor500"
+  }))));
+};
 export default DismissibleBox;

package/esm/components/tile/tile.config.d.ts

@@ -1,2 +1,3 @@
 export declare const TILE_ORIENTATIONS: string[];
 export declare const TILE_THEMES: string[];
+export declare const TILE_BORDER_VARIANTS: string[];

package/esm/components/tile/tile.config.js

@@ -1,2 +1,3 @@
 export const TILE_ORIENTATIONS = ["horizontal", "vertical"];
-export const TILE_THEMES = ["tile", "transparent", "active"];
+export const TILE_THEMES = ["tile", "transparent", "active", "grey"];
+export const TILE_BORDER_VARIANTS = ["default", "info", "selected", "negative", "positive", "caution"];

package/esm/components/tile/tile.style.js

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 import { space } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import computeSizing from "../../style/utils/element-sizing";
-const getBorderColor = borderVariant => {
+const getBorderColor = (borderVariant, variant) => {
   switch (borderVariant) {
     case "selected":
       return "var(--colorsUtilityYin100)";
@@ -15,7 +15,14 @@ const getBorderColor = borderVariant => {
     case "info":
       return "var(--colorsSemanticInfo500)";
     default:
-      return "var(--colorsUtilityMajor100)";
+      switch (variant) {
+        case "active":
+          return "var(--colorsActionMajor500)";
+        case "grey":
+          return "var(--colorsUtilityMajor200)";
+        default:
+          return "var(--colorsUtilityMajor100)";
+      }
   }
 };
 const getBorderRadius = roundness => {
@@ -41,7 +48,8 @@ const StyledTile = styled.div`
     ${space}
 
     box-sizing: border-box;
-    border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
+    border: var(--${borderWidth}) solid
+      ${getBorderColor(borderVariant, variant)};
     border-radius: ${getBorderRadius(roundness)};
     --tileBorderRadius: ${getBorderRadius(roundness)};
 
@@ -65,12 +73,10 @@ const StyledTile = styled.div`
 
     ${variant === "active" && css`
       background-color: var(--colorsActionMajor025);
-      border-color: var(--colorsActionMajor500);
     `}
 
     ${variant === "grey" && css`
       background-color: var(--colorsUtilityMajor025);
-      border-color: var(--colorsUtilityMajor200);
     `}
 
     display: flex;

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

@@ -83,6 +83,11 @@ const plPL = {
       close: () => "Zamknij"
     }
   },
+  dismissibleBox: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
   errors: {
     messages: {
       formSummary: /* istanbul ignore next */

package/esm/locales/en-gb.js

@@ -46,6 +46,11 @@ const enGB = {
       close: () => "Close"
     }
   },
+  dismissibleBox: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
   errors: {
     messages: {
       formSummary: /* istanbul ignore next */

package/esm/locales/locale.d.ts

@@ -45,6 +45,11 @@ interface Locale {
             close: () => string;
         };
     };
+    dismissibleBox: {
+        ariaLabels: {
+            close: () => string;
+        };
+    };
     errors: {
         messages: {
             formSummary: (errors: number, warnings: number, type: string) => [string, string] | null;

package/lib/components/dismissible-box/dismissible-box.component.d.ts

@@ -2,9 +2,12 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 import { StyledDismissibleBoxProps } from "./dismissible-box.style";
 import { BoxProps } from "../box";
-export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxProps, Omit<BoxProps, "display" | "justifyContent"> {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxProps, Omit<BoxProps, "display" | "justifyContent">, Omit<TagProps, "data-component"> {
     /** The content to render in the component */
     children?: React.ReactNode;
+    /** Data tag prop bag for close Button */
+    closeButtonDataProps?: TagProps;
     /** Callback to be called when the close icon button is clicked */
     onClose: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Use this prop to override the default width. Numbers from 0-1 are converted to percentage widths. Numbers greater
@@ -13,5 +16,5 @@ export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxPro
      * Please note this component has a minWidth of 600px */
     width?: number | string;
 }
-export declare const DismissibleBox: ({ children, onClose, borderRadius, ...rest }: DismissibleBoxProps) => React.JSX.Element;
+export declare const DismissibleBox: ({ children, closeButtonDataProps, onClose, borderRadius, ...rest }: DismissibleBoxProps) => React.JSX.Element;
 export default DismissibleBox;

package/lib/components/dismissible-box/dismissible-box.component.js

@@ -6,29 +6,38 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DismissibleBox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _dismissibleBox = require("./dismissible-box.style");
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 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 DismissibleBox = ({
   children,
+  closeButtonDataProps,
   onClose,
   borderRadius = "borderRadius100",
   ...rest
-}) => /*#__PURE__*/_react.default.createElement(_dismissibleBox.StyledDismissibleBox, _extends({
-  p: "20px 24px 20px 20px",
-  "data-component": "dismissible-box",
-  borderRadius: borderRadius
-}, rest), children, /*#__PURE__*/_react.default.createElement("span", {
-  "data-element": "close-button-wrapper"
-}, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-  onClick: onClose,
-  "aria-label": "close-button",
-  ml: 3
-}, /*#__PURE__*/_react.default.createElement(_icon.default, {
-  type: "close",
-  color: "--colorsActionMinor500"
-}))));
+}) => {
+  const locale = (0, _useLocale.default)();
+  return /*#__PURE__*/_react.default.createElement(_dismissibleBox.StyledDismissibleBox, _extends({
+    p: "20px 24px 20px 20px",
+    "data-component": "dismissible-box",
+    borderRadius: borderRadius
+  }, rest), children, /*#__PURE__*/_react.default.createElement("span", {
+    "data-element": "close-button-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({
+    onClick: onClose,
+    "aria-label": locale.dismissibleBox.ariaLabels.close(),
+    ml: 3
+  }, (0, _tags.default)("close-button", {
+    "data-element": "close-button",
+    ...closeButtonDataProps
+  })), /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "close",
+    color: "--colorsActionMinor500"
+  }))));
+};
 exports.DismissibleBox = DismissibleBox;
 var _default = exports.default = DismissibleBox;

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

@@ -1,2 +1,3 @@
 export declare const TILE_ORIENTATIONS: string[];
 export declare const TILE_THEMES: string[];
+export declare const TILE_BORDER_VARIANTS: string[];

package/lib/components/tile/tile.config.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TILE_THEMES = exports.TILE_ORIENTATIONS = void 0;
+exports.TILE_THEMES = exports.TILE_ORIENTATIONS = exports.TILE_BORDER_VARIANTS = void 0;
 const TILE_ORIENTATIONS = exports.TILE_ORIENTATIONS = ["horizontal", "vertical"];
-const TILE_THEMES = exports.TILE_THEMES = ["tile", "transparent", "active"];
+const TILE_THEMES = exports.TILE_THEMES = ["tile", "transparent", "active", "grey"];
+const TILE_BORDER_VARIANTS = exports.TILE_BORDER_VARIANTS = ["default", "info", "selected", "negative", "positive", "caution"];

package/lib/components/tile/tile.style.js

@@ -11,7 +11,7 @@ var _elementSizing = _interopRequireDefault(require("../../style/utils/element-s
 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 getBorderColor = borderVariant => {
+const getBorderColor = (borderVariant, variant) => {
   switch (borderVariant) {
     case "selected":
       return "var(--colorsUtilityYin100)";
@@ -24,7 +24,14 @@ const getBorderColor = borderVariant => {
     case "info":
       return "var(--colorsSemanticInfo500)";
     default:
-      return "var(--colorsUtilityMajor100)";
+      switch (variant) {
+        case "active":
+          return "var(--colorsActionMajor500)";
+        case "grey":
+          return "var(--colorsUtilityMajor200)";
+        default:
+          return "var(--colorsUtilityMajor100)";
+      }
   }
 };
 const getBorderRadius = roundness => {
@@ -50,7 +57,8 @@ const StyledTile = _styledComponents.default.div`
     ${_styledSystem.space}
 
     box-sizing: border-box;
-    border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
+    border: var(--${borderWidth}) solid
+      ${getBorderColor(borderVariant, variant)};
     border-radius: ${getBorderRadius(roundness)};
     --tileBorderRadius: ${getBorderRadius(roundness)};
 
@@ -74,12 +82,10 @@ const StyledTile = _styledComponents.default.div`
 
     ${variant === "active" && (0, _styledComponents.css)`
       background-color: var(--colorsActionMajor025);
-      border-color: var(--colorsActionMajor500);
     `}
 
     ${variant === "grey" && (0, _styledComponents.css)`
       background-color: var(--colorsUtilityMajor025);
-      border-color: var(--colorsUtilityMajor200);
     `}
 
     display: flex;

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

@@ -90,6 +90,11 @@ const plPL = {
       close: () => "Zamknij"
     }
   },
+  dismissibleBox: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
   errors: {
     messages: {
       formSummary: /* istanbul ignore next */

package/lib/locales/en-gb.js

@@ -52,6 +52,11 @@ const enGB = {
       close: () => "Close"
     }
   },
+  dismissibleBox: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
   errors: {
     messages: {
       formSummary: /* istanbul ignore next */

package/lib/locales/locale.d.ts

@@ -45,6 +45,11 @@ interface Locale {
             close: () => string;
         };
     };
+    dismissibleBox: {
+        ariaLabels: {
+            close: () => string;
+        };
+    };
     errors: {
         messages: {
             formSummary: (errors: number, warnings: number, type: string) => [string, string] | null;

package/package.json

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