fix(flex): pass item props within flex component

smakosh · Feb 19, 2021 · 840a622 · 840a622
1 parent 868e3f9
commit 840a622
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/src/Flex.tsx b/src/Flex.tsx
@@ -16,9 +16,9 @@ const StyledFlex = styled.div<Omit<FlexProps, 'total'>>`
     width: 100%;
 
     @media (max-width: 960px) {
-      max-width: ${({ colTablet, gabTablet = 1 }) =>
+      max-width: ${({ colTablet, gapTablet = 1 }) =>
         colTablet && colTablet < 12
-          ? `${(100 * colTablet) / 12 - gabTablet}%`
+          ? `${(100 * colTablet) / 12 - gapTablet}%`
           : '100%'};
     }
 
@@ -37,7 +37,7 @@ const Flex: React.FC<FlexProps> = ({
   colTablet,
   colMobile,
   gap,
-  gabTablet,
+  gapTablet,
   gapMobile,
   align,
   justifyContent,
@@ -49,15 +49,22 @@ const Flex: React.FC<FlexProps> = ({
     colTablet={colTablet}
     colMobile={colMobile}
     gap={gap}
-    gabTablet={gabTablet}
+    gapTablet={gapTablet}
     gapMobile={gapMobile}
     align={align}
     justifyContent={justifyContent}
     className={className}
     style={style}
   >
     {children}
-    <Item col={col} colTablet={colTablet} colMobile={colMobile} />
+    <Item
+      col={col}
+      colTablet={colTablet}
+      colMobile={colMobile}
+      gap={gap}
+      gapTablet={gapTablet}
+      gapMobile={gapMobile}
+    />
   </StyledFlex>
 );
 

diff --git a/src/Item.ts b/src/Item.ts
@@ -13,9 +13,9 @@ const Item = styled.div<ItemProps>`
 	`}
 
   @media (max-width: 960px) {
-    max-width: ${({ colTablet, gabTablet = 1 }) =>
+    max-width: ${({ colTablet, gapTablet = 1 }) =>
       colTablet && colTablet < 12
-        ? `${(100 * colTablet) / 12 - gabTablet}%`
+        ? `${(100 * colTablet) / 12 - gapTablet}%`
         : '100%'};
     margin-bottom: ${({ marginBottom = 10 }) => `${marginBottom}px`};
   }

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -2,7 +2,7 @@ import { HTMLAttributes, Component } from 'react';
 
 export interface ItemProps extends HTMLAttributes<HTMLDivElement> {
   gap?: number;
-  gabTablet?: number;
+  gapTablet?: number;
   gapMobile?: number;
   col?: number;
   colTablet?: number;
@@ -16,7 +16,7 @@ export interface ItemProps extends HTMLAttributes<HTMLDivElement> {
 
 export interface FlexProps {
   gap?: number;
-  gabTablet?: number;
+  gapTablet?: number;
   gapMobile?: number;
   align?: string;
   justifyContent?: string;