@redocly/theme/lib/components/Footer/FooterItem.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.FooterItem = FooterItem;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const hooks_1 = require("../../core/hooks");
const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
const Link_1 = require("../../components/Link/Link");
const Image_1 = require("../../components/Image/Image");
const utils_1 = require("../../core/utils");
function FooterItem({ item, iconsOnly, className }) {
    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
    const otelTelemetry = useOtelTelemetry();
    const { translate } = useTranslate();
    if (item.type === 'error') {
        return null;
    }
    const hasIcon = Boolean(item.icon || item.srcSet);
    const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
    return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", iconsOnly: iconsOnly, item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => otelTelemetry.send({ type: 'footer_item.clicked' }), "data-translation-key": item.labelTranslationKey },
        hasIcon ? (react_1.default.createElement(FooterLinkIcon, { iconsOnly: iconsOnly },
            react_1.default.createElement(Image_1.Image, { src: item.icon, srcSet: item.srcSet }))) : null,
        !iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null,
        item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "10px" }) : null))));
}
const FooterSeparator = styled_components_1.default.div `
  text-transform: uppercase;
  font-size: var(--footer-separator-item-font-size);
  margin: var(--footer-separator-item-margin);
  opacity: var(--footer-separator-item-opacity);
`;
const FooterLinkIcon = styled_components_1.default.div `
  display: inline-flex;
  width: var(--footer-item-icon-width);
  height: var(--footer-item-icon-height);
  margin-right: ${({ iconsOnly }) => (iconsOnly ? '0' : 'var(--footer-item-icon-margin-right)')};
  vertical-align: middle;
  border: 1px solid var(--footer-item-icon-border-color);
  border-radius: var(--footer-item-icon-border-radius);
  padding: var(--footer-item-icon-padding);
`;
const FooterLink = (0, styled_components_1.default)(Link_1.Link) `
  color: var(--footer-link-text-color);
  text-decoration: none;
  text-align: center;
  &:hover {
    color: var(--footer-link-color-hover);
  }

  @media screen and (min-width: ${utils_1.breakpoints.small}) {
    text-align: left;
  }
`;
const FooterItemWrapper = styled_components_1.default.div `
  margin: ${({ iconsOnly, item }) => iconsOnly
    ? '0 var(--footer-item-icon-margin-right) 0 0;'
    : item.type === 'link'
        ? 'var(--footer-link-padding-vertical) var(--footer-link-padding-horizontal);'
        : '0'};
`;
//# sourceMappingURL=FooterItem.js.map