carbon-react 104.34.1 → 104.37.0

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

@@ -0,0 +1,18 @@
+export interface ProfileProps {
+  /** [Legacy] A custom class name for the component */
+  className?: string;
+  /** Custom source URL */
+  src?: string;
+  /** Define the name to display. */
+  name: string;
+  /** Define the email to use (will check Gravatar for image). */
+  email: string;
+  /** Define initials to display if there is no Gravatar image. */
+  initials?: string;
+  /** Allow to setup size for the component */
+  size?: "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
+}
+
+declare function Profile(props: ProfileProps): JSX.Element;
+
+export default Profile;

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

@@ -0,0 +1,6 @@
+export const ProfileStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const ProfileNameStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+export const ProfileDetailsStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const ProfileAvatarStyle: import("styled-components").StyledComponent<typeof Portrait, any, {}, never>;
+export const ProfileEmailStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+import Portrait from "../portrait";

package/esm/components/profile/profile.style.js

@@ -0,0 +1,56 @@
+import styled from "styled-components";
+import { margin } from "styled-system";
+import Portrait from "../portrait";
+import baseTheme from "../../style/themes/base";
+import profileConfigSizes from "./profile.config";
+const ProfileNameStyle = styled.span`
+  font-weight: bold;
+  display: block;
+  font-size: ${({
+  size
+}) => profileConfigSizes[size].nameSize};
+`;
+const ProfileEmailStyle = styled.span`
+  font-size: ${({
+  size
+}) => profileConfigSizes[size].emailSize};
+`;
+const ProfileStyle = styled.div`
+  white-space: nowrap;
+  color: var(--colorsUtilityYin090);
+  display: ${({
+  hasSrc
+}) => hasSrc ? "flex" : ""};
+
+  ${margin}
+`;
+const ProfileDetailsStyle = styled.div`
+  vertical-align: middle;
+  display: inline-block;
+  margin-top: ${({
+  hasSrc,
+  size
+}) => hasSrc ? profileConfigSizes[size].marginTop : ""};
+  line-height: ${({
+  size
+}) => profileConfigSizes[size].lineHeight};
+  margin-left: ${({
+  size
+}) => profileConfigSizes[size].marginLeft};
+`;
+const ProfileAvatarStyle = styled(Portrait)`
+  display: inline-block;
+`;
+ProfileStyle.defaultProps = {
+  theme: baseTheme
+};
+ProfileNameStyle.defaultProps = {
+  size: "M"
+};
+ProfileEmailStyle.defaultProps = {
+  size: "M"
+};
+ProfileDetailsStyle.defaultProps = {
+  size: "M"
+};
+export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle };

package/esm/components/progress-tracker/index.d.ts

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

package/esm/components/progress-tracker/index.js

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

package/esm/components/progress-tracker/progress-tracker-test.stories.js

@@ -0,0 +1,63 @@
+import React from "react";
+import ProgressTracker from ".";
+import { PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";
+export default {
+  component: ProgressTracker,
+  title: "Progress Tracker/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  },
+  argTypes: {
+    size: {
+      options: PROGRESS_TRACKER_SIZES,
+      control: {
+        type: "select"
+      }
+    },
+    progress: {
+      control: {
+        type: "number"
+      }
+    },
+    currentProgressLabel: {
+      options: ["", "$100", "100ml"],
+      control: {
+        type: "select"
+      }
+    },
+    maxProgressLabel: {
+      options: ["", "$200", "200ml"],
+      control: {
+        type: "select"
+      }
+    },
+    orientation: {
+      options: ["horizontal", "vertical"],
+      control: {
+        type: "select"
+      }
+    },
+    direction: {
+      options: ["up", "down"],
+      control: {
+        type: "select"
+      }
+    },
+    labelsPosition: {
+      options: ["top", "bottom", "left", "right"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+export const Default = ({ ...args
+}) => {
+  return /*#__PURE__*/React.createElement(ProgressTracker, args);
+};
+Default.storyName = "default";

package/esm/components/progress-tracker/progress-tracker.component.d.ts

@@ -0,0 +1,56 @@
+export default ProgressTracker;
+declare function ProgressTracker({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, progress, showDefaultLabels, currentProgressLabel, maxProgressLabel, orientation, direction, labelsPosition, ...rest }: {
+    [x: string]: any;
+    "aria-label"?: string | undefined;
+    "aria-describedby": any;
+    "aria-valuenow": any;
+    "aria-valuemin": any;
+    "aria-valuemax": any;
+    "aria-valuetext": any;
+    size?: string | undefined;
+    progress?: number | undefined;
+    showDefaultLabels?: boolean | undefined;
+    currentProgressLabel: any;
+    maxProgressLabel: any;
+    orientation?: string | undefined;
+    direction?: string | undefined;
+    labelsPosition: any;
+}): JSX.Element;
+declare namespace ProgressTracker {
+    const propTypes: {
+        /** Specifies an aria label to the component */
+        "aria-label": PropTypes.Requireable<string>;
+        /** Specifies the aria describedby for the component */
+        "aria-describedby": PropTypes.Requireable<string>;
+        /** The value of progress to be read out to the user. */
+        "aria-valuenow": PropTypes.Requireable<number>;
+        /** The minimum value of the progress tracker */
+        "aria-valuemin": PropTypes.Requireable<number>;
+        /** The maximum value of the progress tracker */
+        "aria-valuemax": PropTypes.Requireable<number>;
+        /** Prop to define the human readable text alternative of aria-valuenow
+         * if aria-valuenow is not a number
+         */
+        "aria-valuetext": PropTypes.Requireable<string>;
+        /** Size of the progress bar. */
+        size: PropTypes.Requireable<string>;
+        /** Current progress (percentage). */
+        progress: PropTypes.Requireable<number>;
+        /** Flag to control whether the default value labels (as percentages) should be rendered. */
+        showDefaultLabels: PropTypes.Requireable<boolean>;
+        /** Value to display as current progress. */
+        currentProgressLabel: PropTypes.Requireable<string>;
+        /** Value to display as the maximum progress limit. */
+        maxProgressLabel: PropTypes.Requireable<string>;
+        /** The orientation of the component. */
+        orientation: PropTypes.Requireable<string>;
+        /** The direction the bar should move as progress increases, only applies in vertical orientation. */
+        direction: PropTypes.Requireable<string>;
+        /**
+         * The position the value label are rendered in.
+         * Top/bottom apply to horizontal and left/right to vertical orientation.
+         */
+        labelsPosition: PropTypes.Requireable<string>;
+    };
+}
+import PropTypes from "prop-types";

package/esm/components/progress-tracker/progress-tracker.component.js

@@ -0,0 +1,125 @@
+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";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue } from "./progress-tracker.style";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const ProgressTracker = ({
+  "aria-label": ariaLabel = "progress tracker",
+  "aria-describedby": ariaDescribedBy,
+  "aria-valuenow": ariaValueNow,
+  "aria-valuemin": ariaValueMin,
+  "aria-valuemax": ariaValueMax,
+  "aria-valuetext": ariaValueText,
+  size = "medium",
+  progress = 0,
+  showDefaultLabels = false,
+  currentProgressLabel,
+  maxProgressLabel,
+  orientation = "horizontal",
+  direction = "up",
+  labelsPosition,
+  ...rest
+}) => {
+  const isVertical = orientation === "vertical";
+  const prefixLabels = !isVertical && labelsPosition !== "bottom" || isVertical && labelsPosition === "left";
+
+  const renderValueLabels = () => {
+    if (!showDefaultLabels && !currentProgressLabel && !maxProgressLabel) {
+      return null;
+    }
+
+    const label = (value, defaultValue) => {
+      if (value) {
+        return value;
+      }
+
+      return showDefaultLabels ? defaultValue : undefined;
+    };
+
+    return /*#__PURE__*/React.createElement(StyledValuesLabel, {
+      position: labelsPosition,
+      isVertical: isVertical
+    }, isVertical && direction === "up" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledValue, {
+      isMaxValue: true
+    }, label(maxProgressLabel, "100%")), /*#__PURE__*/React.createElement(StyledValue, null, label(currentProgressLabel, `${progress}%`))), (direction === "down" || !isVertical) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledValue, null, label(currentProgressLabel, `${progress}%`)), /*#__PURE__*/React.createElement(StyledValue, {
+      isMaxValue: true
+    }, label(maxProgressLabel, "100%"))));
+  };
+
+  return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
+    size: size,
+    isVertical: isVertical
+  }, rest, tagComponent("progress-bar", rest), {
+    role: "progressbar",
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-valuenow": ariaValueNow,
+    "aria-valuemin": ariaValueMin,
+    "aria-valuemax": ariaValueMax,
+    "aria-valuetext": ariaValueText
+  }), prefixLabels && renderValueLabels(), /*#__PURE__*/React.createElement(StyledProgressBar, {
+    direction: isVertical ? direction : undefined,
+    isVertical: isVertical,
+    size: size
+  }, /*#__PURE__*/React.createElement(InnerBar, {
+    isVertical: isVertical,
+    size: size,
+    progress: progress
+  })), !prefixLabels && renderValueLabels());
+};
+
+ProgressTracker.propTypes = { ...marginPropTypes,
+
+  /** Specifies an aria label to the component */
+  "aria-label": PropTypes.string,
+
+  /** Specifies the aria describedby for the component */
+  "aria-describedby": PropTypes.string,
+
+  /** The value of progress to be read out to the user. */
+  "aria-valuenow": PropTypes.number,
+
+  /** The minimum value of the progress tracker */
+  "aria-valuemin": PropTypes.number,
+
+  /** The maximum value of the progress tracker */
+  "aria-valuemax": PropTypes.number,
+
+  /** Prop to define the human readable text alternative of aria-valuenow
+   * if aria-valuenow is not a number
+   */
+  "aria-valuetext": PropTypes.string,
+
+  /** Size of the progress bar. */
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+
+  /** Current progress (percentage). */
+  progress: PropTypes.number,
+
+  /** Flag to control whether the default value labels (as percentages) should be rendered. */
+  showDefaultLabels: PropTypes.bool,
+
+  /** Value to display as current progress. */
+  currentProgressLabel: PropTypes.string,
+
+  /** Value to display as the maximum progress limit. */
+  maxProgressLabel: PropTypes.string,
+
+  /** The orientation of the component. */
+  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+
+  /** The direction the bar should move as progress increases, only applies in vertical orientation. */
+  direction: PropTypes.oneOf(["up", "down"]),
+
+  /**
+   * The position the value label are rendered in.
+   * Top/bottom apply to horizontal and left/right to vertical orientation.
+   */
+  labelsPosition: PropTypes.oneOf(["top", "bottom", "left", "right"])
+};
+export default ProgressTracker;

package/esm/components/progress-tracker/progress-tracker.config.d.ts

@@ -0,0 +1,2 @@
+export const OUTER_TRACKER_LENGTH: "256px";
+export const PROGRESS_TRACKER_SIZES: string[];

package/esm/components/progress-tracker/progress-tracker.config.js

@@ -0,0 +1,2 @@
+export const OUTER_TRACKER_LENGTH = "256px";
+export const PROGRESS_TRACKER_SIZES = ["small", "medium", "large"];

package/esm/components/progress-tracker/progress-tracker.d.ts

@@ -0,0 +1,40 @@
+import { MarginProps } from "styled-system";
+
+export interface ProgressBarProps extends MarginProps {
+  /** Specifies an aria-label to the component */
+  "aria-label"?: string;
+  /** Specifies the aria-describedby for the component */
+  "aria-describedby"?: string;
+  /** The value of progress to be read out to the user. */
+  "aria-valuenow"?: number;
+  /** The minimum value of the progress tracker */
+  "aria-valuemin"?: number;
+  /** The maximum value of the progress tracker */
+  "aria-valueMax"?: number;
+  /** Prop to define the human readable text alternative of aria-valuenow
+   * if aria-valuenow is not a number */
+  "aria-valuetext"?: string;
+  /** Size of the progressBar. */
+  size?: "small" | "medium" | "large";
+  /** Current progress (percentage). */
+  progress?: number;
+  /** Flag to control whether the default value labels (as percentages) should be rendered. */
+  showDefaultLabels?: boolean;
+  /** Value to display as current progress. */
+  currentProgressLabel?: string;
+  /** Value to display as the maximum progress limit. */
+  maxProgressLabel?: string;
+  /** The orientation of the component. */
+  orientation?: "horizontal" | "vertical";
+  /** The direction the bar should move as progress increases, only applies in vertical orientation. */
+  direction?: "up" | "down";
+  /**
+   * The position the value label are rendered in.
+   * Top/bottom apply to horizontal and left/right to vertical orientation.
+   */
+  labelsPosition?: "top" | "bottom" | "left" | "right";
+}
+
+declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+
+export default ProgressBar;

package/esm/components/progress-tracker/progress-tracker.style.d.ts

@@ -0,0 +1,5 @@
+export const StyledProgressBar: import("styled-components").StyledComponent<"span", any, {}, never>;
+export const InnerBar: import("styled-components").StyledComponent<"span", any, {}, never>;
+export const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -0,0 +1,165 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import { margin } from "styled-system";
+import baseTheme from "../../style/themes/base";
+import { OUTER_TRACKER_LENGTH, PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";
+const StyledProgressTracker = styled.div`
+  ${margin}
+  text-align: center;
+  white-space: nowrap;
+
+  ${({
+  isVertical
+}) => css`
+    ${!isVertical && `
+      width: ${OUTER_TRACKER_LENGTH};
+    `}
+    ${isVertical && `
+      height: ${OUTER_TRACKER_LENGTH};
+      display: flex;
+    `}
+  `}
+`;
+const StyledProgressBar = styled.span`
+  ${({
+  direction,
+  isVertical,
+  size
+}) => css`
+    display: flex;
+    position: relative;
+    background-color: var(--colorsSemanticNeutral200);
+
+    ${!isVertical && css`
+      overflow-x: hidden;
+      height: ${getHeight(size)};
+      width: 100%;
+    `}
+    ${isVertical && css`
+      overflow-y: hidden;
+      width: ${getHeight(size)};
+      height: 100%;
+
+      ${direction === "up" && `
+        align-items: flex-end;
+      `}
+    `}
+  `}
+`;
+const StyledValue = styled.span`
+  color: var(--colorsUtilityYin090);
+  ${({
+  isMaxValue
+}) => css`
+    ${isMaxValue && `color: var(--colorsUtilityYin055);`}
+    ${!isMaxValue && `font-weight: bold;`}
+  `}
+`;
+const StyledValuesLabel = styled.span`
+  text-align: start;
+  display: flex;
+  justify-content: space-between;
+  ${({
+  isVertical,
+  position
+}) => css`
+    ${isVertical && css`
+      flex-direction: column;
+
+      ${position !== "left" && css`
+        padding-left: 4px;
+      `}
+
+      ${position === "left" && css`
+        padding-right: 4px;
+
+        ${StyledValue} {
+          text-align: right;
+        }
+      `}
+    `}
+
+    ${!isVertical && css`
+      ${position !== "bottom" && css`
+        padding-bottom: 4px;
+      `}
+
+      ${position === "bottom" && css`
+        padding-top: 4px;
+      `}
+    `}
+  `}
+`;
+const InnerBar = styled.span`
+  ${({
+  isVertical,
+  progress,
+  size
+}) => css`
+    position: absolute;
+    left: 0;
+    background-color: ${getInnerBarColour(progress)};
+
+    ${!isVertical && css`
+      width: calc(${OUTER_TRACKER_LENGTH} * ${progress / 100});
+      min-width: 2px;
+      height: ${getHeight(size)};
+    `}
+    ${isVertical && css`
+      height: calc(${OUTER_TRACKER_LENGTH} * ${progress / 100});
+      min-height: 2px;
+      width: ${getHeight(size)};
+    `}
+  `}
+`;
+
+function getHeight(size) {
+  switch (size) {
+    case "small":
+      return "var(--sizing050)";
+
+    case "large":
+      return "var(--sizing200)";
+
+    default:
+      return "var(--sizing100)";
+  }
+}
+
+function getInnerBarColour(progress) {
+  if (progress >= 100) return "var(--colorsSemanticPositive500)";
+  return "var(--colorsSemanticNeutral500)";
+}
+
+StyledProgressTracker.defaultProps = {
+  theme: baseTheme
+};
+StyledProgressBar.defaultProps = {
+  size: "medium"
+};
+InnerBar.defaultProps = {
+  progress: 0,
+  size: "medium"
+};
+InnerBar.propTypes = {
+  size: PropTypes.oneOf(PROGRESS_TRACKER_SIZES),
+  progress: PropTypes.number,
+  isVertical: PropTypes.bool
+};
+StyledProgressTracker.propTypes = {
+  theme: PropTypes.object,
+  isVertical: PropTypes.bool
+};
+StyledValuesLabel.propTypes = {
+  isVertical: PropTypes.bool,
+  position: PropTypes.oneOf(["top", "bottom", "left", "right"])
+};
+StyledValue.propTypes = {
+  isMaxValue: PropTypes.bool
+};
+StyledProgressBar.propTypes = {
+  direction: PropTypes.oneOf(["up", "down"]),
+  isVertical: PropTypes.bool,
+  size: PropTypes.oneOf(PROGRESS_TRACKER_SIZES)
+};
+export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue };

package/esm/components/radio-button/index.d.ts

@@ -0,0 +1,6 @@
+export {
+  default,
+  default as RadioButton,
+  PrivateRadioButton,
+} from "./radio-button";
+export { default as RadioButtonGroup } from "./radio-button-group";

package/esm/components/radio-button/index.js

@@ -0,0 +1,4 @@
+import RadioButton, { PrivateRadioButton } from "./radio-button.component";
+import RadioButtonGroup from "./radio-button-group.component";
+export { RadioButton, RadioButtonGroup, PrivateRadioButton };
+export default RadioButton;

package/esm/components/radio-button/radio-button-group.component.d.ts

@@ -0,0 +1,26 @@
+export default RadioButtonGroup;
+declare function RadioButtonGroup(props: any): JSX.Element;
+declare namespace RadioButtonGroup {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const name: PropTypes.Validator<string>;
+        const legend: PropTypes.Requireable<string>;
+        const error: PropTypes.Requireable<string | boolean>;
+        const warning: PropTypes.Requireable<string | boolean>;
+        const info: PropTypes.Requireable<string | boolean>;
+        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        const value: PropTypes.Requireable<string>;
+        const inline: PropTypes.Requireable<boolean>;
+        const legendInline: PropTypes.Requireable<boolean>;
+        const legendWidth: PropTypes.Requireable<number>;
+        const legendAlign: PropTypes.Requireable<string>;
+        const legendSpacing: PropTypes.Requireable<number>;
+        const labelSpacing: PropTypes.Requireable<number>;
+        const adaptiveLegendBreakpoint: PropTypes.Requireable<number>;
+        const adaptiveSpacingBreakpoint: PropTypes.Requireable<number>;
+        const required: PropTypes.Requireable<boolean>;
+        const tooltipPosition: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";