@cimpress/react-components/dist/docs/components/carousel/index.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 react_components_1 = require("@cimpress/react-components");
const carousel_jsx_1 = __importDefault(require("!raw-loader!./carousel.jsx"));
const carousel_jsx_2 = __importDefault(require("./carousel.jsx"));
const TabbedComponentDoc_1 = __importDefault(require("../../shared/TabbedComponentDoc"));
const CarouselDocs = () => {
    const propInfos = [
        {
            name: 'minimal',
            type: 'boolean',
            default: 'false',
            description: 'Whether to show the carousel in minimal mode, with a numerical indicator, or in full mode, with thumbnail images.',
        },
        {
            name: 'size',
            type: "one of 'xs', 's', 'm', 'l', 'xl'",
            default: 'm',
            description: 'Size for the carousel. If carousel is in minimal mode, this size will be ignored in favor of pxSize.',
        },
        {
            name: 'pxSize',
            type: 'number',
            default: '200',
            description: 'Size for the main carousel image, in pixels.  Only used when the carousel is in minimal mode.',
        },
        {
            name: 'loading',
            type: 'boolean',
            default: '',
            description: 'If true, the carousel will display a loading spinner.',
        },
        {
            name: 'onCarouselClick',
            type: 'function',
            default: '',
            description: (react_1.default.createElement("div", null,
                react_1.default.createElement("p", null, "Callback function invoked when the large carousel image is clicked."),
                react_1.default.createElement("p", null,
                    "Signature: ",
                    react_1.default.createElement("code", null,
                        "function(currentSlide: number) ",
                        '=>',
                        " void")))),
        },
        {
            name: 'children',
            type: 'node',
            default: '',
            description: 'Images to use as slides for the carousel.',
        },
        {
            name: 'currentSlide',
            type: 'number',
            default: '0',
            description: 'Use this to force the carousel to navigate to a particular slide.',
        },
        {
            name: 'fallbackPreview',
            type: 'node',
            default: 'Image SVG and caption "No image available"',
            description: 'Component to display when the carousel has no images.',
        },
        {
            name: 'landscape',
            type: 'boolean',
            default: 'false',
            description: `Displays the carousel in landscape mode,
      with the thumbnails vertically stacked to the left of the carousel.
      Not available in minimal mode.`,
        },
        {
            name: 'onSlideChanged',
            type: 'function',
            default: '',
            description: (react_1.default.createElement("div", null,
                react_1.default.createElement("p", null, "Callback function invoked whenever the carousel navigates to a new slide."),
                react_1.default.createElement("p", null,
                    "Signature: ",
                    react_1.default.createElement("code", null,
                        "function(currentSlide: number) ",
                        '=>',
                        " void")))),
        },
        {
            name: 'hideIndicators',
            type: 'boolean',
            default: 'false',
            description: 'Hides navigation and thumbnails for the carousel.',
        },
        {
            name: 'showZoomOverlay',
            type: 'boolean',
            default: 'false',
            description: 'Shows a "zoom in" overlay on hover.',
        },
        {
            name: 'zoomOverlayContent',
            type: 'node',
            default: '',
            description: 'Content to replace the default text for the zoom overlay.',
        },
    ];
    return (react_1.default.createElement(TabbedComponentDoc_1.default, { name: "Carousel", propInfos: propInfos },
        react_1.default.createElement(carousel_jsx_2.default, null),
        react_1.default.createElement(react_components_1.CodeExample, { code: carousel_jsx_1.default })));
};
exports.default = CarouselDocs;
//# sourceMappingURL=index.js.map