twilio-labs · TheSisb · Aug 14, 2019 · Aug 1, 2019 · Aug 1, 2019 · Aug 1, 2019
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -26,16 +26,15 @@ jobs:
           paths:
             - node_modules
       - run:
-          name: Run build
+          name: Run package builds
           command: yarn build
       - run:
-          name: Build monorepo package cache
-          command: yarn pre-test
+          name: Run website build
+          command: yarn build:website
       - persist_to_workspace:
           root: ~/
           paths:
             - repo/packages
-            - repo/tools/.cache
 
   test:
     executor: job-executor
@@ -71,9 +70,24 @@ jobs:
           keys:
             - v1-dependencies-{{ checksum "package.json" }}
             - v1-dependencies-
+      - attach_workspace:
+          at: ~/
       - run:
           name: Run prettier
           command: yarn prettier
+  typecheck:
+    executor: job-executor
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            - v1-dependencies-
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Run type checker
+          command: yarn type-check
 
 workflows:
   version: 2
@@ -89,3 +103,6 @@ workflows:
       - prettier:
           requires:
             - build
+      - typecheck:
+          requires:
+            - build
diff --git a/now-build.sh b/now-build.sh
@@ -0,0 +1,5 @@
+#!/bin/sh
+
+yarn
+yarn build
+yarn build:website
diff --git a/now.json b/now.json
@@ -4,9 +4,9 @@
   "version": 2,
   "builds": [
     {
-      "src": "package.json",
+      "src": "now-build.sh",
       "use": "@now/static-build",
-      "config": { "distDir": "packages/paste-website/public" }
+      "config": {"distDir": "packages/paste-website/public"}
     }
   ]
 }
diff --git a/package.json b/package.json
@@ -19,26 +19,26 @@
     "start:website": "yarn workspace @twilio-paste/website develop",
     "watch:icons": "yarn workspace @twilio-paste/icons watch",
     "prebuild": "node ./tools/build/pre-build.js",
-    "build": "lerna run build",
+    "build": "lerna run build --ignore @twilio-paste/website",
     "build:dev": "yarn prebuild && yarn build:tokens && lerna run build:dev",
     "build:tokens": "yarn workspace @twilio-paste/design-tokens tokens",
     "build:icons": "yarn workspace @twilio-paste/icons build",
     "build:storybook": "build-storybook -c .storybook -o /docs",
     "build:website": "yarn workspace @twilio-paste/website build",
-    "pre-push": "yarn build && concurrently \"yarn:lint\" \"yarn:test\" \"yarn:prettier\"",
+    "pre-push": "concurrently \"yarn:lint\" \"yarn:test\" \"yarn:prettier\" \"yarn:type-check\"",
     "release": "yarn lerna publish --skip-npm",
     "clean": "node ./tools/build/clean-repo.js && lerna clean --yes && lerna run clean && yarn bootstrap",
     "pre-test": "node ./tools/build/pre-test.js",
     "test": "yarn pre-test && node --experimental-worker ./node_modules/.bin/jest",
     "test:coverage": "yarn pre-test && node --experimental-worker ./node_modules/.bin/jest --coverage",
     "prettier": "prettier --list-different '{.storybook,packages}/**/*.{ts,tsx}'",
     "prettier-clean": "prettier --write '{.storybook,packages}/**/*.{ts,tsx}'",
-    "lint": "eslint --ext .tsx,.ts ./packages/**",
+    "lint": "yarn pre-test && eslint --ext .tsx,.ts ./packages/**",
     "type-check": "lerna run type-check"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
-    "@emotion/styled": "^10.0.14",
+    "@emotion/core": "^10.0.15",
+    "@emotion/styled": "^10.0.15",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-uid": "^2.2.0",
@@ -56,7 +56,6 @@
     "@commitlint/cli": "8.0.0",
     "@commitlint/config-conventional": "8.0.0",
     "@emotion/babel-preset-css-prop": "^10.0.14",
-    "@emotion/core": "^10.0.14",
     "@expo/spawn-async": "^1.5.0",
     "@storybook/addon-actions": "^5.1.9",
     "@storybook/addon-info": "^5.1.9",

diff --git a/packages/paste-core/utilities/box/package.json b/packages/paste-core/utilities/box/package.json
@@ -25,7 +25,7 @@
   },
   "peerDependencies": {
     "@emotion/styled": "^10.0.10",
-    "@twilio-paste/theme-tokens": "^0.2.2",
+    "@twilio-paste/theme-tokens": "^0.4.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "styled-system": "^4.1.0"

diff --git a/packages/paste-core/utilities/screen-reader-only/package.json b/packages/paste-core/utilities/screen-reader-only/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@twilio-paste/screen-reader-only",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "category": "typography",
   "status": "alpha",
   "description": "",

diff --git a/packages/paste-core/utilities/text/package.json b/packages/paste-core/utilities/text/package.json
@@ -25,7 +25,7 @@
   },
   "peerDependencies": {
     "@emotion/styled": "^10.0.10",
-    "@twilio-paste/theme-tokens": "^0.2.2",
+    "@twilio-paste/theme-tokens": "^0.4.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "styled-system": "^4.1.0"

diff --git a/packages/paste-core/utilities/text/src/index.tsx b/packages/paste-core/utilities/text/src/index.tsx
@@ -16,7 +16,6 @@ import {ThemeShape} from '@twilio-paste/theme-tokens';
 
 interface MarginProps {
   m?: keyof ThemeShape['space'];
-  margin?: keyof ThemeShape['space'];
   mt?: keyof ThemeShape['space'];
   marginTop?: keyof ThemeShape['space'];
   mr?: keyof ThemeShape['space'];

diff --git a/packages/paste-design-tokens/formatters/sketchpalette.ts b/packages/paste-design-tokens/formatters/sketchpalette.ts
@@ -1,13 +1,13 @@
-import color from 'color';
+import * as color from 'color';
 import * as Immutable from 'immutable';
 import {ImmutableStyleMap} from 'theo';
 
 interface SketchPaletteColor {
   name: string;
-  red?: number;
-  green?: number;
-  blue?: number;
-  alpha?: number;
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
 }
 
 interface ColorRGB {
@@ -16,7 +16,8 @@ interface ColorRGB {
   valpha: string;
 }
 
-const convertToSketchPaletteColor = (input: string): Partial<SketchPaletteColor> => {
+const convertToSketchPaletteColor = (input: string): {[key: string]: number} => {
+  // @ts-ignore FIXME
   const convertedColor: ColorRGB = color.rgb(input);
 
   return {

diff --git a/packages/paste-design-tokens/tokens/global/border-color.yml b/packages/paste-design-tokens/tokens/global/border-color.yml
@@ -9,10 +9,10 @@ props:
     value: "{!palette-gray-50}"
     comment: Default border color
   color-border-light:
-    value: "{!palette-gray-60}"
+    value: "{!palette-gray-40}"
     comment: Light border color
   color-border-dark:
-    value: "{!palette-gray-40}"
+    value: "{!palette-gray-60}"
     comment: Dark border color
 
   # input borders

diff --git a/packages/paste-icons/package.json b/packages/paste-icons/package.json
@@ -21,7 +21,7 @@
   },
   "peerDependencies": {
     "@emotion/styled": "^10.0.14",
-    "@twilio-paste/theme-tokens": "^0.2.2",
+    "@twilio-paste/theme-tokens": "^0.4.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-uid": "^2.2.0",

diff --git a/packages/paste-theme-tokens/package.json b/packages/paste-theme-tokens/package.json
@@ -13,7 +13,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "yarn clean && yarn compile",
+    "build": "yarn compile",
     "build:dev": "yarn clean && yarn compile:dev",
     "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache",
     "compile": "rollup -c --environment NODE_ENV:production",
@@ -22,7 +22,7 @@
     "type-check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@twilio-paste/design-tokens": "^2.0.2"
+    "@twilio-paste/design-tokens": "^2.2.0"
   },
   "devDependencies": {
     "@twilio-paste/design-tokens": "^2.2.0",

diff --git a/packages/paste-theme-tokens/src/default/index.ts b/packages/paste-theme-tokens/src/default/index.ts
@@ -24,6 +24,7 @@ const lineHeights = {
   lineHeight50: '1.75rem', // #28px
   lineHeight60: '2rem', // #32px
   lineHeight70: '2.25rem', // #36px
+  lineHeight80: '2.5rem', // #40px
 };
 const maxWidths = {
   ...sizings,

diff --git a/packages/paste-theme-tokens/src/sendgrid/index.ts b/packages/paste-theme-tokens/src/sendgrid/index.ts
@@ -24,6 +24,7 @@ const lineHeights = {
   lineHeight50: '1.75rem', // #28px
   lineHeight60: '2rem', // #32px
   lineHeight70: '2.25rem', // #36px
+  lineHeight80: '2.5rem', // #40px
 };
 const maxWidths = {
   ...sizings,

diff --git a/packages/paste-theme/package.json b/packages/paste-theme/package.json
@@ -22,17 +22,18 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@twilio-paste/theme-tokens": "^0.4.0",
     "emotion-theming": "^10.0.10"
   },
   "peerDependencies": {
+    "@twilio-paste/theme-tokens": "^0.4.0",
     "@emotion/core": "^10.0.14",
     "@emotion/styled": "^10.0.14",
     "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",
@@ -41,4 +42,4 @@
     "rollup-plugin-typescript2": "^0.21.2",
     "typescript": "^3.5.2"
   }
-}
+}
diff --git a/packages/paste-website/gatsby-config.js b/packages/paste-website/gatsby-config.js
@@ -46,8 +46,7 @@ module.exports = {
       resolve: `gatsby-plugin-mdx`,
       options: {
         defaultLayouts: {
-          default: require.resolve('./src/templates/index.tsx'),
-          components: require.resolve('./src/templates/components.tsx'),
+          default: require.resolve('./src/layouts/DefaultLayout.tsx'),
         },
       },
     },

diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json
@@ -22,6 +22,7 @@
     "@mdx-js/tag": "^0.20.3",
     "@twilio-paste/box": "^0.2.4",
     "@twilio-paste/heading": "^0.3.0",
+    "@twilio-paste/screen-reader-only": "0.0.1",
     "@twilio-paste/text": "^0.3.1",
     "@twilio-paste/theme": "^0.3.0",
     "@twilio-paste/theme-tokens": "^0.4.0",

diff --git a/packages/paste-website/src/components/breadcrumb/index.tsx b/packages/paste-website/src/components/breadcrumb/index.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {themeGet} from 'styled-system';
+import {Link} from 'gatsby';
+
+const CrumbSlashStyled = styled.aside(props => ({
+  padding: `0 ${themeGet('space.space20')(props)}`,
+  display: 'inline',
+  color: themeGet('textColors.colorTextWeak')(props),
+}));
+
+const CrumbSlash: React.FC<{}> = () => <CrumbSlashStyled>/</CrumbSlashStyled>;
+
+const Breadcrumb: React.FC<{}> = ({children}) => {
+  return (
+    <>
+      {React.Children.map(children, child => (
+        <>
+          {child}
+          <CrumbSlash />
+        </>
+      ))}
+    </>
+  );
+};
+
+const BreadcrumbItem = styled(Link)`
+  height: 24px;
+  font-size: 14px;
+  line-height: 1.71;
+  letter-spacing: normal;
+  color: ${themeGet('textColors.colorTextLink')};
+`;
+
+export {Breadcrumb, BreadcrumbItem};
diff --git a/packages/paste-website/src/components/callout/types.ts b/packages/paste-website/src/components/callout/types.ts
@@ -1,14 +1,12 @@
+import {TextProps} from '@twilio-paste/text';
+
 export type CalloutVariants = 'primary' | 'secondary' | 'warning';
 
 export interface CalloutTitleProps {
   as?: string;
 }
 
-export interface CalloutTextProps {
-  as?: string;
-  marginTop?: string;
-  marginBottom?: string;
-}
+export type CalloutTextProps = Pick<TextProps, 'marginTop' | 'marginBottom' | 'as'>;
 
 export interface CalloutProps {
   marginTop?: string;