Merge branch 'main' into fix/usetoaster-dismiss

twilio-labs · Feb 11, 2021 · 9a56423 · 9a56423
2 parents 6127106 + 40dcc15
commit 9a56423
Show file tree

Hide file tree

Showing 24 changed files with 166 additions and 83 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -1,13 +1,13 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": [
-    "@changesets/changelog-github",
-    { "repo": "twilio-labs/paste" }
-  ],
+  "changelog": ["@changesets/changelog-github", {"repo": "twilio-labs/paste"}],
   "commit": false,
   "linked": [],
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true
+  },
   "ignore": []
 }
diff --git a/.changeset/serious-insects-enjoy.md b/.changeset/serious-insects-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@twilio-paste/icons': patch
+---
+
+adds product icon for event streams app
diff --git a/.github/workflows/package-size.yml b/.github/workflows/package-size.yml
@@ -17,4 +17,4 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"
-          build-script: "package-size-action-build"
+          build-script: "build:js"
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
@@ -18,8 +18,9 @@ jobs:
         id: yarn-cache
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2
-        name: Load Yarn cache
+      - name: Load Yarn cache
+        uses: actions/cache@v2
+        id: yarn_cache_id
         with:
           path: ${{ steps.yarn-cache.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -28,13 +29,15 @@ jobs:
 
       - name: restore lerna
         uses: actions/cache@v2
+        id: node_modules_cache_id
         with:
           path: |
             node_modules
             */*/node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install Dependencies
+        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: yarn install --frozen-lockfile && yarn bootstrap
 
       - name: Build packages
@@ -58,8 +61,9 @@ jobs:
         id: yarn-cache
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2
-        name: Load Yarn cache
+      - name: Load Yarn cache
+        uses: actions/cache@v2
+        id: yarn_cache_id
         with:
           path: ${{ steps.yarn-cache.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -68,13 +72,15 @@ jobs:
 
       - name: restore lerna
         uses: actions/cache@v2
+        id: node_modules_cache_id
         with:
           path: |
             node_modules
             */*/node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install Dependencies
+        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: yarn install --frozen-lockfile && yarn bootstrap
 
       - name: Build packages
@@ -98,8 +104,9 @@ jobs:
         id: yarn-cache
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2
-        name: Load Yarn cache
+      - name: Load Yarn cache
+        uses: actions/cache@v2
+        id: yarn_cache_id
         with:
           path: ${{ steps.yarn-cache.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -108,13 +115,15 @@ jobs:
 
       - name: restore lerna
         uses: actions/cache@v2
+        id: node_modules_cache_id
         with:
           path: |
             node_modules
             */*/node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install Dependencies
+        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: yarn install --frozen-lockfile && yarn bootstrap
 
       - name: Build packages
@@ -138,8 +147,9 @@ jobs:
         id: yarn-cache
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2
-        name: Load Yarn cache
+      - name: Load Yarn cache
+        uses: actions/cache@v2
+        id: yarn_cache_id
         with:
           path: ${{ steps.yarn-cache.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -148,13 +158,15 @@ jobs:
 
       - name: restore lerna
         uses: actions/cache@v2
+        id: node_modules_cache_id
         with:
           path: |
             node_modules
             */*/node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install Dependencies
+        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: yarn install --frozen-lockfile && yarn bootstrap
 
       - name: Build packages

diff --git a/.github/workflows/vrt_main.yml b/.github/workflows/vrt_main.yml
@@ -27,8 +27,9 @@ jobs:
         id: yarn-cache
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2
-        name: Load Yarn cache
+      - name: Load Yarn cache
+        uses: actions/cache@v2
+        id: yarn_cache_id
         with:
           path: ${{ steps.yarn-cache.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -37,13 +38,15 @@ jobs:
 
       - name: restore lerna
         uses: actions/cache@v2
+        id: node_modules_cache_id
         with:
           path: |
             node_modules
             */*/node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install Dependencies
+        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: yarn install --frozen-lockfile && yarn bootstrap
 
       - name: Build packages

diff --git a/.github/workflows/vrt_pull_request.yml b/.github/workflows/vrt_pull_request.yml
@@ -24,8 +24,9 @@ jobs:
         id: yarn-cache
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2
-        name: Load Yarn cache
+      - name: Load Yarn cache
+        uses: actions/cache@v2
+        id: yarn_cache_id
         with:
           path: ${{ steps.yarn-cache.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -34,13 +35,15 @@ jobs:
 
       - name: restore lerna
         uses: actions/cache@v2
+        id: node_modules_cache_id
         with:
           path: |
             node_modules
             */*/node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install Dependencies
+        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: yarn install --frozen-lockfile && yarn bootstrap
 
       - name: Build packages

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -98,4 +98,11 @@
 </style>
 
 <link rel="preconnect" href="https://assets.twilio.com" crossorigin />
+<link
+  rel="preload"
+  href="https://assets.twilio.com/public_assets/paste-fonts/main-1.2.0/Inter.var.woff2?v=3.15"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
 <link rel="stylesheet" href="https://assets.twilio.com/public_assets/paste-fonts/main-1.2.0/fonts.css">
diff --git a/package.json b/package.json
@@ -23,8 +23,7 @@
     "watch:icons": "yarn workspace @twilio-paste/icons watch",
     "prebuild": "node ./tools/build/pre-build.js && yarn packages:check",
     "build": "lerna run build --ignore @twilio-paste/website --ignore @twilio-paste/theme-designer --ignore @twilio-paste/nextjs-template",
-    "build:js": "yarn prebuild && lerna run build:js --since HEAD --ignore @twilio-paste/website --ignore @twilio-paste/theme-designer",
-    "build:dev": "yarn prebuild && lerna run build:dev --since HEAD --ignore @twilio-paste/website",
+    "build:js": "yarn prebuild && lerna run build:js --ignore @twilio-paste/website --ignore @twilio-paste/theme-designer",
     "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",

diff --git a/packages/paste-core/components/avatar/stories/index.stories.tsx b/packages/paste-core/components/avatar/stories/index.stories.tsx
@@ -10,6 +10,8 @@ import {Avatar} from '../src';
 export default {
   title: 'Components/Avatar',
   component: Avatar,
+  // Sets the diffThreshold for all stories
+  chromatic: {diffThreshold: 0.3},
 };
 
 export const Initials = (): React.ReactNode => {
@@ -64,7 +66,7 @@ export const Image = (): React.ReactNode => {
 };
 
 Image.story = {
-  parameters: {chromatic: {delay: 600}},
+  parameters: {chromatic: {delay: 3000}},
 };
 
 export const ResponsiveInitials = (): React.ReactNode => {
@@ -84,5 +86,5 @@ export const ResponsiveImage = (): React.ReactNode => {
 };
 
 ResponsiveImage.story = {
-  parameters: {chromatic: {delay: 600}},
+  parameters: {chromatic: {delay: 3000}},
 };
diff --git a/packages/paste-core/components/menu/stories/index.stories.tsx b/packages/paste-core/components/menu/stories/index.stories.tsx
@@ -194,6 +194,10 @@ export default {
   title: 'Components/Menu',
   component: Menu,
   subcomponents: {MenuButton, SubMenuButton, MenuGroup, MenuItem, MenuSeparator},
+  parameters: {
+    // Sets a delay for the component's stories
+    chromatic: {delay: 3000},
+  },
 };
 
 export const Default = (): React.ReactNode => {

diff --git a/packages/paste-core/components/popover/stories/index.stories.tsx b/packages/paste-core/components/popover/stories/index.stories.tsx
@@ -8,6 +8,10 @@ export default {
   title: 'Components/Popover',
   component: Popover,
   subcomponents: {PopoverContainer, PopoverButton},
+  parameters: {
+    // Sets a delay and diff threshold for the component's stories
+    chromatic: {delay: 3000, diffThreshold: 0.3},
+  },
 };
 
 export const Default = (): React.ReactNode => {
@@ -23,10 +27,6 @@ export const Default = (): React.ReactNode => {
   );
 };
 
-Default.story = {
-  parameters: {chromatic: {delay: 300}},
-};
-
 export const PopoverTop = (): React.ReactNode => {
   return (
     <Box bottom={12} position="absolute">

diff --git a/packages/paste-core/components/tooltip/stories/index.stories.tsx b/packages/paste-core/components/tooltip/stories/index.stories.tsx
@@ -38,6 +38,10 @@ export default {
   decorators: [withKnobs],
   excludeStories: ['StateHookExample'],
   component: Tooltip,
+  parameters: {
+    // Sets a delay for the component's stories
+    chromatic: {delay: 3000, diffThreshold: 0.3},
+  },
 };
 
 export const Default = (): React.ReactNode => {
@@ -50,10 +54,6 @@ export const Default = (): React.ReactNode => {
   );
 };
 
-Default.story = {
-  parameters: {chromatic: {delay: 800}},
-};
-
 export const TooltipPlacements = (): React.ReactNode => {
   return (
     <Box margin="space190" padding="space190">
@@ -75,10 +75,6 @@ export const TooltipPlacements = (): React.ReactNode => {
   );
 };
 
-TooltipPlacements.story = {
-  parameters: {chromatic: {delay: 800}},
-};
-
 export const AutomaticEdgePlacement = (): React.ReactNode => {
   return (
     <>
@@ -124,7 +120,6 @@ export const AutomaticAdjustedPlacement = (): React.ReactNode => {
 
 AutomaticAdjustedPlacement.story = {
   name: 'Automatic adjusted placement',
-  parameters: {chromatic: {delay: 300}},
 };
 
 export const IconButtonTooltip = (): React.ReactNode => {

diff --git a/packages/paste-core/core-bundle/package.json b/packages/paste-core/core-bundle/package.json
@@ -15,6 +15,7 @@
   "scripts": {
     "build": "yarn clean && yarn generate-packages && yarn compile && yarn build:types",
     "build:dev": "yarn clean && yarn generate-packages && yarn compile:dev && yarn build:types",
+    "build:js": "yarn clean && yarn generate-packages && yarn compile",
     "build:types": "./tools/build-types.sh",
     "generate-packages": "node ./tools/generate.js",
     "clean": "yarn clean:packages && rm -rf ./dist && rm -rf tsconfig.tsbuildinfo && rm -rf .rpt2_cache",

diff --git a/packages/paste-icons/build.icon-list.js b/packages/paste-icons/build.icon-list.js