carbon-react 104.34.1 → 104.35.0

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.js

@@ -0,0 +1,71 @@
+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 PropTypes from "prop-types";
+import React from "react";
+import StepSequenceItemStyle from "./step-sequence-item.style";
+import StepSequenceItemContentStyle from "./step-sequence-item-content.style";
+import StepSequenceItemIndicatorStyle from "./step-sequence-item-indicator.style";
+import StepSequenceItemHiddenLabelStyle from "./step-sequence-item-hidden-label.style";
+import Icon from "../../icon";
+
+const StepSequenceItem = props => {
+  const indicatorText = () => {
+    return !props.hideIndicator ? /*#__PURE__*/React.createElement(StepSequenceItemIndicatorStyle, null, props.indicator) : null;
+  };
+
+  const icon = () => props.status === "complete" ? /*#__PURE__*/React.createElement(Icon, {
+    type: "tick"
+  }) : indicatorText();
+
+  const hiddenLabel = () => {
+    const {
+      status,
+      hiddenCompleteLabel,
+      hiddenCurrentLabel
+    } = props;
+
+    if (hiddenCompleteLabel && status === "complete") {
+      return /*#__PURE__*/React.createElement(StepSequenceItemHiddenLabelStyle, null, hiddenCompleteLabel);
+    }
+
+    if (hiddenCurrentLabel && status === "current") {
+      return /*#__PURE__*/React.createElement(StepSequenceItemHiddenLabelStyle, null, hiddenCurrentLabel);
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/React.createElement(StepSequenceItemStyle, _extends({
+    "data-component": "step-sequence-item"
+  }, props, {
+    key: `step-seq-item-${props.indicator}`
+  }), hiddenLabel(), /*#__PURE__*/React.createElement(StepSequenceItemContentStyle, null, icon(), /*#__PURE__*/React.createElement("span", null, props.children)));
+};
+
+StepSequenceItem.propTypes = {
+  /** Text content for the step item */
+  children: PropTypes.node.isRequired,
+
+  /** Value to be displayed before text for uncompleted steps */
+  indicator: PropTypes.string.isRequired,
+
+  /** Flag to hide the indicator for uncompleted steps */
+  hideIndicator: PropTypes.bool,
+
+  /** Aria label */
+  ariaLabel: PropTypes.string,
+
+  /** Status for the step */
+  status: PropTypes.oneOf(["complete", "current", "incomplete"]),
+
+  /** Hidden label to be displayed if item is complete */
+  hiddenCompleteLabel: PropTypes.string,
+
+  /** Hidden label to be displayed if item is current */
+  hiddenCurrentLabel: PropTypes.string
+};
+StepSequenceItem.defaultProps = {
+  status: "incomplete",
+  hideIndicator: false
+};
+export default StepSequenceItem;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+export interface StepSequenceItemProps {
+  /** Aria label */
+  ariaLabel?: string;
+  /** Hidden label to be displayed if item is complete */
+  hiddenCompleteLabel?: string;
+  /** Hidden label to be displayed if item is current */
+  hiddenCurrentLabel?: string;
+  /** Value to be displayed before text for uncomplete steps */
+  indicator: string;
+  /** Flag to hide the indicator for uncomplete steps */
+  hideIndicator?: boolean;
+  /** Status for the step */
+  status?: "complete" | "current" | "incomplete";
+}
+
+declare function StepSequenceItem(
+  props: React.PropsWithChildren<StepSequenceItemProps>
+): JSX.Element;
+
+export default StepSequenceItem;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.style.d.ts

@@ -0,0 +1,2 @@
+export default StepSequenceItemStyle;
+declare const StepSequenceItemStyle: import("styled-components").StyledComponent<"li", any, {}, never>;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.style.js

@@ -0,0 +1,76 @@
+import styled, { css } from "styled-components";
+import StyledIcon from "../../icon/icon.style";
+const StepSequenceItemStyle = styled.li`
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  text-align: right;
+  list-style-type: none;
+  color: var(--colorsUtilityYin055);
+
+  &::before {
+    content: "";
+    flex-grow: 1;
+    display: block;
+    height: var(--sizing025);
+    margin: 0 16px;
+    background-color: var(--colorsUtilityYin055);
+  }
+
+  & span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  ${StyledIcon} {
+    margin-right: 8px;
+    color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
+  }
+
+  &:first-child {
+    flex-grow: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  ${({
+  status
+}) => status === "current" && css`
+      color: var(--colorsUtilityYin090);
+
+      &::before {
+        background-color: var(--colorsUtilityYin090);
+      }
+    `}
+
+  ${({
+  status
+}) => status === "complete" && css`
+      color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
+
+      &::before {
+        background-color: var(
+          --colorsBaseTheme,
+          var(--colorsSemanticPositive500)
+        );
+      }
+    `}
+
+  ${({
+  orientation
+}) => orientation === "vertical" && css`
+      flex-direction: column;
+      align-items: flex-start;
+
+      &::before {
+        flex-grow: 0;
+        width: var(--sizing025);
+        height: var(--sizing300);
+        margin: 12px 8px;
+      }
+    `}
+`;
+export default StepSequenceItemStyle;

package/esm/components/step-sequence/step-sequence.component.d.ts

@@ -0,0 +1,13 @@
+export default StepSequence;
+declare function StepSequence(props: any): JSX.Element;
+declare namespace StepSequence {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const orientation: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        const orientation_1: string;
+        export { orientation_1 as orientation };
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/step-sequence/step-sequence.component.js

@@ -0,0 +1,29 @@
+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 PropTypes from "prop-types";
+import React from "react";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import StepSequenceStyle from "./step-sequence.style";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const StepSequence = props => {
+  return /*#__PURE__*/React.createElement(StepSequenceStyle, _extends({
+    "data-component": "step-sequence"
+  }, props), React.Children.map(props.children, child => /*#__PURE__*/React.cloneElement(child, { ...child.props,
+    orientation: props.orientation
+  }, child.props.children)));
+};
+
+StepSequence.propTypes = { ...marginPropTypes,
+
+  /** Step sequence items to be rendered */
+  children: PropTypes.node,
+
+  /** The direction that step sequence items should be rendered */
+  orientation: PropTypes.oneOf(["horizontal", "vertical"])
+};
+StepSequence.defaultProps = {
+  orientation: "horizontal"
+};
+export default StepSequence;

package/esm/components/step-sequence/step-sequence.config.d.ts

@@ -0,0 +1,2 @@
+export const STEP_SEQUENCE_STEPS: string[];
+export const STEP_SEQUENCE_ORIENTATION: string[];

package/esm/components/step-sequence/step-sequence.config.js

@@ -0,0 +1,2 @@
+export const STEP_SEQUENCE_STEPS = ["complete", "current", "incomplete"];
+export const STEP_SEQUENCE_ORIENTATION = ["horizontal", "vertical"];

package/esm/components/step-sequence/step-sequence.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export interface StepSequenceProps {
+  /** The direction that step sequence items should be rendered */
+  orientation?: "horizontal" | "vertical";
+}
+
+declare function StepSequence(
+  props: React.PropsWithChildren<StepSequenceProps>
+): JSX.Element;
+
+export default StepSequence;

package/esm/components/step-sequence/step-sequence.style.d.ts

@@ -0,0 +1,2 @@
+export default StepSequenceStyle;
+declare const StepSequenceStyle: import("styled-components").StyledComponent<"ol", any, {}, never>;

package/esm/components/step-sequence/step-sequence.style.js

@@ -0,0 +1,22 @@
+import styled, { css } from "styled-components";
+import { margin } from "styled-system";
+import { baseTheme } from "../../style/themes";
+const StepSequenceStyle = styled.ol`
+  display: flex;
+  margin: 0;
+  padding: 18px;
+  font-weight: bold;
+
+  ${({
+  orientation
+}) => orientation === "vertical" && css`
+      flex-direction: column;
+      padding: 0;
+    `}
+
+  ${margin}
+`;
+StepSequenceStyle.defaultProps = {
+  theme: baseTheme
+};
+export default StepSequenceStyle;

package/esm/components/switch/__internal__/switch-slider-panel.style.d.ts

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

package/esm/components/switch/__internal__/switch-slider-panel.style.js

@@ -0,0 +1,66 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import StyledLoader from "../../loader/loader.style";
+import StyledLoaderSquare from "../../loader/loader-square.style";
+const SwitchSliderPanel = styled.div`
+  ${({
+  isLoading,
+  size
+}) => css`
+    border: 0;
+    color: var(--colorsActionMinorYang100);
+    margin: auto;
+    margin-top: ${size === "large" ? "12px" : "5px"};
+
+    &[type="on"] {
+      margin-left: 9px;
+    }
+
+    &[type="off"] {
+      color: var(--colorsActionMinor500);
+      margin-right: 6px;
+    }
+
+    ${isLoading && css`
+      &[type="off"],
+      &[type="on"] {
+        margin: 0;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 2px 8px;
+      }
+
+      &[type="off"] {
+        ${StyledLoaderSquare} {
+          background-color: var(--colorsSemanticNeutral500);
+        }
+      }
+
+      &[type="on"] {
+        ${StyledLoaderSquare} {
+          background-color: var(--colorsActionMinorYang100);
+        }
+      }
+
+      ${StyledLoader} {
+         {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 100%;
+
+          ${StyledLoaderSquare} {
+            height: ${size === "large" ? "var(--sizing200)" : "var(--sizing150)"};
+            width: ${size === "large" ? "var(--sizing200)" : "var(--sizing150)"};
+          }
+        }
+      }
+    `}
+  `}
+`;
+SwitchSliderPanel.propTypes = {
+  isLoading: PropTypes.bool,
+  size: PropTypes.string
+};
+export default SwitchSliderPanel;

package/esm/components/switch/__internal__/switch-slider.component.d.ts

@@ -0,0 +1,24 @@
+export default SwitchSlider;
+declare function SwitchSlider({ checked, disabled, loading, size, error, warning, info, useValidationIcon, }: {
+    checked: any;
+    disabled: any;
+    loading: any;
+    size: any;
+    error: any;
+    warning: any;
+    info: any;
+    useValidationIcon: any;
+}): JSX.Element;
+declare namespace SwitchSlider {
+    namespace propTypes {
+        const checked: PropTypes.Requireable<boolean>;
+        const disabled: PropTypes.Requireable<boolean>;
+        const loading: PropTypes.Requireable<boolean>;
+        const size: PropTypes.Requireable<string>;
+        const error: PropTypes.Requireable<string | boolean>;
+        const warning: PropTypes.Requireable<string | boolean>;
+        const info: PropTypes.Requireable<string | boolean>;
+        const useValidationIcon: PropTypes.Requireable<boolean>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/switch/__internal__/switch-slider.component.js

@@ -0,0 +1,61 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Loader from "../../loader/loader.component";
+import StyledSwitchSlider from "./switch-slider.style";
+import SwitchSliderPanel from "./switch-slider-panel.style";
+import ValidationIcon from "../../../__internal__/validations/validation-icon.component";
+import useLocale from "../../../hooks/__internal__/useLocale";
+
+const SwitchSlider = ({
+  checked,
+  disabled,
+  loading,
+  size,
+  error,
+  warning,
+  info,
+  useValidationIcon
+}) => {
+  const l = useLocale();
+  const panelContent = checked ? l.switch.on() : l.switch.off();
+  const switchSliderStyleProps = {
+    isLoading: loading,
+    checked,
+    disabled,
+    size,
+    error,
+    warning,
+    info
+  };
+  const sliderPanelStyleProps = {
+    isLoading: loading,
+    size,
+    type: checked ? "on" : "off",
+    disabled
+  };
+  const loaderProps = {
+    isInsideButton: true,
+    isActive: checked,
+    size
+  };
+  const sliderContent = /*#__PURE__*/React.createElement(SwitchSliderPanel, sliderPanelStyleProps, loading ? /*#__PURE__*/React.createElement(Loader, loaderProps) : panelContent);
+  return /*#__PURE__*/React.createElement(StyledSwitchSlider, switchSliderStyleProps, sliderContent, useValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
+    error: error,
+    warning: warning,
+    info: info,
+    size: size,
+    tooltipFlipOverrides: ["top", "bottom"]
+  }));
+};
+
+SwitchSlider.propTypes = {
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  size: PropTypes.string,
+  error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  warning: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  info: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  useValidationIcon: PropTypes.bool
+};
+export default SwitchSlider;

package/esm/components/switch/__internal__/switch-slider.style.d.ts

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

package/esm/components/switch/__internal__/switch-slider.style.js

@@ -0,0 +1,118 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import SwitchSliderPanel from "./switch-slider-panel.style";
+import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style";
+const StyledSwitchSlider = styled.span`
+  ${({
+  checked,
+  isLoading,
+  disabled,
+  size,
+  error,
+  warning
+}) => css`
+    display: flex;
+    font-size: 12px;
+    font-weight: bold;
+    height: 24px;
+    left: 0;
+    letter-spacing: 1px;
+    position: absolute;
+    text-transform: uppercase;
+    top: 0;
+    width: 60px;
+    z-index: 2;
+    border-radius: 90px;
+    border-style: solid;
+    border-color: var(--colorsActionMinor400);
+    border-width: var(--borderWidth200);
+
+    &::before {
+      background-color: var(--colorsActionMinor400);
+      bottom: 4px;
+      content: "";
+      height: 16px;
+      position: absolute;
+      left: 4px;
+      transition: transform 0.4s;
+      width: 16px;
+      z-index: 1;
+      border-radius: 50%;
+    }
+
+    ${checked && `
+      background-color: var(--colorsActionMinor500);
+      border-color: var(--colorsActionMinorTransparent);
+
+      &::before {
+        transform: translateX(36px);
+        background-color: var(--colorsActionMinorYang100);
+      }
+
+    `}
+
+    ${disabled && !isLoading && css`
+      border-color: var(--colorsActionDisabled600);
+
+      &::before {
+        background-color: var(--colorsActionDisabled600);
+      }
+
+      ${SwitchSliderPanel} {
+        color: var(--colorsUtilityYin030);
+      }
+
+      ${checked && `
+        background-color: var(--colorsActionDisabled500);
+        border-color: var(--colorsActionMinorTransparent);
+
+        &::before {
+          background-color: var(--colorsActionMinorYang100);
+        }
+
+        ${SwitchSliderPanel} { color: var(--colorsUtilityYin030); }
+      `}
+    `}
+
+    ${size === "large" && css`
+      border-radius: 30px;
+      &::before {
+        height: 32px;
+        width: 32px;
+
+        ${checked && `
+          transform: translateX(38px);
+        `}
+      }
+    `}
+
+    ${isLoading && css`
+      &::before {
+        display: none;
+      }
+    `}
+
+    ${warning && !disabled && css`
+      border-color: var(--colorsSemanticCaution500);
+    `}
+
+    ${error && !disabled && css`
+      border-color: var(--colorsSemanticNegative500);
+    `}
+
+    ${StyledValidationIcon} {
+      position: absolute;
+      right: -30px;
+      height: 100%;
+    }
+  `}
+`;
+StyledSwitchSlider.propTypes = {
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  size: PropTypes.string,
+  isLoading: PropTypes.bool,
+  error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  warning: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+};
+export default StyledSwitchSlider;

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

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

package/esm/components/switch/index.js

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

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

@@ -0,0 +1,123 @@
+export { Switch as BaseSwitch };
+export default Switch;
+declare function Switch({ autoFocus, id, label, onChange, onBlur, onFocus, value, checked, defaultChecked, disabled, loading, reverse, validationOnLabel, labelInline, labelSpacing, labelHelp, fieldHelpInline, size, name, adaptiveLabelBreakpoint, tooltipPosition, error, warning, info, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, ...rest }: {
+    [x: string]: any;
+    autoFocus: any;
+    id: any;
+    label: any;
+    onChange: any;
+    onBlur: any;
+    onFocus: any;
+    value: any;
+    checked: any;
+    defaultChecked: any;
+    disabled: any;
+    loading: any;
+    reverse: any;
+    validationOnLabel: any;
+    labelInline: any;
+    labelSpacing: any;
+    labelHelp: any;
+    fieldHelpInline: any;
+    size: any;
+    name: any;
+    adaptiveLabelBreakpoint: any;
+    tooltipPosition: any;
+    error: any;
+    warning: any;
+    info: any;
+    "data-component": any;
+    "data-element": any;
+    "data-role": any;
+    helpAriaLabel: any;
+}): JSX.Element;
+declare namespace Switch {
+    const propTypes: {
+        /** Identifier used for testing purposes, applied to the root element of the component. */
+        "data-component": PropTypes.Requireable<string>;
+        /** Identifier used for testing purposes, applied to the root element of the component. */
+        "data-element": PropTypes.Requireable<string>;
+        /** Identifier used for testing purposes, applied to the root element of the component. */
+        "data-role": PropTypes.Requireable<string>;
+        /** If true the Component will be focused when page load */
+        autoFocus: PropTypes.Requireable<boolean>;
+        /** Set the value of the Switch if component is meant to be used as controlled */
+        checked: PropTypes.Requireable<boolean>;
+        /** Set the default value of the Switch if component is meant to be used as uncontrolled */
+        defaultChecked: PropTypes.Requireable<boolean>;
+        /** Toggles disabling of input */
+        disabled: PropTypes.Requireable<boolean>;
+        /** Displays additional information below the input to provide help to the user. */
+        fieldHelp: PropTypes.Requireable<string>;
+        /** Displays fieldHelp inline with the checkbox */
+        fieldHelpInline: PropTypes.Requireable<boolean>;
+        /** Unique Identifier for the input. Will use a randomly generated GUID if none is provided */
+        id: PropTypes.Requireable<string>;
+        /** Sets percentage-based input width */
+        inputWidth: PropTypes.Requireable<string | number>;
+        /** The content of the label for the input */
+        label: PropTypes.Requireable<string>;
+        /** Sets label alignment - accepted values: 'left' (default), 'right' */
+        labelAlign: PropTypes.Requireable<string>;
+        /** The content for the help tooltip, to appear next to the Label */
+        labelHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** Displays label inline with the Switch */
+        labelInline: PropTypes.Requireable<boolean>;
+        /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+        labelSpacing: PropTypes.Requireable<number>;
+        /** Sets percentage-based label width */
+        labelWidth: PropTypes.Requireable<string | number>;
+        /** The name of the the Switch input  */
+        name: PropTypes.Requireable<string>;
+        /** Indicate that error has occurred
+        Pass string to display icon, tooltip and red border
+        Pass true boolean to only display red border */
+        error: PropTypes.Requireable<string | boolean>;
+        /** Indicate that warning has occurred
+        Pass string to display icon, tooltip and orange border
+        Pass true boolean to only display orange border */
+        warning: PropTypes.Requireable<string | boolean>;
+        /** Indicate additional information
+        Pass string to display icon, tooltip and blue border
+        Pass true boolean to only display blue border */
+        info: PropTypes.Requireable<string | boolean>;
+        /** When true, validation icon will be placed on label instead of being placed by the input */
+        validationOnLabel: PropTypes.Requireable<boolean>;
+        /** Override tab index on the validation and help icon */
+        helpTabIndex: PropTypes.Requireable<string | number>;
+        /** Triggers loading animation */
+        loading: PropTypes.Requireable<boolean>;
+        /** Accepts a callback function which can be used to update parent state on change */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Accepts a callback function which is triggered on blur event */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Accepts a callback function which is triggered on focus event */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Accepts a callback function which is triggered on click event */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Reverses label and Switch display */
+        reverse: PropTypes.Requireable<boolean>;
+        /**
+         * Set the size of the Switch to 'small' (16x16 - default) or 'large' (24x24).
+         * No effect when using Classic theme.
+         */
+        size: PropTypes.Requireable<string>;
+        /** the value of the checkbox, passed on form submit */
+        value: PropTypes.Requireable<string>;
+        /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+        adaptiveLabelBreakpoint: PropTypes.Requireable<number>;
+        /** Flag to configure component as mandatory */
+        required: PropTypes.Requireable<boolean>;
+        /** Overrides the default tooltip position */
+        tooltipPosition: PropTypes.Requireable<string>;
+        /** Aria label for rendered help component */
+        helpAriaLabel: PropTypes.Requireable<string>;
+    };
+    const defaultProps: {
+        labelInline: boolean;
+        reverse: boolean;
+        validationOnLabel: boolean;
+        "data-component": string;
+    };
+}
+import PropTypes from "prop-types";