Update content
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -1,4 +1,4 @@
|
||||
import { components } from '@/data';
|
||||
import { components } from '@/utils/data';
|
||||
import { notFound } from 'next/navigation';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { coreConcepts } from '@/data';
|
||||
import { coreConcepts } from '@/utils/data';
|
||||
import { notFound } from 'next/navigation';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
@@ -2,7 +2,7 @@ import styles from './Sidebar.module.css';
|
||||
import Image from 'next/image';
|
||||
import { TabsVersion, TabsTheme, TabsPages } from '../Tabs';
|
||||
import Link from 'next/link';
|
||||
import { components, coreConcepts } from '@/data';
|
||||
import { components, coreConcepts } from '@/utils/data';
|
||||
|
||||
export const Sidebar = () => {
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import { Story } from '../components/Story';
|
||||
import { CodeBlock } from '../components/CodeBlock';
|
||||
import { PropsTable } from '../components/PropsTable';
|
||||
|
||||
# Checkbox
|
||||
|
||||
A checkbox component that can be used to trigger actions.
|
||||
|
||||
<Story id="components-checkbox--primary" />
|
||||
|
||||
<CodeBlock
|
||||
code={`import { Checkbox } from "@backstage/canon";
|
||||
|
||||
<Checkbox label="Checkbox" />
|
||||
`} />
|
||||
|
||||
## API reference
|
||||
|
||||
<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,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@@ -0,0 +1,85 @@
|
||||
import { Story } from '../components/Story';
|
||||
import { CodeBlock } from '../components/CodeBlock';
|
||||
import { PropsTable } from '../components/PropsTable';
|
||||
import { spacePropsList } from '../utils/spaceProps';
|
||||
|
||||
# Container
|
||||
|
||||
The container component let you use our default max-width and center the
|
||||
content on the page.
|
||||
|
||||
<CodeBlock
|
||||
code={`import { Container } from "@backstage/canon";
|
||||
|
||||
<Container>Hello World!</Container>
|
||||
`} />
|
||||
|
||||
## API reference
|
||||
|
||||
<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,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
## Examples
|
||||
|
||||
### Simple
|
||||
|
||||
A simple example of how to use the Container component.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Container>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Container>`}
|
||||
/>
|
||||
|
||||
### Responsive padding & margin
|
||||
|
||||
The Container component also supports responsive values, making it easy to
|
||||
create responsive designs.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Container paddingY={{ xs: 'sm', md: 'md' }}>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Container>`}
|
||||
/>
|
||||
@@ -0,0 +1,177 @@
|
||||
import { Story } from '../components/Story';
|
||||
import { CodeBlock } from '../components/CodeBlock';
|
||||
import { PropsTable } from '../components/PropsTable';
|
||||
import { spacePropsList } from '../utils/spaceProps';
|
||||
|
||||
# Grid
|
||||
|
||||
A layout component that helps to create simple column-based layouts as well as
|
||||
more complex ones.
|
||||
|
||||
<CodeBlock
|
||||
code={`import { Grid } from "@backstage/canon";
|
||||
|
||||
<Grid>
|
||||
<Grid.Item>Hello World</Grid.Item>
|
||||
</Grid>
|
||||
`} />
|
||||
|
||||
## API reference
|
||||
|
||||
### Grid
|
||||
|
||||
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.
|
||||
|
||||
<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,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
The grid component also accepts all the spacing props from the Box component.
|
||||
|
||||
<PropsTable data={spacePropsList} />
|
||||
|
||||
### Grid.Item
|
||||
|
||||
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.
|
||||
|
||||
<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,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
## Examples
|
||||
|
||||
### Simple grid
|
||||
|
||||
A simple grid with 3 columns and a gap of md.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Grid columns={3} gap="md">
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Grid>
|
||||
`}
|
||||
/>
|
||||
|
||||
### Complex grid
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
|
||||
### Mixing rows and columns
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
|
||||
### Responsive grid
|
||||
|
||||
The grid component also supports responsive values, making it easy to create
|
||||
responsive designs.
|
||||
|
||||
<CodeBlock
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
|
||||
### Start and End
|
||||
|
||||
The start and end props can be used to position the item in the grid.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Grid columns={3} gap="md">
|
||||
<Grid.Item start={2} end={4}>
|
||||
<Box>Hello World</Box>
|
||||
</Grid.Item>
|
||||
</Grid>
|
||||
`}
|
||||
/>
|
||||
@@ -0,0 +1,66 @@
|
||||
import { Story } from '../components/Story';
|
||||
import { CodeBlock } from '../components/CodeBlock';
|
||||
import { PropsTable } from '../components/PropsTable';
|
||||
|
||||
# Heading
|
||||
|
||||
Headings are used to structure the content of your page.
|
||||
|
||||
<Story id="components-heading--title-1" height={108} />
|
||||
|
||||
<CodeBlock
|
||||
code={`import { Heading } from "@backstage/canon";
|
||||
|
||||
<Heading variant="title1">Hello World!</Heading>
|
||||
`} />
|
||||
|
||||
## API reference
|
||||
|
||||
<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,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
## Examples
|
||||
|
||||
### All variants
|
||||
|
||||
The `Heading` component has a `variant` prop that can be used to change the
|
||||
appearance of the heading.
|
||||
|
||||
<Story id="components-heading--all-variants" height={400} />
|
||||
|
||||
<CodeBlock
|
||||
code={`<Stack gap="md">
|
||||
<Heading variant="display">Display</Heading>
|
||||
<Heading variant="title1">Title 1</Heading>
|
||||
<Heading variant="title2">Title 2</Heading>
|
||||
<Heading variant="title3">Title 3</Heading>
|
||||
<Heading variant="title4">Title 4</Heading>
|
||||
</Stack>`}
|
||||
/>
|
||||
|
||||
### Responsive
|
||||
|
||||
You can also use the `variant` prop to change the appearance of the text based
|
||||
on the screen size.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Heading variant={{ xs: 'title1', md: 'title2' }}>Responsive</Heading>`}
|
||||
/>
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Story } from '../components/Story';
|
||||
import { CodeBlock } from '../components/CodeBlock';
|
||||
import { PropsTable } from '../components/PropsTable';
|
||||
import { icons } from '@backstage/canon';
|
||||
|
||||
# Icon
|
||||
|
||||
Icons are used to represent an action or a state.
|
||||
|
||||
<Story id="components-icon--primary" />
|
||||
|
||||
<CodeBlock
|
||||
code={`import { Icon } from "@backstage/canon";
|
||||
|
||||
<Icon name="heart" />
|
||||
`} />
|
||||
|
||||
## API reference
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
name: {
|
||||
type: Object.keys(icons),
|
||||
responsive: false,
|
||||
},
|
||||
size: {
|
||||
type: 'number',
|
||||
responsive: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
responsive: false,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
responsive: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@@ -0,0 +1,104 @@
|
||||
import { Story } from '../components/Story';
|
||||
import { CodeBlock } from '../components/CodeBlock';
|
||||
import { PropsTable } from '../components/PropsTable';
|
||||
import { spacePropsList } from '../utils/spaceProps';
|
||||
|
||||
# Inline
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock
|
||||
code={`import { Inline } from "@backstage/canon";
|
||||
|
||||
<Inline>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Inline>
|
||||
`} />
|
||||
|
||||
## API reference
|
||||
|
||||
<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,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
The grid component also accepts all the spacing props from the Box component.
|
||||
|
||||
<PropsTable data={spacePropsList} />
|
||||
|
||||
## Examples
|
||||
|
||||
### Simple
|
||||
|
||||
A simple example of how to use the Inline component.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Inline>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Inline>`}
|
||||
/>
|
||||
|
||||
### Responsive
|
||||
|
||||
The Inline component also supports responsive values, making it easy to create
|
||||
responsive designs.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Inline gap={{ xs: 'sm', md: 'md' }}>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Inline>`}
|
||||
/>
|
||||
|
||||
### Align
|
||||
|
||||
The Inline component also supports responsive alignment, making it easy to
|
||||
create responsive designs.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Inline align={{ xs: 'left', md: 'center' }}>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Inline>`}
|
||||
/>
|
||||
|
||||
### Align vertically
|
||||
|
||||
The Inline component also supports responsive vertical alignment, making it
|
||||
easy to create responsive designs.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Inline alignY={{ xs: 'top', md: 'center' }}>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Inline>`}
|
||||
/>
|
||||
@@ -0,0 +1,123 @@
|
||||
import * as Table from '@/components/Table';
|
||||
import { Chip } from '@/components/Chip';
|
||||
import { CodeBlock } from '@/components/CodeBlock';
|
||||
|
||||
# Responsive
|
||||
|
||||
Canon is built on a responsive design system, meaning that the components are
|
||||
designed to adapt to different screen sizes. By default we offer a set of
|
||||
breakpoints that you can use to create responsive components.
|
||||
|
||||
## Breakpoints
|
||||
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.HeaderRow>
|
||||
<Table.HeaderCell>Breakpoint prefix</Table.HeaderCell>
|
||||
<Table.HeaderCell>Minimum width</Table.HeaderCell>
|
||||
<Table.HeaderCell>CSS</Table.HeaderCell>
|
||||
</Table.HeaderRow>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>xs</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Chip>0px</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Chip>{`{ ... }`}</Chip>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>sm</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Chip>640px</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Chip>{`@media (min-width: 640px) { ... }`}</Chip>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>md</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Chip>768px</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Chip>{`@media (min-width: 768px) { ... }`}</Chip>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>lg</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Chip>1024px</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Chip>{`@media (min-width: 1024px) { ... }`}</Chip>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>xl</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Chip>1280px</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Chip>{`@media (min-width: 1280px) { ... }`}</Chip>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>2xl</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Chip>1536px</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Chip>{`@media (min-width: 1536px) { ... }`}</Chip>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
|
||||
## Responsive components
|
||||
|
||||
Canon components are designed to be responsive, meaning that they will adapt
|
||||
to different screen sizes. Not every component is responsive, but the ones
|
||||
that are will have a prop to control the responsive behavior.
|
||||
|
||||
The behaviour is the same for each component. For each prop, instead of adding
|
||||
the value, you add an object with the value and the breakpoint prefix.
|
||||
|
||||
<CodeBlock
|
||||
code={`// Fixed value
|
||||
|
||||
<Button size="small">Button</Button>
|
||||
|
||||
// Responsive value
|
||||
|
||||
<Button size={{ xs: 'small', md: 'medium' }}>Button</Button>`} />
|
||||
|
||||
## How to update breakpoints
|
||||
|
||||
The set of keys are not to be changed, but you can update the minimum width of
|
||||
each breakpoint in the theme provider.
|
||||
|
||||
<CodeBlock
|
||||
code={`<CanonProvider breakpoints={{
|
||||
xs: 0,
|
||||
sm: 640,
|
||||
md: 768,
|
||||
lg: 1024,
|
||||
xl: 1280,
|
||||
'2xl': 1536,
|
||||
}} />`}
|
||||
/>
|
||||
@@ -0,0 +1,102 @@
|
||||
import { CodeBlock } from '../components/CodeBlock';
|
||||
import { PropsTable } from '../components/PropsTable';
|
||||
import { spacePropsList } from '../utils/spaceProps';
|
||||
|
||||
# Stack
|
||||
|
||||
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.
|
||||
|
||||
<CodeBlock
|
||||
code={`import { Stack } from "@backstage/canon";
|
||||
|
||||
<Stack>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Stack>
|
||||
`} />
|
||||
|
||||
## API reference
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
align: {
|
||||
type: ['start', 'center', 'end'],
|
||||
responsive: true,
|
||||
},
|
||||
children: {
|
||||
type: 'ReactNode',
|
||||
required: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
required: false,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
required: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
The grid component also accepts all the spacing props from the Box component.
|
||||
|
||||
<PropsTable data={spacePropsList} />
|
||||
|
||||
## Common questions
|
||||
|
||||
### Can I stack horizontally?
|
||||
|
||||
The Stack component only allows for stacking elements vertically. If you want
|
||||
to create a column layout, please use the Grid component.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Grid columns={3} gap="md">
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Grid>
|
||||
`}
|
||||
/>
|
||||
|
||||
## Examples
|
||||
|
||||
### Simple
|
||||
|
||||
A simple example of how to use the Stack component.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Stack>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Stack>`}
|
||||
/>
|
||||
|
||||
### Responsive
|
||||
|
||||
The Stack component also supports responsive values, making it easy to create
|
||||
responsive designs.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Stack gap={{ xs: 'sm', md: 'md' }}>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Stack>`}
|
||||
/>
|
||||
|
||||
### Align
|
||||
|
||||
The Stack component also supports responsive alignment, making it easy to
|
||||
create responsive designs.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Stack align={{ xs: 'left', md: 'center' }}>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
<Box>Hello World</Box>
|
||||
</Stack>`}
|
||||
/>
|
||||
@@ -0,0 +1 @@
|
||||
# Table
|
||||
@@ -0,0 +1,78 @@
|
||||
import { CodeBlock } from '../components/CodeBlock';
|
||||
import { PropsTable } from '../components/PropsTable';
|
||||
import { Story } from '../components/Story';
|
||||
|
||||
# Text
|
||||
|
||||
The `Text` component is used to display content on your page.
|
||||
|
||||
<Story id="components-text--default" />
|
||||
|
||||
<CodeBlock
|
||||
code={`import { Text } from "@backstage/canon";
|
||||
|
||||
<Text>Hello World!</Text>`} />
|
||||
|
||||
## API reference
|
||||
|
||||
<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,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
## Examples
|
||||
|
||||
### All variants
|
||||
|
||||
The `Text` component has a `variant` prop that can be used to change the
|
||||
appearance of the text.
|
||||
|
||||
<CodeBlock
|
||||
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>`}
|
||||
/>
|
||||
|
||||
### All weights
|
||||
|
||||
The `Text` component has a `weight` prop that can be used to change the
|
||||
appearance of the text.
|
||||
|
||||
<CodeBlock
|
||||
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>`}
|
||||
/>
|
||||
|
||||
### Responsive
|
||||
|
||||
You can also use the `variant` prop to change the appearance of the text based
|
||||
on the screen size.
|
||||
|
||||
<CodeBlock
|
||||
code={`<Text variant={{ xs: 'label', md: 'body' }}>Responsive</Text>`}
|
||||
/>
|
||||
@@ -0,0 +1,220 @@
|
||||
import { CodeBlock } from '@/components/CodeBlock';
|
||||
import * as Table from '@/components/Table';
|
||||
import { Chip } from '@/components/Chip';
|
||||
|
||||
# Theming
|
||||
|
||||
Backstage ships with a default theme with a light and dark mode variant. The
|
||||
themes are provided as a part of the `@backstage/canon` package, which also
|
||||
includes utilities for customizing the default theme, or creating completely
|
||||
new themes.
|
||||
|
||||
## Light & Dark modes
|
||||
|
||||
By default we are supporting both light and dark modes. Each user can opt to
|
||||
choose what theme they want to use or to use their system decide what theme to
|
||||
use. If you want to create your own theme, you will have to set both light and
|
||||
dark themes following the instructions below. If you only set one of them, the
|
||||
other mode will fallback to the default theme.
|
||||
|
||||
## How to create your own theme
|
||||
|
||||
To create your own theme, you will have to define the variables below. To do
|
||||
that, create a theme.css file and import it in your application. Here's an
|
||||
example below on how to set your light and dark mode.
|
||||
|
||||
<CodeBlock
|
||||
code={`/** Light theme **/
|
||||
[data-theme='light'] {
|
||||
--canon-accent: #1ed760;
|
||||
--canon-bg: #fff;
|
||||
--canon-surface-1: #f5f5f5;
|
||||
--canon-surface-2: #000;
|
||||
--canon-outline: #666;
|
||||
--canon-outline-focus: #ccc;
|
||||
--canon-text-primary: #f0f0f0;
|
||||
--canon-text-secondary: #666;
|
||||
--canon-font-regular: 'Geist', serif;
|
||||
--canon-font-mono: 'Monospace', monospace;
|
||||
/* ... other values */
|
||||
}
|
||||
|
||||
/** Dark theme **/
|
||||
[data-theme='dark'] {
|
||||
--canon-accent: #1ed760;
|
||||
--canon-bg: #000;
|
||||
--canon-surface-1: #f5f5f5;
|
||||
--canon-surface-2: #000;
|
||||
--canon-outline: #666;
|
||||
--canon-outline-focus: #ccc;
|
||||
--canon-text-primary: #fff;
|
||||
--canon-text-secondary: #666;
|
||||
--canon-font-regular: 'Geist', serif;
|
||||
--canon-font-mono: 'Monospace', monospace;
|
||||
/* ... other values */
|
||||
}
|
||||
`}
|
||||
/>
|
||||
|
||||
## Colors
|
||||
|
||||
We provide a set of generic colours tokens that we use across Canon. By
|
||||
changing these colours you can easily change the look and feel of your
|
||||
application to match your brand.
|
||||
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.HeaderRow>
|
||||
<Table.HeaderCell>Prop</Table.HeaderCell>
|
||||
<Table.HeaderCell>Description</Table.HeaderCell>
|
||||
</Table.HeaderRow>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-accent</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The accent color for the theme.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-bg</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The background color for the theme.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-surface-1</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The first surface color for the theme.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-surface-2</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The second surface color for the theme.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-outline</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The outline color for the theme.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-outline-focus</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The outline focus color for the theme.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-text-primary</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The primary text color for the theme.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-text-secondary</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The secondary text color for the theme.</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
|
||||
## Typography
|
||||
|
||||
We have two fonts that we use across Canon. The first one is the sans-serif
|
||||
font that we use for the body of the application. The second one is the
|
||||
monospace font that we use for code blocks and tables.
|
||||
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.HeaderRow>
|
||||
<Table.HeaderCell>Prop</Table.HeaderCell>
|
||||
<Table.HeaderCell>Description</Table.HeaderCell>
|
||||
</Table.HeaderRow>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-font-regular</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The sans-serif font for the theme.</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-font-mono</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>The monospace font for the theme.</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
|
||||
## Spacing
|
||||
|
||||
Our default spacing system is made to work in most scenarios. We have 7 scale
|
||||
values from `xxs` to `xxl`. We use the values on padding and margin in our
|
||||
layout components mostly. If you prefer to use a different spacing system, you
|
||||
can do that by changing the values below.
|
||||
|
||||
{' '}
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.HeaderRow>
|
||||
<Table.HeaderCell>Prop</Table.HeaderCell>
|
||||
<Table.HeaderCell>Description</Table.HeaderCell>
|
||||
</Table.HeaderRow>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-space-unit</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
The base unit for the spacing system. Default value is `1em`
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-space-xxs</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Default value is `0.25 x space unit`</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-space-xs</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Default value is `0.5 x space unit`</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-space-sm</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Default value is `0.75 x space unit`</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-space-md</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Default value is `1.25 x space unit`</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-space-lg</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Default value is `2 x space unit`</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-space-xl</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Default value is `3.25 x space unit`</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Chip head>--canon-space-xxl</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Default value is `5.25 x space unit`</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Story } from '@/components/Story';
|
||||
|
||||
# Typography
|
||||
|
||||
Canon offers a suite of typography components designed to seamlessly align
|
||||
with the rest of your Backstage instance. While you can customize their
|
||||
appearance to match your brand, the underlying API remains consistent and
|
||||
unchanged. Each component is built on a responsive structure, allowing you to
|
||||
define different typography values for various breakpoints.
|
||||
|
||||
## Headings
|
||||
|
||||
Headings are used to structure the content of your page. They are used to
|
||||
create a hierarchy of information and to make the content more readable. The
|
||||
best way to use add these headings to your page is to import the [Heading
|
||||
component](?path=/docs/components-heading--docs).
|
||||
|
||||
<Story id="components-heading--all-variants" height={400} />
|
||||
|
||||
## Text
|
||||
|
||||
Canon provides four distinct text variants, each offering different font sizes
|
||||
carefully designed to cover the majority of use cases. These variants are
|
||||
versatile and can be paired with regular and bold of font weights. You can use
|
||||
the [Text component](?path=/docs/components-text--docs) to add text to your
|
||||
page.
|
||||
|
||||
<Story id="components-text--all-variants" height={410} />
|
||||
@@ -1,29 +0,0 @@
|
||||
export const coreConcepts = [
|
||||
{
|
||||
title: 'Iconography',
|
||||
slug: 'iconography',
|
||||
},
|
||||
{
|
||||
title: 'Layout',
|
||||
slug: 'layout',
|
||||
},
|
||||
{
|
||||
title: 'Responsive',
|
||||
slug: 'responsive',
|
||||
},
|
||||
{
|
||||
title: 'Theming',
|
||||
slug: 'theming',
|
||||
},
|
||||
];
|
||||
|
||||
export const components = [
|
||||
{
|
||||
title: 'Box',
|
||||
slug: 'box',
|
||||
},
|
||||
{
|
||||
title: 'Button',
|
||||
slug: 'button',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,69 @@
|
||||
export const coreConcepts = [
|
||||
{
|
||||
title: 'Iconography',
|
||||
slug: 'iconography',
|
||||
},
|
||||
{
|
||||
title: 'Layout',
|
||||
slug: 'layout',
|
||||
},
|
||||
{
|
||||
title: 'Responsive',
|
||||
slug: 'responsive',
|
||||
},
|
||||
{
|
||||
title: 'Theming',
|
||||
slug: 'theming',
|
||||
},
|
||||
{
|
||||
title: 'Typography',
|
||||
slug: 'typography',
|
||||
},
|
||||
];
|
||||
|
||||
export const components = [
|
||||
{
|
||||
title: 'Box',
|
||||
slug: 'box',
|
||||
},
|
||||
{
|
||||
title: 'Button',
|
||||
slug: 'button',
|
||||
},
|
||||
{
|
||||
title: 'Checkbox',
|
||||
slug: 'checkbox',
|
||||
},
|
||||
{
|
||||
title: 'Container',
|
||||
slug: 'container',
|
||||
},
|
||||
{
|
||||
title: 'Grid',
|
||||
slug: 'grid',
|
||||
},
|
||||
{
|
||||
title: 'Heading',
|
||||
slug: 'heading',
|
||||
},
|
||||
{
|
||||
title: 'Icon',
|
||||
slug: 'icon',
|
||||
},
|
||||
{
|
||||
title: 'Inline',
|
||||
slug: 'inline',
|
||||
},
|
||||
{
|
||||
title: 'Stack',
|
||||
slug: 'stack',
|
||||
},
|
||||
{
|
||||
title: 'Table',
|
||||
slug: 'table',
|
||||
},
|
||||
{
|
||||
title: 'Text',
|
||||
slug: 'text',
|
||||
},
|
||||
];
|
||||
@@ -439,7 +439,7 @@ export { Text_2 as Text };
|
||||
// @public (undocumented)
|
||||
export interface TextProps {
|
||||
// (undocumented)
|
||||
children: React.ReactNode;
|
||||
children: ReactNode;
|
||||
// (undocumented)
|
||||
variant?:
|
||||
| 'subtitle'
|
||||
|
||||
Reference in New Issue
Block a user