optimizely-oui
Version:
Optimizely's Component Library.
119 lines • 3.26 kB
JavaScript
import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import SummaryBar from "./index";
var stories = storiesOf("Data Organization|SummaryBar", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
return React.createElement("div", {
id: "root-preview"
}, story());
});
stories.add("Bar with mixed content", function () {
return React.createElement("div", null, React.createElement(SummaryBar, {
title: "Summary",
extraInfo: "Updated March 2, 2020 at 3:00pm (America/Los Angeles)",
columns: [{
header: "Overall Conversion Rate",
bodyContent: {
value: "10,795",
color: "red",
isNumber: true
}
}, {
header: "Rate",
bodyContent: {
value: "53.97%",
isNumber: true
}
}, {
header: "Overall Conversion Rate",
bodyContent: {
value: "+33pp +6p",
color: "green",
isNumber: true
}
}, {
header: "Rate",
bodyContent: {
value: "Increase in unique conversions per visitor for Register Button event",
isNumber: false
}
}],
testSection: "summary-bar"
}));
});
stories.add("Summary bar with tooltips", function () {
return React.createElement("div", null, React.createElement(SummaryBar, {
title: "Summary",
extraInfo: "Updated March 2, 2020 at 3:00pm (America/Los Angeles)",
columns: [{
header: "Overall Conversion Rate",
bodyContent: {
value: "10,795",
color: "red",
isNumber: true,
helpTooltip: "This is a tooltip"
},
headerHelpTooltip: "Tootlip text here"
}, {
header: "Rate",
bodyContent: {
value: "53.97%",
isNumber: true
},
headerHelpTooltip: "Tootlip text here"
}, {
header: "Overall Conversion Rate",
bodyContent: {
value: "+33pp +6p",
color: "green",
isNumber: true,
helpTooltip: "This is a tooltip"
},
headerHelpTooltip: "Tootlip text here"
}, {
header: "Rate",
bodyContent: {
value: "Increase in unique conversions per visitor for Register Button event",
isNumber: false,
helpTooltip: "This is a tooltip"
},
headerHelpTooltip: "Tootlip text here"
}],
testSection: "summary-bar"
}));
});
stories.add("Bar with empty col", function () {
return React.createElement("div", null, React.createElement(SummaryBar, {
title: "Summary",
extraInfo: "Updated March 2, 2020 at 3:00pm (America/Los Angeles)",
testSection: "summary-bar",
columns: [{
header: "Overall Conversion Rate",
bodyContent: {
value: "10,795",
color: "red",
isNumber: true
}
}, {
header: "Rate",
bodyContent: {
value: "53.97%",
isNumber: true
}
}, {
header: "Overall Conversion Rate",
bodyContent: {
value: "+33pp +6p",
color: "green",
isNumber: true
}
}, {
header: "Rate",
bodyContent: {
value: "Increase in unique conversions per visitor for Register Button event",
isNumber: false
}
}, {}]
}));
});