` component for use with [Table](#table).
-
-Row children are flattened then wrapped with `| `s.
-
## Styling reference
Scoobie distributes some vanilla-extract styles via `scoobie/styles` submodules.
diff --git a/src/components/Table.stories.tsx b/src/components/Table.stories.tsx
deleted file mode 100644
index 4f8ee91d..00000000
--- a/src/components/Table.stories.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import 'loki/configure-react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-import { Text } from 'braid-design-system';
-import React, { Fragment } from 'react';
-
-import { Table as Component } from './Table';
-import { TableRow } from './TableRow';
-export default {
- title: 'Standalone/Table',
- component: Component,
- args: {
- size: 'standard',
- },
- argTypes: {
- overflowX: {
- control: { type: 'radio' },
- options: [undefined, 'scroll'],
- },
- size: {
- control: { type: 'radio' },
- options: ['standard', 'large'],
- },
- whiteSpace: {
- control: { type: 'radio' },
- options: [undefined, 'nowrap'],
- },
- width: {
- control: { type: 'radio' },
- options: [undefined, 'full'],
- },
- },
-} satisfies Meta;
-
-type Story = StoryObj;
-
-export const Defaults: Story = {
- args: {
- header: ['Column A', 'Column B'],
- children: (
- <>
-
- This is body cell A1.
- B1
-
-
- A2
- This is body cell B2.
-
-
- ),
- },
-};
-
-export const Stripe: Story = {
- args: {
- align: ['left', 'right'],
- header: (
-
- Column A
- Column B
-
- ),
- type: 'stripe',
- children: (
- <>
-
- This is body cell A1.
- B1
-
-
-
- A2
- This is body cell B2.
-
-
- ),
- },
-};
-
-export const Subtle: Story = {
- args: {
- header: ['Column A', 'Column B'],
- type: 'subtle',
- children: (
- <>
-
- This is body cell A1.
- B1
-
-
-
- A2
- This is body cell B2.
-
-
- ),
- },
-};
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
deleted file mode 100644
index ca2a0a84..00000000
--- a/src/components/Table.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Box, type Stack } from 'braid-design-system';
-import React, { type ComponentProps, type ReactNode } from 'react';
-
-import { BaseTable } from '../private/Table';
-import {
- DEFAULT_TABLE_TYPE,
- type TableAlign,
- TableContext,
- type TableType,
-} from '../private/TableContext';
-import { DEFAULT_SIZE, type Size } from '../private/size';
-
-import { TableRow } from './TableRow';
-
-interface BaseProps {
- align?: readonly TableAlign[];
- children: ReactNode;
- header: ComponentProps['children'] | readonly string[];
- size?: Size;
- type?: TableType;
- width?: 'full';
-}
-
-type Props = BaseProps &
- (
- | {
- overflowX: 'scroll';
- whiteSpace?: 'nowrap';
- }
- | {
- overflowX?: never;
- whiteSpace?: never;
- }
- );
-
-export const Table = ({
- align,
- children,
- header,
- overflowX,
- size = DEFAULT_SIZE,
- type = DEFAULT_TABLE_TYPE,
- whiteSpace,
- width,
-}: Props) => (
-
-
-
- {header}
-
-
-
-
- {children}
-
-
-);
diff --git a/src/components/TableRow.tsx b/src/components/TableRow.tsx
deleted file mode 100644
index 9863f5f1..00000000
--- a/src/components/TableRow.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { type Stack, Text } from 'braid-design-system';
-import React, { Children, type ComponentProps, useContext } from 'react';
-import flattenChildren from 'react-keyed-flatten-children';
-
-import { TableCell } from '../private/TableCell';
-import { TableContext } from '../private/TableContext';
-import { BaseTableRow } from '../private/TableRow';
-
-interface Props {
- children: ComponentProps['children'] | readonly string[];
- selected?: boolean;
-}
-
-export const TableRow = ({ children, selected }: Props) => {
- const { align, component } = useContext(TableContext);
-
- return (
-
- {Children.map(flattenChildren(children), (child, index) => (
-
- {typeof child === 'number' || typeof child === 'string' ? (
-
- {child}
-
- ) : (
- child
- )}
-
- ))}
-
- );
-};
diff --git a/src/index.ts b/src/index.ts
index 4caa00fd..78517dc6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,5 +6,3 @@ export { InternalLink } from './components/InternalLink';
export { ScoobieLink } from './components/ScoobieLink';
export { ScoobieLinkProvider } from './components/ScoobieLinkProvider';
export { SmartTextLink } from './components/SmartTextLink';
-export { Table } from './components/Table';
-export { TableRow } from './components/TableRow';
diff --git a/src/private/Table.css.ts b/src/private/Table.css.ts
deleted file mode 100644
index 3238fcd4..00000000
--- a/src/private/Table.css.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const fullWidth = style({
- width: '100%',
-});
-
-export const table = style({
- borderCollapse: 'separate',
- borderSpacing: 0,
-});
diff --git a/src/private/Table.tsx b/src/private/Table.tsx
deleted file mode 100644
index f9b83ec1..00000000
--- a/src/private/Table.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Box } from 'braid-design-system';
-import React, { Fragment, type ReactNode } from 'react';
-
-import { ScrollableInline } from './ScrollableInline';
-
-import * as styles from './Table.css';
-
-interface BaseTableProps {
- children: ReactNode;
- overflowX?: 'scroll';
- whiteSpace?: 'nowrap';
- width?: 'full';
-}
-
-export const BaseTable = ({
- children,
- overflowX,
- whiteSpace,
- width,
-}: BaseTableProps) => {
- const Wrapper = overflowX === 'scroll' ? ScrollableInline : Fragment;
-
- return (
-
-
- {children}
-
-
- );
-};
diff --git a/src/private/TableCell.css.ts b/src/private/TableCell.css.ts
deleted file mode 100644
index 1a1c02dc..00000000
--- a/src/private/TableCell.css.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from 'braid-design-system/css';
-
-import { SIZE_TO_TABLE_PADDING, type Size } from './size';
-
-import { tableRowSelection } from './TableRow.css';
-
-export const tableCell = styleVariants({
- stripe: {
- borderBottomWidth: vars.borderWidth.standard,
- borderColor: vars.borderColor.neutralLight,
- borderRightWidth: vars.borderWidth.standard,
- borderStyle: 'solid',
- verticalAlign: 'top',
-
- ':first-child': {
- borderLeftWidth: vars.borderWidth.standard,
- },
- },
- subtle: {
- borderBottomWidth: vars.borderWidth.standard,
- borderColor: vars.borderColor.neutralLight,
- borderStyle: 'solid',
- verticalAlign: 'top',
-
- ':first-child': {
- paddingLeft: 0,
- },
-
- ':last-child': {
- paddingRight: 0,
- },
- },
-});
-
-const tdForSize = (size: Size) =>
- styleVariants({
- stripe: {
- selectors: {
- [`${tableRowSelection} &:first-child`]: {
- borderLeftColor: vars.borderColor.focus,
- borderLeftWidth: vars.borderWidth.large,
- },
- [`${tableRowSelection} &:last-child`]: {
- borderRightColor: vars.borderColor.focus,
- borderRightWidth: vars.borderWidth.large,
- },
- 'tr:last-child &:first-child': {
- borderBottomLeftRadius: vars.borderRadius.large,
- },
- 'tr:last-child &:last-child': {
- borderBottomRightRadius: vars.borderRadius.large,
- },
- },
- },
- subtle: {
- selectors: {
- [`${tableRowSelection} &:first-child`]: {
- borderLeftColor: vars.borderColor.focus,
- borderLeftWidth: vars.borderWidth.large,
- borderLeftStyle: 'solid',
- paddingLeft: vars.space[SIZE_TO_TABLE_PADDING[size]],
- },
- [`${tableRowSelection} &:last-child`]: {
- borderRightColor: vars.borderColor.focus,
- borderRightWidth: vars.borderWidth.large,
- borderRightStyle: 'solid',
- paddingRight: vars.space[SIZE_TO_TABLE_PADDING[size]],
- },
- 'tr:last-child &': {
- borderBottomWidth: 0,
- paddingBottom: 0,
- },
- },
- },
- });
-
-export const td = {
- large: tdForSize('large'),
- standard: tdForSize('standard'),
-};
-
-export const th = styleVariants({
- stripe: {
- selectors: {
- 'tr:first-child &': {
- borderTopWidth: 1,
- },
- 'tr:first-child &:first-child': {
- borderTopLeftRadius: vars.borderRadius.large,
- },
- 'tr:first-child &:last-child': {
- borderTopRightRadius: vars.borderRadius.large,
- },
- },
- },
- subtle: {
- selectors: {
- 'tr:first-child &': {
- paddingTop: 0,
- },
- 'tr:last-child &': {
- borderBottomColor: vars.borderColor.field,
- borderBottomWidth: vars.borderWidth.large,
- },
- },
- },
-});
diff --git a/src/private/TableCell.tsx b/src/private/TableCell.tsx
deleted file mode 100644
index b4bf3df9..00000000
--- a/src/private/TableCell.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Box, Stack } from 'braid-design-system';
-import React, { useContext } from 'react';
-
-import { type TableAlign, TableContext } from './TableContext';
-import { SIZE_TO_SPACE, SIZE_TO_TABLE_PADDING } from './size';
-import type { StackChildrenProps } from './types';
-
-import * as styles from './TableCell.css';
-
-interface Props extends StackChildrenProps {
- align?: TableAlign | null;
- component: 'td' | 'th';
-}
-
-export const TableCell = ({ align, children, component }: Props) => {
- const { size, type } = useContext(TableContext);
-
- const padding = SIZE_TO_TABLE_PADDING[size];
- const space = SIZE_TO_SPACE[size];
-
- return (
-
- {children}
-
- );
-};
diff --git a/src/private/TableContext.ts b/src/private/TableContext.ts
deleted file mode 100644
index 781a289d..00000000
--- a/src/private/TableContext.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { createContext } from 'react';
-
-import { DEFAULT_SIZE, type Size } from './size';
-
-interface TableContextValue {
- align?: readonly TableAlign[];
- component: TableCellComponent;
- size: Size;
- type: TableType;
-}
-
-export type TableAlign = 'left' | 'center' | 'right';
-
-type TableCellComponent = 'td' | 'th';
-
-export type TableType = 'stripe' | 'subtle';
-
-export const DEFAULT_TABLE_CELL_COMPONENT: TableCellComponent = 'td';
-
-export const DEFAULT_TABLE_TYPE: TableType = 'stripe';
-
-export const TableContext = createContext({
- component: DEFAULT_TABLE_CELL_COMPONENT,
- size: DEFAULT_SIZE,
- type: DEFAULT_TABLE_TYPE,
-});
diff --git a/src/private/TableRow.css.ts b/src/private/TableRow.css.ts
deleted file mode 100644
index dc5e3fa7..00000000
--- a/src/private/TableRow.css.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { style, styleVariants } from '@vanilla-extract/css';
-
-import { codeBackgroundColor } from '../../styles';
-
-export const tableRow = styleVariants({
- stripe: {
- selectors: {
- 'tbody &:nth-child(odd)': {
- backgroundColor: codeBackgroundColor,
- },
- },
- },
- subtle: {},
-});
-
-export const tableRowSelection = style({});
diff --git a/src/private/TableRow.tsx b/src/private/TableRow.tsx
deleted file mode 100644
index fa1f2337..00000000
--- a/src/private/TableRow.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Box } from 'braid-design-system';
-import React, { useContext } from 'react';
-
-import { TableContext } from '../private/TableContext';
-
-import type { StackChildrenProps } from './types';
-
-import * as styles from './TableRow.css';
-
-interface Props extends StackChildrenProps {
- selected?: boolean;
-}
-
-export const BaseTableRow = ({ children, selected }: Props) => {
- const { type } = useContext(TableContext);
-
- return (
-
- {children}
-
- );
-};
|