@royaloperahouse/chord 0.1.0 → 0.3.0

package/src/components/atoms/Buttons/Tertiary/TertiaryButton.style.tsx

@@ -1,29 +0,0 @@
-import styled from 'styled-components';
-import { ITertiaryButtonProps } from '../../../../types/buttonTypes';
-
-const TertiaryButtonWrapper = styled.a<ITertiaryButtonProps>`
-  padding: 0;
-  height: var(--button-height);
-  font-family: var(--font-family-buttons);
-  font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  color: var(--base-color-${({ color }) => color});
-  width: fit-content;
-  background: none;
-  border-style: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  text-decoration: none;
-  box-sizing: border-box;
-`;
-
-const TertiaryIconWrapper = styled.span`
-  width: var(--button-icon-width);
-  height: var(--button-icon-height);
-  margin-left: var(--button-icon-margin);
-  display: inline-block;
-`;
-
-export { TertiaryIconWrapper, TertiaryButtonWrapper };

package/src/components/atoms/Buttons/Tertiary/TertiaryButton.test.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { render, within, fireEvent } from '@testing-library/react';
-import TertiaryButton from './TertiaryButton';
-
-describe('TertiaryButton component', () => {
-  const onClick = jest.fn();
-  it('renders button with specific text with icon', () => {
-    const { getByText } = render(<TertiaryButton onClick={onClick}>Tertiary button text</TertiaryButton>);
-    const button = getByText('Tertiary button text');
-    expect(button).toBeInTheDocument();
-    expect(within(button).getByTestId('tertiary-icon')).toBeInTheDocument();
-  });
-
-  it('truncates button text if its length is greater than 30 characters', () => {
-    const { getByText, queryAllByText } = render(
-      <TertiaryButton onClick={onClick}>Very Very Long Tertiary button text</TertiaryButton>
-    );
-
-    expect(queryAllByText('Very Very Long Tertiary button text')).toHaveLength(0);
-    expect(getByText('Very Very Long Tertiary button')).toBeInTheDocument();
-  });
-
-  it('calls onClick callback when button is clicked', () => {
-    const { getByText } = render(<TertiaryButton onClick={onClick}>Tertiary button text</TertiaryButton>);
-
-    fireEvent.click(getByText('Tertiary button text'));
-    expect(onClick).toBeCalled();
-  });
-});

package/src/components/atoms/Buttons/Tertiary/TertiaryButton.tsx

@@ -1,18 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { TertiaryButtonWrapper, TertiaryIconWrapper } from './TertiaryButton.style';
-import { Icon } from '../../Icons';
-import { IButtonProps } from '../../../../types/buttonTypes';
-
-const Button: FunctionComponent<IButtonProps> = ({ children, color, ...rest }) => {
-  const truncatedString = (children as string).substring(0, 30);
-  return (
-    <TertiaryButtonWrapper {...rest} color={color}>
-      {truncatedString}
-      <TertiaryIconWrapper data-testid="tertiary-icon">
-        <Icon iconName="Arrow" color={color} />
-      </TertiaryIconWrapper>
-    </TertiaryButtonWrapper>
-  );
-};
-
-export default Button;

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

@@ -1,5 +0,0 @@
-import PrimaryButton from './Primary/PrimaryButton';
-import SecondaryButton from './Secondary/SecondaryButton';
-import TertiaryButton from './Tertiary/TertiaryButton';
-
-export { SecondaryButton, PrimaryButton, TertiaryButton };

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

@@ -1,153 +0,0 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react';
-import GlobalStyles from '../../../styles/GlobalStyles';
-import ThemeProvider from '../../../styles/ThemeProvider';
-import Dropdown from './index';
-import { IDropdownProps, ThemeType } from '../../../types/types';
-
-export default {
-  title: 'Components/Dropdown',
-  component: Dropdown,
-  argTypes: {
-    ref: {
-      table: { disable: true },
-    },
-    theme: {
-      table: { disable: true },
-    },
-    as: {
-      table: { disable: true },
-    },
-    forwardedAs: {
-      table: { disable: true },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'Dropdown 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: ['Dropdown'],
-  },
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={ThemeType.Core}>
-        <GlobalStyles />
-        {Story()}
-      </ThemeProvider>
-    ),
-  ],
-} as Meta;
-
-const Template: Story<IDropdownProps> = (args) => <Dropdown {...args} />;
-
-export const DropdownWithTextOnly = Template.bind({});
-
-DropdownWithTextOnly.args = {
-  title: 'TEXT',
-  withIcon: 'none',
-  selected: false,
-  onChange: () => {},
-  options: [
-    {
-      option: 'OPTION 1',
-      optionLink: 'link 1',
-    },
-    {
-      option: 'OPTION 2',
-      optionLink: 'link 2',
-    },
-    {
-      option: 'OPTION 3',
-      optionLink: 'link 3',
-    },
-  ],
-};
-
-export const DropdownWithIconRight = Template.bind({});
-
-DropdownWithIconRight.args = {
-  iconName: 'DropdownArrow',
-  withIcon: 'right',
-  title: 'TEXT',
-  selected: false,
-  onChange: () => {},
-  options: [
-    {
-      option: 'OPTION 1',
-      optionLink: 'link 1',
-    },
-    {
-      option: 'OPTION 2',
-      optionLink: 'link 2',
-    },
-    {
-      option: 'OPTION 3',
-      optionLink: 'link 3',
-    },
-  ],
-};
-
-export const DropdownWithIconLeft = Template.bind({});
-
-DropdownWithIconLeft.args = {
-  iconName: 'DropdownArrow',
-  withIcon: 'left',
-  title: 'TEXT',
-  selected: false,
-  onChange: () => {},
-  options: [
-    {
-      option: 'OPTION 1',
-      optionLink: 'link 1',
-    },
-    {
-      option: 'OPTION 2',
-      optionLink: 'link 2',
-    },
-    {
-      option: 'OPTION 3',
-      optionLink: 'link 3',
-    },
-  ],
-};
-
-export const DropdownWithoutOptions = Template.bind({});
-
-DropdownWithoutOptions.args = {
-  title: 'TEXT',
-  withIcon: 'none',
-  selected: false,
-  onChange: () => {},
-};
-
-export const DropdownWithoutOptionsInMobile = Template.bind({});
-
-DropdownWithoutOptionsInMobile.args = {
-  iconName: 'DropdownArrow',
-  withOptionsInMobile: false,
-  title: 'TEXT',
-  titleLink: 'foo',
-  selected: false,
-  onChange: () => {},
-  options: [
-    {
-      option: 'OPTION 1',
-      optionLink: 'link 1',
-    },
-    {
-      option: 'OPTION 2',
-      optionLink: 'link 2',
-    },
-    {
-      option: 'OPTION 3',
-      optionLink: 'link 3',
-    },
-  ],
-};

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

@@ -1,64 +0,0 @@
-import styled from 'styled-components';
-import { devices } from '../../../styles/viewports';
-import { IDropdownProps } from '../../../types/types';
-
-export const TabContainer = styled.div`
-  display: inline-flex;
-  flex-direction: column;
-  position: relative;
-`;
-
-export const OptionItem = styled.a`
-  font-size: var(--font-size-navigation);
-  font-family: var(--font-family-navigation);
-  color: var(--base-color-black);
-  text-decoration: none;
-  cursor: pointer;
-  text-transform: uppercase;
-
-  :hover {
-    color: var(--base-color-primary);
-  }
-`;
-
-export const OptionsContainer = styled.div<IDropdownProps>`
-  background-color: var(--base-color-white);
-  border: 1px solid var(--base-color-light-grey);
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--navigation-small-gap);
-  padding: var(--navigation-middle-gap);
-  position: absolute;
-  top: 25px;
-  width: max-content;
-  z-index: 10;
-
-  ${(props) => {
-    if (props.withIcon === 'none') {
-      return `
-        top: 21px;
-    `;
-    }
-    return ``;
-  }}
-
-  @media ${devices.mobileAndTablet} {
-    padding-left: 0px;
-    padding-bottom: 0px;
-    row-gap: var(--navigation-large-gap);
-    border: 0;
-    background-color: none;
-
-    ${(props) => {
-      if (props.withOptionsInMobile) {
-        return `
-          position: relative;
-          top: 0px;
-      `;
-      }
-      return `
-        display: none;
-    `;
-    }}
-  }
-`;

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

@@ -1,67 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import Dropdown from './Dropdown';
-import { IOptionItem } from '../../../types/types';
-
-describe('Dropdown component', () => {
-  const onClick = jest.fn();
-
-  it('renders text with specific text', () => {
-    const title = 'TAB';
-    const options: IOptionItem[] = [
-      {
-        option: 'foo',
-        optionLink: 'bar',
-      },
-    ];
-    const onChange = onClick;
-
-    const { getByText } = render(<Dropdown title={title} options={options} onChange={onChange}></Dropdown>);
-
-    expect(getByText(title)).toBeInTheDocument();
-  });
-
-  it('calls onClick callback when text is clicked', () => {
-    const title = 'TAB';
-    const options: IOptionItem[] = [];
-    const onChange = onClick;
-
-    const { getByText } = render(<Dropdown title={title} options={options} onChange={onChange}></Dropdown>);
-    fireEvent.click(getByText('TAB'));
-
-    expect(onClick).toBeCalled();
-  });
-
-  it('renders options when click text', () => {
-    const title = 'TAB';
-    const options: IOptionItem[] = [
-      {
-        option: 'foo',
-        optionLink: 'bar',
-      },
-    ];
-    const onChange = onClick;
-
-    const { getByText } = render(<Dropdown title={title} options={options} onChange={onChange}></Dropdown>);
-    fireEvent.click(getByText('TAB'));
-
-    expect(getByText('foo')).toBeInTheDocument();
-  });
-
-  it('calls onClick callback when click text option', () => {
-    const title = 'TAB';
-    const options: IOptionItem[] = [
-      {
-        option: 'foo',
-        optionLink: 'bar',
-      },
-    ];
-    const onChange = onClick;
-
-    const { getByText } = render(<Dropdown title={title} options={options} onChange={onChange}></Dropdown>);
-    fireEvent.click(getByText('TAB'));
-    fireEvent.click(getByText('foo'));
-
-    expect(onClick).toBeCalled();
-  });
-});

package/src/components/atoms/Dropdown/Dropdown.tsx

@@ -1,131 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { TabContainer, OptionsContainer, OptionItem } from './Dropdown.style';
-import { IDropdownProps, INodeProps } from '../../../types/types';
-import Tab from '../Tab';
-
-const Dropdown = ({
-  title,
-  titleLink,
-  selected = false,
-  options = [],
-  onChange,
-  iconName = 'DropdownArrow',
-  isMobileBehaviour = false,
-  withOptionsInMobile = true,
-  withIcon = 'right',
-}: IDropdownProps) => {
-  const node: INodeProps = useRef();
-  const [open, setOpen] = useState(false);
-  const [lockOpen, setLockOpen] = useState(false);
-  const [titleSelected, setTitleSelected] = useState(selected);
-  let timerCloseOptions: number;
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClick);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-    };
-  }, []);
-
-  const handleClick = (e: any) => {
-    if (node.current.contains(e.target)) {
-      return;
-    }
-
-    if (isMobileBehaviour) {
-      if (timerCloseOptions) {
-        clearTimeout(timerCloseOptions);
-      }
-
-      timerCloseOptions = setTimeout(() => {
-        setOpen(false);
-        setLockOpen(false);
-        setTitleSelected(false);
-      }, 200);
-    } else {
-      setOpen(false);
-      setLockOpen(false);
-      setTitleSelected(false);
-    }
-  };
-
-  const handleChange = (optionLink: string) => {
-    if (onChange) {
-      onChange(optionLink);
-    }
-
-    setOpen(false);
-    setLockOpen(false);
-    setTitleSelected(false);
-  };
-
-  const handleClickTitle = (value: string) => {
-    if (withOptions()) {
-      setLockOpen(true);
-      setOpen(true);
-      setTitleSelected(titleSelected);
-    }
-
-    if (onChange) {
-      onChange(value);
-    }
-  };
-
-  const onMouseHandler = (value: boolean) => {
-    if (withOptions() && !lockOpen) {
-      setOpen(value);
-      setTitleSelected(value);
-    }
-  };
-
-  const clickMobileHandler = () => {
-    if (withOptions()) {
-      setOpen(!open);
-      setTitleSelected(!open);
-    }
-  };
-
-  const renderTab = () => {
-    return (
-      <>
-        <Tab
-          title={title}
-          titleLink={titleLink}
-          selected={titleSelected}
-          iconName={iconName}
-          withIcon={withIcon}
-          withTextInMobile={withOptionsInMobile}
-          onClick={(value) => handleClickTitle(value)}
-        ></Tab>
-        {withOptions() && open && (
-          <OptionsContainer withOptionsInMobile={withOptionsInMobile} withIcon={withIcon}>
-            {options.map((optionItem, index) => (
-              <OptionItem key={`key-${index}-${optionItem.option}`} onClick={() => handleChange(optionItem.optionLink)}>
-                {optionItem.option}
-              </OptionItem>
-            ))}
-          </OptionsContainer>
-        )}
-      </>
-    );
-  };
-
-  const withOptions = () => options.length > 0;
-
-  return (
-    <>
-      {isMobileBehaviour ? (
-        <TabContainer ref={node} onClick={() => clickMobileHandler()}>
-          {renderTab()}
-        </TabContainer>
-      ) : (
-        <TabContainer ref={node} onMouseEnter={() => onMouseHandler(true)} onMouseLeave={() => onMouseHandler(false)}>
-          {renderTab()}
-        </TabContainer>
-      )}
-    </>
-  );
-};
-
-export default Dropdown;

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

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

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

@@ -1,127 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Grid, GridItem } from './index';
-import GlobalStyles from '../../../styles/GlobalStyles';
-import ThemeProvider from '../../../styles/ThemeProvider';
-import { ThemeType } from '../../../types/types';
-
-const meta: Meta = {
-  title: 'Foundations/Grid',
-  component: Grid,
-  argTypes: {
-    items: {
-      description:
-        'The grid items need a __columnStart__ attribute and can have an optional __columnSpan__ attribute too. The _columnStart_ is the column in which to place it and the _columnSpan_ is the number of columns that the item should span. The default _columnSpan_ is 1.',
-    },
-    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:
-          'To have a full bleed responsive website, a grid is used. All site elements should be designed to this grid so they can be displayed and developed consistently. Using a grid also creates a consistent experience across multiple devices with different screen sizes.',
-        withSource: 'none',
-      },
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH:-Design-System-and-Documentation?node-id=3%3A1497',
-    },
-    jest: ['Grid', 'GridItem'],
-  },
-};
-
-export default meta;
-const Item = () => <div style={{ height: '3rem', backgroundColor: '#C8102E', opacity: '0.2' }} />;
-
-interface IStorybookGridItem {
-  columnStartDesktop: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
-  columnSpanDesktop?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
-  columnStartDevice: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14;
-  columnSpanDevice?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14;
-}
-
-interface IStorybookGridItemProps {
-  items: IStorybookGridItem[];
-}
-
-const GridWithItemsTemplate: Story<IStorybookGridItemProps> = (args) => (
-  <Grid>
-    {args.items.map((i) => (
-      <GridItem
-        columnStartDesktop={i.columnStartDesktop}
-        columnSpanDesktop={i.columnSpanDesktop}
-        columnStartDevice={i.columnStartDevice}
-        columnSpanDevice={i.columnSpanDevice}
-        key={`key-${Math.random()}`}
-      >
-        <Item />
-      </GridItem>
-    ))}
-  </Grid>
-);
-
-export const GridWith12Items = GridWithItemsTemplate.bind({});
-GridWith12Items.args = {
-  items: [
-    { columnStartDesktop: 3, columnSpanDesktop: 1, columnStartDevice: 2 },
-    { columnStartDesktop: 4, columnSpanDesktop: 1, columnStartDevice: 3 },
-    { columnStartDesktop: 5, columnSpanDesktop: 1, columnStartDevice: 4 },
-    { columnStartDesktop: 6, columnSpanDesktop: 1, columnStartDevice: 5 },
-    { columnStartDesktop: 7, columnSpanDesktop: 1, columnStartDevice: 6 },
-    { columnStartDesktop: 8, columnSpanDesktop: 1, columnStartDevice: 7 },
-    { columnStartDesktop: 9, columnSpanDesktop: 1, columnStartDevice: 8 },
-    { columnStartDesktop: 10, columnSpanDesktop: 1, columnStartDevice: 9 },
-    { columnStartDesktop: 11, columnSpanDesktop: 1, columnStartDevice: 10 },
-    { columnStartDesktop: 12, columnSpanDesktop: 1, columnStartDevice: 11 },
-    { columnStartDesktop: 13, columnSpanDesktop: 1, columnStartDevice: 12 },
-    { columnStartDesktop: 14, columnSpanDesktop: 1, columnStartDevice: 13 },
-  ],
-};
-
-export const GridWithColumnSpan = GridWithItemsTemplate.bind({});
-GridWithColumnSpan.args = {
-  items: [
-    { columnStartDesktop: 3, columnSpanDesktop: 4, columnStartDevice: 2, columnSpanDevice: 4 },
-    { columnStartDesktop: 7, columnSpanDesktop: 1, columnStartDevice: 6, columnSpanDevice: 1 },
-    { columnStartDesktop: 8, columnSpanDesktop: 7, columnStartDevice: 7, columnSpanDevice: 7 },
-  ],
-};
-
-export const GridWithItemInMargin = GridWithItemsTemplate.bind({});
-GridWithItemInMargin.args = {
-  items: [
-    { columnStartDesktop: 2, columnSpanDesktop: 1, columnStartDevice: 2, columnSpanDevice: 2 },
-    { columnStartDesktop: 3, columnSpanDesktop: 4, columnStartDevice: 4, columnSpanDevice: 3 },
-    { columnStartDesktop: 7, columnSpanDesktop: 1, columnStartDevice: 7, columnSpanDevice: 1 },
-    { columnStartDesktop: 8, columnSpanDesktop: 7, columnStartDevice: 8, columnSpanDevice: 6 },
-  ],
-};
-
-export const GridWithItemInOuterMargin = GridWithItemsTemplate.bind({});
-GridWithItemInOuterMargin.args = {
-  items: [
-    { columnStartDesktop: 1, columnSpanDesktop: 7, columnStartDevice: 1, columnSpanDevice: 8 },
-    { columnStartDesktop: 8, columnSpanDesktop: 4, columnStartDevice: 9, columnSpanDevice: 3 },
-    { columnStartDesktop: 13, columnSpanDesktop: 1, columnStartDevice: 12, columnSpanDevice: 1 },
-  ],
-};

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Grid from './Grid';
-
-describe('Grid component', () => {
-  it('sets proper styles related to a given theme', () => {
-    const { getByText } = render(<Grid>grid</Grid>);
-
-    expect(getByText('grid')).toHaveStyle({
-      display: 'grid',
-      'grid-template-columns': 'var(--grid-template-columns)',
-      'grid-template-rows': 'max-content',
-      gap: 'var(--grid-column-gap)',
-      margin: '0',
-    });
-  });
-});

package/src/components/atoms/Grid/Grid.tsx

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-const Grid = styled.div`
-  display: grid;
-  grid-template-columns: var(--grid-template-columns);
-  grid-template-rows: max-content;
-  gap: var(--grid-column-gap);
-  margin: 0;
-`;
-
-export default Grid;

package/src/components/atoms/Grid/GridItem.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import GridItem from './GridItem';
-
-describe('GridItem component', () => {
-  it('sets proper styles when columnSpan is ommited', () => {
-    const { getByText } = render(<GridItem columnStartDesktop={2}>gridItem</GridItem>);
-
-    expect(getByText('gridItem')).toHaveStyle({
-      'grid-column': '2 / span 1',
-    });
-  });
-
-  it('sets proper styles when columnSpan is provided', () => {
-    const { getByText } = render(
-      <GridItem columnStartDesktop={1} columnSpanDesktop={3}>
-        gridItem
-      </GridItem>
-    );
-
-    expect(getByText('gridItem')).toHaveStyle({
-      'grid-column': '1 / span 3',
-    });
-  });
-});