Royal Opera House - chord

Welcome to the Royal Opera House library components @royaloperahouse/chord.

This package is a library of UI components intended to be used in the ROH website.

Install

    npm i --save @royaloperahouse/chord

    yarn add @royaloperahouse/chord

Usage

import {
  Footer, GlobalStyles, ThemeProvider, ThemeType,
} from '@royaloperahouse/chord';

Sample

import {
  Footer, GlobalStyles, ThemeProvider, ThemeType,
} from '@royaloperahouse/chord';


const App = ({ children }: InnerProps): React.ReactElement => (
  <ErrorBoundary>
    <ThemeProvider theme={ThemeType.Core}>
      <GlobalStyles />
      <Wrapper>
        <Header />
        <GlobalStyle />
        <HealthBanner />
        <ErrorBoundary>
          <Content>
            {children}
          </Content>
        </ErrorBoundary>
        <LiveChat />
      </Wrapper>
      <Footer data={footerData} />
    </ThemeProvider>
  </ErrorBoundary>
);

Components

Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, BodyText, Card, Cards, Carousel, CinemaBadge, ContactCard, ControlledDropdown, devices, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Icon, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTags, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, TertiaryButton, TextLink, TextOnly, Tickbox, TitleWithCTA, ThemeProvider, TypeTags, Quote

Types

AspectRatio, CarouselType, Colors, FooterData, INavigationProps, INavTopProps, TickboxMode, ThemeType

Documentation

See Storybook as a reference