optimizely-oui
Version:
Optimizely's Component Library.
55 lines • 2.69 kB
JavaScript
import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { withKnobs, number, boolean as _boolean, text } from "@storybook/addon-knobs";
import PaginationControls from "./index.js";
var totalPages = 43;
var buttonStories = storiesOf("Navigation|PaginationControls/Using Buttons (no href)", module);
buttonStories.addDecorator(withKnobs).addDecorator(function (story) {
return React.createElement("div", {
id: "root-preview"
}, React.createElement("p", {
className: "push-quad--bottom"
}, "Use the ", React.createElement("strong", null, "currentPage"), " knob to see the various states of the PaginationControls."), story());
});
buttonStories.add("Default", function () {
return React.createElement(PaginationControls, {
currentPage: number("currentPage", 1),
totalPages: number("totalPages", totalPages),
goToPage: action("page changed")
});
}).add("Loading", function () {
return React.createElement(PaginationControls, {
currentPage: number("currentPage", 1),
totalPages: number("totalPages", totalPages),
goToPage: action("page changed"),
isLoading: _boolean("isLoading", true)
});
}).add("Customize totalSlots", function () {
return React.createElement(PaginationControls, {
currentPage: number("currentPage", 20),
totalSlots: number("totalSlots ( >= 7)", 11),
totalPages: number("totalPages", totalPages),
goToPage: action("page changed")
});
});
var linkStories = storiesOf("Navigation|PaginationControls/Using Links (with href)", module);
linkStories.addDecorator(withKnobs).addDecorator(function (story) {
return React.createElement("div", {
id: "root-preview"
}, React.createElement("p", {
className: "push-quad--bottom"
}, "Use the ", React.createElement("strong", null, "currentPage"), " knob to see the various states of the PaginationControls."), story());
});
linkStories.add("With an hrefBaseUrl supplied", function () {
return React.createElement("div", null, React.createElement("p", {
className: "push-double--bottom"
}, "When using hrefs to navigate between pages, supply an ", React.createElement("code", null, "hrefBaseUrl"), " that includes the string", " ", React.createElement("code", {
className: " soft-half background--light-blue-100"
}, "[pageNumber]"), ", which will be replaced by the appropriate page number."), React.createElement(PaginationControls, {
currentPage: number("currentPage", 1),
totalPages: number("totalPages", totalPages),
goToPage: action("page changed"),
hrefBaseUrl: text("hrefBaseUrl", "https://www.optimizely.com/projects/page-[pageNumber]")
}));
});