@royaloperahouse/chord 0.1.0

package/src/components/organisms/Footer/exampleData.json

@@ -0,0 +1,78 @@
+{
+  "policyLinks": [
+    {
+      "dataRoh": "PrivacyPolicy",
+      "title": "Privacy Policy",
+      "href": "#",
+      "name": "privacy-policy"
+    },
+    {
+      "dataRoh": "CookiesUsage",
+      "title": "Cookies Usage",
+      "href": "#",
+      "name": "cookies-usage"
+    },
+    {
+      "dataRoh": "Terms&Conditions",
+      "title": "Terms & Conditions of sale",
+      "href": "#",
+      "name": "terms-conditions"
+    },
+    {
+      "dataRoh": "CommunityGuidelines",
+      "title": "Community Guidelines",
+      "href": "#",
+      "name": "comunity"
+    },
+    {
+      "dataRoh": "CorporatePolicy",
+      "title": "Corporate Policy",
+      "href": "#",
+      "name": "corporate"
+    }
+  ],
+  "socialMediaLinks": [
+    {
+      "dataRoh": "Facebook",
+      "href": "https://www.facebook.com/royaloperahouse",
+      "name": "Facebook"
+    },
+    {
+      "dataRoh": "Twitter",
+      "href": "https://twitter.com/royaloperahouse",
+      "name": "Twitter"
+    },
+    {
+      "dataRoh": "TikTok",
+      "href": "https://www.tiktok.com/@royaloperahouse",
+      "name": "Tiktok"
+    },
+    {
+      "dataRoh": "Instagram",
+      "href": "https://www.instagram.com/royaloperahouse",
+      "name": "Instagram"
+    },
+    {
+      "dataRoh": "Youtube",
+      "href": "https://www.youtube.com/user/royaloperahouse",
+      "name": "Youtube"
+    }
+  ],
+  "newsletter": {
+    "text": "Sign up now to our newsletter get our latest news, offers and alerts",
+    "link": {
+      "title": "SIGN UP",
+      "href": "#" 
+    }
+  },
+  "contact": {
+    "title": "CONTACT US",
+    "href": "#"
+  },
+  "artsLogo": {
+    "href": "https://www.artscouncil.org.uk/",
+    "title": "Art Council England",
+    "dataRoh": "lnkArtsCouncil"
+  },
+  "additionalInfo": "Royal Opera House Covent Garden Foundation, a charitable company limited by guarantee incorporated in England and Wales (Company number 480523) Charity Registered (Number 211775)"
+}

package/src/components/organisms/Footer/index.tsx

@@ -0,0 +1,3 @@
+import Footer from './Footer';
+
+export default Footer;

package/src/components/organisms/Navigation/Navigation.stories.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import Navigation from './index';
+import { ThemeType } from '../../../types/types';
+import { INavigationProps } from '../../../types/navigation';
+import data from './menuData.json';
+
+export default {
+  title: 'Components/Navigation/Navigation',
+  component: Navigation,
+  argTypes: {
+    ref: {
+      table: { disable: true },
+    },
+    theme: {
+      table: { disable: true },
+    },
+    as: {
+      table: { disable: true },
+    },
+    forwardedAs: {
+      table: { disable: true },
+    },
+    api: {
+      name: 'Data source',
+      description: ' The data source that populates the component with content',
+      options: ['menu.json'],
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Navigation that will be present in every page',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House-UI-Guide-and-Spec?node-id=166%3A0',
+    },
+    jest: ['Navigation'],
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<INavigationProps> = (args) => <Navigation {...args} />;
+
+export const NavigationDefault = Template.bind({});
+
+NavigationDefault.args = {
+  onLink: () => {},
+  onSearch: () => {},
+  menuData: data,
+  dataNavTop: {
+    accountText: 'SIGN IN',
+    accountIcon: 'User',
+    accountOptions: [
+      {
+        option: 'OPTION 1',
+        optionLink: 'link 1',
+      },
+      {
+        option: 'OPTION 2',
+        optionLink: 'link 2',
+      },
+      {
+        option: 'OPTION 3',
+        optionLink: 'link 3',
+      },
+    ],
+  },
+};
+
+export const NavigationWithItemsInBasket = Template.bind({});
+
+NavigationWithItemsInBasket.args = {
+  onLink: () => {},
+  onSearch: () => {},
+  menuData: data,
+  dataNavTop: {
+    accountText: 'USER NAME',
+    accountIcon: 'UserSignedIn',
+    accountOptions: [
+      {
+        option: 'OPTION 1',
+        optionLink: 'link 1',
+      },
+      {
+        option: 'OPTION 2',
+        optionLink: 'link 2',
+      },
+      {
+        option: 'OPTION 3',
+        optionLink: 'link 3',
+      },
+    ],
+    basketText: '29 MINS',
+    basketNumItems: 5,
+  },
+};

package/src/components/organisms/Navigation/Navigation.style.tsx

@@ -0,0 +1,87 @@
+import styled from 'styled-components';
+import { Grid } from '../../atoms/Grid';
+import { devices } from '../../../styles/viewports';
+
+export const NavigationGrid = styled(Grid)`
+  background-color: var(--base-color-white);
+  height: 140px;
+
+  @media ${devices.mobile} {
+    height: 80px;
+  }
+`;
+
+export const NavigationGridSearch = styled(Grid)`
+  background-color: var(--base-color-white);
+  height: 100px;
+  border-top: 1px solid var(--base-color-light-grey);
+  opacity: 50%;
+
+  @media ${devices.mobile} {
+    height: 80px;
+  }
+`;
+
+export const NavigationGridMobile = styled(Grid)`
+  display: none;
+
+  @media ${devices.mobileAndTablet} {
+    display: grid;
+    background-color: var(--base-color-white);
+    padding-bottom: var(--navigation-large-margin);
+  }
+`;
+
+export const LogoContainer = styled.div`
+  height: 140px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  &&& .Logosvg {
+    height: 96px;
+    width: 66px;
+  }
+
+  @media ${devices.mobile} {
+    height: 80px;
+
+    &&& .Logosvg {
+      width: 100%;
+      height: 64px;
+    }
+  }
+`;
+
+export const MenuContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 140px;
+
+  @media ${devices.mobileAndTablet} {
+    flex-direction: row;
+    height: 80px;
+  }
+`;
+
+export const NavContainer = styled.div`
+  height: 40px;
+  margin-top: auto;
+
+  @media ${devices.mobileAndTablet} {
+    background-color: var(--base-color-white);
+    height: auto;
+    margin-top: 0px;
+  }
+`;
+
+export const NavTopContainer = styled.div`
+  height: 26px;
+  margin-left: auto;
+  margin-top: 20px;
+
+  @media ${devices.mobileAndTablet} {
+    margin-top: 1px;
+  }
+`;

package/src/components/organisms/Navigation/Navigation.test.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import menuData from './menuData.json';
+import Navigation from './Navigation';
+import { IMenuProps, INavTopProps } from '../../../types/navigation';
+
+describe('Navigation component', () => {
+  const onSearchHandler = jest.fn();
+  const onLinkHandler = jest.fn();
+
+  it('renders texts with specific text', () => {
+    const dataNavTop: INavTopProps = {
+      accountText: 'SIGN IN',
+      accountIcon: 'User',
+      basketText: '29 MINS',
+      basketNumItems: 8,
+      accountOptions: [
+        {
+          option: 'OPTION 1',
+          optionLink: 'link 1',
+        },
+        {
+          option: 'OPTION 2',
+          optionLink: 'link 2',
+        },
+        {
+          option: 'OPTION 3',
+          optionLink: 'link 3',
+        },
+      ],
+    };
+    const onSearch = onSearchHandler;
+    const onLink = onLinkHandler;
+
+    const { getByText } = render(
+      <Navigation menuData={menuData as IMenuProps} dataNavTop={dataNavTop} onSearch={onSearch} onLink={onLink} />
+    );
+
+    expect(getByText('SIGN IN')).toBeInTheDocument();
+    expect(getByText('29 MINS')).toBeInTheDocument();
+    expect(getByText('8')).toBeInTheDocument();
+  });
+
+  it('calls onLink callback when nav text is clicked', () => {
+    const dataNavTop: INavTopProps = {
+      accountText: 'SIGN IN',
+      accountIcon: 'User',
+      basketText: '29 MINS',
+      basketNumItems: 8,
+      accountOptions: [
+        {
+          option: 'OPTION 1',
+          optionLink: 'link 1',
+        },
+        {
+          option: 'OPTION 2',
+          optionLink: 'link 2',
+        },
+        {
+          option: 'OPTION 3',
+          optionLink: 'link 3',
+        },
+      ],
+    };
+    const onSearch = onSearchHandler;
+    const onLink = onLinkHandler;
+
+    const { getByText } = render(
+      <Navigation menuData={menuData as IMenuProps} dataNavTop={dataNavTop} onSearch={onSearch} onLink={onLink} />
+    );
+    fireEvent.click(getByText('29 MINS'));
+
+    expect(onLinkHandler).toBeCalled();
+  });
+
+  it('calls onSearch callback when click on Search Bar', () => {
+    const dataNavTop: INavTopProps = {
+      accountText: 'SIGN IN',
+      accountIcon: 'User',
+      basketText: '29 MINS',
+      basketNumItems: 8,
+      accountOptions: [
+        {
+          option: 'OPTION 1',
+          optionLink: 'link 1',
+        },
+        {
+          option: 'OPTION 2',
+          optionLink: 'link 2',
+        },
+        {
+          option: 'OPTION 3',
+          optionLink: 'link 3',
+        },
+      ],
+    };
+    const onSearch = onSearchHandler;
+    const onLink = onLinkHandler;
+
+    const { getByTestId } = render(
+      <Navigation menuData={menuData as IMenuProps} dataNavTop={dataNavTop} onSearch={onSearch} onLink={onLink} />
+    );
+    fireEvent.click(getByTestId('search-icon'));
+
+    setTimeout(() => {
+      const input = getByTestId('input-html');
+      fireEvent.change(input, { target: { value: 'Metallica Festival' } });
+    }, 100);
+
+    setTimeout(() => {
+      fireEvent.click(getByTestId('search-button'));
+      expect(onSearchHandler).toBeCalled();
+    }, 100);
+  });
+});

package/src/components/organisms/Navigation/Navigation.tsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import {
+  NavigationGrid,
+  NavigationGridMobile,
+  LogoContainer,
+  MenuContainer,
+  NavContainer,
+  NavTopContainer,
+  NavigationGridSearch,
+} from './Navigation.style';
+import { GridItem } from '../../atoms/Grid';
+import Logo from '../../atoms/Logo';
+import NavTop from '../../molecules/NavTop';
+import { INavigationProps } from '../../../types/navigation';
+import Tabs from '../../molecules/Tabs';
+import SearchBar from '../../molecules/SearchBar';
+
+const Navigation = ({ dataNavTop, menuData, onSearch, onLink }: INavigationProps) => {
+  const searchBarRef: React.LegacyRef<HTMLDivElement> = React.createRef();
+  const [navTopData, setNavTopData] = useState(dataNavTop);
+  const [showMenu, setShowMenu] = useState(false);
+  const [showSearch, setshowSearch] = useState(false);
+  const { items } = menuData;
+
+  useEffect(() => {
+    setNavTopData(dataNavTop);
+  }, [dataNavTop]);
+
+  const onClickSearchHandler = () => {
+    setshowSearch(true);
+  };
+
+  const onLinkHandler = (link: string) => {
+    onLink(link);
+  };
+
+  const onShowMenuHandler = (show: boolean) => {
+    setShowMenu(show);
+  };
+
+  const onSearchHandler = (value: string) => {
+    onSearch(value);
+  };
+
+  const onCloseSearchHandler = () => {
+    setshowSearch(false);
+  };
+
+  const onChangeSearchHandler = (value: boolean) => {
+    if (value) {
+      searchBarRef.current!.style.opacity = '100%';
+    } else {
+      searchBarRef.current!.style.opacity = '50%';
+    }
+  };
+
+  return (
+    <>
+      <NavigationGrid>
+        <GridItem columnStartDesktop={2} columnSpanDesktop={1} columnStartDevice={2} columnSpanDevice={2}>
+          <LogoContainer>
+            <Logo></Logo>
+          </LogoContainer>
+        </GridItem>
+        <GridItem columnStartDesktop={3} columnSpanDesktop={13} columnStartDevice={4} columnSpanDevice={10}>
+          <MenuContainer>
+            <NavTopContainer>
+              <NavTop
+                accountIcon={navTopData.accountIcon}
+                accountOptions={navTopData.accountOptions}
+                accountText={navTopData.accountText}
+                basketText={navTopData.basketText}
+                basketNumItems={navTopData.basketNumItems}
+                onClickSearch={onClickSearchHandler}
+                onLink={onLinkHandler}
+                isShowSearch={showSearch}
+              ></NavTop>
+            </NavTopContainer>
+            <NavContainer>
+              <Tabs items={items} onChange={onLinkHandler} onShowMenu={onShowMenuHandler}></Tabs>
+            </NavContainer>
+          </MenuContainer>
+        </GridItem>
+      </NavigationGrid>
+      {showMenu && (
+        <NavigationGridMobile>
+          <GridItem columnStartDevice={2} columnSpanDevice={10}>
+            <NavContainer>
+              <Tabs items={items} onChange={onLinkHandler} onShowMenu={onShowMenuHandler} showMenu={true}></Tabs>
+            </NavContainer>
+          </GridItem>
+        </NavigationGridMobile>
+      )}
+      {showSearch && (
+        <NavigationGridSearch ref={searchBarRef}>
+          <GridItem columnStartDesktop={2} columnSpanDesktop={14} columnStartDevice={2} columnSpanDevice={12}>
+            <SearchBar
+              onChange={onChangeSearchHandler}
+              onClick={onSearchHandler}
+              onClose={onCloseSearchHandler}
+            ></SearchBar>
+          </GridItem>
+        </NavigationGridSearch>
+      )}
+    </>
+  );
+};
+
+export default Navigation;

package/src/components/organisms/Navigation/index.tsx

@@ -0,0 +1,3 @@
+import Navigation from './Navigation';
+
+export default Navigation;

package/src/components/organisms/Navigation/menuData.json

@@ -0,0 +1,104 @@
+{
+  "items": [
+    {
+      "title": "TICKETS & EVENTS",
+      "options": [
+        {
+          "option": "WHAT'S ON",
+          "optionLink": "/what's-on"
+        },
+        {
+          "option": "TICKETS",
+          "optionLink": "/visit/tickets"
+        }
+      ]
+    },
+    {
+      "title": "VISIT US",
+      "options": [ 
+        {
+          "option": "YOUR VISIT",
+          "optionLink": "/visit/your-visit"
+        },
+        {
+          "option": "ACCESSIBILITY",
+          "optionLink": "/visit/accessibility"
+        }
+      ]
+    },
+    {
+      "title": "STREAM",
+      "options": [
+        {
+          "option": "STREAM",
+          "optionLink": "/visit/stream"
+        },
+        {
+          "option": "CINEMA",
+          "optionLink": "/visit/cinema"
+        }
+      ]
+    },
+    {
+      "title": "SHOP",
+      "titleLink": "https://shop.roh.org.uk/",
+      "options": []
+    },
+    {
+      "title": "NEWS",
+      "titleLink": "/news",
+      "options": []
+    },
+    {
+      "title": "LEARNING",
+      "options": [ 
+        {
+          "option": "LEARNING PLATFORM",
+          "optionLink": "/learning/learning-platform"
+        },
+        {
+          "option": "YOUNG PEOPLE",
+          "optionLink": "/learning/young-people"
+        },
+        {
+          "option": "ADULTS",
+          "optionLink": "/learning/adults-learning"
+        },
+        {
+          "option": "COMMUNITIES",
+          "optionLink": "/learning/communities-3"
+        },
+        {
+          "option": "LEARNING IN THURROCK",
+          "optionLink": "/learning/learning-in-thurrock"
+        }
+      ]
+    },
+    {
+      "title": "JOIN & SUPPORT",
+      "options": [
+        {
+          "option": "DONATE",
+          "optionLink": "/visit/donate"
+        },
+        {
+          "option": "BECOME A MEMBER",
+          "optionLink": "/visit/become-a-member"
+        }
+      ]
+    },
+    {
+      "title": "ABOUT",
+      "options": [
+        {
+          "option": "ORCHESTRA",
+          "optionLink": "/visit/orchestra"
+        },
+        {
+          "option": "CAREERS",
+          "optionLink": "/visit/careers"
+        }
+      ]
+    }
+  ]
+}

package/src/components/organisms/index.tsx

@@ -0,0 +1,4 @@
+import Navigation from './Navigation';
+import Footer from './Footer';
+
+export { Navigation, Footer };

package/src/index.tsx

@@ -0,0 +1,44 @@
+import {
+  Editorial,
+  Footer,
+  GlobalStyles,
+  Grid,
+  GridItem,
+  Heading,
+  Icon,
+  Navigation,
+  PeopleListing,
+  PrimaryButton,
+  PromoWithTitle,
+  SecondaryButton,
+  SectionSplitter,
+  Sponsorship,
+  TertiaryButton,
+  TextOnly,
+  ThemeProvider,
+  TypeTags,
+} from './components';
+
+import { ThemeType } from './types/types';
+
+export {
+  Editorial,
+  Footer,
+  GlobalStyles,
+  Grid,
+  GridItem,
+  Icon,
+  Heading,
+  Navigation,
+  PeopleListing,
+  PrimaryButton,
+  PromoWithTitle,
+  SecondaryButton,
+  SectionSplitter,
+  Sponsorship,
+  TertiaryButton,
+  TextOnly,
+  ThemeProvider,
+  ThemeType,
+  TypeTags,
+};

package/src/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';