carbon-react 147.1.0 → 147.2.0

package/esm/components/portrait/__internal__/utils.d.ts

@@ -0,0 +1,2 @@
+declare const getColoursForPortrait: (backgroundColour: string | undefined, darkBackground?: boolean, largeText?: boolean, strict?: boolean, foregroundColor?: string | undefined) => string;
+export default getColoursForPortrait;

package/esm/components/portrait/__internal__/utils.js

@@ -0,0 +1,75 @@
+const getContrastRatio = (luminance1, luminance2) => {
+  const [L1, L2] = luminance1 > luminance2 ? [luminance1, luminance2] : [luminance2, luminance1];
+  return (L1 + 0.05) / (L2 + 0.05);
+};
+const calculateLuminance = hexColor => {
+  const hex = hexColor.replace("#", "");
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const normalize = value => {
+    const v = value / 255;
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  };
+  const normalizedR = normalize(r);
+  const normalizedG = normalize(g);
+  const normalizedB = normalize(b);
+  const luminance = 0.2126 * normalizedR + 0.7152 * normalizedG + 0.0722 * normalizedB;
+  return luminance;
+};
+function getAccessibleForegroundColor(backgroundColor, largeText, strict) {
+  const bgLuminance = calculateLuminance(backgroundColor);
+  const whiteLuminance = calculateLuminance("#FFFFFF");
+  const blackLuminance = calculateLuminance("#000000");
+  const whiteContrast = getContrastRatio(bgLuminance, whiteLuminance);
+  const blackContrast = getContrastRatio(bgLuminance, blackLuminance);
+  const strictThreshold = largeText ? 4.5 : 7.0;
+  const nonStrictThreshold = largeText ? 3.0 : 4.5;
+  const minContrast = strict ? strictThreshold : nonStrictThreshold;
+
+  /* istanbul ignore else */
+  if (whiteContrast >= minContrast && whiteContrast > blackContrast) {
+    return "#FFFFFF";
+  }
+
+  /* istanbul ignore else */
+  if (blackContrast >= minContrast) {
+    return "var(--colorsUtilityYin090)";
+  }
+
+  // If no color meets the contrast ratio, return the color with the highest contrast
+  // In theory this is possible only if the background color is a shade of grey, but
+  // this is a fallback mechanism as finding a colour which fails both contrast ratios
+  // is highly unlikely.
+  /* istanbul ignore next */
+  return whiteContrast > blackContrast ? "#FFFFFF" : "var(--colorsUtilityYin090)";
+}
+const getColoursForPortrait = (backgroundColour,
+// Whether the portrait is on a dark background
+darkBackground = false,
+// Whether the text is large
+largeText = false,
+/**
+ * Whether to use strict contrast (i.e., WCAG AAA). If this is false, it uses WCAG AA contrast
+ * ratios (4.5:1 for normal text, 3:1 for large text). If true, it uses 7:1 for normal text and
+ * 4.5:1 for large text.
+ */
+strict = false,
+// The custom foreground colour, if any
+foregroundColor = undefined) => {
+  let fgColor = "var(--colorsUtilityYin090)";
+  let bgColor = "var(--colorsUtilityReadOnly400)";
+  if (darkBackground && !backgroundColour && !foregroundColor) {
+    bgColor = "var(--colorsUtilityYin090)";
+    fgColor = "var(--colorsUtilityReadOnly600)";
+  }
+  if (backgroundColour) {
+    bgColor = backgroundColour;
+    fgColor = getAccessibleForegroundColor(backgroundColour, largeText, strict);
+  }
+  if (foregroundColor) {
+    fgColor = foregroundColor;
+  }
+  return `background-color: ${bgColor}; color: ${fgColor};`;
+};
+export default getColoursForPortrait;

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

@@ -38,6 +38,10 @@ export interface PortraitProps extends MarginProps {
     tooltipBgColor?: string;
     /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
+    /** The hex code of the background colour */
+    backgroundColor?: string;
+    /** The hex code of the foreground colour. This will only take effect if use in conjunction with `backgroundColor` */
+    foregroundColor?: string;
 }
-declare const Portrait: ({ alt, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
+declare const Portrait: ({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
 export default Portrait;

package/esm/components/portrait/portrait.component.js

@@ -7,6 +7,8 @@ import { StyledCustomImg, StyledIcon, StyledPortraitContainer, StyledPortraitIni
 import { filterStyledSystemMarginProps } from "../../style/utils";
 const Portrait = ({
   alt,
+  backgroundColor,
+  foregroundColor = undefined,
   name,
   darkBackground = false,
   iconType = "individual",
@@ -66,7 +68,9 @@ const Portrait = ({
         hasValidImg: hasValidImg,
         darkBackground: darkBackground,
         size: size,
-        shape: shape
+        shape: shape,
+        backgroundColor: backgroundColor,
+        foregroundColor: foregroundColor
       }), portrait));
     }
     return /*#__PURE__*/React.createElement(StyledPortraitContainer, _extends({}, filterStyledSystemMarginProps(rest), {
@@ -75,7 +79,9 @@ const Portrait = ({
       hasValidImg: hasValidImg,
       darkBackground: darkBackground,
       size: size,
-      shape: shape
+      shape: shape,
+      backgroundColor: backgroundColor,
+      foregroundColor: foregroundColor
     }), portrait);
   };
   return renderComponent();

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

@@ -2,6 +2,8 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { PortraitSizes, PortraitShapes } from "./portrait.component";
 declare type StyledPortraitProps = {
+    backgroundColor?: string;
+    foregroundColor?: string;
     darkBackground?: boolean;
     size: PortraitSizes;
     shape?: PortraitShapes;

package/esm/components/portrait/portrait.style.js

@@ -1,9 +1,10 @@
 import styled from "styled-components";
 import { margin } from "styled-system";
-import BaseTheme from "../../style/themes/base";
 import Icon from "../icon";
-import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
 import profileConfigSizes from "../profile/profile.config";
+import BaseTheme from "../../style/themes/base";
+import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
+import getColoursForPortrait from "./__internal__/utils";
 export const StyledPortraitInitials = styled.div`
   font-weight: 500;
   font-size: ${({
@@ -37,12 +38,12 @@ export const StyledIcon = styled(Icon)`
   }
 `;
 export const StyledPortraitContainer = styled.div`
-  color: ${({
-  darkBackground
-}) => darkBackground ? "var(--colorsUtilityReadOnly600)" : "var(--colorsUtilityYin090)"};
-  background-color: ${({
-  darkBackground
-}) => darkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityReadOnly400)"};
+  ${({
+  darkBackground,
+  backgroundColor,
+  size,
+  foregroundColor
+}) => getColoursForPortrait(backgroundColor, darkBackground, !["XS", "S"].includes(size), true, foregroundColor)};
   ${({
   hasValidImg,
   size

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

@@ -24,6 +24,10 @@ export interface ProfileProps extends MarginProps {
     size?: ProfileSize;
     /** Use a dark background. */
     darkBackground?: boolean;
+    /** The hex code of the background colour to be passed to the avatar */
+    backgroundColor?: string;
+    /** The hex code of the foreground colour to be passed to the avatar. Must be used in conjunction with `backgroundColor` */
+    foregroundColor?: string;
 }
-export declare const Profile: ({ src, alt, className, initials, name, size, email, text, darkBackground, ...props }: ProfileProps) => React.JSX.Element;
+export declare const Profile: ({ src, alt, className, initials, name, size, email, text, darkBackground, backgroundColor, foregroundColor, ...props }: ProfileProps) => React.JSX.Element;
 export default Profile;

package/esm/components/profile/profile.component.js

@@ -21,6 +21,8 @@ export const Profile = ({
   email,
   text,
   darkBackground,
+  backgroundColor,
+  foregroundColor,
   ...props
 }) => {
   const getInitials = () => {
@@ -32,7 +34,10 @@ export const Profile = ({
     alt,
     name,
     initials: getInitials(),
-    size
+    size,
+    backgroundColor,
+    foregroundColor,
+    "data-role": "profile-portrait"
   };
   const avatar = () => {
     if (src) {

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

@@ -10,5 +10,5 @@ declare const ProfileEmailStyle: import("styled-components").StyledComponent<imp
 declare const ProfileTextStyle: import("styled-components").StyledComponent<"span", any, ProfileSProps, never>;
 declare const ProfileStyle: import("styled-components").StyledComponent<"div", any, Pick<ProfileSProps, "darkBackground" | "hasSrc">, never>;
 declare const ProfileDetailsStyle: import("styled-components").StyledComponent<"div", any, Pick<ProfileSProps, "size" | "hasSrc">, never>;
-declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
+declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
 export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, ProfileTextStyle, };

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

@@ -194,8 +194,6 @@ const Switch = /*#__PURE__*/React.forwardRef(({
     width: labelInline ? "100%" : "auto"
   }, /*#__PURE__*/React.createElement(Box, {
     "data-role": "label-wrapper"
-    // width={labelInline ? rest.labelWidth : 30}
-    // minWidth={label && labelInline ? "32px" : 0}
   }, /*#__PURE__*/React.createElement(Label, {
     isDarkBackground: isDarkBackground,
     labelId: labelId.current,

package/lib/components/portrait/__internal__/utils.d.ts

@@ -0,0 +1,2 @@
+declare const getColoursForPortrait: (backgroundColour: string | undefined, darkBackground?: boolean, largeText?: boolean, strict?: boolean, foregroundColor?: string | undefined) => string;
+export default getColoursForPortrait;

package/lib/components/portrait/__internal__/utils.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const getContrastRatio = (luminance1, luminance2) => {
+  const [L1, L2] = luminance1 > luminance2 ? [luminance1, luminance2] : [luminance2, luminance1];
+  return (L1 + 0.05) / (L2 + 0.05);
+};
+const calculateLuminance = hexColor => {
+  const hex = hexColor.replace("#", "");
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const normalize = value => {
+    const v = value / 255;
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  };
+  const normalizedR = normalize(r);
+  const normalizedG = normalize(g);
+  const normalizedB = normalize(b);
+  const luminance = 0.2126 * normalizedR + 0.7152 * normalizedG + 0.0722 * normalizedB;
+  return luminance;
+};
+function getAccessibleForegroundColor(backgroundColor, largeText, strict) {
+  const bgLuminance = calculateLuminance(backgroundColor);
+  const whiteLuminance = calculateLuminance("#FFFFFF");
+  const blackLuminance = calculateLuminance("#000000");
+  const whiteContrast = getContrastRatio(bgLuminance, whiteLuminance);
+  const blackContrast = getContrastRatio(bgLuminance, blackLuminance);
+  const strictThreshold = largeText ? 4.5 : 7.0;
+  const nonStrictThreshold = largeText ? 3.0 : 4.5;
+  const minContrast = strict ? strictThreshold : nonStrictThreshold;
+
+  /* istanbul ignore else */
+  if (whiteContrast >= minContrast && whiteContrast > blackContrast) {
+    return "#FFFFFF";
+  }
+
+  /* istanbul ignore else */
+  if (blackContrast >= minContrast) {
+    return "var(--colorsUtilityYin090)";
+  }
+
+  // If no color meets the contrast ratio, return the color with the highest contrast
+  // In theory this is possible only if the background color is a shade of grey, but
+  // this is a fallback mechanism as finding a colour which fails both contrast ratios
+  // is highly unlikely.
+  /* istanbul ignore next */
+  return whiteContrast > blackContrast ? "#FFFFFF" : "var(--colorsUtilityYin090)";
+}
+const getColoursForPortrait = (backgroundColour,
+// Whether the portrait is on a dark background
+darkBackground = false,
+// Whether the text is large
+largeText = false,
+/**
+ * Whether to use strict contrast (i.e., WCAG AAA). If this is false, it uses WCAG AA contrast
+ * ratios (4.5:1 for normal text, 3:1 for large text). If true, it uses 7:1 for normal text and
+ * 4.5:1 for large text.
+ */
+strict = false,
+// The custom foreground colour, if any
+foregroundColor = undefined) => {
+  let fgColor = "var(--colorsUtilityYin090)";
+  let bgColor = "var(--colorsUtilityReadOnly400)";
+  if (darkBackground && !backgroundColour && !foregroundColor) {
+    bgColor = "var(--colorsUtilityYin090)";
+    fgColor = "var(--colorsUtilityReadOnly600)";
+  }
+  if (backgroundColour) {
+    bgColor = backgroundColour;
+    fgColor = getAccessibleForegroundColor(backgroundColour, largeText, strict);
+  }
+  if (foregroundColor) {
+    fgColor = foregroundColor;
+  }
+  return `background-color: ${bgColor}; color: ${fgColor};`;
+};
+var _default = exports.default = getColoursForPortrait;

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

@@ -38,6 +38,10 @@ export interface PortraitProps extends MarginProps {
     tooltipBgColor?: string;
     /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
+    /** The hex code of the background colour */
+    backgroundColor?: string;
+    /** The hex code of the foreground colour. This will only take effect if use in conjunction with `backgroundColor` */
+    foregroundColor?: string;
 }
-declare const Portrait: ({ alt, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
+declare const Portrait: ({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
 export default Portrait;

package/lib/components/portrait/portrait.component.js

@@ -16,6 +16,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return 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 Portrait = ({
   alt,
+  backgroundColor,
+  foregroundColor = undefined,
   name,
   darkBackground = false,
   iconType = "individual",
@@ -75,7 +77,9 @@ const Portrait = ({
         hasValidImg: hasValidImg,
         darkBackground: darkBackground,
         size: size,
-        shape: shape
+        shape: shape,
+        backgroundColor: backgroundColor,
+        foregroundColor: foregroundColor
       }), portrait));
     }
     return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitContainer, _extends({}, (0, _utils.filterStyledSystemMarginProps)(rest), {
@@ -84,7 +88,9 @@ const Portrait = ({
       hasValidImg: hasValidImg,
       darkBackground: darkBackground,
       size: size,
-      shape: shape
+      shape: shape,
+      backgroundColor: backgroundColor,
+      foregroundColor: foregroundColor
     }), portrait);
   };
   return renderComponent();

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

@@ -2,6 +2,8 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { PortraitSizes, PortraitShapes } from "./portrait.component";
 declare type StyledPortraitProps = {
+    backgroundColor?: string;
+    foregroundColor?: string;
     darkBackground?: boolean;
     size: PortraitSizes;
     shape?: PortraitShapes;

package/lib/components/portrait/portrait.style.js

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledPortraitInitials = exports.StyledPortraitContainer = exports.StyledIcon = exports.StyledCustomImg = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styledSystem = require("styled-system");
-var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _icon = _interopRequireDefault(require("../icon"));
-var _portrait = require("./portrait.config");
 var _profile = _interopRequireDefault(require("../profile/profile.config"));
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _portrait = require("./portrait.config");
+var _utils = _interopRequireDefault(require("./__internal__/utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledPortraitInitials = exports.StyledPortraitInitials = _styledComponents.default.div`
   font-weight: 500;
@@ -44,12 +45,12 @@ const StyledIcon = exports.StyledIcon = (0, _styledComponents.default)(_icon.def
   }
 `;
 const StyledPortraitContainer = exports.StyledPortraitContainer = _styledComponents.default.div`
-  color: ${({
-  darkBackground
-}) => darkBackground ? "var(--colorsUtilityReadOnly600)" : "var(--colorsUtilityYin090)"};
-  background-color: ${({
-  darkBackground
-}) => darkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityReadOnly400)"};
+  ${({
+  darkBackground,
+  backgroundColor,
+  size,
+  foregroundColor
+}) => (0, _utils.default)(backgroundColor, darkBackground, !["XS", "S"].includes(size), true, foregroundColor)};
   ${({
   hasValidImg,
   size

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

@@ -24,6 +24,10 @@ export interface ProfileProps extends MarginProps {
     size?: ProfileSize;
     /** Use a dark background. */
     darkBackground?: boolean;
+    /** The hex code of the background colour to be passed to the avatar */
+    backgroundColor?: string;
+    /** The hex code of the foreground colour to be passed to the avatar. Must be used in conjunction with `backgroundColor` */
+    foregroundColor?: string;
 }
-export declare const Profile: ({ src, alt, className, initials, name, size, email, text, darkBackground, ...props }: ProfileProps) => React.JSX.Element;
+export declare const Profile: ({ src, alt, className, initials, name, size, email, text, darkBackground, backgroundColor, foregroundColor, ...props }: ProfileProps) => React.JSX.Element;
 export default Profile;

package/lib/components/profile/profile.component.js

@@ -28,6 +28,8 @@ const Profile = ({
   email,
   text,
   darkBackground,
+  backgroundColor,
+  foregroundColor,
   ...props
 }) => {
   const getInitials = () => {
@@ -39,7 +41,10 @@ const Profile = ({
     alt,
     name,
     initials: getInitials(),
-    size
+    size,
+    backgroundColor,
+    foregroundColor,
+    "data-role": "profile-portrait"
   };
   const avatar = () => {
     if (src) {

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

@@ -10,5 +10,5 @@ declare const ProfileEmailStyle: import("styled-components").StyledComponent<imp
 declare const ProfileTextStyle: import("styled-components").StyledComponent<"span", any, ProfileSProps, never>;
 declare const ProfileStyle: import("styled-components").StyledComponent<"div", any, Pick<ProfileSProps, "darkBackground" | "hasSrc">, never>;
 declare const ProfileDetailsStyle: import("styled-components").StyledComponent<"div", any, Pick<ProfileSProps, "size" | "hasSrc">, never>;
-declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
+declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
 export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, ProfileTextStyle, };

package/lib/components/switch/switch.component.js

@@ -203,8 +203,6 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     width: labelInline ? "100%" : "auto"
   }, /*#__PURE__*/_react.default.createElement(_box.default, {
     "data-role": "label-wrapper"
-    // width={labelInline ? rest.labelWidth : 30}
-    // minWidth={label && labelInline ? "32px" : 0}
   }, /*#__PURE__*/_react.default.createElement(_label.default, {
     isDarkBackground: isDarkBackground,
     labelId: labelId.current,

package/package.json

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