@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
26 lines (23 loc) • 1.55 kB
JavaScript
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { typographyTemplate, spacingsTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
import { jsx } from 'react/jsx-runtime';
const StyledLinkItem = styled.li.withConfig({
displayName: "LinkItem__StyledLinkItem",
componentId: "sc-1tfuad4-0"
})(({
theme
}) => {
return css(["list-style:none;margin:0;padding:0;a{text-decoration:none;", " ", " height:", ";width:", ";display:block;position:relative;svg{fill:", ";margin-right:", ";vertical-align:text-bottom;}span{max-width:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;display:inline-block;}&:focus{", ";}@media (hover:hover) and (pointer:fine){&:hover{", " background:", ";", " svg{fill:", ";}}}&:active{outline:none;}}"], typographyTemplate(theme.entities.links.typography), spacingsTemplate(theme.entities.links.spacings), theme.entities.links.typography.lineHeight, theme.entities.links.width, theme.entities.icon.background, theme.entities.icon.spacings.right, theme.entities.span.maxWidth, outlineTemplate(theme.states.focus.outline), typographyTemplate(theme.states.hover.typography), theme.states.hover.background, bordersTemplate(theme.states.hover.border), theme.states.hover.entities.icon.background);
});
const LinkItem = /*#__PURE__*/forwardRef(function LinkItem({
children,
...props
}, ref) {
return /*#__PURE__*/jsx(StyledLinkItem, {
...props,
ref: ref,
children: children
});
});
export { LinkItem };