@royaloperahouse/chord 0.1.0

package/src/components/molecules/PromoWithTitle/PromoWithTitle.tsx

@@ -0,0 +1,53 @@
+import React, { FunctionComponent } from 'react';
+import {
+  PromoWithTitleGrid,
+  PromoWithTitleImageWrapper,
+  PromoWithTitleContentWrapper,
+  PromoWithTitleSubtitle,
+  PromoWithTitleText,
+  PromoWithTitleContainer,
+  ButtonsContainer,
+} from './PromoWithTitle.style';
+import { ImageAspectRatioWrapper, Heading, PrimaryButton, TertiaryButton } from '../../atoms';
+import { AspectRatio } from '../../../types/image';
+import { IPromoWithTitleProps } from '../../../types/editorial';
+
+const PromoWithTitle: FunctionComponent<IPromoWithTitleProps> = ({
+  imagePosition = 'left',
+  title,
+  titleSize = 'large',
+  subtitle,
+  text,
+  links,
+  children,
+}) => {
+  const imageToLeft = imagePosition === 'left';
+  const titleLevel = titleSize === 'large' ? 2 : 3;
+  const primaryButton = links?.[0];
+  const { text: primaryButtonText, ...restPrimaryButton } = primaryButton || {};
+  const tertiaryButton = links?.[1];
+  const { text: tertiaryButtonText, ...restTertiaryButton } = tertiaryButton || {};
+
+  return (
+    <PromoWithTitleGrid imageToLeft={imageToLeft}>
+      <PromoWithTitleImageWrapper data-testid="image-wrapper" imageToLeft={imageToLeft}>
+        <ImageAspectRatioWrapper aspectRatio={AspectRatio['4:3']}>{children}</ImageAspectRatioWrapper>
+      </PromoWithTitleImageWrapper>
+      <PromoWithTitleContentWrapper data-testid="content-wrapper" imageToLeft={imageToLeft}>
+        <PromoWithTitleContainer>
+          <Heading level={titleLevel}>{title}</Heading>
+        </PromoWithTitleContainer>
+        {subtitle ? <PromoWithTitleSubtitle>{subtitle}</PromoWithTitleSubtitle> : null}
+        <PromoWithTitleText dangerouslySetInnerHTML={{ __html: text as string }} />
+        {links ? (
+          <ButtonsContainer data-testid="buttons-wrapper">
+            {primaryButton ? <PrimaryButton {...restPrimaryButton}>{primaryButtonText}</PrimaryButton> : null}
+            {tertiaryButton ? <TertiaryButton {...restTertiaryButton}>{tertiaryButtonText}</TertiaryButton> : null}
+          </ButtonsContainer>
+        ) : null}
+      </PromoWithTitleContentWrapper>
+    </PromoWithTitleGrid>
+  );
+};
+
+export default PromoWithTitle;

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

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

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import SearchBar from './index';
+import { ThemeType } from '../../../types/types';
+import { ISearchBarProps } from '../../../types/navigation';
+
+export default {
+  title: 'Components/Navigation/SearchBar',
+  component: SearchBar,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House-UI-Guide-and-Spec?node-id=166%3A0',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<ISearchBarProps> = (args) => <SearchBar {...args} />;
+
+export const SearchBarDefault = Template.bind({});
+
+SearchBarDefault.args = {
+  onClick: () => {},
+  onClose: () => {},
+};

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

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+import { devices } from '../../../styles/viewports';
+
+export const SearchBarContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: 64px;
+  justify-content: space-between;
+  align-items: center;
+  height: 100px;
+  background-color: var(--base-color-white);
+
+  @media ${devices.mobile} {
+    column-gap: 12px;
+    height: 80px;
+  }
+`;
+
+export const SvgContainerSearch = styled.div`
+  svg {
+    width: var(--navigation-xlarge-gap);
+    height: var(--navigation-xlarge-gap);
+  }
+`;
+
+export const SvgContainerClose = styled.div`
+  svg {
+    width: var(--navigation-large-gap);
+    height: var(--navigation-large-gap);
+  }
+
+  :hover {
+    cursor: pointer;
+    && svg path {
+      fill: var(--base-color-primary);
+    }
+  }
+`;
+
+export const InputContainer = styled.div`
+  background-color: blue;
+  width: 100%;
+
+  input {
+    font-size: var(--font-size-search);
+    font-family: var(--font-family-listing);
+    border: none;
+    outline: none;
+    outline-color: var(--base-color-white);
+    height: 48px;
+    box-sizing: border-box;
+    width: 100%;
+
+    &.search-input {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    @media ${devices.mobile} {
+      column-gap: 24px;
+    }
+  }
+`;
+
+export const SearchLinkContainer = styled.div``;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import SearchBar from './SearchBar';
+
+describe('SearchBar component', () => {
+  const onSearchHandler = jest.fn();
+  const onCloseHandler = jest.fn();
+  const onChangeHandler = jest.fn();
+
+  it('renders text with specific text', () => {
+    const onSearch = onSearchHandler;
+    const onClose = onCloseHandler;
+
+    const { getByTestId } = render(
+      <SearchBar onChange={onChangeHandler} onClick={onSearch} onClose={onClose}></SearchBar>
+    );
+
+    expect(getByTestId('close-icon')).toBeInTheDocument();
+  });
+
+  it('calls onClose callback when click on close icon', () => {
+    const onSearch = onSearchHandler;
+    const onClose = onCloseHandler;
+
+    const { getByTestId } = render(
+      <SearchBar onChange={onChangeHandler} onClick={onSearch} onClose={onClose}></SearchBar>
+    );
+
+    fireEvent.click(getByTestId('close-icon'));
+    expect(onCloseHandler).toBeCalled();
+  });
+
+  it('should show Search button when change input', () => {
+    const onSearch = onSearchHandler;
+    const onClose = onCloseHandler;
+
+    const { getByTestId } = render(
+      <SearchBar onChange={onChangeHandler} onClick={onSearch} onClose={onClose}></SearchBar>
+    );
+    const input = getByTestId('input-html');
+
+    fireEvent.change(input, { target: { value: '23' } });
+
+    expect(getByTestId('search-button')).toBeInTheDocument();
+  });
+
+  it('calls onSearch callback when click on search button', () => {
+    const onSearch = onSearchHandler;
+    const onClose = onCloseHandler;
+
+    const { getByTestId } = render(
+      <SearchBar onChange={onChangeHandler} onClick={onSearch} onClose={onClose}></SearchBar>
+    );
+    const input = getByTestId('input-html');
+
+    fireEvent.change(input, { target: { value: 'Iron Maiden Opera' } });
+
+    setTimeout(() => {
+      fireEvent.click(getByTestId('search-button'));
+      expect(onSearchHandler).toBeCalled();
+    }, 100);
+  });
+});

package/src/components/molecules/SearchBar/SearchBar.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import {
+  SearchBarContainer,
+  SvgContainerClose,
+  SvgContainerSearch,
+  InputContainer,
+  SearchLinkContainer,
+} from './SearchBar.style';
+import { ISearchBarProps } from '../../../types/navigation';
+import SvgIcon from '../../atoms/Icons/Icons';
+import TextLink from '../../atoms/TextLink';
+import { Colors } from '../../../types/types';
+
+const SearhBar = ({ onClick, onClose, onChange }: ISearchBarProps) => {
+  const [showSearchLink, setShowSearchLink] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+
+  const onSearchHandler = (value: string) => {
+    onClick(value);
+  };
+
+  const onCloseHandler = () => {
+    onClose();
+  };
+
+  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const value = e.target.value;
+    if (value) {
+      setShowSearchLink(true);
+      setSearchValue(value);
+      onChange(true);
+    } else {
+      setShowSearchLink(false);
+      onChange(false);
+    }
+  };
+
+  return (
+    <SearchBarContainer>
+      <SvgContainerSearch>
+        <SvgIcon iconName="Search" />
+      </SvgContainerSearch>
+      <InputContainer>
+        <input
+          data-testid="input-html"
+          className="search-input"
+          placeholder="Search for anything ROH..."
+          type="text"
+          onChange={(e) => {
+            onChangeHandler(e);
+          }}
+        />
+      </InputContainer>
+      {showSearchLink && (
+        <SearchLinkContainer data-testid="search-button">
+          <TextLink color={Colors.ErrorState} onClick={() => onSearchHandler(searchValue)}>
+            SEARCH
+          </TextLink>
+        </SearchLinkContainer>
+      )}
+      <SvgContainerClose onClick={onCloseHandler} data-testid="close-icon">
+        <SvgIcon iconName="Close" />
+      </SvgContainerClose>
+    </SearchBarContainer>
+  );
+};
+
+export default SearhBar;

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

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

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import SectionTitle from './SectionTitle';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import { ISectionTitleProps, ThemeType } from '../../../types/types';
+
+const meta: Meta = {
+  title: 'Components/Editorial/Section Title',
+  component: SectionTitle,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The Section Title is used as an introduction to different sections on a page. It creates a clear divide of information due to it’s large size.',
+      },
+    },
+    design: {
+      type: 'figma',
+      url:
+        'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH%3A-Design-System-%26-Documentation?node-id=1173%3A4965',
+    },
+    controls: { expanded: true },
+    jest: ['SectionTitle'],
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+const SectionTitleTemplate: Story<ISectionTitleProps> = (args) => <SectionTitle {...args} />;
+
+export const DefaultSectionTitleWithNoDescription = SectionTitleTemplate.bind({});
+
+DefaultSectionTitleWithNoDescription.args = {
+  title: 'Section Title',
+};
+
+export const DefaultSectionTitleWithDescription = SectionTitleTemplate.bind({});
+
+DefaultSectionTitleWithDescription.args = {
+  title: 'Section Title',
+  description:
+    'Optional descriptive copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum pellentesque euismod imperdiet. Sed consect accumsan turpis et lorem pellentesque.',
+};
+
+export const LargeSectionTitleWithNoDescription = SectionTitleTemplate.bind({});
+
+LargeSectionTitleWithNoDescription.args = {
+  title: 'Large Title',
+  size: 'large',
+};
+
+export const LargeSectionTitleWithDescription = SectionTitleTemplate.bind({});
+
+LargeSectionTitleWithDescription.args = {
+  title: 'Large Title',
+  description:
+    'Optional descriptive copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum pellentesque euismod imperdiet. Sed consect accumsan turpis et lorem pellentesque.',
+  size: 'large',
+};

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

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { devices } from '../../../styles/viewports';
+
+const SectionTitleWrapper = styled.div`
+  margin: 30px 0;
+
+  & > div {
+    row-gap: 0;
+  }
+
+  & h1,
+  & h2 {
+    margin: 16px 0;
+  }
+
+  @media ${devices.mobile} {
+    & h1,
+    & h2 {
+      margin: 12px 0;
+    }
+  }
+
+  & p {
+    font-family: var(--font-family-body);
+    font-style: normal;
+    font-weight: var(--font-weigth-body-1);
+    font-size: var(--font-size-title-description);
+    line-height: var(--line-height-title-description);
+    margin-block-start: 0;
+    word-break: break-word;
+  }
+`;
+
+export default SectionTitleWrapper;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SectionTitle from './SectionTitle';
+
+describe('SectionTitle component', () => {
+  it('renders by default as an h2', () => {
+    const title = 'Default setup';
+    const { getByText } = render(<SectionTitle title={title}></SectionTitle>);
+
+    expect(getByText(title).nodeName).toBe('H2');
+  });
+
+  it('renders by as an h1 if set to large', () => {
+    const title = 'Large title';
+    const { getByText } = render(<SectionTitle title={title} size="large"></SectionTitle>);
+
+    expect(getByText(title).nodeName).toBe('H1');
+  });
+
+  it('renders by a description if passed when small', () => {
+    const description = 'This is the description for a small title';
+    const { getByText } = render(
+      <SectionTitle title={'some title in small'} size={'small'} description={description}></SectionTitle>
+    );
+    expect(getByText(description)).toContainHTML(`<p>${description}</p>`);
+  });
+
+  it('renders by a description if passed when large', () => {
+    const description = 'And this is the description for a large one';
+    const { getByText } = render(
+      <SectionTitle title={'some title in large'} size={'large'} description={description}></SectionTitle>
+    );
+    expect(getByText(description)).toContainHTML(`<p>${description}</p>`);
+  });
+});

package/src/components/molecules/SectionTitle/SectionTitle.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import SectionTitleWrapper from './SectionTitle.style';
+import Heading from '../../atoms/Heading';
+import { Grid, GridItem } from '../..';
+import { ISectionTitleProps } from '../../../types/types';
+
+const SectionTitle = ({ title, size = 'small', description }: ISectionTitleProps) => {
+  const headingLevel = size === 'large' ? 1 : 2;
+  return (
+    <SectionTitleWrapper>
+      <Grid>
+        <GridItem columnStartDesktop={3} columnSpanDesktop={12} columnStartDevice={2} columnSpanDevice={12}>
+          <Heading level={headingLevel}>{title}</Heading>
+        </GridItem>
+        {description && (
+          <GridItem columnStartDesktop={3} columnSpanDesktop={8} columnStartDevice={2} columnSpanDevice={12}>
+            <p>{description}</p>
+          </GridItem>
+        )}
+      </Grid>
+    </SectionTitleWrapper>
+  );
+};
+
+export default SectionTitle;

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

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

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import Tabs from './index';
+import { ITabsProps, ThemeType } from '../../../types/types';
+
+export default {
+  title: 'Components/Navigation/Tabs',
+  component: Tabs,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House-UI-Guide-and-Spec?node-id=166%3A0',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<ITabsProps> = (args) => <Tabs {...args} />;
+
+export const TabsDefault = Template.bind({});
+
+TabsDefault.args = {
+  showMenu: false,
+  onShowMenu: () => {},
+  onChange: () => {},
+  items: [
+    {
+      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: [],
+    },
+    {
+      title: 'TEXT LINK 3',
+      options: [
+        {
+          option: 'OPTION 1',
+          optionLink: 'link 1',
+        },
+        {
+          option: 'OPTION 2',
+          optionLink: 'link 2',
+        },
+      ],
+    },
+    {
+      title: 'TEXT LINK 4',
+      options: [
+        {
+          option: 'OPTION 1',
+          optionLink: 'link 1',
+        },
+        {
+          option: 'OPTION 2',
+          optionLink: 'link 2',
+        },
+        {
+          option: 'OPTION 3',
+          optionLink: 'link 3',
+        },
+        {
+          option: 'OPTION 4',
+          optionLink: 'link 4',
+        },
+        {
+          option: 'OPTION 5',
+          optionLink: 'link 5',
+        },
+        {
+          option: 'OPTION 6',
+          optionLink: 'link 6',
+        },
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+import { ITabsProps } from '../../../types/types';
+import { devices } from '../../../styles/viewports';
+
+export const TabsContainer = styled.div`
+  display: inline-flex;
+  flex-direction: row;
+  column-gap: 32px;
+`;
+
+export const ItemsContainer = styled.div<ITabsProps>`
+  display: inline-flex;
+  flex-direction: row;
+  column-gap: 32px;
+
+  @media ${devices.mobileAndTablet} {
+    ${(props) => {
+      if (props.showMenu) {
+        return `
+          display: flex;
+          flex-direction: column;
+          row-gap: 32px;
+        `;
+      }
+      return `display: none;`;
+    }}
+  }
+`;
+
+export const MenuContainer = styled.div`
+  display: none;
+  width: 60px;
+
+  & a {
+    font-size: var(--font-size-navigation);
+    font-family: var(--font-family-navigation);
+    color: var(--base-color-black);
+    text-decoration: none;
+    cursor: pointer;
+
+    :hover {
+      color: var(--base-color-primary);
+    }
+  }
+
+  :hover {
+    && svg path {
+      fill: var(--base-color-primary);
+    }
+  }
+
+  @media ${devices.mobileAndTablet} {
+    display: block;
+
+    svg {
+      width: 24px;
+      height: 24px;
+      margin-left: 40px;
+      margin-top: -20px;
+    }
+
+    a {
+      margin-left: 20px;
+    }
+  }
+`;
+
+export const MenuItem = styled.div`
+  @media ${devices.mobileAndTablet} {
+    a {
+      margin-left: 20px;
+    }
+  }
+`;