Improve Table API

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

packages/canon/.storybook/preview.tsx

@@ -6,8 +6,7 @@ import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import '../docs/components/styles.css';
 
 // Canon specific styles
-
-import '../src/css/backstage.css';
+import '../src/css/core.css';
 import '../src/css/components.css';
 
 // Custom themes

packages/canon/report.api.md

@@ -7,6 +7,7 @@
 
 import { ForwardRefExoticComponent } from 'react';
 import { default as React_2 } from 'react';
+import * as React_3 from 'react';
 import { RefAttributes } from 'react';
 
 // @public (undocumented)
@@ -457,6 +458,48 @@ export interface StackProps extends SpaceProps, ColorProps {
   style?: React.CSSProperties;
 }
 
+// @public (undocumented)
+export const Table: React_3.ForwardRefExoticComponent<
+  React_3.HTMLAttributes<HTMLTableElement> &
+    React_3.RefAttributes<HTMLTableElement>
+>;
+
+// @public (undocumented)
+export const TableBody: React_3.ForwardRefExoticComponent<
+  React_3.HTMLAttributes<HTMLTableSectionElement> &
+    React_3.RefAttributes<HTMLTableSectionElement>
+>;
+
+// @public (undocumented)
+export const TableCell: React_3.ForwardRefExoticComponent<
+  React_3.TdHTMLAttributes<HTMLTableCellElement> &
+    React_3.RefAttributes<HTMLTableCellElement>
+>;
+
+// @public (undocumented)
+export const TableFooter: React_3.ForwardRefExoticComponent<
+  React_3.HTMLAttributes<HTMLTableSectionElement> &
+    React_3.RefAttributes<HTMLTableSectionElement>
+>;
+
+// @public (undocumented)
+export const TableHead: React_3.ForwardRefExoticComponent<
+  React_3.ThHTMLAttributes<HTMLTableCellElement> &
+    React_3.RefAttributes<HTMLTableCellElement>
+>;
+
+// @public (undocumented)
+export const TableHeader: React_3.ForwardRefExoticComponent<
+  React_3.HTMLAttributes<HTMLTableSectionElement> &
+    React_3.RefAttributes<HTMLTableSectionElement>
+>;
+
+// @public (undocumented)
+export const TableRow: React_3.ForwardRefExoticComponent<
+  React_3.HTMLAttributes<HTMLTableRowElement> &
+    React_3.RefAttributes<HTMLTableRowElement>
+>;
+
 // @public (undocumented)
 export type Theme = keyof typeof themes;
 

packages/canon/src/components/Table/Table.tsx

@@ -15,6 +15,7 @@
  */
 import * as React from 'react';
 
+/** @public */
 const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
@@ -25,6 +26,7 @@ const Table = React.forwardRef<
 ));
 Table.displayName = 'Table';
 
+/** @public */
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
@@ -37,6 +39,7 @@ const TableHeader = React.forwardRef<
 ));
 TableHeader.displayName = 'TableHeader';
 
+/** @public */
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
@@ -45,6 +48,7 @@ const TableBody = React.forwardRef<
 ));
 TableBody.displayName = 'TableBody';
 
+/** @public */
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
@@ -57,6 +61,7 @@ const TableFooter = React.forwardRef<
 ));
 TableFooter.displayName = 'TableFooter';
 
+/** @public */
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
   React.HTMLAttributes<HTMLTableRowElement>
@@ -67,6 +72,7 @@ const TableRow = React.forwardRef<
 ));
 TableRow.displayName = 'TableRow';
 
+/** @public */
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
   React.ThHTMLAttributes<HTMLTableCellElement>
@@ -75,6 +81,7 @@ const TableHead = React.forwardRef<
 ));
 TableHead.displayName = 'TableHead';
 
+/** @public */
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
   React.TdHTMLAttributes<HTMLTableCellElement>
@@ -83,6 +90,7 @@ const TableCell = React.forwardRef<
 ));
 TableCell.displayName = 'TableCell';
 
+/** @public */
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>

packages/canon/src/components/Table/index.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 {
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableCell,
+  TableBody,
+  TableFooter,
+} from './Table';

packages/canon/src/css/core.css

@@ -17,16 +17,6 @@
 /* Normalize */
 @import './normalize.css';
 
-/* Geist font */
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
-
-*,
-html,
-body {
-  font-family: var(--canon-font-regular);
-}
-
 /* Light theme tokens */
 :root {
   /* Colors */
@@ -101,6 +91,12 @@ body {
   /* Container */
   --canon-container-max-width: 1200px;
   --canon-container-padding: 1rem;
+
+  *,
+  html,
+  body {
+    font-family: var(--canon-font-regular);
+  }
 }
 
 /* Dark theme tokens */

packages/canon/src/index.ts

@@ -34,3 +34,4 @@ export * from './components/Container';
 export * from './components/Button';
 export * from './components/Icon';
 export * from './components/Checkbox';
+export * from './components/Table';