Cleanup

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

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 (
-    <div className={bannerStyles({ variant })}>
-      <div className={bannerIconStyles}>
+    <div className={`banner ${variant}`}>
+      <div className="icon">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"

packages/canon/docs/components/Banner/banner.css.ts

@@ -1,61 +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';
-import { globalStyle, style } from '@vanilla-extract/css';
-
-export const bannerStyles = recipe({
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    fontFamily: '"Geist", sans-serif',
-    fontSize: '16px',
-    lineHeight: '28px',
-    padding: '16px',
-    borderRadius: '6px',
-    marginBottom: '16px',
-    border: '1px solid #e0e0e0',
-  },
-  variants: {
-    variant: {
-      info: {
-        backgroundColor: '#F2F2F2',
-        borderColor: '#CDCDCD',
-        color: '#888888',
-      },
-      warning: {
-        backgroundColor: '#FFF2B9',
-        borderColor: '#FFD000',
-        color: '#D79927',
-      },
-    },
-  },
-});
-
-globalStyle(`${bannerStyles.classNames.base} p`, {
-  margin: '0',
-});
-
-export const bannerIconStyles = style({
-  width: '32px',
-  height: '32px',
-  backgroundColor: 'rgba(215, 153, 39, 0.2)',
-  borderRadius: '6px',
-  marginRight: '16px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});

packages/canon/docs/components/Banner/index.ts

@@ -13,12 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { style } from '@vanilla-extract/css';
-
-export const styles = style({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(3, 1fr)',
-  rowGap: '20px',
-  columnGap: '80px',
-});
+export { Banner } from './Banner';

packages/canon/docs/components/Banner/styles.css

@@ -0,0 +1,38 @@
+.banner {
+  display: flex;
+  align-items: center;
+  font-family: 'Geist', sans-serif;
+  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;
+  }
+}

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';

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';

packages/canon/docs/components/ComponentStatus/component-status.css.ts

@@ -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',
-      },
-    },
-  },
-});

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';

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';

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 (

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';

packages/canon/docs/components/LayoutComponents/layout-components.css.ts

@@ -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',
-});

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';

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';

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';

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';

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';

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';

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';
 

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';
 
 <Meta of={ButtonStories} />
 

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';
 

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';
 
 <Meta of={GridStories} />

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';
 

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';
 
 <Meta of={StackStories} />