@royaloperahouse/chord 0.1.0

package/src/components/molecules/PeopleListing/PeopleListing.stories.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import PeopleListing from './index';
+import { ThemeType } from '../../../types/types';
+import { IPeopleListing } from '../../../types/types';
+
+export default {
+  title: 'Components/Event Core/People Listing',
+  component: PeopleListing,
+  parameters: {
+    docs: {
+      description: {
+        component: 'PeopleListing.',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url:
+        'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH%3A-Design-System-%26-Documentation?node-id=1280%3A10997',
+    },
+    jest: ['PeopleListing'],
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<IPeopleListing> = (args) => <PeopleListing {...args} />;
+
+export const PeopleListingDefault = Template.bind({});
+
+PeopleListingDefault.args = {
+  people: [
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name that spans over two lines",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role that spans over two lines',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+    },
+  ],
+};
+
+export const PeopleListingWithLinks = Template.bind({});
+
+PeopleListingWithLinks.args = {
+  people: [
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name that spans over two lines",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role that spans over two lines',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+    {
+      role: 'Role',
+      name: "Individual's name",
+      link: 'https://google.com',
+    },
+  ],
+};

package/src/components/molecules/PeopleListing/PeopleListing.style.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Grid } from '../../atoms/Grid';
+
+const PeopleListingGrid = styled(Grid)`
+  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);
+`;
+
+export default PeopleListingGrid;

package/src/components/molecules/PeopleListing/PeopleListing.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import PeopleListing from './PeopleListing';
+
+describe('PeopleListing component', () => {
+  it('renders text with the proper data and a link', () => {
+    const people = [
+      {
+        role: 'director',
+        name: 'jason',
+        link: 'https://google.com',
+      },
+      {
+        role: 'actor',
+        name: 'mary',
+        link: 'https://google.com',
+      },
+    ];
+
+    const renderListing = render(<PeopleListing people={people} />);
+    const numberOFItems = renderListing.getAllByTitle('role').length;
+    expect(numberOFItems).toBe(2);
+  });
+});

package/src/components/molecules/PeopleListing/PeopleListing.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { IPeopleListing } from '../../../types/types';
+import IndividualListing from '../../atoms/IndividualListing';
+import { GridItem } from '../../atoms/Grid';
+import PeopleListingGrid from './PeopleListing.style';
+
+const PeopleListing = ({ people }: IPeopleListing) => {
+  return (
+    <PeopleListingGrid>
+      {people.map((person, index) => {
+        return (
+          <GridItem
+            key={`${person.name}-${index}`}
+            columnStartDesktop={(index % 4) * 3 + 3}
+            columnSpanDesktop={3}
+            columnStartDevice={(index % 2) * 6 + 2}
+            columnSpanDevice={6}
+          >
+            <IndividualListing role={person.role} name={person.name} link={person.link} dataROH={person.dataROH} />
+          </GridItem>
+        );
+      })}
+    </PeopleListingGrid>
+  );
+};
+
+export default PeopleListing;

package/src/components/molecules/PeopleListing/index.tsx

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

package/src/components/molecules/PolicyLinks/PolicyLinks.style.tsx

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { devices } from '../../../styles/viewports';
+
+export const PolicyLinksList = styled.ul`
+  margin: 0 auto;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: var(--footer-items-gap);
+
+  @media ${devices.mobile} {
+    & {
+      margin: 0;
+      flex-direction: column;
+    }
+  }
+`;
+
+export const PolicyLinkItem = styled.li`
+  font-family: var(--font-family-overline);
+  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);
+  text-align: center;
+
+  @media ${devices.mobile} {
+    & {
+      text-align: left;
+    }
+  }
+`;
+
+export const PolicyLink = styled.a`
+  width: fit-content;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: var(--base-color-white);
+  cursor: pointer;
+`;

package/src/components/molecules/PolicyLinks/PolicyLinks.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import PolicyLinks from './PolicyLinks';
+
+describe('PolicyLinks component', () => {
+  const links = [
+    {
+      dataRoh: 'test-data',
+      title: 'Test',
+      href: '/test',
+      name: 'test-name',
+    },
+    {
+      dataRoh: 'test-data2',
+      title: 'Test2',
+      href: '/test2',
+      name: 'test-name2',
+    },
+  ];
+  it('renders a list of links', () => {
+    const { getByText, getByTitle } = render(<PolicyLinks items={links} />);
+
+    expect(getByText(links[0].title)).toBeInTheDocument();
+    expect(getByTitle(links[0].title)).toBeInTheDocument();
+    expect(getByText(links[1].title)).toBeInTheDocument();
+    expect(getByTitle(links[1].title)).toBeInTheDocument();
+  });
+});

package/src/components/molecules/PolicyLinks/PolicyLinks.tsx

@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+import { PolicyLinksList, PolicyLinkItem, PolicyLink } from './PolicyLinks.style';
+import { IPolicyLinksProps } from '../../../types/footer';
+
+const PolicyLinks: FunctionComponent<IPolicyLinksProps> = ({ items = [] }) => {
+  return (
+    <PolicyLinksList>
+      {items.map((item) => (
+        <PolicyLinkItem key={item.name}>
+          <PolicyLink data-roh={item.dataRoh} href={item.href} title={item.title}>
+            {item.title}
+          </PolicyLink>
+        </PolicyLinkItem>
+      ))}
+    </PolicyLinksList>
+  );
+};
+
+export default PolicyLinks;

package/src/components/molecules/PolicyLinks/index.tsx

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

package/src/components/molecules/PromoWithTitle/PromoWithTitle.stories.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import PromoWithTitleComponent from './PromoWithTitle';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import { ThemeType } from '../../../types/types';
+import EditorialImage from '../../../../external/images/editorial.jpeg';
+import { PromoLinks } from '../../../types/editorial';
+
+const meta: Meta = {
+  title: 'Components/Editorial/PromoWithTitle',
+  component: PromoWithTitleComponent,
+  argTypes: {
+    text: {
+      description: 'Body text inside the component',
+    },
+    title: {
+      description: 'Mandatory. Title inside the component',
+    },
+    titleSize: {
+      description: 'Size of the title. It could be "small" or "large"',
+    },
+    subtitle: {
+      description: 'Subtitle inside the component',
+    },
+    imagePosition: {
+      description: 'Position of the image inside the component',
+    },
+    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 house any textural information which have imagery or links to other pages',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url:
+        'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH%3A-Design-System-%26-Documentation?node-id=1179%3A5195',
+    },
+    jest: ['Editorial'],
+  },
+};
+
+export default meta;
+
+interface IStorybookEditorialProps {
+  text?: string;
+  title: string;
+  titleSize?: 'large' | 'small';
+  subtitle?: string;
+  imagePosition?: 'left' | 'right';
+  links?: PromoLinks;
+}
+
+const PromoWithTitleTemplate: Story<IStorybookEditorialProps> = (args) => (
+  <PromoWithTitleComponent {...args}>
+    <img src={EditorialImage} alt="test" />
+  </PromoWithTitleComponent>
+);
+
+export const PromoWithTitle = PromoWithTitleTemplate.bind({});
+PromoWithTitle.args = {
+  title: 'title',
+};
+
+export const PromoWithTitleSubtitleAndText = PromoWithTitleTemplate.bind({});
+PromoWithTitleSubtitleAndText.args = {
+  text:
+    'Descriptive copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cursus imperdiet massa aliquam adipiscing sit semper netus sit gravida. Leo ullamcorper nec vel feugiat consectetur vel. Iaculis donec euismod vulputate libero adipiscing. Nunc nulla sed purus netus dignissim enim habitant at.',
+  subtitle: 'Optional subtitle. Lorem ipsum dolor sit amet, consectetur adipiscing elite.',
+  title: 'title',
+  titleSize: 'small',
+};
+
+export const PromoWithTitleSubtitleTextAndOneLink = PromoWithTitleTemplate.bind({});
+PromoWithTitleSubtitleTextAndOneLink.args = {
+  text:
+    'Descriptive copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cursus imperdiet massa aliquam adipiscing sit semper netus sit gravida. Leo ullamcorper nec vel feugiat consectetur vel. Iaculis donec euismod vulputate libero adipiscing. Nunc nulla sed purus netus dignissim enim habitant at.',
+  subtitle: 'Optional subtitle. Lorem ipsum dolor sit amet, consectetur adipiscing elite.',
+  title: 'title',
+  titleSize: 'small',
+  links: [{ text: 'Button text', href: '/test', target: '_blank' }],
+};
+
+export const PromoWithTitleSubtitleTextAndLinks = PromoWithTitleTemplate.bind({});
+PromoWithTitleSubtitleTextAndLinks.args = {
+  text:
+    'Descriptive copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cursus imperdiet massa aliquam adipiscing sit semper netus sit gravida. Leo ullamcorper nec vel feugiat consectetur vel. Iaculis donec euismod vulputate libero adipiscing. Nunc nulla sed purus netus dignissim enim habitant at.',
+  subtitle: 'Optional subtitle. Lorem ipsum dolor sit amet, consectetur adipiscing elite.',
+  title: 'title',
+  titleSize: 'small',
+  links: [
+    { text: 'Button text', href: '/test', target: '_blank', iconName: 'Tickets' },
+    { text: 'Button text', href: '/test', target: '_blank' },
+  ],
+};

package/src/components/molecules/PromoWithTitle/PromoWithTitle.style.tsx

@@ -0,0 +1,108 @@
+import styled from 'styled-components';
+import { Grid } from '../../atoms';
+import { IEditorialGridProps } from '../../../types/editorial';
+import { devices } from '../../../styles/viewports';
+
+export const PromoWithTitleGrid = styled(Grid)<IEditorialGridProps>`
+  grid-template-areas: ${({ imageToLeft }) =>
+    imageToLeft
+      ? `'left left left left left left left left . right right right right right . .'`
+      : `'. . left left left left left . right right right right right right right right'`};
+
+  @media ${devices.tablet} {
+    & {
+      grid-template-areas: ${({ imageToLeft }) =>
+        imageToLeft
+          ? `'left left left left left left left . right right right right right .'`
+          : `'. left left left left left . right right right right right right right'`};
+    }
+  }
+
+  @media ${devices.mobile} {
+    & {
+      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);
+      grid-template-rows: min-content 24px min-content;
+      gap: 0;
+      grid-template-areas:
+        'row1 row1 row1'
+        '. . .'
+        '. row2 .';
+    }
+  }
+`;
+
+export const PromoWithTitleImageWrapper = styled.div<IEditorialGridProps>`
+  grid-area: ${({ imageToLeft }) => (imageToLeft ? 'left' : 'right')};
+  @media ${devices.mobile} {
+    & {
+      grid-area: row1;
+  }
+`;
+
+export const PromoWithTitleContentWrapper = styled.div<IEditorialGridProps>`
+  grid-area: ${({ imageToLeft }) => (imageToLeft ? 'right' : 'left')};
+  align-self: center;
+  @media ${devices.mobile} {
+    & {
+      grid-area: row2;
+      align-self: start;
+  }
+`;
+
+export const PromoWithTitleContainer = styled.div`
+  margin: 0 0 32px 0;
+
+  h2,
+  h3 {
+    margin: 0;
+  }
+
+  @media ${devices.mobile} {
+    & {
+      margin: 0 0 24px 0;
+    }
+  }
+`;
+
+export const PromoWithTitleSubtitle = styled.span`
+  font-family: var(--font-family-subtitles);
+  font-size: var(--font-size-subtitles-1);
+  font-weight: var(--font-weigth-subtitles-1);
+  line-height: var(--line-height-subtitles-1);
+  letter-spacing: var(--letter-spacing-subtitles-1);
+  text-transform: var(--text-transform-subtitles-1);
+  margin-bottom: var(--editorial-subtitle-margin-bottom);
+  display: block;
+  overflow-wrap: break-word;
+`;
+
+export const PromoWithTitleText = styled.div`
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body-1);
+  font-weight: var(--font-weigth-body-1);
+  line-height: var(--line-height-body-1);
+  letter-spacing: var(--letter-spacing-body-1);
+  text-transform: var(--text-transform-body-1);
+  margin: 0;
+  padding: 0;
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+
+  em {
+    font-family: var(--font-family-body-italics);
+    font-style: normal;
+  }
+`;
+
+export const ButtonsContainer = styled.div`
+  display: flex;
+  gap: 16px;
+  margin-top: 32px;
+
+  @media ${devices.mobile} {
+    gap: 24px;
+    margin-top: 24px;
+    flex-direction: column;
+    align-items: center;
+  }
+`;

package/src/components/molecules/PromoWithTitle/PromoWithTitle.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, within } from '@testing-library/react';
+import PromoWithTitle from './PromoWithTitle';
+import { PromoLinks } from '../../../types/editorial';
+
+describe('PromoWithTitle component', () => {
+  const Image = () => <img data-testid="test-image" src="/foo" alt="test" />;
+  const text = 'foo text';
+  const subtitle = 'foo subtitle';
+  const title = 'test';
+
+  it('renders image to the left if no position is set', () => {
+    const { getByTestId } = render(
+      <PromoWithTitle title={title}>
+        <Image />
+      </PromoWithTitle>
+    );
+
+    const imageGridItem = getByTestId('image-wrapper');
+    const contentGridItem = getByTestId('content-wrapper');
+
+    expect(imageGridItem).toHaveStyle({ 'grid-area': 'left' });
+    expect(contentGridItem).toHaveStyle({ 'grid-area': 'right' });
+    expect(within(imageGridItem).getByTestId('test-image')).toBeInTheDocument();
+    expect(within(contentGridItem).getByText(title)).toBeInTheDocument();
+  });
+
+  it('renders only image and title if any prop is not provided', () => {
+    const { getByTestId } = render(
+      <PromoWithTitle title={title}>
+        <Image />
+      </PromoWithTitle>
+    );
+
+    const imageGridItem = getByTestId('image-wrapper');
+    const contentGridItem = getByTestId('content-wrapper');
+    expect(within(imageGridItem).getByTestId('test-image')).toBeInTheDocument();
+    expect(within(contentGridItem).getByText(title)).toBeInTheDocument();
+    expect(within(contentGridItem).queryAllByText(subtitle)).toHaveLength(0);
+    expect(within(contentGridItem).queryAllByTestId('buttons-wrapper')).toHaveLength(0);
+  });
+
+  it('renders image and title properly when image position is right', () => {
+    const { getByTestId } = render(
+      <PromoWithTitle imagePosition="right" title={title}>
+        <Image />
+      </PromoWithTitle>
+    );
+
+    const imageGridItem = getByTestId('image-wrapper');
+    const contentGridItem = getByTestId('content-wrapper');
+
+    expect(imageGridItem).toHaveStyle({ 'grid-area': 'right' });
+    expect(contentGridItem).toHaveStyle({ 'grid-area': 'left' });
+    expect(within(imageGridItem).getByTestId('test-image')).toBeInTheDocument();
+    expect(within(contentGridItem).getByText(title)).toBeInTheDocument();
+  });
+
+  it('renders optional props (subtitle, text and links)', () => {
+    const links: PromoLinks = [{ text: 'link' }, { text: 'link2' }];
+    const { getByTestId } = render(
+      <PromoWithTitle title={title} subtitle={subtitle} text={text} links={links}>
+        <Image />
+      </PromoWithTitle>
+    );
+
+    const contentGridItem = getByTestId('content-wrapper');
+
+    expect(within(contentGridItem).getByText(title)).toBeInTheDocument();
+    expect(within(contentGridItem).getByText(subtitle)).toBeInTheDocument();
+    expect(within(contentGridItem).getByText(text)).toBeInTheDocument();
+    expect(within(contentGridItem).getByText(links[0].text)).toBeInTheDocument();
+    expect(within(contentGridItem).getByText(links[1]?.text as string)).toBeInTheDocument();
+  });
+});