@redocly/theme/lib/components/Footer/FooterColumn.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.FooterColumn = FooterColumn;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const FooterItem_1 = require("../../components/Footer/FooterItem");
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
function FooterColumn({ column, className }) {
    const { useTranslate } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    const { items = [] } = column;
    const iconsOnly = items.every((item) => item.label === item.link && (item.icon || item.srcSet));
    const label = translate(column.labelTranslationKey, column.label);
    return (react_1.default.createElement(FooterColumnWrapper, { "data-component-name": "Footer/FooterColumn", className: className },
        !(0, utils_1.isNavLinkItem)(column) && react_1.default.createElement(FooterColumnTitle, null, label),
        react_1.default.createElement(FooterColumnItems, { iconsOnly: (0, utils_1.isNavLinkItem)(column) ? false : iconsOnly }, (0, utils_1.isNavLinkItem)(column) ? (react_1.default.createElement(NonGroupItem, { item: column, iconsOnly: Boolean((column === null || column === void 0 ? void 0 : column.label) === (column === null || column === void 0 ? void 0 : column.link) && ((column === null || column === void 0 ? void 0 : column.icon) || (column === null || column === void 0 ? void 0 : column.srcSet))), key: column.label, className: "nonGroupFooterItem" })) : (items === null || items === void 0 ? void 0 : items.map((columnItem, columnItemIndex) => (react_1.default.createElement(FooterItem_1.FooterItem, { item: columnItem, iconsOnly: iconsOnly, key: columnItemIndex })))))));
}
const FooterColumnWrapper = styled_components_1.default.div `
  display: flex;
  flex: 1;
  position: relative;
  flex-direction: column;
  text-align: center;
  word-break: break-word;
  min-width: var(--footer-column-min-width);
  align-content: center;
  flex-wrap: wrap;
  gap: var(--footer-column-title-gap);

  @media screen and (min-width: ${utils_1.breakpoints.small}) {
    text-align: left;
    &:not(:last-child) {
      &::after {
        content: '';
        position: absolute;
        display: block;
        width: 1px;
        height: 100%;
        background-color: var(--footer-column-divider-color);
        right: calc(0px - var(--footer-column-gap) / 2);
      }
    }
  }
`;
const FooterColumnTitle = styled_components_1.default.div `
  display: inline-block;
  font-weight: var(--footer-title-font-weight);
  font-size: var(--footer-title-font-size);
  margin-top: 0;
  color: var(--footer-title-text-color);
  margin-bottom: 0;

  a {
    text-decoration: none;
    color: var(--footer-title-text-color);

    &:hover {
      color: var(--footer-title-text-color-hover);
    }
  }
`;
const FooterColumnItems = styled_components_1.default.div `
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: ${(props) => (props.iconsOnly ? 'row' : 'column')};

  @media screen and (min-width: ${utils_1.breakpoints.small}) {
    justify-content: flex-start;
  }
`;
const NonGroupItem = (0, styled_components_1.default)(FooterItem_1.FooterItem) `
  margin: 0;
`;
//# sourceMappingURL=FooterColumn.js.map