Storybook Stack: transient props

equinor · Sep 14, 2023 · 7a1eeb4 · 7a1eeb4
1 parent 4f7d558
commit 7a1eeb4
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/packages/eds-core-react/.storybook/components/Stack.tsx b/packages/eds-core-react/.storybook/components/Stack.tsx
@@ -3,16 +3,30 @@ import { styled, StyledObject } from 'styled-components'
 type StackProps = {
   direction?: StyledObject<any>['flexDirection']
   align?: StyledObject<any>['alignItems']
+  children: React.ReactNode
+} & React.HTMLAttributes<HTMLDivElement>
+
+type StyledStackProps = {
+  $direction?: StyledObject<any>['flexDirection']
+  $align?: StyledObject<any>['alignItems']
 }
 
-export const Stack = styled.div<StackProps>`
+const StyledStack = styled.div<StyledStackProps>`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: ${({ align }) => align || 'center'};
+  align-items: ${({ $align }) => $align || 'center'};
   gap: 1rem;
   flex-wrap: wrap;
   @media screen and (min-width: 600px) {
-    flex-direction: ${({ direction }) => direction || 'row'};
+    flex-direction: ${({ $direction }) => $direction || 'row'};
   }
 `
+
+export const Stack = ({ children, direction, align, ...rest }: StackProps) => {
+  return (
+    <StyledStack $direction={direction} $align={align} {...rest}>
+      {children}
+    </StyledStack>
+  )
+}