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

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

import { __rest } from '../../../../../node_modules/tslib/tslib.es6.js';
import { createElement } from 'react';
import styled from 'styled-components';
import Alert from '../../../../../node_modules/@reach/alert/es/index.js';
import { CloseIcon } from '../../../../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((_a) => {
    var rest = __rest(_a, ["alertStyle"]);
    return createElement(Alert, 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 = __rest(_a, ["children", "onClose"]);
    return (createElement(StyleAlert, Object.assign({}, props),
        children,
        onClose && (createElement("button", { onClick: onClose },
            createElement(CloseIcon, { height: "20", width: "20", title: "Close" })))));
};
MessageAlert.defaultProps = {
    alertStyle: 'success',
    type: 'polite'
};

export { MessageAlert };