feat(RowV2): new component

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 multiples RowV2 instead.',
     docs: {
       description: {
         component:

packages/ui/src/components/RowV2/__stories__/AlignItems.stories.tsx

@@ -0,0 +1,34 @@
+import type { Story } from '@storybook/react'
+import { RowV2 } from '..'
+import { Separator, Stack } from '../..'
+
+export const AlignItems: Story = () => (
+  <Stack gap={2}>
+    <RowV2 templateColumns="repeat(3, 1fr)">
+      <div style={{ height: '100px', backgroundColor: '#eee' }}>
+        100px height & default align
+      </div>
+      <div style={{ height: '50px', backgroundColor: '#eee' }}>
+        50px height & default align
+      </div>
+      <div style={{ backgroundColor: '#eee' }}>auto height & default align</div>
+    </RowV2>
+    <Separator />
+    <RowV2 templateColumns="repeat(3, 1fr)" alignItems="center">
+      <div style={{ height: '100px', backgroundColor: '#eee' }}>
+        100px height & align center
+      </div>
+      <div style={{ height: '50px', backgroundColor: '#eee' }}>
+        50px height & align center
+      </div>
+      <div style={{ backgroundColor: '#eee' }}>auto height & align center</div>
+    </RowV2>
+  </Stack>
+)
+
+AlignItems.parameters = {
+  docs: {
+    storyDescription:
+      'You can use the prop `alignItems` to align each row elements',
+  },
+}

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)">
+        <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)">
+        <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)">
+        <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>
+)

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: 6,
+}
+
+Gap.parameters = {
+  docs: {
+    storyDescription:
+      'You can use the prop `gap` to separate each element/column. `gap` is a theme space unit.',
+  },
+}

packages/ui/src/components/RowV2/__stories__/Playground.stories.tsx

@@ -0,0 +1,3 @@
+import { Template } from './Template.stories'
+
+export const Playground = Template.bind({})

packages/ui/src/components/RowV2/__stories__/Template.stories.tsx

@@ -0,0 +1,10 @@
+import type { ComponentStory } from '@storybook/react'
+import { RowV2 } from '..'
+
+export const Template: ComponentStory<typeof RowV2> = ({ ...props }) => (
+  <RowV2 {...props} templateColumns="3fr 6fr 3fr">
+    <div style={{ backgroundColor: '#eee' }}>3fr | 3/12</div>
+    <div style={{ backgroundColor: '#eee' }}>6fr | 6/12</div>
+    <div style={{ backgroundColor: '#eee' }}>3fr | 3/12</div>
+  </RowV2>
+)

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'

packages/ui/src/components/RowV2/__tests__/__snapshots__/index.tsx.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RowV2 renders correctly with default props 1`] = `
+<DocumentFragment>
+  .cache-564oi8-StyledRow {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 16px;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+}
+
+<div
+    class="cache-564oi8-StyledRow e1ddijpe0"
+  >
+    <div>
+      First col
+    </div>
+    <div>
+      Second col
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RowV2 renders correctly with specific align 1`] = `
+<DocumentFragment>
+  .cache-1ca4nox-StyledRow {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<div
+    class="cache-1ca4nox-StyledRow e1ddijpe0"
+  >
+    <div>
+      First col
+    </div>
+    <div>
+      Second col
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RowV2 renders correctly with specific gap 1`] = `
+<DocumentFragment>
+  .cache-ldau5b-StyledRow {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 8px;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+}
+
+<div
+    class="cache-ldau5b-StyledRow e1ddijpe0"
+  >
+    <div>
+      First col
+    </div>
+    <div>
+      Second col
+    </div>
+  </div>
+</DocumentFragment>
+`;

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>,
+    ))
+})

packages/ui/src/components/RowV2/index.tsx

@@ -0,0 +1,54 @@
+import styled from '@emotion/styled'
+import type { CSSProperties, ForwardedRef, ReactNode } from 'react'
+import { forwardRef } 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 = 2, alignItems = 'normal', templateColumns }) => `
+    grid-template-columns: ${templateColumns};
+    grid-gap: ${theme.space[gap]};
+    align-items: ${alignItems};
+  `}
+`
+
+type RowV2Props = {
+  id?: string
+  className?: string
+  dataTestId?: string
+  children: ReactNode
+  templateColumns: string
+  gap?: keyof SCWUITheme['space']
+  alignItems?: CSSProperties['alignItems']
+}
+
+export const RowV2 = forwardRef(
+  (
+    {
+      id,
+      className,
+      dataTestId,
+      children,
+      templateColumns,
+      alignItems,
+      gap,
+    }: RowV2Props,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => (
+    <StyledRow
+      ref={ref}
+      id={id}
+      className={className}
+      data-testid={dataTestId}
+      gap={gap}
+      templateColumns={templateColumns}
+      alignItems={alignItems}
+    >
+      {children}
+    </StyledRow>
+  ),
+)

packages/ui/src/components/index.ts

@@ -60,3 +60,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'