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 */
@import '~ndla-ui/scss/main'; // with webpack and sass-loader
@import '../path/to/node_modules/ndla-ui/scss/main'; // direct reference

Simplified example

import { Hero, OneColumn, Article, Breadcrumb } from 'ndla-ui';

const MyPage = ({ topicPath, topic, article }) => {
  return (
    <div>
      <Hero>
        <OneColumn cssModifier="narrow">
          <div className="c-hero__content">
            <section>
              <Breadcrumb topicPath={topicPath} />
              <h1 className="c-hero__title">{topic.name}</h1>
            </section>
          </div>
        </OneColumn>
      </Hero>
      <div className="u-bg-lightblue">
        <OneColumn cssModifier="narrow">
          <Article article={article} />
        </OneColumn>
      </div>
    </div>
  );
};

Only import specific components

import Hero from 'ndla-ui/es/hero/Hero';

const MyPage = () => {
  return (
    <Hero>
      <MyAwesomeComponent />
    </Hero>
  );
};