@royaloperahouse/chord 0.1.0 → 0.3.0

package/src/styles/themes.ts

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

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

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

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

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

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

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

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

package/src/types/index.tsx

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