diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index baa4a99d3f..9cc4035a5e 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -6,6 +6,7 @@ /// import { CSSProperties } from 'react'; +import { DetailedReactHTMLElement } from 'react'; import { DOMElement } from 'react'; import { default as React_2 } from 'react'; import { ReactNode } from 'react'; @@ -150,6 +151,9 @@ export interface ColorProps { color?: Color; } +// @public (undocumented) +export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; + // @public (undocumented) export type DisplayProps = | 'flex' @@ -173,6 +177,69 @@ export type FlexWrapProps = // @public (undocumented) export type Gap = Space | Partial>; +// @public (undocumented) +export const Grid: { + ({ + children, + columns, + gap, + className, + style, + ...restProps + }: GridProps): DetailedReactHTMLElement< + { + className: string; + style: CSSProperties | undefined; + }, + HTMLElement + >; + Item: ({ + children, + rowSpan, + colSpan, + start, + end, + className, + style, + }: GridItemProps) => DetailedReactHTMLElement< + { + className: string; + style: CSSProperties | undefined; + }, + HTMLElement + >; +}; + +// @public (undocumented) +export interface GridItemProps { + // (undocumented) + children: React.ReactNode; + // (undocumented) + className?: string; + // (undocumented) + colSpan?: Columns | 'full'; + // (undocumented) + end?: Columns | 'auto'; + // (undocumented) + rowSpan?: Columns | 'full'; + // (undocumented) + start?: Columns | 'auto'; + // (undocumented) + style?: React.CSSProperties; +} + +// @public (undocumented) +export interface GridProps extends SpaceProps, ColorProps { + // (undocumented) + children?: React.ReactNode; + // (undocumented) + className?: string; + // (undocumented) + columns?: Columns | Partial>; + // (undocumented) + style?: React.CSSProperties; +} + // @public (undocumented) export const Icon: ({ name }: { name: IconNames }) => React_2.JSX.Element; @@ -198,6 +265,49 @@ export type IconNames = | 'plus' | 'trash'; +// @public (undocumented) +export const Inline: ({ + as, + children, + align, + alignY, + gap, + className, + style, + ...restProps +}: InlineProps) => DetailedReactHTMLElement< + { + className: string; + style: CSSProperties | undefined; + children: ReactNode; + }, + HTMLElement +>; + +// @public (undocumented) +export interface InlineProps extends SpaceProps, ColorProps { + // (undocumented) + align?: + | 'left' + | 'center' + | 'right' + | Partial>; + // (undocumented) + alignY?: + | 'top' + | 'center' + | 'bottom' + | Partial>; + // (undocumented) + as?: AsProps; + // (undocumented) + children: React.ReactNode; + // (undocumented) + className?: string; + // (undocumented) + style?: React.CSSProperties; +} + // @public (undocumented) export type JustifyContentProps = | 'stretch' @@ -309,6 +419,42 @@ export interface SpaceProps { paddingY?: PaddingY; } +// @public (undocumented) +export const Stack: ({ + as, + children, + align, + gap, + className, + style, + ...restProps +}: StackProps) => DetailedReactHTMLElement< + { + className: string; + style: CSSProperties | undefined; + children: ReactNode; + }, + HTMLElement +>; + +// @public (undocumented) +export interface StackProps extends SpaceProps, ColorProps { + // (undocumented) + align?: + | 'left' + | 'center' + | 'right' + | Partial>; + // (undocumented) + as?: AsProps; + // (undocumented) + children: React.ReactNode; + // (undocumented) + className?: string; + // (undocumented) + style?: React.CSSProperties; +} + // @public (undocumented) export type Theme = keyof typeof themes; diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx index 3f78ba3a76..c5eec1870b 100644 --- a/packages/canon/src/components/Box/Docs.mdx +++ b/packages/canon/src/components/Box/Docs.mdx @@ -1,4 +1,4 @@ -import { Canvas, Meta, Unstyled } from '@storybook/blocks'; +import { Meta, Unstyled, Source } from '@storybook/blocks'; import * as BoxStories from './Box.stories'; import { Title, Text } from '../../../docs/components'; import { Padding } from './docs/padding'; @@ -13,8 +13,18 @@ import { spacingProperties } from '../../layout/sprinkles.css'; Box Box is the lowest-level component in Canon. We use it internally to build all - of our components. It is a wrapper around the HTML `
` element and - provides a consistent API for styling and layout. You'll find below a list of all the available properties. + of our components. It provides a consistent API for styling and layout. + + +Installation + + +API reference + +Box + + This is the Box component, our lowest-level component. Here are all the + available properties. -Padding & Margin - + 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. @@ -46,4 +55,26 @@ import { spacingProperties } from '../../layout/sprinkles.css'; +Examples +Here are some examples of how you can use the Box component. + +Simple example +A simple example of how to use the Box component. +Hello World`} + language="tsx" + dark +/> + +Responsive + + Most of the values can be defined per breakpoint, making it easy to create + responsive designs. + +Hello World`} + language="tsx" + dark +/> + diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx index 9ac23e9371..f320d4f7f5 100644 --- a/packages/canon/src/components/Grid/Grid.tsx +++ b/packages/canon/src/components/Grid/Grid.tsx @@ -18,6 +18,7 @@ import { createElement } from 'react'; import { GridItemProps, GridProps } from './types'; import { gridItemSprinkles, gridSprinkles } from './sprinkles.css'; +/** @public */ export const Grid = ({ children, columns, diff --git a/packages/canon/src/components/Grid/index.ts b/packages/canon/src/components/Grid/index.ts index b2534c6b77..b07249241c 100644 --- a/packages/canon/src/components/Grid/index.ts +++ b/packages/canon/src/components/Grid/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ export { Grid } from './Grid'; -export type { GridProps, GridItemProps } from './types'; +export type { GridProps, GridItemProps, Columns } from './types'; diff --git a/packages/canon/src/components/Grid/types.ts b/packages/canon/src/components/Grid/types.ts index 8400e61830..87edbd75bf 100644 --- a/packages/canon/src/components/Grid/types.ts +++ b/packages/canon/src/components/Grid/types.ts @@ -16,8 +16,10 @@ import { Breakpoint, ColorProps } from '../../layout/types'; import { SpaceProps } from '../../layout/types'; -type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; +/** @public */ +export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; +/** @public */ export interface GridProps extends SpaceProps, ColorProps { children?: React.ReactNode; columns?: Columns | Partial>; @@ -25,6 +27,7 @@ export interface GridProps extends SpaceProps, ColorProps { style?: React.CSSProperties; } +/** @public */ export interface GridItemProps { children: React.ReactNode; rowSpan?: Columns | 'full'; diff --git a/packages/canon/src/components/Inline/Inline.tsx b/packages/canon/src/components/Inline/Inline.tsx index 2d1c649e29..1adcd01b92 100644 --- a/packages/canon/src/components/Inline/Inline.tsx +++ b/packages/canon/src/components/Inline/Inline.tsx @@ -32,6 +32,7 @@ const alignToFlexAlignY = (align: InlineProps['align']) => { return undefined; }; +/** @public */ export const Inline = ({ as = 'div', children, diff --git a/packages/canon/src/components/Inline/index.ts b/packages/canon/src/components/Inline/index.ts index 77a0e51629..2cc100c02a 100644 --- a/packages/canon/src/components/Inline/index.ts +++ b/packages/canon/src/components/Inline/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { Inline } from './Inline'; +export type { InlineProps } from './types'; diff --git a/packages/canon/src/components/Inline/types.ts b/packages/canon/src/components/Inline/types.ts index 413f2fbbb0..3d981d0d31 100644 --- a/packages/canon/src/components/Inline/types.ts +++ b/packages/canon/src/components/Inline/types.ts @@ -17,6 +17,7 @@ import { AsProps, Breakpoint, ColorProps } from '../../layout/types'; import { SpaceProps } from '../../layout/types'; +/** @public */ export interface InlineProps extends SpaceProps, ColorProps { children: React.ReactNode; as?: AsProps; diff --git a/packages/canon/src/components/Stack/Stack.tsx b/packages/canon/src/components/Stack/Stack.tsx index f2316805b5..f2a9a3f93d 100644 --- a/packages/canon/src/components/Stack/Stack.tsx +++ b/packages/canon/src/components/Stack/Stack.tsx @@ -25,6 +25,7 @@ const alignToFlexAlign = (align: StackProps['align']) => { return undefined; }; +/** @public */ export const Stack = ({ as = 'div', children, diff --git a/packages/canon/src/components/Stack/index.ts b/packages/canon/src/components/Stack/index.ts index 2aeaba3adf..7abbc3f439 100644 --- a/packages/canon/src/components/Stack/index.ts +++ b/packages/canon/src/components/Stack/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { Stack } from './Stack'; +export type { StackProps } from './types'; diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts index 81abea9999..529e92d1bd 100644 --- a/packages/canon/src/components/Stack/types.ts +++ b/packages/canon/src/components/Stack/types.ts @@ -16,6 +16,7 @@ import { AsProps, Breakpoint, ColorProps } from '../../layout/types'; import { SpaceProps } from '../../layout/types'; +/** @public */ export interface StackProps extends SpaceProps, ColorProps { children: React.ReactNode; as?: AsProps; diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts index d020041e4e..5901f87bc0 100644 --- a/packages/canon/src/index.ts +++ b/packages/canon/src/index.ts @@ -20,10 +20,15 @@ * @packageDocumentation */ -export * from './components/Button'; -export * from './components/Box'; -export * from './components/Icon'; +// Layout types export * from './layout/types'; + +// Layout components +export * from './components/Box'; export * from './components/Grid'; export * from './components/Stack'; export * from './components/Inline'; + +// UI components +export * from './components/Button'; +export * from './components/Icon';