carbon-react 123.8.0 → 123.9.0

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

@@ -1,16 +1,14 @@
 /// <reference types="react" />
 import { ProfileSize } from "./profile.config";
-interface ProfileSizeProps {
+interface ProfileSProps {
     size?: ProfileSize;
+    hasSrc?: boolean;
+    darkBackground?: boolean;
 }
-interface ProfileHasSrcProps {
-    hasSrc: boolean;
-}
-interface ProfileDetailsStyleProps extends ProfileSizeProps, ProfileHasSrcProps {
-}
-declare const ProfileNameStyle: import("styled-components").StyledComponent<"span", any, ProfileSizeProps, never>;
-declare const ProfileEmailStyle: import("styled-components").StyledComponent<"span", any, ProfileSizeProps, never>;
-declare const ProfileStyle: import("styled-components").StyledComponent<"div", any, ProfileHasSrcProps, never>;
-declare const ProfileDetailsStyle: import("styled-components").StyledComponent<"div", any, ProfileDetailsStyleProps, never>;
-declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, darkBackground, gravatar, 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, };
+declare const ProfileNameStyle: import("styled-components").StyledComponent<"span", any, ProfileSProps, never>;
+declare const ProfileEmailStyle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, Pick<ProfileSProps, "size" | "darkBackground">, never>;
+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, gravatar, 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/profile/profile.style.js

@@ -3,44 +3,62 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ProfileStyle = exports.ProfileNameStyle = exports.ProfileEmailStyle = exports.ProfileDetailsStyle = exports.ProfileAvatarStyle = void 0;
+exports.ProfileTextStyle = exports.ProfileStyle = exports.ProfileNameStyle = exports.ProfileEmailStyle = exports.ProfileDetailsStyle = exports.ProfileAvatarStyle = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _portrait = _interopRequireDefault(require("../portrait"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _profile = _interopRequireDefault(require("./profile.config"));
+var _link = _interopRequireDefault(require("../link"));
+var _portrait2 = require("../portrait/portrait.style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ProfileNameStyle = _styledComponents.default.span`
   font-weight: bold;
-  display: block;
   font-size: ${({
   size = "M"
 }) => _profile.default[size].nameSize};
 `;
 exports.ProfileNameStyle = ProfileNameStyle;
-const ProfileEmailStyle = _styledComponents.default.span`
-  font-size: ${({
+const ProfileEmailStyle = (0, _styledComponents.default)(_link.default)`
+  a {
+    font-size: ${({
   size = "M"
 }) => _profile.default[size].emailSize};
+    color: ${({
+  darkBackground
+}) => darkBackground && "var(--colorsActionMajor350)"};
+  }
 `;
 exports.ProfileEmailStyle = ProfileEmailStyle;
+const ProfileTextStyle = _styledComponents.default.span`
+  font-size: ${({
+  size = "M"
+}) => _profile.default[size].emailSize};
+`;
+exports.ProfileTextStyle = ProfileTextStyle;
 const ProfileStyle = _styledComponents.default.div`
+  border-radius: inherit;
   white-space: nowrap;
-  color: var(--colorsUtilityYin090);
-  display: ${({
-  hasSrc
-}) => hasSrc ? "flex" : ""};
-
+  color: ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityReadOnly600)" : "var(--colorsUtilityYin090)"};
+  background-color: ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityYin090)" : "transparent"};
+  display: flex;
+  flex-direction: row;
   ${_styledSystem.margin}
+
+  ${_portrait2.StyledPortraitContainer} {
+    flex-shrink: 0;
+  }
 `;
 exports.ProfileStyle = ProfileStyle;
 const ProfileDetailsStyle = _styledComponents.default.div`
   vertical-align: middle;
-  display: inline-block;
-  margin-top: ${({
-  hasSrc,
-  size = "M"
-}) => hasSrc ? _profile.default[size].marginTop : ""};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   line-height: ${({
   size = "M"
 }) => _profile.default[size].lineHeight};

package/package.json

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

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

@@ -1,16 +0,0 @@
-import React from "react";
-import { PortraitSizes, PortraitShapes } from "./portrait.component";
-export interface PortraitGravatarProps {
-    /** The user's email address for the Gravatar. */
-    gravatarEmail: string;
-    /** The size of the Gravatar. */
-    size: PortraitSizes;
-    /** The shape of the Gravatar. */
-    shape?: PortraitShapes;
-    /** The `alt` HTML string. */
-    alt?: string;
-    /** A callback to execute if the Gravatar image fails to load. */
-    errorCallback?: () => void;
-}
-declare const PortraitGravatar: ({ gravatarEmail, size, alt, shape, errorCallback, }: PortraitGravatarProps) => React.JSX.Element;
-export default PortraitGravatar;

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

@@ -1,33 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import MD5 from "crypto-js/md5";
-import { StyledPortraitGravatar } from "./portrait.style";
-import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
-const PortraitGravatar = ({
-  gravatarEmail,
-  size,
-  alt,
-  shape = "circle",
-  errorCallback
-}) => {
-  const gravatarSrc = () => {
-    const {
-      dimensions
-    } = PORTRAIT_SIZE_PARAMS[size];
-    const base = "https://www.gravatar.com/avatar/";
-    const hash = MD5(gravatarEmail.toLowerCase());
-    const fallbackOption = "404"; // "Return an HTTP 404 File Not Found response"
-
-    /** @see https://en.gravatar.com/site/implement/images/#default-image */
-    return `${base}${hash}?s=${dimensions}&d=${fallbackOption}`;
-  };
-  return /*#__PURE__*/React.createElement(StyledPortraitGravatar, {
-    src: gravatarSrc(),
-    alt: alt,
-    size: size,
-    shape: shape,
-    onError: errorCallback,
-    "data-element": "user-image"
-  });
-};
-export default PortraitGravatar;

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

@@ -1,16 +0,0 @@
-import React from "react";
-import { PortraitSizes, PortraitShapes } from "./portrait.component";
-export interface PortraitInitialsProps {
-    /** The user's initials to render. */
-    initials: string;
-    /** The size of the initials image. */
-    size: PortraitSizes;
-    /** Use a dark background. */
-    darkBackground?: boolean;
-    /** The shape of the Portrait. */
-    shape?: PortraitShapes;
-    /** The `alt` HTML string. */
-    alt?: string;
-}
-declare const PortraitInitials: ({ initials, size, shape, darkBackground, alt, }: PortraitInitialsProps) => React.JSX.Element;
-export default PortraitInitials;

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

@@ -1,67 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import tokens from "@sage/design-tokens/js/base/common";
-import { StyledPortraitInitials, StyledPortraitInitialsImg, getColorsForInitials } from "./portrait.style";
-import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
-const PortraitInitials = ({
-  initials,
-  size,
-  shape = "circle",
-  darkBackground,
-  alt
-}) => {
-  const [cachedImageDataUrl, setCachedImageDataUrl] = useState();
-  useEffect(() => {
-    setCachedImageDataUrl("");
-  }, [initials, size, darkBackground]);
-  const generateDataUrl = () => {
-    if (cachedImageDataUrl) {
-      return cachedImageDataUrl;
-    }
-    const {
-      textColor,
-      bgColor
-    } = getColorsForInitials(darkBackground);
-    let canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
-    let {
-      dimensions
-    } = PORTRAIT_SIZE_PARAMS[size];
-    dimensions -= 2;
-
-    // Set canvas with & height
-    canvas.width = dimensions;
-    canvas.height = dimensions;
-
-    // Select a font family to support different language characters like Arial
-    /* istanbul ignore else */
-    if (context) {
-      context.font = `${Math.round(canvas.width / 2.4)}px "Sage UI", Arial`;
-      context.textAlign = "center";
-
-      // Setup background and front color
-      context.fillStyle = tokens[bgColor];
-      context.fillRect(0, 0, dimensions, dimensions);
-      context.fillStyle = tokens[textColor];
-      context.fillText(initials.slice(0, 3).toUpperCase(), dimensions / 2, dimensions / 1.5);
-    }
-
-    // Set image representation in default format (png)
-    const dataURI = canvas.toDataURL();
-
-    // Dispose canvas element
-    canvas = null;
-    setCachedImageDataUrl(dataURI);
-    return dataURI;
-  };
-  return /*#__PURE__*/React.createElement(StyledPortraitInitials, {
-    "data-element": "initials",
-    size: size,
-    shape: shape,
-    initials: initials
-  }, /*#__PURE__*/React.createElement(StyledPortraitInitialsImg, {
-    src: generateDataUrl(),
-    alt: alt
-  }));
-};
-export default PortraitInitials;

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

@@ -1,16 +0,0 @@
-import React from "react";
-import { PortraitSizes, PortraitShapes } from "./portrait.component";
-export interface PortraitGravatarProps {
-    /** The user's email address for the Gravatar. */
-    gravatarEmail: string;
-    /** The size of the Gravatar. */
-    size: PortraitSizes;
-    /** The shape of the Gravatar. */
-    shape?: PortraitShapes;
-    /** The `alt` HTML string. */
-    alt?: string;
-    /** A callback to execute if the Gravatar image fails to load. */
-    errorCallback?: () => void;
-}
-declare const PortraitGravatar: ({ gravatarEmail, size, alt, shape, errorCallback, }: PortraitGravatarProps) => React.JSX.Element;
-export default PortraitGravatar;

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

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _md = _interopRequireDefault(require("crypto-js/md5"));
-var _portrait = require("./portrait.style");
-var _portrait2 = require("./portrait.config");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const PortraitGravatar = ({
-  gravatarEmail,
-  size,
-  alt,
-  shape = "circle",
-  errorCallback
-}) => {
-  const gravatarSrc = () => {
-    const {
-      dimensions
-    } = _portrait2.PORTRAIT_SIZE_PARAMS[size];
-    const base = "https://www.gravatar.com/avatar/";
-    const hash = (0, _md.default)(gravatarEmail.toLowerCase());
-    const fallbackOption = "404"; // "Return an HTTP 404 File Not Found response"
-
-    /** @see https://en.gravatar.com/site/implement/images/#default-image */
-    return `${base}${hash}?s=${dimensions}&d=${fallbackOption}`;
-  };
-  return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitGravatar, {
-    src: gravatarSrc(),
-    alt: alt,
-    size: size,
-    shape: shape,
-    onError: errorCallback,
-    "data-element": "user-image"
-  });
-};
-var _default = PortraitGravatar;
-exports.default = _default;

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

@@ -1,16 +0,0 @@
-import React from "react";
-import { PortraitSizes, PortraitShapes } from "./portrait.component";
-export interface PortraitInitialsProps {
-    /** The user's initials to render. */
-    initials: string;
-    /** The size of the initials image. */
-    size: PortraitSizes;
-    /** Use a dark background. */
-    darkBackground?: boolean;
-    /** The shape of the Portrait. */
-    shape?: PortraitShapes;
-    /** The `alt` HTML string. */
-    alt?: string;
-}
-declare const PortraitInitials: ({ initials, size, shape, darkBackground, alt, }: PortraitInitialsProps) => React.JSX.Element;
-export default PortraitInitials;

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

@@ -1,77 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
-var _portrait = require("./portrait.style");
-var _portrait2 = require("./portrait.config");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const PortraitInitials = ({
-  initials,
-  size,
-  shape = "circle",
-  darkBackground,
-  alt
-}) => {
-  const [cachedImageDataUrl, setCachedImageDataUrl] = (0, _react.useState)();
-  (0, _react.useEffect)(() => {
-    setCachedImageDataUrl("");
-  }, [initials, size, darkBackground]);
-  const generateDataUrl = () => {
-    if (cachedImageDataUrl) {
-      return cachedImageDataUrl;
-    }
-    const {
-      textColor,
-      bgColor
-    } = (0, _portrait.getColorsForInitials)(darkBackground);
-    let canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
-    let {
-      dimensions
-    } = _portrait2.PORTRAIT_SIZE_PARAMS[size];
-    dimensions -= 2;
-
-    // Set canvas with & height
-    canvas.width = dimensions;
-    canvas.height = dimensions;
-
-    // Select a font family to support different language characters like Arial
-    /* istanbul ignore else */
-    if (context) {
-      context.font = `${Math.round(canvas.width / 2.4)}px "Sage UI", Arial`;
-      context.textAlign = "center";
-
-      // Setup background and front color
-      context.fillStyle = _common.default[bgColor];
-      context.fillRect(0, 0, dimensions, dimensions);
-      context.fillStyle = _common.default[textColor];
-      context.fillText(initials.slice(0, 3).toUpperCase(), dimensions / 2, dimensions / 1.5);
-    }
-
-    // Set image representation in default format (png)
-    const dataURI = canvas.toDataURL();
-
-    // Dispose canvas element
-    canvas = null;
-    setCachedImageDataUrl(dataURI);
-    return dataURI;
-  };
-  return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitials, {
-    "data-element": "initials",
-    size: size,
-    shape: shape,
-    initials: initials
-  }, /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitialsImg, {
-    src: generateDataUrl(),
-    alt: alt
-  }));
-};
-var _default = PortraitInitials;
-exports.default = _default;