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

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { outlineTemplate } from '@equinor/eds-utils';
import { sidebar } from '../SideBar.tokens.js';
import { useSideBar } from '../SideBar.context.js';
import { jsx } from 'react/jsx-runtime';
import { Typography } from '../../Typography/Typography.js';

const {
  minWidth,
  entities: {
    sidebarItem: {
      minHeight,
      typography: {
        color: typographyColor
      },
      states: {
        active: {
          background: menuActiveBackground,
          typography: {
            color: typographyActiveColor
          }
        },
        focus,
        hover: {
          background: menuHoverBackground
        }
      }
    }
  }
} = sidebar;
const Container = styled.a.withConfig({
  displayName: "SideBarAccordionItem__Container",
  componentId: "sc-1aeo1e1-0"
})(({
  $active
}) => {
  return css(["display:grid;grid-template-columns:", " 1fr;justify-items:stretch;background-color:", ";cursor:pointer;text-decoration:none;border:0;width:100%;padding:0;&:hover{background-color:", ";}&:focus-visible{", ";}"], minWidth, $active ? menuActiveBackground : 'transparent', $active ? menuActiveBackground : menuHoverBackground, outlineTemplate(focus.outline));
});
const TextWrapper = styled.div.withConfig({
  displayName: "SideBarAccordionItem__TextWrapper",
  componentId: "sc-1aeo1e1-1"
})(["min-height:", ";grid-column:2;justify-self:start;display:flex;align-items:center;width:100%;"], minHeight);
const Text = styled(Typography).withConfig({
  displayName: "SideBarAccordionItem__Text",
  componentId: "sc-1aeo1e1-2"
})(({
  $active
}) => {
  return css(["color:", ";width:100%;&::first-letter{text-transform:capitalize;}"], $active ? typographyActiveColor : typographyColor);
});
const SideBarAccordionItem = /*#__PURE__*/forwardRef(function SidebarLink({
  label,
  active,
  onClick,
  as = 'a',
  ...rest
}, ref) {
  const {
    isOpen
  } = useSideBar();
  if (isOpen) {
    return /*#__PURE__*/jsx(Container, {
      as: as,
      tabIndex: 0,
      $active: active,
      onClick: onClick,
      ref: ref,
      ...rest,
      children: /*#__PURE__*/jsx(TextWrapper, {
        children: /*#__PURE__*/jsx(Text, {
          variant: "cell_text",
          group: "table",
          $active: active,
          children: label
        })
      })
    });
  }
  return null;
});
SideBarAccordionItem.displayName = 'SideBarAccordionItem';

export { SideBarAccordionItem };