Merge remote-tracking branch 'origin/main' into dependencies

* origin/main: (205 commits)
  chore(release): publish
  feat(NotificationItemNew): add new forum notification icons
  ci: block PRs until automerge label is added, other ci cleanup
  chore(release): publish
  style(Anchor): Adds new anchor variants and styles necessary for usage [GM-159] [GM-160]
  chore(release): publish
  fix(Card)!: Animation Fixes and Gamut migration
  chore(release): publish
  fix(NotificationItemNew): tracking fix & accessibility improvement
  chore(release): publish
  feat(Form): Input, Select, TextArea, + Error Updates (#1439)
  chore(release): publish
  feat(PageHero): don't hide video on xs screens (#1505)
  chore(release): publish
  feat(GlobalHeader): header animation on scroll (#1430)
  chore(release): publish
  feat(GridForm): Add tooltip to gridform fields
  chore(release): publish
  fix(Modal): add aria-label prop
  chore(release): publish
  ...

Author: jakemhiller

.circleci/config.yml

@@ -9,7 +9,7 @@ references:
       - image: circleci/node:12.16.0
     working_directory: ~/repo
     environment:
-      GITHUB_BOT_USERNAME: codecademydev
+      IGNORE_COMMIT_MESSAGE: 'chore(release): publish'
       NODE_OPTIONS: '--max_old_space_size=8196'
       CIRCLE_TEST_REPORTS: /tmp/test-results
 
@@ -86,8 +86,9 @@ references:
     run:
       name: Skip build from automated commit
       command: |
-        echo "Build started due to commit by ${CIRCLE_USERNAME}, blocking builds started by ${GITHUB_BOT_USERNAME}"
-        if [ $CIRCLE_USERNAME == $GITHUB_BOT_USERNAME ] ; then circleci-agent step halt ; fi
+        export COMMIT_MESSAGE=$(git log --format=oneline -n 1 $CIRCLE_SHA1)
+        echo "Build started due to commit with message $COMMIT_MESSAGE, blocking builds started by ${IGNORE_COMMIT_MESSAGE}"
+        if [[ $COMMIT_MESSAGE == *"${IGNORE_COMMIT_MESSAGE}"* ]] ; then circleci-agent step halt ; fi
 
   skip_if_not_pr: &skip_if_not_pr
     run:
@@ -186,21 +187,6 @@ jobs:
           name: Lerna Publish
           command: yarn lerna publish --yes --conventional-commits --changelog-preset conventionalcommits --include-merged-tags --create-release=github
 
-  publish_next:
-    <<: *default_env
-    resource_class: large
-    steps:
-      - *skip_on_automated_commit
-      - *add_github_ssh_key
-      - *set_git_user
-      - checkout
-      - *restore_node_modules
-      - *set_npm_token
-      - *build_changed_packages
-      - run:
-          name: Lerna Publish
-          command: yarn lerna publish --canary --preid=next --dist-tag=next
-
   deploy:
     <<: *default_env
     resource_class: large
@@ -332,18 +318,11 @@ workflows:
           filters:
             branches:
               only: main
-      - publish_next:
-          requires:
-            - checkout_code
-          filters:
-            branches:
-              only: next
       - publish_alpha:
           filters:
             branches:
               ignore:
                 - main
-                - next
                 - gh-pages
           requires:
             - checkout_code
@@ -366,7 +345,6 @@ workflows:
             branches:
               ignore:
                 - main
-                - next
                 - gh-pages
           requires:
             - checkout_code

.eslintrc.js

@@ -1,24 +1,11 @@
-/**
- * @remarks
- * This could just use `extends`
- * but making a monorepo module a dependency in the root
- * causes an extra copy to be saved to node-modules that isn't
- * symlinked, which we don't want. This should eventually just
- * move to a shared private module instead of having this in the
- * project root
- */
-const defaultConfig = require('./packages/eslint-config');
-
 module.exports = {
-  ...defaultConfig,
   root: true,
 
+  extends: [require.resolve('./packages/eslint-config')],
+
+  plugins: ['local-rules'],
+
   overrides: [
-    ...defaultConfig.overrides,
-    {
-      files: ['*.mdx'],
-      parser: 'eslint-mdx',
-    },
     {
       files: ['**/typings/*', '*.d.ts'],
       parserOptions: {
@@ -45,6 +32,7 @@ module.exports = {
               'ImportDeclaration[source.value=/^((?!module.scss).)*(.scss)$/]',
           },
         ],
+        'local-rules/gamut-import-paths': 'error',
       },
     },
   ],

.github/workflows/auto-request-review.yml

@@ -0,0 +1,16 @@
+name: Auto Request Review
+
+on:
+  pull_request:
+    types: [opened, ready_for_review, reopened]
+
+jobs:
+  auto-request-review:
+    name: Auto Request Review
+    runs-on: ubuntu-latest
+    steps:
+      - name: Request review based on files changes and/or groups the author belongs to
+        uses: necojackarc/auto-request-review@v0.5.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          config: .github/reviewers.yml # Config file location override

.github/workflows/automerge.yml

@@ -6,26 +6,14 @@ on:
       - main
     types:
       - labeled
-      - unlabeled
       - synchronize
       - opened
       - edited
-      - ready_for_review
       - reopened
-      - unlocked
   pull_request_review:
     types:
       - submitted
-  check_suite:
-    types:
-      - completed
-  check_run:
-    types:
-      - completed
-  status: {}
-  push:
-    branches:
-      - main
+  status:
 
 jobs:
   automerge:
@@ -36,15 +24,15 @@ jobs:
         uses: fountainhead/action-wait-for-check@v1.0.0
         id: wait-for-build
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
+          token: ${{ secrets.ACTIONS_GITHUB_TOKEN }}
           checkName: build-test
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           timeoutSeconds: 1200
           intervalSeconds: 30
       - name: automerge
         uses: pascalgn/automerge-action@v0.12.0
         env:
-          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+          GITHUB_TOKEN: ${{ secrets.ACTIONS_GITHUB_TOKEN }}
           MERGE_LABELS: "Ship It :shipit:"
           UPDATE_LABELS: "Ship It :shipit:,Auto Update"
           MERGE_REMOVE_LABELS: "Ship It :shipit:"

.github/workflows/required-labels.yml

@@ -0,0 +1,13 @@
+name: Check labels
+
+on:
+  pull_request:
+    types: [opened, labeled, unlabeled, reopened]
+
+jobs:
+  ship-it:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: sugarshin/required-labels-action@v0.3.1
+        with:
+          required_all: 'Ship It :shipit:'

README.md

@@ -9,6 +9,10 @@ _Shared node modules for codecademy.com & co_
 
 This repository is a monorepo that we manage using [Lerna](https://lernajs.io/). That means that we publish several packages to npm from the same codebase, including:
 
+[`gamut-kit`: Include in your application instead of the individual packages to simplify version management. ](/packages/gamut-kit/README.md)
+
+- [![npm version](https://badge.fury.io/js/%40codecademy%2Fgamut-kit.svg)](https://badge.fury.io/js/%40codecademy%2Fgamut-kit)
+
 [`gamut`: Our React UI component library](/packages/gamut/README.md)
 
 - [![npm version](https://badge.fury.io/js/%40codecademy%2Fgamut.svg)](https://badge.fury.io/js/%40codecademy%2Fgamut)
@@ -62,6 +66,23 @@ Every PR that changes files in a package publishes alpha releases that you can u
 
 ### Working with pre-published changes
 
+Due to the inconsistencies of `yarn link` and symlinks in general in a lerna repo, we recommend using the `npm-link-better` package instead of `yarn link`.
+
+To use it, follow these instructions:
+
+1. in the terminal, `cd` into the root directory of the application that uses gamut (or any other client-modules package)
+1. Run `yarn build-all` (optional, but it rules out some other issues down the line)
+1. Run `npm-link-better` to link the package you're working on and start watching for changes
+1. `npx npm-link-better@0.6.0 --copy --watch ../client-modules/packages/gamut` (`../client-modules` or wherever your client-modules repo is)
+1. Make changes in the package client-modules repo and build the package, and you should see the changes reflected in your application
+
+To run a watcher and build Gamut on changes, in `client_modules/packages/gamut` use `yarn build:watch`. Similar watch scripts exist in the other packages, but if not feel free to add one!
+
+You may need to run `yarn build:all` before running the build task in gamut or another package, if that package depends on the other built packages existing to be built.
+
+<details>
+  <summary>Instructions for using `yarn link` instead (not recommended)</summary>
+
 For quicker development cycles, it's possible to run a pre-published version of Gamut in another project. We do that using
 symlinks (the following instructions assume you have set up and built client-modules):
 
@@ -83,7 +104,7 @@ If your other project uses React, you must link that copy of React in Gamut:
 [See the docs](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react)
 for more information for why you have to do this.
 
-To run a watcher and build Gamut on changes, in `client_modules/packages/gamut` use `yarn build:watch`
+</details>
 
 #### Troubleshooting
 

codecov.yml

@@ -8,3 +8,8 @@ comment:
   after_n_builds: 4 # Must be the # of parallel test builds in CircleCI
   layout: "diff, files"
   require_changes: true
+
+ignore:
+  - "**/*.js"
+  - "**/*.md"
+  - "**/*.mdx"

eslint-local-rules.js

@@ -0,0 +1,3 @@
+module.exports = {
+  'gamut-import-paths': require('./eslint/gamut-import-paths').default,
+};

eslint/gamut-import-paths.js

@@ -0,0 +1,71 @@
+module.exports.default = {
+  create(context) {
+    return {
+      'ImportDeclaration[source.value=/(^@)codecademy(\\u002F)gamut/]': function (
+        node
+      ) {
+        const filename = context.getFilename();
+        const importPath = node.source.value;
+
+        const fileDirectory = filename.split('/packages/')[1].split('/')[0];
+        const importPackage = importPath.split('@codecademy/')[1].split('/')[0];
+
+        if (fileDirectory === importPackage) {
+          context.report({
+            messageId: 'useRelativeImport',
+            node,
+          });
+          return;
+        }
+
+        if (importPath.includes('/src')) {
+          context.report({
+            fix: (fixer) => {
+              const indexOfSrc =
+                node.source.range[0] + importPath.search('/src');
+              if (importPath.endsWith('/src')) {
+                return fixer.removeRange([indexOfSrc + 1, node.range[1] - 2]);
+              }
+            },
+            messageId: 'removeSrc',
+            node,
+          });
+          return;
+        }
+
+        if (importPath.includes('/dist')) {
+          context.report({
+            fix: (fixer) => {
+              const indexOfDist =
+                node.source.range[0] + importPath.search('/dist');
+              if (importPath.endsWith('/dist')) {
+                return fixer.removeRange([indexOfDist + 1, node.range[1] - 2]);
+              }
+            },
+            messageId: 'removeDist',
+            node,
+          });
+        }
+      },
+    };
+  },
+  defaultOptions: [],
+  meta: {
+    docs: {
+      category: 'Possible Errors',
+      description: 'Ensure Gamut import statements have proper module paths.',
+      recommended: 'error',
+    },
+    fixable: true,
+    messages: {
+      removeDist:
+        'There is no need to append /dist to the end of this module path.',
+      removeSrc:
+        'There is no need to append /src to the end of this module path.',
+      useRelativeImport: 'Use a relative path for this import statement.',
+    },
+    type: 'suggestion',
+    schema: [],
+  },
+  name: 'gamut-import-paths',
+};

jest.config.js

@@ -23,8 +23,13 @@ module.exports = {
     '^~styleguide/blocks(.*)$':
       '<rootDir>/packages/styleguide/.storybook/components$1',
     '^@codecademy\\/gamut$': '<rootDir>/packages/gamut/src',
+    '^@codecademy\\/gamut-labs$': '<rootDir>/packages/gamut-labs/src',
     '^@codecademy\\/gamut-styles$': '<rootDir>/packages/gamut-styles/src',
     '^@codecademy\\/gamut-system$': '<rootDir>/packages/gamut-system/src',
+    '^@codecademy\\/gamut-tests$': '<rootDir>/packages/gamut-tests/src',
+    '^@codecademy\\/variance$': '<rootDir>/packages/variance/src',
+    '^@codecademy\\/gamut-illustrations$':
+      '<rootDir>/packages/gamut-illustrations/src',
     '^@codecademy\\/macros$': '<rootDir>/packages/macros',
   },
   testPathIgnorePatterns: ['/node_modules/', '/dist/'],
@@ -52,5 +57,5 @@ module.exports = {
   reporters: process.env.CI ? ['default', 'jest-junit'] : ['default'],
   coverageReporters: ['json', 'text', 'clover'],
   coverageDirectory: process.env.CI ? '/tmp/test-results/jest' : './coverage',
-  collectCoverage: process.env.CI ? true : false,
+  collectCoverage: !!process.env.CI,
 };