vcc-ui
Version:
VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.
78 lines • 2.86 kB
JavaScript
import React from "react";
import { storiesOf } from "@storybook/react";
import { select, boolean } from "@storybook/addon-knobs";
import { withDarkBackground } from "../../../stories/decorators";
import { Button } from "./";
import { Block } from "../block";
var variant = {
label: "Variant",
options: {
default: "default",
outline: "outline",
text: "text"
},
default: "default"
};
var arrow = {
label: "Arrow",
options: {
none: null,
right: "right",
left: "left",
up: "up",
down: "down"
},
default: "right"
};
storiesOf("Actions/Button", module).addWithJSX("Primary", function () {
return React.createElement(React.Fragment, null, React.createElement(Button, {
variant: select(variant.label, variant.options, variant.default),
arrow: select(arrow.label, arrow.options, arrow.default),
loading: boolean("Loading", false),
intent: "primary"
}, "default button"));
});
storiesOf("Actions/Button", module).addDecorator(withDarkBackground).addWithJSX("On Dark", function () {
return React.createElement(Button, {
variant: select(variant.label, variant.options, variant.default),
arrow: select(arrow.label, arrow.options, arrow.default),
intent: "primary-light"
}, "Hello World");
});
storiesOf("Actions/Button", module).addWithJSX("Secondary", function () {
return React.createElement(Button, {
variant: select(variant.label, variant.options, variant.default),
arrow: select(arrow.label, arrow.options, arrow.default),
intent: "secondary"
}, "Hello World");
});
storiesOf("Actions/Button", module).addWithJSX("Destructive", function () {
return React.createElement(Button, {
variant: select(variant.label, variant.options, variant.default),
arrow: select(arrow.label, arrow.options, arrow.default),
intent: "destructive"
}, "Destroy Planet");
});
storiesOf("Actions/Button", module).addWithJSX("Link Button", function () {
return React.createElement(React.Fragment, null, React.createElement(Block, {
as: "p"
}, "If ", React.createElement("code", null, "href"), " property is passed the button will be renders as an", " ", React.createElement("code", null, "<a/>"), " element"), React.createElement(Block, {
extend: {
marginBottom: "10px"
}
}, React.createElement(Button, {
arrow: "right",
variant: "outline",
href: "#"
}, "This is a link"), " ", "vs", " ", React.createElement(Button, {
arrow: "right",
variant: "outline"
}, "This is button")), React.createElement(Block, null, React.createElement(Button, {
variant: select(variant.label, variant.options, variant.default),
arrow: select(arrow.label, arrow.options, arrow.default),
intent: "primary"
}, "This is a button"), " ", "vs", " ", React.createElement(Button, {
arrow: "right",
href: "123"
}, "This is a link")));
});