optimizely-oui/module/js/components/Toolbar/Toolbar.story.js

Optimizely's Component Library.

import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import Toolbar from "./index.js";
import Dropdown from "../Dropdown/index.js";
import Button from "../Button/index.js";
var envData = [{
  title: "Development"
}, {
  title: "Staging"
}, {
  title: "Production"
}];
var statusData = [{
  title: "Running"
}, {
  title: "Active"
}, {
  title: "Paused"
}];
var stories = storiesOf("Experimental|Toolbar", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview",
    style: {
      height: "300px"
    }
  }, story());
});
stories.add("Default", function () {
  return React.createElement("div", null, React.createElement(Toolbar, null, React.createElement(Toolbar.Left, null, React.createElement(Toolbar.Link, {
    href: "www.google.com",
    label: "Link"
  })), React.createElement(Toolbar.Right, null, React.createElement(Toolbar.Link, {
    isDisabled: true,
    href: "www.google.com",
    label: "Disabled Link"
  }), React.createElement(Toolbar.Link, {
    href: "www.google.com",
    label: "Enabled Link"
  }), React.createElement(Toolbar.Button, {
    onClick: action("Saying hi!"),
    label: "Button"
  }))));
}).add("Without style options (no border, shadow, and/or padding)", function () {
  return React.createElement("div", null, React.createElement("p", {
    className: "style--italic"
  }, "With style set to \"bare\" = no box-shadow or bottom border"), React.createElement(Toolbar, {
    toolbarStyle: ["bare"]
  }, React.createElement(Toolbar.Left, null, React.createElement(Toolbar.Link, {
    href: "www.google.com",
    label: "Link"
  })), React.createElement(Toolbar.Right, null, React.createElement(Toolbar.Link, {
    isDisabled: true,
    href: "www.google.com",
    label: "Disabled Link"
  }), React.createElement(Toolbar.Link, {
    href: "www.google.com",
    label: "Enabled Link"
  }), React.createElement(Toolbar.Button, {
    onClick: action("Saying hi!"),
    label: "Button"
  }))), React.createElement("p", {
    className: "push-double--top style--italic"
  }, "With style set to \"bare\" and \"tight\" = no extra padding around the toolbar"), React.createElement(Toolbar, {
    toolbarStyle: ["bare", "tight"]
  }, React.createElement(Toolbar.Left, null, React.createElement(Toolbar.Link, {
    href: "www.google.com",
    label: "Link"
  })), React.createElement(Toolbar.Right, null, React.createElement(Toolbar.Link, {
    isDisabled: true,
    href: "www.google.com",
    label: "Disabled Link"
  }), React.createElement(Toolbar.Link, {
    href: "www.google.com",
    label: "Enabled Link"
  }), React.createElement(Toolbar.Button, {
    onClick: action("Saying hi!"),
    label: "Button"
  }))));
}).add("With Dropdowns and styled Buttons", function () {
  return React.createElement("div", null, React.createElement(Toolbar, {
    toolbarStyle: ["bare"]
  }, React.createElement(Toolbar.Left, null, React.createElement(Dropdown, {
    buttonContent: {
      label: "Environment",
      content: "Production"
    },
    style: "plain",
    arrowIcon: "down"
  }, React.createElement(Dropdown.Contents, null, envData.map(function (item, index) {
    return React.createElement(Dropdown.ListItem, {
      key: index,
      role: "option"
    }, React.createElement(Dropdown.BlockLink, {
      value: item.title,
      onClick: action("click on complex item")
    }, React.createElement(Dropdown.BlockLinkText, {
      text: item.title
    }), React.createElement(Dropdown.BlockLinkSecondaryText, {
      secondaryText: item.description
    })));
  }))), React.createElement(Dropdown, {
    buttonContent: {
      label: "Status",
      content: "Active"
    },
    style: "plain",
    arrowIcon: "down"
  }, React.createElement(Dropdown.Contents, null, envData.map(function (item, index) {
    return React.createElement(Dropdown.ListItem, {
      key: index,
      role: "option"
    }, React.createElement(Dropdown.BlockLink, {
      value: item.title,
      onClick: action("click on complex item")
    }, React.createElement(Dropdown.BlockLinkText, {
      text: item.title
    }), React.createElement(Dropdown.BlockLinkSecondaryText, {
      secondaryText: item.description
    })));
  }))), React.createElement(Dropdown, {
    buttonContent: {
      label: "Rule Type",
      content: "Any"
    },
    style: "plain",
    arrowIcon: "down"
  }, React.createElement(Dropdown.Contents, null, statusData.map(function (item, index) {
    return React.createElement(Dropdown.ListItem, {
      key: index,
      role: "option"
    }, React.createElement(Dropdown.BlockLink, {
      value: item.title,
      onClick: action("click on complex item")
    }, React.createElement(Dropdown.BlockLinkText, {
      text: item.title
    })));
  })))), React.createElement(Toolbar.Right, null, React.createElement(Button, {
    style: "highlight",
    onClick: action("Saying hi!")
  }, "Create New"))));
});