orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
892 lines (884 loc) • 31.8 kB
JavaScript
/* eslint-disable react/prop-types */
import React, { useMemo } from "react";
import { action } from "@storybook/addon-actions";
import SideNavV2, { SideNavStateProvider } from "./index";
import { BrowserRouter as Router, Route, Link, useLocation, matchPath, Switch, Redirect, useParams } from "react-router-dom";
import { H5, P, H6 } from "../Typography";
import Box from "../Box";
import { far } from "@fortawesome/free-regular-svg-icons";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
import Flex from "../Flex";
import Spacer from "../Spacer/index";
import Card from "../Card/index";
import RenderCurrentViewSection from "./components/RenderCurrentViewSection";
import Badge from "../Badge";
import Popover from "../Popover";
import { AvatarLink } from "./components/BaseSection";
import Icon from "../Icon";
import Button from "../Button";
import Avatar from "../Avatar";
import styled from "styled-components";
import themeGet from "@styled-system/theme-get";
import { variant } from "styled-system";
// Team type bar component for visual indicator
// Uses styled-system variant to map badge variants to background colors
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const TeamTypeBar = /*#__PURE__*/styled.div.withConfig({
displayName: "TeamTypeBar",
componentId: "sc-6cqkwa-0"
})(["width:4px;height:22px;margin-left:1px;flex-shrink:0;border-radius:2px;", ""], variant({
prop: "badgeVariant",
variants: {
success: {
bg: "successLightest"
},
successPending: {
bg: "successEvenLighter"
},
warning: {
bg: "warningLightest"
},
danger: {
bg: "dangerLightest"
},
primaryLight: {
bg: "primaryLightest"
},
primary: {
bg: "primaryLighter"
},
primaryDark: {
bg: "primaryLight"
},
secondary: {
bg: "secondaryEvenLighter"
},
default: {
bg: "secondary"
}
}
}));
const BarSpacer = /*#__PURE__*/styled.div.withConfig({
displayName: "BarSpacer",
componentId: "sc-6cqkwa-1"
})(["width:6px;flex-shrink:0;"]);
// Custom ItemList matching teamform-app-ui structure
const StoryItemList = /*#__PURE__*/styled.ul.withConfig({
displayName: "StoryItemList",
componentId: "sc-6cqkwa-2"
})(["list-style:none;padding:0;margin:0;align-items:", ";text-align:", ";display:flex;flex-direction:column;gap:", ";"], props => props.isExpanded ? "flex-start" : "center", props => props.isExpanded ? "left" : "center", props => themeGet("space.xs")(props));
// Custom Item styled component matching teamform-app-ui structure
// Background highlight on Item wrapper, padding on inner link
const StoryItem = /*#__PURE__*/styled.li.withConfig({
displayName: "StoryItem",
componentId: "sc-6cqkwa-3"
})(["display:flex;width:100%;gap:", ";justify-content:", ";align-items:stretch;padding:1px;border-radius:", ";transition:", ";min-height:0;position:relative;&.active{background-color:", ";}&:hover{background-color:", ";}&.active:hover{background-color:", ";}"], props => themeGet("space.xs")(props), props => {
if (props.isExpanded) {
return "space-between";
}
return "center";
}, props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryLightest")(props), props => props.isExpanded ? themeGet("colors.greyLightest")(props) : "transparent", props => themeGet("colors.primaryLightest")(props));
// Expanded row wrapper - just padding, no background (background is on Item)
// Matches teamform-app-ui TeamLink/PinnedLink padding
const ExpandedRowWrapper = /*#__PURE__*/styled(Flex).withConfig({
displayName: "ExpandedRowWrapper",
componentId: "sc-6cqkwa-4"
})(["width:100%;padding:", ";border-radius:", ";align-items:center;min-width:0;flex-shrink:0;flex:1;"], props => themeGet("space.xs")(props), props => props.theme.radii[2]);
const ItemName = /*#__PURE__*/styled.span.withConfig({
displayName: "ItemName",
componentId: "sc-6cqkwa-5"
})(["font-size:", ";display:inline;"], props => themeGet("fontSizes.1")(props));
const StyledBadge = /*#__PURE__*/styled(Badge).withConfig({
displayName: "StyledBadge",
componentId: "sc-6cqkwa-6"
})(["flex-shrink:0;font-size:", ";padding:", " ", ";line-height:1.2;"], props => themeGet("fontSizes.0")(props), props => themeGet("space.xxs")(props), props => themeGet("space.xs")(props));
const StyledLink = /*#__PURE__*/styled(Link).withConfig({
displayName: "StyledLink",
componentId: "sc-6cqkwa-7"
})(["flex:1;min-width:0;max-width:100%;display:flex;align-items:center;gap:", ";overflow:hidden;text-decoration:none;color:inherit;width:100%;"], props => themeGet("space.xs")(props));
// Pin icon wrapper - right-aligned and vertically centered
const StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
displayName: "StyledPopover",
componentId: "sc-6cqkwa-8"
})(["margin-left:auto;display:flex;align-items:center;justify-content:center;flex-shrink:0;"]);
// Pinned icon wrapper - positioned absolutely like teamform-app-ui
const PinnedIconWrapper = /*#__PURE__*/styled.div.withConfig({
displayName: "PinnedIconWrapper",
componentId: "sc-6cqkwa-9"
})(["position:absolute;top:50%;right:", ";transform:translateY(-50%);display:flex;align-items:center;justify-content:center;margin:0;padding:0;z-index:10;flex-shrink:0;"], props => themeGet("space.xs")(props));
library.add(far, fas);
export default {
title: "Components/SideNavV2",
decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
height: "100vh",
bg: "greyLightest",
boxBorder: "default",
overflow: "hidden",
children: storyFn()
})],
component: SideNavV2
};
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, {
mb: "r",
children: [name, " content"]
}), children]
});
};
const teams = {
"nebula-ui": {
name: "Nebula UI",
avatar: "https://images.unsplash.com/photo-1688413399498-e35ed74b554f?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8c3BhY2VzaGlwJTIwZGlnaXRhbCUyMHNjcmVlbnxlbnwwfHwwfHx8MA%3D%3D",
shape: "square",
type: "Team"
},
design: {
name: "Design",
avatar: "https://images.unsplash.com/photo-1602576666092-bf6447a729fc?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dWklMjBkZXNpZ258ZW58MHx8MHx8fDA%3D",
shape: "square",
type: "Team"
},
blackhole: {
name: "Blackhole",
avatar: "https://plus.unsplash.com/premium_photo-1690571200236-0f9098fc6ca9?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YmxhY2tob2xlfGVufDB8fDB8fHww",
shape: "square",
type: "Team"
},
engineering: {
name: "Engineering",
avatar: "https://images.unsplash.com/photo-1515879218367-8466d910aaa4?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29kZXxlbnwwfHwwfHx8MA%3D%3D",
shape: "square",
type: "Team"
}
};
const getViewingState = teamId => {
return {
name: teams[teamId].name,
avatar: teams[teamId].avatar,
shape: teams[teamId].shape,
// badge: teams[teamId].type && (
// <Badge variant="success">{teams[teamId].type}</Badge> // Badge is optional
// ),
subNav: [{
name: "Overview",
link: "/teams/".concat(teamId, "/overview")
}, {
name: "Org chart",
link: "/teams/".concat(teamId, "/org-chart")
}, {
name: "Strategy",
link: "/teams/".concat(teamId, "/strategy")
}, {
name: "Allocations",
link: "/teams/".concat(teamId, "/allocations")
}, {
name: "Planning",
link: "/teams/".concat(teamId, "/planning")
}, {
name: "Forecast",
link: "/teams/".concat(teamId, "/forecast")
}, {
name: "Team interactions",
link: "/teams/".concat(teamId, "/interactions")
}, {
name: "History",
link: "/teams/".concat(teamId, "/history")
}]
};
};
const getPeopleState = personId => {
return {
name: "James Merrit",
// badge: <Badge variant="success">Engineer</Badge>, // Badge is optional
avatar: "https://randomuser.me/api/portraits/men/24.jpg",
shape: "circle",
subNav: [{
name: "Details",
link: "/people/".concat(personId, "/details")
}, {
name: "Allocations",
link: "/people/".concat(personId, "/allocations")
}, {
name: "History",
link: "/people/".concat(personId, "/history")
}]
};
};
const Teams = () => {
const params = useParams();
const viewing = useMemo(() => getViewingState(params.teamId), [params.teamId]);
return /*#__PURE__*/_jsxs("div", {
children: ["Team ", params.teamId, " route", /*#__PURE__*/_jsx(RenderCurrentViewSection, {
viewingState: viewing
}), /*#__PURE__*/_jsx(Switch, {
children: /*#__PURE__*/_jsx(Route, {
path: "/teams/:teamId/:subRoute",
render: routeProps => /*#__PURE__*/_jsxs("div", {
children: ["SUB ROUTE ", routeProps.match.params.subRoute, " route"]
})
})
})]
});
};
const People = () => {
const params = useParams();
const viewing = useMemo(() => getPeopleState(params.personId), [params.personId]);
return /*#__PURE__*/_jsxs("div", {
children: ["People ", params.personId, " route", /*#__PURE__*/_jsx(RenderCurrentViewSection, {
viewingState: viewing
}), /*#__PURE__*/_jsx(Switch, {
children: /*#__PURE__*/_jsx(Route, {
path: "/people/:personId/:subRoute",
render: routeProps => /*#__PURE__*/_jsxs("div", {
children: ["SUB ROUTE ", routeProps.match.params.subRoute, " route", /*#__PURE__*/_jsx(Switch, {
children: /*#__PURE__*/_jsx(Route, {
path: "/details",
render: () => /*#__PURE__*/_jsx("div", {
children: "Details route"
})
})
})]
})
})
})]
});
};
const PinnedItem = () => {
const params = useParams();
return /*#__PURE__*/_jsxs("div", {
children: ["Pinned Item: ", params.itemId, " route"]
});
};
const PageCard = _ref2 => {
let {
children
} = _ref2;
return /*#__PURE__*/_jsx(Spacer, {
px: "r",
children: /*#__PURE__*/_jsx(Card, {
children: children
})
});
};
const yourTeamsWithTypes = [{
avatar: "https://plus.unsplash.com/premium_photo-1690571200236-0f9098fc6ca9?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YmxhY2tob2xlfGVufDB8fDB8fHww",
name: "Blackhole",
link: "/teams/blackhole/overview",
type: "Chapter",
badgeVariant: "primaryDark",
// Purple/pink color
id: "blackhole"
}, {
avatar: "https://images.unsplash.com/photo-1602576666092-bf6447a729fc?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dWklMjBkZXNpZ258ZW58MHx8MHx8fDA%3D",
name: "Design",
link: "/teams/design/overview",
type: "Agile Group",
badgeVariant: "success",
// Green color
id: "design"
}, {
avatar: "https://images.unsplash.com/photo-1515879218367-8466d910aaa4?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29kZXxlbnwwfHwwfHx8MA%3D%3D",
name: "Engineering",
link: "/teams/engineering/overview",
type: "Chapter Area",
badgeVariant: "primary",
// Blue/purple color
id: "engineering"
}];
const pinnedItemsWithTypes = [{
avatar: "https://images.unsplash.com/photo-1515879218367-8466d910aaa4?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29kZXxlbnwwfHwwfHx8MA%3D%3D",
name: "Engineering",
link: "/teams/engineering/overview",
shape: "square",
type: "Chapter",
badgeVariant: "primaryDark",
// Purple/pink color
entityType: "team",
id: "engineering",
onUnpin: action("unpin-engineering")
}, {
avatar: "https://images.unsplash.com/photo-1556741533-e228ee50f8b8?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxzZWFyY2h8MXx8Y3VzdG9tZXJ8ZW58MHx8MHx8fDA%3D",
name: "Customer Journey",
link: "/pinned/new-account",
shape: "hexagon",
type: "Agile Group",
badgeVariant: "success",
// Green color
entityType: "team",
id: "customer-journey",
onUnpin: action("unpin-customer-journey")
}, {
avatar: "https://randomuser.me/api/portraits/men/24.jpg",
name: "James Merrit",
link: "/people/james-merrit/details",
onUnpin: action("unpin-james-merrit"),
shape: "circle",
entityType: "person"
}];
// Example custom section components with team type bars
const TeamsSectionWithBadges = _ref3 => {
let {
teams,
isExpanded
} = _ref3;
const location = useLocation();
const renderTeamItem = (team, expanded) => {
const {
avatar,
name,
link,
gradient,
type,
badgeVariant = "success"
} = team;
if (!name || !link) {
return null;
}
const hasTeamType = Boolean(type);
const isActive = link && location.pathname.startsWith(link);
return /*#__PURE__*/_jsx(StoryItem, {
isExpanded: expanded,
className: isActive ? "active" : "",
children: expanded ? /*#__PURE__*/_jsxs(ExpandedRowWrapper, {
alignItems: "center",
gap: "xs",
flex: "1",
style: {
minWidth: 0,
width: "100%"
},
children: [/*#__PURE__*/_jsx(Avatar, {
image: avatar,
customSize: "24px",
shape: "square",
gradient: gradient
}), hasTeamType && /*#__PURE__*/_jsx(TeamTypeBar, {
badgeVariant: badgeVariant
}), /*#__PURE__*/_jsx(Popover, {
text: /*#__PURE__*/_jsxs(Flex, {
flexDirection: "row",
flexWrap: "wrap",
gap: "xs",
alignItems: "center",
children: [/*#__PURE__*/_jsx("span", {
children: name
}), hasTeamType && /*#__PURE__*/_jsx(StyledBadge, {
variant: badgeVariant,
children: type
})]
}),
direction: "right",
width: "fit-content",
inlineBlock: false,
style: {
flex: 1,
width: "100%",
display: "flex",
minWidth: 0
},
children: /*#__PURE__*/_jsx(StyledLink, {
to: link || "#",
"aria-label": name,
children: /*#__PURE__*/_jsx(ItemName, {
children: name
})
})
})]
}) : /*#__PURE__*/_jsx(Popover, {
text: /*#__PURE__*/_jsxs(Flex, {
flexDirection: "row",
flexWrap: "wrap",
gap: "xs",
alignItems: "center",
children: [/*#__PURE__*/_jsx("span", {
children: name
}), hasTeamType && /*#__PURE__*/_jsx(Badge, {
variant: badgeVariant,
style: {
flexShrink: 0,
fontSize: "11px",
padding: "2px 6px",
lineHeight: "1.2"
},
children: type
})]
}),
direction: "right",
width: "fit-content",
children: /*#__PURE__*/_jsxs(Flex, {
alignItems: "center",
gap: "xs",
children: [/*#__PURE__*/_jsx(AvatarLink, {
avatar: avatar,
name: name,
link: link,
shape: "square",
showName: false,
gradient: gradient
}), hasTeamType && /*#__PURE__*/_jsx(TeamTypeBar, {
badgeVariant: badgeVariant
})]
})
})
}, name);
};
if (!isExpanded) return null;
return /*#__PURE__*/_jsxs(Flex, {
flexDirection: "column",
gap: "r",
my: "s",
children: [/*#__PURE__*/_jsx(H6, {
sizing: "small",
color: "greyDark",
children: "My Teams"
}), /*#__PURE__*/_jsx(StoryItemList, {
isExpanded: isExpanded,
children: teams.map(team => renderTeamItem(team, isExpanded))
})]
});
};
const PinnedSectionWithBadges = _ref4 => {
let {
items,
isExpanded
} = _ref4;
const location = useLocation();
const renderPinnedItem = (item, expanded) => {
const {
avatar,
name,
link,
shape,
onUnpin,
gradient,
type,
entityType,
badgeVariant = "success"
} = item;
if (!name || !link) {
return null;
}
const showTeamType = entityType === "team" && type;
const isActive = link && location.pathname.startsWith(link);
return /*#__PURE__*/_jsx(StoryItem, {
isExpanded: expanded,
className: isActive ? "active" : "",
children: expanded ? /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(ExpandedRowWrapper, {
alignItems: "center",
gap: "xs",
flex: "1",
style: {
minWidth: 0,
width: "100%"
},
children: [/*#__PURE__*/_jsx(Avatar, {
image: avatar,
customSize: "24px",
shape: shape,
gradient: gradient
}), showTeamType ? /*#__PURE__*/_jsx(TeamTypeBar, {
badgeVariant: badgeVariant
}) : /*#__PURE__*/_jsx(BarSpacer, {}), /*#__PURE__*/_jsx(Popover, {
text: /*#__PURE__*/_jsxs(Flex, {
flexDirection: "row",
flexWrap: "wrap",
gap: "xs",
alignItems: "center",
children: [/*#__PURE__*/_jsx("span", {
children: name
}), showTeamType && /*#__PURE__*/_jsx(Badge, {
variant: badgeVariant,
style: {
flexShrink: 0,
fontSize: "11px",
padding: "2px 6px",
lineHeight: "1.2"
},
children: type
})]
}),
direction: "right",
width: "fit-content",
inlineBlock: false,
style: {
flex: 1,
width: "100%",
display: "flex",
minWidth: 0
},
children: /*#__PURE__*/_jsx(StyledLink, {
to: link || "#",
"aria-label": name,
children: /*#__PURE__*/_jsx(ItemName, {
children: name
})
})
})]
}), onUnpin && /*#__PURE__*/_jsx(PinnedIconWrapper, {
children: /*#__PURE__*/_jsx(StyledPopover, {
text: "Unpin item",
direction: "right",
width: "fit-content",
tabIndex: "-1",
children: /*#__PURE__*/_jsx(Button, {
height: "20px",
width: "20px",
borderRadius: "20px",
variant: "borderGrey",
borderColor: "white",
onClick: () => onUnpin === null || onUnpin === void 0 ? void 0 : onUnpin(item),
type: "button",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "thumbtack"],
color: "greyDarkest",
size: "sm"
})
})
})
})]
}) : /*#__PURE__*/_jsx(Popover, {
text: /*#__PURE__*/_jsxs(Flex, {
flexDirection: "row",
flexWrap: "wrap",
gap: "xs",
alignItems: "center",
children: [/*#__PURE__*/_jsx("span", {
children: name
}), showTeamType && /*#__PURE__*/_jsx(Badge, {
variant: badgeVariant,
style: {
flexShrink: 0,
fontSize: "11px",
padding: "2px 6px",
lineHeight: "1.2"
},
children: type
})]
}),
direction: "right",
width: "fit-content",
children: /*#__PURE__*/_jsxs(Flex, {
alignItems: "center",
gap: "xs",
children: [/*#__PURE__*/_jsx(AvatarLink, {
avatar: avatar,
name: name,
link: link,
shape: shape,
showName: false,
gradient: gradient
}), showTeamType && /*#__PURE__*/_jsx(TeamTypeBar, {
badgeVariant: badgeVariant
})]
})
})
}, name);
};
if (!isExpanded) return null;
return /*#__PURE__*/_jsxs(Flex, {
flexDirection: "column",
gap: "r",
my: "s",
mb: "0",
pb: "0",
children: [/*#__PURE__*/_jsx(H6, {
sizing: "small",
color: "greyDark",
children: "Pinned"
}), /*#__PURE__*/_jsx(StoryItemList, {
isExpanded: isExpanded,
children: items.map(item => renderPinnedItem(item, isExpanded))
})]
});
};
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: true,
isExpandedByDefault: matchPath(location.pathname, {
path: "/search"
})
}, {
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: true,
isExpandedByDefault: matchPath(location.pathname, {
path: "/profile"
})
}, {
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__*/_jsxs(Flex, {
flexDirection: "column",
gap: "r",
children: [Object.keys(teams).map(team => /*#__PURE__*/_jsx(Link, {
to: "/teams/".concat(team, "/overview"),
children: team
}, team)), /*#__PURE__*/_jsx(P, {
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestias non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
})]
})),
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: "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__*/_jsx(Flex, {
height: "100vh",
children: /*#__PURE__*/_jsxs(SideNavStateProvider, {
children: [/*#__PURE__*/_jsx(SideNavV2, {
items: items,
yourTeams: yourTeamsWithTypes,
pinnedItems: pinnedItemsWithTypes,
sideNavHeight: "100vh",
startExpanded: true,
renderTeamsSection: _ref5 => {
let {
teams,
isExpanded
} = _ref5;
return /*#__PURE__*/_jsx(TeamsSectionWithBadges, {
teams: teams,
isExpanded: isExpanded
});
},
renderPinnedSection: _ref6 => {
let {
items: pinned,
isExpanded
} = _ref6;
return /*#__PURE__*/_jsx(PinnedSectionWithBadges, {
items: pinned,
isExpanded: isExpanded
});
}
}), /*#__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: "/search",
children: /*#__PURE__*/_jsx(PageCard, {
children: /*#__PURE__*/_jsx("div", {
children: "Search route"
})
})
}), /*#__PURE__*/_jsx(Route, {
path: "/teams/:teamId",
children: /*#__PURE__*/_jsx(PageCard, {
children: /*#__PURE__*/_jsx(Teams, {})
})
}), /*#__PURE__*/_jsx(Route, {
path: "/pinned/:itemId",
children: /*#__PURE__*/_jsx(PageCard, {
children: /*#__PURE__*/_jsx(PinnedItem, {})
})
}), /*#__PURE__*/_jsx(Route, {
path: "/people/:personId",
children: /*#__PURE__*/_jsx(PageCard, {
children: /*#__PURE__*/_jsx(People, {})
})
}), /*#__PURE__*/_jsx(Redirect, {
from: "/iframe.html",
to: "/"
})]
})]
})
});
};
export const SidebarNavigationV2 = () => {
return /*#__PURE__*/_jsx(Router, {
children: /*#__PURE__*/_jsx(SideBarWithConfig, {})
});
};
SidebarNavigationV2.storyName = "Sidebar Navigation";
// Story demonstrating custom render functions with badges
const SideBarWithCustomSections = () => {
const location = useLocation();
const items = [{
iconName: "building",
name: "Home",
component: makeLinkComponent("/"),
actionType: "link",
isActive: matchPath(location.pathname, {
path: "/",
exact: true
})
}, {
iconName: "bell",
name: "Notifications",
badgeNumber: "3",
component: makePanelComponent("Notifications"),
actionType: "component"
}];
return /*#__PURE__*/_jsx(Flex, {
height: "100vh",
children: /*#__PURE__*/_jsxs(SideNavStateProvider, {
children: [/*#__PURE__*/_jsx(SideNavV2, {
items: items,
yourTeams: yourTeamsWithTypes,
pinnedItems: pinnedItemsWithTypes,
sideNavHeight: "100vh",
startExpanded: true,
renderTeamsSection: _ref7 => {
let {
teams,
isExpanded
} = _ref7;
return /*#__PURE__*/_jsx(TeamsSectionWithBadges, {
teams: teams,
isExpanded: isExpanded
});
},
renderPinnedSection: _ref8 => {
let {
items: pinned,
isExpanded
} = _ref8;
return /*#__PURE__*/_jsx(PinnedSectionWithBadges, {
items: pinned,
isExpanded: isExpanded
});
}
}), /*#__PURE__*/_jsx(Switch, {
children: /*#__PURE__*/_jsx(Route, {
exact: true,
path: "/",
children: /*#__PURE__*/_jsx(PageCard, {
children: /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx(H5, {
mb: "r",
children: "Custom Sections with Team Type Bars"
}), /*#__PURE__*/_jsx(P, {
mb: "r",
children: "This example demonstrates using custom render functions for teams and pinned sections. Team type bars appear as colored vertical bars next to team avatars when the sidebar is expanded, and badges appear in the hover tooltip when collapsed."
}), /*#__PURE__*/_jsx(P, {
children: "Try collapsing the sidebar to see badges appear in the hover tooltips! Team type bars provide a compact visual indicator of team type while keeping the layout clean."
})]
})
})
})
})]
})
});
};
export const SidebarWithCustomSections = () => {
return /*#__PURE__*/_jsx(Router, {
children: /*#__PURE__*/_jsx(SideBarWithCustomSections, {})
});
};
SidebarWithCustomSections.storyName = "Sidebar with Custom Sections and Team Type Bars";
SidebarNavigationV2.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "SidebarNavigationV2"
};
SidebarWithCustomSections.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "SidebarWithCustomSections"
};