@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 Button_1 = require("../../components/Button/Button");
const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
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(NavigationButtonLabel, null, text),
        react_1.default.createElement(StyledNavigationButton, { size: "large", to: link, extraClass: className, variant: "link", icon: icon, iconPosition: position }, label)));
}
const NavigationButtonWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  text-align: ${({ position }) => position};
`;
const StyledNavigationButton = (0, styled_components_1.default)(Button_1.Button) `
  text-wrap: wrap;
  padding-left: 0;
  padding-right: 0;
`;
const NavigationButtonLabel = styled_components_1.default.span `
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
`;
//# sourceMappingURL=NavigationButton.js.map