@royaloperahouse/chord 0.1.0

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

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icons';
+export * from './Icons';

package/src/components/atoms/Image/Image.tsx

@@ -0,0 +1,72 @@
+import React, { FunctionComponent } from 'react';
+import styled from 'styled-components';
+import { devices } from '../../../styles/viewports';
+
+const DEFAULT_ERROR_IMAGE_SRC = '';
+
+export const AspectRatioDefinitions = {
+  '4:3': { height: '', width: '100%' },
+  '3:4': { height: '', width: '100%' },
+  '16:9': { height: '', width: '100%' },
+  '1:1': { height: '', width: '100%' },
+};
+
+interface AspectRatioCSSSpecs {
+  height: string;
+  width: string;
+}
+
+export type AspectRatioType = keyof typeof AspectRatioDefinitions;
+
+export interface IImageProps {
+  desktopSrc: string;
+  mobileSrc?: string;
+  aspectRatio: AspectRatioType;
+  altText?: string;
+  errorImageSrc?: string;
+}
+
+export interface IStyledImageProps {
+  srcSet: string;
+  sizes: string;
+  aspectRatio: AspectRatioCSSSpecs;
+}
+
+const ImageStyled = styled.img<IStyledImageProps>`
+  border: none;
+  width: ${({ aspectRatio }) => aspectRatio.width}
+  height:  ${({ aspectRatio }) => aspectRatio.height}
+  @media ${devices.mobile} {
+    width: 60px;
+    height: 60px;
+  }
+`;
+
+const onErrorHandlerGenerator = (errorImageSrc: string) => (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+  const targetImage = event.target as HTMLImageElement;
+  targetImage.onerror = () => {};
+  targetImage.src = errorImageSrc;
+};
+
+const Image: FunctionComponent<IImageProps> = ({
+  desktopSrc,
+  mobileSrc,
+  aspectRatio,
+  altText,
+  errorImageSrc = DEFAULT_ERROR_IMAGE_SRC,
+}) => {
+  const srcSet = mobileSrc ? `${desktopSrc} 200w, ${mobileSrc} 400w;` : desktopSrc;
+  const onErrorHandler = onErrorHandlerGenerator(errorImageSrc);
+
+  return (
+    <ImageStyled
+      aspectRatio={AspectRatioDefinitions[aspectRatio]}
+      srcSet={srcSet}
+      sizes="(max-width: 600px) 200px, 50vw"
+      alt={altText}
+      onError={onErrorHandler}
+    />
+  );
+};
+
+export default Image;

package/src/components/atoms/ImageAspectRatioWrapper/ImageAspectRatio.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ImageAspectRatioWrapper from './ImageAspectRatioWrapper';
+
+describe('ImageAspectRatioWrapper component', () => {
+  const Image = () => <img data-testid="test-image" src="/foo" alt="test" />;
+
+  it('renders image with specific style', () => {
+    const { getByTestId } = render(
+      <ImageAspectRatioWrapper>
+        <Image />
+      </ImageAspectRatioWrapper>
+    );
+    const image = getByTestId('test-image');
+
+    expect(image).toHaveStyle({
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      'object-fit': 'cover',
+    });
+  });
+});

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import ImageAspectRatioWrapper from './ImageAspectRatioWrapper';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import { ThemeType } from '../../../types/types';
+import { AspectRatio } from '../../../types/image';
+import EditorialImage from '../../../../external/images/editorial.jpeg';
+
+const meta: Meta = {
+  title: 'Components/Foundations/ImageProportions',
+  component: ImageAspectRatioWrapper,
+  argTypes: {
+    aspectRatio: {
+      description: 'Aspect ratio applied to the image',
+    },
+    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: 'This component is used to wrap common images, giving a specific aspect ratio',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url:
+        'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH%3A-Design-System-%26-Documentation?node-id=140%3A5699',
+    },
+    jest: ['ImageAspectRatioWrapper'],
+  },
+};
+
+export default meta;
+
+interface IStorybookImageAspectRatioWrapperProps {
+  aspectRatio: AspectRatio;
+}
+
+const ImageAspectRatioTemplate: Story<IStorybookImageAspectRatioWrapperProps> = (args) => (
+  <div style={{ width: '15rem' }}>
+    <ImageAspectRatioWrapper {...args}>
+      <img src={EditorialImage} alt="test" />
+    </ImageAspectRatioWrapper>
+  </div>
+);
+
+export const ImageAspectRatio = ImageAspectRatioTemplate.bind({});
+ImageAspectRatio.args = {
+  aspectRatio: AspectRatio['1:1'],
+};

package/src/components/atoms/ImageAspectRatioWrapper/ImageAspectRatioWrapper.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { AspectRatio, IImageAspectRatioWrapperProps } from '../../../types/image';
+
+const ImageAspectRatioWrapper = styled.div<IImageAspectRatioWrapperProps>`
+  aspect-ratio: ${({ aspectRatio = AspectRatio['1:1'] }) => aspectRatio};
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+export default ImageAspectRatioWrapper;

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

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

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import IndividualListing from './index';
+import { ThemeType } from '../../../types/types';
+import { IIndividualListing } from '../../../types/types';
+
+export default {
+  title: 'Components/Event Core/Individual Listing',
+  component: IndividualListing,
+  parameters: {
+    docs: {
+      description: {
+        component: 'IndividualListing desc.',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url:
+        'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH%3A-Design-System-%26-Documentation?node-id=1280%3A10997',
+    },
+    jest: ['IndividualListing'],
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<IIndividualListing> = (args) => <IndividualListing {...args} />;
+
+export const IndividualListingLink = Template.bind({});
+
+IndividualListingLink.args = {
+  role: 'Manager',
+  name: 'Peter',
+  link: 'https://google.com',
+};
+
+export const IndividualListingNoLink = Template.bind({});
+
+IndividualListingNoLink.args = {
+  role: 'Manager',
+  name: 'Peter',
+};

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

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const RoleWrapper = styled.div`
+  font-family: var(--font-family-people-listing-role);
+  font-size: var(--font-size-overline-1);
+  font-weight: var(--font-weigth-overline-1);
+  line-height: var(--line-height-overline-1);
+  letter-spacing: var(--letter-spacing-overline-1);
+  text-transform: var(--text-transform-overline-1);
+  color: var(--base-color-darkgrey);
+  overflow-wrap: break-word;
+`;
+
+export const NameWrapper = styled.div`
+  font-family: var(--font-family-people-listing-name);
+  font-size: var(--font-size-individual-listing-name);
+  font-weight: var(--font-weigth-listing-name);
+  line-height: var(--line-height-individual-listing-name);
+  letter-spacing: var(--letter-spacing-overline-1);
+  overflow-wrap: break-word;
+
+  & a {
+    color: var(--base-color-black);
+
+    :hover {
+      color: var(--base-color-primary);
+    }
+  }
+
+  :visited {
+    color: var(--base-color-black);
+  }
+`;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import PeopleListingItem from './IndividualListing';
+
+describe('PeopleListingItem component', () => {
+  it('renders text with the proper data and a link', () => {
+    const person = {
+      role: 'director',
+      name: 'jason',
+      link: 'https://google.com',
+    };
+
+    const { getByText } = render(<PeopleListingItem role={person.role} name={person.name} link={person.link} />);
+
+    expect(getByText(person.role)).toBeInTheDocument();
+    expect(getByText(person.name)).toBeInTheDocument();
+    expect(getByText(person.name).closest('a')).toHaveAttribute('href', person.link);
+  });
+
+  it('renders text with the proper data and no link', () => {
+    const person = {
+      role: 'director',
+      name: 'jason',
+    };
+
+    render(<PeopleListingItem role={person.role} name={person.name} />);
+    const link = screen.getByText(person.name).closest('a');
+    expect(link).toBeNull();
+  });
+});

package/src/components/atoms/IndividualListing/IndividualListing.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IIndividualListing } from '../../../types/types';
+import { RoleWrapper, NameWrapper } from './IndividualListing.style';
+
+const IndividualListing = ({ role, name, link, dataROH }: IIndividualListing) => {
+  return (
+    <span data-roh={dataROH}>
+      <RoleWrapper title="role">{role}</RoleWrapper>
+      <NameWrapper>
+        {link ? (
+          <a href={link} title={name}>
+            {name}
+          </a>
+        ) : (
+          name
+        )}
+      </NameWrapper>
+    </span>
+  );
+};
+
+export default IndividualListing;

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

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

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Logo from './Logo';
+import styled from 'styled-components';
+
+const LogoSvg = styled(Logo)`
+  width: 600px;
+  height: 100%;
+`;
+
+const meta: Meta = {
+  title: 'Foundations/Logo',
+  component: Logo,
+  argTypes: {
+    ref: {
+      table: { disable: true },
+    },
+    theme: {
+      table: { disable: true },
+    },
+    as: {
+      table: { disable: true },
+    },
+    forwardedAs: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    controls: { disabled: true },
+    options: { showPanel: false },
+  },
+};
+
+export default meta;
+
+const Template: Story = (args) => <LogoSvg {...args} />;
+
+export const MainLogo = Template.bind({});
+MainLogo.args = {};
+MainLogo.parameters = {
+  previewTabs: {
+    canvas: { hidden: false },
+  },
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House-UI-Guide-and-Spec?node-id=3%3A2593',
+  },
+};

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const icon = styled.svg.attrs({
+  version: '1.1',
+  xmlns: 'http://www.w3.org/2000/svg',
+  xmlnsXlink: 'http://www.w3.org/1999/xlink',
+})``;
+
+export const Svg = styled(icon)`
+  width: 100%;
+  height: 100%;
+`;
+
+export const SvgWrapper = styled.div`
+  width: 400px;
+  height: auto;
+  cursor: pointer;
+`;