Merge pull request #86 from code0-tech/flex-container

Simple Flex component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A simple template for a custom React component library",
   "scripts": {
     "dev": "npm run storybook:dev",

src/components/flex/Flex.stories.tsx

@@ -0,0 +1,20 @@
+import {Meta} from "@storybook/react";
+import React from "react";
+import Flex from "./Flex";
+import Text from "../Text/Text";
+
+const meta: Meta = {
+    title: "Flex",
+    component: Flex
+}
+
+export default meta
+
+export const ExampleFlex = () => {
+
+    return <Flex>
+        <Text size={"md"} mr={1}>Example Text 1</Text>
+        <Text size={"md"}>Example Text 2</Text>
+    </Flex>
+
+}

src/components/flex/Flex.style.scss

@@ -0,0 +1,3 @@
+.flex {
+  display: flex;
+}

src/components/flex/Flex.tsx

@@ -0,0 +1,20 @@
+import {Code0Component} from "../../utils/types";
+import React from "react";
+import {mergeCode0Props} from "../../utils/utils";
+import "./Flex.style.scss";
+
+interface FlexType extends Code0Component<HTMLDivElement> {
+    children: React.ReactNode | React.ReactNode[]
+}
+
+const Flex: React.FC<FlexType> = props => {
+
+    const {children, ...rest} = props
+
+    return <div {...mergeCode0Props("flex", rest)}>
+        {children}
+    </div>
+
+}
+
+export default Flex

src/index.ts

@@ -14,3 +14,4 @@ export { default as Popover} from "./components/popover/Popover"
 export { default as Quote} from "./components/quote/Quote"
 export { default as Row} from "./components/row/Row"
 export { default as Tooltip} from "./components/tooltip/Tooltip"
+export { default as Flex} from "./components/flex/Flex"