diff --git a/packages/ui/src/components/Grid/__stories__/index.stories.tsx b/packages/ui/src/components/Grid/__stories__/index.stories.tsx index fe75c82539..9974284e11 100644 --- 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 new file mode 100644 index 0000000000..d8e925dab1 --- /dev/null +++ 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 = () => ( + + + + 100px height & default align + + + 50px height & default align + + auto height & default align + + + + + 100px height & align center + + + 50px height & align center + + auto height & align center + + +) + +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 new file mode 100644 index 0000000000..53bb2be0e9 --- /dev/null +++ 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 = () => ( + + + + + + Status + + + + + Running + + + + + + Type + + + PRO2-S + + + + + From image + + + None + + + + + Volumes + + + 2 + + + + + + + + + Image ID + + + 000000-111111-2222222-333333 + + + + + + + Image ID + + + 000000-111111-2222222-333333 + + + + + + +
+ + IPV6 + + + febf:ffff:ffff:ffff:ffff:ffff + +
+
+ + Gateway + + + febf:ffff:ffff:ffff + +
+
+ + Netmask + + + 64 + +
+ + + +) diff --git a/packages/ui/src/components/RowV2/__stories__/Gap.stories.tsx b/packages/ui/src/components/RowV2/__stories__/Gap.stories.tsx new file mode 100644 index 0000000000..4de50067ab --- /dev/null +++ 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 new file mode 100644 index 0000000000..1bb1300883 --- /dev/null +++ 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 new file mode 100644 index 0000000000..33e0fa80ae --- /dev/null +++ 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 = ({ ...props }) => ( + + 3fr | 3/12 + 6fr | 6/12 + 3fr | 3/12 + +) diff --git a/packages/ui/src/components/RowV2/__stories__/index.stories.tsx b/packages/ui/src/components/RowV2/__stories__/index.stories.tsx new file mode 100644 index 0000000000..f6957e736b --- /dev/null +++ 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 + +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 new file mode 100644 index 0000000000..aea43624c2 --- /dev/null +++ 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`] = ` + + .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; +} + +
+
+ First col +
+
+ Second col +
+
+ +`; + +exports[`RowV2 renders correctly with specific align 1`] = ` + + .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; +} + +
+
+ First col +
+
+ Second col +
+
+ +`; + +exports[`RowV2 renders correctly with specific gap 1`] = ` + + .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; +} + +
+
+ First col +
+
+ Second col +
+
+ +`; diff --git a/packages/ui/src/components/RowV2/__tests__/index.tsx b/packages/ui/src/components/RowV2/__tests__/index.tsx new file mode 100644 index 0000000000..1a56e1c5f4 --- /dev/null +++ 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( + +
First col
+
Second col
+ , + )) + + test('renders correctly with specific gap', () => + shouldMatchEmotionSnapshot( + +
First col
+
Second col
+ , + )) + + test('renders correctly with specific align', () => + shouldMatchEmotionSnapshot( + +
First col
+
Second col
+ , + )) +}) diff --git a/packages/ui/src/components/RowV2/index.tsx b/packages/ui/src/components/RowV2/index.tsx new file mode 100644 index 0000000000..479dfe598f --- /dev/null +++ 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 +export const StyledRow = styled('div', { + shouldForwardProp: prop => + !['templateColumns', 'gap', 'alignItems'].includes(prop), +})` + 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) => ( + + {children} + +) diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 2b2d59ff11..4bb7f31a00 100644 --- 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'