feat: add custom Menu component

[mkarajohn]

Resolves DSTRBTN-540

Generated summary (powered by Graphite)

TL;DR

This pull request introduces a new Menu component in the authentication module. The Menu component is a dropdown menu that can be used to display a list of options to the user. It includes a button that toggles the visibility of the menu and a tag that can be used to display additional information.

What changed

Three new files were added in the authentication/components/Menu directory:

1. Menu.style.ts: This file contains the styled components used in the Menu component. It includes styles for the wrapper, button, tag, and option elements.

2. Menu.tsx: This is the main file for the Menu component. It uses the styled components from Menu.style.ts and includes the logic for toggling the visibility of the menu and handling option selection.

3. index.ts: This file exports the Menu component for use in other parts of the application.

How to test

To test this change, you can import the Menu component into any component in the authentication module and use it as follows:

import Menu from './Menu';

<Menu
  items={['Option 1', 'Option 2', 'Option 3']}
  onSelect={(option) => console.log(option)}
  buttonText="More"
  tagText="Tag"
/>

This will render a button labeled "More" and a tag labeled "Tag". Clicking on the button will toggle the visibility of a menu with the options "Option 1", "Option 2", and "Option 3". Selecting an option will log the selected option to the console.

Why make this change

This change was made to provide a reusable Menu component that can be used to display a list of options to the user. This can be useful in a variety of scenarios, such as providing a list of actions that the user can perform on a particular item.

[mkarajohn]

Current dependencies on/for this PR:

• master
  • PR chore: fix eslint and ts errors in dev and introduce tsconfig.prod.ts file #74
    • PR feat: add custom Menu component #100
    • PR feat: add custom Menu component #75 👈
      • PR chore: add new svgs, update package.json and move some components around #76
        • PR feat: Update ocntext and useProducts hook #77
          • PR feat: Implement a flippable arrow ui component #78
            • PR feat: Implement a navigational menu item #79
              • PR feat: implement a navigational menu wrapper component #80
                • PR feat: implement the drawer component of the new navigation #81
                  • PR feat: Implement the exported navigation component #82
                  • PR feat: Implement the new top bar component #83
                  • PR feat: reimplement changes from revert #84 #85
                  • PR feat: Implement documentation, part 1 #86
                  • PR feat: implement documentation part 2 #87
                  • PR chore: explicitly pass theme prop to styled components #88
                  • PR feat: optimisation improvements #89
                  • PR feat: implement a new utility component #90
                  • PR chore: update documentation #91
                  • PR feat: rework epxorted providers and hooks and update docs #92
                  • PR feat: add extra hook for controlling the TopBar utility section #93
                  • PR chore: Rename the exported Authentication component to Toolbox #94
                  • PR feat: implement extra utility components #95
                  • PR feat: add currency related utility functions and update docs #96
                  • PR feat: update docs and upgrade docusaurus dependencies #97
                  • PR feat: major improvements, add search, streamline project structure #98
                  • PR feat: branded documentation #99

This comment was auto-generated by Graphite.

[orfium-sonarqube-app]

SonarQube Quality Gate

0.0% Coverage on New Code (is less than 80%)

See analysis details on SonarQube