Adding gap prop to Flex component

lib/components/Flex/Flex.mdx

@@ -28,39 +28,4 @@ You can use `space`, `layout`, and `flexbox` properties with `Flex`.
 - [CSS Flexbox reference](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
 - [systemtheme.js](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) (our arrays for design system values)
 
-By default, we've set certain values on `Flex` properties as documented in the table below.
-
 <Controls component={Flex} />
-
-## Upgrading
-
-This component is a **breaking change** that replaces the [previous Flex component](https://www.npmjs.com/package/styled-flex-component). Use the following table as a guide to convert from the old properties to new `Flex` properties. Refer to [systemtheme.js](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) for values.
-
-### `Flex` properties
-
-| **Old**           | **New**                                             |
-| ----------------- | --------------------------------------------------- |
-| `full`            | `width="100%" height="100%" flexBasis="100%"`       |
-| `inline`          | `display="inline-flex"`                             |
-| `center`          | `justifyContent="center" alignItems="center"`       |
-| `rowReverse`      | `flexDirection="row-reverse"`                       |
-| `column`          | `flexDirection="column"`                            |
-| `columnReverse`   | `flexDirection="column-reverse"`                    |
-| `wrap`            | `flexWrap="wrap"`                                   |
-| `wrapReverse`     | `flexWrap='wrap-reverse'`                           |
-| `justifyStart`    | `justifyContent="flex-start"`                       |
-| `justifyEnd`      | `justifyContent="flex-end"`                         |
-| `justifyCenter`   | `justifyContent="center"`                           |
-| `justifyBetween`  | `justifyContent="space-between"`                    |
-| `justifyAround`   | `justifyContent="space-around"`                     |
-| `justifyEvenly`   | `justifyContent="space-evenly"` (default behaviour) |
-| `alignCenter`     | `alignItems="center"`                               |
-| `alignStart`      | `alignItems="flex-start"`                           |
-| `alignEnd`        | `alignItems="flex-end"`                             |
-| `alignBaseline`   | `alignItems="baseline"`                             |
-| `alignStretch`    | `alignItems="stretch"`                              |
-| `contentCenter`   | `alignContent="center"`                             |
-| `contentStart`    | `alignContent="flex-start"`                         |
-| `contentEnd`      | `alignContent="flex-end"`                           |
-| `contentBaseline` | `alignContent="baseline"`                           |
-| `contentStretch`  | `alignContent="stretch"`                            |

lib/components/Flex/Flex.stories.js

@@ -1,23 +1,20 @@
 import React from "react";
 import Flex from ".";
 import Button from "../Button";
-import Spacer from "../Spacer";
 
 export default {
   title: "Components/Flex",
   component: Flex
 };
 
 export const basicFlex = () => (
-  <Flex>
-    <Spacer mx="s">
-      <Button>Button 1</Button>
-      <Button>Button 2</Button>
-      <Button>Button 3</Button>
-      <Button>Button 4</Button>
-      <Button>Button 5</Button>
-      <Button>Button 6</Button>
-    </Spacer>
+  <Flex gap="r" flexWrap="wrap">
+    <Button>Button 1</Button>
+    <Button>Button 2</Button>
+    <Button>Button 3</Button>
+    <Button>Button 4</Button>
+    <Button>Button 5</Button>
+    <Button>Button 6</Button>
   </Flex>
 );
 basicFlex.storyName = "Basic Flex";

lib/components/Flex/FlexItem.mdx

@@ -18,17 +18,3 @@ To use `FlexItem` to control the spacing between children of `Flex` you must als
 You don't necessarily need to use `<FlexItem>` as the direct child element to `<Flex>` unless you need to apply specific `flexbox` properties to the item. In most cases, once you set the desired properties on `<Flex>` it will layout the child elements as intended, whether these be `<FlexItem>` or any other component like `<Box>` or even standard HTML like a `<div>` or `<span>`. However, if you want to use the flex-specific CSS properties for items within the container, like `flex` or `align-self`, you will need to use `FlexItem` to apply these properties.
 
 <Canvas of={stories.basicFlexItem} />
-
-## Upgrading
-
-This component is a **breaking change** that replaces the [previous Flex component](https://www.npmjs.com/package/styled-flex-component). Use the following table as a guide to convert from the old properties to new `Flex` properties. Refer to [systemtheme.js](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) for values.
-
-### `FlexItem` properties
-
-| **Old**    | **New**          |
-| ---------- | ---------------- |
-| `order`    | `order`          |
-| `basis`    | `flexBasis`      |
-| `grow`     | `flexGrow`       |
-| `shrink`   | `flexShrink`     |
-| `noShrink` | `flexShrink="0"` |

lib/components/Flex/index.js

@@ -18,7 +18,7 @@ const FlexWrapper = styled("div")
       : props["data-testid"]
       ? props["data-testid"]
       : null
-  }))(css({ boxSizing: "border-box" }), FlexStyles);
+  }))((props) => css({ boxSizing: "border-box", gap: props.gap }), FlexStyles);
 
 const FlexItem = styled("div")(
   css({
@@ -27,8 +27,12 @@ const FlexItem = styled("div")(
   FlexStyles
 );
 
-export default function Flex({ children, theme, ...props }) {
-  const component = <FlexWrapper {...props}>{children}</FlexWrapper>;
+export default function Flex({ children, gap, theme, ...props }) {
+  const component = (
+    <FlexWrapper gap={gap} {...props}>
+      {children}
+    </FlexWrapper>
+  );
 
   if (theme) {
     return (
@@ -47,6 +51,7 @@ export default function Flex({ children, theme, ...props }) {
 Flex.propTypes = {
   /** Children of `Flex` are taken as node elements */
   children: PropTypes.node,
+  gap: PropTypes.string,
   theme: PropTypes.object,
   ...styledPropTypes.space,
   ...styledPropTypes.layout,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.45",
+  "version": "3.2.46",
   "engines": {
     "node": "20.12.2"
   },