Merge branch 'feature-multidomain' into TR-725-cross-domain-bundle

browser-versions.json

@@ -1,4 +1,4 @@
 {
-  "chrome:beta": "91.0.4472.57",
+  "chrome:beta": "91.0.4472.69",
   "chrome:stable": "90.0.4430.212"
 }

circle.yml

@@ -1353,7 +1353,14 @@ jobs:
           command: yarn workspace @cypress/design-system build
       - run:
           name: Run tests
-          command: yarn test --reporter cypress-circleci-reporter --reporter-options resultsDir=./test_results
+          # will use PERCY_TOKEN environment variable if available
+          command: |
+            CYPRESS_KONFIG_ENV=production \
+            PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_ID \
+            PERCY_ENABLE=${PERCY_TOKEN:-0} \
+            PERCY_PARALLEL_TOTAL=-1 \
+            yarn percy exec --parallel -- -- \
+            yarn test --reporter cypress-circleci-reporter --reporter-options resultsDir=./test_results
           working_directory: npm/design-system
       - store_test_results:
           path: npm/design-system/test_results

npm/design-system/cypress.json

@@ -1,6 +1,6 @@
 {
-  "viewportWidth": 400,
-  "viewportHeight": 400,
+  "viewportWidth": 1024,
+  "viewportHeight": 800,
   "video": false,
   "projectId": "z9dxah",
   "testFiles": "**/*spec.{js,jsx,ts,tsx}",
@@ -13,4 +13,4 @@
   ],
   "componentFolder": "src",
   "fixturesFolder": false
-}
+}

npm/design-system/cypress/support/index.js

@@ -1,5 +1,6 @@
 import 'regenerator-runtime/runtime'
 import 'cypress-real-events/support'
+import '@percy/cypress'
 import './storybook'
 
 // Need to register these once per app. Depending which components are consumed

npm/design-system/src/components/Nav/LeftNav.spec.tsx

@@ -4,6 +4,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { fab } from '@fortawesome/free-brands-svg-icons'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 
+import { mountAndSnapshot } from 'util/testing'
 import { NavItem } from './types'
 import { LeftNav } from './LeftNav'
 
@@ -43,7 +44,7 @@ describe('LeftNav', () => {
   })
 
   it('renders a stack of items', () => {
-    mount(<LeftNav items={items} />)
+    mountAndSnapshot(<LeftNav items={items} />)
 
     cy.get('nav').should('exist')
   })

npm/design-system/src/components/fileTree/FileTree.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { mount } from '@cypress/react'
-import { FileTree } from './index'
+import { FileTree } from './FileTree'
+import { mountAndSnapshot } from 'util/testing'
 
 const files = [
   {
@@ -36,7 +37,7 @@ describe('FileTree', () => {
   it('should send onFilePress callback on space and enter', () => {
     const filePressStub = cy.stub()
 
-    mount(
+    mountAndSnapshot(
       <div style={{ height: 500, width: 500 }}>
         <FileTree files={files} rootDirectory="/" emptyPlaceholder="No specs found" onFilePress={filePressStub} />
       </div>,
@@ -118,6 +119,8 @@ describe('FileTree', () => {
 
       cy.get('[data-cy=virtualized-tree] > div').scrollTo('bottom')
 
+      cy.contains('.treeChild', 'File 99').should('be.visible')
+
       cy.get('[data-cy=virtualized-tree]').focus().type('{downarrow}').type('{downarrow}')
 
       cy.contains('.treeChild', 'File 3').should('be.visible')

npm/design-system/src/components/searchInput/SearchInput.spec.tsx

@@ -3,6 +3,7 @@ import { mount } from '@cypress/react'
 
 import { SearchInput } from './SearchInput'
 import { useCallback, useState } from 'react'
+import { mountAndSnapshot } from 'util/testing'
 
 describe('SearchInput', () => {
   const StatefulWrapper: React.FC<{onInput?: (input: string) => void}> = ({ onInput }) => {
@@ -18,7 +19,7 @@ describe('SearchInput', () => {
   }
 
   it('should render', () => {
-    mount(<SearchInput placeholder="foo" value="" aria-label="Search" onInput={() => {}} />)
+    mountAndSnapshot(<SearchInput placeholder="foo" value="" aria-label="Search" onInput={() => {}} />)
     cy.get('input').should('exist')
   })
 
@@ -47,6 +48,8 @@ describe('SearchInput', () => {
       cy.get('input').type('some input')
 
       cy.get('[aria-label="Clear search"]').should('exist')
+
+      cy.percySnapshot()
     })
 
     it('should clear input on click', () => {

npm/design-system/src/components/virtualizedTree/VirtualizedTree.spec.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react'
-import { mount } from '@cypress/react'
 import { composeStories } from '@storybook/testing-react'
-import * as stories from './VirtualizedTree.stories'
 
+import { mountAndSnapshot } from 'util/testing'
+
+import * as stories from './VirtualizedTree.stories'
 const { VirtualizedTree } = composeStories(stories)
 
+// TODO: Autogenerate from stories
 describe('<VirtualizedTree />', () => {
-  it('playground', () => {
-    mount(<VirtualizedTree />)
+  it('VirtualizedTree', () => {
+    mountAndSnapshot(<VirtualizedTree />)
   })
 })

npm/design-system/src/core/button/Button.spec.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { composeStories } from '@storybook/testing-react'
+
+import { mountAndSnapshot } from 'util/testing'
+
+import * as stories from './Button.stories'
+const { Button, IconButton } = composeStories(stories)
+
+// TODO: Autogenerate from stories
+describe('<Button />', () => {
+  it('Button', () => {
+    mountAndSnapshot(<Button />)
+  })
+
+  it('ButtonSizes', () => {
+    const ButtonSizes = () => (
+      <div style={{ width: 500 }}>
+        {stories.buttonSizesWithSizes(['text-xs', 'text-s', 'text-ms', 'text-m', 'text-ml', 'text-l', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl'])}
+      </div>
+    )
+
+    mountAndSnapshot(<ButtonSizes />)
+  })
+
+  it('IconButton', () => {
+    mountAndSnapshot(<IconButton />)
+  })
+})

npm/design-system/src/core/button/Button.stories.tsx

@@ -32,22 +32,24 @@ export const Button = createStory(() => (
   </div>
 ))
 
+export const buttonSizesWithSizes = (sizes: string[]) => sizes.filter((key) => key !== 'type' && !key.startsWith('line-height') && !key.startsWith('text-mono')).map((key) => {
+  const size = key.replace('text-', '')
+
+  return (
+    <ButtonComponent
+      key={key}
+      size={size as TextSize}
+      aria-label="buttonPress"
+    >
+      {`Button ${size}`}
+    </ButtonComponent>
+  )
+})
+
 export const ButtonSizes = createStory(() => (
   <div>
     <div style={{ width: 500 }}>
-      {Object.keys(typography).filter((key) => key !== 'type' && !key.startsWith('line-height') && !key.startsWith('text-mono')).map((key) => {
-        const size = key.replace('text-', '')
-
-        return (
-          <ButtonComponent
-            key={key}
-            size={size as TextSize}
-            aria-label="buttonPress"
-          >
-            {`Button ${size}`}
-          </ButtonComponent>
-        )
-      })}
+      {buttonSizesWithSizes(Object.keys(typography))}
     </div>
   </div>
 ))

npm/design-system/src/core/icon/Icon.spec.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { Icon } from './Icon'
+import { mountAndSnapshot } from 'util/testing'
+
+import styles from './Icon.stories.module.scss'
+import { iconLines } from './Icon.stories'
+
+// TODO: Autogenerate from stories
+describe('<Icon />', () => {
+  it('Standard icons', () => {
+    const Icons = () => (
+      <div>
+        <Icon className={styles.icon} icon='check' size='xl' />
+        <Icon className={styles.icon} icon='exclamation' size='xl' />
+        <Icon className={styles.icon} icon='home' size='xl' />
+        <Icon className={styles.icon} icon='arrow-circle-up' size='xl' />
+      </div>
+    )
+
+    mountAndSnapshot(<Icons />)
+  })
+
+  it('Icon lines', () => {
+    const Icons = () => iconLines(['text-xs', 'text-s', 'text-ms', 'text-m', 'text-ml', 'text-l', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl'])
+
+    mountAndSnapshot(<Icons />)
+  })
+})

npm/design-system/src/core/icon/Icon.stories.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import { Story } from '@storybook/react'
 
 import { createStory, createStorybookConfig } from 'stories/util'
 
@@ -29,11 +28,34 @@ export default createStorybookConfig({
       },
     },
   },
+  excludeStories: ['IconLines'],
 })
 
-const Template: Story<{
-  font: string
-}> = ({ font }) => (
+export const iconLines = (sizes: string[]) => sizes.filter((key) => key !== 'type').map((key) => {
+  const size = key.replace('text-', '')
+
+  return (
+    <div
+      key={key}
+      style={{
+        marginBottom: '2em',
+      }}
+    >
+      <div className="text-mono-m">
+        {size}
+      </div>
+      <Baseline className={key}>
+        <IconComponent className={styles.textIcon} icon='square' size={size as TextSize} />
+        <IconComponent className={styles.textIcon} icon='exclamation' size={size as TextSize} />
+          The five boxing wizards jump quickly
+        <IconComponent icon='exclamation' size={size as TextSize} />
+        <IconComponent icon='bell' size={size as TextSize} />
+      </Baseline>
+    </div>
+  )
+})
+
+export const Icon = createStory<{ font: string }>(({ font }) => (
   <div style={{
     '--font-stack-sans': font,
   } as React.CSSProperties}
@@ -43,32 +65,8 @@ const Template: Story<{
     <IconComponent className={styles.icon} icon='home' size='xl' />
     <IconComponent className={styles.icon} icon='arrow-circle-up' size='xl' />
     <br />
-    {Object.keys(typography).filter((key) => key !== 'type').map((key) => {
-      const size = key.replace('text-', '')
-
-      return (
-        <div
-          key={key}
-          style={{
-            marginBottom: '2em',
-          }}
-        >
-          <div className="text-mono-m">
-            {size}
-          </div>
-          <Baseline className={key}>
-            <IconComponent className={styles.textIcon} icon='square' size={size as TextSize} />
-            <IconComponent className={styles.textIcon} icon='exclamation' size={size as TextSize} />
-              The five boxing wizards jump quickly
-            <IconComponent icon='exclamation' size={size as TextSize} />
-            <IconComponent icon='bell' size={size as TextSize} />
-          </Baseline>
-        </div>
-      )
-    })}
+    {iconLines(Object.keys(typography))}
   </div>
-)
-
-export const Icon = createStory(Template, {
+), {
   font: fontOptions[0],
 })

npm/design-system/src/core/input/Input.spec.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { composeStories } from '@storybook/testing-react'
+import * as stories from './Input.stories'
+import { mountAndSnapshot } from 'util/testing'
+import { iconSizesWithSizes } from './Input.stories'
+
+const { Input, Icon } = composeStories(stories)
+
+// TODO: Autogenerate from stories
+describe('<Input />', () => {
+  it('Standard input', () => {
+    mountAndSnapshot(<Input />)
+  })
+
+  it('IconInput', () => {
+    mountAndSnapshot(<Icon />)
+  })
+
+  it('IconInput sizes', () => {
+    const IconInput = () => (
+      <>
+        {iconSizesWithSizes(['xs', 's', 'ms', 'm', 'ml', 'l', 'xl', '2xl'])}
+      </>
+    )
+
+    mountAndSnapshot(<IconInput />)
+  })
+})

npm/design-system/src/core/input/Input.stories.tsx

@@ -11,6 +11,7 @@ import { TextSize } from 'css'
 
 export default createStorybookConfig({
   title: 'Core/Input',
+  excludeStories: ['iconSizesWithSizes'],
 })
 
 export const Input = createStory(() => (
@@ -110,30 +111,32 @@ export const Icon = createStory(() => (
   </div>
 ))
 
+export const iconSizesWithSizes = (sizes: string[]) => sizes.map((key) => {
+  const size = key.replace('text-', '')
+
+  return (
+    <IconInputComponent
+      key={key}
+      label={{ type: 'aria', contents: `input size ${size}` }}
+      size={size as TextSize}
+      prefixIcon={{
+        icon: 'home',
+        onPress: action('onPrefixClick'),
+        'aria-label': 'onPrefixClick',
+      }}
+      suffixIcon={{
+        icon: 'times',
+        onPress: action('onSuffixClick'),
+        'aria-label': 'onSuffixClick',
+      }}
+    />
+  )
+})
+
 export const IconSizes = createStory(() => (
   <div>
     <div style={{ width: 500 }}>
-      {Object.keys(typography).filter((key) => key !== 'type' && !key.startsWith('line-height') && !key.startsWith('text-mono') && key !== 'text-3xl' && key !== 'text-4xl').map((key) => {
-        const size = key.replace('text-', '')
-
-        return (
-          <IconInputComponent
-            key={key}
-            label={{ type: 'aria', contents: `input size ${size}` }}
-            size={size as TextSize}
-            prefixIcon={{
-              icon: 'home',
-              onPress: action('onPrefixClick'),
-              'aria-label': 'onPrefixClick',
-            }}
-            suffixIcon={{
-              icon: 'times',
-              onPress: action('onSuffixClick'),
-              'aria-label': 'onSuffixClick',
-            }}
-          />
-        )
-      })}
+      {iconSizesWithSizes(Object.keys(typography).filter((key) => key !== 'type' && !key.startsWith('line-height') && !key.startsWith('text-mono') && key !== 'text-3xl' && key !== 'text-4xl'))}
     </div>
   </div>
 ))