feat(RowV2): new component (#2300)

* feat(RowV2): new component * fix: feedbacks * fix(RowV2): remove id prop * fix: stories in dark mode --------- Co-authored-by: Fabien Hébert <[email protected]>
scaleway · Mar 20, 2023 · 8eff127 · 8eff127
1 parent 04fbbf4
commit 8eff127
Show file tree

Hide file tree

Showing 11 changed files with 340 additions and 0 deletions.
diff --git a/packages/ui/src/components/Grid/__stories__/index.stories.tsx b/packages/ui/src/components/Grid/__stories__/index.stories.tsx
@@ -8,6 +8,8 @@ export default {
   component: Grid,
   parameters: {
     deprecated: true,
+    deprecatedReason:
+      'This component is deprecated please use Stack/RowV2 combo instead.',
     docs: {
       description: {
         component:

diff --git a/packages/ui/src/components/RowV2/__stories__/AlignItems.stories.tsx b/packages/ui/src/components/RowV2/__stories__/AlignItems.stories.tsx
@@ -0,0 +1,40 @@
+import styled from '@emotion/styled'
+import type { Story } from '@storybook/react'
+import { RowV2 } from '..'
+import { Separator, Stack } from '../..'
+
+const DivWithBackground = styled.div`
+  background: ${({ theme }) => theme.colors.primary.background};
+  color: ${({ theme }) => theme.colors.primary.text};
+`
+
+export const AlignItems: Story = () => (
+  <Stack gap={2}>
+    <RowV2 templateColumns="repeat(3, 1fr)">
+      <DivWithBackground style={{ height: '100px' }}>
+        100px height & default align
+      </DivWithBackground>
+      <DivWithBackground style={{ height: '50px' }}>
+        50px height & default align
+      </DivWithBackground>
+      <DivWithBackground>auto height & default align</DivWithBackground>
+    </RowV2>
+    <Separator />
+    <RowV2 templateColumns="repeat(3, 1fr)" alignItems="center">
+      <DivWithBackground style={{ height: '100px' }}>
+        100px height & align center
+      </DivWithBackground>
+      <DivWithBackground style={{ height: '50px' }}>
+        50px height & align center
+      </DivWithBackground>
+      <DivWithBackground>auto height & align center</DivWithBackground>
+    </RowV2>
+  </Stack>
+)
+
+AlignItems.parameters = {
+  docs: {
+    storyDescription:
+      'You can use the prop `alignItems` to align each row elements',
+  },
+}
diff --git a/packages/ui/src/components/RowV2/__stories__/Example.stories.tsx b/packages/ui/src/components/RowV2/__stories__/Example.stories.tsx
@@ -0,0 +1,97 @@
+import type { Story } from '@storybook/react'
+import { RowV2 } from '..'
+import { Container, Separator, Stack, Status, Text } from '../..'
+
+export const Example: Story = () => (
+  <Container title="Overview">
+    <Stack gap={2}>
+      <RowV2 templateColumns="repeat(4, 1fr)" gap={2}>
+        <Stack>
+          <Text as="span" variant="bodyStrong">
+            Status
+          </Text>
+          <Stack direction="row" gap={1} alignItems="center">
+            <Status variant="success" />
+            <Text as="span" variant="body">
+              Running
+            </Text>
+          </Stack>
+        </Stack>
+        <Stack>
+          <Text as="div" variant="bodyStrong">
+            Type
+          </Text>
+          <Text as="div" variant="body">
+            PRO2-S
+          </Text>
+        </Stack>
+        <Stack>
+          <Text as="div" variant="bodyStrong">
+            From image
+          </Text>
+          <Text as="div" variant="body">
+            None
+          </Text>
+        </Stack>
+        <Stack>
+          <Text as="div" variant="bodyStrong">
+            Volumes
+          </Text>
+          <Text as="div" variant="body">
+            2
+          </Text>
+        </Stack>
+      </RowV2>
+      <Separator />
+      <RowV2 templateColumns="repeat(2, 1fr)" gap={2}>
+        <Stack>
+          <Stack direction="row" gap={2}>
+            <Text as="span" variant="bodyStrong">
+              Image ID
+            </Text>
+            <Text as="span" variant="body">
+              000000-111111-2222222-333333
+            </Text>
+          </Stack>
+        </Stack>
+        <Stack>
+          <Stack direction="row" gap={2}>
+            <Text as="span" variant="bodyStrong">
+              Image ID
+            </Text>
+            <Text as="span" variant="body">
+              000000-111111-2222222-333333
+            </Text>
+          </Stack>
+        </Stack>
+      </RowV2>
+      <Separator />
+      <RowV2 templateColumns="repeat(3, 1fr)" gap={2}>
+        <div>
+          <Text as="div" variant="bodyStrong">
+            IPV6
+          </Text>
+          <Text as="div" variant="body">
+            febf:ffff:ffff:ffff:ffff:ffff
+          </Text>
+        </div>
+        <div>
+          <Text as="div" variant="bodyStrong">
+            Gateway
+          </Text>
+          <Text as="div" variant="body">
+            febf:ffff:ffff:ffff
+          </Text>
+        </div>
+        <div>
+          <Text as="div" variant="bodyStrong">
+            Netmask
+          </Text>
+          <Text as="div" variant="body">
+            64
+          </Text>
+        </div>
+      </RowV2>
+    </Stack>
+  </Container>
+)
diff --git a/packages/ui/src/components/RowV2/__stories__/Gap.stories.tsx b/packages/ui/src/components/RowV2/__stories__/Gap.stories.tsx
@@ -0,0 +1,14 @@
+import { Template } from './Template.stories'
+
+export const Gap = Template.bind({})
+
+Gap.args = {
+  gap: 2,
+}
+
+Gap.parameters = {
+  docs: {
+    storyDescription:
+      'You can use the prop `gap` to separate each element/column. `gap` is a theme space unit.',
+  },
+}
diff --git a/packages/ui/src/components/RowV2/__stories__/Playground.stories.tsx b/packages/ui/src/components/RowV2/__stories__/Playground.stories.tsx
@@ -0,0 +1,3 @@
+import { Template } from './Template.stories'
+
+export const Playground = Template.bind({})
diff --git a/packages/ui/src/components/RowV2/__stories__/Template.stories.tsx b/packages/ui/src/components/RowV2/__stories__/Template.stories.tsx
@@ -0,0 +1,16 @@
+import styled from '@emotion/styled'
+import type { ComponentStory } from '@storybook/react'
+import { RowV2 } from '..'
+
+const DivWithBackground = styled.div`
+  background: ${({ theme }) => theme.colors.primary.background};
+  color: ${({ theme }) => theme.colors.primary.text};
+`
+
+export const Template: ComponentStory<typeof RowV2> = ({ ...props }) => (
+  <RowV2 {...props} templateColumns="3fr 6fr 3fr">
+    <DivWithBackground>3fr | 3/12</DivWithBackground>
+    <DivWithBackground>6fr | 6/12</DivWithBackground>
+    <DivWithBackground>3fr | 3/12</DivWithBackground>
+  </RowV2>
+)
diff --git a/packages/ui/src/components/RowV2/__stories__/index.stories.tsx b/packages/ui/src/components/RowV2/__stories__/index.stories.tsx
@@ -0,0 +1,20 @@
+import type { ComponentMeta } from '@storybook/react'
+import { RowV2 } from '..'
+
+export default {
+  component: RowV2,
+  parameters: {
+    docs: {
+      description: {
+        component: 'A templated row rendered using grid',
+      },
+    },
+    experimental: true,
+  },
+  title: 'Components/Layout/RowV2',
+} as ComponentMeta<typeof RowV2>
+
+export { Playground } from './Playground.stories'
+export { Gap } from './Gap.stories'
+export { AlignItems } from './AlignItems.stories'
+export { Example } from './Example.stories'
diff --git a/packages/ui/src/components/RowV2/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/RowV2/__tests__/__snapshots__/index.tsx.snap
@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RowV2 renders correctly with default props 1`] = `
+<DocumentFragment>
+  .cache-1dozwql-StyledRow {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+}
+
+<div
+    class="cache-1dozwql-StyledRow e1ddijpe0"
+  >
+    <div>
+      First col
+    </div>
+    <div>
+      Second col
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RowV2 renders correctly with specific align 1`] = `
+<DocumentFragment>
+  .cache-166r2lt-StyledRow {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<div
+    class="cache-166r2lt-StyledRow e1ddijpe0"
+  >
+    <div>
+      First col
+    </div>
+    <div>
+      Second col
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RowV2 renders correctly with specific gap 1`] = `
+<DocumentFragment>
+  .cache-1nb3qk1-StyledRow {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+}
+
+<div
+    class="cache-1nb3qk1-StyledRow e1ddijpe0"
+  >
+    <div>
+      First col
+    </div>
+    <div>
+      Second col
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/ui/src/components/RowV2/__tests__/index.tsx b/packages/ui/src/components/RowV2/__tests__/index.tsx
@@ -0,0 +1,28 @@
+import { RowV2 } from '..'
+import { shouldMatchEmotionSnapshot } from '../../../../.jest/helpers'
+
+describe('RowV2', () => {
+  test('renders correctly with default props', () =>
+    shouldMatchEmotionSnapshot(
+      <RowV2 templateColumns="repeat(2, 1fr)">
+        <div>First col</div>
+        <div>Second col</div>
+      </RowV2>,
+    ))
+
+  test('renders correctly with specific gap', () =>
+    shouldMatchEmotionSnapshot(
+      <RowV2 templateColumns="repeat(2, 1fr)" gap={1}>
+        <div>First col</div>
+        <div>Second col</div>
+      </RowV2>,
+    ))
+
+  test('renders correctly with specific align', () =>
+    shouldMatchEmotionSnapshot(
+      <RowV2 templateColumns="repeat(2, 1fr)" gap={1} alignItems="center">
+        <div>First col</div>
+        <div>Second col</div>
+      </RowV2>,
+    ))
+})
diff --git a/packages/ui/src/components/RowV2/index.tsx b/packages/ui/src/components/RowV2/index.tsx
@@ -0,0 +1,44 @@
+import styled from '@emotion/styled'
+import type { CSSProperties, ReactNode } from 'react'
+import type { SCWUITheme } from '../../theme'
+
+type StyledRowProps = Pick<RowV2Props, 'gap' | 'templateColumns' | 'alignItems'>
+export const StyledRow = styled('div', {
+  shouldForwardProp: prop =>
+    !['templateColumns', 'gap', 'alignItems'].includes(prop),
+})<StyledRowProps>`
+  display: grid;
+  ${({ theme, gap, alignItems = 'normal', templateColumns }) => `
+    grid-template-columns: ${templateColumns};
+    ${gap ? `gap: ${theme.space[gap]};` : ''}
+    align-items: ${alignItems};
+  `}
+`
+
+type RowV2Props = {
+  className?: string
+  'data-testid'?: string
+  children: ReactNode
+  templateColumns: string
+  gap?: keyof SCWUITheme['space']
+  alignItems?: CSSProperties['alignItems']
+}
+
+export const RowV2 = ({
+  className,
+  'data-testid': dataTestId,
+  children,
+  templateColumns,
+  alignItems,
+  gap,
+}: RowV2Props) => (
+  <StyledRow
+    className={className}
+    data-testid={dataTestId}
+    gap={gap}
+    templateColumns={templateColumns}
+    alignItems={alignItems}
+  >
+    {children}
+  </StyledRow>
+)
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
@@ -57,3 +57,4 @@ export { Grid, Row, Col } from './Grid'
 export { List as ListV2 } from './ListV2'
 export { UnitInput } from './UnitInput'
 export { VerificationCode } from './VerificationCode'
+export { RowV2 } from './RowV2'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { Template } from './Template.stories'

		export const Playground = Template.bind({})