@redocly/portal-legacy-ui/lib/Tiles/WideTile.js

Library of legacy portal UI components

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WideTile = void 0;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const react_router_dom_1 = require("react-router-dom");
const TileText_1 = require("../Tiles/TileText");
const TileHeader_1 = require("../Tiles/TileHeader");
const utils_1 = require("../utils");
const WideTileWrapper = (0, styled_components_1.default)(react_router_dom_1.Link) `
  display: inline-flex;
  flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
  color: var(--text-color-primary);
  border: 1px solid var(--border-color-secondary);
  border-radius: var(--border-radius-lg);
  background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-bg-color)'};
  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
  background-repeat: no-repeat;
  padding: var(--spacing-lg);
  padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
  margin-bottom: var(--spacing-xl);
  box-sizing: border-box;
  position: relative;
  text-decoration: none;
  width: 100%;
  :hover {
    border-color: var(--border-color-primary);
  }
  :before {
    content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
    display: inline-block;
    width: 9px;
    min-height: 18px;
    background-size: 9px 18px;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
  }
  &.external-url::after {
    content: none;
  }

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    width: calc(50% - 2em);
    padding: var(--spacing-xl);
    padding-right: ${({ disableArrow }) => (disableArrow ? 'var(--spacing-xl)' : '64px')};
    flex-direction: row;
    max-width: ${({ maxWidth }) => maxWidth};
  }
`;
const WideTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  text-align: ${({ align }) => align || 'left'};
`;
const WideTileText = (0, styled_components_1.default)(TileText_1.TileText) `
  color: var(--text-color-secondary);
  font-size: 18px;
  text-align: ${({ align }) => align || 'left'};
`;
const WideTileIcon = styled_components_1.default.div `
  margin-bottom: 24px;
  flex-shrink: 0;
  width: 70px;
  img {
    display: block;
    height: auto;
    max-width: 100%;
  }

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    margin-right: 24px;
    margin-bottom: 0;
  }
`;
class WideTile extends react_1.Component {
    render() {
        const { to, header, children, target, disableArrow, textAlign, headerAlign, icon, bgColor, bgImage, color, className, style, maxWidth, } = this.props;
        return (react_1.default.createElement(WideTileWrapper, { to: to || '#', target: target, disableArrow: disableArrow, withIcon: !!icon, bgColor: bgColor, bgImage: bgImage, color: color, className: className, style: style, maxWidth: maxWidth, "data-component-name": "ui/Tiles/WideTile" },
            icon && (react_1.default.createElement(WideTileIcon, null,
                react_1.default.createElement("img", { src: icon, alt: "" }))),
            react_1.default.createElement("div", null,
                header && (react_1.default.createElement(WideTileHeader, { align: textAlign, color: color, "data-cy": `Wide-${header}` }, header)),
                children && (react_1.default.createElement(WideTileText, { align: headerAlign, color: color }, children)))));
    }
}
exports.WideTile = WideTile;
//# sourceMappingURL=WideTile.js.map