diff --git a/packages/canon/.storybook/main.ts b/packages/canon/.storybook/main.ts index cf7921268e..8bf24a7e23 100644 --- a/packages/canon/.storybook/main.ts +++ b/packages/canon/.storybook/main.ts @@ -9,11 +9,7 @@ function getAbsolutePath(value: string): any { return dirname(require.resolve(join(value, 'package.json'))); } const config: StorybookConfig = { - stories: [ - '../docs/**/*.mdx', - '../src/components/**/*.mdx', - '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)', - ], + stories: ['../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'], staticDirs: ['../static'], addons: [ getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx index 1ac53acd86..867461818b 100644 --- a/packages/canon/.storybook/preview.tsx +++ b/packages/canon/.storybook/preview.tsx @@ -2,9 +2,6 @@ import React from 'react'; import type { Preview, ReactRenderer } from '@storybook/react'; import { withThemeByDataAttribute } from '@storybook/addon-themes'; -// Storybook specific styles -import '../docs/components/styles.css'; - // Canon specific styles import '../src/css/core.css'; import '../src/css/components.css'; diff --git a/packages/canon/docs/Home.mdx b/packages/canon/docs/Home.mdx deleted file mode 100644 index 5b85ab15ad..0000000000 --- a/packages/canon/docs/Home.mdx +++ /dev/null @@ -1,91 +0,0 @@ -import { Unstyled } from '@storybook/blocks'; -import { - Columns, - Text, - ComponentStatus, - Banner, - Title, - Roadmap, -} from './components'; -import { list } from './components/Roadmap/list'; - - - - - - - Welcome to the Canon, the new design library for Backstage plugins. This - project is still under active development but we will make sure to document - the API as we go. We are aiming to improve the general UI of Backstage and - plugins across Backstage. This new library will take time to build but we are - building it incrementally with not conflict with the existing theming system. - - - - This library is still under heavy construction. Please be aware that the API - will change until we reach a stable release. - - - - Component Status - - - We are still in the process of documenting the API and building the - components. You can use the statuses below to see what is ready and what is - coming soon. If there is a component missing that you need, please let us know - by opening an issue on GitHub. - - - - - - - - - - - - - - - - - - - - - - Roadmap - - - - - diff --git a/packages/canon/docs/Iconography.mdx b/packages/canon/docs/Iconography.mdx deleted file mode 100644 index 83d181af12..0000000000 --- a/packages/canon/docs/Iconography.mdx +++ /dev/null @@ -1,22 +0,0 @@ -import { Unstyled, Source, Meta } from '@storybook/blocks'; -import { Title, Text, IconLibrary } from './components'; - - - - - -Iconography - - - All our default icons are provided by [Remix Icon](https://remixicon.com/). We - don't import all icons to reduce the bundle size but we cherry pick a nice - selection for you to use in your application. The list of names is set down - below. To use an icon, you can use the `Icon` component and pass the name of - the icon you want to use. - - -`} language="tsx" dark /> - - - - diff --git a/packages/canon/docs/Layout.mdx b/packages/canon/docs/Layout.mdx deleted file mode 100644 index 9145f71aed..0000000000 --- a/packages/canon/docs/Layout.mdx +++ /dev/null @@ -1,54 +0,0 @@ -import { Unstyled, Source, Meta } from '@storybook/blocks'; -import { Title, Text, LayoutComponents } from './components'; -import * as Table from './components/Table'; - - - - - -Layout - - Canon is made for extensibility. We built this library to make it easy for any - Backstage plugin creator to be able to build their ideas at speed ensuring - consistency across the rest of your ecosystem. Each component is designed to - be editable to match your need but sometimes you want to have more control - over the layout of your page. To help you with that, we created a set of - layout components that you can use to build your own layouts. All of these - components are built to extend on our theming system, making it easy for you - to build your own layouts. Sometimes these components are not enough so we - created a set of helpers to be used with any CSS-in-JS library. - - -Layout Components - - - We built a couple of layout components to help you build responsive elements - that will be consistent with the rest of your Backstage instance. These - components are opinionated and use TypeScript to ensure that the props you - provide are the ones coming from the theme. - - - - Hello World - - Project 1 - Project 2 - -`} - language="tsx" - dark -/> - - - -Layout Helpers - - - Sometimes you want to use global tokens dynamically outside of React - components. To help you with that we would like to provide a set of helpers - that you can use in your code. These helpers are not available just yet but we - are working on it. - - - diff --git a/packages/canon/docs/Responsive.mdx b/packages/canon/docs/Responsive.mdx deleted file mode 100644 index 85292ee555..0000000000 --- a/packages/canon/docs/Responsive.mdx +++ /dev/null @@ -1,150 +0,0 @@ -import { Unstyled, Meta, Canvas, Source } from '@storybook/blocks'; -import { - Columns, - Text, - ComponentStatus, - Banner, - Title, - Roadmap, -} from './components'; -import { list } from './components/Roadmap/list'; -import * as HeadingStories from '../src/components/Heading/Heading.stories'; -import * as TextStories from '../src/components/Text/Text.stories'; -import * as Table from './components/Table'; -import { Chip } from './components/Chip'; - - - - - -Responsive - - Canon is built on a responsive design system, meaning that the components are - designed to adapt to different screen sizes. By default we offer a set of - breakpoints that you can use to create responsive components. - - - - Breakpoints - - - - - - Breakpoint prefix - Minimum width - CSS - - - - - - xs - - - 0px - - - {`{ ... }`} - - - - - sm - - - 640px - - - {`@media (min-width: 640px) { ... }`} - - - - - md - - - 768px - - - {`@media (min-width: 768px) { ... }`} - - - - - lg - - - 1024px - - - {`@media (min-width: 1024px) { ... }`} - - - - - xl - - - 1280px - - - {`@media (min-width: 1280px) { ... }`} - - - - - 2xl - - - 1536px - - - {`@media (min-width: 1536px) { ... }`} - - - - - -Responsive components - - - Canon components are designed to be responsive, meaning that they will adapt - to different screen sizes. Not every component is responsive, but the ones - that are will have a prop to control the responsive behavior. - - - - The behaviour is the same for each component. For each prop, instead of adding - the value, you add an object with the value and the breakpoint prefix. - - -Button - -// Responsive value - -`} dark /> - -How to update breakpoints - - - The set of keys are not to be changed, but you can update the minimum width of - each breakpoint in the theme provider. - - -`} - dark -/> - - diff --git a/packages/canon/docs/Theme.mdx b/packages/canon/docs/Theme.mdx deleted file mode 100644 index 1ea7c5c4c6..0000000000 --- a/packages/canon/docs/Theme.mdx +++ /dev/null @@ -1,231 +0,0 @@ -import { Unstyled, Source, Meta } from '@storybook/blocks'; -import { Title, Text, Chip } from './components'; -import * as Table from './components/Table'; - -{' '} - - - -Theming - - Backstage ships with a default theme with a light and dark mode variant. The - themes are provided as a part of the `@backstage/canon` package, which also - includes utilities for customizing the default theme, or creating completely - new themes. - - -Light & Dark modes - - By default we are supporting both light and dark modes. Each user can opt to - choose what theme they want to use or to use their system decide what theme to - use. If you want to create your own theme, you will have to set both light and - dark themes following the instructions below. If you only set one of them, the - other mode will fallback to the default theme. - - -How to create your own theme - - To create your own theme, you will have to define the variables below. To do - that, create a theme.css file and import it in your application. Here's an - example below on how to set your light and dark mode. - - - -Colors - - We provide a set of generic colours tokens that we use across Canon. By - changing these colours you can easily change the look and feel of your - application to match your brand. - - - - - Prop - Description - - - - - - --canon-accent - - The accent color for the theme. - - - - --canon-bg - - The background color for the theme. - - - - --canon-surface-1 - - The first surface color for the theme. - - - - --canon-surface-2 - - The second surface color for the theme. - - - - --canon-outline - - The outline color for the theme. - - - - --canon-outline-focus - - The outline focus color for the theme. - - - - --canon-text-primary - - The primary text color for the theme. - - - - --canon-text-secondary - - The secondary text color for the theme. - - - - -Typography - - We have two fonts that we use across Canon. The first one is the sans-serif - font that we use for the body of the application. The second one is the - monospace font that we use for code blocks and tables. - - - - - - Prop - Description - - - - - - --canon-font-regular - - The sans-serif font for the theme. - - - - --canon-font-mono - - The monospace font for the theme. - - - - -Spacing - - Our default spacing system is made to work in most scenarios. We have 7 scale - values from `xxs` to `xxl`. We use the values on padding and margin in our - layout components mostly. If you prefer to use a different spacing system, you - can do that by changing the values below. - - - - - - Prop - Description - - - - - - --canon-space-unit - - - The base unit for the spacing system. Default value is `1em` - - - - - --canon-space-xxs - - Default value is `0.25 x space unit` - - - - --canon-space-xs - - Default value is `0.5 x space unit` - - - - --canon-space-sm - - Default value is `0.75 x space unit` - - - - --canon-space-md - - Default value is `1.25 x space unit` - - - - --canon-space-lg - - Default value is `2 x space unit` - - - - --canon-space-xl - - Default value is `3.25 x space unit` - - - - --canon-space-xxl - - Default value is `5.25 x space unit` - - - - - diff --git a/packages/canon/docs/Typography.mdx b/packages/canon/docs/Typography.mdx deleted file mode 100644 index 802b9881be..0000000000 --- a/packages/canon/docs/Typography.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import { Unstyled, Meta, Canvas } from '@storybook/blocks'; -import { - Columns, - Text, - ComponentStatus, - Banner, - Title, - Roadmap, -} from './components'; -import { list } from './components/Roadmap/list'; -import * as HeadingStories from '../src/components/Heading/Heading.stories'; -import * as TextStories from '../src/components/Text/Text.stories'; - - - - - -Typography - - Canon offers a suite of typography components designed to seamlessly align - with the rest of your Backstage instance. While you can customize their - appearance to match your brand, the underlying API remains consistent and - unchanged. Each component is built on a responsive structure, allowing you to - define different typography values for various breakpoints. - - -Heading - - Headings are used to structure the content of your page. They are used to - create a hierarchy of information and to make the content more readable. The - best way to use add these headings to your page is to import the [Heading - component](?path=/docs/components-heading--docs). - - - - -Text - - Canon provides four distinct text variants, each offering different font sizes - carefully designed to cover the majority of use cases. These variants are - versatile and can be paired with regular and bold of font weights. You can use - the [Text component](?path=/docs/components-text--docs) to add text to your - page. - - - - - diff --git a/packages/canon/docs/components/Banner/Banner.tsx b/packages/canon/docs/components/Banner/Banner.tsx deleted file mode 100644 index 3199e65bc0..0000000000 --- a/packages/canon/docs/components/Banner/Banner.tsx +++ /dev/null @@ -1,41 +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'; - -export const Banner = ({ - children, - variant = 'info', -}: { - children: React.ReactNode; - variant?: 'info' | 'warning'; -}) => { - return ( -
-
- - - -
- {children} -
- ); -}; diff --git a/packages/canon/docs/components/Banner/index.ts b/packages/canon/docs/components/Banner/index.ts deleted file mode 100644 index 31f4aa88b0..0000000000 --- a/packages/canon/docs/components/Banner/index.ts +++ /dev/null @@ -1,16 +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. - */ -export { Banner } from './Banner'; diff --git a/packages/canon/docs/components/Banner/styles.css b/packages/canon/docs/components/Banner/styles.css deleted file mode 100644 index d20e14ce0b..0000000000 --- a/packages/canon/docs/components/Banner/styles.css +++ /dev/null @@ -1,37 +0,0 @@ -.banner { - display: flex; - align-items: center; - font-size: 16px; - line-height: 28px; - padding: 16px; - border-radius: 6px; - margin-bottom: 16px; - border: 1px solid #e0e0e0; - - & > 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/Chip.tsx b/packages/canon/docs/components/Chip/Chip.tsx deleted file mode 100644 index e6e1d1b1c4..0000000000 --- a/packages/canon/docs/components/Chip/Chip.tsx +++ /dev/null @@ -1,27 +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'; - -export const Chip = ({ - children, - head = false, -}: { - children: React.ReactNode; - head?: boolean; -}) => { - return {children}; -}; diff --git a/packages/canon/docs/components/Chip/index.ts b/packages/canon/docs/components/Chip/index.ts deleted file mode 100644 index ff9e4794c5..0000000000 --- a/packages/canon/docs/components/Chip/index.ts +++ /dev/null @@ -1,16 +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. - */ -export { Chip } from './Chip'; diff --git a/packages/canon/docs/components/Chip/styles.css b/packages/canon/docs/components/Chip/styles.css deleted file mode 100644 index 95cf7cef34..0000000000 --- a/packages/canon/docs/components/Chip/styles.css +++ /dev/null @@ -1,33 +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. - */ - -.chip { - display: inline-flex; - align-items: center; - font-family: monospace; - font-size: 13px; - border-radius: 6px; - padding: 0px 8px; - height: 24px; - margin-right: 4px; - background-color: #f0f0f0; - color: #5d5d5d; - - &.head { - background-color: #eaf2fd; - color: #2563eb; - } -} diff --git a/packages/canon/docs/components/Columns/Columns.tsx b/packages/canon/docs/components/Columns/Columns.tsx deleted file mode 100644 index 115ec50010..0000000000 --- a/packages/canon/docs/components/Columns/Columns.tsx +++ /dev/null @@ -1,31 +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'; - -export const Columns = ({ - children, - style, -}: { - children: React.ReactNode; - style?: React.CSSProperties; -}) => { - return ( -
- {children} -
- ); -}; diff --git a/packages/canon/docs/components/Columns/index.ts b/packages/canon/docs/components/Columns/index.ts deleted file mode 100644 index 05de0850be..0000000000 --- a/packages/canon/docs/components/Columns/index.ts +++ /dev/null @@ -1,16 +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. - */ -export { Columns } from './Columns'; diff --git a/packages/canon/docs/components/Columns/styles.css b/packages/canon/docs/components/Columns/styles.css deleted file mode 100644 index c34acfc406..0000000000 --- a/packages/canon/docs/components/Columns/styles.css +++ /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. - */ - -.columns { - display: grid; - grid-template-columns: repeat(3, 1fr); - row-gap: 20px; - column-gap: 80px; -} diff --git a/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx b/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx deleted file mode 100644 index 0159e27b32..0000000000 --- a/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx +++ /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 React from 'react'; - -export const ComponentStatus = ({ - name, - status = 'notStarted', - style, - link, -}: { - name: string; - status: 'notStarted' | 'inProgress' | 'alpha' | 'beta' | 'stable'; - style?: React.CSSProperties; - link?: string; -}) => { - return ( -
- {link ? ( - - {name} - - ) : ( - {name} - )} - - {status === 'notStarted' && 'Not Started'} - {status === 'inProgress' && 'In Progress'} - {status === 'alpha' && 'Alpha'} - {status === 'beta' && 'Beta'} - {status === 'stable' && 'Stable'} - -
- ); -}; diff --git a/packages/canon/docs/components/ComponentStatus/index.ts b/packages/canon/docs/components/ComponentStatus/index.ts deleted file mode 100644 index 238c001289..0000000000 --- a/packages/canon/docs/components/ComponentStatus/index.ts +++ /dev/null @@ -1,16 +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. - */ -export { ComponentStatus } from './ComponentStatus'; diff --git a/packages/canon/docs/components/ComponentStatus/styles.css b/packages/canon/docs/components/ComponentStatus/styles.css deleted file mode 100644 index 6ef02ccf3f..0000000000 --- a/packages/canon/docs/components/ComponentStatus/styles.css +++ /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. - */ - -.component-status { - display: flex; - justify-content: space-between; - - & .title { - color: #3b59ff; - font-size: 16px; - font-weight: 400; - text-decoration: none; - } - - & .pill { - 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/IconLibrary.tsx b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx deleted file mode 100644 index 1d517f7a98..0000000000 --- a/packages/canon/docs/components/IconLibrary/IconLibrary.tsx +++ /dev/null @@ -1,37 +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 { Icon } from '@backstage/canon'; -import type { IconNames } from '@backstage/canon'; -import { icons } from '../../../src/components/Icon/icons'; -import { Text } from '../Text/Text'; - -export const IconLibrary = () => { - const iconsList = Object.keys(icons); - - return ( -
- {iconsList.map(icon => ( -
-
- -
- {icon} -
- ))} -
- ); -}; diff --git a/packages/canon/docs/components/IconLibrary/index.ts b/packages/canon/docs/components/IconLibrary/index.ts deleted file mode 100644 index 071c80db85..0000000000 --- a/packages/canon/docs/components/IconLibrary/index.ts +++ /dev/null @@ -1,16 +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. - */ -export { IconLibrary } from './IconLibrary'; diff --git a/packages/canon/docs/components/IconLibrary/styles.css b/packages/canon/docs/components/IconLibrary/styles.css deleted file mode 100644 index 1a6f63ca79..0000000000 --- a/packages/canon/docs/components/IconLibrary/styles.css +++ /dev/null @@ -1,22 +0,0 @@ -.icon-library { - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: 1rem; -} - -.icon-library-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; -} - -.icon-library-item-icon { - display: flex; - width: 100%; - justify-content: center; - align-items: center; - height: 80px; - border: 1px solid #d3d3d3; - border-radius: 0.5rem; -} diff --git a/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx b/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx deleted file mode 100644 index 56f389a389..0000000000 --- a/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx +++ /dev/null @@ -1,64 +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 { 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 ( -
-
- - - -
Box
-
The most basic layout component
-
-
- - - -
Stack
-
Arrange your components vertically
-
-
- - - -
Grid
-
Arrange your components in a grid
-
-
- - - -
Inline
-
Arrange your components in a row
-
-
- - - -
Container
-
A container for your components
-
-
- ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/index.ts b/packages/canon/docs/components/LayoutComponents/index.ts deleted file mode 100644 index 55cc9f25ef..0000000000 --- a/packages/canon/docs/components/LayoutComponents/index.ts +++ /dev/null @@ -1,16 +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. - */ -export { LayoutComponents } from './LayoutComponents'; diff --git a/packages/canon/docs/components/LayoutComponents/styles.css b/packages/canon/docs/components/LayoutComponents/styles.css deleted file mode 100644 index 9319121224..0000000000 --- a/packages/canon/docs/components/LayoutComponents/styles.css +++ /dev/null @@ -1,58 +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. - */ - -.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; - transition: color 0.2s ease-in-out; - margin-bottom: 0.25rem; - } - - & .description { - font-size: 16px; - color: #9e9e9e; - } -} diff --git a/packages/canon/docs/components/LayoutComponents/svgs/box.tsx b/packages/canon/docs/components/LayoutComponents/svgs/box.tsx deleted file mode 100644 index 1749b38c6f..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/box.tsx +++ /dev/null @@ -1,54 +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'; - -export const BoxSvg = () => { - return ( - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/svgs/container.tsx b/packages/canon/docs/components/LayoutComponents/svgs/container.tsx deleted file mode 100644 index 62fe4ce266..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/container.tsx +++ /dev/null @@ -1,373 +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'; - -export const ContainerSvg = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx b/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx deleted file mode 100644 index 5527d1f3e2..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx +++ /dev/null @@ -1,91 +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'; - -export const GridSvg = () => { - return ( - - - - - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx b/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx deleted file mode 100644 index fadb9bfc1b..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx +++ /dev/null @@ -1,92 +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'; - -export const InlineSvg = () => { - return ( - - - - - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx b/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx deleted file mode 100644 index aeda998d2e..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx +++ /dev/null @@ -1,82 +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'; - -export const StackSvg = () => { - return ( - - - - - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/PropsTable/PropsTable.tsx b/packages/canon/docs/components/PropsTable/PropsTable.tsx deleted file mode 100644 index a3dc9e271c..0000000000 --- a/packages/canon/docs/components/PropsTable/PropsTable.tsx +++ /dev/null @@ -1,57 +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 '..'; -import { Chip } from '..'; - -// Modify the PropsTable component to accept a generic type -export const PropsTable = >({ - data, -}: { - data: T; -}) => { - return ( - - - - Prop - Type - Responsive - - - - {Object.keys(data).map(n => ( - - - {n} - - - {Array.isArray(data[n].type) ? ( - data[n].type.map((t: any) => {t}) - ) : ( - {data[n].type} - )} - - - {data[n].responsive ? 'Yes' : 'No'} - - - ))} - - - ); -}; diff --git a/packages/canon/docs/components/PropsTable/getProps.ts b/packages/canon/docs/components/PropsTable/getProps.ts deleted file mode 100644 index 5773eaeb27..0000000000 --- a/packages/canon/docs/components/PropsTable/getProps.ts +++ /dev/null @@ -1,43 +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. - */ -export function getProps(styles: Record) { - return Object.keys(styles).reduce( - (acc: Record, n) => { - const style = styles[n]; - - let values: string[] = []; - - if (style.values) { - // If values exist, use them - values = Object.keys(style.values); - } else if (style.mappings && style.mappings.length > 0) { - // If mappings exist, use the first mapping's values - const firstMapping = style.mappings[0]; - values = Object.keys(styles[firstMapping].values); - } else { - // Default to an empty array if neither values nor mappings exist - values = []; - } - - acc[n] = { - type: values, - responsive: true, - }; - return acc; - }, - {} as Record, - ); -} diff --git a/packages/canon/docs/components/PropsTable/index.ts b/packages/canon/docs/components/PropsTable/index.ts deleted file mode 100644 index 181933f0f8..0000000000 --- a/packages/canon/docs/components/PropsTable/index.ts +++ /dev/null @@ -1,17 +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. - */ -export { PropsTable } from './PropsTable'; -export { getProps } from './getProps'; diff --git a/packages/canon/docs/components/Roadmap/Roadmap.tsx b/packages/canon/docs/components/Roadmap/Roadmap.tsx deleted file mode 100644 index 2177ea558f..0000000000 --- a/packages/canon/docs/components/Roadmap/Roadmap.tsx +++ /dev/null @@ -1,53 +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 { RoadmapItem } from './list'; - -export const Roadmap = ({ list }: { list: RoadmapItem[] }) => { - const orderList = ['inProgress', 'notStarted', 'completed']; - return ( -
- {list - .sort( - (a, b) => orderList.indexOf(a.status) - orderList.indexOf(b.status), - ) - .map(Item)} -
- ); -}; - -const Item = ({ - title, - status = 'notStarted', -}: { - title: string; - status: 'notStarted' | 'inProgress' | 'inReview' | 'completed'; -}) => { - return ( -
-
-
-
{title}
-
- - {status === 'notStarted' && 'Not Started'} - {status === 'inProgress' && 'In Progress'} - {status === 'inReview' && 'Ready for Review'} - {status === 'completed' && 'Completed'} - -
- ); -}; diff --git a/packages/canon/docs/components/Roadmap/index.ts b/packages/canon/docs/components/Roadmap/index.ts deleted file mode 100644 index ac51dfa1ed..0000000000 --- a/packages/canon/docs/components/Roadmap/index.ts +++ /dev/null @@ -1,16 +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. - */ -export { Roadmap } from './Roadmap'; diff --git a/packages/canon/docs/components/Roadmap/list.ts b/packages/canon/docs/components/Roadmap/list.ts deleted file mode 100644 index d5f436281a..0000000000 --- a/packages/canon/docs/components/Roadmap/list.ts +++ /dev/null @@ -1,62 +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. - */ -export type RoadmapItem = { - title: string; - status: 'notStarted' | 'inProgress' | 'inReview' | 'completed'; -}; - -export const list: RoadmapItem[] = [ - { - title: 'Remove Vanilla Extract and use pure CSS instead', - status: 'inProgress', - }, - { - title: 'Add collapsing across breakpoints for the Inline component', - status: 'notStarted', - }, - { - title: 'Add reversing the order for the Inline component', - status: 'notStarted', - }, - { - title: 'Set up Storybook', - status: 'completed', - }, - { - title: 'Set up iconography', - status: 'completed', - }, - { - title: 'Set up global tokens', - status: 'inProgress', - }, - { - title: 'Set up theming system', - status: 'inProgress', - }, - { - title: 'Create first pass at box component', - status: 'completed', - }, - { - title: 'Create first pass at stack component', - status: 'completed', - }, - { - title: 'Create first pass at inline component', - status: 'completed', - }, -]; diff --git a/packages/canon/docs/components/Roadmap/styles.css b/packages/canon/docs/components/Roadmap/styles.css deleted file mode 100644 index 63f32312e7..0000000000 --- a/packages/canon/docs/components/Roadmap/styles.css +++ /dev/null @@ -1,100 +0,0 @@ -.roadmap { - display: flex; - flex-direction: column; -} - -.roadmap .roadmap-item { - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid #e0e0e0; - padding: 8px 0px; -} - -.roadmap .roadmap-item .left { - display: flex; - align-items: center; - padding-left: 12px; - gap: 12px; -} - -.roadmap .roadmap-item .dot { - width: 8px; - height: 8px; - border-radius: 50%; - background-color: #e0e0e0; -} - -.roadmap .roadmap-item.notStarted { - color: #000; -} - -.roadmap .roadmap-item.inProgress { - color: #000; -} - -.roadmap .roadmap-item.inReview { - color: #000; -} - -.roadmap .roadmap-item.completed .title { - color: #a2a2a2; - text-decoration: line-through; -} - -.roadmap .roadmap-item.notStarted .dot { - background-color: #d1d1d1; -} - -.roadmap .roadmap-item.inProgress .dot { - background-color: #ffd000; -} - -.roadmap .roadmap-item.inReview .dot { - background-color: #4ed14a; -} - -.roadmap .roadmap-item.completed .dot { - background-color: #4ed14a; -} - -.roadmap .roadmap-item .title { - font-size: 16px; -} - -.roadmap .roadmap-item .pill { - display: inline-flex; - align-items: center; - height: 24px; - padding: 0px 8px; - border-radius: 40px; - font-size: 12px; - font-weight: 600; - margin-left: 8px; - border-style: solid; - border-width: 1px; -} - -.roadmap .roadmap-item.notStarted .pill { - background-color: #f2f2f2; - border-color: #cdcdcd; - color: #888888; -} - -.roadmap .roadmap-item.inProgress .pill { - background-color: #fff2b9; - border-color: #ffd000; - color: #d79927; -} - -.roadmap .roadmap-item.inReview .pill { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; -} - -.roadmap .roadmap-item.completed .pill { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; -} diff --git a/packages/canon/docs/components/Table/Table.tsx b/packages/canon/docs/components/Table/Table.tsx deleted file mode 100644 index 74a26a89af..0000000000 --- a/packages/canon/docs/components/Table/Table.tsx +++ /dev/null @@ -1,49 +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'; - -export const Root = ({ children }: { children: React.ReactNode }) => { - return ( -
- {children}
-
- ); -}; - -export const Header = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const Body = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const HeaderRow = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const HeaderCell = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const Row = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const Cell = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; diff --git a/packages/canon/docs/components/Table/index.ts b/packages/canon/docs/components/Table/index.ts deleted file mode 100644 index 7419aa83a8..0000000000 --- a/packages/canon/docs/components/Table/index.ts +++ /dev/null @@ -1,16 +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. - */ -export { Root, Header, Body, Row, Cell, HeaderRow, HeaderCell } from './Table'; diff --git a/packages/canon/docs/components/Table/styles.css b/packages/canon/docs/components/Table/styles.css deleted file mode 100644 index ed56774a85..0000000000 --- a/packages/canon/docs/components/Table/styles.css +++ /dev/null @@ -1,72 +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. - */ - -.sb-table-wrapper { - border: 1px solid #e7e7e7; - border-radius: 4px; - overflow: hidden; - - & .sb-table { - width: 100%; - margin: 0 !important; - padding: 0 !important; - border-spacing: 0px; - border-collapse: collapse; - } - - & .sb-table-cell { - padding: 12px 16px !important; - border: none !important; - text-align: left; - background-color: white !important; - font-size: 16px; - - & p { - margin: 0; - } - } - - & .sb-table-header-cell { - background-color: #f5f5f5 !important; - border-bottom: 1px solid #e7e7e7 !important; - font-weight: 500; - font-size: 14px; - } - - & .sb-table-row { - border: none; - border-bottom: 1px solid #e7e7e7; - &:last-child { - border-bottom: none; - } - } - - & .sb-table-chip { - display: inline-block; - font-size: 14px !important; - border: 1px solid #e7e7e7; - border-radius: 6px; - padding: 0px 6px; - height: 24px; - } - - & .sb-table-type { - display: flex; - flex-wrap: wrap; - flex-direction: row; - gap: 8px; - } -} diff --git a/packages/canon/docs/components/Text/Text.tsx b/packages/canon/docs/components/Text/Text.tsx deleted file mode 100644 index 90804b7da7..0000000000 --- a/packages/canon/docs/components/Text/Text.tsx +++ /dev/null @@ -1,31 +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'; - -export const Text = ({ - children, - style, -}: { - children: React.ReactNode; - style?: React.CSSProperties; -}) => { - return ( -
- {children} -
- ); -}; diff --git a/packages/canon/docs/components/Text/index.ts b/packages/canon/docs/components/Text/index.ts deleted file mode 100644 index 873fca2c76..0000000000 --- a/packages/canon/docs/components/Text/index.ts +++ /dev/null @@ -1,16 +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. - */ -export { Text } from './Text'; diff --git a/packages/canon/docs/components/Text/styles.css b/packages/canon/docs/components/Text/styles.css deleted file mode 100644 index b1bc40a1ac..0000000000 --- a/packages/canon/docs/components/Text/styles.css +++ /dev/null @@ -1,43 +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. - */ - -.sb-text { - font-size: 16px; - line-height: 28px; - margin: 0; - margin-bottom: 16px; - color: #4f4f4f; - - & p { - font-size: 16px; - line-height: 28px; - margin: 0; - } - - & code { - font-size: 13px; - color: #215cff; - background-color: #f1f3fc; - padding: 4px 4px; - border-radius: 4px; - } - - & a { - color: #215cff; - text-decoration: none; - border-bottom: 1px solid #215cff; - } -} diff --git a/packages/canon/docs/components/Title/Title.tsx b/packages/canon/docs/components/Title/Title.tsx deleted file mode 100644 index 59fefad8f9..0000000000 --- a/packages/canon/docs/components/Title/Title.tsx +++ /dev/null @@ -1,38 +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'; - -export const Title = ({ - children, - style, - type = 'h1', -}: { - children: React.ReactNode; - style?: React.CSSProperties; - type?: 'h1' | 'h2' | 'h3'; -}) => { - let Component = 'h1'; - if (type === 'h1') Component = 'h1'; - if (type === 'h2') Component = 'h2'; - if (type === 'h3') Component = 'h3'; - - return React.createElement(Component, { - className: `sb-title ${type}`, - style, - children, - }); -}; diff --git a/packages/canon/docs/components/Title/index.ts b/packages/canon/docs/components/Title/index.ts deleted file mode 100644 index 998dc81882..0000000000 --- a/packages/canon/docs/components/Title/index.ts +++ /dev/null @@ -1,16 +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. - */ -export { Title } from './Title'; diff --git a/packages/canon/docs/components/Title/styles.css b/packages/canon/docs/components/Title/styles.css deleted file mode 100644 index 61e99e20b3..0000000000 --- a/packages/canon/docs/components/Title/styles.css +++ /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. - */ - -.sb-title { - margin: 0; - font-weight: 500; - border: none; - - &.h1 { - font-size: 36px; - line-height: 44px; - margin-bottom: 24px; - 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/index.ts b/packages/canon/docs/components/index.ts deleted file mode 100644 index 0e5ff2e325..0000000000 --- a/packages/canon/docs/components/index.ts +++ /dev/null @@ -1,27 +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. - */ - -export * from './Banner'; -export * from './Chip'; -export * from './Columns'; -export * from './ComponentStatus'; -export * from './IconLibrary'; -export * from './LayoutComponents'; -export * from './PropsTable'; -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 deleted file mode 100644 index 706b1626b3..0000000000 --- a/packages/canon/docs/components/styles.css +++ /dev/null @@ -1,15 +0,0 @@ -.sbdocs-content { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; -} - -@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/docs/spaceProps.ts b/packages/canon/docs/spaceProps.ts deleted file mode 100644 index 3eb6961bc1..0000000000 --- a/packages/canon/docs/spaceProps.ts +++ /dev/null @@ -1,41 +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. - */ - -export const spacePropsList = [ - 'margin', - 'marginBottom', - 'marginLeft', - 'marginRight', - 'marginTop', - 'marginX', - 'marginY', - 'padding', - 'paddingBottom', - 'paddingLeft', - 'paddingRight', - 'paddingTop', - 'paddingX', - 'paddingY', -].reduce( - (acc: { [key: string]: { type: string[]; responsive: boolean } }, prop) => { - acc[prop] = { - type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], - responsive: true, - }; - return acc; - }, - {}, -); diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx deleted file mode 100644 index ee30e17305..0000000000 --- a/packages/canon/src/components/Box/Docs.mdx +++ /dev/null @@ -1,112 +0,0 @@ -import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks'; -import * as BoxStories from './Box.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Box - - Box is the lowest-level component in Canon. We use it internally to build all - of our components. It provides a consistent API for styling and layout. - - -Usage -Hello World! -`} language="tsx" dark /> - -API reference - -Box - - This is the Box component, our lowest-level component. Here are all the - available properties. - - - - - - 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. - - - - - - -Examples -Here are some examples of how you can use the Box component. - -Simple example -A simple example of how to use the Box component. -Hello World`} - language="tsx" - dark -/> - -Responsive - - Most of the values can be defined per breakpoint, making it easy to create - responsive designs. - -Hello World`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx deleted file mode 100644 index ae90b5fd80..0000000000 --- a/packages/canon/src/components/Button/Docs.mdx +++ /dev/null @@ -1,135 +0,0 @@ -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/PropsTable'; - - - - - -Button -A button component that can be used to trigger actions. - - - -Usage -Click me -`} language="tsx" dark /> - - - API reference - - - - -Examples - -Variants -Here's a view when buttons have different variants. - - - - - - - -`} - language="tsx" - dark -/> - -Sizes -Here's a view when buttons have different sizes. - - - - - - -`} - language="tsx" - dark -/> - -With Icons -Here's a view when buttons have icons. - - - - - - - -`} - language="tsx" - dark -/> - -Full width -Here's a view when buttons are full width. - - - - - - - -`} - language="tsx" - dark -/> - -Disabled -Here's a view when buttons are disabled. - - - -Button`} language="tsx" dark /> - -Responsive -Here's a view when buttons are responsive. - - - - - Button -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Checkbox/Docs.mdx b/packages/canon/src/components/Checkbox/Docs.mdx deleted file mode 100644 index 9826708888..0000000000 --- a/packages/canon/src/components/Checkbox/Docs.mdx +++ /dev/null @@ -1,70 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as CheckboxStories from './Checkbox.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable'; - - - - - -Checkbox -A checkbox component that can be used to trigger actions. - - - -Usage - -`} language="tsx" dark /> - - - API reference - - - void", - responsive: false, - }, - disabled: { - type: 'boolean', - responsive: false, - }, - required: { - type: 'boolean', - responsive: false, - }, - name: { - type: 'string', - responsive: false, - }, - value: { - type: 'string', - responsive: false, - }, - className: { - type: 'string', - responsive: false, - }, - style: { - type: 'CSSProperties', - responsive: false, - }, - }} -/> - - diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx deleted file mode 100644 index 05a0600813..0000000000 --- a/packages/canon/src/components/Container/Docs.mdx +++ /dev/null @@ -1,99 +0,0 @@ -import { Meta, Unstyled, Source } from '@storybook/blocks'; -import * as ContainerStories from './Container.stories'; -import { Title, Text, PropsTable, getProps } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Container - - - The container component let you use our default max-width and center the - content on the page. - - -Usage -Hello World! -`} language="tsx" dark /> - - - API reference - - - - -Examples - -Simple -A simple example of how to use the Container component. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Responsive padding & margin - - The Container component also supports responsive values, making it easy to - create responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Grid/Docs.mdx b/packages/canon/src/components/Grid/Docs.mdx deleted file mode 100644 index c1a0237279..0000000000 --- a/packages/canon/src/components/Grid/Docs.mdx +++ /dev/null @@ -1,199 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as GridStories from './Grid.stories'; -import { Title, Text, PropsTable } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Grid - - A layout component that helps to create simple column-based layouts as well as - more complex ones. - - -Usage - - Hello World - -`} language="tsx" dark /> - -API reference - -Grid - - This is the grid container component. It will help to define the number of - columns that will be used in the grid. You can also define the gap between the - columns. All values are responsive. - - - - - - The grid component also accepts all the spacing props from the Box component. - - - - -Grid Item - - If you need more control over the columns, you can use the grid item - component. This will give you access to `rowSpan`, `colSpan`, `start` and - `end`. All values are responsive. This component is optional, you can use any - elements directly if you prefer. - - - - -Examples - -Simple grid -This is a simple grid with 3 columns and a gap of md. - - Hello World - Hello World - Hello World - -`} - language="tsx" - dark -/> - -Complex grid - - You can also use the grid item to create more complex layouts. In this example - the first column will span 1 column and the second column will span 2 columns. - - - - - Hello World - - - Hello World - - -`} - language="tsx" - dark -/> - -Mixing rows and columns - - The grid item component also supports the `rowSpan` prop, which allows you to - span multiple rows within the grid layout. In this example, the first item - will span 2 rows to achieve a dynamic and flexible grid structure. - - - - - Hello World - - - Hello World - - - Hello World - - -`} - language="tsx" - dark -/> - -Responsive - - The grid component also supports responsive values. In this example the grid - will have 1 column on small screens and 3 on large screens, with a gap of xs - on small screens and md on large screens. - - - - Hello World - - - Hello World - - -`} - language="tsx" - dark -/> - -Start and End - - The start and end props can be used to position the item in the grid. - - - - Hello World - - -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Heading/Docs.mdx b/packages/canon/src/components/Heading/Docs.mdx deleted file mode 100644 index dd64bd59b2..0000000000 --- a/packages/canon/src/components/Heading/Docs.mdx +++ /dev/null @@ -1,83 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as HeadingStories from './Heading.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; - - - - - -Heading - -Headings are used to structure the content of your page. - - - -Usage -Hello World! -`} language="tsx" dark /> - - - API reference - - - - -Examples -Here are some examples of how you can use the Heading component. - -All variants - - The `Heading` component has a `variant` prop that can be used to change the - appearance of the heading. - - - - - - Title 1 Lorem ipsum dolor sit amet consectetur... - Title 2 Lorem ipsum dolor sit amet consectetur... - Title 3 Lorem ipsum dolor sit amet consectetur... - Title 4 Lorem ipsum dolor sit amet consectetur... - Title 5 Lorem ipsum dolor sit amet consectetur... - Display Lorem ipsum dolor sit amet consectetur... -`} - language="tsx" - dark -/> - -Responsive - - You can also use the `variant` prop to change the appearance of the text based - on the screen size. - - -Responsive Lorem ipsum dolor sit amet consectetur...`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Icon/Docs.mdx b/packages/canon/src/components/Icon/Docs.mdx deleted file mode 100644 index 41c296424c..0000000000 --- a/packages/canon/src/components/Icon/Docs.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as IconStories from './Icon.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; -import { icons } from './icons'; - - - - - -Icon - -Icons are used to represent an action or a state. - - - -Usage - -`} language="tsx" dark /> - - - API reference - - - - - diff --git a/packages/canon/src/components/Inline/Docs.mdx b/packages/canon/src/components/Inline/Docs.mdx deleted file mode 100644 index 7671122966..0000000000 --- a/packages/canon/src/components/Inline/Docs.mdx +++ /dev/null @@ -1,124 +0,0 @@ -import { Meta, Unstyled, Source } from '@storybook/blocks'; -import * as InlineStories from './Inline.stories'; -import { Title, Text, PropsTable, getProps } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Inline - - - The Inline component is used to create a horizontal layout of elements. By - default it uses flex and flexWrap to make sure that your content always flows - responsively. - - -Usage - - Hello World - Hello World - Hello World - -`} language="tsx" dark /> - - - API reference - - - - - - The grid component also accepts all the spacing props from the Box component. - - - - -Examples - -Simple -A simple example of how to use the Inline component. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Responsive - - The Inline component also supports responsive values, making it easy to create - responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Align - - The Inline component also supports responsive alignment, making it easy to - create responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Align vertically - - The Inline component also supports responsive vertical alignment, making it - easy to create responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx deleted file mode 100644 index 921618f49f..0000000000 --- a/packages/canon/src/components/Stack/Docs.mdx +++ /dev/null @@ -1,126 +0,0 @@ -import { Meta, Unstyled, Source } from '@storybook/blocks'; -import * as StackStories from './Stack.stories'; -import { Title, Text, PropsTable, getProps } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Stack - - - This is the stack container component. It will help to define the number of - columns that will be used in the grid. You can also define the gap between the - columns. All values are responsive. - - -Usage - - Hello World - Hello World - Hello World - -`} language="tsx" dark /> - - - API reference - - - - - - The grid component also accepts all the spacing props from the Box component. - - - - -Common questions - -Can I stack horizontally? - - The Stack component only allows for stacking elements vertically. If you want - to create a column layout, please use the Grid component. - - - - Hello World - Hello World - Hello World - -`} - language="tsx" - dark -/> - -Examples - -Simple - - A simple example of how to use the Stack component with a medium gap. - - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Responsive - - The Stack component also supports responsive values, making it easy to create - responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Align - - The Stack component also supports responsive alignment, making it easy to - create responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Table/Docs.mdx b/packages/canon/src/components/Table/Docs.mdx deleted file mode 100644 index 6a6e9c8a59..0000000000 --- a/packages/canon/src/components/Table/Docs.mdx +++ /dev/null @@ -1,5 +0,0 @@ -import { Meta, Controls } from '@storybook/blocks'; - - - -# Table diff --git a/packages/canon/src/components/Text/Docs.mdx b/packages/canon/src/components/Text/Docs.mdx deleted file mode 100644 index 685a00a33f..0000000000 --- a/packages/canon/src/components/Text/Docs.mdx +++ /dev/null @@ -1,101 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as TextStories from './Text.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; - - - - - -Text - -The `Text` component is used to display content on your page. - - - -Usage -Hello World!`} language="tsx" dark /> - - - API reference - - - - -Examples -Here are some examples of how you can use the Text component. - -All variants - - The `Text` component has a `variant` prop that can be used to change the - appearance of the text. - - - - - - Subtitle Lorem ipsum dolor sit amet consectetur... - Body Lorem ipsum dolor sit amet consectetur... - Caption Lorem ipsum dolor sit amet consectetur... - Label Lorem ipsum dolor sit amet consectetur... -`} - language="tsx" - dark -/> - -All weights - - The `Text` component has a `weight` prop that can be used to change the - appearance of the text. - - - - - - Regular Lorem ipsum dolor sit amet consectetur... - Bold Lorem ipsum dolor sit amet consectetur... -`} - language="tsx" - dark -/> - -Responsive - - You can also use the `variant` prop to change the appearance of the text based - on the screen size. - - -Responsive Lorem ipsum dolor sit amet consectetur...`} - language="tsx" - dark -/> - -