@redocly/theme
Version:
Shared UI components lib
35 lines (34 loc) • 1.42 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShowMoreButton = ShowMoreButton;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
function ShowMoreButton({ onClick, children, className, isExpanded = false, }) {
return (react_1.default.createElement(BaseShowMoreButton, { type: "button", onClick: onClick, className: className },
children,
react_1.default.createElement(ChevronIcon, { "$isExpanded": isExpanded })));
}
const BaseShowMoreButton = styled_components_1.default.button `
all: unset;
display: flex;
align-items: center;
cursor: pointer;
background: none;
border: none;
gap: var(--catalog-show-more-button-gap);
color: var(--catalog-show-more-button-color);
padding: 0;
margin-top: var(--spacing-unit);
&:hover {
color: var(--catalog-show-more-button-color-hover);
}
`;
const ChevronIcon = (0, styled_components_1.default)(ChevronDownIcon_1.ChevronDownIcon) `
transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0)')};
transition: transform 0.2s ease;
`;
//# sourceMappingURL=ShowMoreButton.js.map