@royaloperahouse/chord 0.1.0

package/src/components/atoms/Logo/index.tsx

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

package/src/components/atoms/Search/Search.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import Search from './index';
+import { ThemeType } from '../../../types/types';
+import { ISearchProps } from '../../../types/navigation';
+
+export default {
+  title: 'Components/Navigation/Search',
+  component: Search,
+  argTypes: {
+    ref: {
+      table: { disable: true },
+    },
+    theme: {
+      table: { disable: true },
+    },
+    as: {
+      table: { disable: true },
+    },
+    forwardedAs: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Search button',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House-UI-Guide-and-Spec?node-id=166%3A0',
+    },
+    jest: ['Search'],
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<ISearchProps> = (args) => <Search {...args} />;
+
+export const SearchNotSelected = Template.bind({});
+
+SearchNotSelected.args = {
+  selected: false,
+  onClick: () => {},
+};
+
+export const SearchSelected = Template.bind({});
+
+SearchSelected.args = {
+  selected: true,
+  onClick: () => {},
+};

package/src/components/atoms/Search/Search.style.tsx

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import { ISearchProps } from '../../../types/navigation';
+
+export const SearchContainer = styled.div<ISearchProps>`
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  border-bottom: 1px solid var(--base-color-transparent);
+  ${(props) => {
+    if (props.selected) {
+      return `
+        border-bottom: 1px solid var(--base-color-primary);   
+        && svg path {
+          fill: var(--base-color-primary);
+        }
+      `;
+    }
+    return '';
+  }}
+
+  :hover {
+    border-bottom: 1px solid var(--base-color-primary);
+    && svg path {
+      fill: var(--base-color-primary);
+    }
+  }
+`;
+
+export const SvgContainer = styled.div`
+  svg {
+    width: var(--navigation-large-gap);
+    height: var(--navigation-large-gap);
+  }
+`;

package/src/components/atoms/Search/Search.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Search from './Search';
+
+describe('Search component', () => {
+  const onSearchHandler = jest.fn();
+
+  it('renders text with specific text', () => {
+    const selected = false;
+
+    const { getByTestId } = render(<Search selected={selected} onClick={onSearchHandler}></Search>);
+
+    expect(getByTestId('search-icon')).toBeInTheDocument();
+  });
+
+  it('calls onSearch callback when icon is clicked', () => {
+    const selected = false;
+
+    const { getByTestId } = render(<Search selected={selected} onClick={onSearchHandler}></Search>);
+    fireEvent.click(getByTestId('search-icon'));
+
+    expect(onSearchHandler).toBeCalled();
+  });
+});

package/src/components/atoms/Search/Search.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SearchContainer, SvgContainer } from './Search.style';
+import { ISearchProps } from '../../../types/navigation';
+import SvgIcon from '../Icons/Icons';
+
+const Search = ({ selected = false, onClick }: ISearchProps) => {
+  return (
+    <SearchContainer selected={selected} onClick={onClick} data-testid="search-icon">
+      <SvgContainer>
+        <SvgIcon iconName="Search" />
+      </SvgContainer>
+    </SearchContainer>
+  );
+};
+
+export default Search;

package/src/components/atoms/Search/index.tsx

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

package/src/components/atoms/SectionSplitter/SectionSplitter.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import SectionSplitter from './index';
+import { ThemeType } from '../../../types/types';
+import { ISectionSplitterProps } from '../../../types/types';
+
+export default {
+  title: 'Components/SectionSplitter',
+  component: SectionSplitter,
+  parameters: {
+    docs: {
+      description: {
+        component: 'SectionSplitter',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url:
+        'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH%3A-Design-System-%26-Documentation?node-id=2186%3A8597',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<ISectionSplitterProps> = (args) => <SectionSplitter {...args} />;
+
+export const SectionSplitterFullwidth = Template.bind({});
+
+SectionSplitterFullwidth.args = {
+  fullWidth: true,
+};
+
+export const SectionSplitterTogrid = Template.bind({});
+
+SectionSplitterTogrid.args = {
+  fullWidth: false,
+};

package/src/components/atoms/SectionSplitter/SectionSplitter.style.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Grid } from '../../atoms/Grid';
+
+export const SectionSplitterContainer = styled(Grid)`
+  height: 4px;
+`;
+export const Splitter = styled.div`
+  width: 100%;
+  height: 4px;
+  background: var(--base-color-lightgrey);
+`;

package/src/components/atoms/SectionSplitter/SectionSplitter.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { SectionSplitterContainer, Splitter } from './SectionSplitter.style';
+import { GridItem } from '../../atoms/Grid';
+import { ISectionSplitterProps } from '../../../types/types';
+
+const SectionSplitter = ({ fullWidth = true }: ISectionSplitterProps) => {
+  return (
+    <SectionSplitterContainer>
+      {fullWidth ? (
+        <GridItem columnStartDesktop={1} columnSpanDesktop={16} columnStartDevice={1} columnSpanDevice={14}>
+          <Splitter />
+        </GridItem>
+      ) : (
+        <GridItem columnStartDesktop={3} columnSpanDesktop={12} columnStartDevice={2} columnSpanDevice={12}>
+          <Splitter />
+        </GridItem>
+      )}
+    </SectionSplitterContainer>
+  );
+};
+
+export default SectionSplitter;

package/src/components/atoms/SectionSplitter/index.tsx

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

package/src/components/atoms/Sponsorship/Sponsorship.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Sponsorship from '.';
+
+const meta: Meta = {
+  title: 'Foundations/Sponsorship',
+  component: Sponsorship,
+  parameters: {
+    controls: { expanded: true },
+    docs: {
+      description: {
+        component:
+          'The Rolex ticking clock is the primary sponsorship for the site. It only appears on certain pages, but must always sit in the same place. It must never appear at the same level as the ROH logo. On desktop, the clock sits at 60x60px in size and always sits beneath the navigation. It sits 20px below the navigation and on the outer margin (50px from the edge of the screen). It may go over images and colour blocks.',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH%3A-Design-System-%26-Documentation?node-id=16%3A2899',
+    },
+  },
+};
+
+export default meta;
+
+const Template: Story = (args) => <Sponsorship {...args} />;
+
+export const Default = Template.bind({});
+Default.storyName = 'Sponsorship';
+Default.parameters = {
+  previewTabs: {
+    canvas: { hidden: false },
+  },
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH:-Design-System-and-Documentation?node-id=16%3A2899',
+  },
+  jest: ['Sponsorship'],
+};

package/src/components/atoms/Sponsorship/Sponsorship.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Sponsorship from './Sponsorship';
+
+describe('Sponsorship component', () => {
+  it('renders as an iframe', () => {
+    const { container } = render(<Sponsorship />);
+
+    const renderedNode = container.firstChild;
+    const iframeNode = container.firstChild?.firstChild;
+    expect(renderedNode?.nodeName).toBe('DIV');
+    expect(iframeNode?.nodeName).toBe('IFRAME');
+  });
+
+  it('renders with default attributes', () => {
+    const { container } = render(<Sponsorship />);
+
+    const iframeNode = container.firstChild?.firstChild;
+    expect(iframeNode).toHaveAttribute('src', 'https://static.roh.org.uk/rolex/rolex.html?size=80');
+    expect(iframeNode).toHaveAttribute('data-roh', 'ImgAdvert');
+    expect(iframeNode).toHaveAttribute('title', 'rolex');
+  });
+
+  it('renders with set attributes', () => {
+    const src = 'my.url';
+    const title = 'My title override';
+    const dataRoh = 'dataRoh override';
+
+    const { container } = render(<Sponsorship src={src} title={title} dataRoh={dataRoh} />);
+
+    const iframeNode = container.firstChild?.firstChild;
+    expect(iframeNode).toHaveAttribute('src', src);
+    expect(iframeNode).toHaveAttribute('data-roh', dataRoh);
+    expect(iframeNode).toHaveAttribute('title', title);
+  });
+});

package/src/components/atoms/Sponsorship/Sponsorship.tsx

@@ -0,0 +1,53 @@
+import React, { FunctionComponent } from 'react';
+import styled from 'styled-components';
+import { devices } from '../../../styles/viewports';
+import { ISponsorshipProps } from '../../../types/types';
+
+const DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/rolex.html?size=80';
+const DEFAULT_SPONSORSHIP_TITLE = 'rolex';
+const DEFAULT_DATA_ROH = 'ImgAdvert';
+
+const SponsorshipStyled = styled.div`
+  background-color: transparent;
+  height: 80px;
+  margin: 0px;
+  overflow: hidden;
+  padding: 0;
+  width: 80px;
+
+  & > iframe {
+    border: 0;
+    display: block;
+    margin: 0px;
+    padding: 0px;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  @media ${devices.mobile} {
+    & {
+      height: 60px;
+      width: 60px;
+    }
+    & iframe {
+      height: 107px;
+      transform: scale(0.75) translate(-26px, -19px);
+      width: 107px;
+    }
+  }
+`;
+
+const Sponsorship: FunctionComponent<ISponsorshipProps> = ({
+  src = DEFAULT_SPONSORSHIP_IFRAME,
+  dataRoh = DEFAULT_DATA_ROH,
+  title = DEFAULT_SPONSORSHIP_TITLE,
+}) => {
+  return (
+    <SponsorshipStyled>
+      <iframe src={src} scrolling="no" data-roh={dataRoh} title={title} className="desktopIframe"></iframe>
+    </SponsorshipStyled>
+  );
+};
+
+export default Sponsorship;

package/src/components/atoms/Sponsorship/index.tsx

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

package/src/components/atoms/Tab/Tab.stories.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import Tab from './index';
+import { ITabProps, ThemeType } from '../../../types/types';
+
+export default {
+  title: 'Components/Tab',
+  component: Tab,
+  argTypes: {
+    ref: {
+      table: { disable: true },
+    },
+    theme: {
+      table: { disable: true },
+    },
+    as: {
+      table: { disable: true },
+    },
+    forwardedAs: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Tab component',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House-UI-Guide-and-Spec?node-id=166%3A0',
+    },
+    jest: ['Tab'],
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<ITabProps> = (args) => <Tab {...args} />;
+
+export const TabDefault = Template.bind({});
+
+TabDefault.args = {
+  title: 'LINK TEXT',
+  titleLink: 'link',
+  selected: false,
+  onClick: () => {},
+};
+
+export const TabWithProperIcon = Template.bind({});
+
+TabWithProperIcon.args = {
+  title: 'LINK TEXT',
+  titleLink: 'link 4',
+  selected: true,
+  iconName: 'User',
+  onClick: () => {},
+};

package/src/components/atoms/Tab/Tab.style.tsx

@@ -0,0 +1,105 @@
+import styled from 'styled-components';
+import { ITabProps } from '../../../types/types';
+import { devices } from '../../../styles/viewports';
+
+export const TabText = styled.a<ITabProps>`
+  font-size: var(--font-size-navigation);
+  font-family: var(--font-family-navigation);
+  color: var(--base-color-black);
+  margin-right: 0px;
+  margin-top: 5px;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  ${(props) => {
+    if (props.withIcon === 'left') {
+      return `margin-left: 5px;`;
+    }
+
+    return ``;
+  }}
+
+  @media ${devices.mobileAndTablet} {
+    ${(props) => {
+      if (!props.withTextInMobile) {
+        return `
+            display: none;
+          `;
+      }
+
+      return ``;
+    }}
+  }
+`;
+
+export const TitleContainer = styled.div<ITabProps>`
+  display: flex;
+  flex-direction: row;
+  width: fit-content;
+  border-bottom: 1px solid transparent;
+
+  ${(props) => {
+    if (props.withIcon === 'left') {
+      return `
+      flex-direction: row-reverse;
+      svg {
+        margin-right: 6px;
+      }`;
+    }
+
+    return `
+      svg {
+          margin-left: 6px;
+      }`;
+  }}
+
+  svg {
+    width: var(--navigation-large-gap);
+    height: var(--navigation-large-gap);
+  }
+
+  ${(props) => {
+    if (props.selected) {
+      return `
+        cursor: pointer;
+        border-bottom: 1px solid var(--base-color-primary);
+        && a {
+          color: var(--base-color-primary);
+        } 
+        && svg path {
+          fill: var(--base-color-primary);
+        } 
+      `;
+    }
+
+    return '';
+  }}
+
+  ${(props) => {
+    if (!props.withTextInMobile) {
+      return `
+        svg {
+          margin-right: 6px;
+        }
+      `;
+    }
+    return ``;
+  }}
+
+  @media ${devices.mobileAndTablet} {
+    svg {
+      margin-right: 0px;
+    }
+  }
+
+  :hover {
+    cursor: pointer;
+    border-bottom: 1px solid var(--base-color-primary);
+    && a {
+      color: var(--base-color-primary);
+    }
+    && svg path {
+      fill: var(--base-color-primary);
+    }
+  }
+`;

package/src/components/atoms/Tab/Tab.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Tab from './Tab';
+
+describe('Tab component', () => {
+  const onClickHandler = jest.fn();
+
+  it('renders text with specific text', () => {
+    const title = 'TAB1';
+    const titleLink = 'foo2';
+    const onClick = onClickHandler;
+
+    const { getByText } = render(<Tab title={title} onClick={onClick} titleLink={titleLink}></Tab>);
+
+    expect(getByText(title)).toBeInTheDocument();
+  });
+
+  it('calls onClick callback when text is clicked', () => {
+    const title = 'TAB2';
+    const titleLink = 'foo1';
+    const onClick = onClickHandler;
+
+    const { getByText } = render(<Tab title={title} onClick={onClick} titleLink={titleLink}></Tab>);
+    fireEvent.click(getByText('TAB2'));
+
+    expect(onClickHandler).toBeCalled();
+  });
+});

package/src/components/atoms/Tab/Tab.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { TabText, TitleContainer } from './Tab.style';
+import { ITabProps } from '../../../types/types';
+import { Icon } from '../Icons';
+
+const Tab = ({
+  title,
+  titleLink = '',
+  onClick,
+  selected = false,
+  iconName = 'DropdownArrow',
+  withIcon = 'right',
+  withTextInMobile = true,
+}: ITabProps) => {
+  const clickHandler = () => {
+    if (onClick) {
+      onClick(titleLink);
+    }
+  };
+
+  return (
+    <TitleContainer
+      withTextInMobile={withTextInMobile}
+      withIcon={withIcon}
+      selected={selected}
+      onClick={() => clickHandler()}
+    >
+      <TabText withTextInMobile={withTextInMobile}>{title}</TabText>
+      {withIcon !== 'none' && <Icon iconName={iconName} />}
+    </TitleContainer>
+  );
+};
+
+export default Tab;

package/src/components/atoms/Tab/index.tsx

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