@royaloperahouse/chord 0.1.0

package/src/components/molecules/Tabs/Tabs.test.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Tabs from './Tabs';
+import { IDropdownProps } from '../../../types/types';
+
+describe('Tabs component', () => {
+  const onChangeHandler = jest.fn();
+  const onShowMenuHandler = jest.fn();
+
+  it('renders text with specific text', () => {
+    const items: IDropdownProps[] = [
+      {
+        title: 'TEXT LINK 1',
+        options: [
+          {
+            option: 'OPTION 1 OPTION 1OPTION 1',
+            optionLink: 'link 1',
+          },
+          {
+            option: 'OPTION 2',
+            optionLink: 'link 2',
+          },
+          {
+            option: 'OPTION 3',
+            optionLink: 'link 3',
+          },
+        ],
+      },
+      {
+        title: 'TEXT LINK 2',
+        titleLink: 'textlink',
+        options: [],
+      },
+    ];
+    const onChange = onChangeHandler;
+    const onShowMenu = onShowMenuHandler;
+
+    const { getByText } = render(<Tabs items={items} onChange={onChange} onShowMenu={onShowMenu}></Tabs>);
+
+    expect(getByText('TEXT LINK 1')).toBeInTheDocument();
+    expect(getByText('TEXT LINK 2')).toBeInTheDocument();
+  });
+
+  it('renders options when click text', () => {
+    const items: IDropdownProps[] = [
+      {
+        title: 'TEXT LINK 1',
+        options: [
+          {
+            option: 'OPTION 1 OPTION 1OPTION 1',
+            optionLink: 'link 1',
+          },
+          {
+            option: 'OPTION 2',
+            optionLink: 'link 2',
+          },
+          {
+            option: 'OPTION 3',
+            optionLink: 'link 3',
+          },
+        ],
+      },
+      {
+        title: 'TEXT LINK 2',
+        titleLink: 'textlink',
+        options: [],
+      },
+    ];
+    const onChange = onChangeHandler;
+    const onShowMenu = onShowMenuHandler;
+
+    const { getByText } = render(<Tabs items={items} onChange={onChange} onShowMenu={onShowMenu}></Tabs>);
+
+    fireEvent.click(getByText('TEXT LINK 1'));
+
+    expect(getByText('OPTION 2')).toBeInTheDocument();
+  });
+
+  it('calls onChangeHandler callback when text is clicked', () => {
+    const items: IDropdownProps[] = [
+      {
+        title: 'TEXT LINK 1',
+        options: [
+          {
+            option: 'OPTION 1 OPTION 1OPTION 1',
+            optionLink: 'link 1',
+          },
+          {
+            option: 'OPTION 2',
+            optionLink: 'link 2',
+          },
+          {
+            option: 'OPTION 3',
+            optionLink: 'link 3',
+          },
+        ],
+      },
+      {
+        title: 'TEXT LINK 2',
+        titleLink: 'textlink',
+        options: [],
+      },
+    ];
+    const onChange = onChangeHandler;
+    const onShowMenu = onShowMenuHandler;
+
+    const { getByText } = render(<Tabs items={items} onChange={onChange} onShowMenu={onShowMenu}></Tabs>);
+
+    fireEvent.click(getByText('TEXT LINK 2'));
+
+    expect(onChange).toBeCalled();
+  });
+
+  it('calls onChangeHandler callback when text option is clicked', () => {
+    const items: IDropdownProps[] = [
+      {
+        title: 'TEXT LINK 1',
+        options: [
+          {
+            option: 'OPTION 1 OPTION 1OPTION 1',
+            optionLink: 'link 1',
+          },
+          {
+            option: 'OPTION 2',
+            optionLink: 'link 2',
+          },
+          {
+            option: 'OPTION 3',
+            optionLink: 'link 3',
+          },
+        ],
+      },
+      {
+        title: 'TEXT LINK 2',
+        titleLink: 'textlink',
+        options: [],
+      },
+    ];
+    const onChange = onChangeHandler;
+    const onShowMenu = onShowMenuHandler;
+
+    const { getByText } = render(<Tabs items={items} onChange={onChange} onShowMenu={onShowMenu}></Tabs>);
+
+    fireEvent.click(getByText('TEXT LINK 1'));
+    fireEvent.click(getByText('OPTION 2'));
+
+    expect(onChange).toBeCalled();
+  });
+});

package/src/components/molecules/Tabs/Tabs.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { TabsContainer, MenuContainer, ItemsContainer, MenuItem } from './Tabs.style';
+import { ITabsProps } from '../../../types/types';
+import Dropdown from '../../atoms/Dropdown';
+import SvgIcon from '../../atoms/Icons/Icons';
+
+const Tabs = ({ items = [], onChange, onShowMenu, showMenu = false }: ITabsProps) => {
+  const [openMenu, setOpenMenu] = useState(false);
+
+  const onChangeHandler = (link: string) => {
+    if (onChange) {
+      onChange(link);
+    }
+  };
+
+  const onClickHandler = (value: boolean) => {
+    setOpenMenu(value);
+    if (onShowMenu) {
+      onShowMenu(value);
+    }
+  };
+
+  return (
+    <TabsContainer>
+      <ItemsContainer showMenu={showMenu}>
+        {items.map((item) => (
+          <Dropdown
+            key={`key-${Math.random()}`}
+            title={item.title}
+            titleLink={item.titleLink}
+            options={item.options}
+            onChange={(link) => onChangeHandler(link)}
+            isMobileBehaviour={showMenu}
+            withIcon={item.options && item.options.length > 0 ? 'right' : 'none'}
+          />
+        ))}
+      </ItemsContainer>
+      {!showMenu && (
+        <MenuContainer>
+          {openMenu ? (
+            <a
+              onClick={(e) => {
+                e.preventDefault();
+                onClickHandler(false);
+              }}
+            >
+              <SvgIcon className={`close-img`} iconName="Close" />
+            </a>
+          ) : (
+            <MenuItem>
+              <a
+                onClick={(e) => {
+                  e.preventDefault();
+                  onClickHandler(true);
+                }}
+              >
+                MENU
+              </a>
+            </MenuItem>
+          )}
+        </MenuContainer>
+      )}
+    </TabsContainer>
+  );
+};
+
+export default Tabs;

package/src/components/molecules/Tabs/index.tsx

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

package/src/components/molecules/TextOnly/TextOnly.stories.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import TextOnly from './TextOnly';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import { ThemeType } from '../../../types/types';
+
+const meta: Meta = {
+  title: 'Components/Editorial/TextOnly',
+  component: TextOnly,
+  argTypes: {
+    text: {
+      description: 'Body text inside the component',
+    },
+    ref: {
+      table: { disable: true },
+    },
+    theme: {
+      table: { disable: true },
+    },
+    as: {
+      table: { disable: true },
+    },
+    forwardedAs: {
+      table: { disable: true },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'This component is essentially a rich text editor',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url:
+        'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH%3A-Design-System-%26-Documentation?node-id=1614%3A28007',
+    },
+    jest: ['TextOnly'],
+  },
+};
+
+export default meta;
+
+interface IStorybookTextOnlyProps {
+  text: string;
+}
+
+const TextOnlyTemplate: Story<IStorybookTextOnlyProps> = (args) => <TextOnly {...args} />;
+
+export const TextOnlyDefault = TextOnlyTemplate.bind({});
+TextOnlyDefault.args = {
+  text: `Rich Text Editor. <em>Body 1 Italicised</em>. <u>Body 1 Underlined.</u> Pellentesque laoreet est et facilisis aliquet. Proin sit amet tincidunt massa, at lacinia odio. Maecenas eget interdum arcu. Etiam sed ullamcorper leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc in volutpat tellus, id feugiat magna. Duis bibendum dignissim metus. Fusce et elit sed justo sollicitudin egestas.
+<h1>Header 4. Lorem ipsum dolor sit amet, consectetur.</h1>
+Vivamus id laoreet ex. Cras tincidunt risus ligula, nec consequat justo commodo et. Integer facilisis porttitor elit vestibulum gravida. Curabitur nec massa ac odio sollicitudin aliquam at a lacus. Donec congue blandit dui.
+<h2>Subtitle 1. Donec porta libero non ante iaculis faucibus.</h2>
+<ul>
+<li>Body 1 Listing. Quisque aliquam faucibus pretium.</li>
+<li>Etiam varius nec felis nec ullamcorper. Curabitur in ante lacus.</li>
+<li>Pellentesque ac pharetra lorem. Pellentesque dictum dolor sit amet scelerisque facilisis.</li>
+<li>Vestibulum molestie, lacus vel iaculis pharetra, libero neque mattis leovitae. </li>
+<li>Ut sodales, erat ut fringilla maximus, dolor risus lobortis justo, eu lobortis lacus.</li>
+</ul>
+`,
+};

package/src/components/molecules/TextOnly/TextOnly.style.tsx

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+export const TextContainer = styled.div`
+  font-size: var(--font-size-body-1);
+  font-family: var(--font-family-body-1);
+  font-weight: var(--font-weight-body-1);
+  letter-spacing: var(--letter-spacing-body-1);
+  line-height: var(--line-height-body-1);
+  text-transform: var(--text-transform-body-1);
+
+  & h1 {
+    font-size: var(--font-size-header-4);
+    font-family: var(--font-family-header);
+    font-weight: var(--font-weight-header-4);
+    letter-spacing: var(--letter-spacing-header-4);
+    line-height: var(--line-height-header-4);
+    text-transform: uppercase;
+    white-space: break-spaces;
+    overflow-wrap: break-word;
+  }
+
+  & h2 {
+    font-size: var(--font-size-subtitles-1);
+    font-family: var(--font-family-subtitles);
+    font-weight: var(--font-weight-subtitles-1);
+    letter-spacing: var(--letter-spacing-subtitles-1);
+    line-height: var(--line-height-subtitles-1);
+    text-transform: uppercase;
+    white-space: break-spaces;
+    overflow-wrap: break-word;
+  }
+
+  & em {
+    font-family: var(--font-family-body-italics);
+  }
+
+  & u {
+    font-size: var(--font-size-body-1);
+    font-family: var(--font-family-body-1);
+  }
+
+  & ul {
+    padding: 0;
+    list-style: none;
+  }
+
+  & ul > li:before {
+    display: inline-block;
+    content: '—';
+    width: 20px;
+  }
+
+  & li {
+    line-height: var(--line-height-listing);
+  }
+`;

package/src/components/molecules/TextOnly/TextOnly.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import TextOnly from './TextOnly';
+
+describe('TextOnly component', () => {
+  const text = `Rich Text Editor. <em>Body 1 Italicised</em>. <u>Body 1 Underlined.</u> Pellentesque laoreet est et facilisis aliquet. Proin sit amet tincidunt massa, at lacinia odio. Maecenas eget interdum arcu. Etiam sed ullamcorper leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc in volutpat tellus, id feugiat magna. Duis bibendum dignissim metus. Fusce et elit sed justo sollicitudin egestas.
+<h1>Header 4. Lorem ipsum dolor sit amet, consectetur.</h1>
+Vivamus id laoreet ex. Cras tincidunt risus ligula, nec consequat justo commodo et. Integer facilisis porttitor elit vestibulum gravida. Curabitur nec massa ac odio sollicitudin aliquam at a lacus. Donec congue blandit dui.
+<h2>Subtitle 1. Donec porta libero non ante iaculis faucibus.</h2>
+<ul>
+<li>Body 1 Listing. Quisque aliquam faucibus pretium.</li>
+<li>Etiam varius nec felis nec ullamcorper. Curabitur in ante lacus.</li>
+<li>Pellentesque ac pharetra lorem. Pellentesque dictum dolor sit amet scelerisque facilisis.</li>
+<li>Vestibulum molestie, lacus vel iaculis pharetra, libero neque mattis leovitae. </li>
+<li>Ut sodales, erat ut fringilla maximus, dolor risus lobortis justo, eu lobortis lacus.</li>
+</ul>
+`;
+
+  it('renders properly text italicised', () => {
+    const { getByText } = render(<TextOnly text={text} />);
+
+    const italicisedItem = getByText('Body 1 Italicised');
+
+    expect(italicisedItem).toBeInTheDocument();
+    expect(italicisedItem).toHaveStyle({ 'font-family': 'var(--font-family-body-italics)' });
+  });
+
+  it('renders properly text body 1', () => {
+    const { getByText } = render(<TextOnly text={text} />);
+
+    const bodyItem = getByText('Rich Text Editor', { exact: false });
+
+    expect(bodyItem).toBeInTheDocument();
+    expect(bodyItem).toHaveStyle({ 'font-family': 'var(--font-family-body-1)' });
+    expect(bodyItem).toHaveStyle({ 'line-height': 'var(--line-height-body-1)' });
+    expect(bodyItem).toHaveStyle({ 'font-size': 'var(--font-size-body-1)' });
+  });
+
+  it('renders properly text underlined', () => {
+    const { getByText } = render(<TextOnly text={text} />);
+
+    const underlinedItem = getByText('Body 1 Underlined.');
+
+    expect(underlinedItem).toBeInTheDocument();
+    expect(underlinedItem).toHaveStyle({ 'font-family': 'var(--font-family-body-1)' });
+    expect(underlinedItem).toHaveStyle({ 'font-size': 'var(--font-size-body-1)' });
+  });
+
+  it('renders properly text header', () => {
+    const { getByText } = render(<TextOnly text={text} />);
+
+    const headerItem = getByText('Header 4. Lorem ipsum dolor sit amet, consectetur.');
+
+    expect(headerItem).toBeInTheDocument();
+    expect(headerItem).toHaveStyle({ 'font-family': 'var(--font-family-header)' });
+    expect(headerItem).toHaveStyle({ 'line-height': 'var(--line-height-header-4)' });
+    expect(headerItem).toHaveStyle({ 'font-size': 'var(--font-size-header-4)' });
+  });
+
+  it('renders properly text subtitle', () => {
+    const { getByText } = render(<TextOnly text={text} />);
+
+    const headerItem = getByText('Subtitle 1. Donec porta libero non ante iaculis faucibus.');
+
+    expect(headerItem).toBeInTheDocument();
+    expect(headerItem).toHaveStyle({ 'font-family': 'var(--font-family-subtitles)' });
+    expect(headerItem).toHaveStyle({ 'line-height': 'var(--line-height-subtitles-1)' });
+    expect(headerItem).toHaveStyle({ 'font-size': 'var(--font-size-subtitles-1)' });
+  });
+
+  it('renders properly text listing', () => {
+    const { getByText } = render(<TextOnly text={text} />);
+
+    const headerItem = getByText('Body 1 Listing. Quisque aliquam faucibus pretium.');
+
+    expect(headerItem).toBeInTheDocument();
+    expect(headerItem).toHaveStyle({ 'line-height': 'var(--line-height-listing)' });
+  });
+});

package/src/components/molecules/TextOnly/TextOnly.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from 'react';
+import { TextContainer } from './TextOnly.style';
+import { Grid, GridItem } from '../../atoms';
+import { ITextOnlyProps } from '../../../types/types';
+
+const TextOnly: FunctionComponent<ITextOnlyProps> = ({ text = '' }) => {
+  return (
+    <Grid>
+      <GridItem columnStartDesktop={3} columnSpanDesktop={8} columnStartDevice={1} columnSpanDevice={14}>
+        <TextContainer dangerouslySetInnerHTML={{ __html: text }} />
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default TextOnly;

package/src/components/molecules/TextOnly/index.tsx

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

package/src/components/molecules/index.tsx

@@ -0,0 +1,7 @@
+import Editorial from './Editorial';
+import PeopleListing from './PeopleListing';
+import PromoWithTitle from './PromoWithTitle';
+import SectionTitle from './SectionTitle';
+import TextOnly from './TextOnly';
+
+export { Editorial, PeopleListing, PromoWithTitle, SectionTitle, TextOnly };

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import FooterComponent from './Footer';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import { ThemeType } from '../../../types/types';
+import data from './exampleData.json';
+import { FooterData } from '../../../types/footer';
+
+const meta: Meta = {
+  title: 'Components/Navigation/Footer',
+  component: FooterComponent,
+  argTypes: {
+    ref: {
+      table: { disable: true },
+    },
+    theme: {
+      table: { disable: true },
+    },
+    as: {
+      table: { disable: true },
+    },
+    forwardedAs: {
+      table: { disable: true },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Navigation footer that will be present in every page',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH:-Design-System-and-Documentation?node-id=3%3A1497',
+    },
+    jest: ['Footer'],
+  },
+};
+
+export default meta;
+
+const FooterTemplate: Story = () => <FooterComponent data={data as FooterData} />;
+
+export const Footer = FooterTemplate.bind({});

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

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import { devices } from '../../../styles/viewports';
+
+export const FooterSection = styled.section`
+  background-color: var(--base-color-black);
+  color: var(--base-color-white);
+`;
+
+export const FooterContainer = styled.div`
+  height: var(--footer-height);
+  padding-top: var(--footer-padding-top);
+  padding-bottom: var(--footer-padding-bottom);
+  display: grid;
+  grid-template-rows:
+    min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(
+      --footer-vertical-spacing-sm
+    )
+    min-content;
+  grid-template-areas:
+    'row1'
+    '.'
+    'row2'
+    '.'
+    'row3'
+    '.'
+    'row4';
+`;
+
+export const PolicyLinksRow = styled.div`
+  grid-area: row1;
+  justify-self: center;
+
+  @media ${devices.mobile} {
+    & {
+      justify-self: start;
+      grid-area: row2;
+    }
+  }
+`;
+
+export const ContactNewsletterRow = styled.div`
+  grid-area: row2;
+
+  @media ${devices.mobile} {
+    & {
+      grid-area: row1;
+    }
+  }
+`;
+
+export const ArtsLogoRow = styled.div`
+  grid-area: row3;
+  justify-self: center;
+
+  @media ${devices.mobile} {
+    justify-self: start;
+  }
+`;
+
+export const AdditionalInfo = styled.p`
+  grid-area: row4;
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body-3);
+  line-height: var(--line-height-body-3);
+  text-align: center;
+  margin: 0;
+  padding: 0;
+
+  @media ${devices.mobile} {
+    text-align: left;
+  }
+`;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import data from './exampleData.json';
+import Footer from './Footer';
+import { FooterData } from '../../../types/footer';
+
+describe('PolicyLinks component', () => {
+  it('renders a policy links section', () => {
+    const { getByTestId } = render(<Footer data={data as FooterData} />);
+
+    expect(getByTestId('policy-links')).toBeInTheDocument();
+  });
+
+  it('renders a contact & newsletter section', () => {
+    const { getByTestId } = render(<Footer data={data as FooterData} />);
+
+    expect(getByTestId('contact-newsletter')).toBeInTheDocument();
+  });
+
+  it('renders an arts logo section', () => {
+    const { getByTestId } = render(<Footer data={data as FooterData} />);
+
+    expect(getByTestId('arts-logo')).toBeInTheDocument();
+  });
+
+  it('renders an additional info section', () => {
+    const { getByTestId } = render(<Footer data={data as FooterData} />);
+
+    expect(getByTestId('additional-info')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,53 @@
+import React, { FunctionComponent } from 'react';
+import {
+  FooterSection,
+  FooterContainer,
+  AdditionalInfo,
+  PolicyLinksRow,
+  ContactNewsletterRow,
+  ArtsLogoRow,
+} from './Footer.style';
+import { Grid, GridItem } from '../../atoms/Grid';
+import PolicyLinks from '../../molecules/PolicyLinks';
+import ContactNewsletter from '../../molecules/ContactNewsletter';
+import { Icon } from '../../atoms/Icons';
+import { CommonLink, PolicyLink, SocialMediaLink, Newsletter, IFooterProps, ExternalLink } from '../../../types/footer';
+
+const Footer: FunctionComponent<IFooterProps> = ({ data }) => {
+  const policyLinks: PolicyLink[] = data.policyLinks;
+  const newsletter: Newsletter = data.newsletter;
+  const socialMediaLinks: SocialMediaLink[] = data.socialMediaLinks as SocialMediaLink[];
+  const contact: CommonLink = data.contact;
+  const { dataRoh: artsDataRoh, ...artsLogo }: ExternalLink = data.artsLogo;
+  const additionalInfo: string = data.additionalInfo;
+
+  return (
+    <FooterSection>
+      <Grid>
+        <GridItem columnStartDesktop={4} columnSpanDesktop={10} columnStartDevice={2} columnSpanDevice={12}>
+          <FooterContainer>
+            <PolicyLinksRow data-testid="policy-links">
+              <PolicyLinks items={policyLinks} />
+            </PolicyLinksRow>
+            <ContactNewsletterRow data-testid="contact-newsletter">
+              <ContactNewsletter
+                signUpText={newsletter.text}
+                signUpLink={newsletter.link}
+                socialMediaLinks={socialMediaLinks}
+                contact={contact}
+              />
+            </ContactNewsletterRow>
+            <ArtsLogoRow data-testid="arts-logo">
+              <a data-roh={artsDataRoh} target="_blank" rel="noopener noreferrer" {...artsLogo}>
+                <Icon iconName="Sponsor" color="white" />
+              </a>
+            </ArtsLogoRow>
+            <AdditionalInfo data-testid="additional-info">{additionalInfo}</AdditionalInfo>
+          </FooterContainer>
+        </GridItem>
+      </Grid>
+    </FooterSection>
+  );
+};
+
+export default Footer;