feat(Stack): add none-spacing, justify-content and align-items (#495)

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>
     </>
   )
 };

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)};
   }

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>
 );

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];