Merge branch 'develop'

* develop:
  Tabs: fix initial tab selection in more cases (#449)
  Storybook: add eslint-plugin-storybook and fix issues (#446)
  feat(storybook): install Measure and Outline addons (#445)
  Docs: update copy for Button's on-background usage (#444)
  Storybook: Convert stories to CSF 3 (#435)
  feat(tabs): fire event when tab selected programmatically (#442)
  ToggleButton: indicate toggle button state on underlying button elements (#438)
  Tooltip, DropdownMenu: replace popperjs with floating-ui (#434)
  Site: improve imports (#433)

.changeset/clean-impalas-fold.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos-site': patch
+---
+
+Improve imports with path aliases

.changeset/fast-chicken-repeat.md

@@ -0,0 +1,10 @@
+---
+'@ithaka/pharos': minor
+'@ithaka/pharos-site': minor
+---
+
+* Replace PopperJS with Floating UI for tooltips and dropdown menus
+* Update GitHub Actions to use environment files instead of `set-output`
+* Update GitHub Actions action versions
+* Fix stylelint errors for Link, ToggleButton, TextInput
+

.changeset/lemon-islands-sin.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos-site': patch
+---
+
+Fix documentation for Button's on-background usage

.changeset/long-seahorses-obey.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Improve accessibility for toggle button groups

.changeset/six-days-ring.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': minor
+---
+
+Fire pharos-tab-selected in response to tab being selected programmatically in addition to user clicks

.changeset/tidy-cherries-report.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Update Storybook stories to Component Story Format (CSF) version 3

.changeset/violet-tigers-perform.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Fix initial tab selection in more use cases

.eslintrc.js

@@ -1,13 +1,21 @@
 module.exports = {
   ignorePatterns: ['**/*.css.ts'],
-  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+    'plugin:storybook/recommended',
+  ],
   parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
     },
+    babelOptions: {
+      presets: ['@babel/preset-react'],
+    },
   },
   plugins: ['react', '@typescript-eslint', 'no-smart-quotes'],
   settings: {
@@ -21,6 +29,7 @@ module.exports = {
   },
   rules: {
     'no-smart-quotes/no-smart-quotes': 'error',
+    'react/react-in-jsx-scope': 'off',
   },
   overrides: [
     {

.github/workflows/chromatic.yml

@@ -16,25 +16,25 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
       - name: Setup Node.js 16.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
           registry-url: 'https://registry.npmjs.org'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+        run: echo "YARN_CACHE_DIR=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ${{ steps.yarn-cache-dir-path.outputs.YARN_CACHE_DIR }}
             **/node_modules
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |

.github/workflows/release.yml

@@ -13,26 +13,26 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
       - name: Setup Node.js 16.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
           registry-url: 'https://registry.npmjs.org'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+        run: echo "YARN_CACHE_DIR=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ${{ steps.yarn-cache-dir-path.outputs.YARN_CACHE_DIR }}
             **/node_modules
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |

.github/workflows/size-limit.yml

@@ -11,22 +11,22 @@ jobs:
     env:
       CI_JOB_NUMBER: 1
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Setup Node 16.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+        run: echo "YARN_CACHE_DIR=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ${{ steps.yarn-cache-dir-path.outputs.YARN_CACHE_DIR }}
             **/node_modules
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |

.github/workflows/verify.yml

@@ -11,22 +11,22 @@ jobs:
     name: Lint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Setup Node 16.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+        run: echo "YARN_CACHE_DIR=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ${{ steps.yarn-cache-dir-path.outputs.YARN_CACHE_DIR }}
             **/node_modules
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
@@ -42,22 +42,22 @@ jobs:
     name: Test
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Setup Node 16.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+        run: echo "YARN_CACHE_DIR=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ${{ steps.yarn-cache-dir-path.outputs.YARN_CACHE_DIR }}
             **/node_modules
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |

.storybook/docsPageConfig.jsx

@@ -0,0 +1,25 @@
+import {
+  ArgsTable,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs';
+
+import { GuidelineLink } from '@config/GuidelineLink';
+
+export const configureDocsPage = (componentName) => {
+  return () => (
+    <>
+      <Title />
+      <Subtitle />
+      <Description />
+      {componentName && <GuidelineLink path={componentName} />}
+      <Primary />
+      <ArgsTable story={PRIMARY_STORY} />
+      <Stories />
+    </>
+  );
+};

.storybook/main.js

@@ -1,4 +1,7 @@
 module.exports = {
+  features: {
+    previewCsfV3: true,
+  },
   core: {
     builder: 'webpack5',
   },
@@ -16,6 +19,8 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-a11y',
     '@storybook/addon-viewport',
+    '@storybook/addon-measure',
+    '@storybook/addon-outline',
     '@storybook/addon-controls',
     '@storybook/addon-google-analytics',
     {
@@ -26,7 +31,6 @@ module.exports = {
         },
       },
     },
-    '@storybook/addon-storysource',
     '@storybook/addon-backgrounds',
   ],
   stories: [],

.storybook/react/main.js

@@ -1,5 +1,8 @@
 let config = require('../main');
 
-config.stories.push('../../packages/pharos/**/*.@(react|docs|pages).stories.@(js|mdx|tsx)');
+config.stories.push({
+  directory: '../../packages/pharos',
+  files: '**/*.@(react|docs|pages).stories.@(js|jsx|mdx|tsx)',
+});
 
 module.exports = config;

.storybook/react/preview.js

@@ -9,13 +9,11 @@ export const parameters = {
   a11y: a11yConfig,
   controls: { expanded: true },
   docs: {
+    source: { type: 'dynamic' },
     inlineStories: true,
     theme: theme,
     components: {
       Canvas: Canvas,
     },
-    source: {
-      type: 'code',
-    },
   },
 };

.storybook/wc/main.js

@@ -1,5 +1,8 @@
 let config = require('../main');
 
-config.stories.push('../../packages/pharos/**/*.@(wc|docs|pages).stories.@(js|mdx|ts)');
+config.stories.push({
+  directory: '../../packages/pharos',
+  files: '**/*.@(wc|docs|pages).stories.@(js|jsx|mdx|ts)',
+});
 
 module.exports = config;

.tool-versions

@@ -1 +1 @@
-nodejs 16.14.0
+nodejs 16.18.0

package.json

@@ -8,7 +8,7 @@
     "analyze": "yarn workspace @ithaka/pharos analyze",
     "format": "prettier packages/* --write",
     "lint": "yarn lint:lit-analyzer && yarn lint:eslint && yarn lint:styles",
-    "lint:eslint": "eslint 'packages/**/*.{ts,tsx,mdx,js,mjs}'",
+    "lint:eslint": "eslint 'packages/**/*.{ts,tsx,mdx,js,jsx,mjs}'",
     "lint:lit-analyzer": "lit-analyzer 'packages/*/src/**/!(*.css|*.test).ts' --strict --rules.no-missing-import off --rules.no-unknown-tag-name off",
     "lint:styles": "stylelint 'packages/**/*.{scss,css}'",
     "test": "yarn workspace @ithaka/pharos test",
@@ -60,36 +60,38 @@
     "@babel/plugin-proposal-export-default-from": "^7.14.5",
     "@babel/plugin-syntax-import-assertions": "^7.16.7",
     "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.18.6",
     "@changesets/changelog-github": "^0.4.1",
     "@changesets/cli": "^2.18.0",
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
     "@emotion/babel-plugin": "^11.9.2",
     "@size-limit/preset-small-lib": "^7.0.4",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-backgrounds": "^6.5.9",
-    "@storybook/addon-controls": "^6.5.9",
-    "@storybook/addon-docs": "^6.5.9",
+    "@storybook/addon-a11y": "^6.5.13",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-backgrounds": "^6.5.13",
+    "@storybook/addon-controls": "^6.5.13",
+    "@storybook/addon-docs": "^6.5.13",
     "@storybook/addon-google-analytics": "^6.3.0-alpha.22",
+    "@storybook/addon-measure": "^6.5.13",
+    "@storybook/addon-outline": "^6.5.13",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storysource": "^6.5.9",
-    "@storybook/addon-viewport": "^6.5.9",
-    "@storybook/addons": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@storybook/source-loader": "^6.5.9",
-    "@storybook/theming": "^6.5.9",
-    "@storybook/web-components": "^6.5.9",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@storybook/addon-viewport": "^6.5.13",
+    "@storybook/addons": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@storybook/source-loader": "^6.5.13",
+    "@storybook/theming": "^6.5.13",
+    "@storybook/web-components": "^6.5.13",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
     "all-contributors-cli": "^6.20.0",
     "concurrently": "^6.2.0",
     "css-loader": "^6.5.1",
     "cssnano": "^5.0.1",
     "esbuild-loader": "^2.18.0",
-    "eslint": "^8.2.0",
+    "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-lit": "^1.6.1",
@@ -98,6 +100,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.27.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.6.7",
     "eslint-plugin-wc": "^1.3.2",
     "husky": "^7.0.0",
     "lint-staged": "^12.0.2",
@@ -126,6 +129,7 @@
     ]
   },
   "resolutions": {
+    "@typescript-eslint/parser": "^5.41.0",
     "axe-core": "^4.3.3",
     "playwright": "^1.17.1",
     "webpack": "^5.64.1",