@redocly/portal-legacy-ui/lib/Tiles/ThinTile.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.ThinTile = void 0;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const Flex_1 = require("../Flex");
const TileText_1 = require("../Tiles/TileText");
const TileHeader_1 = require("../Tiles/TileHeader");
const Link_1 = require("../Link");
const utils_1 = require("../utils");
const ThinTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-lg);
  box-sizing: border-box;
  padding: var(--spacing-lg);
  margin-bottom: 20px;
  text-decoration: none;
  width: 100%;
  color: var(--text-color-primary);
  border: 1px solid var(--border-color-secondary);
  background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-bg-color)'};
  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
  background-repeat: no-repeat;

  :hover {
    border-color: var(--border-color-primary);
  }

  @media screen and (min-width: ${utils_1.breakpoints.small}) {
    width: calc(50% - 20px);
    margin-right: 10px;
    margin-left: 10px;
  }

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    width: 250px;
  }

  @media screen and (min-width: ${utils_1.breakpoints.large}) {
    width: 280px;
  }

  &.external-url {
    :after {
      display: none;
    }
  }
`;
const ThinTileIcon = styled_components_1.default.img `
  width: 90px;

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    width: 80px;
  }
`;
const ThinTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  text-align: ${({ align }) => align || 'center'};
`;
const ThinTileText = (0, styled_components_1.default)(TileText_1.TileText) `
  color: var(--text-color-secondary);
  font-size: 18px;
  line-height: 1.5;
  flex-shrink: 0;
  min-height: 3em;
  text-align: ${({ align }) => align || 'center'};
  ${({ icon }) => icon
    ? `
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 8;
  `
    : ''};
  @media screen and (min-width: ${utils_1.breakpoints.small}) {
    min-height: 6em;
  }

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    min-height: 4.5em;
  }
`;
class ThinTile extends react_1.Component {
    render() {
        const { header, icon, children, to, target, headerAlign, textAlign, color, className, style } = this.props;
        return (react_1.default.createElement(ThinTileWrapper, { to: to, target: target, color: color, className: className, style: style, "data-component-name": "ui/Tiles/ThinTile" },
            (icon || header) && (react_1.default.createElement(Flex_1.Flex, { flexDirection: "column" },
                icon && (react_1.default.createElement(Flex_1.Flex, { flexShrink: 0, height: { xs: 'auto', small: '100px', medium: '110px' }, alignItems: "center", justifyContent: "center", mb: "25px" },
                    react_1.default.createElement(ThinTileIcon, { src: icon }))),
                header && (react_1.default.createElement(ThinTileHeader, { align: headerAlign, color: color, "data-cy": `Thin-${header}` }, header)))),
            children && (react_1.default.createElement(ThinTileText, { icon: icon, align: textAlign, color: color }, children))));
    }
}
exports.ThinTile = ThinTile;
//# sourceMappingURL=ThinTile.js.map