merge from next/fluentui

Author: gavinbarron

.github/workflows/next.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/pr-clean-storybook.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/pr-storybook.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -33,12 +33,11 @@ jobs:
           yarn storybook:build
 
       - name: Deploy mgt.dev/next/pr/${{ github.event.number }} 🚀
-        uses: JamesIves/github-pages-deploy-action@4.1.1
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
         with:
           branch: gh-pages
           folder: storybook-static
           target-folder: next/pr/${{ github.event.number }}
-          token: ${{ secrets.ACCESS_TOKEN }}
 
       - name: Comment PR
         uses: thollander/actions-comment-pull-request@v1

.github/workflows/pr.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x, 16.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -24,6 +24,7 @@ jobs:
       - run: npm install -g yarn
       - run: yarn
       - run: node scripts/setVersion.js --next
+      - run: yarn run tsc -v
       - run: yarn build
       - run: yarn run pack
 

.github/workflows/push-release.yml

@@ -17,7 +17,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -42,7 +42,7 @@ jobs:
     if: needs.version.outputs.latest-version != needs.version.outputs.package-version
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
 
     environment:
       name: release
@@ -80,7 +80,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -98,7 +98,7 @@ jobs:
           yarn storybook:build
 
       - name: Deploy mgt.dev 🚀
-        uses: JamesIves/github-pages-deploy-action@4.1.1
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
         with:
           branch: gh-pages
           folder: storybook-static

.github/workflows/push.yml

@@ -15,7 +15,7 @@ jobs:
     if: github.repository == 'microsoftgraph/microsoft-graph-toolkit'
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/storybook-v3.yml

@@ -0,0 +1,40 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Deploy next/fluentui storybook
+
+on:
+  push:
+    branches: [next/fluentui]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: github.repository == 'microsoftgraph/microsoft-graph-toolkit'
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Build 🛠
+        run: |
+          npm install -g yarn lerna
+          yarn
+          yarn build
+          yarn storybook:build
+
+      - name: Deploy mgt.dev/next 🚀
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: storybook-static
+          target-folder: next/v3
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/storybook.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -32,12 +32,12 @@ jobs:
           yarn storybook:build
 
       - name: Deploy mgt.dev/next 🚀
-        uses: JamesIves/github-pages-deploy-action@4.1.1
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
         with:
           branch: gh-pages
           folder: storybook-static
           target-folder: next
-          clean-exclude: | 
+          clean-exclude: |
             pr
-            fluentui
+            v3
           token: ${{ secrets.GITHUB_TOKEN }}

.storybook/manager-head.html

@@ -93,53 +93,6 @@
 
     sidebarNode.insertBefore(usefulLinksContainer, sidebarNode.childNodes[1]);
 
-    const searchBox = document.querySelector(".search-field");
-    if (searchBox) {
-      searchBox.setAttribute("name", "Find Components");
-      searchBox.setAttribute("aria-expanded", "false");
-
-      const searchInput = searchBox.querySelector("input");
-      if (searchInput) {
-        searchInput.addEventListener("mouseleave", addAriaExpanded("false"));
-        searchInput.addEventListener("mouseout", addAriaExpanded("false"));
-        searchInput.addEventListener("pointerleave", addAriaExpanded("false"));
-        searchInput.addEventListener("pointerout", addAriaExpanded("false"));
-        searchInput.addEventListener("click", addAriaExpanded("true"));
-        searchInput.addEventListener("focusout", addAriaExpanded("false"));
-        searchInput.addEventListener("focus", setListItemsAc11y);
-      }
-    }
-
-    function setListItemsAc11y() {
-      const recentMenu = document.querySelector("#storybook-explorer-menu");
-      if (recentMenu) {
-        const firstLi = recentMenu.querySelector("li");
-        if (firstLi) {
-          firstLi.setAttribute("role", "heading");
-          firstLi.setAttribute("aria-level", "2");
-        }
-
-        const otherLis = recentMenu.querySelectorAll("li:not(:first-child)");
-        if (otherLis && otherLis.length > 0) {
-          for (let i = 0; i < otherLis.length; i++) {
-            const li = otherLis[i];
-            const liText = li.innerText;
-            if (liText) {
-              li.setAttribute("aria-label", liText.trim());
-            }
-            li.setAttribute("aria-hidden", "true");
-          }
-        }
-      }
-    }
-
-    function addAriaExpanded(value) {
-      const searchBox = document.querySelector(".search-field");
-      if (searchBox) {
-        searchBox.setAttribute("aria-expanded", value);
-      }
-    }
-
     const sidebarSubheading = document.getElementsByClassName("sidebar-subheading");
     if (sidebarSubheading) {
       for (let i = 0; i < sidebarSubheading.length; i++) {
@@ -157,6 +110,7 @@
         }
       }
     }
+
     function setArialLabelForExpandCollapseBtn() {
       const expandCollapseBtns = document.getElementsByClassName("css-rl1ij0");
       if (expandCollapseBtns) {
@@ -180,7 +134,6 @@
     }
 
     setEventOnMenuClick();
-    setListItemsAc11y();
   }
 
   function createSvg(svgPath) {
@@ -426,4 +379,15 @@
   .css-8ktt77 {
     display: none;
   }
-</style>
+
+  .css-14o7vtb {
+    border: 2px solid transparent;
+  }
+
+  .css-14o7vtb:focus-visible {
+    outline: auto;
+  }
+  .search-field {
+    display: none !important;
+  }
+</style>

.storybook/preview-body.html

@@ -84,6 +84,10 @@
     color: #e50000 !important;
   }
 
+  .css-3ltsna:focus-visible {
+    outline: auto;
+  }
+
   @media (max-width: 768px) {
     .story-mgt-root {
       flex-direction: column;