feat(tree-links): Adds support for link nodes in the TreeView component (#18409)

* feat(tree-links): Adds support for link nodes in the TreeView component

* feat: Sets treenodes with a href active when the href is the current page, utilises the Link component for nodes with links

* chore: Corrects formatting and styling order

* fix: Responds to feedback - ensures href does not override active or selected

* chore: Adds TreeView links e2e tests and updates snapshots

* chore: Adds TreeNode test to test specifying the href for parent nodes

* chore: Adds reach/router dependency

* feat: Utilises reach router in TreeNodes with links to navigate

* feat: Updates TreeView storybook, adds a main content section which updates when a TreeNode with link is clicked

* chore: Updates for lint and format

* chore: Simplifies scss structure

* chore: Updates lint styling

* chore: Removes reach/router dependency

* chore: Removes reach/router navigation from TreeNodes with links

* fix: Updates storybook for TreeNodes with links to simulate a link

* fix: Improves storybook for TreeNodes to preventDefault on links

* chore: Moves current page main body to a variable

* Revert "chore: Moves current page main body to a variable"

This reverts commit fc2b973.

* fix: Resolves onSelect calling twice when using the TreeNode with links component

* chore: Stops TreeView with links storybook from re-rendering when clicking on a node

* style: Improves TreeView with links storybook styling

* chore: Corrects formatting

* chore: Moves node const inside TreeViewWithLinks component

---------

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: Daniel Smith <DanielP.Smith@ibm.com>
Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

Author: 4 people

.all-contributorsrc

@@ -1764,6 +1764,17 @@
         "review"
       ]
     },
+    {
+      "login": "Tweakified",
+      "name": "Daniel Smith",
+      "avatar_url": "https://avatars.githubusercontent.com/u/58192912?v=4",
+      "profile": "https://github.com/Tweakified",
+      "contributions": [
+        "code",
+        "a11y",
+        "doc"
+      ]
+    },
     {
       "login": "enricobguedes",
       "name": "enricobguedes",

README.md

@@ -326,6 +326,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/a88zach"><img src="https://avatars.githubusercontent.com/u/1724822?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zach Tindall</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=a88zach" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/vsvsv"><img src="https://avatars.githubusercontent.com/u/9214692?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vsevolod Platunov</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=vsvsv" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/heloiselui"><img src="https://avatars.githubusercontent.com/u/71858203?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Heloise Lui</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=heloiselui" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=heloiselui" title="Documentation">📖</a> <a href="#a11y-heloiselui" title="Accessibility">️️️️♿️</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Aheloiselui" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://github.com/Tweakified"><img src="https://avatars.githubusercontent.com/u/58192912?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Smith</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Tweakified" title="Code">💻</a> <a href="#a11y-Tweakified" title="Accessibility">️️️️♿️</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=Tweakified" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/enricobguedes"><img src="https://avatars.githubusercontent.com/u/45374536?v=4?s=100" width="100px;" alt=""/><br /><sub><b>enricobguedes</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=enricobguedes" title="Code">💻</a></td>
   </tr>
 </table>

e2e/components/TreeView/TreeView-test.avt.e2e.js

@@ -33,6 +33,17 @@ test.describe('@avt TreeView', () => {
     await expect(page).toHaveNoACViolations('components-treeview--with-icons');
   });
 
+  test('@avt-advanced-states with-links', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TreeView',
+      id: 'components-treeview--with-links',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('components-treeview--with-links');
+  });
+
   test('@avt-keyboard-nav', async ({ page }) => {
     await visitStory(page, {
       component: 'TreeView',

e2e/components/TreeView/TreeView-test.e2e.js

@@ -21,6 +21,14 @@ test.describe('TreeView', () => {
           theme,
         });
       });
+
+      test('treeview-links @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'TreeView',
+          id: 'components-treeview--with-links',
+          theme,
+        });
+      });
     });
   });
 });

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -9641,6 +9641,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "href": Object {
+        "type": "string",
+      },
       "id": Object {
         "type": "string",
       },
@@ -9731,6 +9734,9 @@ Map {
         "disabled": Object {
           "type": "bool",
         },
+        "href": Object {
+          "type": "string",
+        },
         "id": Object {
           "type": "string",
         },