WIP feat(#2478): add work side menu component

[bdfranck]

This PR adds the work side menu component.

work.side.menu.mp4

To do

• Decide component name
• Decide property names
• Create react wrapper
• Create angular wrapper
• Ensure that angular and react align with v4 changes
• Add initial component tokens
• Add ARIA labels
• Write tests
• Write docs
• Rename commit message to include issue number
• Test different variations
• Cross-browser testing

How to test

Add one of the following menus to your playground:

Empty menu

<goa-work-side-menu
  url="#"
  title="Service name"
  username="Name"
  useremail="test@example.com"
>
</goa-work-side-menu>

Menu with primary, secondary, and account items

<goa-work-side-menu
  url="#"
  title="Service name"
  username="Name"
  useremail="test@example.com"
>
  <div slot="primary">
    <goa-work-side-menu-item
      icon="triangle"
      label="Primary menu item"
      url="#primary"
    />
  </div>
  <div slot="secondary">
    <goa-work-side-menu-item
      icon="triangle"
      label="Secondary menu item"
      url="#secondary"
    />
  </div>
  <div slot="account">
    <goa-work-side-menu-item
      icon="triangle"
      label="Account menu item"
      url="#secondary"
    />
  </div>
</goa-work-side-menu>

Menu with primary , secondary, account items, and badges

<goa-work-side-menu
  url="#"
  title="Service name"
  username="Name"
  useremail="test@example.com"
>
  <div slot="primary">
    <goa-work-side-menu-item
      icon="triangle"
      label="Primary menu item"
      url="#primary"
      badge="New
    />
  </div>
  <div slot="secondary">
    <goa-work-side-menu-item
      icon="triangle"
      label="Secondary menu item"
      url="#secondary"
      type="emergency"
      badge="12"
    />
  </div>
  <div slot="account">
    <goa-work-side-menu-item
      icon="triangle"
      label="Account menu item"
      url="#secondary"
    />
  </div>
</goa-work-side-menu>

A full example with a sub menu

<goa-work-side-menu
  url="#client"
  title="Income and Employment Support (IES)"
  username="Edna Mode"
  useremail="edna.mode@example.com"
>
  <div slot="primary">
    <goa-work-side-menu-item
      icon="search"
      label="Search"
      badge="21"
      url="#search"
    >
      <goa-work-side-menu-item
        url="#sub1"
        variation="submenu"
        label="Sub menu item"
      >
      </goa-work-side-menu-item>

      <goa-work-side-menu-item
        url="#sub2"
        variation="submenu"
        label="Sub menu item"
      />

      <goa-work-side-menu-item
        url="#sub3"
        variation="submenu"
        label="Sub menu item"
      />
    </goa-work-side-menu-item>

    <goa-work-side-menu-item
      icon="list"
      label="Clients"
      type="success"
      badge="New"
      current="true"
      url="#clients"
    />

    <goa-work-side-menu-item
      icon="calendar"
      label="Schedule"
      type="emergency"
      badge="Urgent"
      url="#schedule"
    />
  </div>

  <div slot="secondary">
    <goa-work-side-menu-item
      icon="notifications"
      label="Notifications"
      type="success"
      badge="1"
      badgeLabelType="alwaysvisible"
      url="#notifications"
    />

    <goa-work-side-menu-item icon="help-circle" label="Support" url="#support" />

    <goa-work-side-menu-item icon="settings" label="Settings" url="#settings" />
  </div>

  <div slot="account">
    <goa-work-side-menu-item
      icon="person"
      label="Account management"
      url="#account"
    />

    <goa-work-side-menu-item icon="log-out" label="Log out" url="#logout" />
  </div>
</goa-work-side-menu>

[bdfranck]

I couldn't figure out how to test changing the current menu item. Whenever I clicked a menu item, the test couldn't see the change. I have two guesses of what may be going on:

1. The test is happening before all the async events resolve
2. The component events aren't properly firing in the test environment

There may be an easy fix. I'm sure a dev with better async testing experience could help here.

[bdfranck]

Cross-browser tested in the latest version of...

• Chrome
• Edge
• Firefox
• Safari

I tested the following in each browser:

• It renders
• Changes current item
• Collapses and expands
• Toggles account menu
• Tooltips appear on collapsed state
• Badges render in collapsed and expanded states

[bdfranck]

I've added a function that checks for links with duplicate hrefs in the menu. If one is found, then it skips the link and creates a console warning.

This assumes that there is no valid use case for having a duplicate href in your menu.

[bdfranck]

I rebuilt this PR with the latest version on alpha. I'm closing this old PR.