@elliemae/ds-grid 2.4.1 → 2.4.2-rc.9

package/cjs/GridItem.js

@@ -14,7 +14,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 /* eslint-disable max-lines */
 const GridItem = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1ch24x4-0"
-})(["display:grid;display:-ms-grid;column-gap:", ";row-gap:", ";", " ", " ", " ", " ", " ", " ", " ", " ", ""], _ref => {
+})(["display:grid;display:-ms-grid;column-gap:", ";row-gap:", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], _ref => {
   let {
     gutter
   } = _ref;
@@ -24,6 +24,6 @@ const GridItem = /*#__PURE__*/styled__default["default"].div.withConfig({
     gutter
   } = _ref2;
   return dsSystem.mapGap(gutter);
-}, styledComponents.grids, styledComponents.flexboxes, styledComponents.sizing, styledComponents.space, styledComponents.height, styledComponents.width, styles.manageCols, styles.manageRows, styles.manageSpan);
+}, styledComponents.grids, styledComponents.flexboxes, styledComponents.sizing, styledComponents.space, styledComponents.height, styledComponents.width, styles.manageCols, styles.manageRows, styles.manageSpan, styledComponents.boxShadow, dsSystem.backgroundColorSetter);
 
 exports.GridItem = GridItem;

package/cjs/react-desc-prop-types.js

@@ -51,7 +51,10 @@ const DSGridPropTypes = _objectSpread(_objectSpread(_objectSpread({}, dsPropsHel
   gutter: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string]).description('Space between cells prop').defaultValue(0),
   wrap: dsPropsHelpers.PropTypes.oneOf(constants.wrap).description('Wrap type').defaultValue(constants.wrap[0]),
   height: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string]).description('Grid height.'),
-  width: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string]).description('Grid width.')
+  width: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string]).description('Grid width.'),
+  backgroundColor: dsPropsHelpers.PropTypes.string.description('Sets background color.'),
+  bg: dsPropsHelpers.PropTypes.string.description('Sets background color.'),
+  boxShadow: dsPropsHelpers.PropTypes.oneOf(constants.boxShadow).description('Sets background color.')
 });
 
 exports.DSGridPropTypes = DSGridPropTypes;

package/cjs/utils/constants.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const justifyPlacement = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
 const alignItemsPlacement = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'];
 const wrap = ['wrap', 'nowrap', 'wrap-reverse'];
+const boxShadow = ['xs', 's', 'm', 'l', 'xl'];
 
 exports.alignItemsPlacement = alignItemsPlacement;
+exports.boxShadow = boxShadow;
 exports.justifyPlacement = justifyPlacement;
 exports.wrap = wrap;

package/esm/GridItem.js

@@ -1,12 +1,12 @@
 import styled from 'styled-components';
-import { grids, flexboxes, sizing, space, height, width } from '@xstyled/styled-components';
-import { mapGap } from '@elliemae/ds-system';
+import { grids, flexboxes, sizing, space, height, width, boxShadow } from '@xstyled/styled-components';
+import { mapGap, backgroundColorSetter } from '@elliemae/ds-system';
 import { manageCols, manageRows, manageSpan } from './utils/styles.js';
 
 /* eslint-disable max-lines */
 const GridItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1ch24x4-0"
-})(["display:grid;display:-ms-grid;column-gap:", ";row-gap:", ";", " ", " ", " ", " ", " ", " ", " ", " ", ""], _ref => {
+})(["display:grid;display:-ms-grid;column-gap:", ";row-gap:", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], _ref => {
   let {
     gutter
   } = _ref;
@@ -16,6 +16,6 @@ const GridItem = /*#__PURE__*/styled.div.withConfig({
     gutter
   } = _ref2;
   return mapGap(gutter);
-}, grids, flexboxes, sizing, space, height, width, manageCols, manageRows, manageSpan);
+}, grids, flexboxes, sizing, space, height, width, manageCols, manageRows, manageSpan, boxShadow, backgroundColorSetter);
 
 export { GridItem };

package/esm/react-desc-prop-types.js

@@ -5,7 +5,7 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';
-import { alignItemsPlacement, justifyPlacement, wrap } from './utils/constants.js';
+import { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from './utils/constants.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -43,7 +43,10 @@ const DSGridPropTypes = _objectSpread(_objectSpread(_objectSpread({}, globalAttr
   gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop').defaultValue(0),
   wrap: PropTypes.oneOf(wrap).description('Wrap type').defaultValue(wrap[0]),
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid height.'),
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid width.')
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid width.'),
+  backgroundColor: PropTypes.string.description('Sets background color.'),
+  bg: PropTypes.string.description('Sets background color.'),
+  boxShadow: PropTypes.oneOf(boxShadow).description('Sets background color.')
 });
 
 export { DSGridPropTypes, defaultProps };

package/esm/utils/constants.js

@@ -1,5 +1,6 @@
 const justifyPlacement = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
 const alignItemsPlacement = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'];
 const wrap = ['wrap', 'nowrap', 'wrap-reverse'];
+const boxShadow = ['xs', 's', 'm', 'l', 'xl'];
 
-export { alignItemsPlacement, justifyPlacement, wrap };
+export { alignItemsPlacement, boxShadow, justifyPlacement, wrap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-grid",
-  "version": "2.4.1",
+  "version": "2.4.2-rc.9",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Grid",
   "module": "./esm/index.js",
@@ -56,7 +56,7 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-system": "2.4.1",
+    "@elliemae/ds-system": "2.4.2-rc.9",
     "@xstyled/styled-components": "~3.1.1",
     "react-desc": "~4.1.3"
   },

package/types/react-desc-prop-types.d.ts

@@ -7,6 +7,7 @@ export declare namespace DSGridT {
         medium?: string | number[];
         large?: string | number[];
     }
+    type Shadow = 'xs' | 's' | 'm' | 'l' | 'xs';
     interface SpanBreakpoints {
         small?: number;
         medium?: number;
@@ -41,6 +42,9 @@ export declare namespace DSGridT {
         isSpanParent: boolean;
         span?: number | SpanBreakpoints;
         ref: React.ForwardedRef<HTMLDivElement>;
+        boxShadow?: Shadow;
+        backgroundColor?: string;
+        bg?: string;
     }
 }
 export declare const defaultProps: {

package/types/tests/DSGrid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/utils/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const justifyPlacement: string[];
 export declare const alignItemsPlacement: string[];
 export declare const wrap: string[];
+export declare const boxShadow: string[];