@smart-react-components/ui/components/Alert/AlertElement.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const styled_components_1 = __importDefault(require("styled-components"));
const css_1 = require("../../util/css");
exports.default = (0, styled_components_1.default)(Div_1.default).attrs(({ hasIconLeft, hasIconRight }) => ({
    getAlertSize: (v, t) => `
    font-size: ${t.$.size.alert[v].fontSize};

    .src-alert-content {
      padding: ${t.$.size.alert[v].padding.y} ${t.$.size.alert[v].padding.x};

      ${hasIconLeft
        ? `
          padding-left: ${(0, css_1.toCSSValue)(t.$.size.alert[v].padding.x)(v => v / 2)};
        `
        : ''}

      ${hasIconRight
        ? `
          padding-right: ${(0, css_1.toCSSValue)(t.$.size.alert[v].padding.x)(v => v / 2)};
        `
        : ''}
    }
  `,
}))(({ theme, hasThickBorder, isOutline, isSoft, palette, shape }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
    return `
  border: solid 1px;
  border-radius: ${theme.$.radius.alert[shape]};
  box-sizing: border-box;
  display: flex;
  font-family: ${theme.$.fontFamily.alert};
  word-break: break-word;
  word-wrap: break-word;

  ${isSoft
        ? `
      font-weight: ${theme.$.fontWeight.semibold};
    `
        : ''}

  ${!isOutline
        ? `
      ${!isSoft
            ? `
          background: ${(_b = (_a = theme.$.palette[palette].alert) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : theme.$.palette[palette].main};
          border-color: ${(_d = (_c = theme.$.palette[palette].alert) === null || _c === void 0 ? void 0 : _c.border) !== null && _d !== void 0 ? _d : theme.$.palette[palette].darkest};
          color: ${(_f = (_e = theme.$.palette[palette].alert) === null || _e === void 0 ? void 0 : _e.font) !== null && _f !== void 0 ? _f : theme.$.palette[palette].font};
        `
            : `
          background: ${(_j = (_h = (_g = theme.$.palette[palette].alert) === null || _g === void 0 ? void 0 : _g.soft) === null || _h === void 0 ? void 0 : _h.background) !== null && _j !== void 0 ? _j : theme.$.palette[palette].soft};
          border-color: ${(_m = (_l = (_k = theme.$.palette[palette].alert) === null || _k === void 0 ? void 0 : _k.soft) === null || _l === void 0 ? void 0 : _l.border) !== null && _m !== void 0 ? _m : theme.$.palette[palette].softDynamicest};
          color: ${(_q = (_p = (_o = theme.$.palette[palette].alert) === null || _o === void 0 ? void 0 : _o.soft) === null || _p === void 0 ? void 0 : _p.font) !== null && _q !== void 0 ? _q : theme.$.palette[palette].softFont};
        `}
    `
        : `
      ${!isSoft
            ? `
          border-color: ${(_t = (_s = (_r = theme.$.palette[palette].alert) === null || _r === void 0 ? void 0 : _r.outline) === null || _s === void 0 ? void 0 : _s.border) !== null && _t !== void 0 ? _t : theme.$.palette[palette].main};
          color: ${(_w = (_v = (_u = theme.$.palette[palette].alert) === null || _u === void 0 ? void 0 : _u.outline) === null || _v === void 0 ? void 0 : _v.font) !== null && _w !== void 0 ? _w : theme.$.palette[palette].main};
        `
            : `
          border-color: ${(_0 = (_z = (_y = (_x = theme.$.palette[palette].alert) === null || _x === void 0 ? void 0 : _x.soft) === null || _y === void 0 ? void 0 : _y.outline) === null || _z === void 0 ? void 0 : _z.border) !== null && _0 !== void 0 ? _0 : theme.$.palette[palette].soft};
          color: ${(_4 = (_3 = (_2 = (_1 = theme.$.palette[palette].alert) === null || _1 === void 0 ? void 0 : _1.soft) === null || _2 === void 0 ? void 0 : _2.outline) === null || _3 === void 0 ? void 0 : _3.font) !== null && _4 !== void 0 ? _4 : theme.$.palette[palette].soft};
        `}
    `}

  ${hasThickBorder && `
    border-left-width: 10px;
  `}

  .src-alert-content > {
    header, h1, h2, h3, h4, h5, h6, p, hr {
      margin-bottom: ${theme.$.length['3']};
      margin-top: 0;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  a {
    color: inherit;
    font-weight: ${!isSoft ? theme.$.fontWeight.semibold : theme.$.fontWeight.bold};
  
    &:hover {
      text-decoration: underline;
    }
  }

  hr {
    background: ${!isSoft ? ((_6 = (_5 = theme.$.palette[palette].alert) === null || _5 === void 0 ? void 0 : _5.separatorLine) !== null && _6 !== void 0 ? _6 : theme.$.palette[palette].darkest) : ((_9 = (_8 = (_7 = theme.$.palette[palette].alert) === null || _7 === void 0 ? void 0 : _7.soft) === null || _8 === void 0 ? void 0 : _8.separatorLine) !== null && _9 !== void 0 ? _9 : theme.$.palette[palette].softDynamicest)};
    border: 0;
    height: 1px;
    width: 100%;
  }
`;
});