carbon-react 111.13.2 → 111.15.0

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

@@ -1,11 +1,14 @@
 import React from "react";
 import { SpaceProps, LayoutProps, FlexboxProps, ColorProps, PositionProps } from "styled-system";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
 declare const GAP_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 export declare type OverflowWrap = "break-word" | "anywhere";
 export declare type ScrollVariant = "light" | "dark";
 export declare type BoxSizing = "content-box" | "border-box";
 export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
 export declare type Gap = AllowedNumericalValues | string;
+declare type DesignTokensType = keyof typeof DesignTokens;
+declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
@@ -22,6 +25,8 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     columnGap?: Gap;
     /** Row gap an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
     rowGap?: Gap;
+    /** Design Token for Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Box component. */
+    boxShadow?: BoxShadowsType;
 }
-declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
+export declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;

package/esm/components/box/box.component.js

@@ -4,7 +4,7 @@ import BaseTheme from "../../style/themes/base";
 import styledColor from "../../style/utils/color";
 import boxConfig from "./box.config";
 const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-const Box = styled.div`
+export const Box = styled.div`
   ${space}
   ${layout}
   ${flexbox}
@@ -69,6 +69,12 @@ const Box = styled.div`
         row-gap: ${boxConfig.gap(rowGap)};
       `}
     `};
+
+  ${({
+  boxShadow
+}) => boxShadow && css`
+      box-shadow: var(--${boxShadow});
+    `}
 `;
 Box.defaultProps = {
   theme: BaseTheme

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

@@ -27,6 +27,8 @@ export interface ButtonToggleGroupProps extends ValidationProps, MarginProps, Ta
     labelInline?: boolean;
     /** The percentage width of the label. */
     labelWidth?: number;
+    /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
+    fullWidth?: boolean;
     /** The alignment for the text in the label. */
     labelAlign?: "left" | "right";
     /** Callback triggered by blur event on the input. */
@@ -39,7 +41,7 @@ export interface ButtonToggleGroupProps extends ValidationProps, MarginProps, Ta
     helpAriaLabel?: string;
 }
 declare const ButtonToggleGroup: {
-    ({ children, name, error, warning, info, validationOnLabel, label, labelHelp, labelSpacing, inputWidth, fieldHelp, fieldHelpInline, labelInline, labelWidth, labelAlign, onChange, onBlur, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, ...props }: ButtonToggleGroupProps): JSX.Element;
+    ({ children, name, error, warning, info, validationOnLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, fieldHelp, fieldHelpInline, labelInline, labelWidth, labelAlign, onChange, onBlur, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, ...props }: ButtonToggleGroupProps): JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

package/esm/components/button-toggle-group/button-toggle-group.component.js

@@ -23,6 +23,7 @@ const ButtonToggleGroup = ({
   labelHelp,
   labelSpacing,
   inputWidth,
+  fullWidth,
   fieldHelp,
   fieldHelpInline,
   labelInline,
@@ -69,7 +70,8 @@ const ButtonToggleGroup = ({
   }, validationProps, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({
     "aria-label": label,
     role: "radiogroup",
-    inputWidth: inputWidth
+    inputWidth: inputWidth,
+    fullWidth: fullWidth
   }, validationProps), /*#__PURE__*/React.createElement(RadioButtonMapper, {
     name: name,
     onBlur: onBlur,
@@ -88,6 +90,7 @@ ButtonToggleGroup.propTypes = {
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "fieldHelp": PropTypes.string,
   "fieldHelpInline": PropTypes.bool,
+  "fullWidth": PropTypes.bool,
   "helpAriaLabel": PropTypes.string,
   "id": PropTypes.string.isRequired,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),

package/esm/components/button-toggle-group/button-toggle-group.style.d.ts

@@ -1,4 +1,4 @@
 import { ButtonToggleGroupProps } from ".";
 import { ValidationProps } from "../../__internal__/validations";
-declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, ValidationProps & Pick<ButtonToggleGroupProps, "inputWidth">, never>;
+declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, ValidationProps & Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth">, never>;
 export default StyledButtonToggleGroup;

package/esm/components/button-toggle-group/button-toggle-group.style.js

@@ -1,9 +1,20 @@
 import styled, { css } from "styled-components";
-import { StyledButtonToggleLabel } from "../button-toggle/button-toggle.style";
+import { StyledButtonToggleLabel, StyledButtonToggle } from "../button-toggle/button-toggle.style";
 import ValidationIconStyle from "../../__internal__/validations/validation-icon.style";
 const StyledButtonToggleGroup = styled.div`
   display: flex;
 
+  ${({
+  fullWidth
+}) => fullWidth && css`
+      ${StyledButtonToggleLabel} {
+        width: 100%;
+      }
+      ${StyledButtonToggle} {
+        flex: auto;
+      }
+    `};
+
   ${({
   inputWidth
 }) => inputWidth && css`

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

@@ -1,6 +1,9 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { CardSpacing } from "./card.config";
+declare type DesignTokensType = keyof typeof DesignTokens;
+declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 export interface CardProps extends MarginProps {
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-element"?: string;
@@ -23,9 +26,13 @@ export interface CardProps extends MarginProps {
     interactive?: boolean;
     /** Size of card for applying padding */
     spacing?: CardSpacing;
+    /** Design token for custom Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Card component. */
+    boxShadow?: BoxShadowsType;
+    /** Design token for custom Box Shadow on hover. Interactive prop must be True. Note: please check that the box shadow design token you are using is compatible with the Card component. */
+    hoverBoxShadow?: BoxShadowsType;
 }
 declare const Card: {
-    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, ...rest }: CardProps): JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
     displayName: string;
 };
 export default Card;

package/esm/components/card/card.component.js

@@ -24,6 +24,8 @@ const Card = ({
   draggable,
   interactive,
   spacing = "medium",
+  boxShadow,
+  hoverBoxShadow,
   ...rest
 }) => {
   if (!isDeprecationWarningTriggered && oldDataRole) {
@@ -56,6 +58,8 @@ const Card = ({
     interactive: !!interactive,
     draggable: !!draggable,
     spacing: spacing,
+    boxShadow: boxShadow,
+    hoverBoxShadow: hoverBoxShadow,
     onClick: interactive && !draggable ? action : undefined
   }, interactive && {
     tabIndex: 0,
@@ -67,12 +71,14 @@ const Card = ({
 
 Card.propTypes = {
   "action": PropTypes.func,
+  "boxShadow": PropTypes.any,
   "cardWidth": PropTypes.string,
   "children": PropTypes.node,
   "data-element": PropTypes.string,
   "data-role": PropTypes.string,
   "dataRole": PropTypes.string,
   "draggable": PropTypes.bool,
+  "hoverBoxShadow": PropTypes.any,
   "interactive": PropTypes.bool,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,

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

@@ -1,10 +1,15 @@
 import { MarginProps } from "styled-system";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { CardSpacing } from "./card.config";
+declare type DesignTokensType = keyof typeof DesignTokens;
+export declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 export interface StyledCardProps extends MarginProps {
     cardWidth: string;
     interactive: boolean;
     draggable: boolean;
     spacing: CardSpacing;
+    boxShadow?: BoxShadowsType;
+    hoverBoxShadow?: BoxShadowsType;
 }
 declare const StyledCard: import("styled-components").StyledComponent<"div", any, StyledCardProps, never>;
 export default StyledCard;

package/esm/components/card/card.style.js

@@ -11,11 +11,13 @@ const StyledCard = styled.div`
   cardWidth,
   interactive,
   draggable,
-  spacing
+  spacing,
+  boxShadow = "boxShadow050",
+  hoverBoxShadow = "boxShadow100"
 }) => css`
     background-color: var(--colorsUtilityYang100);
     border: none;
-    box-shadow: var(--boxShadow050);
+    box-shadow: var(--${boxShadow});
     color: var(--colorsUtilityYin090);
     margin: 25px;
     padding: ${paddingSizes[spacing]};
@@ -30,7 +32,7 @@ const StyledCard = styled.div`
 
       :hover,
       :focus {
-        box-shadow: var(--boxShadow100);
+        box-shadow: var(--${hoverBoxShadow});
       }
     `}
 

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -465,6 +465,7 @@ DismissibleBox.propTypes = {
     "trimStart": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "boxShadow": PropTypes.any,
   "boxSizing": PropTypes.oneOf(["border-box", "content-box"]),
   "children": PropTypes.node,
   "color": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

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

@@ -1,11 +1,14 @@
 import React from "react";
 import { SpaceProps, LayoutProps, FlexboxProps, ColorProps, PositionProps } from "styled-system";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
 declare const GAP_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 export declare type OverflowWrap = "break-word" | "anywhere";
 export declare type ScrollVariant = "light" | "dark";
 export declare type BoxSizing = "content-box" | "border-box";
 export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
 export declare type Gap = AllowedNumericalValues | string;
+declare type DesignTokensType = keyof typeof DesignTokens;
+declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
@@ -22,6 +25,8 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     columnGap?: Gap;
     /** Row gap an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
     rowGap?: Gap;
+    /** Design Token for Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Box component. */
+    boxShadow?: BoxShadowsType;
 }
-declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
+export declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;

package/lib/components/box/box.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Box = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -87,7 +87,14 @@ const Box = _styledComponents.default.div`
         row-gap: ${_box.default.gap(rowGap)};
       `}
     `};
+
+  ${({
+  boxShadow
+}) => boxShadow && (0, _styledComponents.css)`
+      box-shadow: var(--${boxShadow});
+    `}
 `;
+exports.Box = Box;
 Box.defaultProps = {
   theme: _base.default
 };

package/lib/components/button-toggle-group/button-toggle-group.component.d.ts

@@ -27,6 +27,8 @@ export interface ButtonToggleGroupProps extends ValidationProps, MarginProps, Ta
     labelInline?: boolean;
     /** The percentage width of the label. */
     labelWidth?: number;
+    /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
+    fullWidth?: boolean;
     /** The alignment for the text in the label. */
     labelAlign?: "left" | "right";
     /** Callback triggered by blur event on the input. */
@@ -39,7 +41,7 @@ export interface ButtonToggleGroupProps extends ValidationProps, MarginProps, Ta
     helpAriaLabel?: string;
 }
 declare const ButtonToggleGroup: {
-    ({ children, name, error, warning, info, validationOnLabel, label, labelHelp, labelSpacing, inputWidth, fieldHelp, fieldHelpInline, labelInline, labelWidth, labelAlign, onChange, onBlur, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, ...props }: ButtonToggleGroupProps): JSX.Element;
+    ({ children, name, error, warning, info, validationOnLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, fieldHelp, fieldHelpInline, labelInline, labelWidth, labelAlign, onChange, onBlur, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, ...props }: ButtonToggleGroupProps): JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

package/lib/components/button-toggle-group/button-toggle-group.component.js

@@ -46,6 +46,7 @@ const ButtonToggleGroup = ({
   labelHelp,
   labelSpacing,
   inputWidth,
+  fullWidth,
   fieldHelp,
   fieldHelpInline,
   labelInline,
@@ -93,7 +94,8 @@ const ButtonToggleGroup = ({
   }, validationProps, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.default, _extends({
     "aria-label": label,
     role: "radiogroup",
-    inputWidth: inputWidth
+    inputWidth: inputWidth,
+    fullWidth: fullWidth
   }, validationProps), /*#__PURE__*/_react.default.createElement(_radioButtonMapper.default, {
     name: name,
     onBlur: onBlur,
@@ -112,6 +114,7 @@ ButtonToggleGroup.propTypes = {
   "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "fieldHelp": _propTypes.default.string,
   "fieldHelpInline": _propTypes.default.bool,
+  "fullWidth": _propTypes.default.bool,
   "helpAriaLabel": _propTypes.default.string,
   "id": _propTypes.default.string.isRequired,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),

package/lib/components/button-toggle-group/button-toggle-group.style.d.ts

@@ -1,4 +1,4 @@
 import { ButtonToggleGroupProps } from ".";
 import { ValidationProps } from "../../__internal__/validations";
-declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, ValidationProps & Pick<ButtonToggleGroupProps, "inputWidth">, never>;
+declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, ValidationProps & Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth">, never>;
 export default StyledButtonToggleGroup;

package/lib/components/button-toggle-group/button-toggle-group.style.js

@@ -20,6 +20,17 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledButtonToggleGroup = _styledComponents.default.div`
   display: flex;
 
+  ${({
+  fullWidth
+}) => fullWidth && (0, _styledComponents.css)`
+      ${_buttonToggle.StyledButtonToggleLabel} {
+        width: 100%;
+      }
+      ${_buttonToggle.StyledButtonToggle} {
+        flex: auto;
+      }
+    `};
+
   ${({
   inputWidth
 }) => inputWidth && (0, _styledComponents.css)`

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

@@ -1,6 +1,9 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { CardSpacing } from "./card.config";
+declare type DesignTokensType = keyof typeof DesignTokens;
+declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 export interface CardProps extends MarginProps {
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-element"?: string;
@@ -23,9 +26,13 @@ export interface CardProps extends MarginProps {
     interactive?: boolean;
     /** Size of card for applying padding */
     spacing?: CardSpacing;
+    /** Design token for custom Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Card component. */
+    boxShadow?: BoxShadowsType;
+    /** Design token for custom Box Shadow on hover. Interactive prop must be True. Note: please check that the box shadow design token you are using is compatible with the Card component. */
+    hoverBoxShadow?: BoxShadowsType;
 }
 declare const Card: {
-    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, ...rest }: CardProps): JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
     displayName: string;
 };
 export default Card;

package/lib/components/card/card.component.js

@@ -43,6 +43,8 @@ const Card = ({
   draggable,
   interactive,
   spacing = "medium",
+  boxShadow,
+  hoverBoxShadow,
   ...rest
 }) => {
   if (!isDeprecationWarningTriggered && oldDataRole) {
@@ -76,6 +78,8 @@ const Card = ({
     interactive: !!interactive,
     draggable: !!draggable,
     spacing: spacing,
+    boxShadow: boxShadow,
+    hoverBoxShadow: hoverBoxShadow,
     onClick: interactive && !draggable ? action : undefined
   }, interactive && {
     tabIndex: 0,
@@ -87,12 +91,14 @@ const Card = ({
 
 Card.propTypes = {
   "action": _propTypes.default.func,
+  "boxShadow": _propTypes.default.any,
   "cardWidth": _propTypes.default.string,
   "children": _propTypes.default.node,
   "data-element": _propTypes.default.string,
   "data-role": _propTypes.default.string,
   "dataRole": _propTypes.default.string,
   "draggable": _propTypes.default.bool,
+  "hoverBoxShadow": _propTypes.default.any,
   "interactive": _propTypes.default.bool,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,

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

@@ -1,10 +1,15 @@
 import { MarginProps } from "styled-system";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { CardSpacing } from "./card.config";
+declare type DesignTokensType = keyof typeof DesignTokens;
+export declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 export interface StyledCardProps extends MarginProps {
     cardWidth: string;
     interactive: boolean;
     draggable: boolean;
     spacing: CardSpacing;
+    boxShadow?: BoxShadowsType;
+    hoverBoxShadow?: BoxShadowsType;
 }
 declare const StyledCard: import("styled-components").StyledComponent<"div", any, StyledCardProps, never>;
 export default StyledCard;

package/lib/components/card/card.style.js

@@ -27,11 +27,13 @@ const StyledCard = _styledComponents.default.div`
   cardWidth,
   interactive,
   draggable,
-  spacing
+  spacing,
+  boxShadow = "boxShadow050",
+  hoverBoxShadow = "boxShadow100"
 }) => (0, _styledComponents.css)`
     background-color: var(--colorsUtilityYang100);
     border: none;
-    box-shadow: var(--boxShadow050);
+    box-shadow: var(--${boxShadow});
     color: var(--colorsUtilityYin090);
     margin: 25px;
     padding: ${paddingSizes[spacing]};
@@ -46,7 +48,7 @@ const StyledCard = _styledComponents.default.div`
 
       :hover,
       :focus {
-        box-shadow: var(--boxShadow100);
+        box-shadow: var(--${hoverBoxShadow});
       }
     `}
 

package/lib/components/dismissible-box/dismissible-box.component.js

@@ -479,6 +479,7 @@ DismissibleBox.propTypes = {
     "trimStart": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
+  "boxShadow": _propTypes.default.any,
   "boxSizing": _propTypes.default.oneOf(["border-box", "content-box"]),
   "children": _propTypes.default.node,
   "color": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({

package/package.json

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