Merge pull request #27 from make-software/add-dynamic-page-tile-bottom-gap

add dynamic value as bottom gap

Author: eugenebelov

dist/cspr-design.es.js

@@ -16840,7 +16840,8 @@ const Eh = S.ul.withConfig({
   componentId: "sc-2b2p7u-0"
 })(({
   theme: e,
-  withPadding: t
+  withPadding: t,
+  bottomGap: n = 24
 }) => e.withMedia({
   height: "100%",
   display: "flex",
@@ -16849,8 +16850,7 @@ const Eh = S.ul.withConfig({
   background: e.styleguideColors.backgroundPrimary,
   boxShadow: e.boxShadow.block,
   borderRadius: e.borderRadius.base,
-  marginBottom: 24,
-  // make it reponsive
+  marginBottom: n,
   padding: t ? "16px 0" : void 0
 }));
 function CC(e) {

dist/cspr-design.umd.js

@@ -1,6 +1,7 @@
 import { BaseProps } from '../../types';
 export interface PageTileProps extends BaseProps {
     withPadding?: boolean;
+    bottomGap?: number;
 }
 export declare function PageTile(props: PageTileProps): import("react/jsx-runtime").JSX.Element;
 export default PageTile;

dist/lib/components/page-tile/page-tile.d.ts

@@ -5,20 +5,22 @@ import { BaseProps } from '../../types';
 /* eslint-disable-next-line */
 export interface PageTileProps extends BaseProps {
   withPadding?: boolean;
+  bottomGap?: number;
 }
 
-const StyledPageTile = styled.div<PageTileProps>(({ theme, withPadding }) =>
-  theme.withMedia({
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    background: theme.styleguideColors.backgroundPrimary,
-    boxShadow: theme.boxShadow.block,
-    borderRadius: theme.borderRadius.base,
-    marginBottom: 24, // make it reponsive
-    padding: withPadding ? '16px 0' : undefined,
-  })
+const StyledPageTile = styled.div<PageTileProps>(
+  ({ theme, withPadding, bottomGap = 24 }) =>
+    theme.withMedia({
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      background: theme.styleguideColors.backgroundPrimary,
+      boxShadow: theme.boxShadow.block,
+      borderRadius: theme.borderRadius.base,
+      marginBottom: bottomGap,
+      padding: withPadding ? '16px 0' : undefined,
+    }),
 );
 
 export function PageTile(props: PageTileProps) {