carbon-react 152.1.0 → 152.2.0

package/esm/components/tile/tile.component.js

@@ -1,6 +1,6 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from "react";
-import StyledTile, { StyledHighlight } from "./tile.style";
+import StyledTile from "./tile.style";
 import TileContext from "./__internal__/tile.context";
 import filterStyledSystemPaddingProps from "../../style/utils/filter-styled-system-padding-props";
 import filterStyledSystemMarginProps from "../../style/utils/filter-styled-system-margin-props";
@@ -26,13 +26,14 @@ export const Tile = ({
   });
   const marginProps = filterStyledSystemMarginProps(rest);
   const contentPaddingProps = computeContentPadding(paddingProps, isHorizontal);
-  const tile = /*#__PURE__*/React.createElement(StyledTile, _extends({
+  return /*#__PURE__*/React.createElement(StyledTile, _extends({
     variant: variant,
     width: width,
     height: height,
     isHorizontal: isHorizontal,
     p: p,
     roundness: roundness,
+    highlightVariant: highlightVariant,
     borderWidth: borderWidth,
     borderVariant: borderVariant
   }, paddingProps, marginProps, tagComponent("tile", rest)), /*#__PURE__*/React.createElement(TileContext.Provider, {
@@ -41,14 +42,5 @@ export const Tile = ({
       paddingPropsFromTile: contentPaddingProps
     }
   }, children));
-  if (highlightVariant) {
-    return /*#__PURE__*/React.createElement(StyledHighlight, {
-      variant: highlightVariant,
-      roundness: roundness,
-      "aria-hidden": true,
-      "data-role": `tile-${highlightVariant}-highlight`
-    }, tile);
-  }
-  return tile;
 };
 export default Tile;

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

@@ -1,4 +1,4 @@
 export const TILE_ORIENTATIONS = ["horizontal", "vertical"];
 export const TILE_THEMES = ["tile", "transparent", "active", "grey"];
 export const TILE_BORDER_VARIANTS = ["default", "info", "selected", "negative", "positive", "caution"];
-export const TILE_HIGHLIGHT_VARIANTS = ["gradient", "success", "neutral", "error", "warning", "info"];
+export const TILE_HIGHLIGHT_VARIANTS = ["gradient", "success", "neutral", "error", "warning", "info", "important"];

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

@@ -3,8 +3,4 @@ import { TileProps } from "./tile.component";
 declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant" | "highlightVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
-export declare const StyledHighlight: import("styled-components").StyledComponent<"div", any, {
-    variant: Required<TileProps["highlightVariant"]>;
-    roundness: TileProps["roundness"];
-}, never>;
 export default StyledTile;

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

@@ -48,6 +48,9 @@ const getHighlightVariant = variant => {
       return "var(--colorsSemanticCaution500)";
     case "info":
       return "var(--colorsSemanticInfo500)";
+    // FE-6368 has been raised for the below, change hex values for design tokens (when added)
+    case "important":
+      return " #8F4CD7";
     default:
       // gradient is default
       return "linear-gradient(0deg, rgb(143, 73, 254) 5%, rgb(0, 146, 219) 50%, rgb(19, 160, 56) 95%)";
@@ -61,10 +64,25 @@ const StyledTile = styled.div`
   variant,
   width,
   roundness,
+  highlightVariant,
   height
 }) => css`
     ${space}
 
+    ${highlightVariant && css`
+      overflow: hidden;
+      &::before {
+        display: block;
+        content: "";
+        height: 100%;
+        width: 8px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: ${getHighlightVariant(highlightVariant)};
+      }
+    `}
+
     box-sizing: border-box;
     border: var(--${borderWidth}) solid
       ${getBorderColor(borderVariant, variant)};
@@ -109,21 +127,4 @@ const StyledTile = styled.div`
 StyledTile.defaultProps = {
   theme: baseTheme
 };
-export const StyledHighlight = styled.div`
-  height: 100%;
-  width: 100%;
-  position: relative;
-  background: ${({
-  variant
-}) => getHighlightVariant(variant)};
-  border-radius: ${({
-  roundness
-}) => getBorderRadius(roundness)};
-
-  ${StyledTile} {
-    border-left: 0;
-    left: 4px;
-    width: calc(100% - 4px);
-  }
-`;
 export default StyledTile;

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

@@ -5,14 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Tile = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _tile = _interopRequireWildcard(require("./tile.style"));
+var _tile = _interopRequireDefault(require("./tile.style"));
 var _tile2 = _interopRequireDefault(require("./__internal__/tile.context"));
 var _filterStyledSystemPaddingProps = _interopRequireDefault(require("../../style/utils/filter-styled-system-padding-props"));
 var _filterStyledSystemMarginProps = _interopRequireDefault(require("../../style/utils/filter-styled-system-margin-props"));
 var _computeContentPadding = _interopRequireDefault(require("./__internal__/compute-content-padding"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
-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 && {}.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; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Tile = ({
@@ -35,13 +33,14 @@ const Tile = ({
   });
   const marginProps = (0, _filterStyledSystemMarginProps.default)(rest);
   const contentPaddingProps = (0, _computeContentPadding.default)(paddingProps, isHorizontal);
-  const tile = /*#__PURE__*/_react.default.createElement(_tile.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_tile.default, _extends({
     variant: variant,
     width: width,
     height: height,
     isHorizontal: isHorizontal,
     p: p,
     roundness: roundness,
+    highlightVariant: highlightVariant,
     borderWidth: borderWidth,
     borderVariant: borderVariant
   }, paddingProps, marginProps, (0, _tags.default)("tile", rest)), /*#__PURE__*/_react.default.createElement(_tile2.default.Provider, {
@@ -50,15 +49,6 @@ const Tile = ({
       paddingPropsFromTile: contentPaddingProps
     }
   }, children));
-  if (highlightVariant) {
-    return /*#__PURE__*/_react.default.createElement(_tile.StyledHighlight, {
-      variant: highlightVariant,
-      roundness: roundness,
-      "aria-hidden": true,
-      "data-role": `tile-${highlightVariant}-highlight`
-    }, tile);
-  }
-  return tile;
 };
 exports.Tile = Tile;
 var _default = exports.default = Tile;

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

@@ -7,4 +7,4 @@ exports.TILE_THEMES = exports.TILE_ORIENTATIONS = exports.TILE_HIGHLIGHT_VARIANT
 const TILE_ORIENTATIONS = exports.TILE_ORIENTATIONS = ["horizontal", "vertical"];
 const TILE_THEMES = exports.TILE_THEMES = ["tile", "transparent", "active", "grey"];
 const TILE_BORDER_VARIANTS = exports.TILE_BORDER_VARIANTS = ["default", "info", "selected", "negative", "positive", "caution"];
-const TILE_HIGHLIGHT_VARIANTS = exports.TILE_HIGHLIGHT_VARIANTS = ["gradient", "success", "neutral", "error", "warning", "info"];
+const TILE_HIGHLIGHT_VARIANTS = exports.TILE_HIGHLIGHT_VARIANTS = ["gradient", "success", "neutral", "error", "warning", "info", "important"];

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

@@ -3,8 +3,4 @@ import { TileProps } from "./tile.component";
 declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant" | "highlightVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
-export declare const StyledHighlight: import("styled-components").StyledComponent<"div", any, {
-    variant: Required<TileProps["highlightVariant"]>;
-    roundness: TileProps["roundness"];
-}, never>;
 export default StyledTile;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledHighlight = void 0;
+exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
@@ -57,6 +57,9 @@ const getHighlightVariant = variant => {
       return "var(--colorsSemanticCaution500)";
     case "info":
       return "var(--colorsSemanticInfo500)";
+    // FE-6368 has been raised for the below, change hex values for design tokens (when added)
+    case "important":
+      return " #8F4CD7";
     default:
       // gradient is default
       return "linear-gradient(0deg, rgb(143, 73, 254) 5%, rgb(0, 146, 219) 50%, rgb(19, 160, 56) 95%)";
@@ -70,10 +73,25 @@ const StyledTile = _styledComponents.default.div`
   variant,
   width,
   roundness,
+  highlightVariant,
   height
 }) => (0, _styledComponents.css)`
     ${_styledSystem.space}
 
+    ${highlightVariant && (0, _styledComponents.css)`
+      overflow: hidden;
+      &::before {
+        display: block;
+        content: "";
+        height: 100%;
+        width: 8px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: ${getHighlightVariant(highlightVariant)};
+      }
+    `}
+
     box-sizing: border-box;
     border: var(--${borderWidth}) solid
       ${getBorderColor(borderVariant, variant)};
@@ -118,21 +136,4 @@ const StyledTile = _styledComponents.default.div`
 StyledTile.defaultProps = {
   theme: _base.default
 };
-const StyledHighlight = exports.StyledHighlight = _styledComponents.default.div`
-  height: 100%;
-  width: 100%;
-  position: relative;
-  background: ${({
-  variant
-}) => getHighlightVariant(variant)};
-  border-radius: ${({
-  roundness
-}) => getBorderRadius(roundness)};
-
-  ${StyledTile} {
-    border-left: 0;
-    left: 4px;
-    width: calc(100% - 4px);
-  }
-`;
 var _default = exports.default = StyledTile;

package/package.json

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