@material-ui/icons#Accessibility TypeScript Examples

The following examples show how to use @material-ui/icons#Accessibility. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: with-basic-config.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up
withBasicConfig = (): StoryFnReactReturnType => {
    const [selected, setSelected] = useState('');

    const navGroupItems: NavItem[] = [
        {
            title: 'Identity Management',
            itemID: '1',
            icon: <Person />,
            onClick: (): void => setSelected('1'),
        },
        {
            title: 'Calendar',
            itemID: '2',
            icon: <Today />,
            onClick: (): void => setSelected('2'),
        },
        {
            title: 'Accessibility',
            itemID: '3',
            icon: <Accessibility />,
            onClick: (): void => setSelected('3'),
        },
        {
            title: 'Notifications',
            itemID: '4',
            icon: <NotificationsActive />,
            onClick: (): void => setSelected('4'),
        },
    ];

    return (
        <Drawer open={boolean('open', true)} activeItem={selected}>
            <DrawerHeader icon={<Menu />} title={text('title', 'Simple Drawer')} />
            <DrawerBody>
                <DrawerNavGroup items={navGroupItems} />
            </DrawerBody>
        </Drawer>
    );
}
Example #2
Source File: with-custom-header.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up
withCustomHeader = (): StoryFnReactReturnType => {
    const [selected, setSelected] = useState('');

    const navGroupItems: NavItem[] = [
        {
            title: 'Identity Management',
            itemID: '1',
            icon: <Person />,
            onClick: (): void => setSelected('1'),
        },
        {
            title: 'Calendar',
            itemID: '2',
            icon: <Today />,
            onClick: (): void => setSelected('2'),
        },
        {
            title: 'Accessibility',
            itemID: '3',
            icon: <Accessibility />,
            onClick: (): void => setSelected('3'),
        },
        {
            title: 'Notifications',
            itemID: '4',
            icon: <NotificationsActive />,
            onClick: (): void => setSelected('4'),
        },
    ];

    return (
        <Drawer open={boolean('open', true)} activeItem={selected}>
            <DrawerHeader
                backgroundImage={farmBgImage}
                backgroundOpacity={0.5}
                icon={<Menu />}
                titleContent={
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            zIndex: 1,
                            padding: '0 16px',
                            alignItems: 'center',
                            width: '100%',
                            height: '100%',
                        }}
                    >
                        <div>
                            <Typography variant="subtitle2">Customizable</Typography>
                            <Typography variant="h6" style={{ marginTop: '-10px' }}>
                                Header Content
                            </Typography>
                        </div>
                        <ListItemTag style={{ marginBottom: 16 }} label={'v1.0.3'} />
                    </div>
                }
            />
            <DrawerBody>
                <DrawerNavGroup items={navGroupItems} />
            </DrawerBody>
        </Drawer>
    );
}
Example #3
Source File: with-multiple-DrawerNavGroups.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up
withMultipleNavGroups = (): StoryFnReactReturnType => {
    const [selected, setSelected] = useState('');

    const navGroupItems1: NavItem[] = [
        {
            title: 'Identity Management',
            itemID: '1',
            icon: <Person />,
            onClick: (): void => setSelected('1'),
        },
        {
            title: 'Calendar',
            itemID: '2',
            icon: <Today />,
            onClick: (): void => setSelected('2'),
        },
        {
            title: 'Accessibility',
            itemID: '3',
            icon: <Accessibility />,
            onClick: (): void => setSelected('3'),
        },
        {
            title: 'Notifications',
            itemID: '4',
            icon: <NotificationsActive />,
            onClick: (): void => setSelected('4'),
        },
    ];

    const navGroupItems2: NavItem[] = [
        {
            title: 'Settings',
            itemID: '2-1',
            icon: <Settings />,
            onClick: (): void => setSelected('2-1'),
        },
        {
            title: 'Legal',
            itemID: '2-2',
            icon: <Gavel />,
            onClick: (): void => setSelected('2-2'),
        },
    ];

    return (
        <Drawer open={boolean('open', true)} activeItem={selected}>
            <DrawerHeader
                icon={<Menu />}
                title={'Brightlayer UI Drawer'}
                subtitle={'with multiple navigation groups'}
            />
            <DrawerBody>
                <DrawerNavGroup
                    title={text('navGroup[0].title', 'First DrawerNavGroup')}
                    titleDivider={boolean('titleDivider', true)}
                    items={navGroupItems1}
                />
                {boolean('Add Spacer', true) && <Spacer />}
                <DrawerNavGroup
                    title={text('navGroup[1].title', 'Second DrawerNavGroup')}
                    titleDivider={boolean('titleDivider', true)}
                    items={navGroupItems2}
                />
            </DrawerBody>
        </Drawer>
    );
}
Example #4
Source File: with-subheader.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up
withSubheader = (): StoryFnReactReturnType => {
    const [selected, setSelected] = useState('');

    const valuesObj = {
        filter: 'Filter',
        accordion: 'Accordion',
    };
    const optionsObj = {
        display: 'inline-radio' as OptionsKnobOptionsDisplay,
    };
    const subheaderContent = optionsKnob('Subheader Content', valuesObj, 'Filter', optionsObj);

    const navGroupItems: NavItem[] = [
        {
            title: 'Identity Management',
            itemID: '1',
            icon: <Person />,
            onClick: (): void => setSelected('1'),
        },
        {
            title: 'Calendar',
            itemID: '2',
            icon: <Today />,
            onClick: (): void => setSelected('2'),
        },
        {
            title: 'Accessibility',
            itemID: '3',
            icon: <Accessibility />,
            onClick: (): void => setSelected('3'),
        },
        {
            title: 'Notifications',
            itemID: '4',
            icon: <NotificationsActive />,
            onClick: (): void => setSelected('4'),
        },
    ];

    return (
        <Drawer open={boolean('open', true)} activeItem={selected}>
            <DrawerHeader icon={<Menu />} title={'Subheader Demo'} subtitle={'See the DrawerSubheader below'} />
            <DrawerSubheader
                hideContentOnCollapse={boolean('hideContentOnCollapse', true)}
                divider={boolean('divider', true)}
            >
                <div
                    style={{
                        display: 'flex',
                        justifyContent: 'center',
                        padding: '1rem 16px',
                    }}
                >
                    {subheaderContent === 'Filter' ? filter : accordion}
                </div>
            </DrawerSubheader>
            <DrawerBody>
                <DrawerNavGroup items={navGroupItems} />
            </DrawerBody>
        </Drawer>
    );
}
Example #5
Source File: with-full-config.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up
withFullConfig = (): StoryFnReactReturnType => {
    const [selected, setSelected] = useState('');
    const isDarkMode = useDarkMode();

    // storybook tab names
    const drawerGroupId = 'Drawer';
    const headerGroupId = 'Header';
    const bodyGroupId = 'Body';
    const navGroupId = 'NavGroup';
    const navItemId = 'NavItem';
    const footerGroupId = 'Footer';

    const drawerKnobs: DrawerComponentProps = {
        activeItemBackgroundColor: color('activeItemBackgroundColor', Colors.blue[50], drawerGroupId),
        activeItemFontColor: color('activeItemFontColor', Colors.blue[500], drawerGroupId),
        activeItemIconColor: color('activeItemIconColor', Colors.blue[500], drawerGroupId),
        activeItemBackgroundShape: select('activeItemBackgroundShape', ['round', 'square'], 'square', drawerGroupId),
        chevron: boolean('chevron', false, drawerGroupId),
        chevronColor: color('chevronColor', Colors.gray[500], drawerGroupId),
        collapseIcon: getIcon(
            select('collapseIcon', ['undefined', '<Remove />', '<AddAPhoto />'], 'undefined', drawerGroupId)
        ),
        disableActiveItemParentStyles: boolean('disableActiveItemParentStyles', true, drawerGroupId),
        divider: boolean('divider', true, drawerGroupId),
        expandIcon: getIcon(select('expandIcon', ['undefined', '<Add />', '<PinDrop />'], 'undefined', drawerGroupId)),
        hidePadding: boolean('hidePadding', false, drawerGroupId),
        itemFontColor: color('itemFontColor', Colors.black[500], drawerGroupId),
        itemIconColor: color('itemIconColor', Colors.black[500], drawerGroupId),
        nestedBackgroundColor: color('nestedBackgroundColor', Colors.white[200], drawerGroupId),
        nestedDivider: boolean('nestedDivider', false, drawerGroupId),
        open: boolean('open', true, drawerGroupId),
        openOnHover: boolean('openOnHover (persistent only)', true, drawerGroupId),
        openOnHoverDelay: number(
            'openOnHoverDelay (persistent only)',
            500,
            {
                range: true,
                min: 100,
                max: 1000,
                step: 100,
            },
            drawerGroupId
        ),
        ripple: boolean('ripple', true, drawerGroupId),
        sideBorder: boolean('sideBorder', true, drawerGroupId),
        variant: select('variant', ['permanent', 'persistent', 'temporary', 'rail'], 'persistent', drawerGroupId),
        condensed: boolean('condensed (rail only)', false, drawerGroupId),
        width: number(
            'width',
            350,
            {
                range: true,
                min: 200,
                max: 700,
                step: 50,
            },
            drawerGroupId
        ),
    };

    const headerKnobs: DrawerHeaderProps = {
        backgroundColor: color('backgroundColor', Colors.blue[500], headerGroupId),
        backgroundImage:
            headerBackgroundImageOptions[
                select('backgroundImage', ['undefined', 'Pattern', 'Farm'], 'Pattern', headerGroupId)
            ],
        divider: boolean('divider', false, headerGroupId),
        backgroundOpacity: number('backgroundOpacity', 0.4, { range: true, min: 0, max: 1, step: 0.1 }, headerGroupId),
        fontColor: color('fontColor', Colors.white[50], headerGroupId),
        icon: getIcon(select('icon', ['<Menu />', '<FitnessCenter />', 'undefined'], '<Menu />', headerGroupId)),
        subtitle: text('subtitle', 'Organize your menu items here', headerGroupId),
        title: text('title', 'Brightlayer UI Drawer', headerGroupId),
    };

    const bodyKnobs: DrawerBodyProps = {
        backgroundColor: color('backgroundColor', 'transparent', bodyGroupId),
    };

    const navGroupKnobs: Partial<DrawerNavGroupProps> = {
        title: text('drawerNavGroup[0].title', 'NavGroup 1', navGroupId),
        titleColor: color('titleColor', Colors.black[500], navGroupId),
        titleDivider: boolean('titleDivider', true, navGroupId),
    };

    const navItemKnobs: Partial<NavItem> = {
        hidden: boolean('hidden', false, navItemId),
        icon: getIcon(select('icon', ['<Dashboard />', '<FitnessCenter />', 'undefined'], '<Dashboard />', navItemId)),
        statusColor: color('statusColor', Colors.green[300], navItemId),
        subtitle: text('subtitle', 'Learn more about us', navItemId),
        title: text('title', overview, navItemId),
        disableRailTooltip: boolean('disableRailTooltip', false, navItemId),
    };

    const footerKnobs: Partial<DrawerFooterProps> = {
        hideContentOnCollapse: boolean('hideContentOnCollapse', true, footerGroupId),
        divider: boolean('divider', true, footerGroupId),
    };

    // DrawerNavGroup.items
    const links1 = [
        {
            hidden: navItemKnobs.hidden,
            icon: navItemKnobs.icon,
            statusColor: navItemKnobs.statusColor,
            subtitle: navItemKnobs.subtitle,
            // title is a required prop, using a placeholder in case the knob is empty
            title: navItemKnobs.title || 'title',
            disableRailTooltip: navItemKnobs.disableRailTooltip,
            itemID: '0',
            items: [
                {
                    title: monthlyReport,
                    itemID: monthlyReport,
                    onClick: (): void => {
                        setSelected(monthlyReport);
                    },
                },
                {
                    title: annualReport,
                    itemID: annualReport,
                    onClick: (): void => {
                        setSelected(annualReport);
                    },
                },
            ],
        },
        {
            title: timeline,
            itemID: timeline,
            onClick: (): void => {
                setSelected(timeline);
            },
            icon: <Toc />,
        },
        {
            title: locations,
            itemID: locations,
            onClick: (): void => {
                setSelected(locations);
            },
            icon: <PinDrop />,
        },
        {
            title: devices,
            itemID: devices,
            subtitle: '5 new warnings',
            statusColor: Colors.yellow[500],
            onClick: (): void => {
                setSelected(devices);
            },
            icon: <Devices />,
        },
        {
            title: photos,
            itemID: photos,
            onClick: (): void => {
                setSelected(photos);
            },
            icon: <AddAPhoto />,
        },
        {
            title: schedule,
            itemID: schedule,
            onClick: (): void => {
                setSelected(schedule);
            },
            icon: <Event style={getLeftToRightIconTransform()} />,
        },
    ];

    const links2 = [
        {
            title: userGuide,
            itemID: userGuide,
            onClick: (): void => {
                setSelected(userGuide);
            },
            icon: <MoveToInboxIcon />,
        },
        {
            title: agreement,
            itemID: agreement,
            subtitle: 'For Eaton employees only',
            onClick: (): void => {
                setSelected(agreement);
            },
            icon: <SendIcon style={getLeftToRightIconTransform()} />,
        },
        {
            title: accessibility,
            itemID: accessibility,
            icon: <Accessibility />,
            items: [
                {
                    title: colorContrastGuide,
                    itemID: colorContrastGuide,
                    onClick: (): void => {
                        setSelected(colorContrastGuide);
                    },
                },
                {
                    title: screenReader,
                    itemID: screenReader,
                    onClick: (): void => {
                        setSelected(screenReader);
                    },
                },
            ],
        },
        {
            title: notifications,
            itemID: notifications,
            onClick: (): void => {
                setSelected(notifications);
            },
            icon: <NotificationsActive />,
        },
    ];

    // Footer props
    const showFooter = boolean('Show footer', true, footerGroupId);
    const footerBackgroundColor = color('backgroundColor', Colors.white[50], footerGroupId);

    // You can replace the knob props with your own values
    return (
        <Drawer
            key={'drawer'}
            activeItem={selected}
            activeItemBackgroundColor={drawerKnobs.activeItemBackgroundColor}
            activeItemFontColor={drawerKnobs.activeItemFontColor}
            activeItemIconColor={drawerKnobs.activeItemIconColor}
            activeItemBackgroundShape={drawerKnobs.activeItemBackgroundShape}
            chevron={drawerKnobs.chevron}
            chevronColor={drawerKnobs.chevronColor}
            collapseIcon={drawerKnobs.collapseIcon}
            condensed={drawerKnobs.condensed}
            divider={drawerKnobs.divider}
            expandIcon={drawerKnobs.expandIcon}
            hidePadding={drawerKnobs.hidePadding}
            itemFontColor={drawerKnobs.itemFontColor}
            itemIconColor={drawerKnobs.itemIconColor}
            nestedBackgroundColor={drawerKnobs.nestedBackgroundColor}
            nestedDivider={drawerKnobs.nestedDivider}
            open={drawerKnobs.open}
            openOnHover={drawerKnobs.openOnHover}
            openOnHoverDelay={drawerKnobs.openOnHoverDelay}
            ripple={drawerKnobs.ripple}
            sideBorder={drawerKnobs.sideBorder}
            variant={drawerKnobs.variant}
            width={drawerKnobs.width}
            ModalProps={{
                disableEnforceFocus: true,
            }}
        >
            <DrawerHeader
                backgroundColor={headerKnobs.backgroundColor}
                backgroundImage={headerKnobs.backgroundImage}
                backgroundOpacity={headerKnobs.backgroundOpacity}
                divider={headerKnobs.divider}
                fontColor={headerKnobs.fontColor}
                icon={headerKnobs.icon}
                subtitle={headerKnobs.subtitle}
                title={headerKnobs.title}
            />
            <DrawerBody backgroundColor={bodyKnobs.backgroundColor}>
                <DrawerNavGroup
                    items={links1}
                    title={navGroupKnobs.title}
                    titleColor={navGroupKnobs.titleColor}
                    titleDivider={navGroupKnobs.titleDivider}
                />
                <DrawerNavGroup
                    items={links2}
                    titleContent={
                        <div
                            style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                fontWeight: 600,
                            }}
                        >
                            <Typography variant={'overline'} style={{ lineHeight: 'unset' }}>
                                NavGroup 2
                            </Typography>
                            <div>Software Version v1.0.3</div>
                        </div>
                    }
                    titleColor={navGroupKnobs.titleColor}
                    titleDivider={navGroupKnobs.titleDivider}
                />
            </DrawerBody>

            {showFooter && (
                <DrawerFooter backgroundColor={footerBackgroundColor} {...footerKnobs}>
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                            flexDirection: 'row',
                            padding: 16,
                        }}
                    >
                        <img
                            src={isDarkMode ? EatonFooterLogoDark : EatonFooterLogoLight}
                            alt="Eaton Logo"
                            height={28}
                            width={'auto'}
                        />
                        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                            <Typography
                                variant={'caption'}
                            >{`Copyright \u00A9 Eaton ${new Date().getFullYear()}`}</Typography>
                            <Typography variant={'caption'}>All Rights Reserved</Typography>
                        </div>
                    </div>
                </DrawerFooter>
            )}
        </Drawer>
    );
}
Example #6
Source File: with-nested-list-items.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up
withNestedListItems = (): StoryFnReactReturnType => {
    const [selected, setSelected] = useState('');
    const DrawerNavGroupID = 'DrawerNavGroup';
    const open = boolean('open', true, DrawerNavGroupID);
    const divider = boolean('divider', true, DrawerNavGroupID);
    const nestedDivider = boolean('nestedDivider', false, DrawerNavGroupID);
    const chevron = boolean('chevron', false, DrawerNavGroupID);
    const nestedBackgroundColor = color('nestedBackgroundColor', '', DrawerNavGroupID);
    const groupUseExpandIcon = select(
        'expandIcon',
        ['undefined', '<Add />', '<PinDrop />'],
        'undefined',
        DrawerNavGroupID
    );
    const groupUseCollapseIcon = select(
        'collapseIcon',
        ['undefined', '<Remove />', '<Groups />'],
        'undefined',
        DrawerNavGroupID
    );

    const NavItemID = 'NavItem';
    const showIcon = boolean('Show Top-Level Icons', true, NavItemID);
    const hidePadding = boolean('hidePadding', false, NavItemID);
    const useRightComponent = select(
        'rightComponent',
        ['undefined', '<ListItemTag />', '<ChannelValue />'],
        'undefined',
        NavItemID
    );
    const itemUseExpandIcon = select('expandIcon', ['undefined', '<Add />', '<PinDrop />'], 'undefined', NavItemID);
    const itemUseCollapseIcon = select(
        'collapseIcon',
        ['undefined', '<Remove />', '<AddAPhoto />'],
        'undefined',
        NavItemID
    );

    const rightComponent = ((): JSX.Element | undefined => {
        switch (useRightComponent) {
            case 'undefined':
                return undefined;
            case '<ListItemTag />':
                return <ListItemTag label="56+" backgroundColor={Colors.gold[50]} fontColor={Colors.gold[800]} />;
            case '<ChannelValue />':
                return <ChannelValue value={2} units={'V'} />;
            default:
                break;
        }
    })();

    const drawerItemList = (): JSX.Element => (
        <DrawerBody disableActiveItemParentStyles={boolean('disableActiveItemParentStyles', false, DrawerNavGroupID)}>
            <DrawerNavGroup
                divider={divider}
                nestedDivider={nestedDivider}
                hidePadding={hidePadding}
                chevron={chevron}
                nestedBackgroundColor={nestedBackgroundColor}
                expandIcon={getIcon(groupUseExpandIcon)}
                collapseIcon={getIcon(groupUseCollapseIcon)}
                items={[
                    {
                        title: userGuide,
                        icon: showIcon ? <MenuBook /> : undefined,
                        itemID: userGuide,
                        rightComponent: rightComponent,
                        expandIcon: getIcon(itemUseExpandIcon),
                        collapseIcon: getIcon(itemUseCollapseIcon),
                        items: [
                            {
                                title: gettingStarted,
                                itemID: gettingStarted,
                                subtitle: 'Introduction to Eaton',
                                onClick: (): void => {
                                    setSelected(gettingStarted);
                                },
                            },
                            {
                                title: tutorials,
                                itemID: tutorials,
                                items: [
                                    {
                                        title: forDevelopers,
                                        itemID: forDevelopers,
                                        onClick: (): void => {
                                            setSelected(forDevelopers);
                                        },
                                    },
                                    {
                                        title: forDesigners,
                                        itemID: forDesigners,
                                        items: [
                                            {
                                                title: componentLibrary,
                                                itemID: componentLibrary,
                                                onClick: (): void => {
                                                    setSelected(componentLibrary);
                                                },
                                            },
                                            {
                                                title: typographyRules,
                                                itemID: typographyRules,
                                                onClick: (): void => {
                                                    setSelected(typographyRules);
                                                },
                                            },
                                            {
                                                title: themeRules,
                                                itemID: themeRules,
                                                onClick: (): void => {
                                                    setSelected(themeRules);
                                                },
                                            },
                                        ],
                                    },
                                ],
                            },
                            {
                                title: environmentSetup,
                                itemID: environmentSetup,
                                onClick: (): void => {
                                    setSelected(environmentSetup);
                                },
                            },
                        ],
                    },
                    {
                        title: community,
                        itemID: community,
                        icon: showIcon ? <Group /> : undefined,
                        onClick: (): void => {
                            setSelected(community);
                        },
                        items: [
                            {
                                title: license,
                                itemID: license,
                                onClick: (): void => {
                                    setSelected(license);
                                },
                            },
                            {
                                title: contribute,
                                itemID: contribute,
                                items: [
                                    {
                                        title: hallOfFame,
                                        itemID: hallOfFame,
                                        onClick: (): void => {
                                            setSelected(hallOfFame);
                                        },
                                    },
                                    {
                                        title: contributingGuide,
                                        itemID: contributingGuide,
                                        onClick: (): void => {
                                            setSelected(contributingGuide);
                                        },
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        title: accessibility,
                        itemID: accessibility,
                        icon: showIcon ? <Accessibility /> : undefined,
                        onClick: (): void => {
                            setSelected(accessibility);
                        },
                    },
                    {
                        title: notifications,
                        itemID: notifications,
                        icon: showIcon ? <NotificationsActive /> : undefined,
                        onClick: (): void => {
                            setSelected(notifications);
                        },
                    },
                ]}
            />
        </DrawerBody>
    );

    return (
        <Drawer open={open} key={'drawer'} activeItem={selected}>
            <DrawerHeader title={'Brightlayer UI'} icon={<MenuIcon />} />
            {drawerItemList()}
        </Drawer>
    );
}
Example #7
Source File: within-a-DrawerLayout.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up
inDrawerLayout = (): StoryFnReactReturnType => {
    const variant = select('variant', ['permanent', 'persistent', 'temporary', 'rail'], 'persistent');
    const [selected, setSelected] = useState('');
    const isDarkMode = useDarkMode();

    const navGroupItems: NavItem[] = [
        {
            title: 'Identity Management',
            itemID: '1',
            icon: <Person />,
            onClick: (): void => setSelected('1'),
        },
        {
            title: 'Calendar',
            itemID: '2',
            icon: <Today />,
            onClick: (): void => setSelected('2'),
        },
        {
            title: 'Accessibility',
            itemID: '3',
            icon: <Accessibility />,
            onClick: (): void => setSelected('3'),
        },
        {
            title: 'Notifications',
            itemID: '4',
            icon: <NotificationsActive />,
            onClick: (): void => setSelected('4'),
        },
    ];

    return (
        <DrawerLayout
            drawer={
                <Drawer
                    open={boolean('open', true)}
                    width={number('width', 350, {
                        range: true,
                        min: 200,
                        max: 700,
                        step: 50,
                    })}
                    variant={variant}
                    condensed={boolean('condensed (rail only)', false)}
                    ModalProps={{
                        disableEnforceFocus: true,
                    }}
                    activeItem={selected}
                >
                    <DrawerHeader
                        icon={<MenuIcon />}
                        titleContent={
                            <div
                                style={{
                                    paddingLeft: 16,
                                    paddingRight: 16,
                                    display: 'flex',
                                    height: '100%',
                                    flexDirection: 'column',
                                    justifyContent: 'center',
                                }}
                            >
                                <Typography variant={'subtitle2'} style={{ fontWeight: 100 }}>
                                    Brightlayer UI
                                </Typography>
                                <Typography variant={'h6'} style={{ marginTop: -8 }}>
                                    DrawerLayout
                                </Typography>
                            </div>
                        }
                    />
                    <DrawerBody>
                        <DrawerNavGroup items={navGroupItems} />
                    </DrawerBody>
                    {variant !== 'rail' && (
                        <DrawerFooter>
                            <div
                                style={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    alignItems: 'center',
                                    flexDirection: 'row',
                                    padding: 16,
                                }}
                            >
                                <img
                                    src={isDarkMode ? EatonFooterLogoDark : EatonFooterLogoLight}
                                    alt="Eaton Logo"
                                    height={28}
                                    width={'auto'}
                                />
                                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                                    <Typography
                                        variant={'caption'}
                                    >{`Copyright \u00A9 Eaton ${new Date().getFullYear()}`}</Typography>
                                    <Typography variant={'caption'}>All Rights Reserved</Typography>
                                </div>
                            </div>
                        </DrawerFooter>
                    )}
                </Drawer>
            }
        >
            <div
                style={{
                    backgroundColor: '#777',
                    color: 'white',
                    height: '100%',
                    padding: '30px',
                    boxSizing: 'border-box',
                }}
            >
                <Typography variant={'h2'}>Body content goes here.</Typography>
            </div>
        </DrawerLayout>
    );
}