UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

98 lines (95 loc) 2.34 kB
import { forwardRef } from 'react'; import { Button } from '../../Button/index.js'; import { Icon } from '../../Icon/index.js'; import { sidebar } from '../SideBar.tokens.js'; import { useSideBar } from '../SideBar.context.js'; import styled, { css } from 'styled-components'; import { jsx, jsxs } from 'react/jsx-runtime'; import { Tooltip } from '../../Tooltip/Tooltip.js'; const { entities: { actionButton: { typography: { color: primaryWhite } } } } = sidebar; const MenuButtonContainer = styled.div.withConfig({ displayName: "SideBarButton__MenuButtonContainer", componentId: "sc-15xlkyo-0" })(({ open, theme }) => { const { entities: { actionButton: { spacings: { right, left, top, bottom } } } } = theme; return css(["display:", ";grid-template-columns:", " 1fr ", ";justify-content:center;align-items:center;margin-block-start:", ";margin-block-end:", ";box-sizing:border-box;"], open ? 'grid' : 'flex', left, right, top, bottom); }); const ExtendedButton = styled(Button).withConfig({ displayName: "SideBarButton__ExtendedButton", componentId: "sc-15xlkyo-1" })(() => { return css(["height:40px;grid-column:2;width:fit-content;"]); }); const SideBarButton = /*#__PURE__*/forwardRef(function SideBarToggle({ label, icon, style, className, ...rest }, ref) { const props = { ...rest, ref }; const styleProps = { style, className }; const { isOpen } = useSideBar(); if (isOpen) { return /*#__PURE__*/jsx(MenuButtonContainer, { open: isOpen, ...styleProps, children: /*#__PURE__*/jsxs(ExtendedButton, { open: true, variant: "contained", ...props, children: [/*#__PURE__*/jsx(Icon, { data: icon, color: primaryWhite }), " ", label] }) }); } return /*#__PURE__*/jsx(Tooltip, { title: label, placement: "right", children: /*#__PURE__*/jsx(MenuButtonContainer, { open: isOpen, ...styleProps, children: /*#__PURE__*/jsx(Button, { variant: "contained_icon", ...props, children: /*#__PURE__*/jsx(Icon, { data: icon, color: primaryWhite }) }) }) }); }); export { SideBarButton };