@cimpress/react-components/dist/src/Carousel/CarouselControl.js

React components to support the MCP styleguide

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const css_1 = require("@emotion/css");
const ArrowAlt_1 = require("../accordion/ArrowAlt");
const internal_1 = require("../internal");
const cvar_1 = __importDefault(require("../theme/cvar"));
const carouselControlCss = (0, css_1.css) `
  background: 0 0;
  position: relative;
  width: 20px;
  color: ${(0, cvar_1.default)('color-interactive')};
  text-shadow: none;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  top: 0;
  bottom: 0;
  left: 0;
  font-size: 20px;
  text-align: center;
  opacity: 0.5;
`;
const srOnlyCss = (0, css_1.css) `
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
`;
const CarouselControl = ({ disabled, onClick, direction, large, hintText }) => (react_1.default.createElement(internal_1.BlockButton, { className: carouselControlCss, style: disabled ? { visibility: 'hidden' } : {}, onClick: !disabled ? onClick : undefined },
    react_1.default.createElement(ArrowAlt_1.ArrowAlt, { direction: direction, size: large ? 16 : 14, "aria-hidden": "true", color: (0, cvar_1.default)('color-icon-interactive'), outlineWidth: "0" }),
    react_1.default.createElement("span", { className: srOnlyCss }, hintText)));
exports.default = CarouselControl;
//# sourceMappingURL=CarouselControl.js.map