[FRAF-544] Flex component

src/components/flex/Flex.tsx

@@ -0,0 +1,35 @@
+import React, { ForwardedRef, forwardRef, ReactNode } from 'react';
+import cx from 'classnames';
+import theme from './theme.css';
+
+type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+
+type FlexProps = Partial<{
+  children: ReactNode;
+  direction: 'row' | 'column';
+  gap: Gap;
+  // Ideally CSSProperties should be used as the type.
+  // However because of the two-value sytnax of these properties the type includes (string & {}) which is not suitable for us.
+  // The library can be fixed with template literal types.
+  alignItems: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
+  justifyContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
+  ref: ForwardedRef<HTMLDivElement>;
+}>;
+
+const Flex = forwardRef(({ children, direction = 'row', gap = 0, alignItems, justifyContent, ref }: FlexProps) => {
+  const classNames = cx(theme['flex'], theme[`${direction}`], {
+    [theme[`gap-${gap}`]]: gap > 0,
+  });
+
+  const flexStyles = { alignItems, justifyContent };
+
+  return (
+    <div className={classNames} style={flexStyles} ref={ref}>
+      {children}
+    </div>
+  );
+});
+
+Flex.displayName = 'Flex';
+
+export default Flex;

src/components/flex/flex.stories.tsx

@@ -0,0 +1,114 @@
+import { ComponentStory } from '@storybook/react';
+import React from 'react';
+import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
+import { Flex, Box } from '../../index';
+import { Heading3 } from '../typography';
+
+export default {
+  component: Flex,
+  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Flex'),
+};
+
+const MintBox = ({ size }: { size: number }) => (
+  <Box
+    backgroundColor="mint"
+    backgroundTint="lightest"
+    borderColor="mint"
+    borderTint="light"
+    borderWidth={1}
+    borderRadius="rounded"
+    style={{
+      minHeight: `${size / 2}px`,
+      width: `${size}px`,
+    }}
+  />
+);
+
+export const basic: ComponentStory<typeof Flex> = (args) => (
+  <Box>
+    <Heading3>Flex Box</Heading3>
+    <Box borderColor="neutral" borderWidth={1} borderRadius="rounded" backgroundColor="neutral" backgroundTint="light">
+      <Flex {...args}>
+        <MintBox size={50} />
+        <MintBox size={150} />
+        <MintBox size={100} />
+      </Flex>
+    </Box>
+  </Box>
+);
+
+basic.args = {
+  direction: 'row',
+  gap: 0,
+};
+
+export const nesting: ComponentStory<typeof Flex> = () => (
+  <Box borderColor="neutral" borderWidth={1} borderRadius="rounded" backgroundColor="neutral" backgroundTint="light">
+    <Flex gap={5} direction="column">
+      <Box
+        backgroundColor="mint"
+        backgroundTint="lightest"
+        borderColor="mint"
+        borderTint="light"
+        borderWidth={1}
+        borderRadius="rounded"
+        style={{
+          minHeight: '50px',
+          width: '100%',
+        }}
+      />
+      <Flex gap={5} alignItems="flex-start">
+        <Box
+          backgroundColor="teal"
+          backgroundTint="lightest"
+          borderColor="teal"
+          borderTint="light"
+          borderWidth={1}
+          borderRadius="rounded"
+          style={{
+            minHeight: '100px',
+            width: '20%',
+          }}
+        />
+        <Box
+          backgroundColor="teal"
+          backgroundTint="lightest"
+          borderColor="teal"
+          borderTint="light"
+          borderWidth={1}
+          borderRadius="rounded"
+          style={{
+            minHeight: '150px',
+            width: '80%',
+          }}
+        />
+      </Flex>
+      <Flex gap={5} justifyContent="center" alignItems="center">
+        <Box
+          backgroundColor="ruby"
+          backgroundTint="lightest"
+          borderColor="ruby"
+          borderTint="light"
+          borderWidth={1}
+          borderRadius="rounded"
+          style={{
+            minHeight: '100px',
+            width: '50%',
+          }}
+        />
+        <Box
+          backgroundColor="ruby"
+          backgroundTint="lightest"
+          borderColor="ruby"
+          borderTint="light"
+          borderWidth={1}
+          borderRadius="rounded"
+          style={{
+            minHeight: '150px',
+            width: '30%',
+          }}
+        />
+      </Flex>
+    </Flex>
+  </Box>
+);

src/components/flex/index.ts

@@ -0,0 +1,3 @@
+import Flex from './Flex';
+
+export default Flex;

src/components/flex/theme.css

@@ -0,0 +1,22 @@
+@import '@teamleader/ui-utilities';
+
+.flex {
+  box-sizing: border-box;
+  display: flex;
+}
+
+.row {
+  flex-direction: row;
+}
+
+.column {
+  flex-direction: column;
+}
+
+/* prettier-ignore */
+@each
+  $factor, $spacer in (1, 2, 3, 4, 5, 6, 7, 8), (var(--spacer-smallest), var(--spacer-smaller), var(--spacer-small), var(--spacer-regular), var(--spacer-medium), var(--spacer-big), var(--spacer-bigger), var(--spacer-biggest)) {
+  .gap-$(factor) {
+    gap: $spacer;
+  }
+}

src/index.ts

@@ -75,6 +75,7 @@ import ProgressTracker from './components/progressTracker';
 import Widget from './components/widget';
 import WysiwygEditor from './components/wysiwygEditor';
 import EmailSelector from './components/emailSelector';
+import Flex from './components/flex';
 
 import {
   COLOR,
@@ -121,6 +122,7 @@ export {
   EmptyState,
   ErrorText,
   FilterSelection,
+  Flex,
   Heading1,
   Heading2,
   Heading3,