chore(GridLayout.Content - static): migrate to @vanilla-extract/css (#…

…4999)

## Describe your changes

* Migrates part of `GridLayout.Content` to `@vanilla-extract/css`.

`GridLayout.Content` has sort of two APIs when it comes about `width` prop: A string like `"1 / 2"` or an object indicating the size it should assume at a particular breakpoint: `{ base: "1",  md: "5 / 6" }`. I refer to them as _static_ and _responsive_ mode respectively. Those modes apply different set of styles so we can't merge them.

**This PR is about migrating the _static_ mode.**

## Justify why they are needed

Initial step of migrating `GridLayout.Content.`

apps/store/src/components/GridLayout/GridLayout.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css'
+import { style, styleVariants } from '@vanilla-extract/css'
 import { responsiveStyles } from 'ui/src/theme/media'
 import { tokens } from 'ui/src/theme/theme.css'
 import { MAX_WIDTH } from './GridLayout.constants'
@@ -20,3 +20,70 @@ export const rootPadded = style({
     },
   }),
 })
+
+const contentBase = style({
+  gridColumn: '1 / span 12',
+})
+export const contentStatic = styleVariants({
+  '1': [contentBase],
+  '5/6': [
+    contentBase,
+    {
+      selectors: {
+        '&[data-alignment="center"]': {
+          ...responsiveStyles({ lg: { gridColumn: '2 / span 10' } }),
+        },
+      },
+    },
+  ],
+  '2/3': [
+    contentBase,
+    {
+      selectors: {
+        '&[data-alignment="center"]': {
+          ...responsiveStyles({ lg: { gridColumn: '3 / span 8' } }),
+        },
+      },
+    },
+  ],
+  '1/2': [
+    contentBase,
+    {
+      selectors: {
+        '&[data-alignment="left"]': {
+          ...responsiveStyles({ lg: { gridColumn: 'span 6' } }),
+        },
+        '&[data-alignment="center"]': {
+          ...responsiveStyles({
+            md: { gridColumn: '2 / span 10' },
+            lg: { gridColumn: '4 / span 6' },
+          }),
+        },
+        '&[data-alignment="right"]': {
+          ...responsiveStyles({ lg: { gridColumn: '7 / span 6' } }),
+        },
+      },
+    },
+  ],
+  '1/3': [
+    contentBase,
+    {
+      selectors: {
+        '&[data-alignment="left"]': {
+          ...responsiveStyles({
+            md: { gridColumn: 'auto / span 8' },
+            lg: { gridColumn: 'auto / span 6' },
+            xl: { gridColumn: 'auto / span 4' },
+          }),
+        },
+        '&[data-alignment="center"]': {
+          ...responsiveStyles({
+            md: { gridColumn: '3 / span 8' },
+            lg: { gridColumn: '4 / span 6' },
+            xl: { gridColumn: '5 / span 4' },
+          }),
+        },
+      },
+    },
+  ],
+})

apps/store/src/components/GridLayout/GridLayout.tsx

@@ -5,7 +5,7 @@ import type { StyledOptions } from '@emotion/styled'
 import styled from '@emotion/styled'
 import clsx from 'clsx'
 import { type ComponentProps } from 'react'
-import { root, rootPadded } from './GridLayout.css'
+import { root, rootPadded, contentStatic } from './GridLayout.css'
 import type { ContentAlignment, ContentWidth } from './GridLayout.helper'
 import { getGridLayout } from './GridLayout.helper'
 
@@ -26,10 +26,25 @@ const elementConfig: StyledOptions = {
   shouldForwardProp: (prop: string) => isPropValid(prop) && prop !== 'width',
 }
 
-export const Content = styled(
+export const StyledContent = styled(
   'div',
   elementConfig,
 )<ContentProps>(({ width, align }) => ({
   gridColumn: '1 / span 12',
   ...getGridLayout(width, align ?? 'left'),
 }))
+
+export function Content({
+  className,
+  width,
+  align = 'left',
+  ...others
+}: ComponentProps<'div'> & ContentProps) {
+  if (typeof width === 'object') {
+    return <StyledContent className={className} width={width} align={align} {...others} />
+  }
+
+  return (
+    <div className={clsx(contentStatic[width], className)} data-alignment={align} {...others} />
+  )
+}