@royaloperahouse/chord 0.1.0

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

@@ -0,0 +1,81 @@
+import React, { MouseEventHandler } from 'react';
+import { Meta, Story } from '@storybook/react';
+import TextLink from './TextLink';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import { ThemeType, Colors } from '../../../types/types';
+import { DirectionType, IconNameType } from '../../../types/iconTypes';
+
+const meta: Meta = {
+  title: 'Components/Foundations/Buttons/TextLink',
+  component: TextLink,
+  argTypes: {
+    color: {
+      description: 'Text and icon color',
+    },
+    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: 'Text Link',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH:-Design-System-and-Documentation?node-id=3%3A1497',
+    },
+    jest: ['TextLink'],
+  },
+};
+
+export default meta;
+
+interface IStorybookTextLinkProps {
+  text: string;
+  color?: Colors;
+  iconName?: IconNameType;
+  iconDirection?: DirectionType;
+  onClick: MouseEventHandler<any>;
+}
+
+const TextLinkTemplate: Story<IStorybookTextLinkProps> = ({ text, ...rest }) => <TextLink {...rest}>{text}</TextLink>;
+
+export const WithoutIcon = TextLinkTemplate.bind({});
+WithoutIcon.args = {
+  onClick: () => console.log('click!'),
+  text: 'Button Text',
+};
+
+export const WithIcon = TextLinkTemplate.bind({});
+WithIcon.args = {
+  onClick: () => console.log('click!'),
+  text: 'Button Text',
+  iconName: 'DropdownArrow',
+};
+
+export const WithLongText = TextLinkTemplate.bind({});
+WithLongText.args = {
+  onClick: () => console.log('click!'),
+  text: 'Very Very Very Long Link Truncated Text',
+};

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

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { ITextLinkProps } from '../../../types/types';
+
+export const TextLinkWrapper = styled.a<ITextLinkProps>`
+  border-bottom: 1px solid;
+  padding-bottom: ${({ iconName }) =>
+    iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)'};
+  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);
+  color: var(--base-color-${({ color }) => color});
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  text-decoration: none;
+`;
+
+export const TextLinkIconWrapper = styled.span`
+  width: var(--button-icon-width);
+  height: var(--button-icon-height);
+  margin-left: var(--button-icon-margin);
+`;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, within, fireEvent } from '@testing-library/react';
+import TextLink from './TextLink';
+
+describe('TextLink component', () => {
+  const onClick = jest.fn();
+  it('renders text link with specific text', () => {
+    const { getByText } = render(<TextLink onClick={onClick}>Text link text</TextLink>);
+
+    expect(getByText('Text link text')).toBeInTheDocument();
+  });
+
+  it('truncates text if its length is greater than 30 characters', () => {
+    const { getByText, queryAllByText } = render(
+      <TextLink onClick={onClick}>Very Very Very Very Long Text Link</TextLink>
+    );
+
+    expect(queryAllByText('Very Very Very Very Long Text Link')).toHaveLength(0);
+    expect(getByText('Very Very Very Very Long Text')).toBeInTheDocument();
+  });
+
+  it('renders icon inside the text link', () => {
+    const { getByText } = render(
+      <TextLink iconName="Arrow" onClick={onClick}>
+        Text link text
+      </TextLink>
+    );
+    const textLink = getByText('Text link text');
+
+    expect(within(textLink).getByTestId('text-link-icon')).toBeInTheDocument();
+  });
+
+  it('calls onClick callback when text link is clicked', () => {
+    const { getByText } = render(<TextLink onClick={onClick}>Text link text</TextLink>);
+
+    fireEvent.click(getByText('Text link text'));
+    expect(onClick).toBeCalled();
+  });
+});

package/src/components/atoms/TextLink/TextLink.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from 'react';
+import { TextLinkWrapper, TextLinkIconWrapper } from './TextLink.style';
+import { Icon } from '../Icons';
+import { ITextLinkProps } from '../../../types/types';
+
+const TextLink: FunctionComponent<ITextLinkProps> = ({ children, iconName, iconDirection, color, ...rest }) => {
+  const truncatedString = (children as string).substring(0, 30);
+  return (
+    <TextLinkWrapper color={color} iconName={iconName} {...rest}>
+      {truncatedString}
+      {iconName ? (
+        <TextLinkIconWrapper data-testid="text-link-icon">
+          <Icon iconName={iconName} direction={iconDirection} color={color} />
+        </TextLinkIconWrapper>
+      ) : null}
+    </TextLinkWrapper>
+  );
+};
+
+export default TextLink;

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

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

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GlobalStyles from '../../../styles/GlobalStyles';
+import ThemeProvider from '../../../styles/ThemeProvider';
+import TypeTags from './index';
+import { ThemeType } from '../../../types/types';
+import { ITypeTagsProps } from '../../../types/types';
+
+export default {
+  title: 'Components/Event Core/Type Tags',
+  component: TypeTags,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Type Tags are used on event components when it is key to show users a single, or number of, pieces of information related to the event, such as genre or location. The component uses the ‘Overline 1’ typography style. It is flexible in width so it works to the component it sits within.',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/ROH%3A-Design-System-%26-Documentation?node-id=1%3A17',
+    },
+    jest: ['TypeTags'],
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={ThemeType.Core}>
+        <GlobalStyles />
+        {Story()}
+      </ThemeProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<ITypeTagsProps> = (args) => <TypeTags {...args} />;
+
+export const SingleTag = Template.bind({});
+
+SingleTag.args = {
+  list: ['This is a tag'],
+};
+
+export const MultipleTags = Template.bind({});
+
+MultipleTags.args = {
+  list: ['Ballet and Opera', 'Main Stage', 'Some other tag'],
+};
+
+MultipleTags.parameters = {
+  docs: {
+    description: {
+      story:
+        'A Type Tag component can hold multiple tags. When this happens, they should be spaced using an Em Dash (—) with a single space on either side of it.',
+    },
+  },
+};

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const TypeTag = styled.li`
+  color: var(--base-color-black);
+  display: inline-block;
+  font-size: var(--font-size-overline-1);
+  font-family: var(--font-family-overline);
+  font-weight: var(--font-weigth-overline-1);
+  letter-spacing: var(--letter-spacing-overline-1);
+  line-height: var(--line-height-overline-1);
+  margin: 0;
+  text-transform: var(--text-transform-overline-1);
+
+  &:before {
+    content: '—';
+    margin: 0 0.5em;
+  }
+
+  &:first-child:before {
+    display: none;
+  }
+`;
+
+export const TypeTagsContainer = styled.ul`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+`;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import TypeTags from './TypeTags';
+
+describe('TypeTags component', () => {
+  it('renders tag with specific text for a single item', () => {
+    const list = ['tag1'];
+
+    const { getByText } = render(<TypeTags list={list} />);
+
+    expect(getByText(list[0])).toBeInTheDocument();
+  });
+
+  it('renders multiple tags for multiple items', () => {
+    const list = ['First tag', 'second tag', 'another tag'];
+
+    const { getByText } = render(<TypeTags list={list} />);
+
+    list.forEach((t) => expect(getByText(t)).toBeInTheDocument());
+  });
+});

package/src/components/atoms/TypeTags/TypeTags.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TypeTag, TypeTagsContainer } from './TypeTags.style';
+import { ITypeTagsProps } from '../../../types/types';
+
+const TypeTags = ({ list }: ITypeTagsProps) => {
+  return (
+    <TypeTagsContainer>
+      {list.map((t) => (
+        <TypeTag key={t}>{t}</TypeTag>
+      ))}
+    </TypeTagsContainer>
+  );
+};
+
+export default TypeTags;

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

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

package/src/components/atoms/index.tsx

@@ -0,0 +1,22 @@
+import { PrimaryButton, SecondaryButton, TertiaryButton } from './Buttons';
+import { Grid, GridItem } from './Grid';
+import { Icon } from './Icons';
+import Heading from './Heading';
+import Sponsorship from './Sponsorship';
+import SectionSplitter from './SectionSplitter';
+import ImageAspectRatioWrapper from './ImageAspectRatioWrapper';
+import TypeTags from './TypeTags';
+
+export {
+  Grid,
+  GridItem,
+  Heading,
+  Icon,
+  ImageAspectRatioWrapper,
+  PrimaryButton,
+  SecondaryButton,
+  SectionSplitter,
+  Sponsorship,
+  TertiaryButton,
+  TypeTags,
+};

package/src/components/index.tsx

@@ -0,0 +1,38 @@
+import {
+  Grid,
+  GridItem,
+  Heading,
+  Icon,
+  Sponsorship,
+  PrimaryButton,
+  SecondaryButton,
+  TertiaryButton,
+  SectionSplitter,
+  TypeTags,
+} from './atoms';
+import { Footer, Navigation } from './organisms';
+import { Editorial, PeopleListing, PromoWithTitle, SectionTitle, TextOnly } from './molecules';
+import ThemeProvider from '../styles/ThemeProvider';
+import GlobalStyles from '../styles/GlobalStyles';
+
+export {
+  Editorial,
+  Footer,
+  GlobalStyles,
+  Grid,
+  GridItem,
+  Heading,
+  Icon,
+  Navigation,
+  PeopleListing,
+  PrimaryButton,
+  PromoWithTitle,
+  SecondaryButton,
+  SectionTitle,
+  Sponsorship,
+  TertiaryButton,
+  TextOnly,
+  ThemeProvider,
+  SectionSplitter,
+  TypeTags,
+};

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

@@ -0,0 +1,116 @@
+import styled from 'styled-components';
+import { devices } from '../../../styles/viewports';
+
+export const ContactNewsletterWrapper = styled.div`
+  display: grid;
+  grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);
+  grid-template-rows: 100px;
+  gap: 0;
+
+  @media ${devices.mobile} {
+    & {
+      display: grid;
+      grid-template-columns: 100%;
+      grid-template-rows: min-content min-content;
+      gap: var(--footer-vertical-spacing-lg);
+    }
+  }
+`;
+
+export const ContactNewsletterSeparator = styled.div`
+  grid-column: 2;
+  justify-self: center;
+  height: 100%;
+  border: 1px solid var(--base-color-white);
+
+  @media ${devices.mobile} {
+    & {
+      grid-column: auto;
+      display: none;
+    }
+  }
+`;
+
+export const SignUpWrapper = styled.div`
+  grid-column: 1;
+  padding-top: 9px;
+  justify-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @media ${devices.mobile} {
+    & {
+      grid-column: auto;
+      align-items: start;
+      justify-self: start;
+      padding-top: 0;
+    }
+  }
+`;
+
+export const SignUpText = styled.p`
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body-2);
+  line-height: var(--line-height-body-2);
+  width: 60%;
+  margin: 0 auto;
+  height: 60px;
+  text-align: center;
+
+  @media ${devices.mobile} {
+    & {
+      width: 100%;
+      height: auto;
+      text-align: left;
+      margin-bottom: var(--footer-vertical-spacing-lg);
+    }
+  }
+`;
+
+export const ContactWrapper = styled.div`
+  grid-column: 3;
+  justify-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 9px;
+
+  @media ${devices.mobile} {
+    & {
+      grid-column: auto;
+      align-items: start;
+      justify-self: start;
+      padding-top: 0;
+    }
+  }
+`;
+
+export const MediaLinksWrapper = styled.div`
+  display: flex;
+  gap: var(--footer-media-gap);
+  height: 60px;
+
+  @media ${devices.mobile} {
+    & {
+      height: auto;
+      margin-bottom: var(--footer-vertical-spacing-lg);
+    }
+  }
+`;
+
+export const MediaIconWrapper = styled.a`
+  height: var(--footer-media-icon-height);
+  width: var(--footer-media-icon-width);
+`;
+
+export const TextLinkWrapper = styled.div`
+  &&& {
+    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);
+  }
+`;

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ContactNewsletter from './ContactNewsletter';
+import { SocialMediaLink } from '../../../types/footer';
+
+describe('ContactNewsletter component', () => {
+  const signUpText = 'Foo text signup';
+  const signUpLink = {
+    title: 'SignUp Link',
+    href: '/test-signup',
+    dataRoh: 'foo',
+  };
+  const contact = {
+    title: 'Contact Link',
+    href: '/test-contact',
+    dataRoh: 'bar',
+  };
+  const socialMediaLinks = [
+    {
+      dataRoh: 'test-data2',
+      href: '/test',
+      name: 'Facebook',
+    },
+    {
+      dataRoh: 'test-data2',
+      href: '/test2',
+      name: 'Twitter',
+    },
+  ] as SocialMediaLink[];
+
+  it('renders signup text', () => {
+    const { getByText } = render(
+      <ContactNewsletter
+        signUpText={signUpText}
+        signUpLink={signUpLink}
+        contact={contact}
+        socialMediaLinks={socialMediaLinks}
+      />
+    );
+
+    expect(getByText(signUpText)).toBeInTheDocument();
+  });
+
+  it('renders signup link', () => {
+    const { getByText, getByTitle } = render(
+      <ContactNewsletter
+        signUpText={signUpText}
+        signUpLink={signUpLink}
+        contact={contact}
+        socialMediaLinks={socialMediaLinks}
+      />
+    );
+
+    expect(getByText(signUpLink.title)).toBeInTheDocument();
+    expect(getByTitle(signUpLink.title)).toBeInTheDocument();
+  });
+
+  it('renders a list of social media links', () => {
+    const { getByTitle } = render(
+      <ContactNewsletter
+        signUpText={signUpText}
+        signUpLink={signUpLink}
+        contact={contact}
+        socialMediaLinks={socialMediaLinks}
+      />
+    );
+
+    expect(getByTitle(socialMediaLinks[0].name)).toBeInTheDocument();
+    expect(getByTitle(socialMediaLinks[1].name)).toBeInTheDocument();
+  });
+
+  it('renders contact link', () => {
+    const { getByText, getByTitle } = render(
+      <ContactNewsletter
+        signUpText={signUpText}
+        signUpLink={signUpLink}
+        contact={contact}
+        socialMediaLinks={socialMediaLinks}
+      />
+    );
+
+    expect(getByText(contact.title)).toBeInTheDocument();
+    expect(getByTitle(contact.title)).toBeInTheDocument();
+  });
+});

package/src/components/molecules/ContactNewsletter/ContactNewsletter.tsx

@@ -0,0 +1,51 @@
+import React, { FunctionComponent } from 'react';
+import TextLink from '../../atoms/TextLink';
+import { Icon } from '../../atoms/Icons';
+import {
+  ContactNewsletterWrapper,
+  ContactNewsletterSeparator,
+  SignUpWrapper,
+  ContactWrapper,
+  SignUpText,
+  MediaLinksWrapper,
+  MediaIconWrapper,
+  TextLinkWrapper,
+} from './ContactNewsletter.style';
+import { IContactNewsletterProps } from '../../../types/footer';
+
+const ContactNewsletter: FunctionComponent<IContactNewsletterProps> = ({
+  signUpText,
+  signUpLink,
+  socialMediaLinks,
+  contact,
+}) => {
+  return (
+    <ContactNewsletterWrapper>
+      <SignUpWrapper>
+        <SignUpText>{signUpText}</SignUpText>
+        <TextLinkWrapper>
+          <TextLink href={signUpLink.href} title={signUpLink.title}>
+            {signUpLink.title}
+          </TextLink>
+        </TextLinkWrapper>
+      </SignUpWrapper>
+      <ContactNewsletterSeparator />
+      <ContactWrapper>
+        <MediaLinksWrapper>
+          {socialMediaLinks.map((mediaLink) => (
+            <MediaIconWrapper key={mediaLink.name} href={mediaLink.href} title={mediaLink.name}>
+              <Icon iconName={mediaLink.name} color="white" />
+            </MediaIconWrapper>
+          ))}
+        </MediaLinksWrapper>
+        <TextLinkWrapper>
+          <TextLink href={contact.href} title={contact.title}>
+            {contact.title}
+          </TextLink>
+        </TextLinkWrapper>
+      </ContactWrapper>
+    </ContactNewsletterWrapper>
+  );
+};
+
+export default ContactNewsletter;

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

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