diff --git a/canon-docs/package.json b/canon-docs/package.json index 69fd1cae30..8558fac8e3 100644 --- a/canon-docs/package.json +++ b/canon-docs/package.json @@ -6,7 +6,7 @@ "build": "npm run build:css && next build", "build:css": "node scripts/build-css.js", "lint": "next lint", - "start": "next dev" + "start": "npm run build:css && next dev" }, "dependencies": { "@codemirror/lang-sass": "^6.0.2", diff --git a/canon-docs/scripts/build-css.js b/canon-docs/scripts/build-css.js index be85164347..dd9775150f 100644 --- a/canon-docs/scripts/build-css.js +++ b/canon-docs/scripts/build-css.js @@ -9,11 +9,6 @@ const source1 = path.join(__dirname, `${source}/core.css`); const destination1 = path.join(__dirname, `${destination}/core.css`); const source2 = path.join(__dirname, `${source}/components.css`); const destination2 = path.join(__dirname, `${destination}/components.css`); -const source3 = path.join( - __dirname, - `../../packages/canon/.storybook/themes/backstage.css`, -); -const destination3 = path.join(__dirname, `${destination}/backstage.css`); // Function to bundle and copy the CSS file const bundleAndCopyFile = async (source, destination) => { @@ -34,7 +29,6 @@ const bundleAndCopyFile = async (source, destination) => { Promise.all([ bundleAndCopyFile(source1, destination1), bundleAndCopyFile(source2, destination2), - bundleAndCopyFile(source3, destination3), ]) .then(() => { // Add an empty line after all operations are complete - It looks better in the terminal :) diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx index b1276157b6..c92b5b9921 100644 --- a/canon-docs/src/app/(docs)/components/button/page.mdx +++ b/canon-docs/src/app/(docs)/components/button/page.mdx @@ -11,6 +11,7 @@ import { ButtonResponsive, } from '@/snippets/button'; import { buttonVariants } from '@/snippets/_snippets'; +import { buttonPropDefs } from '../../../../../../packages/canon/src/components/Button/Button.props'; # Button @@ -58,34 +59,7 @@ A button component that can be used to trigger actions. ## API reference - + ## Examples diff --git a/canon-docs/src/components/PropsTable/PropsTable.tsx b/canon-docs/src/components/PropsTable/PropsTable.tsx index 69bff9ffe6..aa6b9f296e 100644 --- a/canon-docs/src/components/PropsTable/PropsTable.tsx +++ b/canon-docs/src/components/PropsTable/PropsTable.tsx @@ -6,8 +6,9 @@ import { icons } from '../../../../packages/canon'; // Define a more specific type for the data object type PropData = { - type: string | string[]; - responsive: boolean; + values?: string | string[]; + responsive?: boolean; + default?: string; }; // Modify the PropsTable component to use the new type @@ -16,17 +17,34 @@ export const PropsTable = >({ }: { data: T; }) => { + const completeData = { + ...data, + children: { + values: 'ReactNode', + responsive: false, + }, + className: { + values: 'string', + responsive: false, + }, + style: { + values: 'CSSProperties', + responsive: false, + }, + }; + return ( Prop Type + Default Responsive - {Object.keys(data).map(n => ( + {Object.keys(completeData).map(n => ( {n} @@ -35,17 +53,22 @@ export const PropsTable = >({
- {data[n].type === 'icon' ? ( + {completeData[n].values === 'icon' ? ( Object.keys(icons).map(icon => {icon}) - ) : Array.isArray(data[n].type) ? ( - data[n].type.map(t => {t}) + ) : Array.isArray(completeData[n].values) ? ( + completeData[n].values.map(t => {t}) ) : ( - {data[n].type} + {completeData[n].values} )}
- {data[n].responsive ? 'Yes' : 'No'} + + {completeData[n].default ? completeData[n].default : '-'} + + + + {completeData[n].responsive ? 'Yes' : 'No'} ))} diff --git a/canon-docs/src/snippets/button.tsx b/canon-docs/src/snippets/button.tsx index 2ae2ab0be9..a7df4315f9 100644 --- a/canon-docs/src/snippets/button.tsx +++ b/canon-docs/src/snippets/button.tsx @@ -11,9 +11,6 @@ export const ButtonPreview = () => { - ); }; diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 7fe92e4abb..784dd4bc64 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -141,8 +141,7 @@ export interface ButtonProps { variant?: | 'primary' | 'secondary' - | 'tertiary' - | Partial>; + | Partial>; } // @public (undocumented) diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx index 7230b0cbba..8718c77724 100644 --- a/packages/canon/src/components/Box/Box.tsx +++ b/packages/canon/src/components/Box/Box.tsx @@ -37,6 +37,7 @@ export const Box = forwardRef((props, ref) => { ...displayPropDefs, ...boxPropDefs, }; + const { className, style } = extractProps(props, propDefs); return createElement(props.as || 'div', { diff --git a/packages/canon/src/components/Button/Button.props.ts b/packages/canon/src/components/Button/Button.props.ts new file mode 100644 index 0000000000..e363360afa --- /dev/null +++ b/packages/canon/src/components/Button/Button.props.ts @@ -0,0 +1,41 @@ +/* + * Copyright 2025 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 { PropDef, GetPropDefTypes } from '../../props/prop-def'; + +/** @public */ +export const buttonPropDefs = { + variant: { + type: 'enum', + values: ['primary', 'secondary'], + className: 'canon-Button--variant', + default: 'primary', + responsive: true, + }, + size: { + type: 'enum', + values: ['small', 'medium'], + className: 'canon-Button--size', + default: 'medium', + responsive: true, + }, +} satisfies { + variant: PropDef<'primary' | 'secondary'>; + size: PropDef<'small' | 'medium'>; +}; + +/** @public */ +export type ButtonOwnProps = GetPropDefTypes; diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx index f0b8bc5ece..8ba060ad8e 100644 --- a/packages/canon/src/components/Button/Button.stories.tsx +++ b/packages/canon/src/components/Button/Button.stories.tsx @@ -29,9 +29,14 @@ const meta = { control: 'select', options: ['small', 'medium'], }, + variant: { + control: 'select', + options: ['primary', 'secondary'], + }, }, args: { size: 'medium', + variant: 'primary', }, } satisfies Meta; @@ -57,9 +62,6 @@ export const Variants: Story = { - ), }; @@ -94,7 +96,7 @@ export const FullWidth: Story = { children: 'Button', }, render: args => ( - +