Flex updates

apps/website/screens/components/flex/code/FlexCodePage.tsx

@@ -40,7 +40,7 @@ const sections = [
           <td>justifyContent</td>
           <td>
             <TableCode>
-              'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'right' | 'center' | 'space-between' |
+              'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'normal' | 'right' | 'center' | 'space-between' |
               'space-around' | 'space-evenly'
             </TableCode>
           </td>
@@ -52,15 +52,15 @@ const sections = [
             for further information.
           </td>
           <td>
-            <TableCode>'flex-start'</TableCode>
+            <TableCode>'normal'</TableCode>
           </td>
         </tr>
         <tr>
           <td>alignItems</td>
           <td>
             <TableCode>
               'stretch' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'self-start' | 'self-end' | 'center' |
-              'baseline'
+              'baseline' | 'normal'
             </TableCode>
           </td>
           <td>
@@ -71,7 +71,7 @@ const sections = [
             for further information.
           </td>
           <td>
-            <TableCode>'stretch'</TableCode>
+            <TableCode>'normal'</TableCode>
           </td>
         </tr>
         <tr>
@@ -148,7 +148,7 @@ const sections = [
             </ul>
           </td>
           <td>
-            <TableCode>'0rem'</TableCode>
+            -
           </td>
         </tr>
         <tr>

packages/lib/src/flex/Flex.tsx

@@ -1,54 +1,44 @@
 import styled from "styled-components";
 import FlexPropsType, { StyledProps } from "./types";
 
+const Flex = styled.div<StyledProps>`
+  display: flex;
+  ${(props) => `
+    ${typeof props.alignContent === "string" ? `align-content: ${props.alignContent};` : ""}
+    ${typeof props.alignItems === "string" ? `align-items: ${props.alignItems};` : ""}
+    ${typeof props.alignSelf === "string" ? `align-self: ${props.alignSelf};` : ""}
+    ${typeof props.$basis === "string" ? `flex-basis: ${props.$basis};` : ""}
+    ${typeof props.$direction === "string" ? `flex-direction: ${props.$direction};` : ""}
+    ${typeof props.$gap === "string" ? `gap: ${props.$gap};` : ""}
+    ${typeof props.$gap === "object" ? `column-gap: ${props.$gap.columnGap}; row-gap: ${props.$gap.rowGap};` : ""}
+    ${typeof props.$grow === "number" ? `flex-grow: ${props.$grow};` : ""}
+    ${typeof props.justifyContent === "string" ? `justify-content: ${props.justifyContent};` : ""}
+    ${typeof props.$order === "number" ? `order: ${props.$order};` : ""}
+    ${typeof props.$shrink === "number" ? `flex-shrink: ${props.$shrink};` : ""}
+    ${typeof props.$wrap === "string" ? `flex-wrap: ${props.$wrap};` : ""}
+  `}
+`;
+
 const DxcFlex = ({
-  direction = "row",
-  wrap = "nowrap",
-  gap = "0rem",
-  order = 0,
-  grow = 0,
-  shrink = 1,
-  basis = "auto",
-  children,
+  basis,
+  direction,
+  gap,
+  grow,
+  order,
+  shrink,
+  wrap,
   ...props
 }: FlexPropsType): JSX.Element => (
   <Flex
+    $basis={basis}
     $direction={direction}
-    $wrap={wrap}
-    $order={order}
+    $gap={gap}
     $grow={grow}
+    $order={order}
     $shrink={shrink}
-    $basis={basis}
-    $gap={gap}
+    $wrap={wrap}
     {...props}
-  >
-    {children}
-  </Flex>
+  />
 );
 
-const Flex = styled.div<StyledProps>`
-  display: flex;
-  ${({
-    justifyContent = "flex-start",
-    alignItems = "stretch",
-    alignContent = "normal",
-    alignSelf = "auto",
-    ...props
-  }) => `
-    flex-direction: ${props.$direction}; 
-    flex-wrap: ${props.$wrap}; 
-    justify-content: ${justifyContent}; 
-    align-items: ${alignItems};
-    align-content: ${alignContent};
-    align-self: ${alignSelf};
-    gap: ${props.$gap != null && typeof props.$gap === "string" ? (props.$gap ?? "") : ""}}
-    row-gap: ${props.$gap != null && typeof props.$gap === "object" ? (props.$gap.rowGap ?? "") : ""}}
-    column-gap: ${props.$gap != null && typeof props.$gap === "object" ? (props.$gap.columnGap ?? "") : ""}}
-    order: ${props.$order};
-    flex-grow: ${props.$grow};
-    flex-shrink: ${props.$shrink};
-    flex-basis: ${props.$basis};
-  `}
-`;
-
 export default DxcFlex;

packages/lib/src/flex/types.ts

@@ -13,6 +13,7 @@ type CommonProps = {
     | "start"
     | "end"
     | "left"
+    | "normal"
     | "right"
     | "center"
     | "space-between"
@@ -32,7 +33,8 @@ type CommonProps = {
     | "self-start"
     | "self-end"
     | "center"
-    | "baseline";
+    | "baseline"
+    | "normal";
   /**
    * Sets the align-content CSS property.
    *