@redocly/theme/lib/markdoc/components/Cards/Card.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Card = Card;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRightIcon");
const CardImage_1 = require("../../../markdoc/components/Cards/CardImage");
const CardIcon_1 = require("../../../markdoc/components/Cards/CardIcon");
const Link_1 = require("../../../components/Link/Link");
function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant, align = 'start', to, children, }) {
    const titleNoSpaces = title === null || title === void 0 ? void 0 : title.replace(/\s+/g, '-').toLowerCase();
    const cardTitleId = `card-title-${titleNoSpaces}`;
    const justifyContent = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
    const alignItems = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
    const textAlign = align === 'center' ? 'center' : align === 'end' ? 'right' : 'left';
    iconVariant = iconVariant !== null && iconVariant !== void 0 ? iconVariant : (variant === 'ghost' ? 'filled' : 'ghost');
    return (react_1.default.createElement(CardWrapper, { as: to ? Link_1.Link : 'div', to: to, "aria-labelledby": cardTitleId, "$variant": variant, "$layout": layout, "$isCardLink": !!to },
        react_1.default.createElement(react_1.default.Fragment, null,
            image ? react_1.default.createElement(CardImage_1.CardImage, { src: image, alt: title, position: imagePosition }) : null,
            react_1.default.createElement(CardContentWrapper, { "$layout": layout, "$alignItems": alignItems, "$textAlign": textAlign, "$hasImage": image !== undefined },
                icon && (react_1.default.createElement(CardIcon_1.CardIcon, { variant: iconVariant, src: icon, rawContent: iconRawContent, position: iconPosition })),
                react_1.default.createElement(ContentWrapper, null,
                    react_1.default.createElement(Title, { id: cardTitleId, "$isCardLink": !!to, "$justifyContent": justifyContent },
                        title,
                        !!to && react_1.default.createElement(CardLinkIcon, null)),
                    react_1.default.createElement(Body, { "$lineClamp": lineClamp }, children))))));
}
const CardContentWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: ${({ $layout }) => ($layout === 'horizontal' ? 'row' : 'column')};
  gap: var(--card-icon-gap);
  align-items: ${({ $alignItems }) => $alignItems};
  text-align: ${({ $textAlign }) => $textAlign};
  flex-grow: 1;
  padding: var(--card-padding);
  height: ${({ $hasImage }) => ($hasImage ? 'auto' : '100%')};
`;
const ContentWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  gap: var(--card-content-gap);
`;
const Title = styled_components_1.default.h3 `
  margin: var(--card-title-margin);
  font-weight: var(--card-title-font-weight);
  color: var(--card-title-text-color);
  display: flex;
  align-items: center;
  justify-content: ${({ $justifyContent }) => $justifyContent};
  width: 100%;
`;
const CardLinkIcon = (0, styled_components_1.default)(ChevronRightIcon_1.ChevronRightIcon) `
  width: var(--card-link-icon-width);
  height: var(--card-link-icon-height);
  margin-left: var(--spacing-xxs);
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.3s;
`;
const Body = styled_components_1.default.div `
  color: var(--card-text-color);
  font-size: var(--card-body-font-size);
  line-height: var(--card-body-line-height);

  ${({ $lineClamp }) => $lineClamp &&
    `
  display: -webkit-box;
  -webkit-line-clamp: ${$lineClamp};
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;`}

  > *:first-child {
    margin-top: 0;
  }

  > *:last-child {
    margin-bottom: 0;
  }

  /* Icon link styles */
  & a {
    display: inline-flex;
    align-items: center;
    line-height: 1;

    & svg {
      width: 1.2em;
      height: 1.2em;
      margin-right: 0.25em;
      vertical-align: middle;

      & g {
        fill: var(--link-color-primary);
      }
    }
  }

  & a:visited > span > svg > g {
    fill: var(--link-color-visited);
  }
`;
const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $variant }) => ({
    className: getCardWrapperClass($isCardLink, $variant),
})) `
  display: flex;
  flex-direction: ${({ $layout }) => ($layout === 'horizontal' ? 'row' : 'column')};
  width: 100%;
  height: 100%;
  border-radius: var(--card-border-radius);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  position: relative;
  --md-paragraph-margin: 0;
  --link-decoration-hover: none;

  background-color: var(--card-bg-color);
  border-width: var(--card-border-width);
  border-style: var(--card-border-style);
  border-color: var(--card-border-color);
  box-shadow: var(--card-box-shadow);

  && > img {
    ${({ $layout }) => $layout === 'horizontal' &&
    `
      max-width: 33%;
      width: auto;
      height: 100%;
      object-fit: cover;
    `}
  }

  &.card-link {
    cursor: var(--card-link-cursor);

    &:hover,
    &:focus-within {
      background-color: var(--card-bg-color-hover);
      border-color: var(--card-border-color-hover);
      box-shadow: var(--card-box-shadow-hover);

      svg {
        opacity: 1;
      }
    }
  }

  && ul {
    list-style: none;
    padding-left: 0;
    margin: var(--spacing-xs) 0;
  }
`;
const getCardWrapperClass = ($isCardLink, $variant) => {
    let classes = [];
    classes.push(`card-variant-${$variant}`);
    if ($isCardLink) {
        classes.push('card-link');
    }
    return classes.join(' ');
};
//# sourceMappingURL=Card.js.map