import React, { useState } from 'react'; import { storybookArgTypes, storybookExcludedControlParams, StoryMetaType, StoryType, } from '@lg-tools/storybook-utils'; import { css, cx } from '@leafygreen-ui/emotion'; import { Icon } from '@leafygreen-ui/icon'; import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider'; import { Theme } from '@leafygreen-ui/lib'; import { palette } from '@leafygreen-ui/palette'; import { Option, Select, Size } from '@leafygreen-ui/select'; import { Body, H1 } from '@leafygreen-ui/typography'; import { CollapsedSideNavItem, SideNav, SideNavGroup, SideNavItem, type SideNavProps, } from '.'; const basicStyles = css` height: 50vh; `; const meta: StoryMetaType = { title: 'Composition/Data Display/SideNav', component: SideNav, parameters: { default: 'LiveExample', controls: { exclude: [ ...storybookExcludedControlParams, 'children', 'setCollapsed', 'collapsed', ], }, generate: { combineArgs: { darkMode: [false, true], baseFontSize: [14, 16], collapsed: [false, true], }, args: { className: basicStyles, }, }, }, argTypes: { darkMode: storybookArgTypes.darkMode, baseFontSize: storybookArgTypes.baseFontSize, }, args: { widthOverride: 200, children: [ } header="Header text" > Active State Disabled State , Default root element Nested Item Anchor root element , ], }, }; export default meta; export const LiveExample: StoryType = ({ className, ...args }: SideNavProps) => { return ; }; LiveExample.parameters = { chromatic: { disableSnapshot: true }, }; const appContainer = css` display: grid; grid-template-areas: 'mongonav mongonav' 'nav content'; grid-template-rows: auto 1fr; grid-template-columns: auto 1fr; height: 100vh; width: 100%; `; const mongoNavBaseStyles = css` grid-area: mongonav; width: 100%; height: 105px; display: flex; align-items: center; justify-content: center; z-index: 1; `; const mongoNavThemeStyles: Record = { [Theme.Light]: css` background-color: ${palette.white}; box-shadow: 0 2px 4px 0 ${palette.gray.light2}; `, [Theme.Dark]: css` background-color: ${palette.gray.dark4}; box-shadow: 0 2px 4px 0 ${palette.black}; `, }; const sideNavStyles = css` grid-area: nav; `; const contentStyles = css` grid-area: content; padding: 24px 48px; margin: auto; max-width: 72ch; height: 100%; max-height: 100%; overflow-y: auto; `; const MongoNavPlaceholder = ({ darkMode, ...props }: any) => (

{'<'}MongoNav Placeholder{'>'}

); const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil eum ut, eius et minus, voluptas a consequatur odit commodi consequuntur accusantium ullam alias dolorem distinctio debitis ipsam dolore vel molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil eum ut, eius et minus, voluptas a consequatur odit commodi consequuntur accusantium ullam alias dolorem distinctio debitis ipsam dolore vel molestiae.`; const content = ( {new Array(10).fill(

{loremIpsum}

)} ); export const InLayout = ({ isCollapsible, isDisabled, groupHeaderText, navItemText, hasActiveItem, darkMode, ...rest }: any) => { const [collapsed, setCollapsed] = useState(false); const textHeader = 'States'; return (
} header={textHeader}> Active State Disabled State Default root element Anchor root element Another item } header={groupHeaderText} collapsible={isCollapsible} > {navItemText} Dave Robert Arnold Audroue Adam Michael Thompson Shaneeza Sean Sooa Alven Kelsey Fred {content}
); }; InLayout.args = { isCollapsible: true, isDisabled: false, groupHeaderText: 'Header text', navItemText: 'Modify Me!', hasActiveItem: false, }; InLayout.parameters = { chromatic: { disableSnapshot: true }, }; export const OrgSettings = ({ baseFontSize, widthOverride, darkMode, ...rest }: SideNavProps) => { return (
} header={Context} >
    • } header="Organization"> Projects Activity Feed Security Permissions Login Access Database Access Network Access Alerts Database Access Settings } header="Help"> Docs     {content}
    ); }; OrgSettings.args = { baseFontSize: 14, widthOverride: 200, }; OrgSettings.parameters = { chromatic: { disableSnapshot: true }, }; export const Nested = ({ darkMode, ...rest }: SideNavProps) => { return (
    Overview Introduction Android SDK Install MongoDB Community Edition } > Upgrade MongoDB Community to MongoDB Enterprise Verify Integrity of MongoDB Packages Privacy Security {content}
    ); }; Nested.parameters = { chromatic: { disableSnapshot: true }, }; Nested.argTypes = { darkMode: storybookArgTypes.darkMode, }; export const Generated = () => {};