fix: simplify code

src/components/Stack/__stories__/Classname.tsx

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled'
+import Stack from '..'
+import { Template } from './Template'
+
+export const Classname = Template.bind({})
+
+const StyledStack = styled(Stack)`
+  background: #aaa;
+`
+
+Classname.parameters = {
+  docs: {
+    storyDescription:
+      'prop `Classname` allows to specify the html element className',
+  },
+}
+
+Classname.decorators = [
+  () => (
+    <StyledStack gap={2} direction="row">
+      <div style={{ background: '#DDD', padding: '8px' }}>First child</div>
+      <div style={{ background: '#DDD', padding: '8px' }}>Second child</div>
+      <div style={{ background: '#DDD', padding: '8px' }}>Third child</div>
+    </StyledStack>
+  ),
+]

src/components/Stack/__stories__/index.stories.tsx

@@ -19,3 +19,4 @@ export { Gap } from './Gap'
 export { Direction } from './Direction'
 export { AlignItems } from './AlignItems'
 export { JustifyContent } from './JustifyContent'
+export { Classname } from './Classname'

src/components/Stack/__tests__/__snapshots__/index.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Stack should render correctly with alighCenter 1`] = `
 <DocumentFragment>
-  .cache-vz3hlc-Root {
+  .cache-1r9wymk-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -22,7 +22,7 @@ exports[`Stack should render correctly with alighCenter 1`] = `
 }
 
 <div
-    class="cache-vz3hlc-Root e1sgck4o0"
+    class="cache-1r9wymk-Stack e1sgck4o0"
   >
     <div>
       first child
@@ -36,7 +36,7 @@ exports[`Stack should render correctly with alighCenter 1`] = `
 
 exports[`Stack should render correctly with default props 1`] = `
 <DocumentFragment>
-  .cache-zjmw06-Root {
+  .cache-5xxpzm-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -56,7 +56,7 @@ exports[`Stack should render correctly with default props 1`] = `
 }
 
 <div
-    class="cache-zjmw06-Root e1sgck4o0"
+    class="cache-5xxpzm-Stack e1sgck4o0"
   >
     <div>
       first child
@@ -73,7 +73,7 @@ exports[`Stack should render correctly with default props 1`] = `
 
 exports[`Stack should render correctly with row direction 1`] = `
 <DocumentFragment>
-  .cache-ckqhpc-Root {
+  .cache-6gu0z8-Stack {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -93,7 +93,7 @@ exports[`Stack should render correctly with row direction 1`] = `
 }
 
 <div
-    class="cache-ckqhpc-Root e1sgck4o0"
+    class="cache-6gu0z8-Stack e1sgck4o0"
   >
     <div>
       first child

src/components/Stack/index.tsx

@@ -2,49 +2,27 @@ import styled from '@emotion/styled'
 import { CSSProperties, ReactNode } from 'react'
 import { SCWUITheme } from '../..'
 
-type StackCSSProperties = {
-  gap: keyof SCWUITheme['space']
-  direction: 'row' | 'column'
+type StackProps = {
+  gap?: keyof SCWUITheme['space']
+  direction?: 'row' | 'column'
   alignItems: CSSProperties['alignItems']
   justifyContent: CSSProperties['justifyContent']
-}
-
-type StackProps = Partial<StackCSSProperties> & {
   className?: string
   children: ReactNode
 }
 
-const Root = styled('div', {
+const Stack = styled('div', {
   shouldForwardProp: prop =>
     !['gap', 'direction', 'alignItems', 'justifyContent'].includes(prop),
-})<StackCSSProperties>`
+})<StackProps>`
   display: flex;
 
-  ${({ theme, gap, direction, alignItems, justifyContent }) => `
+  ${({ theme, gap = 0, direction = 'column', alignItems, justifyContent }) => `
     gap: ${theme.space[gap]};
     flex-direction: ${direction};
     align-items: ${alignItems || 'normal'};
     justify-content: ${justifyContent || 'normal'};
   `}
 `
 
-const Stack = ({
-  gap = 0,
-  direction = 'column',
-  alignItems,
-  justifyContent,
-  className,
-  children,
-}: StackProps) => (
-  <Root
-    className={className}
-    gap={gap}
-    direction={direction}
-    alignItems={alignItems}
-    justifyContent={justifyContent}
-  >
-    {children}
-  </Root>
-)
-
 export default Stack