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

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import { sidebar } from '../SideBar.tokens.js';
import { bordersTemplate, outlineTemplate } from '@equinor/eds-utils';
import { Icon } from '../../Icon/index.js';
import styled, { css } from 'styled-components';
import { useSideBar } from '../SideBar.context.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Typography } from '../../Typography/Typography.js';
import { Tooltip as Tooltip$1 } from '../../Tooltip/Tooltip.js';

const {
  entities: {
    sidebarItem: {
      typography: {
        color: itemTextColor
      },
      states: {
        active: {
          typography: {
            color: iconActive
          }
        }
      }
    }
  }
} = sidebar;
const Container = styled.a.withConfig({
  displayName: "SidebarLink__Container",
  componentId: "sc-gbehcj-0"
})(({
  theme,
  $active
}) => {
  const {
    minWidth,
    entities: {
      sidebarItem: {
        minHeight,
        border,
        states: {
          active: {
            background: menuActiveBackground
          },
          hover: {
            background: menuHoverBackground
          },
          focus,
          disabled: {
            background: menuDisabledBackground,
            typography: {
              color: menuDisabledText
            }
          }
        }
      }
    }
  } = theme;
  return css(["background-color:", ";display:grid;grid-template-columns:", " 1fr;width:100%;padding:0;place-items:center;border:0;", " text-decoration:none;min-height:", ";&:hover{cursor:pointer;background-color:", ";}&:disabled{background-color:", ";color:", ";cursor:not-allowed;& > p{color:", ";}& > svg{fill:", ";}}&:focus-visible{", ";}"], $active ? menuActiveBackground : 'transparent', minWidth, bordersTemplate(border), minHeight, $active ? menuActiveBackground : menuHoverBackground, menuDisabledBackground, menuDisabledText, menuDisabledText, menuDisabledText, outlineTemplate(focus.outline));
});
const ItemText = styled(Typography).withConfig({
  displayName: "SidebarLink__ItemText",
  componentId: "sc-gbehcj-1"
})(({
  theme,
  $active
}) => {
  const {
    entities: {
      sidebarItem: {
        typography: {
          color: itemTextColor
        },
        states: {
          active: {
            typography: {
              color: itemActiveTextColor
            }
          }
        }
      }
    }
  } = theme;
  return css(["justify-self:start;color:", ";&::first-letter{text-transform:capitalize;}"], $active ? itemActiveTextColor : itemTextColor);
});
const Tooltip = styled(Tooltip$1).withConfig({
  displayName: "SidebarLink__Tooltip",
  componentId: "sc-gbehcj-2"
})(["text-transform:capitalize;"]);
const SidebarLink = /*#__PURE__*/forwardRef(function SidebarLink({
  icon,
  label,
  active,
  onClick,
  as = 'a',
  ...rest
}, ref) {
  const {
    isOpen
  } = useSideBar();
  const getIconColor = () => {
    return active ? iconActive : itemTextColor;
  };
  if (isOpen) {
    return /*#__PURE__*/jsxs(Container, {
      as: as,
      tabIndex: 0,
      $active: active,
      onClick: onClick,
      ref: ref,
      ...rest,
      children: [icon && /*#__PURE__*/jsx(Icon, {
        data: icon,
        color: getIconColor()
      }), /*#__PURE__*/jsx(ItemText, {
        variant: "cell_text",
        group: "table",
        $active: active,
        children: label
      })]
    });
  }
  return /*#__PURE__*/jsx(Tooltip, {
    title: label,
    placement: "right",
    children: /*#__PURE__*/jsx(Container, {
      tabIndex: 0,
      as: as,
      $active: active,
      onClick: onClick,
      ref: ref,
      ...rest,
      children: icon && /*#__PURE__*/jsx(Icon, {
        data: icon,
        color: getIconColor()
      })
    })
  });
});
SidebarLink.displayName = 'SidebarLink';

export { SidebarLink };