Bring back component docs
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -0,0 +1,112 @@
|
||||
import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks';
|
||||
import * as BoxStories from './Box.stories';
|
||||
import { Title, Text } from '../../../docs/components';
|
||||
import { PropsTable } from '../../../docs/components';
|
||||
import { spacePropsList } from '../../../docs/spaceProps';
|
||||
|
||||
<Meta of={BoxStories} />
|
||||
|
||||
<Unstyled>
|
||||
|
||||
<Title type="h1">Box</Title>
|
||||
<Text>
|
||||
Box is the lowest-level component in Canon. We use it internally to build all
|
||||
of our components. It provides a consistent API for styling and layout.
|
||||
</Text>
|
||||
|
||||
<Title type="h2">Usage</Title>
|
||||
<Source code={`import { Box } from "@backstage/canon";
|
||||
|
||||
<Box>Hello World!</Box>
|
||||
`} language="tsx" dark />
|
||||
|
||||
<Title type="h2">API reference</Title>
|
||||
|
||||
<Title type="h3">Box</Title>
|
||||
<Text>
|
||||
This is the Box component, our lowest-level component. Here are all the
|
||||
available properties.
|
||||
</Text>
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
alignItems: {
|
||||
type: ['stretch', 'start', 'center', 'end'],
|
||||
responsive: true,
|
||||
},
|
||||
border: {
|
||||
type: ['none', 'base', 'error', 'warning', 'selected'],
|
||||
responsive: true,
|
||||
},
|
||||
borderRadius: {
|
||||
type: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
|
||||
responsive: true,
|
||||
},
|
||||
children: {
|
||||
type: 'ReactNode',
|
||||
responsive: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
responsive: false,
|
||||
},
|
||||
display: {
|
||||
type: ['none', 'flex', 'block', 'inline'],
|
||||
responsive: true,
|
||||
},
|
||||
flexDirection: {
|
||||
type: ['row', 'column'],
|
||||
responsive: true,
|
||||
},
|
||||
flexWrap: {
|
||||
type: ['wrap', 'nowrap', 'wrap-reverse'],
|
||||
responsive: true,
|
||||
},
|
||||
gap: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
justifyContent: {
|
||||
type: ['stretch', 'start', 'center', 'end', 'around', 'between'],
|
||||
responsive: true,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
responsive: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Text style={{ marginTop: '16px' }}>
|
||||
Padding and margin are used to create space around your component using our
|
||||
predefined spacing tokens. We would recommend to use padding over margin to
|
||||
avoid collapsing margins but both are available.
|
||||
</Text>
|
||||
|
||||
<Canvas of={BoxStories.Padding} />
|
||||
|
||||
<PropsTable data={spacePropsList} />
|
||||
|
||||
<Title type="h2">Examples</Title>
|
||||
<Text>Here are some examples of how you can use the Box component.</Text>
|
||||
|
||||
<Title type="h3">Simple example</Title>
|
||||
<Text>A simple example of how to use the Box component.</Text>
|
||||
<Source
|
||||
code={`<Box padding="md" borderRadius="md">Hello World</Box>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
<Title type="h3">Responsive</Title>
|
||||
<Text>
|
||||
Most of the values can be defined per breakpoint, making it easy to create
|
||||
responsive designs.
|
||||
</Text>
|
||||
<Source
|
||||
code={`<Box padding={{ xs: 'sm', md: 'md' }} borderRadius={{ xs: 'sm', md: 'md' }}>Hello World</Box>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
</Unstyled>
|
||||
@@ -0,0 +1,135 @@
|
||||
import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
|
||||
import * as ButtonStories from './Button.stories';
|
||||
import { Title, Text } from '../../../docs/components';
|
||||
import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
|
||||
|
||||
<Meta of={ButtonStories} />
|
||||
|
||||
<Unstyled>
|
||||
|
||||
<Title type="h1">Button</Title>
|
||||
<Text>A button component that can be used to trigger actions.</Text>
|
||||
|
||||
<Canvas of={ButtonStories.Primary} />
|
||||
|
||||
<Title type="h2">Usage</Title>
|
||||
<Source code={`import { Button } from "@backstage/canon";
|
||||
|
||||
<Button>Click me</Button>
|
||||
`} language="tsx" dark />
|
||||
|
||||
<Title type="h2" style={{ marginBottom: '16px' }}>
|
||||
API reference
|
||||
</Title>
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
size: {
|
||||
type: ['small', 'medium'],
|
||||
responsive: true,
|
||||
},
|
||||
variant: {
|
||||
type: ['primary', 'secondary', 'tertiary'],
|
||||
responsive: true,
|
||||
},
|
||||
disabled: {
|
||||
type: 'boolean',
|
||||
responsive: false,
|
||||
},
|
||||
children: {
|
||||
type: 'ReactNode',
|
||||
responsive: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
responsive: false,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
responsive: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Title type="h2">Examples</Title>
|
||||
|
||||
<Title type="h3">Variants</Title>
|
||||
<Text>Here's a view when buttons have different variants.</Text>
|
||||
|
||||
<Canvas of={ButtonStories.Variants} />
|
||||
|
||||
<Source
|
||||
code={`<Inline alignY="center">
|
||||
<Button variant="primary">Primary</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="tertiary">Tertiary</Button>
|
||||
</Inline>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
<Title type="h3">Sizes</Title>
|
||||
<Text>Here's a view when buttons have different sizes.</Text>
|
||||
|
||||
<Canvas of={ButtonStories.Sizes} />
|
||||
|
||||
<Source
|
||||
code={`<Inline alignY="center">
|
||||
<Button size="medium">Medium</Button>
|
||||
<Button size="small">Small</Button>
|
||||
</Inline>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
<Title type="h3">With Icons</Title>
|
||||
<Text>Here's a view when buttons have icons.</Text>
|
||||
|
||||
<Canvas of={ButtonStories.WithIcons} />
|
||||
|
||||
<Source
|
||||
code={`<Inline alignY="center">
|
||||
<Button iconStart="cloud">Button</Button>
|
||||
<Button iconEnd="chevronRight">Button</Button>
|
||||
<Button iconStart="cloud" iconEnd="chevronRight">Button</Button>
|
||||
</Inline>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
<Title type="h3">Full width</Title>
|
||||
<Text>Here's a view when buttons are full width.</Text>
|
||||
|
||||
<Canvas of={ButtonStories.FullWidth} />
|
||||
|
||||
<Source
|
||||
code={`<Stack style={{ width: '300px' }}>
|
||||
<Button iconStart="cloud">Button</Button>
|
||||
<Button iconEnd="chevronRight">Button</Button>
|
||||
<Button iconStart="cloud" iconEnd="chevronRight">Button</Button>
|
||||
</Stack>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
<Title type="h3">Disabled</Title>
|
||||
<Text>Here's a view when buttons are disabled.</Text>
|
||||
|
||||
<Canvas of={ButtonStories.Disabled} />
|
||||
|
||||
<Source code={`<Button disabled>Button</Button>`} language="tsx" dark />
|
||||
|
||||
<Title type="h3">Responsive</Title>
|
||||
<Text>Here's a view when buttons are responsive.</Text>
|
||||
|
||||
<Canvas of={ButtonStories.Responsive} />
|
||||
|
||||
<Source
|
||||
code={`<Button variant={{ xs: 'primary', sm: 'secondary', md: 'tertiary' }} size={{ xs: 'small', sm: 'medium' }}>
|
||||
Button
|
||||
</Button>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
</Unstyled>
|
||||
@@ -0,0 +1,70 @@
|
||||
import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
|
||||
import * as CheckboxStories from './Checkbox.stories';
|
||||
import { Title, Text } from '../../../docs/components';
|
||||
import { PropsTable } from '../../../docs/components/PropsTable';
|
||||
|
||||
<Meta of={CheckboxStories} />
|
||||
|
||||
<Unstyled>
|
||||
|
||||
<Title type="h1">Checkbox</Title>
|
||||
<Text>A checkbox component that can be used to trigger actions.</Text>
|
||||
|
||||
<Canvas of={CheckboxStories.Primary} />
|
||||
|
||||
<Title type="h2">Usage</Title>
|
||||
<Source code={`import { Checkbox } from "@backstage/canon";
|
||||
|
||||
<Checkbox label="Checkbox" />
|
||||
`} language="tsx" dark />
|
||||
|
||||
<Title type="h2" style={{ marginBottom: '16px' }}>
|
||||
API reference
|
||||
</Title>
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
label: {
|
||||
type: 'string',
|
||||
responsive: false,
|
||||
},
|
||||
defaultChecked: {
|
||||
type: ['boolean', "'indeterminate'"],
|
||||
responsive: false,
|
||||
},
|
||||
checked: {
|
||||
type: ['boolean', "'indeterminate'"],
|
||||
responsive: false,
|
||||
},
|
||||
onChange: {
|
||||
type: "(checked: boolean | 'indeterminate') => void",
|
||||
responsive: false,
|
||||
},
|
||||
disabled: {
|
||||
type: 'boolean',
|
||||
responsive: false,
|
||||
},
|
||||
required: {
|
||||
type: 'boolean',
|
||||
responsive: false,
|
||||
},
|
||||
name: {
|
||||
type: 'string',
|
||||
responsive: false,
|
||||
},
|
||||
value: {
|
||||
type: 'string',
|
||||
responsive: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
responsive: false,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
responsive: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
</Unstyled>
|
||||
@@ -0,0 +1,99 @@
|
||||
import { Meta, Unstyled, Source } from '@storybook/blocks';
|
||||
import * as ContainerStories from './Container.stories';
|
||||
import { Title, Text, PropsTable, getProps } from '../../../docs/components';
|
||||
import { spacePropsList } from '../../../docs/spaceProps';
|
||||
|
||||
<Meta of={ContainerStories} />
|
||||
|
||||
<Unstyled>
|
||||
|
||||
<Title type="h1">Container</Title>
|
||||
|
||||
<Text>
|
||||
The container component let you use our default max-width and center the
|
||||
content on the page.
|
||||
</Text>
|
||||
|
||||
<Title type="h2">Usage</Title>
|
||||
<Source
|
||||
code={`import { Container } from "@backstage/canon";
|
||||
|
||||
<Container>Hello World!</Container>
|
||||
`} language="tsx" dark />
|
||||
|
||||
<Title type="h2" style={{ marginBottom: '16px' }}>
|
||||
API reference
|
||||
</Title>
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
children: {
|
||||
type: 'ReactNode',
|
||||
responsive: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
responsive: false,
|
||||
},
|
||||
marginY: {
|
||||
type: spacePropsList.marginY.type,
|
||||
responsive: spacePropsList.marginY.responsive,
|
||||
},
|
||||
marginBottom: {
|
||||
type: spacePropsList.marginBottom.type,
|
||||
responsive: spacePropsList.marginBottom.responsive,
|
||||
},
|
||||
marginTop: {
|
||||
type: spacePropsList.marginTop.type,
|
||||
responsive: spacePropsList.marginTop.responsive,
|
||||
},
|
||||
paddingY: {
|
||||
type: spacePropsList.paddingY.type,
|
||||
responsive: spacePropsList.paddingY.responsive,
|
||||
},
|
||||
paddingBottom: {
|
||||
type: spacePropsList.paddingBottom.type,
|
||||
responsive: spacePropsList.paddingBottom.responsive,
|
||||
},
|
||||
paddingTop: {
|
||||
type: spacePropsList.paddingTop.type,
|
||||
responsive: spacePropsList.paddingTop.responsive,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
responsive: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Title type="h2">Examples</Title>
|
||||
|
||||
<Title type="h3">Simple</Title>
|
||||
<Text>A simple example of how to use the Container component.</Text>
|
||||
|
||||
<Source
|
||||
code={`<Container>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Container>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
<Title type="h3">Responsive padding & margin</Title>
|
||||
<Text>
|
||||
The Container component also supports responsive values, making it easy to
|
||||
create responsive designs.
|
||||
</Text>
|
||||
<Source
|
||||
code={`<Container paddingY={{ xs: 'sm', md: 'md' }}>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Container>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
</Unstyled>
|
||||
@@ -0,0 +1,199 @@
|
||||
import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
|
||||
import * as GridStories from './Grid.stories';
|
||||
import { Title, Text, PropsTable } from '../../../docs/components';
|
||||
import { spacePropsList } from '../../../docs/spaceProps';
|
||||
|
||||
<Meta of={GridStories} />
|
||||
|
||||
<Unstyled>
|
||||
|
||||
<Title type="h1">Grid</Title>
|
||||
<Text>
|
||||
A layout component that helps to create simple column-based layouts as well as
|
||||
more complex ones.
|
||||
</Text>
|
||||
|
||||
<Title type="h2">Usage</Title>
|
||||
<Source code={`import { Grid } from "@backstage/canon";
|
||||
|
||||
<Grid>
|
||||
<Grid.Item>Hello World</Grid.Item>
|
||||
</Grid>
|
||||
`} language="tsx" dark />
|
||||
|
||||
<Title type="h2">API reference</Title>
|
||||
|
||||
<Title type="h3">Grid</Title>
|
||||
<Text>
|
||||
This is the grid container component. It will help to define the number of
|
||||
columns that will be used in the grid. You can also define the gap between the
|
||||
columns. All values are responsive.
|
||||
</Text>
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
columns: {
|
||||
type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto'],
|
||||
responsive: true,
|
||||
},
|
||||
gap: {
|
||||
type: ['xs', 'sm', 'md', 'lg', 'xl'],
|
||||
responsive: true,
|
||||
},
|
||||
children: {
|
||||
type: 'ReactNode',
|
||||
required: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
required: false,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
required: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Text style={{ marginTop: '16px' }}>
|
||||
The grid component also accepts all the spacing props from the Box component.
|
||||
</Text>
|
||||
|
||||
<PropsTable data={spacePropsList} />
|
||||
|
||||
<Title type="h3">Grid Item</Title>
|
||||
<Text>
|
||||
If you need more control over the columns, you can use the grid item
|
||||
component. This will give you access to `rowSpan`, `colSpan`, `start` and
|
||||
`end`. All values are responsive. This component is optional, you can use any
|
||||
elements directly if you prefer.
|
||||
</Text>
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
colSpan: {
|
||||
type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'],
|
||||
responsive: true,
|
||||
},
|
||||
rowSpan: {
|
||||
type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'],
|
||||
responsive: true,
|
||||
},
|
||||
start: {
|
||||
type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto'],
|
||||
responsive: true,
|
||||
},
|
||||
end: {
|
||||
type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto'],
|
||||
responsive: true,
|
||||
},
|
||||
children: {
|
||||
type: 'ReactNode',
|
||||
required: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
required: false,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
required: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Title type="h2">Examples</Title>
|
||||
|
||||
<Title type="h3">Simple grid</Title>
|
||||
<Text>This is a simple grid with 3 columns and a gap of md.</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="h3">Complex grid</Title>
|
||||
<Text>
|
||||
You can also use the grid item to create more complex layouts. In this example
|
||||
the first column will span 1 column and the second column will span 2 columns.
|
||||
</Text>
|
||||
|
||||
<Source
|
||||
code={`<Grid columns={3} gap="md">
|
||||
<Grid.Item colSpan={1}>
|
||||
<Box>Hello World</Box>
|
||||
</Grid.Item>
|
||||
<Grid.Item colSpan={2}>
|
||||
<Box>Hello World</Box>
|
||||
</Grid.Item>
|
||||
</Grid>
|
||||
`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
<Title type="h3">Mixing rows and columns</Title>
|
||||
<Text>
|
||||
The grid item component also supports the `rowSpan` prop, which allows you to
|
||||
span multiple rows within the grid layout. In this example, the first item
|
||||
will span 2 rows to achieve a dynamic and flexible grid structure.
|
||||
</Text>
|
||||
|
||||
<Source
|
||||
code={`<Grid columns={3} gap="md">
|
||||
<Grid.Item colSpan={1} rowSpan={2}>
|
||||
<Box>Hello World</Box>
|
||||
</Grid.Item>
|
||||
<Grid.Item colSpan={2}>
|
||||
<Box>Hello World</Box>
|
||||
</Grid.Item>
|
||||
<Grid.Item colSpan={2}>
|
||||
<Box>Hello World</Box>
|
||||
</Grid.Item>
|
||||
</Grid>
|
||||
`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
<Title type="h3">Responsive</Title>
|
||||
<Text>
|
||||
The grid component also supports responsive values. In this example the grid
|
||||
will have 1 column on small screens and 3 on large screens, with a gap of xs
|
||||
on small screens and md on large screens.
|
||||
</Text>
|
||||
<Source
|
||||
code={`<Grid columns={{ xs: 1, md: 3 }} gap={{ xs: 'xs', md: 'md' }}>
|
||||
<Grid.Item colSpan={{ xs: 1, md: 2 }}>
|
||||
<Box>Hello World</Box>
|
||||
</Grid.Item>
|
||||
<Grid.Item colSpan={{ xs: 1, md: 1 }}>
|
||||
<Box>Hello World</Box>
|
||||
</Grid.Item>
|
||||
</Grid>
|
||||
`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
<Title type="h3">Start and End</Title>
|
||||
<Text>
|
||||
The start and end props can be used to position the item in the grid.
|
||||
</Text>
|
||||
<Source
|
||||
code={`<Grid columns={3} gap="md">
|
||||
<Grid.Item start={2} end={4}>
|
||||
<Box>Hello World</Box>
|
||||
</Grid.Item>
|
||||
</Grid>
|
||||
`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
</Unstyled>
|
||||
@@ -0,0 +1,83 @@
|
||||
import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
|
||||
import * as HeadingStories from './Heading.stories';
|
||||
import { Title, Text } from '../../../docs/components';
|
||||
import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
|
||||
|
||||
<Meta of={HeadingStories} />
|
||||
|
||||
<Unstyled>
|
||||
|
||||
<Title type="h1">Heading</Title>
|
||||
|
||||
<Text>Headings are used to structure the content of your page.</Text>
|
||||
|
||||
<Canvas of={HeadingStories.Title1} />
|
||||
|
||||
<Title type="h2">Usage</Title>
|
||||
<Source code={`import { Heading } from "@backstage/canon";
|
||||
|
||||
<Heading variant="title1">Hello World!</Heading>
|
||||
`} language="tsx" dark />
|
||||
|
||||
<Title type="h2" style={{ marginBottom: '16px' }}>
|
||||
API reference
|
||||
</Title>
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
variant: {
|
||||
type: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
|
||||
responsive: true,
|
||||
},
|
||||
children: {
|
||||
type: 'ReactNode',
|
||||
responsive: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
responsive: false,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
responsive: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Title type="h2">Examples</Title>
|
||||
<Text>Here are some examples of how you can use the Heading component.</Text>
|
||||
|
||||
<Title type="h3">All variants</Title>
|
||||
<Text>
|
||||
The `Heading` component has a `variant` prop that can be used to change the
|
||||
appearance of the heading.
|
||||
</Text>
|
||||
|
||||
<Canvas of={HeadingStories.AllVariants} />
|
||||
|
||||
<Source
|
||||
code={`<Stack gap="md">
|
||||
<Heading variant="title1">Title 1 Lorem ipsum dolor sit amet consectetur...</Heading>
|
||||
<Heading variant="title2">Title 2 Lorem ipsum dolor sit amet consectetur...</Heading>
|
||||
<Heading variant="title3">Title 3 Lorem ipsum dolor sit amet consectetur...</Heading>
|
||||
<Heading variant="title4">Title 4 Lorem ipsum dolor sit amet consectetur...</Heading>
|
||||
<Heading variant="title5">Title 5 Lorem ipsum dolor sit amet consectetur...</Heading>
|
||||
<Heading variant="display">Display Lorem ipsum dolor sit amet consectetur...</Heading>
|
||||
</Stack>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
<Title type="h3">Responsive</Title>
|
||||
<Text>
|
||||
You can also use the `variant` prop to change the appearance of the text based
|
||||
on the screen size.
|
||||
</Text>
|
||||
|
||||
<Source
|
||||
code={`<Heading variant={{ xs: 'title1', md: 'title2' }}>Responsive Lorem ipsum dolor sit amet consectetur...</Heading>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
</Unstyled>
|
||||
@@ -0,0 +1,48 @@
|
||||
import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
|
||||
import * as IconStories from './Icon.stories';
|
||||
import { Title, Text } from '../../../docs/components';
|
||||
import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
|
||||
import { defaultIcons } from './icons';
|
||||
|
||||
<Meta of={IconStories} />
|
||||
|
||||
<Unstyled>
|
||||
|
||||
<Title type="h1">Icon</Title>
|
||||
|
||||
<Text>Icons are used to represent an action or a state.</Text>
|
||||
|
||||
<Canvas of={IconStories.Primary} />
|
||||
|
||||
<Title type="h2">Usage</Title>
|
||||
<Source code={`import { Icon } from "@backstage/canon";
|
||||
|
||||
<Icon name="icon-name" />
|
||||
`} language="tsx" dark />
|
||||
|
||||
<Title type="h2" style={{ marginBottom: '16px' }}>
|
||||
API reference
|
||||
</Title>
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
name: {
|
||||
type: Object.keys(defaultIcons),
|
||||
responsive: false,
|
||||
},
|
||||
size: {
|
||||
type: 'number',
|
||||
responsive: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
responsive: false,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
responsive: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
</Unstyled>
|
||||
@@ -0,0 +1,124 @@
|
||||
import { Meta, Unstyled, Source } from '@storybook/blocks';
|
||||
import * as InlineStories from './Inline.stories';
|
||||
import { Title, Text, PropsTable, getProps } from '../../../docs/components';
|
||||
import { spacePropsList } from '../../../docs/spaceProps';
|
||||
|
||||
<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">Usage</Title>
|
||||
<Source
|
||||
code={`import { Inline } from "@backstage/canon";
|
||||
|
||||
<Inline>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Inline>
|
||||
`} language="tsx" dark />
|
||||
|
||||
<Title type="h2" style={{ marginBottom: '16px' }}>
|
||||
API reference
|
||||
</Title>
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
align: {
|
||||
type: 'start | center | end',
|
||||
responsive: true,
|
||||
},
|
||||
alignY: {
|
||||
type: 'start | center | end',
|
||||
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={spacePropsList} />
|
||||
|
||||
<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>
|
||||
@@ -0,0 +1,126 @@
|
||||
import { Meta, Unstyled, Source } from '@storybook/blocks';
|
||||
import * as StackStories from './Stack.stories';
|
||||
import { Title, Text, PropsTable, getProps } from '../../../docs/components';
|
||||
import { spacePropsList } from '../../../docs/spaceProps';
|
||||
|
||||
<Meta of={StackStories} />
|
||||
|
||||
<Unstyled>
|
||||
|
||||
<Title type="h1">Stack</Title>
|
||||
|
||||
<Text>
|
||||
This is the stack container component. It will help to define the number of
|
||||
columns that will be used in the grid. You can also define the gap between the
|
||||
columns. All values are responsive.
|
||||
</Text>
|
||||
|
||||
<Title type="h2">Usage</Title>
|
||||
<Source
|
||||
code={`import { Stack } from "@backstage/canon";
|
||||
|
||||
<Stack>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Stack>
|
||||
`} language="tsx" dark />
|
||||
|
||||
<Title type="h2" style={{ marginBottom: '16px' }}>
|
||||
API reference
|
||||
</Title>
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
align: {
|
||||
type: ['start', 'center', 'end'],
|
||||
responsive: true,
|
||||
},
|
||||
children: {
|
||||
type: 'ReactNode',
|
||||
required: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
required: false,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
required: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Text style={{ marginTop: '16px' }}>
|
||||
The grid component also accepts all the spacing props from the Box component.
|
||||
</Text>
|
||||
|
||||
<PropsTable data={spacePropsList} />
|
||||
|
||||
<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>
|
||||
|
||||
<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">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>
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Meta, Controls } from '@storybook/blocks';
|
||||
|
||||
<Meta title="Components/Table" />
|
||||
|
||||
# Table
|
||||
@@ -0,0 +1,101 @@
|
||||
import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
|
||||
import * as TextStories from './Text.stories';
|
||||
import { Title, Text } from '../../../docs/components';
|
||||
import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
|
||||
|
||||
<Meta of={TextStories} />
|
||||
|
||||
<Unstyled>
|
||||
|
||||
<Title type="h1">Text</Title>
|
||||
|
||||
<Text>The `Text` component is used to display content on your page.</Text>
|
||||
|
||||
<Canvas of={TextStories.Default} />
|
||||
|
||||
<Title type="h2">Usage</Title>
|
||||
<Source code={`import { Text } from "@backstage/canon";
|
||||
|
||||
<Text>Hello World!</Text>`} language="tsx" dark />
|
||||
|
||||
<Title type="h2" style={{ marginBottom: '16px' }}>
|
||||
API reference
|
||||
</Title>
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
variant: {
|
||||
type: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
|
||||
responsive: true,
|
||||
},
|
||||
weight: {
|
||||
type: ['regular', 'bold'],
|
||||
responsive: true,
|
||||
},
|
||||
children: {
|
||||
type: 'ReactNode',
|
||||
responsive: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
responsive: false,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
responsive: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Title type="h2">Examples</Title>
|
||||
<Text>Here are some examples of how you can use the Text component.</Text>
|
||||
|
||||
<Title type="h3">All variants</Title>
|
||||
<Text>
|
||||
The `Text` component has a `variant` prop that can be used to change the
|
||||
appearance of the text.
|
||||
</Text>
|
||||
|
||||
<Canvas of={TextStories.AllVariants} />
|
||||
|
||||
<Source
|
||||
code={`<Stack gap="md">
|
||||
<Text variant="subtitle">Subtitle Lorem ipsum dolor sit amet consectetur...</Text>
|
||||
<Text variant="body">Body Lorem ipsum dolor sit amet consectetur...</Text>
|
||||
<Text variant="caption">Caption Lorem ipsum dolor sit amet consectetur...</Text>
|
||||
<Text variant="label">Label Lorem ipsum dolor sit amet consectetur...</Text>
|
||||
</Stack>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
<Title type="h3">All weights</Title>
|
||||
<Text>
|
||||
The `Text` component has a `weight` prop that can be used to change the
|
||||
appearance of the text.
|
||||
</Text>
|
||||
|
||||
<Canvas of={TextStories.AllWeights} />
|
||||
|
||||
<Source
|
||||
code={`<Stack gap="md">
|
||||
<Text weight="regular">Regular Lorem ipsum dolor sit amet consectetur...</Text>
|
||||
<Text weight="bold">Bold Lorem ipsum dolor sit amet consectetur...</Text>
|
||||
</Stack>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
<Title type="h3">Responsive</Title>
|
||||
<Text>
|
||||
You can also use the `variant` prop to change the appearance of the text based
|
||||
on the screen size.
|
||||
</Text>
|
||||
|
||||
<Source
|
||||
code={`<Text variant={{ xs: 'label', md: 'body' }}>Responsive Lorem ipsum dolor sit amet consectetur...</Text>`}
|
||||
language="tsx"
|
||||
dark
|
||||
/>
|
||||
|
||||
</Unstyled>
|
||||
Reference in New Issue
Block a user