@royaloperahouse/chord 0.1.0 → 0.3.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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