diff --git a/packages/canon/docs/components/Banner/index.tsx b/packages/canon/docs/components/Banner/Banner.tsx similarity index 90% rename from packages/canon/docs/components/Banner/index.tsx rename to packages/canon/docs/components/Banner/Banner.tsx index c3036eac03..3199e65bc0 100644 --- a/packages/canon/docs/components/Banner/index.tsx +++ b/packages/canon/docs/components/Banner/Banner.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ import React from 'react'; -import { bannerIconStyles, bannerStyles } from './banner.css'; export const Banner = ({ children, @@ -24,8 +23,8 @@ export const Banner = ({ variant?: 'info' | 'warning'; }) => { return ( -
-
+
+
p { + margin: 0; + } + + &.info { + background-color: #f2f2f2; + border-color: #cdcdcd; + color: #888888; + } + + &.warning { + background-color: #fff2b9; + border-color: #ffd000; + color: #d79927; + } + + & .icon { + width: 32px; + height: 32px; + background-color: rgba(215, 153, 39, 0.2); + border-radius: 6px; + margin-right: 16px; + display: flex; + align-items: center; + justify-content: center; + } +} diff --git a/packages/canon/docs/components/Chip/index.ts b/packages/canon/docs/components/Chip/index.ts new file mode 100644 index 0000000000..ff9e4794c5 --- /dev/null +++ b/packages/canon/docs/components/Chip/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 { Chip } from './Chip'; diff --git a/packages/canon/docs/components/Columns/index.ts b/packages/canon/docs/components/Columns/index.ts new file mode 100644 index 0000000000..05de0850be --- /dev/null +++ b/packages/canon/docs/components/Columns/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 { Columns } from './Columns'; diff --git a/packages/canon/docs/components/ComponentStatus/component-status.css.ts b/packages/canon/docs/components/ComponentStatus/component-status.css.ts deleted file mode 100644 index 5cce5adb5d..0000000000 --- a/packages/canon/docs/components/ComponentStatus/component-status.css.ts +++ /dev/null @@ -1,77 +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 { style } from '@vanilla-extract/css'; -import { recipe } from '@vanilla-extract/recipes'; - -export const container = style({ - display: 'flex', - justifyContent: 'space-between', -}); - -export const title = style({ - color: '#3b59ff', - fontFamily: '"Geist", sans-serif', - fontSize: '16px', - fontWeight: 400, - textDecoration: 'none', -}); - -export const pill = recipe({ - base: { - fontFamily: '"Geist", sans-serif', - display: 'inline-flex', - alignItems: 'center', - color: '#000', - borderRadius: '40px', - padding: '0px 8px', - height: '24px', - fontSize: '12px', - fontWeight: 600, - borderStyle: 'solid', - borderWidth: '1px', - marginLeft: '8px', - }, - variants: { - status: { - notStarted: { - backgroundColor: '#F2F2F2', - borderColor: '#CDCDCD', - color: '#888888', - }, - inProgress: { - backgroundColor: '#FFF2B9', - borderColor: '#FFD000', - color: '#D79927', - }, - alpha: { - backgroundColor: '#D7F9D7', - borderColor: '#4ED14A', - color: '#3A9837', - }, - beta: { - backgroundColor: '#D7F9D7', - borderColor: '#4ED14A', - color: '#3A9837', - }, - stable: { - backgroundColor: '#D7F9D7', - borderColor: '#4ED14A', - color: '#3A9837', - }, - }, - }, -}); diff --git a/packages/canon/docs/components/ComponentStatus/index.ts b/packages/canon/docs/components/ComponentStatus/index.ts new file mode 100644 index 0000000000..238c001289 --- /dev/null +++ b/packages/canon/docs/components/ComponentStatus/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 { ComponentStatus } from './ComponentStatus'; diff --git a/packages/canon/docs/components/IconLibrary/index.tsx b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx similarity index 100% rename from packages/canon/docs/components/IconLibrary/index.tsx rename to packages/canon/docs/components/IconLibrary/IconLibrary.tsx diff --git a/packages/canon/docs/components/IconLibrary/index.ts b/packages/canon/docs/components/IconLibrary/index.ts new file mode 100644 index 0000000000..071c80db85 --- /dev/null +++ b/packages/canon/docs/components/IconLibrary/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 { IconLibrary } from './IconLibrary'; diff --git a/packages/canon/docs/components/LayoutComponents/index.tsx b/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx similarity index 90% rename from packages/canon/docs/components/LayoutComponents/index.tsx rename to packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx index 67819ee397..56f389a389 100644 --- a/packages/canon/docs/components/LayoutComponents/index.tsx +++ b/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx @@ -15,11 +15,11 @@ */ import React from 'react'; -import { BoxSvg } from './box'; -import { StackSvg } from './stack'; -import { GridSvg } from './grid'; -import { InlineSvg } from './inline'; -import { ContainerSvg } from './container'; +import { BoxSvg } from './svgs/box'; +import { StackSvg } from './svgs/stack'; +import { GridSvg } from './svgs/grid'; +import { InlineSvg } from './svgs/inline'; +import { ContainerSvg } from './svgs/container'; export const LayoutComponents = () => { return ( diff --git a/packages/canon/docs/components/LayoutComponents/index.ts b/packages/canon/docs/components/LayoutComponents/index.ts new file mode 100644 index 0000000000..55cc9f25ef --- /dev/null +++ b/packages/canon/docs/components/LayoutComponents/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 { LayoutComponents } from './LayoutComponents'; diff --git a/packages/canon/docs/components/LayoutComponents/layout-components.css.ts b/packages/canon/docs/components/LayoutComponents/layout-components.css.ts deleted file mode 100644 index 47d9a13111..0000000000 --- a/packages/canon/docs/components/LayoutComponents/layout-components.css.ts +++ /dev/null @@ -1,63 +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 { style } from '@vanilla-extract/css'; - -export const container = style({ - display: 'flex', - justifyContent: 'flex-start', - gap: '1rem', - flexWrap: 'wrap', -}); - -export const box = style({ - display: 'flex', - flexDirection: 'column', - width: 'calc(33.33% - 0.67rem)', - marginBottom: '1rem', - alignItems: 'flex-start', -}); - -export const content = style({ - flex: 'none', - background: 'linear-gradient(180deg, #F3F3F3 0%, #FFF 100%)', - borderRadius: '4px', - width: '100%', - height: '180px', - transition: 'all 0.2s ease-in-out', - marginBottom: '0.75rem', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - selectors: { - [`${box}:hover &`]: { - transform: 'translateY(-4px)', - }, - }, -}); - -export const title = style({ - fontSize: '16px', - fontFamily: 'var(--canon-font-regular)', - transition: 'color 0.2s ease-in-out', - marginBottom: '0.25rem', -}); - -export const description = style({ - fontSize: '16px', - fontFamily: 'var(--canon-font-regular)', - color: '#9e9e9e', -}); diff --git a/packages/canon/docs/components/LayoutComponents/box.tsx b/packages/canon/docs/components/LayoutComponents/svgs/box.tsx similarity index 100% rename from packages/canon/docs/components/LayoutComponents/box.tsx rename to packages/canon/docs/components/LayoutComponents/svgs/box.tsx diff --git a/packages/canon/docs/components/LayoutComponents/container.tsx b/packages/canon/docs/components/LayoutComponents/svgs/container.tsx similarity index 100% rename from packages/canon/docs/components/LayoutComponents/container.tsx rename to packages/canon/docs/components/LayoutComponents/svgs/container.tsx diff --git a/packages/canon/docs/components/LayoutComponents/grid.tsx b/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx similarity index 100% rename from packages/canon/docs/components/LayoutComponents/grid.tsx rename to packages/canon/docs/components/LayoutComponents/svgs/grid.tsx diff --git a/packages/canon/docs/components/LayoutComponents/inline.tsx b/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx similarity index 100% rename from packages/canon/docs/components/LayoutComponents/inline.tsx rename to packages/canon/docs/components/LayoutComponents/svgs/inline.tsx diff --git a/packages/canon/docs/components/LayoutComponents/stack.tsx b/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx similarity index 100% rename from packages/canon/docs/components/LayoutComponents/stack.tsx rename to packages/canon/docs/components/LayoutComponents/svgs/stack.tsx diff --git a/packages/canon/docs/components/Roadmap/index.tsx b/packages/canon/docs/components/Roadmap/Roadmap.tsx similarity index 100% rename from packages/canon/docs/components/Roadmap/index.tsx rename to packages/canon/docs/components/Roadmap/Roadmap.tsx diff --git a/packages/canon/docs/components/Roadmap/index.ts b/packages/canon/docs/components/Roadmap/index.ts new file mode 100644 index 0000000000..ac51dfa1ed --- /dev/null +++ b/packages/canon/docs/components/Roadmap/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 { Roadmap } from './Roadmap'; diff --git a/packages/canon/docs/components/Table/index.tsx b/packages/canon/docs/components/Table/Table.tsx similarity index 100% rename from packages/canon/docs/components/Table/index.tsx rename to packages/canon/docs/components/Table/Table.tsx diff --git a/packages/canon/docs/components/Table/index.ts b/packages/canon/docs/components/Table/index.ts new file mode 100644 index 0000000000..7419aa83a8 --- /dev/null +++ b/packages/canon/docs/components/Table/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 { Root, Header, Body, Row, Cell, HeaderRow, HeaderCell } from './Table'; diff --git a/packages/canon/docs/components/Text/index.ts b/packages/canon/docs/components/Text/index.ts new file mode 100644 index 0000000000..873fca2c76 --- /dev/null +++ b/packages/canon/docs/components/Text/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 { Text } from './Text'; diff --git a/packages/canon/docs/components/Title/index.ts b/packages/canon/docs/components/Title/index.ts new file mode 100644 index 0000000000..998dc81882 --- /dev/null +++ b/packages/canon/docs/components/Title/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 { Title } from './Title'; diff --git a/packages/canon/docs/components/index.ts b/packages/canon/docs/components/index.ts index a497f059cb..a710adbb02 100644 --- a/packages/canon/docs/components/index.ts +++ b/packages/canon/docs/components/index.ts @@ -14,13 +14,13 @@ * limitations under the License. */ -export * from './Chip/Chip'; -export * from './Table'; -export * from './Title/Title'; -export * from './Text/Text'; -export * from './Columns/Columns'; -export * from './ComponentStatus'; -export * from './LayoutComponents'; export * from './Banner'; +export * from './Chip'; +export * from './Columns'; +export * from './ComponentStatus'; export * from './IconLibrary'; +export * from './LayoutComponents'; export * from './Roadmap'; +export * from './Table'; +export * from './Text'; +export * from './Title'; diff --git a/packages/canon/docs/components/styles.css b/packages/canon/docs/components/styles.css index 9cf6eae179..670b0c3046 100644 --- a/packages/canon/docs/components/styles.css +++ b/packages/canon/docs/components/styles.css @@ -1,7 +1,10 @@ -@import './IconLibrary/styles.css'; -@import './Roadmap/styles.css'; -@import './Title/styles.css'; -@import './Text/styles.css'; -@import './Table/styles.css'; -@import './ComponentStatus/styles.css'; +@import './Banner/styles.css'; +@import './Chip/styles.css'; @import './Columns/styles.css'; +@import './ComponentStatus/styles.css'; +@import './IconLibrary/styles.css'; +@import './LayoutComponents/styles.css'; +@import './Roadmap/styles.css'; +@import './Table/styles.css'; +@import './Text/styles.css'; +@import './Title/styles.css'; diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx index 11cc53b148..0ded5c3160 100644 --- a/packages/canon/src/components/Box/Docs.mdx +++ b/packages/canon/src/components/Box/Docs.mdx @@ -2,7 +2,10 @@ import { Meta, Unstyled, Source } from '@storybook/blocks'; import * as BoxStories from './Box.stories'; import { Title, Text } from '../../../docs/components'; import { Padding } from './docs/padding'; -import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable'; +import { + PropsTable, + getBoxProps, +} from '../../../docs/components/PropsTable/PropsTable'; import { boxProperties } from './sprinkles.css'; import { spacingProperties } from '../../layout/sprinkles.css'; diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx index 7fa1886a4e..4ddce0c982 100644 --- a/packages/canon/src/components/Button/Docs.mdx +++ b/packages/canon/src/components/Button/Docs.mdx @@ -1,7 +1,7 @@ import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable'; +import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx index 733dbae637..a65d7b1618 100644 --- a/packages/canon/src/components/Container/Docs.mdx +++ b/packages/canon/src/components/Container/Docs.mdx @@ -1,7 +1,10 @@ import { Meta, Unstyled, Source } from '@storybook/blocks'; import * as ContainerStories from './Container.stories'; import { Title, Text } from '../../../docs/components'; -import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable'; +import { + PropsTable, + getBoxProps, +} from '../../../docs/components/PropsTable/PropsTable'; import { spacingProperties } from '../../layout/sprinkles.css'; import { containerProperties } from './sprinkles.css'; diff --git a/packages/canon/src/components/Grid/Docs.mdx b/packages/canon/src/components/Grid/Docs.mdx index 4a3d64d06f..b7a8c64031 100644 --- a/packages/canon/src/components/Grid/Docs.mdx +++ b/packages/canon/src/components/Grid/Docs.mdx @@ -1,7 +1,10 @@ import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; import * as GridStories from './Grid.stories'; import { Title, Text } from '../../../docs/components'; -import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable'; +import { + PropsTable, + getBoxProps, +} from '../../../docs/components/PropsTable/PropsTable'; import { spacingProperties } from '../../layout/sprinkles.css'; diff --git a/packages/canon/src/components/Inline/Docs.mdx b/packages/canon/src/components/Inline/Docs.mdx index 0469ff0860..9f77158496 100644 --- a/packages/canon/src/components/Inline/Docs.mdx +++ b/packages/canon/src/components/Inline/Docs.mdx @@ -1,7 +1,10 @@ import { Meta, Unstyled, Source } from '@storybook/blocks'; import * as InlineStories from './Inline.stories'; import { Title, Text } from '../../../docs/components'; -import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable'; +import { + PropsTable, + getBoxProps, +} from '../../../docs/components/PropsTable/PropsTable'; import { spacingProperties } from '../../layout/sprinkles.css'; import { inlineProperties } from './sprinkles.css'; diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx index 5ec864937b..0205cb8aba 100644 --- a/packages/canon/src/components/Stack/Docs.mdx +++ b/packages/canon/src/components/Stack/Docs.mdx @@ -1,7 +1,10 @@ import { Meta, Unstyled, Source } from '@storybook/blocks'; import * as StackStories from './Stack.stories'; import { Title, Text } from '../../../docs/components'; -import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable'; +import { + PropsTable, + getBoxProps, +} from '../../../docs/components/PropsTable/PropsTable'; import { spacingProperties } from '../../layout/sprinkles.css';