Merge release/1.23.2 into main branch (#460)

* CHORE Add release upload step to github actions
* chore/UIDS-424 update font types to regular, medium, and bold (400, 500, 700) (#428)
* update font-types to regular, medium, bold
* updates Alert__message to font-type-30--regular
* updates Pill to font-type-20--regular
* adds --medium to font-type-xx
* adds uppercase specific font-type-10
* remove --regular modifier and general organization
* Test with pull requests instead of auto-merging release (#444)
* Remove yarn install from release action
* Merge release/1.23.0 into develop branch (#449)
* Prepare release 1.23.0
* feature/UIDS-433 Add visual testing with Percy (#434)
* Prepare release 1.23.2

Author: github-actions[bot]

.github/workflows/lint.yml

@@ -10,6 +10,8 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
+        with:
+          node-version: '14.17.4'
       - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
           npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
       - run: yarn

.github/workflows/release.yml

@@ -14,6 +14,8 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
+        with:
+          node-version: '14.17.4'
       - uses: fregante/setup-git-user@v1
       - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
           npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN

.github/workflows/test.yml

@@ -10,6 +10,8 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
+        with:
+          node-version: '14.17.4'
       - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
             npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
       - run: yarn

.gitignore

@@ -28,3 +28,4 @@ lib
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+*.mp4

README.md

@@ -93,6 +93,15 @@ Runs the jest test suite
 ### `yarn lint`
 
 Runs ESLint to report on any style violations
+### Visual testing
+
+  1. Join BrowserStack (ask Brian for link)
+  1. Navigate to this project in percy [here](https://percy.io/f38ae9b9/ui-design-system)
+  1. Define `PERCY_TOKEN` in shell (the one from ui-design-system project)
+  1. `npx percy exec -- cypress run`
+  1. View results in percy.io / console
+
+> Note- we are on the free plan (5k images/month) so be mindful of the limit
 
 ## Pull requests
 

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:9009/",
+  "experimentalStudio": true
+}

cypress/integration/sample_spec.js

@@ -0,0 +1,23 @@
+/* eslint-disable arrow-body-style */
+/* eslint-disable prefer-arrow-callback */
+
+describe('Integration test with visual testing', function () {
+  it('Loads non button version', function () {
+    cy.visit('http://localhost:9009/?path=/story/design-system-form-elements-form-group--with-trailing-icon');
+
+    cy.get('#storybook-preview-iframe').iframe().find('.InputLabel').should('contain', 'Form Group with input trailing icon');
+
+    cy.percySnapshot('Non-button');
+  });
+
+  // TODO: Wait on new props to be merged into develop
+  // https://github.com/user-interviews/ui-design-system/pull/431
+  // it('Loads button version', function () {
+  //   cy.visit('http://localhost:9009/?path=/story/design-system-form-elements-form-group--with-trailing-icon-and-button');
+
+  //   cy.get('#storybook-preview-iframe').iframe().find('.InputLabel')
+  //     .should('contain', 'Form Group with input trailing icon and button');
+
+  //   cy.percySnapshot('Button');
+  // });
+});

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

cypress/support/commands.js

@@ -0,0 +1,19 @@
+/* eslint-disable arrow-body-style */
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+// https://github.com/cypress-io/cypress/issues/136#issuecomment-342391119
+Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe) => {
+  return new Cypress.Promise((resolve) => {
+    $iframe.on('load', () => {
+      resolve($iframe.contents().find('body'));
+    });
+  });
+});

cypress/support/index.js

@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@percy/cypress';
+// Alternatively you can use CommonJS syntax:
+// require('./commands')