carbon-react 126.3.1 → 126.4.1

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

@@ -4,6 +4,8 @@ export { default as TileContent } from "./tile-content";
 export type { TileContentProps } from "./tile-content";
 export { default as TileFooter } from "./tile-footer";
 export type { TileFooterProps } from "./tile-footer";
+export { default as TileHeader } from "./tile-header";
+export type { TileHeaderProps } from "./tile-header";
 export { default as FlexTileContainer } from "./flex-tile-container";
 export type { FlexTileContainerProps } from "./flex-tile-container";
 export { default as FlexTileCell } from "./flex-tile-cell";

package/esm/components/tile/index.js

@@ -1,6 +1,7 @@
 export { default as Tile } from "./tile.component";
 export { default as TileContent } from "./tile-content";
 export { default as TileFooter } from "./tile-footer";
+export { default as TileHeader } from "./tile-header";
 export { default as FlexTileContainer } from "./flex-tile-container";
 export { default as FlexTileCell } from "./flex-tile-cell";
 export { default as FlexTileDivider } from "./flex-tile-divider";

package/esm/components/tile/tile-footer/tile-footer.component.d.ts

@@ -4,7 +4,7 @@ import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export interface TileFooterProps extends PaddingProps, TagProps {
     children?: React.ReactNode;
     /** set which background color variant should be used */
-    variant?: "default" | "black" | "transparent";
+    variant?: "default" | "black" | "transparent" | "grey";
 }
 export declare const TileFooter: ({ variant, children, ...rest }: TileFooterProps) => React.JSX.Element;
 export default TileFooter;

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

@@ -7,18 +7,23 @@ const getBackgroundColor = variant => {
       return "transparent";
     case "black":
       return "var(--colorsUtilityYin100)";
+    case "grey":
+      return "var(--colorsUtilityMajor025)";
     default:
       return "var(--colorsUtilityMajor100)";
   }
 };
 const StyledTileFooter = styled.div`
   ${padding}
+  border-bottom-left-radius: calc(var(--tileBorderRadius) - 1px);
+  border-bottom-right-radius: calc(var(--tileBorderRadius) - 1px);
 
   ${({
   variant
 }) => css`
     background: ${getBackgroundColor(variant)};
-    border-top: 1px solid var(--colorsUtilityMajor100);
+    border-top: 1px solid
+      ${variant === "grey" ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor100)"};
   `}
 `;
 StyledTileFooter.defaultProps = {

package/esm/components/tile/tile-header/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./tile-header.component";
+export type { TileHeaderProps } from "./tile-header.component";

package/esm/components/tile/tile-header/index.js

@@ -0,0 +1 @@
+export { default } from "./tile-header.component";

package/esm/components/tile/tile-header/tile-header.component.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface TileHeaderProps extends PaddingProps, TagProps {
+    children?: React.ReactNode;
+    /** set which background color variant should be used */
+    variant?: "default" | "black" | "transparent" | "grey";
+}
+export declare const TileHeader: ({ variant, children, ...rest }: TileHeaderProps) => React.JSX.Element;
+export default TileHeader;

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

@@ -0,0 +1,14 @@
+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 StyledTileHeader from "./tile-header.style";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
+import filterStyledSystemPaddingProps from "../../../style/utils/filter-styled-system-padding-props";
+export const TileHeader = ({
+  variant,
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledTileHeader, _extends({
+  variant: variant
+}, filterStyledSystemPaddingProps(rest), tagComponent("tile-header", rest)), children);
+export default TileHeader;

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

@@ -0,0 +1,5 @@
+import { TileHeaderProps } from "./tile-header.component";
+declare const StyledTileHeader: import("styled-components").StyledComponent<"div", any, {
+    variant: TileHeaderProps["variant"];
+}, never>;
+export default StyledTileHeader;

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

@@ -0,0 +1,32 @@
+import styled, { css } from "styled-components";
+import { padding } from "styled-system";
+import { baseTheme } from "../../../style/themes";
+const getBackgroundColor = variant => {
+  switch (variant) {
+    case "transparent":
+      return "transparent";
+    case "black":
+      return "var(--colorsUtilityYin100)";
+    case "grey":
+      return "var(--colorsUtilityMajor025)";
+    default:
+      return "var(--colorsUtilityMajor100)";
+  }
+};
+const StyledTileHeader = styled.div`
+  ${padding}
+  border-top-left-radius: calc(var(--tileBorderRadius) - 1px);
+  border-top-right-radius: calc(var(--tileBorderRadius) - 1px);
+
+  ${({
+  variant
+}) => css`
+    background: ${getBackgroundColor(variant)};
+    border-bottom: 1px solid
+      ${variant === "grey" ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor100)"};
+  `}
+`;
+StyledTileHeader.defaultProps = {
+  theme: baseTheme
+};
+export default StyledTileHeader;

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

@@ -4,8 +4,8 @@ import { SpaceProps, WidthProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 declare type DesignTokensType = keyof typeof DesignTokens;
 export interface TileProps extends SpaceProps, WidthProps, TagProps {
-    /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
-    variant?: "tile" | "transparent" | "active";
+    /** Sets the theme of the tile */
+    variant?: "tile" | "transparent" | "active" | "grey";
     /**
      * The content to render within the tile. Each child will be wrapped with
      * a TileContent wrapper, which allows any individual child component to take a
@@ -25,8 +25,8 @@ export interface TileProps extends SpaceProps, WidthProps, TagProps {
     borderWidth?: Extract<DesignTokensType, `borderWidth${string}`>;
     /** Sets the border variant that should be used */
     borderVariant?: "default" | "selected" | "positive" | "negative" | "caution" | "info";
-    /** Sets the level of roundness of the corners, "default" is 8px and "large" is 16px */
-    roundness?: "default" | "large";
+    /** Sets the level of roundness of the corners, "default" is 8px, "large" is 16px and "small" is 4px */
+    roundness?: "default" | "large" | "small";
     /**
      * Set a percentage-based height for the whole Tile component, relative to its parent.
      */

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

@@ -18,6 +18,16 @@ const getBorderColor = borderVariant => {
       return "var(--colorsUtilityMajor100)";
   }
 };
+const getBorderRadius = roundness => {
+  switch (roundness) {
+    case "large":
+      return "var(--borderRadius200)";
+    case "small":
+      return "var(--borderRadius050)";
+    default:
+      return "var(--borderRadius100)";
+  }
+};
 const StyledTile = styled.div`
   ${({
   borderVariant,
@@ -32,8 +42,18 @@ const StyledTile = styled.div`
 
     box-sizing: border-box;
     border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
-    border-radius: ${roundness === "default" ? "var(--borderRadius100)" : "var(--borderRadius200)"};
-    overflow: hidden;
+    border-radius: ${getBorderRadius(roundness)};
+    --tileBorderRadius: ${getBorderRadius(roundness)};
+
+    > *:first-child {
+      border-top-left-radius: calc(${getBorderRadius(roundness)} - 1px);
+      border-top-right-radius: calc(${getBorderRadius(roundness)} - 1px);
+    }
+
+    > *:last-child {
+      border-bottom-left-radius: calc(${getBorderRadius(roundness)} - 1px);
+      border-bottom-right-radius: calc(${getBorderRadius(roundness)} - 1px);
+    }
 
     ${variant === "tile" && css`
       background-color: var(--colorsUtilityYang100);
@@ -48,6 +68,11 @@ const StyledTile = styled.div`
       border-color: var(--colorsActionMajor500);
     `}
 
+    ${variant === "grey" && css`
+      background-color: var(--colorsUtilityMajor025);
+      border-color: var(--colorsUtilityMajor200);
+    `}
+
     display: flex;
     flex-direction: ${isHorizontal ? "row" : "column"};
     position: relative;

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

@@ -4,6 +4,8 @@ export { default as TileContent } from "./tile-content";
 export type { TileContentProps } from "./tile-content";
 export { default as TileFooter } from "./tile-footer";
 export type { TileFooterProps } from "./tile-footer";
+export { default as TileHeader } from "./tile-header";
+export type { TileHeaderProps } from "./tile-header";
 export { default as FlexTileContainer } from "./flex-tile-container";
 export type { FlexTileContainerProps } from "./flex-tile-container";
 export { default as FlexTileCell } from "./flex-tile-cell";

package/lib/components/tile/index.js

@@ -39,9 +39,16 @@ Object.defineProperty(exports, "TileFooter", {
     return _tileFooter.default;
   }
 });
+Object.defineProperty(exports, "TileHeader", {
+  enumerable: true,
+  get: function () {
+    return _tileHeader.default;
+  }
+});
 var _tile = _interopRequireDefault(require("./tile.component"));
 var _tileContent = _interopRequireDefault(require("./tile-content"));
 var _tileFooter = _interopRequireDefault(require("./tile-footer"));
+var _tileHeader = _interopRequireDefault(require("./tile-header"));
 var _flexTileContainer = _interopRequireDefault(require("./flex-tile-container"));
 var _flexTileCell = _interopRequireDefault(require("./flex-tile-cell"));
 var _flexTileDivider = _interopRequireDefault(require("./flex-tile-divider"));

package/lib/components/tile/tile-footer/tile-footer.component.d.ts

@@ -4,7 +4,7 @@ import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export interface TileFooterProps extends PaddingProps, TagProps {
     children?: React.ReactNode;
     /** set which background color variant should be used */
-    variant?: "default" | "black" | "transparent";
+    variant?: "default" | "black" | "transparent" | "grey";
 }
 export declare const TileFooter: ({ variant, children, ...rest }: TileFooterProps) => React.JSX.Element;
 export default TileFooter;

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

@@ -15,18 +15,23 @@ const getBackgroundColor = variant => {
       return "transparent";
     case "black":
       return "var(--colorsUtilityYin100)";
+    case "grey":
+      return "var(--colorsUtilityMajor025)";
     default:
       return "var(--colorsUtilityMajor100)";
   }
 };
 const StyledTileFooter = _styledComponents.default.div`
   ${_styledSystem.padding}
+  border-bottom-left-radius: calc(var(--tileBorderRadius) - 1px);
+  border-bottom-right-radius: calc(var(--tileBorderRadius) - 1px);
 
   ${({
   variant
 }) => (0, _styledComponents.css)`
     background: ${getBackgroundColor(variant)};
-    border-top: 1px solid var(--colorsUtilityMajor100);
+    border-top: 1px solid
+      ${variant === "grey" ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor100)"};
   `}
 `;
 StyledTileFooter.defaultProps = {

package/lib/components/tile/tile-header/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./tile-header.component";
+export type { TileHeaderProps } from "./tile-header.component";

package/lib/components/tile/tile-header/index.js

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

package/lib/components/tile/tile-header/package.json

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

package/lib/components/tile/tile-header/tile-header.component.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface TileHeaderProps extends PaddingProps, TagProps {
+    children?: React.ReactNode;
+    /** set which background color variant should be used */
+    variant?: "default" | "black" | "transparent" | "grey";
+}
+export declare const TileHeader: ({ variant, children, ...rest }: TileHeaderProps) => React.JSX.Element;
+export default TileHeader;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TileHeader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tileHeader = _interopRequireDefault(require("./tile-header.style"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
+var _filterStyledSystemPaddingProps = _interopRequireDefault(require("../../../style/utils/filter-styled-system-padding-props"));
+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 TileHeader = ({
+  variant,
+  children,
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement(_tileHeader.default, _extends({
+  variant: variant
+}, (0, _filterStyledSystemPaddingProps.default)(rest), (0, _tags.default)("tile-header", rest)), children);
+exports.TileHeader = TileHeader;
+var _default = exports.default = TileHeader;

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

@@ -0,0 +1,5 @@
+import { TileHeaderProps } from "./tile-header.component";
+declare const StyledTileHeader: import("styled-components").StyledComponent<"div", any, {
+    variant: TileHeaderProps["variant"];
+}, never>;
+export default StyledTileHeader;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledSystem = require("styled-system");
+var _themes = require("../../../style/themes");
+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 getBackgroundColor = variant => {
+  switch (variant) {
+    case "transparent":
+      return "transparent";
+    case "black":
+      return "var(--colorsUtilityYin100)";
+    case "grey":
+      return "var(--colorsUtilityMajor025)";
+    default:
+      return "var(--colorsUtilityMajor100)";
+  }
+};
+const StyledTileHeader = _styledComponents.default.div`
+  ${_styledSystem.padding}
+  border-top-left-radius: calc(var(--tileBorderRadius) - 1px);
+  border-top-right-radius: calc(var(--tileBorderRadius) - 1px);
+
+  ${({
+  variant
+}) => (0, _styledComponents.css)`
+    background: ${getBackgroundColor(variant)};
+    border-bottom: 1px solid
+      ${variant === "grey" ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor100)"};
+  `}
+`;
+StyledTileHeader.defaultProps = {
+  theme: _themes.baseTheme
+};
+var _default = exports.default = StyledTileHeader;

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

@@ -4,8 +4,8 @@ import { SpaceProps, WidthProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 declare type DesignTokensType = keyof typeof DesignTokens;
 export interface TileProps extends SpaceProps, WidthProps, TagProps {
-    /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
-    variant?: "tile" | "transparent" | "active";
+    /** Sets the theme of the tile */
+    variant?: "tile" | "transparent" | "active" | "grey";
     /**
      * The content to render within the tile. Each child will be wrapped with
      * a TileContent wrapper, which allows any individual child component to take a
@@ -25,8 +25,8 @@ export interface TileProps extends SpaceProps, WidthProps, TagProps {
     borderWidth?: Extract<DesignTokensType, `borderWidth${string}`>;
     /** Sets the border variant that should be used */
     borderVariant?: "default" | "selected" | "positive" | "negative" | "caution" | "info";
-    /** Sets the level of roundness of the corners, "default" is 8px and "large" is 16px */
-    roundness?: "default" | "large";
+    /** Sets the level of roundness of the corners, "default" is 8px, "large" is 16px and "small" is 4px */
+    roundness?: "default" | "large" | "small";
     /**
      * Set a percentage-based height for the whole Tile component, relative to its parent.
      */

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

@@ -27,6 +27,16 @@ const getBorderColor = borderVariant => {
       return "var(--colorsUtilityMajor100)";
   }
 };
+const getBorderRadius = roundness => {
+  switch (roundness) {
+    case "large":
+      return "var(--borderRadius200)";
+    case "small":
+      return "var(--borderRadius050)";
+    default:
+      return "var(--borderRadius100)";
+  }
+};
 const StyledTile = _styledComponents.default.div`
   ${({
   borderVariant,
@@ -41,8 +51,18 @@ const StyledTile = _styledComponents.default.div`
 
     box-sizing: border-box;
     border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
-    border-radius: ${roundness === "default" ? "var(--borderRadius100)" : "var(--borderRadius200)"};
-    overflow: hidden;
+    border-radius: ${getBorderRadius(roundness)};
+    --tileBorderRadius: ${getBorderRadius(roundness)};
+
+    > *:first-child {
+      border-top-left-radius: calc(${getBorderRadius(roundness)} - 1px);
+      border-top-right-radius: calc(${getBorderRadius(roundness)} - 1px);
+    }
+
+    > *:last-child {
+      border-bottom-left-radius: calc(${getBorderRadius(roundness)} - 1px);
+      border-bottom-right-radius: calc(${getBorderRadius(roundness)} - 1px);
+    }
 
     ${variant === "tile" && (0, _styledComponents.css)`
       background-color: var(--colorsUtilityYang100);
@@ -57,6 +77,11 @@ const StyledTile = _styledComponents.default.div`
       border-color: var(--colorsActionMajor500);
     `}
 
+    ${variant === "grey" && (0, _styledComponents.css)`
+      background-color: var(--colorsUtilityMajor025);
+      border-color: var(--colorsUtilityMajor200);
+    `}
+
     display: flex;
     flex-direction: ${isHorizontal ? "row" : "column"};
     position: relative;

package/package.json

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