orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
213 lines • 6.36 kB
JavaScript
/* eslint-disable react/prop-types */
import React from "react";
import SideNav from "./index";
import { BrowserRouter as Router, Route, Link, useLocation, matchPath, Switch, Redirect, useParams } from "react-router-dom";
import { H5, P } from "../Typography";
import Box from "../Box";
import { far } from "@fortawesome/free-regular-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
import Flex from "../Flex";
import Spacer from "../Spacer/index";
import Card from "../Card/index";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
library.add(far);
export default {
title: "Components/SideNav",
decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
minHeight: "450px",
children: storyFn()
})],
component: SideNav
};
const makeLinkComponent = path => _ref => {
let {
children,
item
} = _ref;
return /*#__PURE__*/_jsx(Link, {
to: path,
"aria-label": item.name,
children: children
});
};
const makePanelComponent = (name, children) => () => {
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(H5, {
fontWeight: "bold",
mb: "r",
children: name
}), /*#__PURE__*/_jsxs(P, {
children: [name, " content"]
}), children]
});
};
const Teams = () => {
const params = useParams();
return /*#__PURE__*/_jsxs("div", {
children: ["Team ", params.teamId, " route"]
});
};
const PageCard = _ref2 => {
let {
children
} = _ref2;
return /*#__PURE__*/_jsx(Spacer, {
px: "r",
children: /*#__PURE__*/_jsx(Card, {
children: children
})
});
};
const SideBarWithConfig = () => {
const location = useLocation();
const items = [{
iconName: "building",
name: "Home",
component: makeLinkComponent("/"),
actionType: "link",
isActive: matchPath(location.pathname, {
path: "/",
exact: true
})
}, {
iconName: "user",
name: "My profile",
component: makeLinkComponent("/profile"),
actionType: "link",
isActive: matchPath(location.pathname, {
path: "/profile"
})
}, {
iconName: "id-card",
name: "Search Page",
component: makeLinkComponent("/search"),
actionType: "link",
isActive: matchPath(location.pathname, {
path: "/search"
})
}, {
iconName: "snowflake",
name: "Filter",
hide: !matchPath(location.pathname, {
path: "/search"
}),
// Specify hide if you want to hide this item
component: makePanelComponent("Filter"),
actionType: "component",
// Use 'component' for a component
pageSpecific: matchPath(location.pathname, {
path: "/search"
}),
isExpandedByDefault: true
}, {
iconName: "sun",
name: "People",
hide: !matchPath(location.pathname, {
path: "/profile"
}),
// Specify hide if you want to hide this item
component: makePanelComponent("People"),
actionType: "component",
// Use 'component' for a component
pageSpecific: matchPath(location.pathname, {
path: "/profile"
}),
isExpandedByDefault: true
}, {
iconName: "bell",
name: "Notifications",
badgeNumber: "3",
// Specify a badgeNumber if you want to have a count on this item
component: makePanelComponent("Notifications"),
actionType: "component" // Use 'component' for a component
}, {
iconName: "chart-bar",
name: "Browse teams",
large: true,
// Specify large if you want the expanded sidebar to be wider
component: makePanelComponent("BrowseTeams", /*#__PURE__*/_jsx(Flex, {
flexDirection: "column",
children: ["Team 1", "Team 2", "Team 3"].map(team => /*#__PURE__*/_jsx(Link, {
to: `/teams/${team}`,
children: team
}, team))
})),
actionType: "component" // Use 'component' for a component
}, {
iconName: "cog",
name: "Settings",
hide: true,
// Specify hide if you want to hide this item
bottomAligned: true,
component: makePanelComponent("Settings"),
actionType: "component" // Use 'component' for a component
}, {
iconName: "calendar-alt",
name: "Calendar",
pageSpecific: true,
// Specify pageSpecific if you want this item to appear below a divider line separating common nav items from page/route specific items
component: makePanelComponent("Calendar"),
actionType: "component" // Use 'component' for a component
}, {
iconName: "star",
name: "Announcements",
badgeDot: true,
// Specify if you want to have a blue notification dot on this item
bottomAligned: true,
// Specify bottomAligned if this item should appear at bottom of SideNav
component: makePanelComponent("Announcements"),
actionType: "component" // Use 'component' for a component
}, {
iconName: "times-circle",
name: "Logout",
bottomAligned: true,
// Specify bottomAligned if this item should appear at bottom of SideNav
onClick: () => alert("Logout function"),
// Specify the onClick function for the button
actionType: "button" // Use 'button' for a button with onClick event
}
// Add more items as needed...
];
return /*#__PURE__*/_jsxs(Flex, {
children: [/*#__PURE__*/_jsx(SideNav, {
items: items,
sideNavHeight: "500px"
}), /*#__PURE__*/_jsxs(Switch, {
children: [/*#__PURE__*/_jsx(Route, {
exact: true,
path: "/",
children: /*#__PURE__*/_jsx(PageCard, {
children: /*#__PURE__*/_jsx("div", {
children: "Home"
})
})
}), /*#__PURE__*/_jsx(Route, {
path: "/profile",
children: /*#__PURE__*/_jsx(PageCard, {
children: /*#__PURE__*/_jsx("div", {
children: "Profile route"
})
})
}), /*#__PURE__*/_jsx(Route, {
path: "/teams/:teamId",
children: /*#__PURE__*/_jsx(PageCard, {
children: /*#__PURE__*/_jsx(Teams, {})
})
}), /*#__PURE__*/_jsx(Redirect, {
from: "/iframe.html",
to: "/"
})]
})]
});
};
export const SidebarNavigation = () => {
return /*#__PURE__*/_jsx(Router, {
children: /*#__PURE__*/_jsx(SideBarWithConfig, {})
});
};
SidebarNavigation.storyName = "Sidebar Navigation";
SidebarNavigation.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "SidebarNavigation"
};