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: ( <> -

Stack children

Stack children

+

Stack children

Stack children

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` + 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, keyof Props>; type StackProps = Props & NativeAttrs; -const Stack = ({ children, spacing = 'single', ...props }: StackProps): JSX.Element => ( - +const Stack = ({ children, spacing = 'single', justifyContent, alignItems, ...props }: StackProps): JSX.Element => ( + {children} ); 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 = (...args: T): T => args; +export const tuple = (...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];