@royaloperahouse/chord 0.1.0 → 0.3.0

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

@@ -1,74 +0,0 @@
-import styled from 'styled-components';
-import { IBasketProps } from '../../../types/navigation';
-import { devices } from '../../../styles/viewports';
-
-export const BasketContainer = styled.div<IBasketProps>`
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  cursor: pointer;
-  border-bottom: 1px solid var(--base-color-transparent);
-
-  ${(props) => {
-    if (props.selected) {
-      return `
-        border-bottom: 1px solid var(--base-color-primary);
-        && a {
-          color: var(--base-color-primary);
-        }       
-        && svg path {
-          fill: var(--base-color-primary);
-        }
-      `;
-    }
-    return '';
-  }}
-
-  :hover {
-    border-bottom: 1px solid var(--base-color-primary);
-    && a {
-      color: var(--base-color-primary);
-    }
-    && svg path {
-      fill: var(--base-color-primary);
-    }
-  }
-`;
-
-export const SvgContainer = styled.div`
-  position: relative;
-
-  svg {
-    width: var(--navigation-large-gap);
-    height: var(--navigation-large-gap);
-  }
-`;
-
-export const NumContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  width: 12px;
-  height: 12px;
-  position: absolute;
-  top: 8px;
-  margin-left: 6px;
-
-  & .basket-num {
-    color: white;
-    font-size: 10px;
-    font-family: var(--font-family-navigation);
-  }
-`;
-
-export const BasketText = styled.a`
-  font-size: var(--font-size-navigation);
-  font-family: var(--font-family-navigation);
-  color: var(--base-color-black);
-  margin-left: 6px;
-  text-decoration: none;
-
-  @media ${devices.mobile} {
-    display: none;
-  }
-`;

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import Basket from './Basket';
-import '@testing-library/jest-dom';
-
-describe('Basket component', () => {
-  const onClickHandler = jest.fn();
-
-  it('renders text with specific text', () => {
-    const text = '29 MINS';
-    const selected = false;
-    const numItems = 5;
-
-    const { getByText } = render(
-      <Basket text={text} selected={selected} onClick={onClickHandler} numItems={numItems}></Basket>
-    );
-
-    expect(getByText(text)).toBeInTheDocument();
-    expect(getByText(numItems)).toBeInTheDocument();
-  });
-
-  it('calls onLink callback when basket is clicked', () => {
-    const text = '29 MINS';
-    const selected = false;
-    const numItems = 5;
-
-    const { getByText } = render(
-      <Basket text={text} selected={selected} onClick={onClickHandler} numItems={numItems}></Basket>
-    );
-
-    fireEvent.click(getByText('29 MINS'));
-
-    expect(onClickHandler).toBeCalled();
-  });
-});

package/src/components/atoms/Basket/Basket.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { BasketContainer, SvgContainer, NumContainer, BasketText } from './Basket.style';
-import { IBasketProps } from '../../../types/navigation';
-import { Icon } from '../Icons';
-
-const Basket = ({ text, selected = false, numItems = 0, onClick }: IBasketProps) => {
-  const onClickHandler = () => {
-    if (onClick) {
-      onClick('/basket');
-    }
-  };
-
-  const empty = numItems <= 0;
-
-  return (
-    <BasketContainer selected={selected} onClick={onClickHandler}>
-      <SvgContainer>
-        {empty ? (
-          <Icon iconName="Basket" />
-        ) : (
-          <>
-            <Icon iconName="BasketFull" />
-            <NumContainer>
-              <span className={`basket-num`}>{numItems}</span>
-            </NumContainer>
-          </>
-        )}
-      </SvgContainer>
-      <div>{!empty ? <BasketText data-testid="baskettext">{text}</BasketText> : ''}</div>
-    </BasketContainer>
-  );
-};
-
-export default Basket;

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

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

package/src/components/atoms/Buttons/Button.style.tsx

@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-import { IButtonProps } from '../../../types/buttonTypes';
-import { devices } from '../../../styles/viewports';
-
-const ButtonWrapper = styled.a<IButtonProps>`
-  padding: ${({ iconName }) => (iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)')}
-    var(--button-padding-x);
-  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});
-  line-height: var(--button-line-height);
-  width: fit-content;
-  border-style: solid;
-  border-width: 1px;
-  cursor: pointer;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-
-  @media ${devices.mobile} {
-    & {
-      width: 100%;
-    }
-  }
-`;
-
-export default ButtonWrapper;

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

@@ -1,21 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import ButtonWrapper from './Button.style';
-import ButtonIconWrapper from './ButtonIconWrapper.style';
-import { Icon } from '../Icons';
-import { IButtonProps } from '../../../types/buttonTypes';
-
-const Button: FunctionComponent<IButtonProps> = ({ children, iconName, iconDirection, color, ...rest }) => {
-  const truncatedString = (children as string).substring(0, 30);
-  return (
-    <ButtonWrapper {...rest} color={color} iconName={iconName}>
-      {iconName ? (
-        <ButtonIconWrapper data-testid="button-icon">
-          <Icon iconName={iconName} direction={iconDirection} color={color} />
-        </ButtonIconWrapper>
-      ) : null}
-      {truncatedString}
-    </ButtonWrapper>
-  );
-};
-
-export default Button;

package/src/components/atoms/Buttons/ButtonIconWrapper.style.tsx

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const ButtonIconWrapper = styled.span`
-  width: var(--button-icon-width);
-  height: var(--button-icon-height);
-  margin-right: var(--button-icon-margin);
-  display: inline-block;
-`;
-
-export default ButtonIconWrapper;

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

@@ -1,77 +0,0 @@
-import React, { MouseEventHandler } from 'react';
-import { Meta, Story } from '@storybook/react';
-import { PrimaryButton, SecondaryButton, TertiaryButton } from './';
-import GlobalStyles from '../../../styles/GlobalStyles';
-import ThemeProvider from '../../../styles/ThemeProvider';
-import { ThemeType, Colors } from '../../../types/types';
-import { IconNameType } from '../../../types/iconTypes';
-
-const meta: Meta = {
-  title: 'Components/Foundations/Buttons/All',
-  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: 'All buttons',
-        withSource: 'none',
-      },
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH:-Design-System-and-Documentation?node-id=3%3A1497',
-    },
-    jest: ['PrimaryButton', 'SecondaryButton', 'TertiaryButton'],
-  },
-};
-
-export default meta;
-
-interface IStorybookTertiaryButtonProps {
-  text: string;
-  color?: Colors;
-  bgColor?: Colors;
-  iconName?: IconNameType;
-  onClick: MouseEventHandler<any>;
-}
-
-const ButtonsTemplate: Story<IStorybookTertiaryButtonProps> = (args) => (
-  <div style={{ display: 'flex', gap: '10px' }}>
-    <PrimaryButton {...args}>{args.text}</PrimaryButton>
-    <SecondaryButton {...args}>{args.text}</SecondaryButton>
-    <TertiaryButton {...args}>{args.text}</TertiaryButton>
-  </div>
-);
-
-export const ButtonsWithIcon = ButtonsTemplate.bind({});
-ButtonsWithIcon.args = {
-  onClick: () => console.log('click!'),
-  text: 'Button Text',
-  iconName: 'Arrow',
-};
-
-export const ButtonsWithNoIcon = ButtonsTemplate.bind({});
-ButtonsWithNoIcon.args = {
-  onClick: () => console.log('click!'),
-  text: 'Button Text',
-};

package/src/components/atoms/Buttons/Primary/PrimaryButton.stories.tsx

@@ -1,94 +0,0 @@
-import React, { MouseEventHandler } from 'react';
-import { Meta, Story } from '@storybook/react';
-import PrimaryButton from './PrimaryButton';
-import GlobalStyles from '../../../../styles/GlobalStyles';
-import ThemeProvider from '../../../../styles/ThemeProvider';
-import { ThemeType, Colors } from '../../../../types/types';
-import { DirectionType, IconNameType } from '../../../../types/iconTypes';
-
-const meta: Meta = {
-  title: 'Components/Foundations/Buttons/Primary',
-  component: PrimaryButton,
-  argTypes: {
-    color: {
-      description: 'Text and icon color',
-    },
-    bgColor: {
-      description: 'Background color',
-    },
-    iconName: {
-      description: 'Name of the icon to be displayed',
-    },
-    iconDirection: {
-      description: 'Direction of the icon to be displayed',
-    },
-    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: 'Primary button',
-        withSource: 'none',
-      },
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH:-Design-System-and-Documentation?node-id=3%3A1497',
-    },
-    jest: ['PrimaryButton'],
-  },
-};
-
-export default meta;
-
-interface IStorybookPrimaryButtonProps {
-  text: string;
-  color?: Colors;
-  bgColor?: Colors;
-  iconName?: IconNameType;
-  iconDirection?: DirectionType;
-  onClick: MouseEventHandler<any>;
-}
-
-const PrimaryButtonTemplate: Story<IStorybookPrimaryButtonProps> = (args) => (
-  <PrimaryButton {...args}>{args.text}</PrimaryButton>
-);
-
-export const ButtonWithNoIcon = PrimaryButtonTemplate.bind({});
-ButtonWithNoIcon.args = {
-  onClick: () => console.log('click!'),
-  text: 'Button Text',
-};
-
-export const ButtonWithIcon = PrimaryButtonTemplate.bind({});
-ButtonWithIcon.args = {
-  onClick: () => console.log('click!'),
-  iconName: 'BookTickets',
-  text: 'Button Text',
-};
-
-export const ButtonWithLongText = PrimaryButtonTemplate.bind({});
-ButtonWithLongText.args = {
-  onClick: () => console.log('click!'),
-  iconName: 'BookTickets',
-  text: 'Very Very Long Button Truncated Text',
-};

package/src/components/atoms/Buttons/Primary/PrimaryButton.test.tsx

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

package/src/components/atoms/Buttons/Primary/PrimaryButton.tsx

@@ -1,14 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import PrimaryButtonWrapper from './PrimaryButtonWrapper.style';
-import { Colors } from '../../../../types/types';
-import { IPrimaryButtonProps } from '../../../../types/buttonTypes';
-
-const PrimaryButton: FunctionComponent<IPrimaryButtonProps> = ({ children, ...props }) => {
-  return (
-    <PrimaryButtonWrapper color={Colors.White} {...props}>
-      {children}
-    </PrimaryButtonWrapper>
-  );
-};
-
-export default PrimaryButton;

package/src/components/atoms/Buttons/Primary/PrimaryButtonWrapper.style.tsx

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-import Button from '../Button';
-import { IPrimaryButtonProps } from '../../../../types/buttonTypes';
-import { Colors } from '../../../../types/types';
-
-const PrimaryButtonWrapper = styled(Button)<IPrimaryButtonProps>`
-  background-color: var(--base-color-${({ bgColor = Colors.Primary }) => bgColor});
-  border-color: var(--base-color-${({ bgColor = Colors.Primary }) => bgColor});
-`;
-
-export default PrimaryButtonWrapper;

package/src/components/atoms/Buttons/Secondary/SecondaryButton.stories.tsx

@@ -1,84 +0,0 @@
-import React, { MouseEventHandler } from 'react';
-import { Meta, Story } from '@storybook/react';
-import SecondaryButton from './SecondaryButton';
-import GlobalStyles from '../../../../styles/GlobalStyles';
-import ThemeProvider from '../../../../styles/ThemeProvider';
-import { ThemeType, Colors } from '../../../../types/types';
-import { DirectionType, IconNameType } from '../../../../types/iconTypes';
-
-const meta: Meta = {
-  title: 'Components/Foundations/Buttons/Secondary',
-  component: SecondaryButton,
-  argTypes: {
-    color: {
-      description: 'Text and border color',
-    },
-    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: 'Secondary button',
-        withSource: 'none',
-      },
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH:-Design-System-and-Documentation?node-id=3%3A1497',
-    },
-    jest: ['SecondaryButton'],
-  },
-};
-
-export default meta;
-
-interface IStorybookSecondaryButtonProps {
-  text: string;
-  color?: Colors;
-  iconName?: IconNameType;
-  iconDirection?: DirectionType;
-  onClick: MouseEventHandler<any>;
-}
-
-const SecondaryButtonTemplate: Story<IStorybookSecondaryButtonProps> = (args) => (
-  <SecondaryButton {...args}>{args.text}</SecondaryButton>
-);
-
-export const ButtonWithNoIcon = SecondaryButtonTemplate.bind({});
-ButtonWithNoIcon.args = {
-  onClick: () => console.log('click!'),
-  text: 'Button Text',
-};
-
-export const ButtonWithIcon = SecondaryButtonTemplate.bind({});
-ButtonWithIcon.args = {
-  onClick: () => console.log('click!'),
-  iconName: 'BookTickets',
-  text: 'Button Text',
-};
-
-export const ButtonWithLongText = SecondaryButtonTemplate.bind({});
-ButtonWithLongText.args = {
-  onClick: () => console.log('click!'),
-  iconName: 'BookTickets',
-  text: 'Very Very Long Button Truncated Text',
-};

package/src/components/atoms/Buttons/Secondary/SecondaryButton.test.tsx

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

package/src/components/atoms/Buttons/Secondary/SecondaryButton.tsx

@@ -1,14 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import SecondaryButtonWrapper from './SecondaryButtonWrapper.style';
-import { Colors } from '../../../../types/types';
-import { IButtonProps } from '../../../../types/buttonTypes';
-
-const SecondaryButton: FunctionComponent<IButtonProps> = ({ children, ...props }) => {
-  return (
-    <SecondaryButtonWrapper color={Colors.Primary} {...props}>
-      {children}
-    </SecondaryButtonWrapper>
-  );
-};
-
-export default SecondaryButton;

package/src/components/atoms/Buttons/Secondary/SecondaryButtonWrapper.style.tsx

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-import Button from '../Button';
-import { IButtonProps } from '../../../../types/buttonTypes';
-import { Colors } from '../../../../types/types';
-
-const PrimaryButtonWrapper = styled(Button)<IButtonProps>`
-  background-color: var(--base-color-transparent);
-  border-color: var(--base-color-${({ color = Colors.Primary }) => color});
-`;
-
-export default PrimaryButtonWrapper;

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

@@ -1,73 +0,0 @@
-import React, { MouseEventHandler } from 'react';
-import { Meta, Story } from '@storybook/react';
-import TertiaryButton from './TertiaryButton';
-import GlobalStyles from '../../../../styles/GlobalStyles';
-import ThemeProvider from '../../../../styles/ThemeProvider';
-import { ThemeType, Colors } from '../../../../types/types';
-
-const meta: Meta = {
-  title: 'Components/Foundations/Buttons/Tertiary',
-  component: TertiaryButton,
-  argTypes: {
-    color: {
-      description: 'Text and icon color',
-    },
-    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: 'Tertiary button',
-        withSource: 'none',
-      },
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH:-Design-System-and-Documentation?node-id=3%3A1497',
-    },
-    jest: ['TertiaryButton'],
-  },
-};
-
-export default meta;
-
-interface IStorybookTertiaryButtonProps {
-  text: string;
-  color?: Colors;
-  onClick: MouseEventHandler<any>;
-}
-
-const TertiaryButtonTemplate: Story<IStorybookTertiaryButtonProps> = (args) => (
-  <TertiaryButton {...args}>{args.text}</TertiaryButton>
-);
-
-export const Button = TertiaryButtonTemplate.bind({});
-Button.args = {
-  onClick: () => console.log('click!'),
-  text: 'Button Text',
-};
-
-export const ButtonWithLongText = TertiaryButtonTemplate.bind({});
-ButtonWithLongText.args = {
-  onClick: () => console.log('click!'),
-  text: 'Very Very Long Button Truncated Text',
-};