@royaloperahouse/chord 0.1.0 → 0.3.0

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

@@ -1,78 +0,0 @@
-{
-  "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

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

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

@@ -1,110 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

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

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

@@ -1,104 +0,0 @@
-{
-  "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

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

package/src/index.tsx

@@ -1,44 +0,0 @@
-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

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