From e337d687d68e3bf2f24bcf8851b6d3e7bf94ce73 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Dec 2024 11:53:50 +0000 Subject: [PATCH 1/5] Remove Vanilla Extract CSS from Storybook docs Signed-off-by: Charles de Dreuille --- .../components/Chip/{index.tsx => Chip.tsx} | 3 +- .../canon/docs/components/Chip/chip.css.ts | 42 ---------- .../{Text/text.css.ts => Chip/styles.css} | 33 ++++---- .../Columns/{index.tsx => Columns.tsx} | 3 +- .../canon/docs/components/Columns/styles.css | 22 +++++ .../{index.tsx => ComponentStatus.tsx} | 9 +- .../components/ComponentStatus/styles.css | 73 ++++++++++++++++ .../docs/components/IconLibrary/index.tsx | 2 +- .../components/LayoutComponents/index.tsx | 49 +++++------ .../components/LayoutComponents/styles.css | 60 ++++++++++++++ .../canon/docs/components/Table/index.tsx | 17 ++-- .../canon/docs/components/Table/styles.css | 74 +++++++++++++++++ .../canon/docs/components/Table/table.css.ts | 83 ------------------- .../components/Text/{index.tsx => Text.tsx} | 3 +- .../canon/docs/components/Text/styles.css | 32 +++++++ .../components/Title/{index.tsx => Title.tsx} | 3 +- .../canon/docs/components/Title/styles.css | 43 ++++++++++ .../canon/docs/components/Title/title.css.ts | 48 ----------- packages/canon/docs/components/index.ts | 8 +- packages/canon/docs/components/styles.css | 5 ++ 20 files changed, 364 insertions(+), 248 deletions(-) rename packages/canon/docs/components/Chip/{index.tsx => Chip.tsx} (87%) delete mode 100644 packages/canon/docs/components/Chip/chip.css.ts rename packages/canon/docs/components/{Text/text.css.ts => Chip/styles.css} (61%) rename packages/canon/docs/components/Columns/{index.tsx => Columns.tsx} (90%) create mode 100644 packages/canon/docs/components/Columns/styles.css rename packages/canon/docs/components/ComponentStatus/{index.tsx => ComponentStatus.tsx} (83%) create mode 100644 packages/canon/docs/components/ComponentStatus/styles.css create mode 100644 packages/canon/docs/components/LayoutComponents/styles.css create mode 100644 packages/canon/docs/components/Table/styles.css delete mode 100644 packages/canon/docs/components/Table/table.css.ts rename packages/canon/docs/components/Text/{index.tsx => Text.tsx} (90%) create mode 100644 packages/canon/docs/components/Text/styles.css rename packages/canon/docs/components/Title/{index.tsx => Title.tsx} (92%) create mode 100644 packages/canon/docs/components/Title/styles.css delete mode 100644 packages/canon/docs/components/Title/title.css.ts diff --git a/packages/canon/docs/components/Chip/index.tsx b/packages/canon/docs/components/Chip/Chip.tsx similarity index 87% rename from packages/canon/docs/components/Chip/index.tsx rename to packages/canon/docs/components/Chip/Chip.tsx index 81609dda61..e6e1d1b1c4 100644 --- a/packages/canon/docs/components/Chip/index.tsx +++ b/packages/canon/docs/components/Chip/Chip.tsx @@ -15,7 +15,6 @@ */ import React from 'react'; -import { chipStyles } from './chip.css'; export const Chip = ({ children, @@ -24,5 +23,5 @@ export const Chip = ({ children: React.ReactNode; head?: boolean; }) => { - return {children}; + return {children}; }; diff --git a/packages/canon/docs/components/Chip/chip.css.ts b/packages/canon/docs/components/Chip/chip.css.ts deleted file mode 100644 index 027a722f84..0000000000 --- a/packages/canon/docs/components/Chip/chip.css.ts +++ /dev/null @@ -1,42 +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 { recipe } from '@vanilla-extract/recipes'; - -export const chipStyles = recipe({ - base: { - display: 'inline-flex', - alignItems: 'center', - fontFamily: 'Geist Mono, monospace', - fontSize: '13px', - borderRadius: '6px', - padding: '0px 8px', - height: '24px', - marginRight: '4px', - }, - variants: { - head: { - true: { - backgroundColor: '#eaf2fd', - color: '#2563eb', - }, - false: { - backgroundColor: '#f0f0f0', - color: '#5d5d5d', - }, - }, - }, -}); diff --git a/packages/canon/docs/components/Text/text.css.ts b/packages/canon/docs/components/Chip/styles.css similarity index 61% rename from packages/canon/docs/components/Text/text.css.ts rename to packages/canon/docs/components/Chip/styles.css index fbbc427362..ebbaf6645f 100644 --- a/packages/canon/docs/components/Text/text.css.ts +++ b/packages/canon/docs/components/Chip/styles.css @@ -14,21 +14,20 @@ * limitations under the License. */ -import { globalStyle, style } from '@vanilla-extract/css'; +.chip { + display: inline-flex; + align-items: center; + font-family: 'Geist Mono', monospace; + font-size: 13px; + border-radius: 6px; + padding: 0px 8px; + height: 24px; + margin-right: 4px; + background-color: #f0f0f0; + color: #5d5d5d; -export const textStyles = style({ - fontFamily: '"Geist", sans-serif', - fontSize: '16px', - lineHeight: '28px', - margin: '0', - fontWeight: 300, - marginBottom: '16px', -}); - -globalStyle(`${textStyles} p`, { - fontFamily: '"Geist", sans-serif', - fontSize: '16px', - lineHeight: '28px', - margin: '0', - fontWeight: 300, -}); + &.head { + background-color: #eaf2fd; + color: #2563eb; + } +} diff --git a/packages/canon/docs/components/Columns/index.tsx b/packages/canon/docs/components/Columns/Columns.tsx similarity index 90% rename from packages/canon/docs/components/Columns/index.tsx rename to packages/canon/docs/components/Columns/Columns.tsx index 0d6f27f04d..115ec50010 100644 --- a/packages/canon/docs/components/Columns/index.tsx +++ b/packages/canon/docs/components/Columns/Columns.tsx @@ -15,7 +15,6 @@ */ import React from 'react'; -import { styles } from './columns.css'; export const Columns = ({ children, @@ -25,7 +24,7 @@ export const Columns = ({ style?: React.CSSProperties; }) => { return ( -
+
{children}
); diff --git a/packages/canon/docs/components/Columns/styles.css b/packages/canon/docs/components/Columns/styles.css new file mode 100644 index 0000000000..c34acfc406 --- /dev/null +++ b/packages/canon/docs/components/Columns/styles.css @@ -0,0 +1,22 @@ +/* + * 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. + */ + +.columns { + display: grid; + grid-template-columns: repeat(3, 1fr); + row-gap: 20px; + column-gap: 80px; +} diff --git a/packages/canon/docs/components/ComponentStatus/index.tsx b/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx similarity index 83% rename from packages/canon/docs/components/ComponentStatus/index.tsx rename to packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx index 64d552ea97..0159e27b32 100644 --- a/packages/canon/docs/components/ComponentStatus/index.tsx +++ b/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx @@ -15,7 +15,6 @@ */ import React from 'react'; -import { container, pill, title } from './component-status.css'; export const ComponentStatus = ({ name, @@ -29,15 +28,15 @@ export const ComponentStatus = ({ link?: string; }) => { return ( -
+
{link ? ( - + {name} ) : ( - {name} + {name} )} - + {status === 'notStarted' && 'Not Started'} {status === 'inProgress' && 'In Progress'} {status === 'alpha' && 'Alpha'} diff --git a/packages/canon/docs/components/ComponentStatus/styles.css b/packages/canon/docs/components/ComponentStatus/styles.css new file mode 100644 index 0000000000..f800e659e0 --- /dev/null +++ b/packages/canon/docs/components/ComponentStatus/styles.css @@ -0,0 +1,73 @@ +/* + * 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. + */ + +.component-status { + display: flex; + justify-content: space-between; + + & .title { + color: #3b59ff; + font-family: 'Geist', sans-serif; + font-size: 16px; + font-weight: 400; + text-decoration: none; + } + + & .pill { + font-family: 'Geist', sans-serif; + display: inline-flex; + align-items: center; + color: #000; + border-radius: 40px; + padding: 0px 8px; + height: 24px; + font-size: 12px; + font-weight: 600; + border-style: solid; + border-width: 1px; + margin-left: 8px; + + &.notStarted { + background-color: #f2f2f2; + border-color: #cdcdcd; + color: #888888; + } + + &.inProgress { + background-color: #fff2b9; + border-color: #ffd000; + color: #d79927; + } + + &.alpha { + background-color: #d7f9d7; + border-color: #4ed14a; + color: #3a9837; + } + + &.beta { + background-color: #d7f9d7; + border-color: #4ed14a; + color: #3a9837; + } + + &.stable { + background-color: #d7f9d7; + border-color: #4ed14a; + color: #3a9837; + } + } +} diff --git a/packages/canon/docs/components/IconLibrary/index.tsx b/packages/canon/docs/components/IconLibrary/index.tsx index 6e94c2c777..e32f4c08a4 100644 --- a/packages/canon/docs/components/IconLibrary/index.tsx +++ b/packages/canon/docs/components/IconLibrary/index.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { Icon } from '@backstage/canon'; import type { IconNames } from '@backstage/canon'; import { defaultIcons } from '../../../src/components/Icon/icons'; -import { Text } from '../Text'; +import { Text } from '../Text/Text'; export const IconLibrary = () => { const icons = Object.keys(defaultIcons); diff --git a/packages/canon/docs/components/LayoutComponents/index.tsx b/packages/canon/docs/components/LayoutComponents/index.tsx index 92fab7c47f..67819ee397 100644 --- a/packages/canon/docs/components/LayoutComponents/index.tsx +++ b/packages/canon/docs/components/LayoutComponents/index.tsx @@ -15,13 +15,6 @@ */ import React from 'react'; -import { - container, - box, - content, - title, - description, -} from './layout-components.css'; import { BoxSvg } from './box'; import { StackSvg } from './stack'; import { GridSvg } from './grid'; @@ -30,41 +23,41 @@ import { ContainerSvg } from './container'; export const LayoutComponents = () => { return ( -
-
- +
+
+ -
Box
-
The most basic layout component
+
Box
+
The most basic layout component
-
- +
+ -
Stack
-
Arrange your components vertically
+
Stack
+
Arrange your components vertically
-
- +
+ -
Grid
-
Arrange your components in a grid
+
Grid
+
Arrange your components in a grid
-
- +
+ -
Inline
-
Arrange your components in a row
+
Inline
+
Arrange your components in a row
-
- +
+ -
Container
-
A container for your components
+
Container
+
A container for your components
); diff --git a/packages/canon/docs/components/LayoutComponents/styles.css b/packages/canon/docs/components/LayoutComponents/styles.css new file mode 100644 index 0000000000..c2a819cf6b --- /dev/null +++ b/packages/canon/docs/components/LayoutComponents/styles.css @@ -0,0 +1,60 @@ +/* + * 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. + */ + +.layout-components { + display: flex; + justify-content: flex-start; + gap: 1rem; + flex-wrap: wrap; + + & .box { + display: flex; + flex-direction: column; + width: calc(33.33% - 0.67rem); + margin-bottom: 1rem; + align-items: flex-start; + } + + & .content { + flex: none; + background: linear-gradient(180deg, #f3f3f3 0%, #fff 100%); + border-radius: 4px; + width: 100%; + height: 180px; + transition: all 0.2s ease-in-out; + margin-bottom: 0.75rem; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + transform: translateY(-4px); + } + } + + & .title { + font-size: 16px; + font-family: 'Geist', sans-serif; + transition: color 0.2s ease-in-out; + margin-bottom: 0.25rem; + } + + & .description { + font-size: 16px; + font-family: 'Geist', sans-serif; + color: #9e9e9e; + } +} diff --git a/packages/canon/docs/components/Table/index.tsx b/packages/canon/docs/components/Table/index.tsx index ead30985aa..4983038724 100644 --- a/packages/canon/docs/components/Table/index.tsx +++ b/packages/canon/docs/components/Table/index.tsx @@ -15,18 +15,11 @@ */ import React from 'react'; -import { - cellStyles, - headerCellStyles, - tableStyles, - wrapperStyles, - rowStyles, -} from './table.css'; export const Root = ({ children }: { children: React.ReactNode }) => { return ( -
- {children}
+
+ {children}
); }; @@ -44,13 +37,13 @@ export const HeaderRow = ({ children }: { children: React.ReactNode }) => { }; export const HeaderCell = ({ children }: { children: React.ReactNode }) => { - return {children}; + return {children}; }; export const Row = ({ children }: { children: React.ReactNode }) => { - return {children}; + return {children}; }; export const Cell = ({ children }: { children: React.ReactNode }) => { - return {children}; + return {children}; }; diff --git a/packages/canon/docs/components/Table/styles.css b/packages/canon/docs/components/Table/styles.css new file mode 100644 index 0000000000..a8c35d3978 --- /dev/null +++ b/packages/canon/docs/components/Table/styles.css @@ -0,0 +1,74 @@ +/* + * 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. + */ + +.table-wrapper { + border: 1px solid #e7e7e7; + border-radius: 4px; + overflow: hidden; + + & .table { + width: 100%; + margin: 0 !important; + padding: 0 !important; + border-spacing: 0px; + border-collapse: collapse; + } + + & .table-cell { + padding: 12px 16px !important; + border: none !important; + text-align: left; + background-color: white !important; + font-family: 'Geist', sans-serif; + font-size: 16px; + font-weight: 300; + + & p { + margin: 0; + } + } + + & .table-header-cell { + background-color: #f5f5f5 !important; + border-bottom: 1px solid #e7e7e7 !important; + font-weight: 500; + font-size: 14px; + } + + & .table-row { + border: none; + border-bottom: 1px solid #e7e7e7; + &:last-child { + border-bottom: none; + } + } + + & .table-chip { + display: inline-block; + font-size: 14px !important; + border: 1px solid #e7e7e7; + border-radius: 6px; + padding: 0px 6px; + height: 24px; + } + + & .table-type { + display: flex; + flex-wrap: wrap; + flex-direction: row; + gap: 8px; + } +} diff --git a/packages/canon/docs/components/Table/table.css.ts b/packages/canon/docs/components/Table/table.css.ts deleted file mode 100644 index b01373ee04..0000000000 --- a/packages/canon/docs/components/Table/table.css.ts +++ /dev/null @@ -1,83 +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, globalStyle } from '@vanilla-extract/css'; - -export const wrapperStyles = style({ - border: '1px solid #e7e7e7', - borderRadius: '4px', - overflow: 'hidden', -}); - -export const tableStyles = style({ - width: '100%', - margin: '0 !important', - padding: '0 !important', - borderSpacing: '0px', - borderCollapse: 'collapse', -}); - -export const cellStyles = style({ - padding: '12px 16px !important', - border: 'none !important', - textAlign: 'left', - backgroundColor: 'white !important', - fontFamily: '"Geist", sans-serif', - fontSize: '16px', - fontWeight: 300, -}); - -// Apply global styles to

elements inside cellStyles -globalStyle(`${cellStyles} p`, { - margin: '0', -}); - -export const headerRowStyles = style({ - borderBottom: '1px solid #e7e7e7', -}); - -export const headerCellStyles = style({ - backgroundColor: '#f5f5f5 !important', - borderBottom: '1px solid #e7e7e7 !important', - fontWeight: 500, - fontSize: '14px', -}); - -export const rowStyles = style({ - border: 'none', - borderBottom: '1px solid #e7e7e7', - selectors: { - '&:last-child': { - borderBottom: 'none', - }, - }, -}); - -export const chipStyles = style({ - display: 'inline-block', - fontSize: '14px !important', - border: '1px solid #e7e7e7', - borderRadius: '6px', - padding: '0px 6px', - height: '24px', -}); - -export const typeStyles = style({ - display: 'flex', - flexWrap: 'wrap', - flexDirection: 'row', - gap: '8px', -}); diff --git a/packages/canon/docs/components/Text/index.tsx b/packages/canon/docs/components/Text/Text.tsx similarity index 90% rename from packages/canon/docs/components/Text/index.tsx rename to packages/canon/docs/components/Text/Text.tsx index be882c0a81..9f3dd6ce90 100644 --- a/packages/canon/docs/components/Text/index.tsx +++ b/packages/canon/docs/components/Text/Text.tsx @@ -15,7 +15,6 @@ */ import React from 'react'; -import { textStyles } from './text.css'; export const Text = ({ children, @@ -25,7 +24,7 @@ export const Text = ({ style?: React.CSSProperties; }) => { return ( -

+
{children}
); diff --git a/packages/canon/docs/components/Text/styles.css b/packages/canon/docs/components/Text/styles.css new file mode 100644 index 0000000000..cbb2b88edb --- /dev/null +++ b/packages/canon/docs/components/Text/styles.css @@ -0,0 +1,32 @@ +/* + * 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. + */ + +.text { + font-family: 'Geist', sans-serif; + font-size: 16px; + line-height: 28px; + margin: 0; + font-weight: 300; + margin-bottom: 16px; + + & p { + font-family: 'Geist', sans-serif; + font-size: 16px; + line-height: 28px; + margin: 0; + font-weight: 300; + } +} diff --git a/packages/canon/docs/components/Title/index.tsx b/packages/canon/docs/components/Title/Title.tsx similarity index 92% rename from packages/canon/docs/components/Title/index.tsx rename to packages/canon/docs/components/Title/Title.tsx index 13e5b964bb..056ccfc14d 100644 --- a/packages/canon/docs/components/Title/index.tsx +++ b/packages/canon/docs/components/Title/Title.tsx @@ -15,7 +15,6 @@ */ import React from 'react'; -import { titleStyles } from './title.css'; export const Title = ({ children, @@ -32,7 +31,7 @@ export const Title = ({ if (type === 'h3') Component = 'h3'; return React.createElement(Component, { - className: titleStyles({ type }), + className: `title ${type}`, style, children, }); diff --git a/packages/canon/docs/components/Title/styles.css b/packages/canon/docs/components/Title/styles.css new file mode 100644 index 0000000000..a8d00e2af5 --- /dev/null +++ b/packages/canon/docs/components/Title/styles.css @@ -0,0 +1,43 @@ +/* + * 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. + */ + +.title { + font-family: 'Geist', sans-serif; + margin: 0; + font-weight: 500; + border: none; + + &.h1 { + font-size: 36px; + line-height: 44px; + margin-bottom: 8px; + margin-top: 0px; + } + + &.h2 { + font-size: 24px; + line-height: 32px; + margin-bottom: 12px; + margin-top: 52px; + } + + &.h3 { + font-size: 20px; + line-height: 28px; + margin-bottom: 12px; + margin-top: 40px; + } +} diff --git a/packages/canon/docs/components/Title/title.css.ts b/packages/canon/docs/components/Title/title.css.ts deleted file mode 100644 index 6618ad80be..0000000000 --- a/packages/canon/docs/components/Title/title.css.ts +++ /dev/null @@ -1,48 +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 { recipe } from '@vanilla-extract/recipes'; - -export const titleStyles = recipe({ - base: { - fontFamily: '"Geist", sans-serif', - margin: '0', - fontWeight: 500, - border: 'none', - }, - variants: { - type: { - h1: { - fontSize: '36px', - lineHeight: '44px', - marginBottom: '8px', - marginTop: '0px', - }, - h2: { - fontSize: '24px', - lineHeight: '32px', - marginBottom: '12px', - marginTop: '52px', - }, - h3: { - fontSize: '20px', - lineHeight: '28px', - marginBottom: '12px', - marginTop: '40px', - }, - }, - }, -}); diff --git a/packages/canon/docs/components/index.ts b/packages/canon/docs/components/index.ts index 7ad07bec6a..a497f059cb 100644 --- a/packages/canon/docs/components/index.ts +++ b/packages/canon/docs/components/index.ts @@ -14,11 +14,11 @@ * limitations under the License. */ -export * from './Chip'; +export * from './Chip/Chip'; export * from './Table'; -export * from './Title'; -export * from './Text'; -export * from './Columns'; +export * from './Title/Title'; +export * from './Text/Text'; +export * from './Columns/Columns'; export * from './ComponentStatus'; export * from './LayoutComponents'; export * from './Banner'; diff --git a/packages/canon/docs/components/styles.css b/packages/canon/docs/components/styles.css index 698085ad19..9cf6eae179 100644 --- a/packages/canon/docs/components/styles.css +++ b/packages/canon/docs/components/styles.css @@ -1,2 +1,7 @@ @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 './Columns/styles.css'; From 22c95fd85ebb87277081272335597287750c9454 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Dec 2024 12:19:02 +0000 Subject: [PATCH 2/5] Cleanup Signed-off-by: Charles de Dreuille --- .../Banner/{index.tsx => Banner.tsx} | 5 +- .../docs/components/Banner/banner.css.ts | 61 --------------- .../columns.css.ts => Banner/index.ts} | 10 +-- .../canon/docs/components/Banner/styles.css | 38 +++++++++ packages/canon/docs/components/Chip/index.ts | 16 ++++ .../canon/docs/components/Columns/index.ts | 16 ++++ .../ComponentStatus/component-status.css.ts | 77 ------------------- .../docs/components/ComponentStatus/index.ts | 16 ++++ .../{index.tsx => IconLibrary.tsx} | 0 .../docs/components/IconLibrary/index.ts | 16 ++++ .../{index.tsx => LayoutComponents.tsx} | 10 +-- .../docs/components/LayoutComponents/index.ts | 16 ++++ .../LayoutComponents/layout-components.css.ts | 63 --------------- .../LayoutComponents/{ => svgs}/box.tsx | 0 .../LayoutComponents/{ => svgs}/container.tsx | 0 .../LayoutComponents/{ => svgs}/grid.tsx | 0 .../LayoutComponents/{ => svgs}/inline.tsx | 0 .../LayoutComponents/{ => svgs}/stack.tsx | 0 .../Roadmap/{index.tsx => Roadmap.tsx} | 0 .../canon/docs/components/Roadmap/index.ts | 16 ++++ .../components/Table/{index.tsx => Table.tsx} | 0 packages/canon/docs/components/Table/index.ts | 16 ++++ packages/canon/docs/components/Text/index.ts | 16 ++++ packages/canon/docs/components/Title/index.ts | 16 ++++ packages/canon/docs/components/index.ts | 14 ++-- packages/canon/docs/components/styles.css | 15 ++-- packages/canon/src/components/Box/Docs.mdx | 5 +- packages/canon/src/components/Button/Docs.mdx | 2 +- .../canon/src/components/Container/Docs.mdx | 5 +- packages/canon/src/components/Grid/Docs.mdx | 5 +- packages/canon/src/components/Inline/Docs.mdx | 5 +- packages/canon/src/components/Stack/Docs.mdx | 5 +- 32 files changed, 227 insertions(+), 237 deletions(-) rename packages/canon/docs/components/Banner/{index.tsx => Banner.tsx} (90%) delete mode 100644 packages/canon/docs/components/Banner/banner.css.ts rename packages/canon/docs/components/{Columns/columns.css.ts => Banner/index.ts} (76%) create mode 100644 packages/canon/docs/components/Banner/styles.css create mode 100644 packages/canon/docs/components/Chip/index.ts create mode 100644 packages/canon/docs/components/Columns/index.ts delete mode 100644 packages/canon/docs/components/ComponentStatus/component-status.css.ts create mode 100644 packages/canon/docs/components/ComponentStatus/index.ts rename packages/canon/docs/components/IconLibrary/{index.tsx => IconLibrary.tsx} (100%) create mode 100644 packages/canon/docs/components/IconLibrary/index.ts rename packages/canon/docs/components/LayoutComponents/{index.tsx => LayoutComponents.tsx} (90%) create mode 100644 packages/canon/docs/components/LayoutComponents/index.ts delete mode 100644 packages/canon/docs/components/LayoutComponents/layout-components.css.ts rename packages/canon/docs/components/LayoutComponents/{ => svgs}/box.tsx (100%) rename packages/canon/docs/components/LayoutComponents/{ => svgs}/container.tsx (100%) rename packages/canon/docs/components/LayoutComponents/{ => svgs}/grid.tsx (100%) rename packages/canon/docs/components/LayoutComponents/{ => svgs}/inline.tsx (100%) rename packages/canon/docs/components/LayoutComponents/{ => svgs}/stack.tsx (100%) rename packages/canon/docs/components/Roadmap/{index.tsx => Roadmap.tsx} (100%) create mode 100644 packages/canon/docs/components/Roadmap/index.ts rename packages/canon/docs/components/Table/{index.tsx => Table.tsx} (100%) create mode 100644 packages/canon/docs/components/Table/index.ts create mode 100644 packages/canon/docs/components/Text/index.ts create mode 100644 packages/canon/docs/components/Title/index.ts 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'; From 11c7bb4d442bc0318a744485fa681a4d58cad668 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Dec 2024 13:44:24 +0000 Subject: [PATCH 3/5] Fixing Box Signed-off-by: Charles de Dreuille --- .../docs/components/PropsTable/getProps.ts | 2 +- .../canon/docs/components/PropsTable/index.ts | 2 +- packages/canon/docs/components/index.ts | 1 + packages/canon/src/components/Box/Box.tsx | 3 +-- packages/canon/src/components/Box/Docs.mdx | 9 +++----- packages/canon/src/components/Box/box.css.ts | 22 ------------------- packages/canon/src/components/Box/styles.css | 4 ++++ 7 files changed, 11 insertions(+), 32 deletions(-) delete mode 100644 packages/canon/src/components/Box/box.css.ts create mode 100644 packages/canon/src/components/Box/styles.css diff --git a/packages/canon/docs/components/PropsTable/getProps.ts b/packages/canon/docs/components/PropsTable/getProps.ts index 866dcb9d10..5773eaeb27 100644 --- a/packages/canon/docs/components/PropsTable/getProps.ts +++ b/packages/canon/docs/components/PropsTable/getProps.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export function getBoxProps(styles: Record) { +export function getProps(styles: Record) { return Object.keys(styles).reduce( (acc: Record, n) => { const style = styles[n]; diff --git a/packages/canon/docs/components/PropsTable/index.ts b/packages/canon/docs/components/PropsTable/index.ts index 010452ee2a..181933f0f8 100644 --- a/packages/canon/docs/components/PropsTable/index.ts +++ b/packages/canon/docs/components/PropsTable/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ export { PropsTable } from './PropsTable'; -export { getBoxProps } from './getProps'; +export { getProps } from './getProps'; diff --git a/packages/canon/docs/components/index.ts b/packages/canon/docs/components/index.ts index a710adbb02..0e5ff2e325 100644 --- a/packages/canon/docs/components/index.ts +++ b/packages/canon/docs/components/index.ts @@ -20,6 +20,7 @@ export * from './Columns'; export * from './ComponentStatus'; export * from './IconLibrary'; export * from './LayoutComponents'; +export * from './PropsTable'; export * from './Roadmap'; export * from './Table'; export * from './Text'; diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx index a470c0584d..d142b3d841 100644 --- a/packages/canon/src/components/Box/Box.tsx +++ b/packages/canon/src/components/Box/Box.tsx @@ -16,7 +16,6 @@ import { createElement, forwardRef } from 'react'; import { boxSprinkles } from './sprinkles.css'; -import { base } from './box.css'; import { BoxProps } from './types'; /** @public */ @@ -27,7 +26,7 @@ export const Box = forwardRef((props, ref) => { const sprinklesClassName = boxSprinkles(restProps); // Combine the base class name, the sprinkles class name, and any additional class names - const classNames = [base, sprinklesClassName, className] + const classNames = ['canon-box', sprinklesClassName, className] .filter(Boolean) .join(' '); diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx index 0ded5c3160..a03c6d43d3 100644 --- a/packages/canon/src/components/Box/Docs.mdx +++ b/packages/canon/src/components/Box/Docs.mdx @@ -2,10 +2,7 @@ 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/PropsTable'; +import { PropsTable, getProps } from '../../../docs/components'; import { boxProperties } from './sprinkles.css'; import { spacingProperties } from '../../layout/sprinkles.css'; @@ -32,7 +29,7 @@ import { spacingProperties } from '../../layout/sprinkles.css'; - + Examples Here are some examples of how you can use the Box component. diff --git a/packages/canon/src/components/Box/box.css.ts b/packages/canon/src/components/Box/box.css.ts deleted file mode 100644 index a3e49162fd..0000000000 --- a/packages/canon/src/components/Box/box.css.ts +++ /dev/null @@ -1,22 +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 base = style({ - fontFamily: 'var(--canon-font-regular)', - color: 'var(--canon-text-primary)', -}); diff --git a/packages/canon/src/components/Box/styles.css b/packages/canon/src/components/Box/styles.css new file mode 100644 index 0000000000..a90ce578cd --- /dev/null +++ b/packages/canon/src/components/Box/styles.css @@ -0,0 +1,4 @@ +.canon-box { + font-family: 'var(--canon-font-regular)'; + color: 'var(--canon-text-primary)'; +} From a6d10b289232150188b4f0b287e6f809b5781e89 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Dec 2024 13:46:59 +0000 Subject: [PATCH 4/5] Rename Box Signed-off-by: Charles de Dreuille --- packages/canon/src/components/Box/Box.tsx | 2 +- packages/canon/src/components/Box/styles.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx index d142b3d841..ecf138f1ce 100644 --- a/packages/canon/src/components/Box/Box.tsx +++ b/packages/canon/src/components/Box/Box.tsx @@ -26,7 +26,7 @@ export const Box = forwardRef((props, ref) => { const sprinklesClassName = boxSprinkles(restProps); // Combine the base class name, the sprinkles class name, and any additional class names - const classNames = ['canon-box', sprinklesClassName, className] + const classNames = ['box', sprinklesClassName, className] .filter(Boolean) .join(' '); diff --git a/packages/canon/src/components/Box/styles.css b/packages/canon/src/components/Box/styles.css index a90ce578cd..75fd0dd493 100644 --- a/packages/canon/src/components/Box/styles.css +++ b/packages/canon/src/components/Box/styles.css @@ -1,4 +1,4 @@ -.canon-box { +.box { font-family: 'var(--canon-font-regular)'; color: 'var(--canon-text-primary)'; } From 4368a953ed7f85f107c3665ac7808e715f85db90 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Dec 2024 13:53:47 +0000 Subject: [PATCH 5/5] Remove Vanilla Extract Signed-off-by: Charles de Dreuille --- packages/canon/package.json | 3 --- .../canon/src/components/Container/Docs.mdx | 8 ++----- packages/canon/src/components/Grid/Docs.mdx | 8 ++----- packages/canon/src/components/Inline/Docs.mdx | 8 ++----- packages/canon/src/components/Stack/Docs.mdx | 8 ++----- yarn.lock | 23 +------------------ 6 files changed, 9 insertions(+), 49 deletions(-) diff --git a/packages/canon/package.json b/packages/canon/package.json index c8a8f79a6f..7bfc717b74 100644 --- a/packages/canon/package.json +++ b/packages/canon/package.json @@ -39,9 +39,6 @@ "dependencies": { "@base_ui/react": "^1.0.0-alpha.3", "@remixicon/react": "^4.5.0", - "@vanilla-extract/css": "^1.16.0", - "@vanilla-extract/dynamic": "^2.1.2", - "@vanilla-extract/recipes": "^0.5.5", "@vanilla-extract/sprinkles": "^1.6.3" }, "devDependencies": { diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx index a65d7b1618..d4dcf694da 100644 --- a/packages/canon/src/components/Container/Docs.mdx +++ b/packages/canon/src/components/Container/Docs.mdx @@ -1,10 +1,6 @@ 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/PropsTable'; +import { Title, Text, PropsTable, getProps } from '../../../docs/components'; import { spacingProperties } from '../../layout/sprinkles.css'; import { containerProperties } from './sprinkles.css'; @@ -32,7 +28,7 @@ import { containerProperties } from './sprinkles.css'; @@ -74,7 +70,7 @@ export default () => ( The grid component also accepts all the spacing props from the Box component. - + Grid Item diff --git a/packages/canon/src/components/Inline/Docs.mdx b/packages/canon/src/components/Inline/Docs.mdx index 9f77158496..9850dedf7a 100644 --- a/packages/canon/src/components/Inline/Docs.mdx +++ b/packages/canon/src/components/Inline/Docs.mdx @@ -1,10 +1,6 @@ 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/PropsTable'; +import { Title, Text, PropsTable, getProps } from '../../../docs/components'; import { spacingProperties } from '../../layout/sprinkles.css'; import { inlineProperties } from './sprinkles.css'; @@ -60,7 +56,7 @@ import { inlineProperties } from './sprinkles.css'; The grid component also accepts all the spacing props from the Box component. - + Examples diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx index 0205cb8aba..d5bdb0fc82 100644 --- a/packages/canon/src/components/Stack/Docs.mdx +++ b/packages/canon/src/components/Stack/Docs.mdx @@ -1,10 +1,6 @@ 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/PropsTable'; +import { Title, Text, PropsTable, getProps } from '../../../docs/components'; import { spacingProperties } from '../../layout/sprinkles.css'; @@ -55,7 +51,7 @@ import { spacingProperties } from '../../layout/sprinkles.css'; The grid component also accepts all the spacing props from the Box component. - + Common questions diff --git a/yarn.lock b/yarn.lock index 6bae43f540..94eb5f0748 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3842,9 +3842,6 @@ __metadata: "@testing-library/jest-dom": ^6.0.0 "@types/react": ^18.0.0 "@types/react-dom": ^18.0.0 - "@vanilla-extract/css": ^1.16.0 - "@vanilla-extract/dynamic": ^2.1.2 - "@vanilla-extract/recipes": ^0.5.5 "@vanilla-extract/rollup-plugin": ^1.3.10 "@vanilla-extract/sprinkles": ^1.6.3 "@vanilla-extract/webpack-plugin": ^2.3.14 @@ -21128,7 +21125,7 @@ __metadata: languageName: node linkType: hard -"@vanilla-extract/css@npm:^1.16.0, @vanilla-extract/css@npm:^1.16.1": +"@vanilla-extract/css@npm:^1.16.1": version: 1.16.1 resolution: "@vanilla-extract/css@npm:1.16.1" dependencies: @@ -21148,15 +21145,6 @@ __metadata: languageName: node linkType: hard -"@vanilla-extract/dynamic@npm:^2.1.2": - version: 2.1.2 - resolution: "@vanilla-extract/dynamic@npm:2.1.2" - dependencies: - "@vanilla-extract/private": ^1.0.6 - checksum: ec6ec9b02c7ec8a9d60aebf63225fd3f930c06ad824321f03f683f1948eb6d4e554d934303da140b3230b4af2fa15bab494c6da2a3b9a172e4118c245b4f942a - languageName: node - linkType: hard - "@vanilla-extract/integration@npm:^7.1.11": version: 7.1.11 resolution: "@vanilla-extract/integration@npm:7.1.11" @@ -21184,15 +21172,6 @@ __metadata: languageName: node linkType: hard -"@vanilla-extract/recipes@npm:^0.5.5": - version: 0.5.5 - resolution: "@vanilla-extract/recipes@npm:0.5.5" - peerDependencies: - "@vanilla-extract/css": ^1.0.0 - checksum: 8d2b4f8163369424226ec9a47e754002b8a095bcf86c1a60a91b2183f59508519bd31ed41baefc950ad7ca225d75b3184c3b84d3c741c5c60d91618dd70452aa - languageName: node - linkType: hard - "@vanilla-extract/rollup-plugin@npm:^1.3.10": version: 1.3.11 resolution: "@vanilla-extract/rollup-plugin@npm:1.3.11"