@royaloperahouse/chord 0.1.0

package/src/styles/themes.ts

@@ -0,0 +1,398 @@
+const colors = {
+  core: '#C8102E',
+  stream: '#1866DC',
+  cinema: '#1A1A1A',
+};
+
+const commonColors = {
+  black: '#1A1A1A',
+  white: '#FFFFFF',
+  darkgrey: '#727272',
+  midgrey: '#B2B2B2',
+  lightgrey: '#F0F0F0',
+  error: '#C8102E',
+  medium: '#D79233',
+  good: '#4EAA33',
+};
+
+const fontFamilies = {
+  adobeGaramondPro: 'adobe-garamond-pro',
+  adobeGaramondProItalics: 'adobe-garamond-pro-italics',
+  gothamSSmMedium: 'Gotham SSm Medium',
+  gothamSSm: 'Gotham SSm',
+  sabonNextLTProRegular: 'Sabon Next LT Pro Regular',
+  sabonNextLTProRegularItalics: 'Sabon Next LT Pro Regular Italics',
+};
+
+const common = {
+  fonts: {
+    desktop: {
+      sizes: {
+        headers: {
+          1: '96px',
+          2: '68px',
+          3: '44px',
+          4: '34px',
+          5: '24px',
+          6: '20px',
+        },
+        altHeaders: {
+          3: '44px',
+          4: '34px',
+          5: '24px',
+          6: '20px',
+        },
+        subtitles: {
+          1: '18px',
+          2: '12px',
+        },
+        titleDescription: '20px',
+        body: {
+          1: '17px',
+          2: '14px',
+          3: '12px',
+        },
+        listing: '17px',
+        buttons: '14px',
+        overline: {
+          1: '12px',
+          2: '10px',
+        },
+        navigation: '13px',
+        search: '24px',
+      },
+      letterSpacing: {
+        headers: {
+          1: '2px',
+          2: '1px',
+          3: '1px',
+          4: '1px',
+          5: '1px',
+          6: '1px',
+        },
+        overline: {
+          1: '1px',
+          2: '1px',
+        },
+        subtitles: {
+          1: '1px',
+        },
+        body: {
+          1: 'normal',
+          2: 'normal',
+          3: 'normal',
+        },
+      },
+      lineHeights: {
+        headers: {
+          1: '110px',
+          2: '72px',
+          3: '48px',
+          4: '40px',
+          5: '30px',
+          6: '28px',
+        },
+        altHeaders: {
+          3: '48px',
+          4: '44px',
+          5: '30px',
+          6: '28px',
+        },
+        subtitles: {
+          1: '22px',
+          2: '22px',
+        },
+        titleDescription: '28px',
+        body: {
+          1: '24px',
+          2: '22px',
+          3: '18px',
+        },
+        peopleListing: '24px',
+        listing: '34px',
+        buttons: '20px',
+        overline: {
+          1: '14px',
+          2: '12px',
+        },
+        navigation: '16px',
+      },
+      families: {
+        headers: fontFamilies.gothamSSmMedium,
+        altHeaders: fontFamilies.adobeGaramondPro,
+        subtitles: fontFamilies.gothamSSmMedium,
+        body: fontFamilies.adobeGaramondPro,
+        bodyItalics: fontFamilies.adobeGaramondProItalics,
+        listing: fontFamilies.adobeGaramondPro,
+        listingItalics: fontFamilies.adobeGaramondProItalics,
+        buttons: fontFamilies.gothamSSm,
+        overline: fontFamilies.gothamSSmMedium,
+        navigation: fontFamilies.gothamSSmMedium,
+        peopleListingRole: fontFamilies.gothamSSm,
+      },
+      weights: {
+        headers: {
+          1: '400',
+          2: '400',
+          3: '400',
+          4: '400',
+          5: '400',
+          6: '400',
+        },
+        buttons: '400',
+        overline: {
+          1: '400',
+        },
+        body: {
+          1: '400',
+          2: '400',
+          3: '400',
+        },
+        subtitles: {
+          1: '400',
+          2: '400',
+        },
+      },
+      transforms: {
+        headers: 'uppercase',
+        overline: 'uppercase',
+        subtitles: 'uppercase',
+        body: 'none',
+      },
+    },
+    mobile: {
+      sizes: {
+        headers: {
+          1: '38px',
+          2: '32px',
+          3: '26px',
+          4: '24px',
+          5: '20px',
+          6: '17px',
+        },
+        altHeaders: {
+          3: '26px',
+          4: '24px',
+          5: '20px',
+          6: '17px',
+        },
+        subtitles: {
+          1: '15px',
+          2: '12px',
+        },
+        titleDescription: '17px',
+        body: {
+          1: '16px',
+          2: '12px',
+          3: '11px',
+        },
+        listing: '16px',
+        buttons: '14px',
+        overline: {
+          1: '12px',
+          2: '10px',
+        },
+        navigation: '13px',
+      },
+      letterSpacing: {
+        headers: {
+          1: '1px',
+          2: '1px',
+          3: '1px',
+          4: '1px',
+          5: '1px',
+          6: '1px',
+        },
+        overline: {
+          1: '1px',
+          2: '1px',
+        },
+        subtitles: {
+          1: '1px',
+        },
+        body: {
+          1: 'normal',
+          2: 'normal',
+          3: 'normal',
+        },
+      },
+      lineHeights: {
+        headers: {
+          1: '42px',
+          2: '36px',
+          3: '30px',
+          4: '28px',
+          5: '28px',
+          6: '24px',
+        },
+        altHeaders: {
+          3: '30px',
+          4: '28px',
+          5: '28px',
+          6: '24px',
+        },
+        subtitles: {
+          1: '22px',
+          2: '16px',
+        },
+        titleDescription: '24px',
+        body: {
+          1: '22px',
+          2: '18px',
+          3: '16px',
+        },
+        listing: '34px',
+        buttons: '20px',
+        overline: {
+          1: '14px',
+          2: '12px',
+        },
+        navigation: '16px',
+      },
+      families: {
+        headers: fontFamilies.gothamSSm,
+        altHeaders: fontFamilies.adobeGaramondPro,
+        subtitles: fontFamilies.gothamSSmMedium,
+        body: fontFamilies.adobeGaramondPro,
+        bodyItalics: fontFamilies.adobeGaramondProItalics,
+        listing: fontFamilies.adobeGaramondPro,
+        listingItalics: fontFamilies.adobeGaramondProItalics,
+        buttons: fontFamilies.gothamSSm,
+        overline: fontFamilies.gothamSSmMedium,
+        navigation: fontFamilies.gothamSSmMedium,
+      },
+      weights: {
+        headers: {
+          1: '400',
+          2: '400',
+          3: '400',
+          4: '400',
+          5: '400',
+          6: '400',
+        },
+        buttons: '400',
+        overline: {
+          1: '400',
+        },
+        body: {
+          1: '400',
+          2: '400',
+          3: '400',
+        },
+        subtitles: {
+          1: '400',
+          2: '400',
+        },
+      },
+      transforms: {
+        headers: 'uppercase',
+        overline: 'uppercase',
+        subtitles: 'uppercase',
+        body: 'none',
+      },
+    },
+  },
+  spacing: {
+    1: '4px',
+    2: '8px',
+    3: '12px',
+    4: '16px',
+    5: '20px',
+    6: '24px',
+    7: '28px',
+    8: '32px',
+    9: '36px',
+    10: '40px',
+    12: '48px',
+    15: '60px',
+    18: '72px',
+    20: '80px',
+    30: '120px',
+    35: '140px',
+    40: '160px',
+    45: '180px',
+    50: '200px',
+  },
+  grid: {
+    mobile: {
+      margin: '20px',
+      outerMargin: '0',
+      gap: '12px',
+    },
+    tablet: {
+      margin: '50px',
+      outerMargin: '0',
+      gap: '20px',
+    },
+    desktop: {
+      margin: '10%',
+      outerMargin: '50px',
+      gap: '36px',
+    },
+  },
+  buttons: {
+    paddingX: '20px',
+    paddingY: '14px',
+    paddingYIcon: '12px',
+    iconWidth: '20px',
+    iconHeight: '20px',
+    iconMargin: '12px',
+  },
+  footer: {
+    desktop: {
+      height: '380px',
+      paddingTop: '44px',
+      paddingBottom: '0',
+      itemsGap: '32px',
+      mediaGap: '32px',
+      mediaIconWidth: '24px',
+      mediaIconHeight: '24px',
+      verticalSpacingLarge: '58px',
+      verticalSpacingSmall: '16px',
+    },
+    mobile: {
+      height: 'auto',
+      paddingTop: '20px',
+      paddingBottom: '20px',
+      itemsGap: '12px',
+      mediaGap: '28px',
+      mediaIconWidth: '28px',
+      mediaIconHeight: '28px',
+      verticalSpacingLarge: '24px',
+      verticalSpacingSmall: '24px',
+    },
+  },
+};
+
+export const core = {
+  ...common,
+  colors: {
+    ...commonColors,
+    primary: colors.core,
+    primaryButton: colors.core,
+    secondaryButton: commonColors.white,
+    tertiaryButton: 'transparent',
+  },
+};
+export const stream = {
+  ...common,
+  colors: {
+    ...commonColors,
+    primary: colors.stream,
+    primaryButton: colors.stream,
+    secondaryButton: commonColors.white,
+    tertiaryButton: 'transparent',
+  },
+};
+export const cinema = {
+  ...common,
+  colors: {
+    ...commonColors,
+    primary: colors.cinema,
+    primaryButton: commonColors.white,
+    secondaryButton: commonColors.white,
+    tertiaryButton: 'transparent',
+  },
+};
+
+export const themes = { core, stream, cinema };

package/src/styles/viewports.ts

@@ -0,0 +1,14 @@
+export const breakpoints = {
+  xs: 320,
+  sm: 700,
+  md: 1140,
+  lg: 1400,
+};
+
+export const devices = {
+  mobile: `only screen and (max-width: ${breakpoints.sm - 1}px)`,
+  tablet: `only screen and (max-width: ${breakpoints.md - 1}px) and (min-width: ${breakpoints.sm}px)`,
+  mobileAndTablet: `only screen and (max-width: ${breakpoints.md - 1}px)`,
+  desktop: `only screen and (max-width: ${breakpoints.lg - 1}px) and (min-width: ${breakpoints.md}px)`,
+  largeDesktop: `only screen and (min-width: ${breakpoints.lg}px)`,
+};

package/src/types/buttonTypes.ts

@@ -0,0 +1,42 @@
+import { ReactNode, AnchorHTMLAttributes, MouseEventHandler } from 'react';
+import { IconNameType, DirectionType } from './iconTypes';
+import { Colors } from './types';
+
+export interface IButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: ReactNode;
+  /**
+   * Function to be called when a button is clicked
+   */
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  /**
+   * Name of the icon to be used in the button
+   */
+  iconName?: IconNameType;
+  /**
+   * Direction of the icon used in the button
+   */
+  iconDirection?: DirectionType;
+  /**
+   * Color of text and icon
+   */
+  color?: Colors;
+}
+
+export interface IPrimaryButtonProps extends IButtonProps {
+  /**
+   * Button background color
+   */
+  bgColor?: Colors;
+}
+
+export interface ITertiaryButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Color of text and icon
+   */
+  color?: Colors;
+  /**
+   * Function to be called when a button is clicked
+   */
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  children: ReactNode;
+}

package/src/types/editorial.ts

@@ -0,0 +1,84 @@
+import { AnchorHTMLAttributes, MouseEventHandler, ReactElement } from 'react';
+import { DirectionType, IconNameType } from './iconTypes';
+import { Colors } from './types';
+export interface IEditorialProps {
+  /**
+   * Text placed in the editorial component
+   */
+  text: string;
+  /**
+   * Subtitle placed in the editorial component
+   */
+  subtitle?: string;
+  /**
+   * Position of the image in the editorial component
+   */
+  imagePosition?: 'left' | 'right';
+  /**
+   * Image tag or component to be displayed in the editorial component with aspect ratio 1:1
+   */
+  children: ReactElement<HTMLImageElement>;
+}
+
+export interface IEditorialGridProps {
+  /**
+   * Sets if the image will be placed in the right (false) or the left (true)
+   */
+  imageToLeft: boolean;
+}
+
+export type PromoWithTitleLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  /**
+   * Text inside the link
+   */
+  text: string;
+  /**
+   * Function to be called when a button is clicked
+   */
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  /**
+   * Name of the icon to be used in the button
+   */
+  iconName?: IconNameType;
+  /**
+   * Direction of the icon used in the button
+   */
+  iconDirection?: DirectionType;
+  /**
+   * Color of text and icon
+   */
+  color?: Colors;
+};
+
+export type PromoLinks = [PromoWithTitleLink, PromoWithTitleLink?];
+
+export interface IPromoWithTitleProps {
+  /**
+   * Text placed in the editorial component
+   */
+  text?: string;
+  /**
+   * Text placed in the editorial component
+   */
+  title: string;
+  /**
+   * Text placed in the editorial component
+   */
+  titleSize?: 'small' | 'large';
+  /**
+   * Subtitle placed in the editorial component
+   */
+  subtitle?: string;
+  /**
+   * Position of the image in the editorial component
+   */
+  imagePosition?: 'left' | 'right';
+  /**
+   * Image tag or component to be displayed in the editorial component with aspect ratio 4:3
+   */
+  children: ReactElement<HTMLImageElement>;
+  /**
+   * Array of buttons props. First one should have PrimaryButton attributes, second one Tertiary button attributes
+   */
+  links?: PromoLinks;
+}

package/src/types/footer.ts

@@ -0,0 +1,49 @@
+import { IconNameType } from './iconTypes';
+
+export type CommonLink = {
+  href: string;
+  title: string;
+  dataRoh: string;
+};
+
+export type PolicyLink = CommonLink & {
+  name: string;
+};
+
+export type SocialMediaLink = {
+  dataRoh: string;
+  name: IconNameType;
+  href: string;
+};
+
+export type ExternalLink = CommonLink & {
+  target?: string;
+};
+
+export type Newsletter = {
+  text: string;
+  link: CommonLink;
+};
+
+export type FooterData = {
+  policyLinks: PolicyLink[];
+  socialMediaLinks: SocialMediaLink[];
+  newsletter: Newsletter;
+  contact: CommonLink;
+  artsLogo: ExternalLink;
+  additionalInfo: string;
+};
+
+export interface IFooterProps {
+  data: FooterData;
+}
+export interface IPolicyLinksProps {
+  items: PolicyLink[];
+}
+
+export interface IContactNewsletterProps {
+  signUpText: string;
+  signUpLink: CommonLink;
+  socialMediaLinks: SocialMediaLink[];
+  contact: CommonLink;
+}

package/src/types/iconTypes.ts

@@ -0,0 +1,38 @@
+import { Directions } from '../components/atoms/Icons/Icons.style';
+import { IconLibrary } from '../components/atoms/Icons/SvgIcons';
+
+export type DirectionType = keyof typeof Directions;
+
+export type IconNameType = keyof typeof IconLibrary;
+
+export interface IIconStyledProps {
+  color?: string;
+  direction?: DirectionType;
+}
+
+export interface IconSVGProps {
+  color?: string;
+}
+
+export interface IIconProps {
+  /**
+   * Extra CSS className to add to the element.
+   */
+  className?: string;
+  /**
+   * Colour override - for components it is better to use themes instead.
+   */
+  color?: string;
+  /**
+   * Used for accessibility.
+   */
+  title?: string;
+  /**
+   * Direction to use, 'right' by default.
+   */
+  direction?: DirectionType;
+  /**
+   * Icon to display.
+   */
+  iconName: IconNameType;
+}

package/src/types/image.ts

@@ -0,0 +1,13 @@
+export enum AspectRatio {
+  '1:1' = '1 / 1',
+  '3:4' = '3 / 4',
+  '4:3' = '4 / 3',
+  '16:9' = '16 / 9',
+}
+
+export interface IImageAspectRatioWrapperProps {
+  /**
+   * Aspect ratio of the contained image
+   */
+  aspectRatio?: AspectRatio;
+}

package/src/types/images.d.ts

@@ -0,0 +1 @@
+declare module '*.jpeg';

package/src/types/index.tsx

@@ -0,0 +1,5 @@
+import { FooterData } from './footer';
+import { ThemeType } from './types';
+import { INavigationProps, INavTopProps } from './navigation';
+
+export { FooterData, INavigationProps, INavTopProps, ThemeType };