@onwave/ui/dist/components/Swiper/index.stories.js

onwave ui library

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import styled from "@emotion/styled";
import React from "react";
import { Swiper } from ".";
import { Color, typography } from "../../core";
import { Slide } from "../Slide";
export default {
    title: "components/Swiper",
    component: Swiper,
};
export var BasicUsage = function () { return (React.createElement(Swiper, null,
    React.createElement(Box, { backgroundColor: Color.Red900 }, "1"),
    React.createElement(Box, { backgroundColor: Color.Orange900 }, "2"),
    React.createElement(Box, { backgroundColor: Color.Green500 }, "3"),
    React.createElement(Box, { backgroundColor: Color.Blue900 }, "4"),
    React.createElement(Box, { backgroundColor: Color.Gray900 }, "5"))); };
export var LoopMode = function () { return (React.createElement(Swiper, { loop: true },
    React.createElement(Box, { backgroundColor: Color.Red900 }, "1"),
    React.createElement(Box, { backgroundColor: Color.Orange900 }, "2"),
    React.createElement(Box, { backgroundColor: Color.Green500 }, "3"),
    React.createElement(Box, { backgroundColor: Color.Blue900 }, "4"),
    React.createElement(Box, { backgroundColor: Color.Gray900 }, "5"))); };
export var AutoPlay = function () { return (React.createElement(Swiper, { loop: true, autoplay: true, delay: 2000 },
    React.createElement(Box, { backgroundColor: Color.Red900 }, "1"),
    React.createElement(Box, { backgroundColor: Color.Orange900 }, "2"),
    React.createElement(Box, { backgroundColor: Color.Green500 }, "3"),
    React.createElement(Box, { backgroundColor: Color.Blue900 }, "4"),
    React.createElement(Box, { backgroundColor: Color.Gray900 }, "5"))); };
export var MultipleSlides = function () { return (React.createElement(Swiper, { loop: true, slidesPerView: 2 },
    React.createElement(Box, { backgroundColor: Color.Red900 }, "1"),
    React.createElement(Box, { backgroundColor: Color.Orange900 }, "2"),
    React.createElement(Box, { backgroundColor: Color.Green500 }, "3"),
    React.createElement(Box, { backgroundColor: Color.Blue900 }, "4"),
    React.createElement(Box, { backgroundColor: Color.Gray900 }, "5"))); };
export var Spacing = function () { return (React.createElement(Swiper, { loop: true, slidesPerView: 3, spacing: 12 },
    React.createElement(Box, { backgroundColor: Color.Red900 }, "1"),
    React.createElement(Box, { backgroundColor: Color.Orange900 }, "2"),
    React.createElement(Box, { backgroundColor: Color.Green500 }, "3"),
    React.createElement(Box, { backgroundColor: Color.Blue900 }, "4"),
    React.createElement(Box, { backgroundColor: Color.Gray900 }, "5"))); };
export var FreeMode = function () { return (React.createElement(Swiper, { loop: true, slidesPerView: 3, spacing: 12, mode: "free" },
    React.createElement(Box, { backgroundColor: Color.Red900 }, "1"),
    React.createElement(Box, { backgroundColor: Color.Orange900 }, "2"),
    React.createElement(Box, { backgroundColor: Color.Green500 }, "3"),
    React.createElement(Box, { backgroundColor: Color.Blue900 }, "4"),
    React.createElement(Box, { backgroundColor: Color.Gray900 }, "5"))); };
export var CenteredSlides1 = function () { return (React.createElement(Swiper, { slidesPerView: 2, spacing: 12, centered: true },
    React.createElement(Box, { backgroundColor: Color.Red900 }, "1"),
    React.createElement(Box, { backgroundColor: Color.Orange900 }, "2"),
    React.createElement(Box, { backgroundColor: Color.Green500 }, "3"),
    React.createElement(Box, { backgroundColor: Color.Blue900 }, "4"),
    React.createElement(Box, { backgroundColor: Color.Gray900 }, "5"))); };
export var CenteredSlides2 = function () { return (
/* const WithPaddingSwiper = styled(Swiper)`
    padding: 0 32px;
`; */
React.createElement(WithPaddingSwiper, { spacing: 12 },
    React.createElement(Box, { backgroundColor: Color.Red900 }, "1"),
    React.createElement(Box, { backgroundColor: Color.Orange900 }, "2"),
    React.createElement(Box, { backgroundColor: Color.Green500 }, "3"),
    React.createElement(Box, { backgroundColor: Color.Blue900 }, "4"),
    React.createElement(Box, { backgroundColor: Color.Gray900 }, "5"))); };
export var BreakPoints = function () { return (React.createElement(Swiper, { loop: true, spacing: 12, breakpoints: {
        "(min-width: 1024px) and (max-width: 1440px)": {
            slidesPerView: 2,
        },
        "(max-width: 1023px)": {
            slidesPerView: 3,
        },
    } },
    React.createElement(Box, { backgroundColor: Color.Red900 }, "1"),
    React.createElement(Box, { backgroundColor: Color.Orange900 }, "2"),
    React.createElement(Box, { backgroundColor: Color.Green500 }, "3"),
    React.createElement(Box, { backgroundColor: Color.Blue900 }, "4"),
    React.createElement(Box, { backgroundColor: Color.Gray900 }, "5"))); };
var Box = styled(Slide)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: white;\n  height: 180px;\n  background-color: ", ";\n"], ["\n  ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: white;\n  height: 180px;\n  background-color: ", ";\n"])), typography.heading2, function (props) { return props.backgroundColor; });
var WithPaddingSwiper = styled(Swiper)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 32px;\n"], ["\n  padding: 0 32px;\n"])));
var templateObject_1, templateObject_2;
//# sourceMappingURL=index.stories.js.map