Add Material UI directory and search panels

[rogup]

What? Why?

• Set up Storybook.js integration (for testing components prior to integration within the larger project)
• Added MUI (Material UI), created a theme for consistency and CSS variables to enable the customisation of key elements of the theme
• Created shared components
• Created main panel component
• Created About, Directory and Search panel
• Integrated 'Button', 'Select Box' and 'Search components into Search panel
• Created menu bar and menu item components
• Made design responsive
• Created stories for components

Created in preparation for front - back end integration, to enable at least function parity with current application.

Related to issue #272

Still outstanding from #272

• Create Directory Item component
• Rich text / markdown display component for About Panel
• Results panel container component
• Result item component
• Integrate 'Close button', 'Close tab' and 'Button components' into results panel

What should we test?

• Run storybook npm run storybook
• Should run open automatically in your browser (or VS Code click dialogue as shown below)

• Select a component to test

Checklist

• [ ] Updated or added any necessary docs in docs/
• [ ] Added UTs
• [ ] Checked that all automated tests pass

[rogup]

@ms0ur1s I did a quick review of your changes and they look great!

One thing I spotted when running it is that the panel is quite big compared to in the design, so there is less space to view the map https://xd.adobe.com/view/0f8c7d84-e063-4008-a2fb-c7e3b8580d07-5adf/screen/e354b198-18a0-464a-94aa-73fb6f99427d

Was there a reason for making it bigger (e.g. accessibility)? I think I'd personally prefer a smaller panel so the map is bigger.

Also, please can you fill in the details of this PR to describe what's in it? I've merged it, so any further changes can be in a separate PR :)

[ms0ur1s]

@ms0ur1s I did a quick review of your changes and they look great!

One thing I spotted when running it is that the panel is quite big compared to in the design, so there is less space to view the map https://xd.adobe.com/view/0f8c7d84-e063-4008-a2fb-c7e3b8580d07-5adf/screen/e354b198-18a0-464a-94aa-73fb6f99427d

Was there a reason for making it bigger (e.g. accessibility)? I think I'd personally prefer a smaller panel so the map is bigger.

Thanks man, really appreciate it. 😊 Great spot, I think it was probably a mis-measurement of the designs on my part. I'll have a look at this next.

Also, please can you fill in the details of this PR to describe what's in it? I've merged it, so any further changes can be in a separate PR :)

Updated the PR, if there's anything you think I've missed give me a shout. As far as future PRs go should I be making branches for small changes before merging them back in, or is there a way to create a PR without branching?

[rogup]

Updated the PR, if there's anything you think I've missed give me a shout. As far as future PRs go should I be making branches for small changes before merging them back in, or is there a way to create a PR without branching?

Yep, there's a PR for each branch, so small changes would be made in their own branch then merged back in

[ms0ur1s]

@rogup , thanks man 😁