diff --git a/packages/canon/package.json b/packages/canon/package.json index 96907f8f64..f1e2e5d759 100644 --- a/packages/canon/package.json +++ b/packages/canon/package.json @@ -33,7 +33,7 @@ "lint": "backstage-cli package lint", "prepack": "backstage-cli package prepack", "postpack": "backstage-cli package postpack", - "storybook": "storybook dev -p 6006", + "start": "storybook dev -p 6006", "test": "backstage-cli package test" }, "dependencies": { diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 17b1188bae..aac49ee1ae 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -13,12 +13,7 @@ import { ReactNode } from 'react'; import { ResponsiveArray } from '@vanilla-extract/sprinkles'; // @public (undocumented) -export const Box: ({ - as, - className, - style, - ...props -}: BoxProps) => ReactElement< +export const Box: (props: BoxProps) => ReactElement< { className: string; style: CSSProperties | undefined; @@ -943,240 +938,6 @@ export const boxSprinkles: (( | undefined ) | ResponsiveArray<2 | 1 | 3 | 4 | 5 | 6, 'nowrap' | 'wrap' | null>; - padding?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - paddingX?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - paddingY?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; p?: | ( | 'none' @@ -1723,240 +1484,6 @@ export const boxSprinkles: (( 2 | 1 | 3 | 4 | 5 | 6, 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null >; - margin?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginX?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginY?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; m?: | ( | 'none' @@ -2547,12 +2074,10 @@ export const boxSprinkles: (( | 'flexWrap' | 'gap' | 'justifyContent' - | 'margin' | 'marginBottom' | 'marginLeft' | 'marginRight' | 'marginTop' - | 'padding' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' @@ -2571,10 +2096,6 @@ export const boxSprinkles: (( | 'pl' | 'px' | 'py' - | 'marginX' - | 'marginY' - | 'paddingX' - | 'paddingY' >; }; diff --git a/packages/canon/src/components/Box/docs/spacing-table.tsx b/packages/canon/src/components/Box/docs/spacing-table.tsx new file mode 100644 index 0000000000..7d98576b0e --- /dev/null +++ b/packages/canon/src/components/Box/docs/spacing-table.tsx @@ -0,0 +1,71 @@ +/* + * 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 React from 'react'; +import * as Table from '../../../../docs/components'; +import { Chip } from '../../../../docs/components'; +import { listResponsiveValues } from '../../../utils/list-values'; +import { responsiveProperties } from '../sprinkles.css'; + +console.log(responsiveProperties.styles); + +export const SpacingTable = () => { + return ( + + + + Prop + Type + + + + {Object.keys(responsiveProperties.styles) + .filter(n => + [ + 'padding', + 'paddingX', + 'paddingY', + 'paddingLeft', + 'paddingRight', + 'paddingTop', + 'paddingBottom', + 'margin', + 'marginX', + 'marginY', + 'marginLeft', + 'marginRight', + 'marginTop', + 'marginBottom', + ].includes(n), + ) + .map(n => ( + + + {n} + + + {listResponsiveValues( + 'paddingTop' as keyof typeof responsiveProperties.styles, + ).map(value => ( + {value} + ))} + + + ))} + + + ); +}; diff --git a/packages/canon/src/components/Inline/index.ts b/packages/canon/src/components/Inline/index.ts new file mode 100644 index 0000000000..77a0e51629 --- /dev/null +++ b/packages/canon/src/components/Inline/index.ts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export { Inline } from './Inline'; diff --git a/packages/canon/src/components/Stack/index.ts b/packages/canon/src/components/Stack/index.ts new file mode 100644 index 0000000000..2aeaba3adf --- /dev/null +++ b/packages/canon/src/components/Stack/index.ts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export { Stack } from './Stack'; diff --git a/packages/canon/src/components/Stack/sprinkles.css.ts b/packages/canon/src/components/Stack/sprinkles.css.ts new file mode 100644 index 0000000000..461f38fcde --- /dev/null +++ b/packages/canon/src/components/Stack/sprinkles.css.ts @@ -0,0 +1,86 @@ +/* + * 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 { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles'; +import { breakpoints, space } from '../Box/properties'; +import { colorProperties } from '../Box/sprinkles.css'; + +const responsiveProperties = defineProperties({ + conditions: breakpoints, + defaultCondition: 'xs', + properties: { + flexDirection: ['row', 'column'], + justifyContent: [ + 'stretch', + 'flex-start', + 'center', + 'flex-end', + 'space-around', + 'space-between', + ], + alignItems: ['stretch', 'flex-start', 'center', 'flex-end'], + borderRadius: { + none: 0, + small: '4px', + medium: '8px', + full: '9999px', + }, + boxShadow: { + small: 'var(--canon-box-shadow-small)', + medium: 'var(--canon-box-shadow-medium)', + large: 'var(--canon-box-shadow-large)', + }, + border: { + none: 'none', + thin: '1px solid var(--canon-outline)', + error: '1px solid var(--canon-error)', + }, + display: ['none', 'flex', 'block', 'inline'], + paddingTop: space, + paddingBottom: space, + paddingLeft: space, + paddingRight: space, + marginTop: space, + marginBottom: space, + marginLeft: space, + marginRight: space, + gap: space, + flexWrap: ['wrap', 'nowrap'], + }, + shorthands: { + p: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'], + pt: ['paddingTop'], + pr: ['paddingRight'], + pb: ['paddingBottom'], + pl: ['paddingLeft'], + px: ['paddingLeft', 'paddingRight'], + py: ['paddingTop', 'paddingBottom'], + m: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'], + mt: ['marginTop'], + mr: ['marginRight'], + mb: ['marginBottom'], + ml: ['marginLeft'], + mx: ['marginLeft', 'marginRight'], + my: ['marginTop', 'marginBottom'], + direction: ['flexDirection'], + items: ['alignItems'], + justify: ['justifyContent'], + }, +}); + +export const sprinkles = createSprinkles(responsiveProperties, colorProperties); + +// It's a good idea to export the Sprinkles type too +export type Sprinkles = Parameters[0]; diff --git a/packages/canon/src/components/box/box.mdx b/packages/canon/src/components/box/box.mdx index 57d7eabb3a..29a2a64454 100644 --- a/packages/canon/src/components/box/box.mdx +++ b/packages/canon/src/components/box/box.mdx @@ -1,14 +1,15 @@ import { Canvas, Meta, Unstyled } from '@storybook/blocks'; -import * as BoxStories from './box.stories'; +import * as BoxStories from './Box.stories'; import { Chip } from '../../../docs/components/chip'; import * as Table from '../../../docs/components/table'; -import { Box } from './box'; -import { Stack } from '../stack/stack'; +import { Box } from './Box'; +import { Stack } from '../Stack'; import { Title, Text } from '../../../docs/components'; import { Padding } from './docs/padding'; import { listResponsiveValues, listColorValues } from '../../utils/list-values'; import { responsiveProperties } from './sprinkles.css'; import { PropsTable } from './docs/props-table'; +import { SpacingTable } from './docs/spacing-table'; @@ -29,137 +30,9 @@ import { PropsTable } from './docs/props-table'; predefined spacing tokens. We would recommend to use padding over margin to avoid collapsing margins but both are available. + - - - - Prop - Type - Default - - - - - - padding - p - - - number - - - 0 - - - - - paddingX - px - - - number - - - 0 - - - - - paddingY - py - - - number - - - 0 - - - - - paddingLeft - pl - - - number - - - 0 - - - - - paddingRight - pr - - - number - - - 0 - - - - - margin - m - - - number - - - 0 - - - - - marginX - mx - - - number - - - 0 - - - - - marginY - my - - - number - - - 0 - - - - - marginLeft - ml - - - number - - - 0 - - - - - marginRight - mr - - - number - - - 0 - - - - + + diff --git a/packages/canon/src/components/box/box.stories.tsx b/packages/canon/src/components/box/box.stories.tsx index 1ba9f590a8..8b8a2d7c56 100644 --- a/packages/canon/src/components/box/box.stories.tsx +++ b/packages/canon/src/components/box/box.stories.tsx @@ -16,63 +16,45 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { Box } from './box'; +import { Box } from './Box'; import { listResponsiveValues } from '../../utils/list-values'; import { responsiveProperties, colorProperties } from './sprinkles.css'; -const argTypesResponsive = Object.keys(responsiveProperties.styles) - .filter( - n => - ![ - 'm', - 'mb', - 'ml', - 'mr', - 'mt', - 'mx', - 'my', - 'p', - 'pb', - 'pl', - 'pr', - 'pt', - 'px', - 'py', - ].includes(n), - ) - .reduce>((acc, n) => { - if ( - [ - 'margin', - 'marginBottom', - 'marginLeft', - 'marginRight', - 'marginTop', - 'marginX', - 'marginY', - 'padding', - 'paddingBottom', - 'paddingLeft', - 'paddingRight', - 'paddingTop', - 'paddingX', - 'paddingY', - ].includes(n) - ) { - acc[n] = { - control: 'select', - options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], - }; - } else { - acc[n] = { - control: 'select', - options: listResponsiveValues( - n as keyof typeof responsiveProperties.styles, - ), - }; - } - return acc; - }, {}); +const argTypesResponsive = Object.keys(responsiveProperties.styles).reduce< + Record +>((acc, n) => { + if ( + [ + 'margin', + 'marginBottom', + 'marginLeft', + 'marginRight', + 'marginTop', + 'marginX', + 'marginY', + 'padding', + 'paddingBottom', + 'paddingLeft', + 'paddingRight', + 'paddingTop', + 'paddingX', + 'paddingY', + ].includes(n) + ) { + acc[n] = { + control: 'select', + options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], + }; + } else { + acc[n] = { + control: 'select', + options: listResponsiveValues( + n as keyof typeof responsiveProperties.styles, + ), + }; + } + return acc; +}, {}); const argTypesColor = Object.keys(colorProperties.styles).reduce< Record diff --git a/packages/canon/src/components/box/box.tsx b/packages/canon/src/components/box/box.tsx index ebb081039f..d1cb289506 100644 --- a/packages/canon/src/components/box/box.tsx +++ b/packages/canon/src/components/box/box.tsx @@ -32,12 +32,13 @@ export type BoxProps = Parameters[0] & }; /** @public */ -export const Box = ({ as = 'div', className, style, ...props }: BoxProps) => { +export const Box = (props: BoxProps) => { + const { as = 'div', className, style, ...rest } = props; const boxSprinklesProps: Record = {}; const nativeProps: Record = {}; // Split props between sprinkles and native HTML props - Object.entries(props).forEach(([key, value]) => { + Object.entries(rest).forEach(([key, value]) => { if (value === undefined) return; if ( diff --git a/packages/canon/src/components/box/docs/padding.tsx b/packages/canon/src/components/box/docs/padding.tsx index 4348a6facc..3f78f56692 100644 --- a/packages/canon/src/components/box/docs/padding.tsx +++ b/packages/canon/src/components/box/docs/padding.tsx @@ -15,14 +15,14 @@ */ import React from 'react'; -import { Stack } from '../../stack/stack'; -import { Inline } from '../../inline/inline'; -import { Box } from '../box'; +import { Stack } from '../../Stack'; +import { Inline } from '../../Inline'; +import { Box } from '../Box'; const FakeBox = ({ children }: { children: string }) => ( @@ -35,16 +35,16 @@ export const Padding = () => { padding @@ -52,7 +52,7 @@ export const Padding = () => { paddingX @@ -60,7 +60,7 @@ export const Padding = () => { paddingY @@ -70,7 +70,7 @@ export const Padding = () => { paddingTop @@ -78,7 +78,7 @@ export const Padding = () => { paddingBottom @@ -86,7 +86,7 @@ export const Padding = () => { paddingLeft @@ -94,7 +94,7 @@ export const Padding = () => { paddingRight diff --git a/packages/canon/src/components/box/docs/props-table.tsx b/packages/canon/src/components/box/docs/props-table.tsx index 3d11f0faa3..bcdda93f2a 100644 --- a/packages/canon/src/components/box/docs/props-table.tsx +++ b/packages/canon/src/components/box/docs/props-table.tsx @@ -41,13 +41,6 @@ export const PropsTable = () => { 'paddingRight', 'paddingTop', 'paddingBottom', - 'p', - 'px', - 'py', - 'pl', - 'pr', - 'pt', - 'pb', 'margin', 'marginX', 'marginY', @@ -55,13 +48,6 @@ export const PropsTable = () => { 'marginRight', 'marginTop', 'marginBottom', - 'm', - 'mx', - 'my', - 'ml', - 'mr', - 'mt', - 'mb', ].includes(n), ) .map(n => ( diff --git a/packages/canon/src/components/box/index.tsx b/packages/canon/src/components/box/index.tsx index a1e8b97916..589528cd1d 100644 --- a/packages/canon/src/components/box/index.tsx +++ b/packages/canon/src/components/box/index.tsx @@ -13,6 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { Box } from './box'; -export type { BoxProps } from './box'; +export { Box } from './Box'; +export type { BoxProps } from './Box'; export { boxSprinkles } from './sprinkles.css'; diff --git a/packages/canon/src/components/box/sprinkles.css.ts b/packages/canon/src/components/box/sprinkles.css.ts index b5392d407b..12a8118316 100644 --- a/packages/canon/src/components/box/sprinkles.css.ts +++ b/packages/canon/src/components/box/sprinkles.css.ts @@ -70,23 +70,9 @@ export const responsiveProperties = defineProperties({ padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'], paddingX: ['paddingLeft', 'paddingRight'], paddingY: ['paddingTop', 'paddingBottom'], - p: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'], - pt: ['paddingTop'], - pr: ['paddingRight'], - pb: ['paddingBottom'], - pl: ['paddingLeft'], - px: ['paddingLeft', 'paddingRight'], - py: ['paddingTop', 'paddingBottom'], margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'], marginX: ['marginLeft', 'marginRight'], marginY: ['marginTop', 'marginBottom'], - m: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'], - mt: ['marginTop'], - mr: ['marginRight'], - mb: ['marginBottom'], - ml: ['marginLeft'], - mx: ['marginLeft', 'marginRight'], - my: ['marginTop', 'marginBottom'], }, }); diff --git a/packages/canon/src/components/button/button.stories.tsx b/packages/canon/src/components/button/button.stories.tsx index 47a689fb9f..7359d36f10 100644 --- a/packages/canon/src/components/button/button.stories.tsx +++ b/packages/canon/src/components/button/button.stories.tsx @@ -16,8 +16,8 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { Button } from './button'; -import { Box } from '../box/box'; +import { Button } from './Button'; +import { Box } from '../Box/Box'; const meta = { title: 'Components/Button', diff --git a/packages/canon/src/components/button/button.tsx b/packages/canon/src/components/button/button.tsx index 23286025a2..16a6beade5 100644 --- a/packages/canon/src/components/button/button.tsx +++ b/packages/canon/src/components/button/button.tsx @@ -16,9 +16,9 @@ import React from 'react'; import { button } from './button.css'; -import { Box } from '../box/box'; -import { Icon } from '../icon/icon'; -import { IconNames } from '../icon/context'; +import { Box } from '../Box/Box'; +import { Icon } from '../Icon/Icon'; +import { IconNames } from '../Icon/context'; /** * Properties for {@link Button} diff --git a/packages/canon/src/components/button/index.tsx b/packages/canon/src/components/button/index.tsx index d9e8a4155c..bc6714754d 100644 --- a/packages/canon/src/components/button/index.tsx +++ b/packages/canon/src/components/button/index.tsx @@ -13,5 +13,5 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { Button } from './button'; -export type { ButtonProps } from './button'; +export { Button } from './Button'; +export type { ButtonProps } from './Button'; diff --git a/packages/canon/src/components/icon/icon.stories.tsx b/packages/canon/src/components/icon/icon.stories.tsx index 4e54c4b67a..6b53ef66b2 100644 --- a/packages/canon/src/components/icon/icon.stories.tsx +++ b/packages/canon/src/components/icon/icon.stories.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { Meta, StoryObj } from '@storybook/react'; -import { Icon } from './icon'; +import { Icon } from './Icon'; import { IconProvider } from './context'; import * as LucideIcons from 'lucide-react'; diff --git a/packages/canon/src/components/icon/index.tsx b/packages/canon/src/components/icon/index.tsx index 22106adcc7..441dbe0c3b 100644 --- a/packages/canon/src/components/icon/index.tsx +++ b/packages/canon/src/components/icon/index.tsx @@ -14,6 +14,6 @@ * limitations under the License. */ -export * from './icon'; +export * from './Icon'; export { IconProvider } from './context'; export type { IconNames } from './context'; diff --git a/packages/canon/src/components/inline/inline.stories.tsx b/packages/canon/src/components/inline/inline.stories.tsx index a803cfc80e..71d1140b5c 100644 --- a/packages/canon/src/components/inline/inline.stories.tsx +++ b/packages/canon/src/components/inline/inline.stories.tsx @@ -16,8 +16,8 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { Inline } from './inline'; -import { Box } from '../box/box'; +import { Inline } from './Inline'; +import { Box } from '../Box/Box'; const meta = { title: 'Components/Inline', diff --git a/packages/canon/src/components/inline/inline.tsx b/packages/canon/src/components/inline/inline.tsx index 0da15303f9..48b0a14eb5 100644 --- a/packages/canon/src/components/inline/inline.tsx +++ b/packages/canon/src/components/inline/inline.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { Box, BoxProps } from '../box/box'; +import { Box, BoxProps } from '../Box/Box'; import { alignToFlexAlign } from '../../utils/align'; export const validInlineComponents = [ diff --git a/packages/canon/src/components/stack/stack.stories.tsx b/packages/canon/src/components/stack/stack.stories.tsx index c1a349e3c8..8655194778 100644 --- a/packages/canon/src/components/stack/stack.stories.tsx +++ b/packages/canon/src/components/stack/stack.stories.tsx @@ -16,8 +16,8 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { Stack } from './stack'; -import { Box } from '../box/box'; +import { Stack } from './Stack'; +import { Box } from '../Box/Box'; const meta = { title: 'Components/Stack', diff --git a/packages/canon/src/components/stack/stack.tsx b/packages/canon/src/components/stack/stack.tsx index 90ea6c0502..a2bc74d4c8 100644 --- a/packages/canon/src/components/stack/stack.tsx +++ b/packages/canon/src/components/stack/stack.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { Box, BoxProps } from '../box/box'; +import { Box, BoxProps } from '../Box/Box'; import { alignToFlexAlign } from '../../utils/align'; const validStackComponents = [ diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts index 38bcc3b77c..2bd3f11f48 100644 --- a/packages/canon/src/index.ts +++ b/packages/canon/src/index.ts @@ -20,6 +20,6 @@ * @packageDocumentation */ -export * from './components/button'; -export * from './components/box'; -export * from './components/icon'; +export * from './components/Button'; +export * from './components/Box'; +export * from './components/Icon'; diff --git a/packages/canon/src/theme/styles.css b/packages/canon/src/theme/styles.css index 5dadf7d3df..fa5ed2ba4d 100644 --- a/packages/canon/src/theme/styles.css +++ b/packages/canon/src/theme/styles.css @@ -22,4 +22,4 @@ @import './theme.css'; /* Components */ -@import '../components/button/styles.css'; +@import '../components/Button/styles.css'; diff --git a/packages/canon/src/utils/align.ts b/packages/canon/src/utils/align.ts index 87dee10bd0..f4d7b5932e 100644 --- a/packages/canon/src/utils/align.ts +++ b/packages/canon/src/utils/align.ts @@ -17,7 +17,7 @@ import { type OptionalResponsiveValue, mapResponsiveValue, -} from '../components/box/sprinkles.css'; +} from '../components/Box/sprinkles.css'; export type Align = 'left' | 'center' | 'right'; export type AlignY = 'top' | 'center' | 'bottom'; diff --git a/packages/canon/src/utils/list-values.ts b/packages/canon/src/utils/list-values.ts index a2649334f8..9e3464a4f5 100644 --- a/packages/canon/src/utils/list-values.ts +++ b/packages/canon/src/utils/list-values.ts @@ -17,7 +17,7 @@ import { responsiveProperties, colorProperties, -} from '../components/box/sprinkles.css'; +} from '../components/Box/sprinkles.css'; export const listResponsiveValues = ( value: keyof typeof responsiveProperties.styles,