paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 23 Packages Projects Releases Wiki Activity

Merge pull request #28390 from backstage/canon-docs-updates

Browse Source 
Canon - Update docs
This commit is contained in:
Charles de Dreuille
2025-01-07 16:43:48 +00:00
committed by GitHub
parent 366a9432af ded46fd949
commit aaad211d68
34 changed files with 484 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/docs/components/IconLibrary/IconLibrary.tsx
+3 -3
View File
@@ -16,15 +16,15 @@
import React from 'react';
import { Icon } from '@backstage/canon';
import type { IconNames } from '@backstage/canon';
import { defaultIcons } from '../../../src/components/Icon/icons';
import { icons } from '../../../src/components/Icon/icons';
import { Text } from '../Text/Text';
export const IconLibrary = () => {
const icons = Object.keys(defaultIcons);
const iconsList = Object.keys(icons);
return (
<div className="icon-library">
{icons.map(icon => (
{iconsList.map(icon => (
<div key={icon} className="icon-library-item">
<div className="icon-library-item-icon">
<Icon name={icon as IconNames} />
packages/canon/report.api.md
+86
View File
@@ -5,9 +5,11 @@
```ts
/// <reference types="react" />
import type { CSSProperties } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { default as React_2 } from 'react';
import * as React_3 from 'react';
import { ReactNode } from 'react';
import { RefAttributes } from 'react';
// @public (undocumented)
@@ -84,6 +86,8 @@ export interface ButtonProps {
// (undocumented)
size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
// (undocumented)
style?: React.CSSProperties;
// (undocumented)
variant?:
| 'primary'
| 'secondary'
@@ -91,6 +95,29 @@ export interface ButtonProps {
| Partial<Record<Breakpoint, 'primary' | 'secondary' | 'tertiary'>>;
}
// @public (undocumented)
export interface CanonContextProps {
// (undocumented)
breakpoint: Breakpoint;
// (undocumented)
getResponsiveValue: (
value: string | Partial<Record<Breakpoint, string>>,
) => string;
// (undocumented)
icons: IconMap;
}
// @public (undocumented)
export const CanonProvider: (props: CanonProviderProps) => React_2.JSX.Element;
// @public (undocumented)
export interface CanonProviderProps {
// (undocumented)
children?: ReactNode;
// (undocumented)
overrides?: Partial<Record<IconNames, React_2.ComponentType>>;
}
// @public (undocumented)
export const Checkbox: React_2.ForwardRefExoticComponent<
CheckboxProps & React_2.RefAttributes<HTMLButtonElement>
@@ -200,6 +227,33 @@ export interface GridProps extends SpaceProps {
style?: React.CSSProperties;
}
// @public (undocumented)
export const Heading: React_2.ForwardRefExoticComponent<
HeadingProps & React_2.RefAttributes<HTMLHeadingElement>
>;
// @public (undocumented)
export interface HeadingProps {
// (undocumented)
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
// (undocumented)
children: React.ReactNode;
// (undocumented)
variant?:
| 'display'
| 'title1'
| 'title2'
| 'title3'
| 'title4'
| 'title5'
| Partial<
Record<
Breakpoint,
'display' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5'
>
>;
}
// @public (undocumented)
export const Icon: (props: IconProps) => React_2.JSX.Element;
@@ -222,8 +276,11 @@ export type IconNames =
| 'chevronRight'
| 'chevronUp'
| 'cloud'
| 'externalLink'
| 'heart'
| 'moon'
| 'plus'
| 'sun'
| 'trash';
// @public (undocumented)
@@ -232,6 +289,9 @@ export type IconProps = {
size?: number;
};
// @public (undocumented)
export const icons: IconMap;
// @public (undocumented)
export const Inline: ForwardRefExoticComponent<
InlineProps & RefAttributes<HTMLElement>
@@ -374,6 +434,32 @@ export const TableRow: React_3.ForwardRefExoticComponent<
React_3.RefAttributes<HTMLTableRowElement>
>;
// @public (undocumented)
const Text_2: React_2.ForwardRefExoticComponent<
TextProps & React_2.RefAttributes<HTMLParagraphElement>
>;
export { Text_2 as Text };
// @public (undocumented)
export interface TextProps {
// (undocumented)
children: ReactNode;
// (undocumented)
style?: CSSProperties;
// (undocumented)
variant?:
| 'subtitle'
| 'body'
| 'caption'
| 'label'
| Partial<Record<Breakpoint, 'subtitle' | 'body' | 'caption' | 'label'>>;
// (undocumented)
weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
}
// @public (undocumented)
export const useCanon: () => CanonContextProps;
// @public (undocumented)
export interface UtilityProps extends SpaceProps {
// (undocumented)
packages/canon/src/components/Box/Box.stories.tsx
+30 -13
View File
@@ -40,22 +40,28 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;
export const Basic: Story = {
export const Default: Story = {
args: {
style: {
background: '#1f47ff',
color: 'white',
padding: '4px 8px',
width: '64px',
height: '64px',
background: '#eaf2fd',
borderRadius: '4px',
border: '1px solid #2563eb',
color: '#2563eb',
backgroundImage:
'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
},
children: 'Basic Box',
},
};
export const Display: Story = {
args: {
style: {
...Basic.args?.style,
...Default.args?.style,
width: 'auto',
height: 'auto',
padding: '8px',
},
},
render: args => (
@@ -84,7 +90,10 @@ export const Display: Story = {
export const FlexDirection: Story = {
args: {
style: {
...Basic.args?.style,
...Default.args?.style,
width: 'auto',
height: 'auto',
padding: '8px',
},
display: 'flex',
gap: 'xs',
@@ -110,8 +119,10 @@ export const FlexDirection: Story = {
export const JustifyContent: Story = {
args: {
style: {
...Basic.args?.style,
...Default.args?.style,
width: '200px',
height: 'auto',
padding: '8px',
},
display: 'flex',
gap: 'xs',
@@ -153,9 +164,10 @@ export const JustifyContent: Story = {
export const AlignItems: Story = {
args: {
style: {
...Basic.args?.style,
...Default.args?.style,
width: '200px',
height: '100px',
padding: '8px',
},
display: 'flex',
gap: 'xs',
@@ -289,8 +301,10 @@ export const Margin: Story = {
export const FlexWrap: Story = {
args: {
style: {
...Basic.args?.style,
...Default.args?.style,
width: '200px',
height: 'auto',
padding: '8px',
},
display: 'flex',
gap: 'xs',
@@ -328,11 +342,14 @@ export const FlexWrap: Story = {
export const BorderRadius: Story = {
args: {
style: {
background: '#1f47ff',
color: 'white',
padding: '4px 8px',
width: '64px',
height: '64px',
background: '#eaf2fd',
border: '1px solid #2563eb',
color: '#2563eb',
backgroundImage:
'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
padding: '4px 8px',
},
display: 'flex',
alignItems: 'center',
packages/canon/src/components/Button/Button.stories.tsx
+55 -12
View File
@@ -19,13 +19,12 @@ import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
import { Inline } from '../Inline';
import { Stack } from '../Stack';
import { Text } from '../Text';
import { ButtonProps } from './types';
const meta = {
title: 'Components/Button',
component: Button,
parameters: {
layout: 'centered',
},
argTypes: {
size: {
control: 'select',
@@ -40,12 +39,6 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
children: 'Primary button',
},
};
export const Variants: Story = {
args: {
children: 'Button',
@@ -59,9 +52,15 @@ export const Variants: Story = {
},
render: () => (
<Inline alignY="center">
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button iconStart="cloud" variant="primary">
Button
</Button>
<Button iconStart="cloud" variant="secondary">
Button
</Button>
<Button iconStart="cloud" variant="tertiary">
Button
</Button>
</Inline>
),
};
@@ -125,3 +124,47 @@ export const Responsive: Story = {
},
},
};
const variants: string[] = ['primary', 'secondary', 'tertiary'];
export const Playground: Story = {
args: {
children: 'Button',
},
render: () => (
<Stack>
{variants.map(variant => (
<Stack key={variant}>
<Text>{variant}</Text>
{['small', 'medium'].map(size => (
<Inline alignY="center" key={size}>
<Button
iconStart="cloud"
variant={variant as ButtonProps['variant']}
size={size as ButtonProps['size']}
>
Button
</Button>
<Button
iconEnd="chevronRight"
variant={variant as ButtonProps['variant']}
size={size as ButtonProps['size']}
>
Button
</Button>
<Button
iconStart="cloud"
iconEnd="chevronRight"
style={{ width: '200px' }}
variant={variant as ButtonProps['variant']}
size={size as ButtonProps['size']}
>
Button
</Button>
</Inline>
))}
</Stack>
))}
</Stack>
),
};
packages/canon/src/components/Button/Button.tsx
+4 -1
View File
@@ -29,6 +29,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
iconStart,
iconEnd,
children,
style,
...rest
} = props;
const { getResponsiveValue } = useCanon();
@@ -39,7 +41,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
return (
<button
{...props}
{...rest}
ref={ref}
disabled={disabled}
className={[
@@ -47,6 +49,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
`cn-button-${responsiveSize}`,
`cn-button-${responsiveVariant}`,
].join(' ')}
style={style}
>
<span
className={[
packages/canon/src/components/Button/Docs.mdx
+1 -1
View File
@@ -10,7 +10,7 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
<Title type="h1">Button</Title>
<Text>A button component that can be used to trigger actions.</Text>
<Canvas of={ButtonStories.Primary} />
<Canvas of={ButtonStories.Variants} />
<Title type="h2">Usage</Title>
<Source code={`import { Button } from "@backstage/canon";
packages/canon/src/components/Button/types.ts
+1
View File
@@ -31,4 +31,5 @@ export interface ButtonProps {
disabled?: boolean;
iconStart?: IconNames;
iconEnd?: IconNames;
style?: React.CSSProperties;
}
packages/canon/src/components/Checkbox/Checkbox.stories.tsx
+30 -1
View File
@@ -14,8 +14,12 @@
* limitations under the License.
*/
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Checkbox } from './Checkbox';
import { Inline } from '../Inline';
import { Stack } from '../Stack';
import { Text } from '../Text';
const meta = {
title: 'Components/Checkbox',
@@ -28,8 +32,33 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
export const Default: Story = {
args: {
label: 'Accept terms and conditions',
},
};
export const AllVariants: Story = {
render: () => (
<Inline alignY="center">
<Checkbox />
<Checkbox checked />
<Checkbox label="Checkbox" />
<Checkbox label="Checkbox" checked />
</Inline>
),
};
export const Playground: Story = {
render: () => (
<Stack>
<Text>All variants</Text>
<Inline alignY="center">
<Checkbox />
<Checkbox checked />
<Checkbox label="Checkbox" />
<Checkbox label="Checkbox" checked />
</Inline>
</Stack>
),
};
packages/canon/src/components/Checkbox/Docs.mdx
+1 -1
View File
@@ -10,7 +10,7 @@ import { PropsTable } from '../../../docs/components/PropsTable';
<Title type="h1">Checkbox</Title>
<Text>A checkbox component that can be used to trigger actions.</Text>
<Canvas of={CheckboxStories.Primary} />
<Canvas of={CheckboxStories.Default} />
<Title type="h2">Usage</Title>
<Source code={`import { Checkbox } from "@backstage/canon";
packages/canon/src/components/Container/Container.stories.tsx
+21 -7
View File
@@ -30,26 +30,40 @@ const meta = {
control: 'text',
},
},
parameters: {
layout: 'fullscreen',
},
} satisfies Meta<typeof Container>;
export default meta;
type Story = StoryObj<typeof meta>;
const FakeBox = () => (
const DecorativeBox = () => (
<Box
borderRadius="xs"
style={{ background: '#1f47ff', color: 'white', height: '400px' }}
style={{
height: '64px',
background: '#eaf2fd',
borderRadius: '4px',
border: '1px solid #2563eb',
backgroundImage:
'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
}}
/>
);
export const Default: Story = {
args: {},
parameters: {
layout: 'fullscreen',
},
render: args => (
<Container {...args}>
<FakeBox />
<DecorativeBox />
</Container>
),
};
export const Preview: Story = {
render: () => (
<div style={{ maxWidth: '600px', margin: '0 auto' }}>
<DecorativeBox />
</div>
),
};
packages/canon/src/components/Grid/Grid.stories.tsx
+16 -2
View File
@@ -43,7 +43,14 @@ type Story = StoryObj<typeof meta>;
const FakeBox = () => (
<Box
borderRadius="xs"
style={{ background: '#1f47ff', color: 'white', height: '64px' }}
style={{
background: '#eaf2fd',
borderRadius: '4px',
boxShadow: '0 0 0 1px #2563eb',
height: '64px',
backgroundImage:
'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
}}
/>
);
@@ -103,7 +110,14 @@ export const RowAndColumns: Story = {
<Grid.Item colSpan={1} rowSpan={2}>
<Box
borderRadius="xs"
style={{ background: '#1f47ff', color: 'white', height: '100%' }}
style={{
height: '100%',
background: '#eaf2fd',
borderRadius: '4px',
boxShadow: '0 0 0 1px #2563eb',
backgroundImage:
'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
}}
/>
</Grid.Item>
<Grid.Item colSpan={2}>
packages/canon/src/components/Heading/Heading.stories.tsx
+20 -12
View File
@@ -18,20 +18,19 @@ import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Heading } from './Heading';
import { Stack } from '../Stack';
import { Text } from '../Text';
const meta = {
title: 'Components/Heading',
component: Heading,
args: {
children: 'Heading',
},
} satisfies Meta<typeof Heading>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children: 'Heading',
},
};
export const Default: Story = {};
export const Title1: Story = {
args: {
@@ -41,11 +40,8 @@ export const Title1: Story = {
};
export const AllVariants: Story = {
args: {
children: 'Heading',
},
render: () => (
<Stack gap="md">
<Stack>
<Heading variant="display">Display</Heading>
<Heading variant="title1">Title 1</Heading>
<Heading variant="title2">Title 2</Heading>
@@ -57,7 +53,6 @@ export const AllVariants: Story = {
export const Responsive: Story = {
args: {
...Default.args,
variant: {
xs: 'title4',
md: 'display',
@@ -67,8 +62,21 @@ export const Responsive: Story = {
export const CustomTag: Story = {
args: {
...Default.args,
variant: 'title5',
as: 'h2',
},
};
export const Playground: Story = {
render: () => (
<Stack>
<Text>All variants</Text>
<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>
<Heading variant="title5">Title 5</Heading>
</Stack>
),
};
packages/canon/src/components/Heading/Heading.tsx
+1
View File
@@ -18,6 +18,7 @@ import React, { forwardRef } from 'react';
import { HeadingProps } from './types';
import { useCanon } from '../../contexts/canon';
/** @public */
export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
(props, ref) => {
const { children, variant = 'title1', as = 'h1', ...restProps } = props;
packages/canon/src/components/Icon/Docs.mdx
+3 -3
View File
@@ -2,7 +2,7 @@ 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';
import { icons } from './icons';
<Meta of={IconStories} />
@@ -12,7 +12,7 @@ import { defaultIcons } from './icons';
<Text>Icons are used to represent an action or a state.</Text>
<Canvas of={IconStories.Primary} />
<Canvas of={IconStories.Default} />
<Title type="h2">Usage</Title>
<Source code={`import { Icon } from "@backstage/canon";
@@ -27,7 +27,7 @@ import { defaultIcons } from './icons';
<PropsTable
data={{
name: {
type: Object.keys(defaultIcons),
type: Object.keys(icons),
responsive: false,
},
size: {
packages/canon/src/components/Icon/Icon.stories.tsx
+3 -3
View File
@@ -18,7 +18,7 @@ import React from 'react';
import { Meta, StoryObj } from '@storybook/react';
import { Icon } from './Icon';
import { CanonProvider } from '../../contexts/canon';
import { defaultIcons } from './icons';
import { icons } from './icons';
const meta = {
title: 'Components/Icon',
@@ -29,7 +29,7 @@ const meta = {
argTypes: {
name: {
control: 'select',
options: Object.keys(defaultIcons),
options: Object.keys(icons),
},
},
args: {
@@ -40,7 +40,7 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
export const Default: Story = {
args: {
name: 'heart',
},
packages/canon/src/components/Icon/icons.ts
+8 -2
View File
@@ -35,10 +35,13 @@ import {
RiArrowRightCircleLine,
RiArrowUpCircleLine,
RiCheckLine,
RiMoonLine,
RiSunLine,
RiExternalLinkLine,
} from '@remixicon/react';
// List of default icons
export const defaultIcons: IconMap = {
/** @public */
export const icons: IconMap = {
arrowDown: RiArrowDownFill,
arrowLeft: RiArrowLeftFill,
arrowRight: RiArrowRightFill,
@@ -53,7 +56,10 @@ export const defaultIcons: IconMap = {
chevronLeft: RiArrowLeftSLine,
chevronRight: RiArrowRightSLine,
cloud: RiCloudFill,
externalLink: RiExternalLinkLine,
heart: RiHeartFill,
moon: RiMoonLine,
plus: RiAddLine,
sun: RiSunLine,
trash: RiDeleteBin6Line,
};
packages/canon/src/components/Icon/index.tsx
+1
View File
@@ -15,4 +15,5 @@
*/
export * from './Icon';
export * from './icons';
export type * from './types';
packages/canon/src/components/Icon/types.ts
+3
View File
@@ -30,8 +30,11 @@ export type IconNames =
| 'chevronRight'
| 'chevronUp'
| 'cloud'
| 'externalLink'
| 'heart'
| 'moon'
| 'plus'
| 'sun'
| 'trash';
/** @public */
packages/canon/src/components/Inline/Inline.stories.tsx
+20 -39
View File
@@ -41,6 +41,9 @@ const meta = {
control: 'text',
},
},
args: {
children: 'hello world',
},
} satisfies Meta<typeof Inline>;
export default meta;
@@ -52,33 +55,12 @@ const fakeBlockList = [
{ width: 80, height: 50 },
{ width: 120, height: 70 },
{ width: 95, height: 65 },
{ width: 110, height: 55 },
{ width: 80, height: 32 },
{ width: 130, height: 60 },
{ width: 100, height: 80 },
{ width: 140, height: 45 },
{ width: 85, height: 70 },
{ width: 125, height: 50 },
{ width: 105, height: 75 },
{ width: 115, height: 65 },
{ width: 135, height: 55 },
{ width: 90, height: 60 },
{ width: 145, height: 80 },
{ width: 75, height: 45 },
{ width: 155, height: 70 },
{ width: 60, height: 50 },
{ width: 160, height: 75 },
{ width: 70, height: 65 },
{ width: 150, height: 55 },
{ width: 95, height: 60 },
{ width: 120, height: 80 },
{ width: 85, height: 45 },
{ width: 130, height: 70 },
{ width: 100, height: 50 },
{ width: 140, height: 75 },
{ width: 110, height: 65 },
{ width: 125, height: 55 },
{ width: 105, height: 60 },
{ width: 145, height: 80 },
];
const FakeBox = ({
@@ -90,67 +72,66 @@ const FakeBox = ({
}) => (
<Box
borderRadius="xs"
style={{ background: '#1f47ff', color: 'white', width, height }}
style={{
background: '#eaf2fd',
borderRadius: '4px',
boxShadow: '0 0 0 1px #2563eb',
width,
height,
backgroundImage:
'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
}}
/>
);
export const Default: Story = {
args: {
children: (
<>
{fakeBlockList.map((block, index) => (
<FakeBox key={index} width={block.width} height={block.height} />
))}
</>
),
},
render: () => (
<Inline>
{fakeBlockList.map((block, index) => (
<FakeBox key={index} width={block.width} height={block.height} />
))}
</Inline>
),
};
export const AlignLeft: Story = {
args: {
...Default.args,
align: 'left',
},
};
export const AlignCenter: Story = {
args: {
...Default.args,
align: 'center',
},
};
export const AlignRight: Story = {
args: {
...Default.args,
align: 'right',
},
};
export const VerticalAlignTop: Story = {
args: {
...Default.args,
alignY: 'top',
},
};
export const VerticalAlignCenter: Story = {
args: {
...Default.args,
alignY: 'center',
},
};
export const VerticalAlignBottom: Story = {
args: {
...Default.args,
alignY: 'bottom',
},
};
export const LargeGap: Story = {
args: {
...Default.args,
gap: 'xl',
},
};
packages/canon/src/components/Stack/Stack.stories.tsx
+67 -52
View File
@@ -17,7 +17,6 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Stack } from './Stack';
import { Box } from '../Box/Box';
const meta = {
title: 'Components/Stack',
@@ -40,81 +39,97 @@ const meta = {
args: {
align: 'left',
gap: 'xs',
children: 'hello world',
},
} satisfies Meta<typeof Stack>;
export default meta;
type Story = StoryObj<typeof meta>;
const FakeBox = () => (
<Box
paddingX="xl"
paddingY="md"
borderRadius="xs"
style={{ background: '#1f47ff', color: 'white' }}
>
Fake Box
</Box>
);
const DecorativeBox = () => {
return (
<div
style={{
background: '#eaf2fd',
borderRadius: '4px',
boxShadow: '0 0 0 1px #2563eb',
height: '32px',
minWidth: '100px',
backgroundImage:
'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
}}
/>
);
};
export const Default: Story = {
args: {
children: (
<>
<FakeBox />
<FakeBox />
<FakeBox />
</>
),
},
render: () => (
<div style={{ width: '320px' }}>
<Stack>
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Stack>
</div>
),
};
export const AlignLeft: Story = {
args: {
...Default.args,
align: 'left',
},
render: () => (
<Stack align="left">
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Stack>
),
};
export const AlignCenter: Story = {
args: {
...Default.args,
align: 'center',
},
render: () => (
<Stack align="center">
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Stack>
),
};
export const AlignRight: Story = {
args: {
...Default.args,
align: 'right',
},
render: () => (
<Stack align="right">
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Stack>
),
};
export const ResponsiveAlign: Story = {
args: {
...Default.args,
align: {
xs: 'left',
md: 'center',
lg: 'right',
},
},
render: () => (
<Stack align={{ xs: 'left', md: 'center', lg: 'right' }}>
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Stack>
),
};
export const ResponsiveGap: Story = {
args: {
...Default.args,
gap: {
xs: 'xs',
md: 'md',
lg: '2xl',
},
},
render: () => (
<Stack gap={{ xs: 'xs', md: 'md', lg: '2xl' }}>
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Stack>
),
};
export const LargeGap: Story = {
args: {
...Default.args,
gap: 'xl',
},
render: () => (
<Stack gap="xl">
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Stack>
),
};
packages/canon/src/components/Table/stories/Example1.stories.tsx → packages/canon/src/components/Table/Table.stories.tsx
+25 -17
View File
@@ -14,23 +14,6 @@
* limitations under the License.
*/
import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {
Table,
TableHead,
TableRow,
TableHeader,
TableCell,
TableBody,
TableFooter,
} from '../Table';
const meta = {
title: 'Components/Table/Examples/Simple',
component: Table,
} satisfies Meta<typeof Table>;
const invoices = [
{
invoice: 'INV001',
@@ -76,6 +59,31 @@ const invoices = [
},
];
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {
Table,
TableBody,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from '../Table';
const meta = {
title: 'Components/Table',
component: Table,
subcomponents: {
TableBody: TableBody as React.ComponentType<unknown>,
TableCell: TableCell as React.ComponentType<unknown>,
TableFooter: TableFooter as React.ComponentType<unknown>,
TableHead: TableHead as React.ComponentType<unknown>,
TableHeader: TableHeader as React.ComponentType<unknown>,
TableRow: TableRow as React.ComponentType<unknown>,
},
} satisfies Meta<typeof Table>;
export default meta;
type Story = StoryObj<typeof meta>;
packages/canon/src/components/Table/stories/Table.stories.tsx
-32
View File
@@ -1,32 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import { Table } from '../Table';
const meta = {
title: 'Components/Table/Components/Table',
component: Table,
} satisfies Meta<typeof Table>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children: "Hello World! I'm a basic table",
},
};
packages/canon/src/components/Table/stories/TableBody.stories.tsx
-40
View File
@@ -1,40 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Table, TableBody } from '../Table';
const meta = {
title: 'Components/Table/Components/TableBody',
component: TableBody,
decorators: [
Story => (
<Table>
<Story />
</Table>
),
],
} satisfies Meta<typeof TableBody>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children: "Hello World! I'm a basic table body",
},
};
packages/canon/src/components/Table/stories/TableCaption.stories.tsx
-30
View File
@@ -1,30 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import { TableCaption } from '../Table';
const meta = {
title: 'Components/Table/Components/TableCaption',
component: TableCaption,
} satisfies Meta<typeof TableCaption>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {},
};
packages/canon/src/components/Table/stories/TableCell.stories.tsx
-30
View File
@@ -1,30 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import { TableCell } from '../Table';
const meta = {
title: 'Components/Table/Components/TableCell',
component: TableCell,
} satisfies Meta<typeof TableCell>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {},
};
packages/canon/src/components/Table/stories/TableFooter.stories.tsx
-30
View File
@@ -1,30 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import { TableFooter } from '../Table';
const meta = {
title: 'Components/Table/Components/TableFooter',
component: TableFooter,
} satisfies Meta<typeof TableFooter>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {},
};
packages/canon/src/components/Table/stories/TableHead.stories.tsx
-30
View File
@@ -1,30 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import { TableHead } from '../Table';
const meta = {
title: 'Components/Table/Components/TableHead',
component: TableHead,
} satisfies Meta<typeof TableHead>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {},
};
packages/canon/src/components/Table/stories/TableHeader.stories.tsx
-40
View File
@@ -1,40 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Table, TableHeader } from '../Table';
const meta = {
title: 'Components/Table/Components/TableHeader',
component: TableHeader,
decorators: [
Story => (
<Table>
<Story />
</Table>
),
],
} satisfies Meta<typeof TableHeader>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children: "Hello World! I'm a basic table header",
},
};
packages/canon/src/components/Table/stories/TableRow.stories.tsx
-42
View File
@@ -1,42 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Table, TableRow, TableHeader } from '../Table';
const meta = {
title: 'Components/Table/Components/TableRow',
component: TableRow,
decorators: [
Story => (
<Table>
<TableHeader>
<Story />
</TableHeader>
</Table>
),
],
} satisfies Meta<typeof TableRow>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children: "Hello World! I'm a basic table row",
},
};
packages/canon/src/components/Text/Text.stories.tsx
+66 -14
View File
@@ -22,6 +22,9 @@ import { Stack } from '../Stack';
const meta = {
title: 'Components/Text',
component: Text,
args: {
children: 'Text',
},
} satisfies Meta<typeof Text>;
export default meta;
@@ -30,42 +33,91 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children:
'Lorem ipsum dolor sit amet consectetur. Nec arcu vel lacus magna adipiscing nisi mauris tortor viverra. Enim rhoncus quisque consectetur ligula diam ac lacus massa. Id interdum id pellentesque justo ut massa nibh amet. Odio massa in scelerisque tortor massa integer purus amet enim. Eros sit neque nullam facilisis. Purus massa dignissim aliquet purus eu in. Urna consequat ullamcorper arcu amet dictumst. Commodo praesent turpis fringilla tristique congue volutpat in. Nulla in nulla ultrices lacus. In ultrices id tellus ut.',
"A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?",
style: { maxWidth: '600px' },
},
};
export const AllVariants: Story = {
args: {
children: 'Text',
},
render: () => (
<Stack gap="md">
<Text variant="subtitle">Subtitle {Default.args?.children}</Text>
<Text variant="body">Body {Default.args?.children}</Text>
<Text variant="caption">Caption {Default.args?.children}</Text>
<Text variant="label">Label {Default.args?.children}</Text>
<Text variant="subtitle" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
<Text variant="body" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
<Text variant="caption" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
<Text variant="label" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
</Stack>
),
};
export const AllWeights: Story = {
args: {
children: 'Text',
},
render: () => (
<Stack gap="md">
<Text weight="regular">Regular {Default.args?.children}</Text>
<Text weight="bold">Bold {Default.args?.children}</Text>
<Text weight="regular" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
<Text weight="bold" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
</Stack>
),
};
export const Responsive: Story = {
args: {
...Default.args,
variant: {
xs: 'label',
md: 'body',
},
},
};
export const Playground: Story = {
render: () => (
<Stack>
<Text>Subtitle</Text>
<Text variant="subtitle" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
<Text>Body</Text>
<Text variant="body" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
<Text>Caption</Text>
<Text variant="caption" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
<Text>Label</Text>
<Text variant="label" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
</Stack>
),
};
packages/canon/src/components/Text/Text.tsx
+4 -1
View File
@@ -18,12 +18,14 @@ import React, { forwardRef } from 'react';
import { TextProps } from './types';
import { useCanon } from '../../contexts/canon';
/** @public */
export const Text = forwardRef<HTMLParagraphElement, TextProps>(
(props, ref) => {
const {
children,
variant = 'body',
weight = 'regular',
style,
...restProps
} = props;
@@ -36,10 +38,11 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
return (
<p
ref={ref}
{...restProps}
className={`text ${
responsiveVariant ? `text-${responsiveVariant}` : ''
} ${responsiveWeight ? `text-${responsiveWeight}` : ''}`}
style={style}
{...restProps}
>
{children}
</p>
packages/canon/src/components/Text/types.ts
+3 -1
View File
@@ -14,11 +14,12 @@
* limitations under the License.
*/
import type { CSSProperties, ReactNode } from 'react';
import type { Breakpoint } from '../../types';
/** @public */
export interface TextProps {
children: React.ReactNode;
children: ReactNode;
variant?:
| 'subtitle'
| 'body'
@@ -26,4 +27,5 @@ export interface TextProps {
| 'label'
| Partial<Record<Breakpoint, 'subtitle' | 'body' | 'caption' | 'label'>>;
weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
style?: CSSProperties;
}
packages/canon/src/contexts/canon.tsx
+7 -5
View File
@@ -16,11 +16,12 @@
import React, { createContext, useContext, ReactNode } from 'react';
import { IconMap, IconNames } from '../components/Icon/types';
import { defaultIcons } from '../components/Icon/icons';
import { icons } from '../components/Icon/icons';
import { useMediaQuery } from '../hooks/useMediaQuery';
import type { Breakpoint } from '../types';
interface CanonContextProps {
/** @public */
export interface CanonContextProps {
icons: IconMap;
breakpoint: Breakpoint;
getResponsiveValue: (
@@ -29,12 +30,13 @@ interface CanonContextProps {
}
const CanonContext = createContext<CanonContextProps>({
icons: defaultIcons,
icons,
breakpoint: 'md',
getResponsiveValue: () => '',
});
interface CanonProviderProps {
/** @public */
export interface CanonProviderProps {
children?: ReactNode;
overrides?: Partial<Record<IconNames, React.ComponentType>>;
}
@@ -44,7 +46,7 @@ export const CanonProvider = (props: CanonProviderProps) => {
const { children, overrides } = props;
// Merge provided overrides with default icons
const combinedIcons = { ...defaultIcons, ...overrides };
const combinedIcons = { ...icons, ...overrides };
const isBreakpointSm = useMediaQuery(`(min-width: 640px)`);
const isBreakpointMd = useMediaQuery(`(min-width: 768px)`);
packages/canon/src/index.ts
+5
View File
@@ -20,12 +20,17 @@
* @packageDocumentation
*/
// Providers
export * from './contexts/canon';
// Layout components
export * from './components/Box';
export * from './components/Grid';
export * from './components/Stack';
export * from './components/Inline';
export * from './components/Container';
export * from './components/Text';
export * from './components/Heading';
// UI components
export * from './components/Button';