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

TeamForm's Design System, aka: ORCS

import React from "react";
import Box from "../Box";
import Breadcrumbs from ".";
import { MemoryRouter, Route, Switch } from "react-router-dom";
import Icon from "../Icon";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/Breadcrumbs",
  component: Breadcrumbs,
  decorators: [storyFn => /*#__PURE__*/_jsx(MemoryRouter, {
    initialEntries: ["/nebula-ui"],
    children: storyFn()
  })]
};
const config = [{
  id: "SI001",
  label: "Space Industries",
  to: "/space-industries"
}, {
  id: "SI002",
  label: "Software & Systems",
  to: "/software-systems"
}, {
  id: "SI003",
  label: "Platform",
  to: "/platform"
}, {
  id: "SI004",
  label: "In-Flight Software",
  to: "/in-flight-software"
}, {
  id: "SI005",
  label: "Mission Interface Systems",
  to: "/mission-interface-systems"
}, {
  id: "SI006",
  label: "Nebula UI"
}];
const routes = [{
  path: "/space-industries",
  label: "Space Industries"
}, {
  path: "/software-systems",
  label: "Software & Systems"
}, {
  path: "/platform",
  label: "Platform"
}, {
  path: "/in-flight-software",
  label: "In-Flight Software"
}, {
  path: "/mission-interface-systems",
  label: "Mission Interface Systems"
}, {
  path: "/nebula-ui",
  label: "Nebula UI"
}];
export const Default = () => /*#__PURE__*/_jsxs(Box, {
  p: "l",
  children: [/*#__PURE__*/_jsx(Breadcrumbs, {
    config: config
  }), /*#__PURE__*/_jsxs(Switch, {
    children: [routes.map(route => /*#__PURE__*/_jsx(Route, {
      path: route.path,
      exact: true,
      children: /*#__PURE__*/_jsxs(Box, {
        mt: "l",
        p: "l",
        bg: "greyLighter",
        children: ["ROUTE RENDERED: ", route.label]
      })
    }, route.path)), /*#__PURE__*/_jsx(Route, {
      path: "/",
      children: /*#__PURE__*/_jsx(Box, {
        mt: "xl",
        p: "l",
        bg: "greyLighter",
        children: "ROUTE RENDERED: Nebula UI"
      })
    })]
  })]
});
Default.storyName = "Default (grey text)";
export const WhiteVariant = () => /*#__PURE__*/_jsxs(Box, {
  bg: "greyDarkest",
  p: "l",
  children: [/*#__PURE__*/_jsx(Breadcrumbs, {
    config: config,
    variant: "white"
  }), /*#__PURE__*/_jsxs(Switch, {
    children: [routes.map(route => /*#__PURE__*/_jsx(Route, {
      path: route.path,
      exact: true,
      children: /*#__PURE__*/_jsxs(Box, {
        mt: "l",
        p: "l",
        bg: "white",
        color: "greyDarker",
        children: ["ROUTE RENDERED: ", route.label]
      })
    }, route.path)), /*#__PURE__*/_jsx(Route, {
      path: "/",
      children: /*#__PURE__*/_jsx(Box, {
        mt: "l",
        p: "l",
        bg: "white",
        color: "greyDarker",
        children: "ROUTE RENDERED: Nebula UI"
      })
    })]
  })]
});
WhiteVariant.storyName = "White variant (on colored background)";
export const IconTooltip = () => /*#__PURE__*/_jsxs(Box, {
  p: "l",
  children: [/*#__PURE__*/_jsx(Breadcrumbs, {
    config: config,
    showAsIconTooltip: /*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "layer-group"],
      color: "greyDarker",
      title: "Show breadcrumbs"
    })
  }), /*#__PURE__*/_jsxs(Switch, {
    children: [routes.map(route => /*#__PURE__*/_jsx(Route, {
      path: route.path,
      exact: true,
      children: /*#__PURE__*/_jsxs(Box, {
        mt: "l",
        p: "l",
        bg: "greyLighter",
        children: ["ROUTE RENDERED: ", route.label]
      })
    }, route.path)), /*#__PURE__*/_jsx(Route, {
      path: "/",
      children: /*#__PURE__*/_jsx(Box, {
        mt: "xl",
        p: "l",
        bg: "greyLighter",
        children: "ROUTE RENDERED: Nebula UI"
      })
    })]
  })]
});
IconTooltip.storyName = "Icon Tooltip (popover) variant";
Default.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Default"
};
WhiteVariant.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "WhiteVariant"
};
IconTooltip.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "IconTooltip"
};