@royaloperahouse/chord 0.1.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,73 @@
+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',
+};

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

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

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

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

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

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

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