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";
defaultTabs.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "defaultTabs"
};