orcs-design-system/es/components/Tabs/Tabs.stories.js

TeamForm's Design System, aka: ORCS

import React from "react";
import Tabs from ".";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Box from "../Box";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/Tabs",
  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
    bg: "greyLightest",
    p: "xl",
    pb: "300px",
    children: storyFn()
  })],
  component: Tabs
};
const tabsList = [{
  label: "Details",
  path: "/details"
}, {
  label: "Strategy",
  path: "/strategy"
}, {
  label: "Associations",
  path: "/associations"
}, {
  label: "Visualisation",
  path: "/visualisation"
}, {
  label: "Principles",
  path: "/principles"
}, {
  label: "Planner",
  path: "/planner"
}, {
  label: "Forecast",
  path: "/forecast"
}, {
  label: "Team Builder",
  path: "/teambuilder"
}, {
  label: "History",
  path: "/history",
  isVisible: false
}];
export const defaultTabs = () => /*#__PURE__*/_jsxs(BrowserRouter, {
  children: [/*#__PURE__*/_jsx(Tabs, {
    tabsList: tabsList
  }), /*#__PURE__*/_jsx(Switch, {
    children: tabsList.map(tab => /*#__PURE__*/_jsx(Route, {
      path: tab.path,
      children: /*#__PURE__*/_jsxs(Box, {
        bg: "white",
        borderRadius: 2,
        boxBorder: "default",
        p: "l",
        mt: "l",
        children: ["ROUTE RENDERED: ", tab.label]
      })
    }, tab.path))
  })]
});
defaultTabs.storyName = "Default";
const ClickableTabs = () => {
  const [activeTab, setActiveTab] = React.useState("Details");
  const handleTabClick = tabLabel => {
    setActiveTab(tabLabel);
    alert("Clicked on ".concat(tabLabel, " tab!"));
  };
  const clickableTabsList = [{
    label: "Details",
    id: "details",
    className: activeTab === "Details" ? "active" : "",
    onClick: () => handleTabClick("Details")
  }, {
    label: "Strategy",
    id: "strategy",
    className: activeTab === "Strategy" ? "active" : "",
    onClick: () => handleTabClick("Strategy")
  }, {
    label: "Associations",
    id: "associations",
    className: activeTab === "Associations" ? "active" : "",
    onClick: () => handleTabClick("Associations")
  }, {
    label: "Visualisation",
    id: "visualisation",
    className: activeTab === "Visualisation" ? "active" : "",
    onClick: () => handleTabClick("Visualisation")
  }, {
    label: "Principles",
    id: "principles",
    className: activeTab === "Principles" ? "active" : "",
    onClick: () => handleTabClick("Principles")
  }, {
    label: "Planner",
    id: "planner",
    className: activeTab === "Planner" ? "active" : "",
    onClick: () => handleTabClick("Planner")
  }, {
    label: "Forecast",
    id: "forecast",
    className: activeTab === "Forecast" ? "active" : "",
    onClick: () => handleTabClick("Forecast")
  }, {
    label: "Team Builder",
    id: "teambuilder",
    className: activeTab === "Team Builder" ? "active" : "",
    onClick: () => handleTabClick("Team Builder")
  }];
  return /*#__PURE__*/_jsx(BrowserRouter, {
    children: /*#__PURE__*/_jsxs(Box, {
      p: "l",
      children: [/*#__PURE__*/_jsx("h3", {
        children: "Clickable Tabs (including More menu items)"
      }), /*#__PURE__*/_jsx("p", {
        children: "All tabs have onClick handlers. The first tab (Details) is active by default. Check the More menu items too!"
      }), /*#__PURE__*/_jsx(Tabs, {
        tabsList: clickableTabsList
      })]
    })
  });
};
export const clickableTabs = () => /*#__PURE__*/_jsx(ClickableTabs, {});
clickableTabs.storyName = "Clickable Tabs";
defaultTabs.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "defaultTabs"
};
clickableTabs.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "clickableTabs"
};