feat(website): Add the tokens page (#19)

* feat: tokens page

* fix: pr feedback and using absolute component

* fix: missed a method rename

* fix: get emotion css prop working correctly

* fix: switch the babel configs to detect dev and prod envs correctly

* fix: update storybook babel config

.eslintrc.js

@@ -71,6 +71,15 @@ module.exports = {
     eqeqeq: ['error', 'smart'],
     'no-plusplus': 'off',
     'consistent-return': 'off',
+    // deprecated rule
+    'jsx-a11y/label-has-for': 'off',
+    'jsx-a11y/label-has-associated-control': [
+      2,
+      {
+        assert: 'either',
+        depth: 3,
+      },
+    ],
   },
   settings: {
     'import/resolver': {

.storybook/babel.config.js

@@ -19,11 +19,11 @@ const BASE_PLUGINS = ['macros', '@babel/proposal-class-properties', '@babel/prop
 module.exports = {
   env: {
     production: {
-      presets: getPresets(true),
+      presets: getPresets(false),
       plugins: BASE_PLUGINS,
     },
     development: {
-      presets: getPresets(false),
+      presets: getPresets(true),
       plugins: BASE_PLUGINS,
     },
   },

babel.config.js

@@ -19,11 +19,11 @@ const BASE_PLUGINS = ['macros', '@babel/proposal-class-properties', '@babel/prop
 module.exports = {
   env: {
     production: {
-      presets: getPresets(true),
+      presets: getPresets(false),
       plugins: BASE_PLUGINS,
     },
     development: {
-      presets: getPresets(false),
+      presets: getPresets(true),
       plugins: BASE_PLUGINS,
     },
   },

packages/paste-core/utilities/box/package.json

@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@twilio-paste/theme-tokens": "^0.4.0",
+    "csstype": "^2.6.6",
     "rollup": "^1.16.2",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.1",

packages/paste-core/utilities/box/src/index.tsx

@@ -1,28 +1,44 @@
 import styled from '@emotion/styled';
 import {
-  borders,
   display,
+  DisplayProps,
+  borders,
+  BorderProps,
   height,
-  HeightProps,
   maxWidth,
-  MaxWidthProps,
   minWidth,
-  MinWidthProps,
   space,
   style,
-  themeGet,
   width,
-  WidthProps,
 } from 'styled-system';
-import {ThemeShape} from '@twilio-paste/theme-tokens';
-import {SpacingThemeProps} from '../../../../../types';
-
-export interface BoxProps extends HeightProps, MaxWidthProps, MinWidthProps, WidthProps, SpacingThemeProps {
-  as?: string;
-  backgroundColor?: keyof ThemeShape['backgroundColors'];
-  borderRadius?: keyof ThemeShape['radii'];
-  borderType?: keyof ThemeShape['borderTypes'];
-  borderWidth?: keyof ThemeShape['borderWidths'];
+
+import {
+  SpacingThemeProps,
+  BackgroundColorProp,
+  BorderRadiusProps,
+  BorderWidthProps,
+  WidthProps,
+  HeightProp,
+  MaxWidthProp,
+  MinWidthProp,
+  BorderColorProps,
+  BorderStyleProp,
+} from './types';
+
+export interface BoxProps
+  extends DisplayProps,
+    BorderProps,
+    HeightProp,
+    MaxWidthProp,
+    MinWidthProp,
+    WidthProps,
+    SpacingThemeProps,
+    BackgroundColorProp,
+    BorderColorProps,
+    BorderRadiusProps,
+    BorderStyleProp,
+    BorderWidthProps {
+  as?: keyof JSX.IntrinsicElements;
 }
 
 const backgroundColor = style({
@@ -31,14 +47,72 @@ const backgroundColor = style({
   key: 'backgroundColors',
 });
 
-const BorderType = (props: BoxProps): string | null => {
-  return props.borderType ? themeGet(`borderTypes.${props.borderType}`)(props) : null;
-};
+const borderBottomLeftRadius = style({
+  prop: 'borderBottomLeftRadius',
+  cssProperty: 'borderBottomLeftRadius',
+  key: 'radii',
+});
+
+const borderBottomRightRadius = style({
+  prop: 'borderBottomRightRadius',
+  cssProperty: 'borderBottomRightRadius',
+  key: 'radii',
+});
+
+const borderTopLeftRadius = style({
+  prop: 'borderTopLeftRadius',
+  cssProperty: 'borderTopLeftRadius',
+  key: 'radii',
+});
+
+const borderTopRightRadius = style({
+  prop: 'borderTopRightRadius',
+  cssProperty: 'borderTopRightRadius',
+  key: 'radii',
+});
+
+const borderColor = style({
+  prop: 'borderColor',
+  cssProperty: 'borderColor',
+  key: 'borderColors',
+});
+
+const borderBottomWidth = style({
+  prop: 'borderBottomWidth',
+  cssProperty: 'borderBottomWidth',
+  key: 'borderWidths',
+});
+
+const borderLeftWidth = style({
+  prop: 'borderLeftWidth',
+  cssProperty: 'borderLeftWidth',
+  key: 'borderWidths',
+});
+
+const borderRightWidth = style({
+  prop: 'borderRightWidth',
+  cssProperty: 'borderRightWidth',
+  key: 'borderWidths',
+});
+
+const borderTopWidth = style({
+  prop: 'borderTopWidth',
+  cssProperty: 'borderTopWidth',
+  key: 'borderWidths',
+});
 
 const Box = styled.div<BoxProps>`
   ${backgroundColor};
   ${borders};
-  ${BorderType};
+  ${borderColor}
+  ${borderBottomWidth}
+  ${borderLeftWidth}
+  ${borderRightWidth}
+  ${borderTopWidth}
+  ${borderBottomLeftRadius};
+  ${borderBottomRightRadius};
+  ${borderTopLeftRadius};
+  ${borderTopRightRadius};
   ${display};
   ${height};
   ${maxWidth};
@@ -48,7 +122,7 @@ const Box = styled.div<BoxProps>`
 `;
 
 Box.defaultProps = {
-  minWidth: 0,
+  minWidth: 'size0',
 };
 
 export {Box};

packages/paste-core/utilities/box/src/types.ts

@@ -0,0 +1,82 @@
+import * as CSS from 'csstype';
+import {ThemeShape} from '@twilio-paste/theme-tokens';
+
+export interface BackgroundColorProp {
+  backgroundColor?: keyof ThemeShape['backgroundColors'];
+}
+
+export interface BorderColorProps {
+  borderColor?: keyof ThemeShape['borderColors'];
+  borderBottomColor?: keyof ThemeShape['borderColors'];
+  borderLeftColor?: keyof ThemeShape['borderColors'];
+  borderRightColor?: keyof ThemeShape['borderColors'];
+  borderTopColor?: keyof ThemeShape['borderColors'];
+}
+
+export interface BorderRadiusProps {
+  borderRadius?: keyof ThemeShape['radii'];
+  borderBottomLeftRadius?: keyof ThemeShape['radii'];
+  borderBottomRightRadius?: keyof ThemeShape['radii'];
+  borderTopLeftRadius?: keyof ThemeShape['radii'];
+  borderTopRightRadius?: keyof ThemeShape['radii'];
+}
+
+export interface BorderStyleProp {
+  borderStyle?: CSS.BorderStyleProperty;
+}
+
+export interface BorderWidthProps {
+  borderWidth?: keyof ThemeShape['borderWidths'];
+  borderBottomWidth?: keyof ThemeShape['borderWidths'];
+  borderLeftWidth?: keyof ThemeShape['borderWidths'];
+  borderRightWidth?: keyof ThemeShape['borderWidths'];
+  borderTopWidth?: keyof ThemeShape['borderWidths'];
+}
+
+export interface HeightProp {
+  height?: keyof ThemeShape['heights'];
+}
+
+export interface MarginProps {
+  m?: keyof ThemeShape['space'];
+  margin?: keyof ThemeShape['space'];
+  mt?: keyof ThemeShape['space'];
+  marginTop?: keyof ThemeShape['space'];
+  mr?: keyof ThemeShape['space'];
+  marginRight?: keyof ThemeShape['space'];
+  mb?: keyof ThemeShape['space'];
+  marginBottom?: keyof ThemeShape['space'];
+  ml?: keyof ThemeShape['space'];
+  marginLeft?: keyof ThemeShape['space'];
+  mx?: keyof ThemeShape['space'];
+  my?: keyof ThemeShape['space'];
+}
+
+export interface MaxWidthProp {
+  maxWidth?: keyof ThemeShape['maxWidths'];
+}
+
+export interface MinWidthProp {
+  minWidth?: keyof ThemeShape['maxWidths'];
+}
+
+export interface PaddingProps {
+  p?: keyof ThemeShape['space'];
+  padding?: keyof ThemeShape['space'];
+  pt?: keyof ThemeShape['space'];
+  paddingTop?: keyof ThemeShape['space'];
+  pr?: keyof ThemeShape['space'];
+  paddingRight?: keyof ThemeShape['space'];
+  pb?: keyof ThemeShape['space'];
+  paddingBottom?: keyof ThemeShape['space'];
+  pl?: keyof ThemeShape['space'];
+  paddingLeft?: keyof ThemeShape['space'];
+  px?: keyof ThemeShape['space'];
+  py?: keyof ThemeShape['space'];
+}
+
+export interface SpacingThemeProps extends MarginProps, PaddingProps {}
+
+export interface WidthProps {
+  width?: keyof ThemeShape['widths'];
+}

packages/paste-core/utilities/box/stories/index.stories.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
-import {withKnobs, select} from '@storybook/addon-knobs';
+import {withKnobs, select, text} from '@storybook/addon-knobs';
 import {DefaultTheme, ThemeShape} from '@twilio-paste/theme-tokens';
 import {Text} from '@twilio-paste/text';
 import {Box} from '../src';
 
 const backgroundColorOptions = Object.keys(DefaultTheme.backgroundColors);
-const borderTypeOptions = Object.keys(DefaultTheme.borderTypes);
 const spaceOptions = Object.keys(DefaultTheme.space);
 const borderRadiusOptions = Object.keys(DefaultTheme.radii);
+const borderColorOptions = Object.keys(DefaultTheme.borderColors);
 const borderWidthOptions = Object.keys(DefaultTheme.borderWidths);
 
 const demoString = `I'm some text in a box`;
@@ -21,17 +21,77 @@ storiesOf('Utilities|Box', module)
       backgroundColorOptions,
       'colorBackgroundBody'
     ) as keyof ThemeShape['backgroundColors'];
-    const borderTypeValue = select('borderType', borderTypeOptions, '') as keyof ThemeShape['borderTypes'];
+
     const borderRadiusValue = select('borderRadius', borderRadiusOptions, '') as keyof ThemeShape['radii'];
+
+    const borderBottomLeftRadiusValue = select(
+      'borderBottomLeftRadius',
+      borderRadiusOptions,
+      ''
+    ) as keyof ThemeShape['radii'];
+
+    const borderBottomRightRadiusValue = select(
+      'borderBottomRightRadius',
+      borderRadiusOptions,
+      ''
+    ) as keyof ThemeShape['radii'];
+
+    const borderTopLeftRadiusValue = select(
+      'borderTopLeftRadius',
+      borderRadiusOptions,
+      ''
+    ) as keyof ThemeShape['radii'];
+
+    const borderTopRightRadiusValue = select(
+      'borderTopRightRadius',
+      borderRadiusOptions,
+      ''
+    ) as keyof ThemeShape['radii'];
+
+    const borderColorValue = select('borderColor', borderColorOptions, '') as keyof ThemeShape['borderColors'];
+
+    const borderStyleValue = text('borderStyle', '');
+
     const borderWidthValue = select('borderWidth', borderWidthOptions, '') as keyof ThemeShape['borderWidths'];
-    const paddingValue = select('padding', spaceOptions, '');
-    const marginValue = select('margin', spaceOptions, '');
+
+    const borderBottomWidthValue = select(
+      'borderBottomWidth',
+      borderWidthOptions,
+      ''
+    ) as keyof ThemeShape['borderWidths'];
+
+    const borderLeftWidthValue = select('borderLeftWidth', borderWidthOptions, '') as keyof ThemeShape['borderWidths'];
+
+    const borderRightWidthValue = select(
+      'borderRightWidth',
+      borderWidthOptions,
+      ''
+    ) as keyof ThemeShape['borderWidths'];
+
+    const borderTopWidthValue = select('borderTopWidth', borderWidthOptions, '') as keyof ThemeShape['borderWidths'];
+
+    const paddingValue = select('padding', spaceOptions, '') as keyof ThemeShape['space'];
+
+    const marginValue = select('margin', spaceOptions, '') as keyof ThemeShape['space'];
+
+    const displayValue = text('display', '');
+
     return (
       <Box
-        borderRadius={borderRadiusValue}
         backgroundColor={backgroudColorValue}
-        borderType={borderTypeValue}
+        borderBottomLeftRadius={borderBottomLeftRadiusValue}
+        borderBottomRightRadius={borderBottomRightRadiusValue}
+        borderBottomWidth={borderBottomWidthValue}
+        borderColor={borderColorValue}
+        borderLeftWidth={borderLeftWidthValue}
+        borderRadius={borderRadiusValue}
+        borderRightWidth={borderRightWidthValue}
+        borderStyle={borderStyleValue}
+        borderTopLeftRadius={borderTopLeftRadiusValue}
+        borderTopRightRadius={borderTopRightRadiusValue}
+        borderTopWidth={borderTopWidthValue}
         borderWidth={borderWidthValue}
+        display={displayValue}
         margin={marginValue}
         padding={paddingValue}
       >

packages/paste-core/utilities/media-object/package.json

@@ -25,11 +25,13 @@
   },
   "peerDependencies": {
     "@emotion/styled": "^10.0.10",
+    "@twilio-paste/theme-tokens": "^0.4.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "styled-system": "^4.1.0"
   },
   "devDependencies": {
+    "@twilio-paste/theme-tokens": "^0.4.0",
     "rollup": "^1.16.2",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.1",