Merge branch 'release/1.24.0' into main

Author: Rachel Roppolo

.github/workflows/create-new-release.yml

@@ -1,11 +1,6 @@
 name: "Create new release"
 
-on:
-  workflow_dispatch:
-    inputs:
-      version:
-        description: 'The version you want to release.'
-        required: true
+on: workflow_dispatch
 
 jobs:
   create-new-release:
@@ -16,6 +11,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 install

.github/workflows/percy-nightly-tests.yml

@@ -0,0 +1,24 @@
+name: "Run Nightly Percy Tests"
+on:
+  schedule:
+    - cron: "0 0 * * *"
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@master
+      - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/
+      - run: npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
+      - name: Install
+        run: yarn
+      - run: npm install -g wait-on
+      - run: yarn storybook & wait-on http://localhost:9009
+      - name: Percy Test
+        uses: percy/[email protected]
+        with:
+          command: "cypress run"
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

.github/workflows/prepare-hotfix.yml

@@ -0,0 +1,59 @@
+name: "Prepare hotfix"
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'The version you want to release.'
+        required: true
+
+jobs:
+  prepare-hotfix:
+    name: Prepare hotfix
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.17.4'
+
+      - name: Create hotfix branch
+        run: git checkout -b hotfix/${{ github.event.inputs.version }}
+
+      - name: Initialize mandatory git config
+        uses: fregante/setup-git-user@v1
+
+      - name: Bump version in package.json
+        run: yarn version --new-version ${{ github.event.inputs.version }} --no-git-tag-version
+
+      - name: Commit manifest files
+        id: make-commit
+        run: |
+          git add package.json
+          git commit --message "Prepare hotfix ${{ github.event.inputs.version }}"
+
+          echo "::set-output name=commit::$(git rev-parse HEAD)"
+
+      - name: Publish hotfix branch
+        run: git push origin hotfix/${{ github.event.inputs.version }}
+
+      - name: Merge hotfix into main branch
+        uses: thomaseizinger/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          head: hotfix/${{ github.event.inputs.version }}
+          base: main
+          title: Merge hotfix/${{ github.event.inputs.version }} into main branch
+
+      - name: Merge hotfix into develop branch
+        uses: thomaseizinger/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          head: hotfix/${{ github.event.inputs.version }}
+          base: develop
+          title: Merge hotfix/${{ github.event.inputs.version }} into develop branch
+

.github/workflows/prepare-release.yml

@@ -8,14 +8,16 @@ on:
         required: true
 
 jobs:
-  create-new-release:
-    name: Create new release
+  prepare-release:
+    name: Prepare release
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 0
       - uses: actions/setup-node@v1
+        with:
+          node-version: '14.17.4'
 
       - name: Create release branch
         run: git checkout -b release/${{ github.event.inputs.version }}

.github/workflows/release.yml

@@ -0,0 +1,4 @@
+version: 2
+snapshot:
+  widths:
+    - 1280

.percy.yml

@@ -1,38 +1,38 @@
 # 🌤️ What is the goal of the design system?
 
-The goal of the design system is to achieve visual and experiential consistency throughout the app while streamlining the design and implementation process. The design system should contain all reusable components, one-off variations, and guidelines that are used to build up the existing and future screens of our application. It should direct us to be mindful of when we're consciously diverging from the established system. 
+The goal of the design system is to achieve visual and experiential consistency throughout the app while streamlining the design and implementation process. The design system should contain all reusable components, one-off variations, and guidelines that are used to build up the existing and future screens of our application. It should direct us to be mindful of when we're consciously diverging from the established system.
 
 ## References and inspiration
 - [Carbon - IBM](https://www.carbondesignsystem.com/)
-- [Material Design](https://material.io/design) 
+- [Material Design](https://material.io/design)
 - [Primer - Github](https://primer.style/)
 - [Ant Design](https://ant.design/)
 
 # Updating
 
 ## 🕰️ When do we update the design system?
 
-💚 **Scenario: We need a new component in the design system that is already in the Figma DS, and adding the new component is straightforward and will not significantly affect timeline of the effort.** 
+💚 **Scenario: We need a new component in the design system that is already in the Figma DS, and adding the new component is straightforward and will not significantly affect timeline of the effort.**
 
-We should go ahead and add the new component into Storybook and use the new component in the design. 
+We should go ahead and add the new component into Storybook and use the new component in the design.
 
-⏲️ **Scenario: We need a new component in the design system that is already in the Figma DS, but adding the new component will affect timeline for the effort.** 
+⏲️ **Scenario: We need a new component in the design system that is already in the Figma DS, but adding the new component will affect timeline for the effort.**
 
-We should build the component in a way that will allow for simple transfer into the design system.  Adding the component into the design system should be a follow-on task immediately after the effort. 
+We should build the component in a way that will allow for simple transfer into the design system.  Adding the component into the design system should be a follow-on task immediately after the effort.
 
-🧠 **Scenario: We have a situation where a new component would improve the usability of our design, but it is not yet defined in the Figma DS or in Storybook.** 
+🧠 **Scenario: We have a situation where a new component would improve the usability of our design, but it is not yet defined in the Figma DS or in Storybook.**
 
 These often pop up in the #design-review channel and decisions will depend on designer and development bandwidth. We should strive to make considered designs that continue to push the usability of our app forward while building brand consistency. If there is alignment on a design need, we should add the new component or variation to the Figma DS and add the new component into the design system. If we do not have bandwidth to align on a new design and add the variation to the design system, we should do the best we can with existing patterns.
 
 ## Who makes design system decisions?
 
-Designers can make proposals to update the design system at any point. These changes are submitted to #design-review, and other designers can weigh in with thoughts. There should be a general consensus on why and how the design system should be changed to better suit our needs. Wen is responsible for weighing input and proposing a path forward, looping in JH when necessary. 
+Designers can make proposals to update the design system at any point. These changes are submitted to #design-review, and other designers can weigh in with thoughts. There should be a general consensus on why and how the design system should be changed to better suit our needs. Wen is responsible for weighing input and proposing a path forward, looping in JH when necessary.
 
-On the development side, Dave and Rachel oversee how components are organized and implemented to be put into use most effectively. 
+On the development side, Dave and Rachel oversee how components are organized and implemented to be put into use most effectively.
 
 ## How do we decide whether something is one-off or when the component should be updated universally?
 
-Development-wise, I think we should always strive for universal changes if components are being updated. However, some changes are easily made with confidence that we won't cause issues with the app, while others will require more QA. 
+Development-wise, I think we should always strive for universal changes if components are being updated. However, some changes are easily made with confidence that we won't cause issues with the app, while others will require more QA.
 
 ### Safe to update:
 
@@ -48,13 +48,13 @@ Development-wise, I think we should always strive for universal changes if compo
 
 ## How can we include time for updating components during cycle work?
 
-Keeping the design system relevant is important for consistency in our app. Core product requirements should still take priority, but we should make the design system updates necessary for each effort before tackling nice-to-haves. 
+Keeping the design system relevant is important for consistency in our app. Core product requirements should still take priority, but we should make the design system updates necessary for each effort before tackling nice-to-haves.
 
 ## ✏️ How do we write stories and documentation?
 
-- For every component, we typically separate each variant out into its own story that gets exported. 
+- For every component, we typically separate each variant out into its own story that gets exported.
 - Documentation lives in `Component.mdx` which references stories defined in `Component.stories.jsx`. See documentation style here in [Stories with arbitrary MDX](https://github.com/storybookjs/storybook/blob/master/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx).
-- See our [Storybook Notion Doc](https://www.notion.so/userinterviews1/Storybook-9a3585db57514ec783e39c78518ad5e6) for examples. 
+- See our [Storybook Notion Doc](https://www.notion.so/userinterviews1/Storybook-9a3585db57514ec783e39c78518ad5e6) for examples.
 
 # Future additions to this document
 
@@ -72,7 +72,7 @@ How do we determine whether it's a major, minor, or patch release?
 # Developer Resources
 
 ## Initial Setup
-After cloning the repo, obtain a `.npmrc` file from another developer. This file contains authorization tokens for any private 
+After cloning the repo, obtain a `.npmrc` file from another developer. This file contains authorization tokens for any private
 node packages.
 
 ## Available Scripts
@@ -103,6 +103,30 @@ Runs ESLint to report on any style violations
 
 > Note- we are on the free plan (5k images/month) so be mindful of the limit
 
+### `yarn rs:link`
+
+Creates symlinks for packages needed to develop/debug against our `rails-server` repository.
+
+### `yarn rs:link:watch`
+
+Trigger a production build when files are changed.
+
+### `yarn rs:unlink`
+
+Remove symlinked packages.
+### Visual testing
+
+  1. Join BrowserStack team (ask Brian/Bob for link)
+  1. Navigate to this project in [Percy](https://percy.io/f38ae9b9/ui-design-system)
+
+  ## Local setup
+  1. Define `PERCY_TOKEN` ENV (the one from ui-design-system project found above)
+  1. Run `yarn storybook` in one tab
+  1. Run `npx percy exec -- cypress run` in another
+  1. View results in percy.io & console
+
+> Note- we are running this once a day via github actions.
+
 ## Pull requests
 
 Our branch names consist of 3 parts:
@@ -131,9 +155,33 @@ Once your pull request has been approved by all parties, you may begin the merge
 * Run `yarn test` to ensure tests are passing.
 * Click the Squash and merge button on your pull request and edit your commit message to a concise description of your changes.
 
-## Release steps
+## Release process
+
+This repository follows the [git flow release process](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow).
+* Each new feature branch uses develop as its parent branch and is merged back into develop upon completion.
+* Each new hotfix branch uses main as its parent branch and is merged directly into main.
+
+This package uses [Semantic versioning](https://semver.org/), which requires version numbers in MAJOR.MINOR.PATCH format. Any breaking changes to the API require an update to the MAJOR version. Backwards compatible changes only require an update to the MINOR version. Hotfixes and patches need only update the PATCH version.
 
-This package uses [Semantic versioning](https://semver.org/), which requires version numbers in MAJOR.MINOR.PATCH format. Any breaking changes to the API require an update to the MAJOR version. Backwards compatible changes only require an update to the MINOR version. Hotfixes and patches need only update the PATCH version. Once you have commits ready to bundle you may begin the release process:
+To create a new release off of the current develop:
+* Run the "Prepare release" github action which will
+  * Create a new release branch off of the latest develop and increment package.json
+  * Create a pull request of the release branch against main
+  * Create a pull request of the release branch against develop
+  * From there the developer can merge the PRs via github
+* Run the "Create new release" github action which will build the project and create a new release off of the latest main
+
+To create a patch release for a hotfix off the current main:
+* Run the "Prepare hotfix" github action which will
+  * Create a hotfix off the latest main and increment package.json
+  * Create a pull request of the hotfix branch against main
+  * Create a pull request of the release branch against develop
+  * From there the developer can merge the PRs via github
+* Run the "Create new release" github action which will build the project and create a new release off of the latest main
+
+## Manual Release steps
+
+If you are not able to or choose not to use the github actions described above, the following is the process to manually create a new release. Once you have commits ready to bundle you may begin the release process:
 * Update the "version" field in package.json.
 * Run `yarn build` to compile the source files and write out to the lib directory.
 * Run `npm pack` to archive all of the source files. Note: you can run `npm pack --dry-run` to see a list of files that will be included in the package. This is useful to double check a new component is being added or to see the size of the package/individual files.
@@ -143,3 +191,29 @@ This package uses [Semantic versioning](https://semver.org/), which requires ver
 * Run `git log $(git describe --tags --abbrev=0)..HEAD --oneline` to get a list of all commits since the latest release and copy these into the "Describe this release" field.
 * Upload the binary that was created from running `npm pack`.
 * Publish release.
+
+## Developing against the Rails Server repo
+
+### Starting up development
+1. run these commands inside the root of the DS repo:
+````bash
+  yarn rs:link && yarn rs:link:watch
+````
+💡 at this point you should see a nodemon process running
+
+2. run these commands inside the root of the RS repo:
+````bash
+  bin/link-ds
+````
+### Wrapping up development
+1. run these commands inside the root of the RS repo:
+````bash
+  bin/unlink-ds
+````
+2. run these commands inside the root of the DS repo:
+````bash
+  yarn rs:unlink
+````
+
+#### 🤔 Snags
+- you'll have to manually refresh your browser tab, after the automatic refresh, to see your expected changes.

README.md

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+yarn link
+cd node_modules/react
+yarn link
+cd ../../node_modules/react-dom
+yarn link

bin/link-rs

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+unlink()
+{
+  local package_name="${2:-$1}"
+
+  output=$(eval "yarn unlink $1")
+
+  echo "$output"
+  echo "== $package_name unlinked =="
+}
+
+unlink '' 'DS package'
+unlink 'react'
+unlink 'react-dom'
+
+yarn install --force