@redocly/theme/lib/components/PageNavigation/NavigationButton.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.NavigationButton = NavigationButton;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
const Button_1 = require("../../components/Button/Button");
function NavigationButton({ label, link, text, translationKey, position, icon = position === 'left' ? react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) : react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, null), className, }) {
    return (react_1.default.createElement(NavigationButtonWrapper, { "data-component-name": "PageNavigation/NavigationButton", "data-translation-key": translationKey, position: position },
        react_1.default.createElement(PageNavigationTitle, null, label),
        react_1.default.createElement(Button_1.Button, { to: link, extraClass: className, variant: "link", icon: icon, iconPosition: position }, text)));
}
const NavigationButtonWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  width: var(--page-navigation-button-width);
  text-align: ${({ position }) => position};
  padding: var(--page-navigation-button-padding);
  gap: var(--page-navigation-button-gap);
  border: var(--page-navigation-button-border);
  border-radius: var(--page-navigation-button-border-radius);
  min-width: var(--page-navigation-button-min-width);

  &:hover {
    border: var(--page-navigation-button-border-hover);
  }
`;
const PageNavigationTitle = styled_components_1.default.p `
  font-size: var(--page-navigation-button-title-font-size);
  font-weight: var(--page-navigation-button-title-font-weight);
  line-height: var(--page-navigation-button-title-line-height);
  color: var(--page-navigation-button-title-color);
  text-wrap: wrap;
  margin: 0;
`;
//# sourceMappingURL=NavigationButton.js.map