Remove duplicated files
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
@@ -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 (
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.HeaderRow>
|
||||
<Table.HeaderCell>Prop</Table.HeaderCell>
|
||||
<Table.HeaderCell>Type</Table.HeaderCell>
|
||||
</Table.HeaderRow>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{Object.keys(responsiveProperties.styles)
|
||||
.filter(n =>
|
||||
[
|
||||
'padding',
|
||||
'paddingX',
|
||||
'paddingY',
|
||||
'paddingLeft',
|
||||
'paddingRight',
|
||||
'paddingTop',
|
||||
'paddingBottom',
|
||||
'margin',
|
||||
'marginX',
|
||||
'marginY',
|
||||
'marginLeft',
|
||||
'marginRight',
|
||||
'marginTop',
|
||||
'marginBottom',
|
||||
].includes(n),
|
||||
)
|
||||
.map(n => (
|
||||
<Table.Row key={n}>
|
||||
<Table.Cell>
|
||||
<Chip head>{n}</Chip>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
{listResponsiveValues(
|
||||
'paddingTop' as keyof typeof responsiveProperties.styles,
|
||||
).map(value => (
|
||||
<Chip key={value}>{value}</Chip>
|
||||
))}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
);
|
||||
};
|
||||
@@ -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';
|
||||
|
||||
<Meta of={BoxStories} />
|
||||
|
||||
<Unstyled>
|
||||
|
||||
<Title type="h1">Box</Title>
|
||||
<Text>
|
||||
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 `<div>` element and
|
||||
provides a consistent API for styling and layout. You'll find below a list of all the available properties.
|
||||
</Text>
|
||||
|
||||
<PropsTable />
|
||||
|
||||
<Title type="h2">Padding & Margin</Title>
|
||||
<Text>
|
||||
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.
|
||||
</Text>
|
||||
|
||||
<Padding />
|
||||
|
||||
<SpacingTable />
|
||||
|
||||
</Unstyled>
|
||||
Reference in New Issue
Block a user