@equinor/eds-core-react/dist/esm/components/SideBar/SideBarButton/index.js

The React implementation of the Equinor Design System

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 };