@dnanpm/styleguide/build/cjs/components/PriorityNavigationItem/PriorityNavigationItem.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var styledUtils = require('../../utils/styledUtils.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

const Element = styledComponents.styled.li `
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    position: relative;
    padding: 0.75rem 1.25rem;
    flex-shrink: 0;

    ${({ onClick }) => onClick && `cursor: pointer;`}

    &:focus-within {
        & > *:not(a, span.dnasg-icon) {
            border-radius: ${theme.default.radius.s};
            border: 2px solid ${theme.default.color.focus.light};
            box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
            outline: none;
        }
    }

    ${({ $isActive }) => styledUtils.media.md `
        justify-content: left;
        padding: 1rem 0;
        margin: auto 1rem;
        border-top: 3px solid transparent;
        border-bottom: 3px solid ${$isActive ? theme.default.color.text.pink : 'transparent'};
    `}

    & > a {
        text-decoration: none;

        &:focus-visible {
            border-radius: ${theme.default.radius.s};
            border: 2px solid ${theme.default.color.focus.light};
            box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
            outline: none;
        }
    }

    & > * {
        display: block;
        color: ${({ $isActive }) => ($isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
        ${({ $isActive }) => $isActive && `font-weight: ${theme.default.fontWeight.bold};`}
        border: 2px solid transparent;

        &:hover {
            color: ${theme.default.color.hover.pink};
            text-decoration: none;
        }
    }
`;
/**
 * @visibleName Priority NavigationItem
 */
const PriorityNavigationItem = React__default.default.forwardRef((_a, ref) => {
    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
    return (React__default.default.createElement(Element, { id: props.id, ref: ref, onClick: props.onClick, onKeyDown: props.onKeyDown, "$isActive": props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
});
PriorityNavigationItem.displayName = 'PriorityNavigationItem';

exports.default = PriorityNavigationItem;