jobiqo-cl/lib/src/components/02-atoms/02-messages/01-alert/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var tslib_es6 = require('../../../../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index = require('../../../../../node_modules/@reach/alert/es/index.js');
var Close = require('../../../../icons/Close.js');

/**
 * @file index.tsx
 *
 * @fileoverview An alert component that focus on accessibility.
 */
// This looks weird but necessary until a solution is found on https://github.com/styled-components/styled-components/pull/2093
// @ts-ignore: This is an anti patttern. remove when fixed in styled components.
const StyleAlert = styled__default((_a) => {
    var rest = tslib_es6.__rest(_a, ["alertStyle"]);
    return React.createElement(index.default, Object.assign({}, rest));
}) `
  &[data-reach-alert] {
    position: relative;
    background: ${props => props.theme.alert.background[props.alertStyle]};
    border-width: ${props => props.theme.alert.borderWidth};
    border-style: ${props => props.theme.alert.borderStyle};
    border-color: ${props => props.theme.alert.borderColor[props.alertStyle]};
    padding: ${props => props.theme.alert.padding};
    border-radius: ${props => props.theme.alert.borderRadius};
    color: ${props => props.theme.alert.color[props.alertStyle]};

    a {
      color: ${props => props.theme.alert.links.color[props.alertStyle]};
      text-decoration: ${props => props.theme.alert.links.textDecoration};
      font-weight: ${props => props.theme.alert.links.fontWeight};
    }

    button {
      z-index: 1;
      padding: 0;
      cursor: pointer;
      position: ${props => props.theme.alert.closeButton.position};
      right: ${props => props.theme.alert.closeButton.right};
      top: ${props => props.theme.alert.closeButton.top};
      color: ${props => props.theme.alert.color[props.alertStyle]};
    }
  }
`;
/**
 * The message alert is a component that can be rendered on the page and when rendered will warn the screen reader that something happened. It has different levels
 * of severity according to ARIA specifications. It should be used to prompt the user with information at real time. It uses aria live attributes to display this information
 * to screen readers acccordingly. Refer to [The aria documentation](https://www.w3.org/TR/wai-aria-practices-1.1/#alert) for more information
 * on accessible alerts.
 */
const MessageAlert = (_a) => {
    var { children, onClose } = _a, props = tslib_es6.__rest(_a, ["children", "onClose"]);
    return (React.createElement(StyleAlert, Object.assign({}, props),
        children,
        onClose && (React.createElement("button", { onClick: onClose },
            React.createElement(Close.CloseIcon, { height: "20", width: "20", title: "Close" })))));
};
MessageAlert.defaultProps = {
    alertStyle: 'success',
    type: 'polite'
};

exports.MessageAlert = MessageAlert;