Merge pull request #17 from stoplightio/SL-650/table-component

SL-650/table component

README.md

@@ -35,6 +35,7 @@ TODO
     - List
     - Button
     - Portal
+    - Table
 
 ## Helpful Links
 

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   preset: '@stoplight/scripts',
   setupTestFrameworkScriptFile: './setupTests.js',
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  snapshotSerializers: ['enzyme-to-json/serializer']
 };

package.json

@@ -63,7 +63,7 @@
     "@fortawesome/free-regular-svg-icons": "5.5.x",
     "@fortawesome/free-solid-svg-icons": "5.5.x",
     "@sambego/storybook-state": "1.x.x",
-    "@stoplight/scripts": "1.2.0",
+    "@stoplight/scripts": "1.2.3",
     "@types/react": "16.x.x",
     "@types/react-dom": "16.x.x",
     "enzyme": "^3.7.0",

src/Table.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { themeGet } from 'styled-system';
+import { Box, IBoxProps } from './Box';
+import { styled } from './utils';
+
+interface ITableProps extends IBoxProps {
+  children: any;
+  isSelection?: boolean;
+}
+
+interface ITableCellProps extends ITableProps {
+  minWidth?: string;
+}
+
+interface ITableViewProps {
+  className: string;
+  children: any;
+}
+
+const TableView = ({ className, children }: ITableViewProps) => (
+  <table className={className}>
+    <tbody>{children}</tbody>
+  </table>
+);
+
+const getBoxShadowTheme = themeGet('shadows.lg', '0 0 5px #000');
+const boxShadow = (props: ITableCellProps | ITableProps) =>
+  props.isSelection && {
+    boxShadow: getBoxShadowTheme(props),
+  };
+
+export const Table = styled<ITableProps, 'table'>(Box as any).attrs({
+  as: () => TableView,
+  border: 'none',
+  borderTop: 'sm',
+  borderColor: 'colors.border',
+  css: {
+    'border-collapse': 'collapse',
+  },
+})(
+  // @ts-ignore
+  boxShadow
+);
+
+export const TableRow = styled<ITableProps, 'tr'>(Box as any).attrs({
+  as: 'tr',
+  border: 'none',
+  borderBottom: 'sm',
+  borderRight: 'sm',
+  borderColor: 'colors.border',
+})``;
+
+export const TableHeadCell = styled<ITableCellProps, 'th'>(Box as any).attrs({
+  as: 'td',
+  border: 'none',
+  borderLeft: 'sm',
+  borderColor: 'colors.border',
+})(
+  // @ts-ignore
+  boxShadow
+);
+
+export const TableCell = styled<ITableCellProps, 'td'>(Box as any).attrs({
+  as: 'td',
+  border: 'none',
+  borderLeft: 'sm',
+  borderColor: 'colors.border',
+})(
+  // @ts-ignore
+  boxShadow
+);

src/__tests__/Table.spec.tsx

@@ -0,0 +1,50 @@
+/**
+ * @jest-environment jsdom
+ */
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import * as React from 'react';
+import { Table, TableCell, TableHeadCell, TableRow } from '../';
+
+describe('Table', () => {
+  it('renders children', () => {
+    const children = <tr />;
+
+    expect(shallow(<Table>{children}</Table>)).toContainReact(children);
+  });
+
+  it('always renders tbody underneath', () => {
+    const wrapper = mount(
+      <Table>
+        <tr />
+      </Table>
+    );
+
+    expect(wrapper).toContainMatchingElement('tbody');
+    wrapper.unmount();
+  });
+});
+
+describe('TableRow', () => {
+  it('renders children', () => {
+    const children = <td />;
+
+    expect(shallow(<TableRow>{children}</TableRow>)).toContainReact(children);
+  });
+});
+
+describe('TableCell', () => {
+  it('renders children', () => {
+    const children = <span>some content</span>;
+
+    expect(shallow(<TableCell>{children}</TableCell>)).toContainReact(children);
+  });
+});
+
+describe('TableHeadCell', () => {
+  it('renders children', () => {
+    const children = <span>some content</span>;
+
+    expect(shallow(<TableHeadCell>{children}</TableHeadCell>)).toContainReact(children);
+  });
+});

src/index.tsx

@@ -9,6 +9,7 @@ export * from './Flex';
 export * from './Heading';
 export * from './Icon';
 export * from './List';
+export * from './Table';
 export * from './Text';
 export * from './ThemeSection';
 export * from './types';

src/storybook-addon/themes/dark.ts

@@ -2,11 +2,18 @@ export const dark = {
   colors: {
     fg: 'white',
     bg: '#222',
+    border: '#f9f9f9',
     lightest: '#f9f9f9',
     lighter: 'rgba(255, 255, 255, 0.2)',
     error: '#ff7979',
   },
 
+  shadows: {
+    sm: '0 0 2px rgba(255, 255, 255, .6)',
+    md: '0 0 5px rgba(255, 255, 25, .5)',
+    lg: '0 0 8px 2px rgba(255, 255, 255, .8)',
+  },
+
   components: {
     button: {
       bg: 'rgb(255, 255, 255, 0.25)',

src/theme/base.ts

@@ -57,13 +57,6 @@ export const base: ILayout = {
     full: 9999,
   },
 
-  // TODO is this really a config or can this change like with colors
-  shadow: {
-    sm: '0 0 2px rgba(0, 0, 0, .6)',
-    md: '0 0 5px rgba(0, 0, 0, .5)',
-    lg: '0 0 8px rgba(0, 0, 0, .4)',
-  },
-
   space: {
     none: '0px',
     xs: 2,

src/theme/components.ts

@@ -11,6 +11,14 @@ export const colors = {
   },
 };
 
+export const shadows = {
+  shadows: {
+    sm: '0 0 2px rgba(0, 0, 0, .6)',
+    md: '0 0 5px rgba(0, 0, 0, .5)',
+    lg: '0 0 8px rgba(0, 0, 0, .4)',
+  },
+};
+
 // default color stylings we want to use out of the gates (in case someone does not want to have to create their own theme)
 export const components: ISectionTheme = {
   components: {

src/theme/index.ts

@@ -1,11 +1,12 @@
 import { IThemeInterface } from '../types';
 
 import { base } from './base';
-import { colors, components } from './components';
+import { colors, components, shadows } from './components';
 
 export const baseTheme: IThemeInterface = {
   base,
 
+  ...shadows,
   ...colors,
   ...components,
 };

src/types.ts

@@ -4,7 +4,7 @@ export type LineHeight = 'reset' | 'none' | 'tight' | 'normal' | 'loose';
 export type LetterSpacing = 'tight' | 'normal' | 'wide';
 export type BorderRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export type BorderWidth = 'none' | 'xs' | 'sm' | 'md' | 'lg';
-export type BoxShadow = 'sm' | 'md' | 'lg';
+export type BoxShadow = keyof IShadows;
 export type BoxDimension = 'auto' | 'none' | 'px' | 'full' | 'screen';
 export type Space = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
 
@@ -28,6 +28,7 @@ export interface IThemeInterface<
 
 export interface ISectionTheme<TComponents extends Components = Components> {
   colors?: Partial<IColors>;
+  shadows?: Partial<IShadows>;
 
   components?: { [component in TComponents]?: Partial<IColors> };
 }
@@ -45,8 +46,6 @@ export interface ILayout {
 
   border: { [key in BorderWidth]?: number | string }; // px
 
-  shadow: { [key in BoxShadow]?: string };
-
   space: { [key in Space]?: number | string }; // px
 
   height?: { [key in BoxDimension]?: number | string };
@@ -63,5 +62,13 @@ export interface IColors {
   [color: string]: string | Partial<IColors>;
 }
 
+export interface IShadows {
+  sm: string;
+  md: string;
+  lg: string;
+
+  [color: string]: string | Partial<IShadows>;
+}
+
 // components created in this repo
 export type Components = 'button' | 'checkbox' | 'toggle';

src/utils/rules.ts

@@ -85,7 +85,7 @@ export const borderRadius = style({
 export const boxShadow = style({
   prop: 'shadow',
   cssProperty: 'boxShadow',
-  key: 'base.shadow',
+  key: 'shadows',
 });
 
 export const cursor = style({

stories/Table.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import { withKnobs } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import { Table, TableCell, TableHeadCell, TableRow } from '../src/';
+
+storiesOf('Table', module)
+  .addDecorator(withKnobs)
+  .add('with defaults', () => (
+    <Table>
+      <TableRow>
+        <TableHeadCell>Site</TableHeadCell>
+        <TableHeadCell>Views</TableHeadCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>stoplight.io</TableCell>
+        <TableCell>27341</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>example.com</TableCell>
+        <TableCell>2351</TableCell>
+      </TableRow>
+    </Table>
+  ))
+  .add('with minWidth', () => (
+    <Table>
+      <TableRow>
+        <TableHeadCell minWidth="300px">Site</TableHeadCell>
+        <TableHeadCell>Views</TableHeadCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>stoplight.io</TableCell>
+        <TableCell>27341</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>example.com</TableCell>
+        <TableCell>2351</TableCell>
+      </TableRow>
+    </Table>
+  ))
+  .add('with selection', () => (
+    <Table>
+      <TableRow>
+        <TableHeadCell>Site</TableHeadCell>
+        <TableHeadCell>Views</TableHeadCell>
+      </TableRow>
+      <TableRow>
+        <TableCell isSelection>stoplight.io</TableCell>
+        <TableCell>27341</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>example.com</TableCell>
+        <TableCell>2351</TableCell>
+      </TableRow>
+    </Table>
+  ));

stories/index.ts

@@ -8,6 +8,7 @@ import './Image';
 import './Input';
 import './KitchenSink';
 import './List';
+import './Table';
 import './Text';
 import './Textarea';
 import './Toggle';