carbon-react 104.42.0 → 104.43.0

package/esm/components/grid/grid-container/grid-container.component.js

@@ -1,8 +1,7 @@
 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 propTypes from "@styled-system/prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import GridContainerStyle from "./grid-container.style";
 import GridItem from "../grid-item";
 
@@ -32,7 +31,7 @@ GridContainer.propTypes = {
     });
     return error;
   },
-  ...propTypes.space,
-  gridGap: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  ...styledSystemPropTypes.space,
+  ...styledSystemPropTypes.grid
 };
 export default GridContainer;

package/esm/components/grid/grid-container/grid-container.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { SpaceProps } from "styled-system";
+import { SpaceProps, GridProps } from "styled-system";
 import { GridItemProps } from "../grid-item/grid-item";
 
 type GridContainerChild =
@@ -8,11 +8,9 @@ type GridContainerChild =
   | null
   | undefined;
 
-export interface GridContainerProps extends SpaceProps {
+export interface GridContainerProps extends SpaceProps, GridProps {
   /** Defines the Components to be rendered within the GridContainer. Requires GridItemProps */
   children?: GridContainerChild | GridContainerChild[];
-  /** Any valid CSS value to override default grid-gap */
-  gridGap?: string;
 }
 
 declare function GridContainer(props: GridContainerProps): JSX.Element;

package/esm/components/grid/grid-container/grid-container.style.js

@@ -27,10 +27,7 @@ const GridContainerStyle = styled.div`
 
   @media screen {
     ${space}
-    ${({
-  gridGap
-}) => grid({
-  gridGap
-})}
+    ${grid}
+  }
 `;
 export default GridContainerStyle;

package/esm/components/grid/grid-item/grid-item.component.d.ts

@@ -5,6 +5,8 @@ declare namespace GridItem {
         const responsiveSettings: PropTypes.Requireable<(PropTypes.InferProps<{
             /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
             alignSelf: PropTypes.Requireable<string>;
+            /** Shorthand property for gridColumn and gridRow */
+            gridArea: PropTypes.Requireable<string | number>;
             /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
             gridColumn: PropTypes.Requireable<string | number>;
             /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
@@ -16,6 +18,7 @@ declare namespace GridItem {
         }> | null | undefined)[]>;
         const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         const alignSelf: PropTypes.Requireable<string>;
+        const gridArea: PropTypes.Requireable<string | number>;
         const gridColumn: PropTypes.Requireable<string | number>;
         const gridRow: PropTypes.Requireable<string | number>;
         const justifySelf: PropTypes.Requireable<string>;

package/esm/components/grid/grid-item/grid-item.component.js

@@ -26,6 +26,9 @@ GridItem.propTypes = {
   /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
   alignSelf: PropTypes.string,
 
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
   gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -39,6 +42,9 @@ GridItem.propTypes = {
     /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
     alignSelf: PropTypes.string,
 
+    /** Shorthand property for gridColumn and gridRow */
+    gridArea: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
     /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
     gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 

package/esm/components/grid/grid-item/grid-item.d.ts

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { PaddingProps } from "styled-system";
+import {
+  PaddingProps,
+  GridAreaProps,
+  GridRowProps,
+  GridColumnProps,
+} from "styled-system";
 
 interface ResponsiveSettingsShape extends PaddingProps {
   /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
@@ -8,10 +13,12 @@ interface ResponsiveSettingsShape extends PaddingProps {
   justifySelf?: string;
   /** Maximum width of the item */
   maxWidth?: string;
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea?: GridAreaProps;
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: string | number;
+  gridColumn?: GridColumnProps;
   /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: string | number;
+  gridRow?: GridRowProps;
 }
 
 export interface GridItemProps extends PaddingProps {
@@ -21,10 +28,12 @@ export interface GridItemProps extends PaddingProps {
   justifySelf?: string;
   /** Defines the Component(s) to be rendered within the GridItem */
   children?: React.ReactNode;
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea?: GridAreaProps;
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: string | number;
+  gridColumn?: GridColumnProps;
   /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: string | number;
+  gridRow?: GridRowProps;
   responsiveSettings?: ResponsiveSettingsShape[];
 }
 

package/esm/components/grid/grid-item/grid-item.style.js

@@ -9,6 +9,7 @@ function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
       alignSelf,
+      gridArea,
       gridColumn,
       gridRow,
       maxWidth,
@@ -23,6 +24,7 @@ function responsiveGridItem(responsiveSettings) {
       @media screen and (max-width: ${maxWidth}) {
         align-self: ${alignSelf || "stretch"};
         justify-self: ${justifySelf || "stretch"};
+        grid-area: ${gridArea};
         grid-column: ${gridColumn};
         grid-row: ${gridRow};
         padding: ${getSpacing(p)};
@@ -81,33 +83,30 @@ export function getSpacing(prop) {
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 const GridItemStyle = styled.div`
   margin: 0;
+  ${padding}
 
   ${({
-  justifySelf
-}) => flexbox({
+  alignSelf,
+  justifySelf,
+  gridArea,
+  gridColumn,
+  gridRow,
+  responsiveSettings
+}) => css`
+    ${flexbox({
+  alignSelf,
   justifySelf
 })}
-  ${({
-  alignSelf
-}) => flexbox({
-  alignSelf
-})}
-  ${padding}
-  ${({
+    ${grid({
+  gridArea,
+  gridColumn,
   gridRow
-}) => grid({
-  gridRow
-})}
-  ${({
-  gridColumn
-}) => grid({
-  gridColumn
-})}
-  ${({
-  responsiveSettings
-}) => responsiveSettings && css`
+})};
+
+    ${responsiveSettings && css`
       ${responsiveGridItem(responsiveSettings)};
     `}
+  `}
 `;
 GridItemStyle.propTypes = {
   alignSelf: PropTypes.string,
@@ -117,6 +116,7 @@ GridItemStyle.propTypes = {
   ...paddingPropTypes,
   responsiveSettings: PropTypes.arrayOf(PropTypes.shape({
     alignSelf: PropTypes.string,
+    gridArea: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     gridRow: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     justifySelf: PropTypes.string,
@@ -125,7 +125,6 @@ GridItemStyle.propTypes = {
   }))
 };
 GridItemStyle.defaultProps = {
-  gridColumn: "1 / 13",
-  gridRow: "auto"
+  gridArea: "auto / 1 / auto / 13"
 };
 export default GridItemStyle;

package/lib/components/grid/grid-container/grid-container.component.js

@@ -7,9 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+var _propTypes = _interopRequireDefault(require("@styled-system/prop-types"));
 
 var _gridContainer = _interopRequireDefault(require("./grid-container.style"));
 
@@ -47,8 +45,8 @@ GridContainer.propTypes = {
 
     return error;
   },
-  ..._propTypes2.default.space,
-  gridGap: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  ..._propTypes.default.space,
+  ..._propTypes.default.grid
 };
 var _default = GridContainer;
 exports.default = _default;

package/lib/components/grid/grid-container/grid-container.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { SpaceProps } from "styled-system";
+import { SpaceProps, GridProps } from "styled-system";
 import { GridItemProps } from "../grid-item/grid-item";
 
 type GridContainerChild =
@@ -8,11 +8,9 @@ type GridContainerChild =
   | null
   | undefined;
 
-export interface GridContainerProps extends SpaceProps {
+export interface GridContainerProps extends SpaceProps, GridProps {
   /** Defines the Components to be rendered within the GridContainer. Requires GridItemProps */
   children?: GridContainerChild | GridContainerChild[];
-  /** Any valid CSS value to override default grid-gap */
-  gridGap?: string;
 }
 
 declare function GridContainer(props: GridContainerProps): JSX.Element;

package/lib/components/grid/grid-container/grid-container.style.js

@@ -38,11 +38,8 @@ const GridContainerStyle = _styledComponents.default.div`
 
   @media screen {
     ${_styledSystem.space}
-    ${({
-  gridGap
-}) => (0, _styledSystem.grid)({
-  gridGap
-})}
+    ${_styledSystem.grid}
+  }
 `;
 var _default = GridContainerStyle;
 exports.default = _default;

package/lib/components/grid/grid-item/grid-item.component.d.ts

@@ -5,6 +5,8 @@ declare namespace GridItem {
         const responsiveSettings: PropTypes.Requireable<(PropTypes.InferProps<{
             /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
             alignSelf: PropTypes.Requireable<string>;
+            /** Shorthand property for gridColumn and gridRow */
+            gridArea: PropTypes.Requireable<string | number>;
             /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
             gridColumn: PropTypes.Requireable<string | number>;
             /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
@@ -16,6 +18,7 @@ declare namespace GridItem {
         }> | null | undefined)[]>;
         const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         const alignSelf: PropTypes.Requireable<string>;
+        const gridArea: PropTypes.Requireable<string | number>;
         const gridColumn: PropTypes.Requireable<string | number>;
         const gridRow: PropTypes.Requireable<string | number>;
         const justifySelf: PropTypes.Requireable<string>;

package/lib/components/grid/grid-item/grid-item.component.js

@@ -38,6 +38,9 @@ GridItem.propTypes = {
   /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
   alignSelf: _propTypes.default.string,
 
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
   gridColumn: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 
@@ -51,6 +54,9 @@ GridItem.propTypes = {
     /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
     alignSelf: _propTypes.default.string,
 
+    /** Shorthand property for gridColumn and gridRow */
+    gridArea: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+
     /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
     gridColumn: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 

package/lib/components/grid/grid-item/grid-item.d.ts

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { PaddingProps } from "styled-system";
+import {
+  PaddingProps,
+  GridAreaProps,
+  GridRowProps,
+  GridColumnProps,
+} from "styled-system";
 
 interface ResponsiveSettingsShape extends PaddingProps {
   /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
@@ -8,10 +13,12 @@ interface ResponsiveSettingsShape extends PaddingProps {
   justifySelf?: string;
   /** Maximum width of the item */
   maxWidth?: string;
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea?: GridAreaProps;
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: string | number;
+  gridColumn?: GridColumnProps;
   /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: string | number;
+  gridRow?: GridRowProps;
 }
 
 export interface GridItemProps extends PaddingProps {
@@ -21,10 +28,12 @@ export interface GridItemProps extends PaddingProps {
   justifySelf?: string;
   /** Defines the Component(s) to be rendered within the GridItem */
   children?: React.ReactNode;
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea?: GridAreaProps;
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: string | number;
+  gridColumn?: GridColumnProps;
   /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: string | number;
+  gridRow?: GridRowProps;
   responsiveSettings?: ResponsiveSettingsShape[];
 }
 

package/lib/components/grid/grid-item/grid-item.style.js

@@ -28,6 +28,7 @@ function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
       alignSelf,
+      gridArea,
       gridColumn,
       gridRow,
       maxWidth,
@@ -42,6 +43,7 @@ function responsiveGridItem(responsiveSettings) {
       @media screen and (max-width: ${maxWidth}) {
         align-self: ${alignSelf || "stretch"};
         justify-self: ${justifySelf || "stretch"};
+        grid-area: ${gridArea};
         grid-column: ${gridColumn};
         grid-row: ${gridRow};
         padding: ${getSpacing(p)};
@@ -101,33 +103,30 @@ function getSpacing(prop) {
 const paddingPropTypes = (0, _utils.filterStyledSystemPaddingProps)(_propTypes.default.space);
 const GridItemStyle = _styledComponents.default.div`
   margin: 0;
+  ${_space.padding}
 
   ${({
-  justifySelf
-}) => (0, _styledSystem.flexbox)({
+  alignSelf,
+  justifySelf,
+  gridArea,
+  gridColumn,
+  gridRow,
+  responsiveSettings
+}) => (0, _styledComponents.css)`
+    ${(0, _styledSystem.flexbox)({
+  alignSelf,
   justifySelf
 })}
-  ${({
-  alignSelf
-}) => (0, _styledSystem.flexbox)({
-  alignSelf
-})}
-  ${_space.padding}
-  ${({
+    ${(0, _styledSystem.grid)({
+  gridArea,
+  gridColumn,
   gridRow
-}) => (0, _styledSystem.grid)({
-  gridRow
-})}
-  ${({
-  gridColumn
-}) => (0, _styledSystem.grid)({
-  gridColumn
-})}
-  ${({
-  responsiveSettings
-}) => responsiveSettings && (0, _styledComponents.css)`
+})};
+
+    ${responsiveSettings && (0, _styledComponents.css)`
       ${responsiveGridItem(responsiveSettings)};
     `}
+  `}
 `;
 GridItemStyle.propTypes = {
   alignSelf: _propTypes2.default.string,
@@ -137,6 +136,7 @@ GridItemStyle.propTypes = {
   ...paddingPropTypes,
   responsiveSettings: _propTypes2.default.arrayOf(_propTypes2.default.shape({
     alignSelf: _propTypes2.default.string,
+    gridArea: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     gridColumn: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     gridRow: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     justifySelf: _propTypes2.default.string,
@@ -145,8 +145,7 @@ GridItemStyle.propTypes = {
   }))
 };
 GridItemStyle.defaultProps = {
-  gridColumn: "1 / 13",
-  gridRow: "auto"
+  gridArea: "auto / 1 / auto / 13"
 };
 var _default = GridItemStyle;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.42.0",
+  "version": "104.43.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {