@redsift/design-system 9.0.0-alpha.6 → 9.0.0-alpha.7

package/index.d.ts

@@ -1964,8 +1964,15 @@ declare function useFocusOnList(): UseFocusGroupProps;
  * Component props.
  */
 interface GridProps extends ComponentProps<'div'>, StylingProps, InternalSpacingProps, GridLayoutProps {
+    /** Whether the grid has divider or not. The number of pixels defining the gap between columns and rows is mandatory. This replaces the grid gap property. */
+    divider?: {
+        colGap: number;
+        rowGap: number;
+    };
 }
-type StyledGridProps = GridProps;
+type StyledGridProps = GridProps & {
+    $divider: GridProps['divider'];
+};
 
 /**
  * Component props.

package/index.js

@@ -10300,10 +10300,34 @@ const StyledGrid = styled.div`
   } = _ref;
   return inline ? 'inline-grid' : 'grid';
 }};
+  flex: 1;
 
   ${baseStyling}
   ${baseInternalSpacing}
   ${baseGrid}
+
+  ${_ref2 => {
+  let {
+    $divider
+  } = _ref2;
+  return $divider ? css`
+          overflow: hidden;
+          .redsift-grid-item {
+            margin: ${$divider.rowGap / 2}px 0 ${$divider.rowGap / 2}px -1px;
+            padding: 0 ${$divider.colGap / 2}px;
+            border-left: 1px solid var(--redsift-color-neutral-lightgrey);
+
+            ::after {
+              content: '';
+              background-color: var(--redsift-color-neutral-lightgrey);
+              width: calc(100% + ${$divider.colGap}px);
+              height: 1px;
+              margin-left: -${$divider.colGap / 2}px;
+              margin-top: ${$divider.rowGap / 2}px;
+            }
+          }
+        ` : '';
+}}
 `;
 
 /**
@@ -10339,7 +10363,7 @@ GridItem.className = CLASSNAME$b;
 GridItem.defaultProps = DEFAULT_PROPS$b;
 GridItem.displayName = COMPONENT_NAME$b;
 
-const _excluded$c = ["children", "className"];
+const _excluded$c = ["children", "className", "divider", "gap"];
 const COMPONENT_NAME$a = 'Grid';
 const CLASSNAME$a = 'redsift-grid';
 const DEFAULT_PROPS$a = {};
@@ -10350,12 +10374,16 @@ const DEFAULT_PROPS$a = {};
 const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
-      className
+      className,
+      divider,
+      gap
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$c);
   return /*#__PURE__*/React__default.createElement(StyledGrid, _extends$1({}, forwardedProps, {
+    gap: divider ? undefined : gap,
     className: classNames(BaseGrid.className, className),
-    ref: ref
+    ref: ref,
+    $divider: divider
   }), children);
 });
 BaseGrid.className = CLASSNAME$a;