@clearchannel/iris

Iris

A Clear Channel Outdoor display component library

Example NextJS Primitive Component Usage

To install

npm install @clearchannel/iris

// pages/_app.jsx
import { CCOThemeProvider } from '@clearchannel/iris'

const NextApp = ({ Component, pageProps }) => {
  <CCOThemeProvider>
    <Component {...pageProps} />
  </CCOThemeProvider>
}
export default NextApp

// pages/index.jsx
import Button from '@material-ui/core/Button'

const Index = () => <Button>
  Index just renders a static button with this
  awful message, how boring!
</Button>

export default Index

Storybook

Use Storybook to preview components and use hot reloading as you work.

Public: https://clearchanneloutdoor.github.io/iris/

Local:

npm run storybook

Overview

Iris comes in two types of components:

• primitive
• composed

Generally, primitive components will exist as direct implementations of Material UI components, with a dependency on Iris's CCOThemeProvider to provide extended theme properties.

Composed components (todo: make composed components) are housed in this package as individual exports. Create a composed component to produce reusable UI widgets that depend on multiple MUI components, state, or specific business logic.

Further Reading:

• Figma specs: https://www.figma.com/file/W5m7rPF4nNOHvAWbQv0Yx0/Iris-UI-Toolkit?node-id=2383%3A0 Note: you may need to request access to this document.
• Iris Confluence documentation: https://clearchanneloutdoor.atlassian.net/wiki/spaces/DESIGN/pages/2118549513/Iris
• https://github.com/ClearChannelOutdoor/iris