Update docs for Inline

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/src/components/Inline/Docs.mdx

@@ -0,0 +1,118 @@
+import { Meta, Unstyled, Source } from '@storybook/blocks';
+import * as InlineStories from './Inline.stories';
+import { Title, Text } from '../../../docs/components';
+import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable';
+import { spacingProperties } from '../../layout/sprinkles.css';
+import { inlineProperties } from './sprinkles.css';
+
+<Meta of={InlineStories} />
+
+<Unstyled>
+
+<Title type="h1">Inline</Title>
+
+<Text>
+  The Inline component is used to create a horizontal layout of elements. By
+  default it uses flex and flexWrap to make sure that your content always flows
+  responsively.
+</Text>
+
+<Title type="h2">Installation</Title>
+<Source code={`yarn install @backstage/canon/inline`} language="bash" dark />
+
+<Title type="h2" style={{ marginBottom: '16px' }}>
+  API reference
+</Title>
+
+<PropsTable
+  data={{
+    align: {
+      type: 'left | center | right',
+      responsive: true,
+    },
+    alignY: {
+      type: 'top | center | bottom',
+      responsive: true,
+    },
+    children: {
+      type: 'ReactNode',
+      responsive: false,
+    },
+    className: {
+      type: 'string',
+      responsive: false,
+    },
+    style: {
+      type: 'CSSProperties',
+      responsive: false,
+    },
+  }}
+/>
+
+<Text style={{ marginTop: '16px' }}>
+  The grid component also accepts all the spacing props from the Box component.
+</Text>
+
+<PropsTable data={getBoxProps(spacingProperties.styles)} />
+
+<Title type="h2">Examples</Title>
+
+<Title type="h3">Simple</Title>
+<Text>A simple example of how to use the Inline component.</Text>
+
+<Source
+  code={`<Inline>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+</Inline>`}
+  language="tsx"
+  dark
+/>
+
+<Title type="h3">Responsive</Title>
+<Text>
+  The Inline component also supports responsive values, making it easy to create
+  responsive designs.
+</Text>
+<Source
+  code={`<Inline gap={{ xs: 'sm', md: 'md' }}>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+</Inline>`}
+  language="tsx"
+  dark
+/>
+
+<Title type="h3">Align</Title>
+<Text>
+  The Inline component also supports responsive alignment, making it easy to
+  create responsive designs.
+</Text>
+<Source
+  code={`<Inline align={{ xs: 'left', md: 'center' }}>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+</Inline>`}
+  language="tsx"
+  dark
+/>
+
+<Title type="h3">Align vertically</Title>
+<Text>
+  The Inline component also supports responsive vertical alignment, making it
+  easy to create responsive designs.
+</Text>
+<Source
+  code={`<Inline alignY={{ xs: 'top', md: 'center' }}>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+</Inline>`}
+  language="tsx"
+  dark
+/>
+
+</Unstyled>

packages/canon/src/components/Inline/sprinkles.css.ts

@@ -18,7 +18,7 @@ import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
 import { breakpoints } from '../../layout/properties';
 import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
 
-const inlineProperties = defineProperties({
+export const inlineProperties = defineProperties({
   conditions: breakpoints,
   defaultCondition: 'xs',
   properties: {

packages/canon/src/components/Stack/Docs.mdx

@@ -1,7 +1,8 @@
 import { Meta, Unstyled, Source } from '@storybook/blocks';
 import * as StackStories from './Stack.stories';
 import { Title, Text } from '../../../docs/components';
-import { PropsTable } from '../../../docs/components/PropsTable';
+import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable';
+import { spacingProperties } from '../../layout/sprinkles.css';
 
 <Meta of={StackStories} />
 
@@ -15,15 +16,12 @@ import { PropsTable } from '../../../docs/components/PropsTable';
   columns. All values are responsive.
 </Text>
 
-<Source
-  code={`<Stack gap="md">
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Stack>`}
-  language="tsx"
-  dark
-/>
+<Title type="h2">Installation</Title>
+<Source code={`yarn install @backstage/canon/stack`} language="bash" dark />
+
+<Title type="h2" style={{ marginBottom: '16px' }}>
+  API reference
+</Title>
 
 <PropsTable
   data={{
@@ -31,10 +29,6 @@ import { PropsTable } from '../../../docs/components/PropsTable';
       type: ['left', 'center', 'right'],
       responsive: true,
     },
-    gap: {
-      type: ['xs', 'sm', 'md', 'lg', 'xl'],
-      responsive: true,
-    },
     children: {
       type: 'ReactNode',
       required: false,
@@ -50,16 +44,76 @@ import { PropsTable } from '../../../docs/components/PropsTable';
   }}
 />
 
-<Title type="h2">How to stack horizontally?</Title>
+<Text style={{ marginTop: '16px' }}>
+  The grid component also accepts all the spacing props from the Box component.
+</Text>
+
+<PropsTable data={getBoxProps(spacingProperties.styles)} />
+
+<Title type="h2">Common questions</Title>
+
+<Title type="h3">Can I stack horizontally?</Title>
 <Text>
   The Stack component only allows for stacking elements vertically. If you want
   to create a column layout, please use the Grid component.
 </Text>
 
-<Title type="h2">Responsive</Title>
-<Text>TBD</Text>
+<Source
+  code={`<Grid columns={3} gap="md">
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+</Grid>
+`}
+  language="tsx"
+  dark
+/>
 
-<Title type="h2">Start and End</Title>
-<Text>TBD</Text>
+<Title type="h2">Examples</Title>
+
+<Title type="h3">Simple</Title>
+<Text>
+  A simple example of how to use the Stack component with a medium gap.
+</Text>
+
+<Source
+  code={`<Stack gap="md">
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+</Stack>`}
+  language="tsx"
+  dark
+/>
+
+<Title type="h3">Responsive</Title>
+<Text>
+  The Stack component also supports responsive values, making it easy to create
+  responsive designs.
+</Text>
+<Source
+  code={`<Stack gap={{ xs: 'sm', md: 'md' }}>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+</Stack>`}
+  language="tsx"
+  dark
+/>
+
+<Title type="h3">Align</Title>
+<Text>
+  The Stack component also supports responsive alignment, making it easy to
+  create responsive designs.
+</Text>
+<Source
+  code={`<Stack align={{ xs: 'left', md: 'center' }}>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+</Stack>`}
+  language="tsx"
+  dark
+/>
 
 </Unstyled>