ndla-ui/es/Subject/Subject.js

UI component library for NDLA.

import React from 'react';
import PropTypes from 'prop-types';
import BEMHelper from 'react-bem-helper';

import SectionHeading from '../SectionHeading';

var classes = BEMHelper('c-subject-content');

export var SubjectContent = function SubjectContent(_ref) {
  var children = _ref.children,
      breadcrumb = _ref.breadcrumb,
      twoColumns = _ref.twoColumns;
  return React.createElement(
    'div',
    classes(),
    React.createElement(
      'div',
      classes('breadcrumb'),
      breadcrumb
    ),
    React.createElement(
      'div',
      classes('content', { twoColumns: twoColumns }),
      children
    )
  );
};

SubjectContent.propTypes = {
  children: PropTypes.node.isRequired,
  breadcrumb: PropTypes.node.isRequired,
  subjects: PropTypes.node,
  twoColumns: PropTypes.bool
};

var secondaryContentClass = BEMHelper('c-subject-secondary-content');

export var SubjectSecondaryContent = function SubjectSecondaryContent(_ref2) {
  var children = _ref2.children;
  return React.createElement(
    'div',
    secondaryContentClass(),
    children
  );
};

SubjectSecondaryContent.propTypes = {
  children: PropTypes.node.isRequired
};

var childContentClasses = BEMHelper('c-subject-child-content');

export var SubjectChildContent = function SubjectChildContent(_ref3) {
  var children = _ref3.children;
  return React.createElement(
    'div',
    childContentClasses(),
    children
  );
};

SubjectChildContent.propTypes = {
  children: PropTypes.node.isRequired
};

var topicClasses = BEMHelper('c-subject-topics');

export var SubjectTopics = function SubjectTopics(_ref4) {
  var messages = _ref4.messages,
      children = _ref4.children;
  return React.createElement(
    'section',
    topicClasses(),
    React.createElement(
      'header',
      topicClasses('header'),
      React.createElement(
        'h1',
        topicClasses('heading'),
        messages.heading
      )
    ),
    React.createElement(
      'div',
      topicClasses('content'),
      children
    )
  );
};

SubjectTopics.propTypes = {
  messages: PropTypes.shape({
    heading: PropTypes.string.isRequired
  }),
  children: PropTypes.node.isRequired
};

var sidebarClasses = BEMHelper('c-subject-sidebar-wrapper');

export var SubjectSidebarWrapper = function SubjectSidebarWrapper(_ref5) {
  var children = _ref5.children;
  return React.createElement(
    'div',
    sidebarClasses(),
    children
  );
};

SubjectSidebarWrapper.propTypes = {
  children: PropTypes.node.isRequired
};

var subjectFlexWrapperClasses = BEMHelper('c-subject-flex');

export var SubjectFlexWrapper = function SubjectFlexWrapper(_ref6) {
  var children = _ref6.children,
      noMargin = _ref6.noMargin;
  return React.createElement(
    'div',
    subjectFlexWrapperClasses('', { noMargin: noMargin }),
    children
  );
};

SubjectFlexWrapper.propTypes = {
  children: PropTypes.node.isRequired,
  noMargin: PropTypes.bool
};

export var SubjectFlexChild = function SubjectFlexChild(_ref7) {
  var children = _ref7.children;
  return React.createElement(
    'div',
    { className: 'c-subject-flex__child' },
    children
  );
};

SubjectFlexChild.propTypes = {
  children: PropTypes.node.isRequired
};

export var SubjectSectionTitle = function SubjectSectionTitle(_ref8) {
  var children = _ref8.children,
      className = _ref8.className;
  return React.createElement(
    SectionHeading,
    { large: true, className: 'c-subject-section-title ' + className },
    children
  );
};

SubjectSectionTitle.propTypes = {
  children: PropTypes.string.isRequired,
  className: PropTypes.string
};

SubjectSectionTitle.defaultProps = {
  className: null
};