optimizely-oui/dist/js/components/SummaryBar/SummaryBar.story.js

Optimizely's Component Library.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _addonKnobs = require("@storybook/addon-knobs");

var _index = _interopRequireDefault(require("./index"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var stories = (0, _react2.storiesOf)("Data Organization|SummaryBar", module);
stories.addDecorator(_addonKnobs.withKnobs).addDecorator(function (story) {
  return _react["default"].createElement("div", {
    id: "root-preview"
  }, story());
});
stories.add("Bar with mixed content", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
    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["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
    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["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
    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
      }
    }, {}]
  }));
});