@royaloperahouse/chord 0.1.0

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import EditorialComponent from './Editorial';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import { ThemeType } from '../../../types/types';
+import EditorialImage from '../../../../external/images/editorial.jpeg';
+
+const meta: Meta = {
+  title: 'Components/Editorial/Editorial',
+  component: EditorialComponent,
+  argTypes: {
+    text: {
+      description: 'Body text inside the component',
+    },
+    subtitle: {
+      description: 'Subtitle inside the component',
+    },
+    imagePosition: {
+      description: 'Position of the image 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 used to house any textural information which have imagery',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House-UI-Guide-and-Spec?node-id=1664%3A8523',
+    },
+    jest: ['Editorial'],
+  },
+};
+
+export default meta;
+
+interface IStorybookEditorialProps {
+  text: string;
+  subtitle?: string;
+  imagePosition?: 'left' | 'right';
+}
+
+const EditorialTemplate: Story<IStorybookEditorialProps> = (args) => (
+  <EditorialComponent {...args}>
+    <img src={EditorialImage} alt="test" />
+  </EditorialComponent>
+);
+
+export const Editorial = EditorialTemplate.bind({});
+Editorial.args = {
+  text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ante nec nulla commodo, quis gravida erat dapibus. Sed varius ante et iaculis molestie. Ut elit orci, auctor non placerat eu, consequat quis elit. Aliquam auctor tristique leo, eget gravida tortor faucibus et. Integer est sem, sagittis ut efficitur rhoncus, dignissim ut metus. Vivamus ullamcorper in velit sed elementum.
+
+Nunc sed dui dolor. Donec ullamcorper mollis elit, eu consequat leo aliquet quis. Aenean enim lectus, tincidunt vel augue id, gravida porttitor quam. Aenean euismod nunc eget nibh commodo, sed dapibus libero ultrices. Pellentesque vel nibh mattis, tincidunt diam eget, placerat ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.`,
+  subtitle: 'Editorial subtitle',
+};

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

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+import { IEditorialGridProps } from '../../../types/editorial';
+import { devices } from '../../../styles/viewports';
+
+export const EditorialGrid = styled.div<IEditorialGridProps>`
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--grid-column-gap);
+  grid-template-areas: ${({ imageToLeft }) =>
+    imageToLeft
+      ? `'left left left left left . right right right right right right'`
+      : `'left left left left left left . right right right right right'`};
+
+  @media ${devices.mobile} {
+    & {
+      display: grid;
+      grid-template-columns: 100%;
+      grid-template-rows: min-content 24px min-content;
+      grid-template-areas:
+        'row1'
+        '.'
+        'row2';
+    }
+  }
+`;
+
+export const EditorialImageWrapper = styled.div<IEditorialGridProps>`
+  grid-area: ${({ imageToLeft }) => (imageToLeft ? 'left' : 'right')};
+  @media ${devices.mobile} {
+    & {
+      grid-area: row1;
+  }
+`;
+
+export const EditorialTextWrapper = styled.div<IEditorialGridProps>`
+  grid-area: ${({ imageToLeft }) => (imageToLeft ? 'right' : 'left')};
+  align-self: center;
+  @media ${devices.mobile} {
+    & {
+      grid-area: row2;
+      align-self: start;
+  }
+`;
+
+export const EditorialSubtitle = styled.span`
+  font-family: var(--font-family-subtitles);
+  font-size: var(--font-size-subtitles-1);
+  font-weight: var(--font-weigth-subtitles-1);
+  line-height: var(--line-height-subtitles-1);
+  letter-spacing: var(--letter-spacing-subtitles-1);
+  text-transform: var(--text-transform-subtitles-1);
+  margin-bottom: var(--editorial-subtitle-margin-bottom);
+  display: block;
+  overflow-wrap: break-word;
+`;
+
+export const EditorialText = styled.div`
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body-1);
+  font-weight: var(--font-weigth-body-1);
+  line-height: var(--line-height-body-1);
+  letter-spacing: var(--letter-spacing-body-1);
+  text-transform: var(--text-transform-body-1);
+  margin: 0;
+  padding: 0;
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+
+  em {
+    font-family: var(--font-family-body-italics);
+    font-style: normal;
+  }
+`;

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, within } from '@testing-library/react';
+import Editorial from './Editorial';
+
+describe('Editorial component', () => {
+  const Image = () => <img data-testid="test-image" src="/foo" alt="test" />;
+  const text = 'foo text';
+  const subtitle = 'foo subtitle';
+
+  it('renders image to the left if no position is set', () => {
+    const { getByTestId } = render(
+      <Editorial text={text}>
+        <Image />
+      </Editorial>
+    );
+
+    const imageGridItem = getByTestId('image-wrapper');
+    const textGridItem = getByTestId('text-wrapper');
+
+    expect(imageGridItem).toHaveStyle({ 'grid-area': 'left' });
+    expect(textGridItem).toHaveStyle({ 'grid-area': 'right' });
+    expect(within(imageGridItem).getByTestId('test-image')).toBeInTheDocument();
+    expect(within(textGridItem).getByText(text)).toBeInTheDocument();
+  });
+
+  it('renders only image and text if subtitle is not provided', () => {
+    const { getByTestId } = render(
+      <Editorial text={text}>
+        <Image />
+      </Editorial>
+    );
+
+    const imageGridItem = getByTestId('image-wrapper');
+    const textGridItem = getByTestId('text-wrapper');
+    expect(within(imageGridItem).getByTestId('test-image')).toBeInTheDocument();
+    expect(within(textGridItem).getByText(text)).toBeInTheDocument();
+    expect(within(textGridItem).queryAllByText(subtitle)).toHaveLength(0);
+  });
+
+  it('renders image and text properly when image position is left', () => {
+    const { getByTestId } = render(
+      <Editorial imagePosition="left" text={text} subtitle={subtitle}>
+        <Image />
+      </Editorial>
+    );
+
+    const imageGridItem = getByTestId('image-wrapper');
+    const textGridItem = getByTestId('text-wrapper');
+
+    expect(imageGridItem).toHaveStyle({ 'grid-area': 'left' });
+    expect(textGridItem).toHaveStyle({ 'grid-area': 'right' });
+    expect(within(imageGridItem).getByTestId('test-image')).toBeInTheDocument();
+    expect(within(textGridItem).getByText(text)).toBeInTheDocument();
+    expect(within(textGridItem).getByText(subtitle)).toBeInTheDocument();
+  });
+
+  it('renders image and text properly when image position is right', () => {
+    const { getByTestId } = render(
+      <Editorial imagePosition="right" text={text} subtitle={subtitle}>
+        <Image />
+      </Editorial>
+    );
+
+    const imageGridItem = getByTestId('image-wrapper');
+    const textGridItem = getByTestId('text-wrapper');
+
+    expect(imageGridItem).toHaveStyle({ 'grid-area': 'right' });
+    expect(textGridItem).toHaveStyle({ 'grid-area': 'left' });
+    expect(within(imageGridItem).getByTestId('test-image')).toBeInTheDocument();
+    expect(within(textGridItem).getByText(text)).toBeInTheDocument();
+    expect(within(textGridItem).getByText(subtitle)).toBeInTheDocument();
+  });
+});

package/src/components/molecules/Editorial/Editorial.tsx

@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from 'react';
+import { Grid, GridItem, ImageAspectRatioWrapper } from '../../atoms';
+import {
+  EditorialGrid,
+  EditorialImageWrapper,
+  EditorialSubtitle,
+  EditorialText,
+  EditorialTextWrapper,
+} from './Editorial.style';
+import { IEditorialProps } from '../../../types/editorial';
+import { AspectRatio } from '../../../types/image';
+
+const Editorial: FunctionComponent<IEditorialProps> = ({ imagePosition = 'left', subtitle, text, children }) => {
+  const imageToLeft = imagePosition === 'left';
+  return (
+    <Grid>
+      <GridItem columnStartDesktop={3} columnSpanDesktop={12} columnStartDevice={2} columnSpanDevice={12}>
+        <EditorialGrid imageToLeft={imageToLeft}>
+          <EditorialImageWrapper data-testid="image-wrapper" imageToLeft={imageToLeft}>
+            <ImageAspectRatioWrapper aspectRatio={AspectRatio['1:1']}>{children}</ImageAspectRatioWrapper>
+          </EditorialImageWrapper>
+          <EditorialTextWrapper data-testid="text-wrapper" imageToLeft={imageToLeft}>
+            {subtitle ? <EditorialSubtitle>{subtitle}</EditorialSubtitle> : null}
+            <EditorialText dangerouslySetInnerHTML={{ __html: text }} />
+          </EditorialTextWrapper>
+        </EditorialGrid>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default Editorial;

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

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

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import NavTop from './index';
+import { ThemeType } from '../../../types/types';
+import { INavTopProps } from '../../../types/navigation';
+
+export default {
+  title: 'Components/Navigation/NavTop',
+  component: NavTop,
+  argTypes: {
+    ref: {
+      table: { disable: true },
+    },
+    theme: {
+      table: { disable: true },
+    },
+    as: {
+      table: { disable: true },
+    },
+    forwardedAs: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Navigation tabs',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House-UI-Guide-and-Spec?node-id=166%3A0',
+    },
+    jest: ['NavTop'],
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<INavTopProps> = (args) => <NavTop {...args} />;
+
+export const NavTopDefault = Template.bind({});
+
+NavTopDefault.args = {
+  accountText: 'SIGN IN',
+  accountIcon: 'User',
+  accountOptions: [
+    {
+      option: 'OPTION 1',
+      optionLink: 'link 1',
+    },
+    {
+      option: 'OPTION 2',
+      optionLink: 'link 2',
+    },
+    {
+      option: 'OPTION 3',
+      optionLink: 'link 3',
+    },
+  ],
+  onLink: () => {},
+};
+
+export const NavTopWithBasket = Template.bind({});
+
+NavTopWithBasket.args = {
+  accountText: 'USER NAME',
+  accountIcon: 'UserSignedIn',
+  accountOptions: [
+    {
+      option: 'OPTION 1',
+      optionLink: 'link 1',
+    },
+    {
+      option: 'OPTION 2',
+      optionLink: 'link 2',
+    },
+    {
+      option: 'OPTION 3',
+      optionLink: 'link 3',
+    },
+  ],
+  onLink: () => {},
+  basketText: '20 MINS',
+  basketNumItems: 5,
+};

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { devices } from '../../../styles/viewports';
+
+export const NavTopContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: 16px;
+  justify-content: flex-end;
+  height: 26px;
+
+  @media ${devices.mobile} {
+    column-gap: 8px;
+  }
+`;

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

@@ -0,0 +1,113 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import NavTop from './NavTop';
+import { IOptionItem } from '../../../types/types';
+
+describe('NavTop component', () => {
+  const onLinkHandler = jest.fn();
+  const onClick = jest.fn();
+
+  it('renders text with specific text', () => {
+    const accountText = 'SIGN IN';
+    const accountIcon = 'User';
+    const accountOptions: IOptionItem[] = [];
+    const onLink = onLinkHandler;
+    const basketText = '20 MINS';
+    const basketNumItems = 5;
+    const onClickSearch = onClick;
+
+    const { getByText } = render(
+      <NavTop
+        onClickSearch={onClickSearch}
+        basketNumItems={basketNumItems}
+        basketText={basketText}
+        accountText={accountText}
+        accountOptions={accountOptions}
+        accountIcon={accountIcon}
+        onLink={onLink}
+      ></NavTop>
+    );
+
+    expect(getByText(accountText)).toBeInTheDocument();
+    expect(getByText(basketText)).toBeInTheDocument();
+    expect(getByText(basketNumItems)).toBeInTheDocument();
+  });
+
+  it('calls onLink callback when Account is clicked', () => {
+    const accountText = 'SIGN IN';
+    const accountIcon = 'User';
+    const accountOptions: IOptionItem[] = [];
+    const onLink = onLinkHandler;
+    const basketText = '20 MINS';
+    const basketNumItems = 5;
+    const onClickSearch = onClick;
+
+    const { getByText } = render(
+      <NavTop
+        onClickSearch={onClickSearch}
+        basketNumItems={basketNumItems}
+        basketText={basketText}
+        accountText={accountText}
+        accountOptions={accountOptions}
+        accountIcon={accountIcon}
+        onLink={onLink}
+      ></NavTop>
+    );
+
+    fireEvent.click(getByText('SIGN IN'));
+
+    expect(onLinkHandler).toBeCalled();
+  });
+
+  it('calls onLink callback when Basket is clicked', () => {
+    const accountText = 'SIGN IN';
+    const accountIcon = 'User';
+    const accountOptions: IOptionItem[] = [];
+    const onLink = onLinkHandler;
+    const basketText = '20 MINS';
+    const basketNumItems = 5;
+    const onClickSearch = onClick;
+
+    const { getByText } = render(
+      <NavTop
+        onClickSearch={onClickSearch}
+        basketNumItems={basketNumItems}
+        basketText={basketText}
+        accountText={accountText}
+        accountOptions={accountOptions}
+        accountIcon={accountIcon}
+        onLink={onLink}
+      ></NavTop>
+    );
+
+    fireEvent.click(getByText('20 MINS'));
+
+    expect(onLinkHandler).toBeCalled();
+  });
+
+  it('calls onLink callback when Search is clicked', () => {
+    const accountText = 'SIGN IN';
+    const accountIcon = 'User';
+    const accountOptions: IOptionItem[] = [];
+    const onLink = onLinkHandler;
+    const basketText = '20 MINS';
+    const basketNumItems = 5;
+    const onClickSearch = onClick;
+
+    const { getByTestId } = render(
+      <NavTop
+        onClickSearch={onClickSearch}
+        basketNumItems={basketNumItems}
+        basketText={basketText}
+        accountText={accountText}
+        accountOptions={accountOptions}
+        accountIcon={accountIcon}
+        onLink={onLink}
+      ></NavTop>
+    );
+
+    fireEvent.click(getByTestId('search-icon'));
+
+    expect(onClick).toBeCalled();
+  });
+});

package/src/components/molecules/NavTop/NavTop.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { NavTopContainer } from './NavTop.style';
+import { INavTopProps } from '../../../types/navigation';
+import Basket from '../../atoms/Basket';
+import Search from '../../atoms/Search';
+import Account from '../../atoms/Account';
+
+const NavTop = ({
+  accountText,
+  accountIcon,
+  accountOptions,
+  onLink,
+  basketText,
+  basketNumItems,
+  onClickSearch,
+  isShowSearch = false,
+}: INavTopProps) => {
+  return (
+    <NavTopContainer>
+      <Search onClick={onClickSearch} selected={isShowSearch}></Search>
+      <Basket text={basketText} numItems={basketNumItems} onClick={onLink}></Basket>
+      <Account title={accountText} options={accountOptions} iconName={accountIcon} onClick={onLink}></Account>
+    </NavTopContainer>
+  );
+};
+
+export default NavTop;

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

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