ndla-ui/es/ErrorMessage/ErrorMessage.js

UI component library for NDLA.

import { css as _css } from 'emotion';
/**
 * Copyright (c) 2016-present, NDLA.
 *
 * This source code is licensed under the GPLv3 license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'react-emotion';
import { colors, spacing, mq } from 'ndla-core';
import SafeLink from '../common/SafeLink';

var StyledErrorMessage = /*#__PURE__*/styled('article', {
  target: 'e1h45nf50'
})('text-align:center;a{', colors.brand.primary, ';}h1{margin-top:0;}');

var Illustration = /*#__PURE__*/styled('img', {
  target: 'e1h45nf51'
})(mq.tablet({
  marginBottom: spacing.normal,
  marginTop: [null, spacing.large]
}));

var Description = /*#__PURE__*/styled('p', {
  target: 'e1h45nf52'
})(mq.tablet({
  marginBottom: [spacing.normal, spacing.large]
}));

export var ErrorMessage = function ErrorMessage(_ref) {
  var children = _ref.children,
      messages = _ref.messages,
      illustration = _ref.illustration;
  return React.createElement(
    StyledErrorMessage,
    null,
    React.createElement(Illustration, { src: illustration.url, alt: illustration.altText }),
    React.createElement(
      'h1',
      null,
      messages.title
    ),
    React.createElement(
      Description,
      null,
      messages.description
    ),
    messages.linksTitle && React.createElement(
      'h2',
      null,
      messages.linksTitle
    ),
    messages.back && typeof window !== 'undefined' && window.history.length > 1 && React.createElement(
      SafeLink,
      {
        to: '/#' + encodeURI(messages.back),
        onClick: function onClick() {
          return window.history.back();
        } },
      messages.back
    ),
    messages.goToFrontPage && React.createElement(
      'div',
      {
        className: _css({ marginTop: spacing.xsmall })
      },
      React.createElement(
        SafeLink,
        { to: '/' },
        messages.goToFrontPage
      )
    ),
    children
  );
};

ErrorMessage.propTypes = {
  children: PropTypes.node,
  messages: PropTypes.shape({
    title: PropTypes.string.isRequired,
    description: PropTypes.string.isRequired,
    goToFrontPage: PropTypes.string,
    linksTitle: PropTypes.string,
    back: PropTypes.string
  }),
  illustration: PropTypes.shape({
    url: PropTypes.string.isRequired,
    altText: PropTypes.string.isRequired
  })
};

export default ErrorMessage;