@royaloperahouse/chord 0.1.0

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@royaloperahouse/chord",
+  "version": "0.1.0",
+  "author": "Royal Opera House",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "test:watch": "tsdx test --watch --verbose --passWithNoTests",
+    "lint": "tsdx lint src",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
+    "storybook": "start-storybook -s ./external -p 6006",
+    "build-storybook": "rm -rf ./storybook-static; build-storybook -s ./src -o ./storybook-static; cp -r ./external/ ./storybook-static/",
+    "test-storybook": "tsdx test --json --passWithNoTests --outputFile=./test/jest-test-results.json"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 120,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "module": "dist/design-system.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/design-system.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/design-system.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "jest": {
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/jest.setup.ts"
+    ],
+     "moduleNameMapper": {
+      "^react$": "<rootDir>/node_modules/react"
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@size-limit/preset-small-lib": "^6.0.4",
+    "@storybook/addon-a11y": "^6.3.12",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-jest": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addons": "^6.3.12",
+    "@storybook/react": "^6.3.12",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.0.2",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-test-renderer": "^17.0.1",
+    "@types/styled-components": "^5.1.15",
+    "@types/testing-library__jest-dom": "^5.14.1",
+    "babel-loader": "^8.2.3",
+    "husky": "^7.0.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "size-limit": "^6.0.4",
+    "storybook-addon-designs": "^6.2.0",
+    "storybook-addon-pseudo-states": "^1.0.0",
+    "ts-jest": "^27.0.7",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.4"
+  }
+}

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import Account from './index';
+import { ThemeType } from '../../../types/types';
+import { IAccountProps } from '../../../types/navigation';
+
+export default {
+  title: 'Components/Navigation/Account',
+  component: Account,
+  argTypes: {
+    ref: {
+      table: { disable: true },
+    },
+    theme: {
+      table: { disable: true },
+    },
+    as: {
+      table: { disable: true },
+    },
+    forwardedAs: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Account button',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House-UI-Guide-and-Spec?node-id=166%3A0',
+    },
+    jest: ['Account'],
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<IAccountProps> = (args) => <Account {...args} />;
+
+export const SignedOut = Template.bind({});
+
+SignedOut.args = {
+  title: 'SIGN IN',
+  onClick: () => {},
+  iconName: 'User',
+  options: [
+    {
+      option: 'OPTION 1',
+      optionLink: 'link 1',
+    },
+    {
+      option: 'OPTION 2',
+      optionLink: 'link 2',
+    },
+    {
+      option: 'OPTION 3',
+      optionLink: 'link 3',
+    },
+  ],
+};
+
+export const SignedIn = Template.bind({});
+
+SignedIn.args = {
+  title: 'USER NAME',
+  onClick: () => {},
+  iconName: 'UserSignedIn',
+  options: [
+    {
+      option: 'OPTION 1',
+      optionLink: 'link 1',
+    },
+    {
+      option: 'OPTION 2',
+      optionLink: 'link 2',
+    },
+    {
+      option: 'OPTION 3',
+      optionLink: 'link 3',
+    },
+  ],
+};

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

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

package/src/components/atoms/Account/Account.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IAccountProps } from '../../../types/navigation';
+import Dropdown from '../Dropdown';
+
+const Account = ({ title, options = [], onClick, iconName, titleLink }: IAccountProps) => {
+  const onChangeHandler = (link: string) => {
+    if (onClick) {
+      onClick(link);
+    }
+  };
+
+  return (
+    <Dropdown
+      titleLink={titleLink}
+      title={title}
+      options={options}
+      onChange={onChangeHandler}
+      iconName={iconName}
+      withOptionsInMobile={false}
+      withIcon={'left'}
+    />
+  );
+};
+
+export default Account;

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

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

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import Basket from './index';
+import { ThemeType } from '../../../types/types';
+import { IBasketProps } from '../../../types/navigation';
+
+export default {
+  title: 'Components/Navigation/Basket',
+  component: Basket,
+  argTypes: {
+    ref: {
+      table: { disable: true },
+    },
+    theme: {
+      table: { disable: true },
+    },
+    as: {
+      table: { disable: true },
+    },
+    forwardedAs: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Basket button',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House-UI-Guide-and-Spec?node-id=166%3A0',
+    },
+    jest: ['Basket'],
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<IBasketProps> = (args) => <Basket {...args} />;
+
+export const BasketEmpty = Template.bind({});
+
+BasketEmpty.args = {
+  text: '',
+  selected: false,
+};
+
+export const BasketEmptySelected = Template.bind({});
+
+BasketEmptySelected.args = {
+  text: '',
+  selected: true,
+};
+
+export const BasketFull = Template.bind({});
+
+BasketFull.args = {
+  text: '29 MINS',
+  selected: false,
+  numItems: 5,
+};
+
+export const BasketFullSelected = Template.bind({});
+
+BasketFullSelected.args = {
+  text: '29 MINS',
+  selected: true,
+  numItems: 25,
+};

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

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

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

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

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

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

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

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

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

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