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