@royaloperahouse/chord 0.1.0

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { devices } from '../../../styles/viewports';
+import { IGridItemProps } from '../../../types/types';
+
+const GridItem = styled.div<IGridItemProps>`
+  grid-column: ${({ columnStartDesktop }) => columnStartDesktop} / span
+    ${({ columnSpanDesktop = 1 }) => columnSpanDesktop};
+
+  @media ${devices.mobile} {
+    & {
+      grid-column: ${({ columnStartDevice }) => columnStartDevice} / span
+        ${({ columnSpanDevice = 1 }) => columnSpanDevice};
+    }
+  }
+
+  @media ${devices.tablet} {
+    & {
+      grid-column: ${({ columnStartDevice }) => columnStartDevice} / span
+        ${({ columnSpanDevice = 1 }) => columnSpanDevice};
+    }
+  }
+`;
+
+export default GridItem;

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

@@ -0,0 +1,3 @@
+import Grid from './Grid';
+import GridItem from './GridItem';
+export { Grid, GridItem };

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import HeadingComponent from './Heading';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import { IHeadingProps, ThemeType } from '../../../types/types';
+
+const meta: Meta = {
+  title: 'Foundations/Typography',
+  component: HeadingComponent,
+  argTypes: {
+    level: {
+      options: [1, 2, 3, 4, 5, 6],
+      control: { type: 'select' },
+    },
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+    jest: ['Heading'],
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+const HeadingTemplate: Story<IHeadingProps> = (args) => <HeadingComponent {...args} />;
+export const Heading = HeadingTemplate.bind({});
+
+Heading.args = {
+  level: 1,
+  children: 'Heading',
+};

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { IHeadingWrapperProps } from '../../../types/types';
+
+const HeaderWrapper = styled.h1<IHeadingWrapperProps>`
+  font-size: var(--font-size-header-${({ level }) => level});
+  font-family: var(--font-family-header);
+  font-weight: var(--font-weight-header-${({ level }) => level});
+  letter-spacing: var(--letter-spacing-header-${({ level }) => level});
+  line-height: var(--line-height-header-${({ level }) => level});
+  text-transform: uppercase;
+  word-break: break-word;
+`;
+
+export default HeaderWrapper;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Heading from './Heading';
+import { HeadingLevel } from '../../../types/types';
+
+describe('Heading component', () => {
+  it('renders html headers', () => {
+    const text = 'Test Heading';
+    const { getByText } = render(<Heading level={HeadingLevel.H3}>{text}</Heading>);
+
+    expect(getByText(text)).toBeInTheDocument();
+  });
+});

package/src/components/atoms/Heading/Heading.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import HeadingWrapper from './Heading.style';
+import { IHeadingProps } from '../../../types/types';
+
+const Heading = ({ level, children }: IHeadingProps) => {
+  const tag = `h${level}` as React.ElementType;
+
+  return (
+    <HeadingWrapper as={tag} level={level}>
+      {children}
+    </HeadingWrapper>
+  );
+};
+
+export default Heading;

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

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