ndla-ui
Main UI component library for NDLA.
Installation
$ yarn add --save ndla-ui
$ npm i --save ndla-ui
Optional dependencies
The following dependencies are optional, but some components may be dependent on one or more of them.
react-collapse
react-height
react-motion
react-router
ndla-article-scripts
ndla-button
ndla-licenses
ndla-icons
ndla-tabs
ndla-util
See: package.json for version requirements
N.B! All optional dependencies are required if you use import {...} from 'ndla-ui'
Usage
Styling
/* Your project's main .scss import file */; // with webpack and sass-loader ; // direct reference
Simplified example
import Hero OneColumn Article Breadcrumb from 'ndla-ui'; const MyPage = topicPath topic article return <div> <Hero> <OneColumn ="narrow"> <div ="c-hero__content"> <section> <Breadcrumb = /> <h1 ="c-hero__title">topicname</h1> </section> </div> </OneColumn> </Hero> <div ="u-bg-lightblue"> <OneColumn ="narrow"> <Article = /> </OneColumn> </div> </div> ;;
Only import specific components
import Hero from 'ndla-ui/es/hero/Hero'; const MyPage = return <Hero> <MyAwesomeComponent /> </Hero> ;;