@royaloperahouse/chord 0.1.0 → 0.3.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,74 +0,0 @@
-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;
-    }
-  }
-`;