diff --git a/packages/canon/src/components/Box/docs/spacing-table.tsx b/packages/canon/src/components/Box/docs/spacing-table.tsx deleted file mode 100644 index d6668e22ae..0000000000 --- a/packages/canon/src/components/Box/docs/spacing-table.tsx +++ /dev/null @@ -1,71 +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 React from 'react'; -import * as Table from '../../../../docs/components-new'; -import { Chip } from '../../../../docs/components-new'; -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/box/box.mdx b/packages/canon/src/components/box/box.mdx deleted file mode 100644 index 5778f9a067..0000000000 --- a/packages/canon/src/components/box/box.mdx +++ /dev/null @@ -1,38 +0,0 @@ -import { Canvas, Meta, Unstyled } from '@storybook/blocks'; -import * as BoxStories from './Box.stories'; -import { Chip } from '../../../docs/components-new/Chip'; -import * as Table from '../../../docs/components-new/Table'; -import { Box } from './Box'; -import { Stack } from '../Stack'; -import { Title, Text } from '../../../docs/components-new'; -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'; - - - - - -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. - - - - -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. - - - - - - -