carbon-react 119.12.2 → 120.1.0

package/esm/components/typography/typography.style.js

@@ -0,0 +1,190 @@
+import styled, { css } from "styled-components";
+import { space } from "styled-system";
+import styledColor from "../../style/utils/color";
+import baseTheme from "../../style/themes/base";
+const getAs = variant => {
+  switch (variant) {
+    case "h1-large":
+      return "h1";
+    case "segment-header":
+    case "segment-header-small":
+    case "segment-subheader":
+    case "segment-subheader-alt":
+      return "h5";
+    case "big":
+      return "p";
+    default:
+      return variant;
+  }
+};
+const getSize = variant => {
+  switch (variant) {
+    case "h1-large":
+      return "32px";
+    case "h1":
+      return "24px";
+    case "h2":
+      return "22px";
+    case "h3":
+    case "segment-header":
+      return "20px";
+    case "h4":
+    case "segment-header-small":
+      return "18px";
+    case "h5":
+    case "segment-subheader":
+    case "big":
+      return "16px";
+    case "small":
+    case "sub":
+    case "sup":
+      return "13px";
+    case "segment-subheader-alt":
+    case "p":
+    case "b":
+    case "strong":
+    case "em":
+    default:
+      return "14px";
+  }
+};
+const getLineHeight = variant => {
+  switch (variant) {
+    case "h1-large":
+      return "40px";
+    case "h1":
+    case "segment-subheader":
+      return "31px";
+    case "h2":
+      return "29px";
+    case "h3":
+    case "segment-header":
+      return "26px";
+    case "big":
+      return "24px";
+    case "h4":
+    case "segment-header-small":
+      return "23px";
+    case "small":
+    case "sub":
+    case "sup":
+      return "20px";
+    case "h5":
+    case "segment-subheader-alt":
+    case "p":
+    case "b":
+    case "strong":
+    case "em":
+    default:
+      return "21px";
+  }
+};
+const getWeight = variant => {
+  switch (variant) {
+    case "h1-large":
+    case "h1":
+    case "segment-header":
+    case "segment-header-small":
+      return "900";
+    case "h2":
+    case "h3":
+    case "segment-subheader":
+    case "segment-subheader-alt":
+    case "b":
+    case "em":
+    case "strong":
+      return "700";
+    case "h4":
+    case "h5":
+    case "p":
+    case "small":
+    case "big":
+    case "sub":
+    case "sup":
+    default:
+      return "400";
+  }
+};
+const getTransform = variant => {
+  if (variant === "segment-subheader-alt") {
+    return "uppercase";
+  }
+  return "none";
+};
+const getDecoration = variant => {
+  if (variant === "em") {
+    return "underline";
+  }
+  return "none";
+};
+const StyledTypography = styled.span.attrs(({
+  variant,
+  as,
+  fontSize,
+  fontWeight,
+  textTransform,
+  lineHeight,
+  textDecoration
+}) => {
+  return {
+    as: as || getAs(variant),
+    size: fontSize || getSize(variant),
+    weight: fontWeight || getWeight(variant),
+    textTransform: textTransform || getTransform(variant),
+    textDecoration: textDecoration || getDecoration(variant),
+    lineHeight: lineHeight || getLineHeight(variant),
+    defaultMargin: variant === "p" ? "0 0 16px" : "0"
+  };
+})`
+  ${({
+  size,
+  weight,
+  textTransform,
+  lineHeight,
+  defaultMargin,
+  textDecoration,
+  display,
+  variant,
+  listStyleType,
+  whiteSpace,
+  wordWrap,
+  textOverflow,
+  truncate
+}) => css`
+    font-style: normal;
+    font-size: ${size};
+    font-weight: ${weight};
+    text-transform: ${textTransform};
+    text-decoration: ${textDecoration};
+    line-height: ${lineHeight};
+    margin: ${defaultMargin};
+    padding: 0;
+    white-space: ${truncate ? "nowrap" : whiteSpace};
+    word-wrap: ${wordWrap};
+    text-overflow: ${truncate ? "ellipsis" : textOverflow};
+    ${truncate && css`
+      overflow: hidden;
+    `};
+    ${variant === "sup" && "vertical-align: super;"};
+    ${variant === "sub" && "vertical-align: sub;"};
+    ${display && `display: ${display};`};
+    ${listStyleType && `list-style-type: ${listStyleType};`}; ;
+  `}
+  ${space}
+    ${({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+}) => styledColor({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+})}
+`;
+StyledTypography.defaultProps = {
+  theme: baseTheme
+};
+StyledTypography.displayName = "Typography";
+export default StyledTypography;

package/esm/components/vertical-menu/vertical-menu.style.js

@@ -4,7 +4,7 @@ import addFocusStyling from "../../style/utils/add-focus-styling";
 import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
 import Icon from "../icon";
-import Box from "../box";
+import StyledBox from "../box/box.style";
 export const StyledList = styled.ul`
   list-style: none;
   margin: 0;
@@ -97,7 +97,7 @@ export const StyledChevronIcon = styled(Icon)`
   width: 20px;
   color: var(--colorsComponentsLeftnavWinterStandardContent);
 `;
-export const StyledVerticalMenu = styled(Box)`
+export const StyledVerticalMenu = styled(StyledBox)`
   // TODO remove hardcoded values when DS have had chance to review which token to use
   &::-webkit-scrollbar-track {
     background-color: #cccccc;
@@ -109,7 +109,7 @@ export const StyledVerticalMenu = styled(Box)`
     width: 12px;
   }
 `;
-export const StyledVerticalMenuFullScreen = styled(Box)`
+export const StyledVerticalMenuFullScreen = styled(StyledBox)`
   position: fixed;
   top: 0;
   bottom: 0;

package/esm/style/utils/filter-styled-system-flexbox-props.d.ts

@@ -0,0 +1,3 @@
+import { FlexboxProps } from "styled-system";
+export declare const flexboxPropertyNames: string[];
+export default function filterStyledSystemFlexboxProps(originalObject: Record<string, unknown> | FlexboxProps): FlexboxProps;

package/esm/style/utils/filter-styled-system-flexbox-props.js

@@ -0,0 +1,5 @@
+import filterObjectProperties from "../../__internal__/filter-object-properties";
+export const flexboxPropertyNames = ["alignItems", "alignContent", "justifyItems", "justifyContent", "flexWrap", "flexDirection", "flex", "flexGrow", "flexShrink", "flexBasis", "justifySelf", "alignSelf", "order"];
+export default function filterStyledSystemFlexboxProps(originalObject) {
+  return filterObjectProperties(originalObject, flexboxPropertyNames);
+}

package/esm/style/utils/filter-styled-system-grid-props.d.ts

@@ -0,0 +1,3 @@
+import { GridProps } from "styled-system";
+export declare const gridPropertyNames: string[];
+export default function filterStyledSystemGridProps(originalObject: Record<string, unknown> | GridProps): GridProps;

package/esm/style/utils/filter-styled-system-grid-props.js

@@ -0,0 +1,5 @@
+import filterObjectProperties from "../../__internal__/filter-object-properties";
+export const gridPropertyNames = ["gridColumn", "gridRow", "gridArea", "gridAutoFlow", "gridAutoRows", "gridAutoColumns", "gridTemplateRows", "gridTemplateColumns", "gridTemplateAreas"];
+export default function filterStyledSystemGridProps(originalObject) {
+  return filterObjectProperties(originalObject, gridPropertyNames);
+}

package/esm/style/utils/filter-styled-system-layout-props.d.ts

@@ -0,0 +1,3 @@
+import { LayoutProps, PositionProps } from "styled-system";
+export declare const layoutPropertyNames: string[];
+export default function filterStyledSystemLayoutProps(originalObject: Record<string, unknown> | LayoutProps | PositionProps): LayoutProps | PositionProps;

package/esm/style/utils/filter-styled-system-layout-props.js

@@ -0,0 +1,5 @@
+import filterObjectProperties from "../../__internal__/filter-object-properties";
+export const layoutPropertyNames = ["width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "size", "display", "verticalAlign", "overflow", "overflowX", "overflowY", "position", "top", "right", "bottom", "left"];
+export default function filterStyledSystemLayoutProps(originalObject) {
+  return filterObjectProperties(originalObject, layoutPropertyNames);
+}

package/esm/style/utils/index.d.ts

@@ -1,4 +1,7 @@
 import filterStyledSystemPaddingProps from "./filter-styled-system-padding-props";
 import filterStyledSystemMarginProps from "./filter-styled-system-margin-props";
 import filterOutStyledSystemSpacingProps from "./filter-out-styled-system-spacing-props";
-export { filterStyledSystemPaddingProps, filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps, };
+import filterStyledSystemLayoutProps from "./filter-styled-system-layout-props";
+import filterStyledSystemFlexboxProps from "./filter-styled-system-flexbox-props";
+import filterStyledSystemGridProps from "./filter-styled-system-grid-props";
+export { filterStyledSystemPaddingProps, filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps, filterStyledSystemLayoutProps, filterStyledSystemFlexboxProps, filterStyledSystemGridProps, };

package/esm/style/utils/index.js

@@ -1,4 +1,7 @@
 import filterStyledSystemPaddingProps from "./filter-styled-system-padding-props";
 import filterStyledSystemMarginProps from "./filter-styled-system-margin-props";
 import filterOutStyledSystemSpacingProps from "./filter-out-styled-system-spacing-props";
-export { filterStyledSystemPaddingProps, filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps };
+import filterStyledSystemLayoutProps from "./filter-styled-system-layout-props";
+import filterStyledSystemFlexboxProps from "./filter-styled-system-flexbox-props";
+import filterStyledSystemGridProps from "./filter-styled-system-grid-props";
+export { filterStyledSystemPaddingProps, filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps, filterStyledSystemLayoutProps, filterStyledSystemFlexboxProps, filterStyledSystemGridProps };

package/lib/__internal__/input/input-presentation.style.d.ts

@@ -1,6 +1,6 @@
 import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
-export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "inputWidth" | "maxWidth">, never>;
+export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
 declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

package/lib/__spec_helper__/test-utils.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ReactWrapper, ShallowWrapper } from "enzyme";
-import { LayoutProps, FlexboxProps, BackgroundProps, PositionProps } from "styled-system";
+import { LayoutProps, FlexboxProps, BackgroundProps, PositionProps, GridProps } from "styled-system";
 import { ReactTestRendererJSON } from "react-test-renderer";
 import { mockMatchMedia } from "./mock-match-media";
 declare const toCSSCase: (str: string) => string;
@@ -46,7 +46,8 @@ declare const testStyledSystemWidth: (component: (widthProperties?: {
 }) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemLayout: (component: (layoutProperties?: LayoutProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemFlexBox: (component: (flexboxProperties?: FlexboxProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const testStyledSystemGrid: (component: (gridProperties?: GridProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemBackground: (component: (backgroundProperties?: BackgroundProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemPosition: (component: (positionProperties?: PositionProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const expectConsoleOutput: (message: string, type?: "warn" | "error") => () => void;
-export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };

package/lib/__spec_helper__/test-utils.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "mockMatchMedia", {
     return _mockMatchMedia.mockMatchMedia;
   }
 });
-exports.toCSSCase = exports.testStyledSystemWidth = exports.testStyledSystemSpacing = exports.testStyledSystemPosition = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemLayout = exports.testStyledSystemFlexBox = exports.testStyledSystemColor = exports.testStyledSystemBackground = exports.simulate = exports.selectedItemOf = void 0;
+exports.toCSSCase = exports.testStyledSystemWidth = exports.testStyledSystemSpacing = exports.testStyledSystemPosition = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemLayout = exports.testStyledSystemGrid = exports.testStyledSystemFlexBox = exports.testStyledSystemColor = exports.testStyledSystemBackground = exports.simulate = exports.selectedItemOf = void 0;
 var _enzyme = require("enzyme");
 var _sprintfJs = require("sprintf-js");
 var _baseTheme = require("../style/themes/base/base-theme.config");
@@ -112,6 +112,7 @@ const colorProps = [["color", "color", "#CCCCCC"], ["bg", "background-color", "#
 const widthProps = ["width", "width", "200px"];
 const layoutProps = [widthProps, ["height", "height", "200px"], ["minWidth", "min-width", "120px"], ["maxWidth", "max-width", "120px"], ["minHeight", "min-height", "120px"], ["maxHeight", "max-height", "120px"], ["size", "width", "120px"], ["size", "height", "120px"], ["display", "display", "inline-block"], ["verticalAlign", "vertical-align", "baseline"], ["overflow", "overflow", "hidden"], ["overflowX", "overflow-x", "hidden"], ["overflowY", "overflow-y", "hidden"]];
 const flexBoxProps = [["alignItems", "alignItems", "center"], ["alignContent", "alignContent", "center"], ["justifyItems", "justifyItems", "center"], ["justifyContent", "justifyContent", "center"], ["flexWrap", "flexWrap", "wrap"], ["flexDirection", "flexDirection", "row-reverse"], ["flex", "flex", "1"], ["flexGrow", "flexGrow", "1"], ["flexShrink", "flexShrink", "1"], ["flexBasis", "flexBasis", "100px"], ["justifySelf", "justifySelf", "center"], ["alignSelf", "alignSelf", "center"], ["order", "order", "1"]];
+const gridProps = [["gridColumn", "gridColumn", "1 / span 2"], ["gridRow", "gridRow", "1 / span 2"], ["gridArea", "gridArea", "myArea"], ["gridAutoFlow", "gridAutoFlow", "column"], ["gridAutoRows", "gridAutoRows", "150px"], ["gridAutoColumns", "gridAutoColumns", "50px"], ["gridTemplateRows", "gridTemplateRows", "100px 300px"], ["gridTemplateColumns", "gridTemplateColumns", "auto auto auto auto"], ["gridTemplateAreas", "gridTemplateAreas", "myArea myArea . . ."]];
 const backgroundProps = [["background", "background", "lightblue url('foo.jpg') no-repeat fixed center"], ["backgroundImage", "background-image", "url(foo.jpg)"], ["backgroundSize", "background-size", "center"], ["backgroundRepeat", "background-repeat", "no-repeat"]];
 const positionProps = [["top", "0px"], ["bottom", "0px"], ["right", "0px"], ["left", "0px"], ["position", "fixed"], ["position", "sticky"], ["position", "absolute"], ["position", "static"], ["position", "relative"]];
 const getDefaultValue = value => {
@@ -295,6 +296,20 @@ const testStyledSystemFlexBox = (component, styleContainer) => {
   });
 };
 exports.testStyledSystemFlexBox = testStyledSystemFlexBox;
+const testStyledSystemGrid = (component, styleContainer) => {
+  describe.each(gridProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
+    it(`then ${propName} should have been set correctly`, () => {
+      const props = {
+        [styledSystemProp]: value
+      };
+      const wrapper = (0, _enzyme.mount)(component(props));
+      assertStyleMatch({
+        [propName]: value
+      }, styleContainer ? styleContainer(wrapper) : wrapper);
+    });
+  });
+};
+exports.testStyledSystemGrid = testStyledSystemGrid;
 const testStyledSystemBackground = (component, styleContainer) => {
   describe.each(backgroundProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
     it(`then ${propName} should have been set correctly`, () => {

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

@@ -1,6 +1,7 @@
 import React from "react";
-import { SpaceProps, LayoutProps, FlexboxProps, ColorProps, PositionProps } from "styled-system";
+import { SpaceProps, LayoutProps, FlexboxProps, PositionProps, GridProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 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";
@@ -10,16 +11,22 @@ export declare type Gap = AllowedNumericalValues | string;
 declare type DesignTokensType = keyof typeof DesignTokens;
 declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
-export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
+export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, Omit<GridProps, "gridGap" | "gridRowGap" | "gridColumnGap">, TagProps, Omit<PositionProps, "zIndex"> {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    /** Set the ID attribute of the Box component */
+    id?: string;
+    /** Content to be rendered inside the Box component */
+    children?: React.ReactNode;
+    /** Set the Role attribute of the Box component */
+    role?: string;
     /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
     overflowWrap?: OverflowWrap;
-    /** scroll styling attribute */
+    /** Scroll styling attribute */
     scrollVariant?: ScrollVariant;
-    /** set the box-sizing attribute of the Box component */
+    /** Set the box-sizing attribute of the Box component */
     boxSizing?: BoxSizing;
     /** Allows a tabindex to be specified */
-    tabIndex?: number | string;
+    tabIndex?: number;
     /** Gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
     gap?: Gap;
     /** Column gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
@@ -30,6 +37,16 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     boxShadow?: BoxShadowsType;
     /** Design Token for Border Radius. Note: please check that the border radius design token you are using is compatible with the Box component. **This prop will not do anything if you have the roundedCornerOptOut flag set in the CarbonProvider** */
     borderRadius?: BorderRadiusType;
+    /** @private @ignore */
+    className?: string;
+    /** Set the color attribute of the Box component */
+    color?: string;
+    /** Set the bg attribute of the Box component */
+    bg?: string;
+    /** Set the backgroundColor attribute of the Box component */
+    backgroundColor?: string;
+    /** Set the opacity attribute of the Box component */
+    opacity?: string | number;
 }
-export declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
 export default Box;