Fixing Box

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

packages/canon/docs/components/PropsTable/getProps.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export function getBoxProps(styles: Record<string, any>) {
+export function getProps(styles: Record<string, any>) {
   return Object.keys(styles).reduce(
     (acc: Record<string, { type: any[]; responsive: boolean }>, n) => {
       const style = styles[n];

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

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 export { PropsTable } from './PropsTable';
-export { getBoxProps } from './getProps';
+export { getProps } from './getProps';

packages/canon/docs/components/index.ts

@@ -20,6 +20,7 @@ export * from './Columns';
 export * from './ComponentStatus';
 export * from './IconLibrary';
 export * from './LayoutComponents';
+export * from './PropsTable';
 export * from './Roadmap';
 export * from './Table';
 export * from './Text';

packages/canon/src/components/Box/Box.tsx

@@ -16,7 +16,6 @@
 
 import { createElement, forwardRef } from 'react';
 import { boxSprinkles } from './sprinkles.css';
-import { base } from './box.css';
 import { BoxProps } from './types';
 
 /** @public */
@@ -27,7 +26,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const sprinklesClassName = boxSprinkles(restProps);
 
   // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = [base, sprinklesClassName, className]
+  const classNames = ['canon-box', sprinklesClassName, className]
     .filter(Boolean)
     .join(' ');
 

packages/canon/src/components/Box/Docs.mdx

@@ -2,10 +2,7 @@ import { Meta, Unstyled, Source } from '@storybook/blocks';
 import * as BoxStories from './Box.stories';
 import { Title, Text } from '../../../docs/components';
 import { Padding } from './docs/padding';
-import {
-  PropsTable,
-  getBoxProps,
-} from '../../../docs/components/PropsTable/PropsTable';
+import { PropsTable, getProps } from '../../../docs/components';
 import { boxProperties } from './sprinkles.css';
 import { spacingProperties } from '../../layout/sprinkles.css';
 
@@ -32,7 +29,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
 
 <PropsTable
   data={{
-    ...getBoxProps(boxProperties.styles),
+    ...getProps(boxProperties.styles),
     children: {
       type: 'ReactNode',
       required: false,
@@ -56,7 +53,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
 
 <Padding />
 
-<PropsTable data={getBoxProps(spacingProperties.styles)} />
+<PropsTable data={getProps(spacingProperties.styles)} />
 
 <Title type="h2">Examples</Title>
 <Text>Here are some examples of how you can use the Box component.</Text>

packages/canon/src/components/Box/box.css.ts

@@ -1,22 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { style } from '@vanilla-extract/css';
-
-export const base = style({
-  fontFamily: 'var(--canon-font-regular)',
-  color: 'var(--canon-text-primary)',
-});

packages/canon/src/components/Box/styles.css

@@ -0,0 +1,4 @@
+.canon-box {
+  font-family: 'var(--canon-font-regular)';
+  color: 'var(--canon-text-primary)';
+}