optimizely-oui/module/js/components/ManagerSideNav/ManagerSideNav.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 ManagerSideNav from "./index.js";
import Switch from "../Switch/index.js";
import Link from "../Link/index.js";
var stories = storiesOf("Experimental|ManagerSideNav", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, story());
});
stories.add("Default", function () {
  return React.createElement(ManagerSideNav, null, React.createElement(ManagerSideNav.Header, {
    hasBackLink: true,
    backLinkHref: "#features",
    backLinkText: "Features",
    backLinkOnClick: action("Back link was clicked"),
    usesMonospaceStyling: true,
    projectName: "CTP Bank - Full Stack",
    title: "recurring_deposit",
    friendlyTitle: "Recurring Deposit"
  }, React.createElement(ManagerSideNav.HeaderDetails, {
    items: [{
      label: "Created by",
      value: "Sophia Hernandez"
    }]
  })), React.createElement(ManagerSideNav.NavList, {
    label: "Rules"
  }, React.createElement(ManagerSideNav.NavItem, {
    isActive: true,
    testSection: "prod-item",
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("Dev item was clicked"),
      href: "#"
    }, React.createElement("p", {
      className: "flush line--tight"
    }, "Production"), React.createElement("p", {
      className: "micro muted flush line--tight"
    }, "Primary environment")),
    rightContent: React.createElement(Switch, {
      ariaLabel: "Turn feature on in Production",
      elementId: "prod-toggle",
      checked: true,
      onClick: action("Toggled Prod Switch")
    })
  }), React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    testSection: "dev-item",
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("Dev item was clicked"),
      href: "#dev"
    }, React.createElement("p", {
      className: "flush line--tight"
    }, "Development"), React.createElement("p", {
      className: "micro muted flush line--tight"
    }, "Environment")),
    rightContent: React.createElement(Switch, {
      ariaLabel: "Turn feature on in Development",
      elementId: "dev-toggle",
      checked: false,
      onClick: action("Toggled Development Switch")
    })
  }), React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    testSection: "dev-item",
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("Long item was clicked"),
      href: "#long"
    }, React.createElement("p", {
      className: "flush line--tight"
    }, "Another environment with a very long name"), React.createElement("p", {
      className: "micro muted flush line--tight"
    }, "Environment")),
    rightContent: React.createElement(Switch, {
      ariaLabel: "Turn feature on in Another Environment",
      elementId: "long-toggle",
      checked: false,
      onClick: action("Toggled Long environment Switch")
    })
  })), React.createElement(ManagerSideNav.NavList, {
    label: "Flag Setup"
  }, React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("Default variables item was clicked"),
      href: "#default-variables"
    }, "Default Variables")
  }), React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("Variations item was clicked"),
      href: "#variations"
    }, "Variations")
  }), React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("History item was clicked"),
      href: "#history"
    }, "History")
  }), React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("Settings item was clicked"),
      href: "#settings"
    }, "Settings")
  })));
}).add("Simple (no sections)", function () {
  return React.createElement(ManagerSideNav, null, React.createElement(ManagerSideNav.Header, {
    hasBackLink: true,
    backLinkHref: "#features",
    backLinkText: "Features",
    backLinkOnClick: action("Back link was clicked"),
    usesMonospaceStyling: true,
    projectName: "CTP Bank - Full Stack",
    title: "recurring_deposit",
    friendlyTitle: "Recurring Deposit"
  }, React.createElement(ManagerSideNav.HeaderDetails, {
    items: [{
      label: "Created by",
      value: "Sophia Hernandez"
    }]
  })), React.createElement(ManagerSideNav.NavList, null, React.createElement(ManagerSideNav.NavItem, {
    isActive: true,
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("Default variables item was clicked"),
      href: "#default-variables"
    }, "Default Variables")
  }), React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("Variations item was clicked"),
      href: "#variations"
    }, "Variations")
  }), React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("History item was clicked"),
      href: "#history"
    }, "History")
  }), React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("Settings item was clicked"),
      href: "#settings"
    }, "Settings")
  })));
}).add("With a custom link (like a React Router Link)", function () {
  return React.createElement(React.Fragment, null, React.createElement("p", null, "Using the classes", React.createElement("em", null, React.createElement("code", null, " oui-manager-side-nav__custom-link ")), "and", React.createElement("code", null, React.createElement("em", null, " oui-manager-side-nav__custom-link--active")), ", you can use a custom link for the nav item content and get consistent styling"), React.createElement(ManagerSideNav, null, React.createElement(ManagerSideNav.Header, {
    hasBackLink: true,
    backLinkHref: "#features",
    backLinkText: "Features",
    backLinkOnClick: action("Back link was clicked"),
    usesMonospaceStyling: true,
    projectName: "CTP Bank - Full Stack",
    title: "recurring_deposit",
    friendlyTitle: "Recurring Deposit"
  }, React.createElement(ManagerSideNav.HeaderDetails, {
    items: [{
      label: "Created by",
      value: "Sophia Hernandez"
    }]
  })), React.createElement(ManagerSideNav.NavList, null, React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("Default variables item was clicked"),
      href: "#default-variables"
    }, "Default Variables")
  }), React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    leftContent: React.createElement("a", {
      href: "www.google.com",
      className: "oui-manager-side-nav__custom-link"
    }, "I am a custom link")
  }), React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    leftContent: React.createElement("a", {
      href: "www.google.com",
      className: "oui-manager-side-nav__custom-link oui-manager-side-nav__custom-link--active"
    }, "I am an active custom link")
  }), React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("History item was clicked"),
      href: "#history"
    }, "History")
  }), React.createElement(ManagerSideNav.NavItem, {
    isActive: false,
    leftContent: React.createElement(Link, {
      isFullWidth: true,
      onClick: action("Settings item was clicked"),
      href: "#settings"
    }, "Settings")
  }))));
});