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.
npm i --save @royaloperahouse/chord
yarn add @royaloperahouse/chord
import {
Footer, GlobalStyles, ThemeProvider, ThemeType,
} from '@royaloperahouse/chord';
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>
);
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
AspectRatio, CarouselType, Colors, FooterData, INavigationProps, INavTopProps, TickboxMode, ThemeType
See Storybook as a reference