@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
98 lines (95 loc) • 2.34 kB
JavaScript
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 };