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.
63 lines • 2.03 kB
JavaScript
import React from "react";
import { storiesOf } from "@storybook/react";
import { withBackgrounds } from "@storybook/addon-backgrounds";
import { withKnobs, object } from "@storybook/addon-knobs";
import { Link } from "../../index";
import { render } from "../../../stories/render";
import { ThemeProvider } from "../../theme-provider";
var listOfBackgrounds = [{
name: "black",
value: "#111111",
default: true
}, {
name: "blue",
value: "#3b5998"
}];
var listOfLightBackgrounds = [{
name: "white",
value: "#fff",
default: true
}, {
name: "gray",
value: "#ccc"
}];
storiesOf("Link", module).addDecorator(withBackgrounds(listOfLightBackgrounds)).addDecorator(render).addWithJSX("with text", function () {
return React.createElement(Link, {
href: "http://www.volvocars.com/"
}, "This is a link component");
}).addWithJSX("with arrow right", function () {
return React.createElement(Link, {
href: "http://www.volvocars.com/",
arrow: "right"
}, "This is a link component");
}).addWithJSX("with arrow left", function () {
return React.createElement(Link, {
href: "http://www.volvocars.com/",
arrow: "left"
}, "This is a link component");
}).addWithJSX("with theme", function () {
var themeValue = {
link: {
color: "#007bcd"
}
};
var themePropsConfig = object("", themeValue);
return React.createElement(ThemeProvider, {
theme: themePropsConfig
}, React.createElement(Link, {
href: "http://www.volvocars.com/",
arrow: "right"
}, "This is a link component"));
});
storiesOf("Link", module).addDecorator(withBackgrounds(listOfBackgrounds)).addDecorator(render).addWithJSX("on dark with text", function () {
return React.createElement(Link, {
href: "http://www.volvocars.com/",
intent: "primary-light"
}, "This is a link component");
}).addWithJSX("on dark with arrow", function () {
return React.createElement(Link, {
href: "http://www.volvocars.com/",
intent: "primary-light",
arrow: "up"
}, "This is a link component");
});