orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
70 lines • 2.13 kB
JavaScript
import React from "react";
import Sidebar, { SidebarTabs, SidebarTab, SidebarPanels, SidebarPanel, SidebarClose } from ".";
import Icon from "../Icon";
import Box from "../Box";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
title: "Components/Sidebar",
component: Sidebar,
subcomponents: {
SidebarTabs: SidebarTabs,
SidebarTab: SidebarTab,
SidebarPanels: SidebarPanels,
SidebarPanel: SidebarPanel
}
};
export const defaultSidebar = () => /*#__PURE__*/_jsxs(Sidebar, {
children: [/*#__PURE__*/_jsxs(SidebarTabs, {
children: [/*#__PURE__*/_jsx(SidebarTab, {
active: true,
badge: "3",
ariaLabel: "Messages",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "filter"],
size: "lg"
})
}), /*#__PURE__*/_jsx(SidebarTab, {
ariaLabel: "Preferences",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "cog"],
size: "lg"
})
}), /*#__PURE__*/_jsx(SidebarTab, {
bottomAligned: true,
ariaLabel: "Info",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "info-circle"],
size: "lg"
})
})]
}), /*#__PURE__*/_jsxs(SidebarPanels, {
children: [/*#__PURE__*/_jsx(SidebarClose, {
title: "Close Sidebar",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "angle-left"]
})
}), /*#__PURE__*/_jsx(SidebarPanel, {
active: true,
children: /*#__PURE__*/_jsx(Box, {
p: "r",
children: "Sidebar content tab one blah blah lorem ipsum dolor sit amet."
})
}), /*#__PURE__*/_jsx(SidebarPanel, {
children: /*#__PURE__*/_jsx(Box, {
p: "r",
children: "Sidebar content tab two blah blah lorem ipsum dolor sit amet."
})
}), /*#__PURE__*/_jsx(SidebarPanel, {
children: /*#__PURE__*/_jsx(Box, {
p: "r",
children: "Information about company and app (app version etc.) goes here."
})
})]
})]
});
defaultSidebar.storyName = "Default";
defaultSidebar.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "defaultSidebar"
};