@thecb/components 3.1.4-beta.0 → 3.2.0

package/src/components/molecules/tab-sidebar/TabSidebar.stories.js

@@ -0,0 +1,59 @@
+import React, { Fragment } from "react";
+import { boolean, object } from "@storybook/addon-knobs";
+import TabSidebar from "./TabSidebar";
+
+import page from "../../../../.storybook/page";
+
+import * as Icons from "../../atoms/icons";
+
+const groupId = "props";
+
+const defaultLinks = [
+  {
+    route: "/profile/accounts",
+    text: "Accounts",
+    active: true,
+    icon: "AccountsIconSmall"
+  },
+  {
+    route: "/profile/settings",
+    text: "Settings",
+    active: false,
+    icon: "SettingsIconSmall"
+  },
+  {
+    route: "/profile/properties",
+    text: "Properties",
+    active: false,
+    icon: "PropertiesIconSmall"
+  }
+];
+
+const isRouteActive = route => location.pathname.includes(route);
+
+// should TabSidebar be updated to just take the name of an icon per tab? instead of a full component
+const getIcon = link => {
+  const Icon = Icons[link.icon];
+  return Icon ? (
+    <Icon variant={isRouteActive(link) ? "primary" : "secondary"} />
+  ) : (
+    <Fragment />
+  );
+};
+
+export const tabSidebar = () => {
+  let links = object("links", defaultLinks, groupId);
+
+  return (
+    <TabSidebar
+      links={links.map(link => ({ ...link, icon: getIcon(link) }))}
+      isMobile={boolean("isMobile", false, groupId)}
+    />
+  );
+};
+
+const story = page({
+  title: "Components|Molecules/TabSidebar",
+  Component: TabSidebar
+});
+export default story;

package/src/components/molecules/terms-and-conditions/TermsAndConditions.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+
+import TermsAndConditions from "./TermsAndConditions";
+import page from "../../../../.storybook/page";
+import { noop } from "../../../util/general";
+
+const groupId = "props";
+
+export const termsAndConditions = () => (
+  <TermsAndConditions
+    onCheck={noop}
+    isChecked={boolean("isChecked", false, groupId)}
+    html={text("html", "terms and conditions summary", groupId)}
+    terms={text("terms", "terms and conditions modal text", groupId)}
+    error={boolean("error", false, groupId)}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/TermsAndConditions",
+  Component: TermsAndConditions
+});
+export default story;

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.stories.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+
+import TermsAndConditionsModal from "./TermsAndConditionsModal";
+import page from "../../../../.storybook/page";
+
+const variants = {
+  default: "default",
+  footer: "footer",
+  None: undefined
+};
+const groupId = "props";
+
+export const termsAndConditionsModal = () => (
+  <TermsAndConditionsModal
+    link={text("text", "Show modal", groupId)}
+    title={text("title", "Title", groupId)}
+    isOpen={boolean("isOpen", false, groupId)}
+    // toggleOpen={setShowTerms}
+    // toggleAccepted={toggleTermsAccepted}
+    acceptText={text("acceptText", "Accept", groupId)}
+    terms={text("terms", "terms and conditions", groupId)}
+    variant={select("variants", variants, "default", groupId)}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/TermsAndConditionsModal",
+  Component: TermsAndConditionsModal
+});
+export default story;

package/src/components/molecules/workflow-tile/WorkflowTile.stories.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+
+import WorkflowTile from "./WorkflowTile";
+import page from "../../../../.storybook/page";
+
+const groupId = "props";
+
+export const workflowTile = () => (
+  <WorkflowTile
+    workflowName={text("workflowName", "Test Workflow", groupId)}
+    workflowDescription={text(
+      "workflowDescription",
+      "Workflow Description",
+      groupId
+    )}
+    slug={text("slug", "slug", groupId)}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/WorkflowTile",
+  Component: WorkflowTile
+});
+export default story;