docs(site): add docs for layouts (#1555)

packages/docs/components/decorative-box/decorative-box.module.css

@@ -1,10 +1,11 @@
 .decorativeBox {
   --sl-local-height: 100%;
+  --sl-local-width: 100%;
   --sl-local-bg: var(--sl-color-gray-3);
   --sl-local-bc: var(--sl-color-gray-6);
 
   height: var(--sl-local-height);
-  width: 100%;
+  width: var(--sl-local-width);
   background-clip: padding-box;
   background-color: var(--sl-local-bg);
   border: 1px solid var(--sl-local-bc);

packages/docs/components/decorative-box/decorative-box.tsx

@@ -8,6 +8,8 @@ export function DecorativeBox(props: DecorativeBoxProps) {
   const {
     style: styleOverride,
     height = '100%',
+    width = '100%',
+
     className = '',
     color = 'gray',
     ...rest
@@ -17,6 +19,7 @@ export function DecorativeBox(props: DecorativeBoxProps) {
     <div
       style={style({
         '--sl-local-height': height,
+        '--sl-local-width': width,
         '--sl-local-bg': `var(--sl-color-${color}-3)`,
         '--sl-local-bc': `var(--sl-color-${color}-6)`,
         ...styleOverride,
@@ -33,6 +36,11 @@ interface DecorativeBoxProps extends ComponentPropsWithoutRef<'div'> {
    * @default '100%''
    */
   height?: string
+  /**
+   * Component width
+   * @default '100%''
+   */
+  width?: string
   /**
    * Decorative color
    * @default 'gray'

packages/docs/components/preview/preview.module.css

@@ -9,6 +9,7 @@
 .previewWrapper {
   padding: var(--space);
   min-height: var(--min-h);
+  height: fit-content;
   border-radius: var(--radii);
   background-color: color-mix(
     in srgb,
@@ -19,6 +20,10 @@
   overflow-x: auto;
 }
 
+.previewWrapper[data-fixed-height='true'] {
+  height: var(--min-h);
+}
+
 .codeWrapper > pre {
   padding: var(--space);
   min-height: var(--min-h);

packages/docs/components/preview/preview.tsx

@@ -16,7 +16,7 @@ import styles from './preview.module.css'
 import { useClipboard } from '../hooks/use-clipboard'
 
 export function Preview(props: Props) {
-  const { name } = props
+  const { name, fixedHeight = false } = props
 
   const [activeId, setActiveId] = useState<string>('preview')
   const { isCopied, handleCopy } = useClipboard()
@@ -44,7 +44,12 @@ export function Preview(props: Props) {
         </TabList>
         <TabPanel>
           <Suspense fallback={<Spinner description="Loading component" />}>
-            <div className={styles.previewWrapper}>{Preview}</div>
+            <div
+              className={styles.previewWrapper}
+              data-fixed-height={fixedHeight}
+            >
+              {Preview}
+            </div>
           </Suspense>
         </TabPanel>
         <TabPanel style={{ position: 'relative' }}>
@@ -70,4 +75,5 @@ export function Preview(props: Props) {
 
 interface Props {
   name: string
+  fixedHeight: boolean
 }

packages/docs/examples/bleed.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
-import { Bleed, Button } from '@vtex/shoreline'
+import { Bleed, Button, IconCaretLeft } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
 
 export default function Example() {
   return (
-    <Bleed top="$space-2" bottom="$space-2">
-      <Button>Text</Button>
-    </Bleed>
+    <DecorativeBox color="blue">
+      <Bleed top="$space-2" bottom="$space-2" start="$space-2">
+        <Button variant="tertiary">
+          <IconCaretLeft /> Action
+        </Button>
+      </Bleed>
+    </DecorativeBox>
   )
 }

packages/docs/examples/center.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import { Center, Text } from '@vtex/shoreline'
+import { Center } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
 
 export default function Example() {
   return (
     <Center>
-      <Text variant="body">Centered content</Text>
+      <DecorativeBox width="64px" height="64px" />
     </Center>
   )
 }

packages/docs/examples/flex.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Flex } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Flex>
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+    </Flex>
+  )
+}

packages/docs/examples/grid-cell.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Grid, GridCell } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Grid columns="repeat(3, 1fr)" rows="repeat(2, 64px)">
+      <GridCell>
+        <DecorativeBox />
+      </GridCell>
+      <GridCell>
+        <DecorativeBox />
+      </GridCell>
+      <GridCell>
+        <DecorativeBox />
+      </GridCell>
+      <GridCell>
+        <DecorativeBox />
+      </GridCell>
+      <GridCell>
+        <DecorativeBox />
+      </GridCell>
+      <GridCell>
+        <DecorativeBox />
+      </GridCell>
+    </Grid>
+  )
+}

packages/docs/examples/grid.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Grid } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Grid columns="repeat(3, 1fr)" rows="repeat(2, 64px)">
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+    </Grid>
+  )
+}

packages/docs/examples/stack-fluid.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Stack } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Stack fluid>
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+    </Stack>
+  )
+}

packages/docs/examples/stack-horizontal.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Stack } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Stack horizontal>
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+    </Stack>
+  )
+}

packages/docs/examples/stack.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Stack } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Stack>
+      <DecorativeBox width="128px" height="64px" />
+      <DecorativeBox width="128px" height="64px" />
+      <DecorativeBox width="128px" height="64px" />
+    </Stack>
+  )
+}

packages/docs/pages/components/center.mdx

@@ -2,7 +2,7 @@
 
 <ComponentDescription name="center" />
 
-<Preview name="center" />
+<Preview name="center" fixedHeight />
 
 ## Optional props
 

packages/docs/pages/components/flex.mdx

@@ -1,5 +1,9 @@
 # Flex
 
-A component that represents a flexbox layout.
+<ComponentDescription name="flex" />
 
-![Flex example](public/assets/overview-flex.webp)
+<Preview name="flex" />
+
+## Optional props
+
+<PropsDocs name="flex" />

packages/docs/pages/components/grid.mdx

@@ -1,5 +1,13 @@
 # Grid
 
-A component that represents a grid layout.
+<ComponentDescription name="grid" />
 
-![Grid example](public/assets/overview-grid.webp)
+<Preview name="grid" />
+
+## Required props
+
+<PropsDocs name="grid" required />
+
+## Optional props
+
+<PropsDocs name="grid" />

packages/docs/pages/components/grid/_meta.json

@@ -1 +1 @@
-{ "api-reference": "API Reference", "grid-cell": "GridCell" }
+{ "grid-cell": "GridCell" }