@s-ui/react-layout-grid - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

lib/index.js

@@ -6,3 +6,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import cx from 'classnames';
-import { ALIGN_ITEMS, BASE_CLASS, JUSTIFY_CONTENT, GUTTER_VALUES, BREAKPOINTS } from './settings';
+import { ALIGN_ITEMS, ALIGN_CONTENT, BASE_CLASS, JUSTIFY_CONTENT, GUTTER_VALUES, CELL_NUMBERS, BREAKPOINTS } from './settings';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -42,2 +42,3 @@
   var _transition = transition(props),
+      alignContent = _transition.alignContent,
       alignItems = _transition.alignItems,
@@ -48,3 +49,3 @@ children = _transition.children,
 
-  var classNames = cx("" + BASE_CLASS, alignItems && BASE_CLASS + "--ai-" + alignItems, justifyContent && BASE_CLASS + "--jc-" + justifyContent, getGutterClassNames(gutter));
+  var classNames = cx("" + BASE_CLASS, Object.values(ALIGN_CONTENT).includes(alignContent) && BASE_CLASS + "--ac-" + alignContent, Object.values(ALIGN_ITEMS).includes(alignItems) && BASE_CLASS + "--ai-" + alignItems, Object.values(JUSTIFY_CONTENT).includes(justifyContent) && BASE_CLASS + "--jc-" + justifyContent, getGutterClassNames(gutter));
   return /*#__PURE__*/_jsx("div", {
@@ -58,2 +59,2 @@ className: classNames,
 export default LayoutGrid;
-export { LayoutGridItem, ALIGN_ITEMS as LayoutGridAlignItems, JUSTIFY_CONTENT as LayoutGridJustifyContent, GUTTER_VALUES as LayoutGridGutterValues, BREAKPOINTS as LayoutGridBreakpoints };
+export { LayoutGridItem, ALIGN_CONTENT as LayoutGridAlignContent, ALIGN_ITEMS as LayoutGridAlignItems, JUSTIFY_CONTENT as LayoutGridJustifyContent, GUTTER_VALUES as LayoutGridGutterValues, CELL_NUMBERS as LayoutGridCellNumbers, BREAKPOINTS as LayoutGridBreakpoints };

lib/settings.js

@@ -18,5 +18,17 @@ // Base class for the component
 export var ALIGN_ITEMS = {
+  BASELINE: 'baseline',
   CENTER: 'center',
   FLEX_START: 'flex-start',
-  FLEX_END: 'flex-end'
+  FLEX_END: 'flex-end',
+  STRETCH: 'stretch'
+}; // All `align-content` property values allowed
+
+export var ALIGN_CONTENT = {
+  CENTER: 'center',
+  FLEX_START: 'flex-start',
+  FLEX_END: 'flex-end',
+  SPACE_AROUND: 'space-around',
+  SPACE_BETWEEN: 'space-between',
+  SPACE_EVENLY: 'space-evenly',
+  STRETCH: 'stretch'
 }; // All `justify-content` property values allowed
@@ -23,0 +35,0 @@

package.json

 {
   "name": "@s-ui/react-layout-grid",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -34,4 +34,4 @@ # LayoutGrid
 <LayoutGrid>
-  <LayoutGridItem xxs={4}>...</LayoutGridItem>
-  <LayoutGridItem xxs={8}>...</LayoutGridItem>
+  <LayoutGridItem colSpan={4}>...</LayoutGridItem>
+  <LayoutGridItem colSpan={8}>...</LayoutGridItem>
 </LayoutGrid>
@@ -44,6 +44,6 @@ ```
 <LayoutGrid>
-  <LayoutGridItem s={4} m={2} xl={6}>
+  <LayoutGridItem xxs={1} s={4} m={2} xl={6}>
     ...
   </LayoutGridItem>
-  <LayoutGridItem s={8} m={10} xl={6}>
+  <LayoutGridItem xxs={1} s={8} m={10} xl={6}>
     ...
@@ -54,6 +54,6 @@ </LayoutGridItem>
 
-With `alignItems` and `justifyContent` props
+With `alignItems` and `justifyContent` and `alignContent` props
 
 ```js
-<LayoutGrid alignItems="center" justifyContent="space-around">
+<LayoutGrid alignItems="center" justifyContent="space-around" alignContent="stretch">
   <LayoutGridItem s={4} xl={6}>
@@ -60,0 +60,0 @@ ...

No alert changes

Improved metrics

Total package byte prevSize

14358

increased by7.84%

Lines of code

151

increased by9.42%

No dependency changes