feat: add breadcrumb bars in storybook

Author: arianber7

src/components/AppBar/AppBar.js

@@ -5,12 +5,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, AppBar as MuiAppBar, Toolbar } from '@mui/material';
 import { StatusBar } from '../';
-import { useCurrentSimulationRunner } from '../../state/runner/hooks';
 import { ThemeSwitch } from './components';
 
-export const AppBar = ({ children }) => {
-  const currentScenario = useCurrentSimulationRunner();
-
+export const AppBar = ({ children, currentScenario }) => {
   return (
     <MuiAppBar
       position="sticky"
@@ -44,4 +41,5 @@ export const AppBar = ({ children }) => {
 };
 AppBar.propTypes = {
   children: PropTypes.node,
+  currentScenario: PropTypes.object,
 };

src/layouts/TabLayout/TabLayout.js

@@ -52,7 +52,7 @@ export const TabLayout = () => {
   );
 
   const BreadcrumbBar = () => (
-    <AppBar>
+    <AppBar currentScenario={currentScenario}>
       {currentWorkspace.data ? (
         <Fragment>
           <MuiLink underline="hover" color="inherit" href={`/${currentWorkspace?.data?.id}`}>

src/stories/molecules/BreadcrumbBar/BreadcrumbBar.stories.js

@@ -0,0 +1,66 @@
+/* eslint-disable react/prop-types */
+import { CircleArrowRight } from 'lucide-react';
+import React, { Fragment } from 'react';
+import { Link as MuiLink, Typography } from '@mui/material';
+import { AppBar } from '../../../components/AppBar';
+
+export default {
+  title: 'Molecule/Breadcrumb Bar',
+  component: AppBar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const MockBreadcrumb = ({ workspaceName, scenarioName }) => (
+  <Fragment>
+    <MuiLink underline="hover" color="inherit" href="#">
+      <Typography fontSize={14}>{workspaceName}</Typography>
+    </MuiLink>
+
+    {scenarioName && (
+      <Fragment>
+        <CircleArrowRight size={14} />
+        <MuiLink underline="hover" color="inherit" href="#">
+          <Typography fontSize={14}>Scenarios</Typography>
+        </MuiLink>
+      </Fragment>
+    )}
+
+    {scenarioName && (
+      <>
+        <CircleArrowRight size={14} />
+        <MuiLink underline="hover" color="inherit" href="#">
+          <Typography fontSize={14}>{scenarioName}</Typography>
+        </MuiLink>
+      </>
+    )}
+  </Fragment>
+);
+
+const Template = (args) => (
+  <AppBar currentScenario={args.currentScenario}>
+    <MockBreadcrumb {...args} />
+  </AppBar>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  workspaceName: 'Logistics Optimization',
+  scenarioName: 'Baseline Scenario',
+  currentScenario: { data: { name: 'Baseline Scenario' } },
+};
+
+export const WorkspaceOnly = Template.bind({});
+WorkspaceOnly.args = {
+  workspaceName: 'Asset Aip Workspaces',
+  scenarioName: null,
+  currentScenario: null,
+};
+
+export const LongNames = Template.bind({});
+LongNames.args = {
+  workspaceName: 'Very Long Workspace Name To Test UI Layout',
+  scenarioName: 'Extremely Detailed Scenario',
+  currentScenario: { data: { name: 'Extremely Detailed Scenario Title Mock For Visual Testing Purposes' } },
+};