New UI: Tab component

[damianmoore]

This is a new component called <Tabs /> which is the start of UI redesign.

You can see the component at the bottom of these two screens:

Please develop this as a Storybook first by adding a file inside ui/stories. You should then be able to access it at http://localhost:6006/ under the "Search" section.

Should accept the following prop structure:

<Tabs tabs={[
    {
        label: string,
        selected: boolean,
        onClick: function,
    },
]} />

• Each label should be the same width (display grid or flex)
• White/light grey background should show behind the tab that is selected
• There should be a CSS transition that slides the background to the newly selected tab when selected item changes
• There should be a CSS transition that fades between the text color when selected item changes
• Note the dark grey background is slightly transparent
• The radius of the tab background should fit neatly inside the radius of the overall component background
• useState should not be used inside this component for storing selected tab (the parent will handle this)

Once you have the component functioning, you'll need to remove the <ul className="tabs"> section of <Browse /> and add your new component to the page and make it switch between "Timeline" and "Map" views.

• Make sure that URL GET params (e.g. /?mode=map) are still used. If the user refreshes on Map mode then the map tab should be selected

[GyanP]

Task done and changes pushed on branch 294-Tab-component-stories

[damianmoore]

Merged as of c0fdeb7 and in release v0.23.0