From 6d1db3979b01645e6051975047fdcee7057c3856 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Thu, 15 Sep 2022 10:19:06 +0100
Subject: [PATCH] feat(Stack): add none-spacing, justify-content and
 align-items (#495)

---
 src/component-library/Stack/Stack.stories.tsx |  3 ++-
 src/component-library/Stack/Stack.style.tsx   | 10 ++++++++
 src/component-library/Stack/Stack.tsx         |  9 +++++---
 src/component-library/utils/prop-types.ts     | 23 ++++++++++++++-----
 4 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/component-library/Stack/Stack.stories.tsx b/src/component-library/Stack/Stack.stories.tsx
index 24507bb15f..ec48c70110 100644
--- a/src/component-library/Stack/Stack.stories.tsx
+++ b/src/component-library/Stack/Stack.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 
+import { CTA } from '../CTA';
 import { P } from '../Text';
 import { Stack, StackProps } from '.';
 
@@ -9,7 +10,7 @@ const Default = Template.bind({});
 Default.args = {
   children: (
     <>
-      <P>Stack children</P> <P>Stack children</P>
+      <P>Stack children</P> <P>Stack children</P> <CTA>CTA</CTA>
     </>
   )
 };
diff --git a/src/component-library/Stack/Stack.style.tsx b/src/component-library/Stack/Stack.style.tsx
index 39aee4c665..f9c0b595d6 100644
--- a/src/component-library/Stack/Stack.style.tsx
+++ b/src/component-library/Stack/Stack.style.tsx
@@ -1,11 +1,14 @@
 import styled from 'styled-components';
 
 import { theme } from '../theme';
+import { AlignItems, JustifyContent } from '../utils/prop-types';
 import { Spacing } from './Stack';
 
 const getSpacing = (spacing?: Spacing) => {
   let result;
   switch (spacing) {
+    case 'none':
+      break;
     case 'half':
       result = theme.spacing.spacing2;
       break;
@@ -24,9 +27,16 @@ const getSpacing = (spacing?: Spacing) => {
 
 type StackContainerProps = {
   $spacing: Spacing;
+  $justifyContent?: JustifyContent;
+  $alignItems?: AlignItems;
 };
 
 const StackContainer = styled.div<StackContainerProps>`
+  display: flex;
+  flex-direction: column;
+  justify-content: ${(props) => props.$justifyContent};
+  align-items: ${(props) => props.$alignItems};
+
   > *:not(:last-child) {
     margin-bottom: ${(props) => getSpacing(props.$spacing)};
   }
diff --git a/src/component-library/Stack/Stack.tsx b/src/component-library/Stack/Stack.tsx
index ff06c6f7ef..4299267d2e 100644
--- a/src/component-library/Stack/Stack.tsx
+++ b/src/component-library/Stack/Stack.tsx
@@ -1,19 +1,22 @@
 import { HTMLAttributes } from 'react';
 
+import { AlignItems, JustifyContent } from '../utils/prop-types';
 import { StackContainer } from './Stack.style';
 
-type Spacing = 'half' | 'single' | 'double';
+type Spacing = 'none' | 'half' | 'single' | 'double';
 
 type Props = {
   spacing?: Spacing;
+  justifyContent?: JustifyContent;
+  alignItems?: AlignItems;
 };
 
 type NativeAttrs = Omit<HTMLAttributes<unknown>, keyof Props>;
 
 type StackProps = Props & NativeAttrs;
 
-const Stack = ({ children, spacing = 'single', ...props }: StackProps): JSX.Element => (
-  <StackContainer $spacing={spacing} {...props}>
+const Stack = ({ children, spacing = 'single', justifyContent, alignItems, ...props }: StackProps): JSX.Element => (
+  <StackContainer $spacing={spacing} $justifyContent={justifyContent} $alignItems={alignItems} {...props}>
     {children}
   </StackContainer>
 );
diff --git a/src/component-library/utils/prop-types.ts b/src/component-library/utils/prop-types.ts
index 2937f167bb..8d79efb2eb 100644
--- a/src/component-library/utils/prop-types.ts
+++ b/src/component-library/utils/prop-types.ts
@@ -1,13 +1,24 @@
-const tuple = <T extends string[]>(...args: T): T => args;
+export const tuple = <T extends string[]>(...args: T): T => args;
 
-const ctaVariants = tuple('primary', 'secondary', 'outlined');
+export const ctaVariants = tuple('primary', 'secondary', 'outlined');
 
-const status = tuple('error', 'warning', 'success');
+export const status = tuple('error', 'warning', 'success');
 
-const sizes = tuple('small', 'medium', 'large');
+export const sizes = tuple('small', 'medium', 'large');
 
 export const colors = tuple('primary', 'secondary', 'tertiary');
 
+export const justifyContent = tuple(
+  'flex-start',
+  'center',
+  'flex-end',
+  'space-between',
+  'space-around',
+  'space-evenly'
+);
+
+export const alignItems = tuple('flex-start', 'center', 'flex-end', 'stretch', 'baseline');
+
 export type CTAVariants = typeof ctaVariants[number];
 
 export type Status = typeof status[number];
@@ -16,6 +27,6 @@ export type Sizes = typeof sizes[number];
 
 export type Colors = typeof colors[number];
 
-export { ctaVariants, sizes, status };
+export type JustifyContent = typeof justifyContent[number];
 
-export { tuple };
+export type AlignItems = typeof alignItems[number];