carbon-react 104.34.0 → 104.36.0

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+
+export type PortraitShapes = "circle" | "square";
+
+export type PortraitSizes = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
+
+export interface PortraitBaseProps {
+  /** The size of the Portrait. */
+  size?: PortraitSizes;
+  /** The `alt` HTML string. */
+  alt?: string;
+  /** The shape of the Portrait. */
+  shape?: PortraitShapes;
+  /** The initials to render in the Portrait. */
+  initials?: string;
+  /** Use a dark background. */
+  darkBackground?: boolean;
+  /** Prop for `onClick` events. */
+  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
+  /** The message to be displayed within the tooltip */
+  tooltipMessage?: React.ReactNode;
+  /** The id attribute to use for the tooltip */
+  tooltipId?: string;
+  /** Whether to to show the Tooltip */
+  tooltipIsVisible?: boolean;
+  /** Sets position of the tooltip */
+  tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Defines the message type */
+  tooltipType?: string;
+  /** Defines the size of the tooltip content */
+  tooltipSize?: "medium" | "large";
+  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  tooltipBgColor?: string;
+  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  tooltipFontColor?: string;
+}
+
+export interface PortraitWithGravatar extends PortraitBaseProps {
+  /** An email address registered with Gravatar. */
+  gravatar?: string;
+  src?: never;
+}
+
+export interface PortraitWithSrc extends PortraitBaseProps {
+  /** A custom image URL. */
+  src?: string;
+  gravatar?: never;
+}
+
+export type PortraitProps = PortraitWithGravatar | PortraitWithSrc;
+
+declare function Portrait(props: PortraitProps): JSX.Element;
+
+export default Portrait;

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

@@ -0,0 +1,10 @@
+export function getColorsForInitials(darkBackground: any): {
+    textColor: string;
+    bgColor: string;
+};
+export const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledPortraitInitialsImg: import("styled-components").StyledComponent<"img", any, {}, never>;
+export const StyledPortraitGravatar: import("styled-components").StyledComponent<"img", any, {}, never>;
+export const StyledCustomImg: import("styled-components").StyledComponent<"img", any, {}, never>;
+export const StyledIcon: import("styled-components").StyledComponent<({ size, darkBackground, ...rest }: any) => JSX.Element, any, {}, never>;
+export const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,151 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import { margin } from "styled-system";
+import BaseTheme from "../../style/themes/base";
+import Icon from "../icon";
+import { PORTRAIT_SHAPES, PORTRAIT_SIZES, PORTRAIT_SIZE_PARAMS } from "./portrait.config";
+
+function stylingForSize({
+  size
+}) {
+  const params = PORTRAIT_SIZE_PARAMS[size];
+
+  if (!params) {
+    return css``;
+  }
+
+  return css`
+    width: ${params.dimensions}px;
+    height: ${params.dimensions}px;
+  `;
+}
+
+function stylingForShape({
+  shape
+}) {
+  let cssString = "overflow: hidden;";
+  if (shape === "square") cssString += "border-radius: 0px;";
+  if (shape === "circle") cssString += "border-radius: 50%;";
+  return css`
+    ${cssString}
+  `;
+}
+
+function stylingForIcon({
+  size,
+  darkBackground
+}) {
+  const params = PORTRAIT_SIZE_PARAMS[size];
+
+  if (!params) {
+    return css``;
+  }
+
+  let color = "var(--colorsUtilityMajor200)";
+  let backgroundColor = "var(--colorsUtilityMajor025)";
+
+  if (darkBackground) {
+    color = "var(--colorsUtilityMajor025)";
+    backgroundColor = "var(--colorsUtilityMajor200)";
+  }
+
+  return css`
+    background-color: ${backgroundColor};
+    color: ${color};
+
+    ::before {
+      font-size: ${params.iconDimensions}px;
+    }
+  `;
+}
+
+export function getColorsForInitials(darkBackground) {
+  return {
+    textColor: darkBackground ? "colorsUtilityYang100" : "colorsUtilityYin055",
+    bgColor: darkBackground ? "colorsUtilityMajor400" : "colorsUtilityMajor025"
+  };
+}
+export const StyledPortraitInitials = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  ${stylingForSize}
+  ${stylingForShape}
+  border: 1px solid var(--colorsUtilityMajor200);
+`;
+StyledPortraitInitials.propTypes = {
+  size: PropTypes.oneOf(PORTRAIT_SIZES).isRequired,
+  shape: PropTypes.oneOf(PORTRAIT_SHAPES)
+};
+StyledPortraitInitials.defaultProps = {
+  shape: "square"
+};
+export const StyledPortraitInitialsImg = styled.img`
+  display: block;
+`;
+StyledPortraitInitialsImg.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string
+};
+export const StyledPortraitGravatar = styled.img`
+  display: inline-block;
+  vertical-align: middle;
+  ${stylingForSize}
+  ${stylingForShape}
+`;
+StyledPortraitGravatar.propTypes = {
+  shape: PropTypes.oneOf(PORTRAIT_SHAPES),
+  size: PropTypes.oneOf(PORTRAIT_SIZES).isRequired,
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string
+};
+export const StyledCustomImg = styled.img`
+  display: block;
+  ${stylingForSize}
+  ${stylingForShape}
+`;
+StyledCustomImg.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+  shape: PropTypes.oneOf(PORTRAIT_SHAPES),
+  size: PropTypes.oneOf(PORTRAIT_SIZES).isRequired
+}; // && is used here to increase the specificity
+
+export const StyledIcon = styled(({
+  size,
+  darkBackground,
+  ...rest
+}) => /*#__PURE__*/React.createElement(Icon, rest))`
+  && {
+    box-sizing: border-box;
+    line-height: 14px;
+    ${stylingForSize}
+    ${stylingForIcon}
+    ${stylingForShape}
+    border: 1px dashed ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityMajorTransparent)" : "var(--colorsUtilityMajor200)"};
+  }
+`;
+StyledIcon.propTypes = {
+  darkBackground: PropTypes.bool,
+  size: PropTypes.oneOf(PORTRAIT_SIZES),
+  shape: PropTypes.oneOf(PORTRAIT_SHAPES),
+  type: PropTypes.string.isRequired
+};
+StyledIcon.defaultProps = {
+  darkBackground: false,
+  size: "M",
+  shape: "square"
+};
+export const StyledPortraitContainer = styled.div`
+  display: inline-block;
+  ${({
+  onClick
+}) => onClick && "cursor: pointer"}
+  ${margin}
+`;
+StyledPortraitContainer.defaultProps = {
+  theme: BaseTheme
+};

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

@@ -0,0 +1 @@
+export { default } from "./preview";

package/esm/components/preview/index.js

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

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

@@ -0,0 +1,16 @@
+export default Preview;
+declare function Preview(props: any): JSX.Element;
+declare namespace Preview {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const height: PropTypes.Requireable<string>;
+        const lines: PropTypes.Requireable<number>;
+        const loading: PropTypes.Requireable<boolean>;
+        const width: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        const lines_1: number;
+        export { lines_1 as lines };
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/preview/preview.component.js

@@ -0,0 +1,77 @@
+function _extends() { _extends = Object.assign || 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 styledSystemPropTypes from "@styled-system/prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import PreviewStyle, { StyledPreview } from "./preview.style";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const Preview = props => {
+  const marginProps = filterStyledSystemMarginProps(props);
+
+  if (isLoading(props.loading, props.children)) {
+    const previews = [];
+
+    for (let i = 1; i <= props.lines; i++) {
+      previews.push(createPreview(props, i));
+    }
+
+    return /*#__PURE__*/React.createElement(StyledPreview, marginProps, previews);
+  }
+
+  return /*#__PURE__*/React.createElement(StyledPreview, marginProps, props.children);
+};
+
+function isLoading(loading, children) {
+  if (typeof loading !== "undefined") {
+    return loading;
+  }
+
+  return !children;
+}
+
+function createPreview(allProps, index) {
+  const {
+    height,
+    lines
+  } = allProps;
+  let {
+    width
+  } = allProps;
+
+  if (!width && lines > 1 && lines === index) {
+    width = "80%";
+  }
+
+  return /*#__PURE__*/React.createElement(PreviewStyle, _extends({
+    key: index,
+    style: {
+      height,
+      width
+    }
+  }, tagComponent("preview", allProps)));
+}
+
+Preview.propTypes = { ...marginPropTypes,
+
+  /** Children content to render in the component. */
+  children: PropTypes.node,
+
+  /** A custom height to be applied to the component. */
+  height: PropTypes.string,
+
+  /** The number of lines to render. */
+  lines: PropTypes.number,
+
+  /* Provides more control over when in a loading state. */
+  loading: PropTypes.bool,
+
+  /** A custom width */
+  width: PropTypes.string
+};
+Preview.defaultProps = {
+  lines: 1
+};
+export default Preview;

package/esm/components/preview/preview.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { MarginProps } from "styled-system";
+
+export interface PreviewProps extends MarginProps {
+  /** A custom height to be applied to the component. */
+  height?: string;
+  /** The number of lines to render. */
+  lines?: number;
+  /* Provides more control over when in a loading state. */
+  loading?: boolean;
+  /** A custom width */
+  width?: string;
+}
+
+declare function Preview(
+  props: React.PropsWithChildren<PreviewProps>
+): JSX.Element;
+
+export default Preview;

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

@@ -0,0 +1,3 @@
+export const StyledPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default PreviewStyle;
+declare const PreviewStyle: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/preview/preview.style.js

@@ -0,0 +1,32 @@
+import styled, { keyframes } from "styled-components";
+import { margin } from "styled-system";
+import baseTheme from "../../style/themes/base";
+const shimmer = keyframes`
+  0% { opacity:0.1 }
+  70% { opacity:0.6 }
+  100% { opacity:0.1 }
+`;
+const PreviewStyle = styled.span`
+  animation: ${shimmer} 2s ease infinite;
+  background: ${({
+  theme
+}) => theme.colors.previewBackground};
+  display: block;
+  height: 15px;
+  opacity: 0.6;
+  width: 100%;
+
+  & + & {
+    margin-top: 3px;
+  }
+`;
+export const StyledPreview = styled.div`
+  ${margin}
+`;
+StyledPreview.defaultProps = {
+  theme: baseTheme
+};
+PreviewStyle.defaultProps = {
+  theme: baseTheme
+};
+export default PreviewStyle;

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

@@ -0,0 +1 @@
+export { default } from "./profile";

package/esm/components/profile/index.js

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

package/esm/components/profile/profile-test.stories.js

@@ -0,0 +1,55 @@
+function _extends() { _extends = Object.assign || 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); }
+
+/* eslint-disable react/prop-types */
+import React from "react";
+import specialCharacters, { email as testEmail } from "../../../.storybook/utils/argTypes/specialCharacters";
+import Profile from "./profile.component";
+import { PROFILE_SIZES } from "./profile.config";
+export default {
+  title: "Profile/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+        options: PROFILE_SIZES
+      }
+    },
+    emailSpecialCharacters: {
+      options: [...specialCharacters.options, ...testEmail.options],
+      mapping: { ...specialCharacters.mapping,
+        ...testEmail.mapping
+      }
+    },
+    nameSpecialCharacters: specialCharacters
+  }
+};
+export const DefaultStory = ({
+  email,
+  emailSpecialCharacters,
+  name,
+  nameSpecialCharacters,
+  ...args
+}) => /*#__PURE__*/React.createElement(Profile, _extends({
+  email: email || emailSpecialCharacters,
+  name: name || nameSpecialCharacters
+}, args));
+DefaultStory.story = {
+  name: "default",
+  args: {
+    email: "johnsmith@sage.com",
+    initials: "JS",
+    size: PROFILE_SIZES[0],
+    name: "John Smith",
+    src: "",
+    emailSpecialCharacters: undefined,
+    nameSpecialCharacters: undefined
+  }
+};

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

@@ -0,0 +1,21 @@
+export default Profile;
+declare function Profile({ src, className, initials, name, size, email, ...props }: {
+    [x: string]: any;
+    src: any;
+    className: any;
+    initials: any;
+    name: any;
+    size: any;
+    email: any;
+}): JSX.Element;
+declare namespace Profile {
+    namespace propTypes {
+        const className: PropTypes.Requireable<string>;
+        const src: PropTypes.Requireable<string>;
+        const name: PropTypes.Validator<string>;
+        const email: PropTypes.Validator<string>;
+        const initials: PropTypes.Requireable<string>;
+        const size: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

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

@@ -0,0 +1,90 @@
+function _extends() { _extends = Object.assign || 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 styledSystemPropTypes from "@styled-system/prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle } from "./profile.style";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+function acronymize(str) {
+  if (!str) return "";
+  const matches = str.match(/\b\w/g);
+  if (!matches) return "";
+  return matches.join("");
+}
+
+const Profile = ({
+  src,
+  className,
+  initials,
+  name,
+  size,
+  email,
+  ...props
+}) => {
+  const getInitials = () => {
+    if (initials) return initials;
+    return acronymize(name);
+  };
+
+  const avatar = () => {
+    if (src) {
+      return /*#__PURE__*/React.createElement(ProfileAvatarStyle, {
+        src: src,
+        alt: getInitials(),
+        initials: getInitials(),
+        size: size,
+        shape: "square",
+        "data-element": "user-image"
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(ProfileAvatarStyle, {
+      initials: getInitials(),
+      gravatar: email,
+      size: size
+    });
+  };
+
+  const text = () => {
+    return /*#__PURE__*/React.createElement(ProfileDetailsStyle, {
+      size: size,
+      hasSrc: !!src
+    }, /*#__PURE__*/React.createElement(ProfileNameStyle, {
+      size: size,
+      "data-element": "name"
+    }, name), /*#__PURE__*/React.createElement(ProfileEmailStyle, {
+      size: size,
+      "data-element": "email"
+    }, email));
+  };
+
+  return /*#__PURE__*/React.createElement(ProfileStyle, _extends({
+    className: className,
+    hasSrc: !!src
+  }, tagComponent("profile", props), filterStyledSystemMarginProps(props)), avatar(), text());
+};
+
+Profile.propTypes = { ...marginPropTypes,
+
+  /** [Legacy] A custom class name for the component */
+  className: PropTypes.string,
+
+  /** Custom source URL */
+  src: PropTypes.string,
+
+  /** Define the name to display. */
+  name: PropTypes.string.isRequired,
+
+  /** Define the email to use (will check Gravatar for image). */
+  email: PropTypes.string.isRequired,
+
+  /** Define initials to display if there is no Gravatar image. */
+  initials: PropTypes.string,
+
+  /** Allow to setup size for the component */
+  size: PropTypes.oneOf(["XS", "S", "M", "ML", "L", "XL", "XXL"])
+};
+export default Profile;

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

@@ -0,0 +1,83 @@
+export const PROFILE_SIZES: string[];
+declare namespace _default {
+    namespace XS {
+        const nameSize: string;
+        const emailSize: string;
+        const lineHeight: string;
+        const marginLeft: string;
+        const marginTop: string;
+    }
+    namespace S {
+        const nameSize_1: string;
+        export { nameSize_1 as nameSize };
+        const emailSize_1: string;
+        export { emailSize_1 as emailSize };
+        const lineHeight_1: string;
+        export { lineHeight_1 as lineHeight };
+        const marginLeft_1: string;
+        export { marginLeft_1 as marginLeft };
+        const marginTop_1: string;
+        export { marginTop_1 as marginTop };
+    }
+    namespace M {
+        const nameSize_2: string;
+        export { nameSize_2 as nameSize };
+        const emailSize_2: string;
+        export { emailSize_2 as emailSize };
+        const lineHeight_2: string;
+        export { lineHeight_2 as lineHeight };
+        const marginLeft_2: string;
+        export { marginLeft_2 as marginLeft };
+        const marginTop_2: string;
+        export { marginTop_2 as marginTop };
+    }
+    namespace ML {
+        const nameSize_3: string;
+        export { nameSize_3 as nameSize };
+        const emailSize_3: string;
+        export { emailSize_3 as emailSize };
+        const lineHeight_3: string;
+        export { lineHeight_3 as lineHeight };
+        const marginLeft_3: string;
+        export { marginLeft_3 as marginLeft };
+        const marginTop_3: string;
+        export { marginTop_3 as marginTop };
+    }
+    namespace L {
+        const nameSize_4: string;
+        export { nameSize_4 as nameSize };
+        const emailSize_4: string;
+        export { emailSize_4 as emailSize };
+        const lineHeight_4: string;
+        export { lineHeight_4 as lineHeight };
+        const marginLeft_4: string;
+        export { marginLeft_4 as marginLeft };
+        const marginTop_4: string;
+        export { marginTop_4 as marginTop };
+    }
+    namespace XL {
+        const nameSize_5: string;
+        export { nameSize_5 as nameSize };
+        const emailSize_5: string;
+        export { emailSize_5 as emailSize };
+        const lineHeight_5: string;
+        export { lineHeight_5 as lineHeight };
+        const marginLeft_5: string;
+        export { marginLeft_5 as marginLeft };
+        const marginTop_5: string;
+        export { marginTop_5 as marginTop };
+    }
+    namespace XXL {
+        const nameSize_6: string;
+        export { nameSize_6 as nameSize };
+        const emailSize_6: string;
+        export { emailSize_6 as emailSize };
+        const lineHeight_6: string;
+        export { lineHeight_6 as lineHeight };
+        const marginLeft_6: string;
+        export { marginLeft_6 as marginLeft };
+        const marginTop_6: string;
+        export { marginTop_6 as marginTop };
+    }
+}
+export default _default;

package/esm/components/profile/profile.config.js

@@ -0,0 +1,52 @@
+export const PROFILE_SIZES = ["XS", "S", "M", "ML", "L", "XL", "XXL"];
+export default {
+  XS: {
+    nameSize: "var(--fontSizes050)",
+    emailSize: "var(--fontSizes025)",
+    lineHeight: "12px",
+    marginLeft: "16px",
+    marginTop: "1px"
+  },
+  S: {
+    nameSize: "var(--fontSizes100)",
+    emailSize: "var(--fontSizes100)",
+    lineHeight: "16px",
+    marginLeft: "16px",
+    marginTop: "1px"
+  },
+  M: {
+    nameSize: "var(--fontSizes100)",
+    emailSize: "var(--fontSizes100)",
+    lineHeight: "16px",
+    marginLeft: "16px",
+    marginTop: "4px"
+  },
+  ML: {
+    nameSize: "var(--fontSizes200)",
+    emailSize: "var(--fontSizes100)",
+    lineHeight: "20px",
+    marginLeft: "24px",
+    marginTop: "8px"
+  },
+  L: {
+    nameSize: "var(--fontSizes400)",
+    emailSize: "var(--fontSizes100)",
+    lineHeight: "22px",
+    marginLeft: "24px",
+    marginTop: "14px"
+  },
+  XL: {
+    nameSize: "var(--fontSizes600)",
+    emailSize: "var(--fontSizes300)",
+    lineHeight: "26px",
+    marginLeft: "32px",
+    marginTop: "24px"
+  },
+  XXL: {
+    nameSize: "var(--fontSizes700)",
+    emailSize: "var(--fontSizes600)",
+    lineHeight: "30px",
+    marginLeft: "40px",
+    marginTop: "32px"
+  }
+};