@dnanpm/styleguide 3.3.1 → 3.5.0

package/build/es/components/Pill/Pill.d.ts

@@ -1,78 +1,78 @@
-import type { ChangeEvent, ReactNode } from 'react';
-import React from 'react';
-type PillType = 'none' | 'checkbox' | 'radio';
-type Position = 'auto' | 'left' | 'right' | 'middle';
-interface Props {
-    /**
-     * Unique ID for the input element
-     */
-    id: string;
-    /**
-     * Name of the input element
-     */
-    name?: string;
-    /**
-     * Allows to change the functionality of component while retaining style
-     *
-     * @param {PillType} none No functionality
-     * @param {PillType} checkbox Acts as a checkbox input type
-     * @param {PillType} radio Acts as a radiobutton input type
-     *
-     * @default 'none'
-     */
-    type?: PillType;
-    /**
-     * Default value of input element
-     *
-     * @default undefined
-     */
-    value?: string | number;
-    /**
-     * On checkbox/radiobutton change callback
-     */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Allows to set position of component relative to other in line content by adding appropriate margins
-     *
-     * @param {Position} auto Pill component is grouped with other pill components, add margins in between
-     * @param {Position} left Pill component is on the left side of content, add right margin
-     * @param {Position} right Pill component is on the right side of content, add left margin
-     * @param {Position} middle Pill component is in the middle of content, add left and right margins
-     *
-     * @default undefined
-     */
-    position?: Position;
-    /**
-     * Allows to set checkbox/radiobutton as checked
-     *
-     * @default false
-     */
-    isChecked?: boolean;
-    /**
-     * Allows to set checkbox/radiobutton as checked by default
-     *
-     * @default false
-     */
-    isDefaultChecked?: boolean;
-    /**
-     * Allows to disable checkbox/radiobutton functionality
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Content of the component
-     */
-    children?: ReactNode;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-}
-declare const Pill: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Pill;
+import type { ChangeEvent, ReactNode } from 'react';
+import React from 'react';
+type PillType = 'none' | 'checkbox' | 'radio';
+type Position = 'auto' | 'left' | 'right' | 'middle';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Allows to change the functionality of component while retaining style
+     *
+     * @param {PillType} none No functionality
+     * @param {PillType} checkbox Acts as a checkbox input type
+     * @param {PillType} radio Acts as a radiobutton input type
+     *
+     * @default 'none'
+     */
+    type?: PillType;
+    /**
+     * Default value of input element
+     *
+     * @default undefined
+     */
+    value?: string | number;
+    /**
+     * On checkbox/radiobutton change callback
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Allows to set position of component relative to other in line content by adding appropriate margins
+     *
+     * @param {Position} auto Pill component is grouped with other pill components, add margins in between
+     * @param {Position} left Pill component is on the left side of content, add right margin
+     * @param {Position} right Pill component is on the right side of content, add left margin
+     * @param {Position} middle Pill component is in the middle of content, add left and right margins
+     *
+     * @default undefined
+     */
+    position?: Position;
+    /**
+     * Allows to set checkbox/radiobutton as checked
+     *
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Allows to set checkbox/radiobutton as checked by default
+     *
+     * @default false
+     */
+    isDefaultChecked?: boolean;
+    /**
+     * Allows to disable checkbox/radiobutton functionality
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+declare const Pill: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Pill;

package/build/es/components/Pill/Pill.js

@@ -4,18 +4,18 @@ import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
-const getBackgroundColor = ({ isChecked, isDisabled }) => {
-    const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
-    const colorValue = isChecked
-        ? theme.color.background.plum.default
-        : theme.color.background.orange.E02;
-    // Only Pill component specific colors to be used on user interaction styles
-    const hoverValue = isChecked ? '#441632' : '#FFB557';
-    const backgroundColor = `background-color: ${colorValue}${alphaValue};`;
-    const hoverBackgroundColor = !isDisabled ? `&:hover { background-color: ${hoverValue}}` : '';
-    return backgroundColor + hoverBackgroundColor;
-};
+const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
+const getBackgroundColor = ({ isChecked, isDisabled }) => {
+    const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
+    const colorValue = isChecked
+        ? theme.color.background.plum.default
+        : theme.color.background.orange.E02;
+    // Only Pill component specific colors to be used on user interaction styles
+    const hoverValue = isChecked ? '#441632' : '#FFB557';
+    const backgroundColor = `background-color: ${colorValue}${alphaValue};`;
+    const hoverBackgroundColor = !isDisabled ? `&:hover { background-color: ${hoverValue}}` : '';
+    return backgroundColor + hoverBackgroundColor;
+};
 const Label = styled__default.label `
     display: inline-block;
     border-radius: ${theme.radius.pill};
@@ -35,17 +35,17 @@ const Label = styled__default.label `
         border: 2px solid ${theme.color.focus.light};
     }
 
-    ${({ position }) => (position === 'right' || position === 'middle') &&
+    ${({ position }) => (position === 'right' || position === 'middle') &&
     `
             margin-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
         `}
 
-    ${({ position }) => (position === 'left' || position === 'middle') &&
+    ${({ position }) => (position === 'left' || position === 'middle') &&
     `
             margin-right: ${getMultipliedSize(theme.base.baseWidth, 1)};
         `}
     
-    ${({ position }) => position === 'auto' &&
+    ${({ position }) => position === 'auto' &&
     `
         margin: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
 
@@ -57,7 +57,7 @@ const Label = styled__default.label `
             margin-right: 0;
         }
     `}
-`;
+`;
 const Input = styled__default.input `
     appearance: none;
     display: block;
@@ -69,12 +69,12 @@ const Input = styled__default.input `
     &:focus-visible {
         outline: 0 none;
     }
-`;
-const Pill = (_a) => {
-    var { type = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    return (React__default.createElement(Label, { as: type === 'none' ? 'div' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId },
-        props.children,
-        type !== 'none' && (React__default.createElement(Input, { id: props.id, name: props.name, type: type, role: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, "aria-checked": props.isChecked || props.isDefaultChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange }))));
+`;
+const Pill = (_a) => {
+    var { type = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
+    return (React__default.createElement(Label, { as: type === 'none' ? 'div' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId },
+        props.children,
+        type !== 'none' && (React__default.createElement(Input, { id: props.id, name: props.name, type: type, role: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, "aria-checked": props.isChecked || props.isDefaultChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange }))));
 };
 
 export { Pill as default };

package/build/es/components/PixelLoader/PixelLoader.d.ts

@@ -1,21 +1,21 @@
-import React from 'react';
-interface Props {
-    /**
-     * Allows to pass custom color
-     *
-     * @default 'theme.color.default.pink'
-     */
-    color?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-/** @visibleName Pixel Loader */
-declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default PixelLoader;
+import React from 'react';
+interface Props {
+    /**
+     * Allows to pass custom color
+     *
+     * @default 'theme.color.default.pink'
+     */
+    color?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Pixel Loader */
+declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default PixelLoader;

package/build/es/components/PixelLoader/PixelLoader.js

@@ -13,13 +13,13 @@ const loading = keyframes `
     40% {
         transform: scale(1);
     }
-`;
+`;
 const PixelLoaderWrapper = styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0.125rem;
-`;
+`;
 const Pixel = styled.div `
     background-color: ${({ color }) => color || theme.color.default.pink};
     display: inline-block;
@@ -28,15 +28,15 @@ const Pixel = styled.div `
     margin: 0.125rem;
     animation: ${loading} 1s ease-in-out infinite;
     animation-delay: ${({ delay }) => delay}s;
-`;
-/** @visibleName Pixel Loader */
-const PixelLoader = (_a) => {
-    var { className, 'data-testid': dataTestId } = _a, props = __rest(_a, ["className", 'data-testid']);
-    return (React__default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
-        React__default.createElement(Pixel, { color: props.color, delay: "-0.27" }),
-        React__default.createElement(Pixel, { color: props.color, delay: "-0.18" }),
-        React__default.createElement(Pixel, { color: props.color, delay: "-0.09" }),
-        React__default.createElement(Pixel, { color: props.color, delay: "0" })));
+`;
+/** @visibleName Pixel Loader */
+const PixelLoader = (_a) => {
+    var { className, 'data-testid': dataTestId } = _a, props = __rest(_a, ["className", 'data-testid']);
+    return (React__default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
+        React__default.createElement(Pixel, { color: props.color, delay: "-0.27" }),
+        React__default.createElement(Pixel, { color: props.color, delay: "-0.18" }),
+        React__default.createElement(Pixel, { color: props.color, delay: "-0.09" }),
+        React__default.createElement(Pixel, { color: props.color, delay: "0" })));
 };
 
 export { PixelLoader as default };

package/build/es/components/PriorityNavigation/PriorityNavigation.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to define aria-label attribute for nav HTML element
+     */
+    navigationLabel?: string;
+    /**
+     * Allows to change label of ButtonIcon
+     *
+     * @default 'Lisää'
+     */
+    dropdownButtonLabel?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/**
+ * @visibleName Priority Navigation
+ */
+declare const PriorityNavigation: ({ dropdownButtonLabel, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default PriorityNavigation;

package/build/es/components/PriorityNavigation/PriorityNavigation.js

@@ -0,0 +1,222 @@
+import { __rest } from 'tslib';
+import { Check, ChevronUp, ChevronDown } from '@dnanpm/icons';
+import React__default, { useRef, useState, useReducer, isValidElement, useEffect, Children } from 'react';
+import useDebounce from '../../hooks/useDebounce.js';
+import useOutsideClick from '../../hooks/useOutsideClick.js';
+import useResizeObserver from '../../hooks/useResizeObserver.js';
+import useWindowSize from '../../hooks/useWindowSize.js';
+import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
+import getElevationShadow from '../../utils/common.js';
+import { media, getMultipliedSize } from '../../utils/styledUtils.js';
+import ButtonIcon from '../Button/ButtonIcon.js';
+import Icon from '../Icon/Icon.js';
+import PriorityNavigationItem from '../PriorityNavigationItem/PriorityNavigationItem.js';
+
+const Container = styled.nav `
+    width: 100%;
+
+    ${media.md `
+        border-bottom: 1px solid ${theme.color.line.L03};
+    `}
+`;
+const ListsContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background-color: ${theme.color.background.white.default};
+
+    ${media.md `
+        justify-content: space-between;
+        flex-direction: row;
+        height: 100%;
+        align-items: center;
+        padding: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
+        margin: 0 auto;
+    `}
+`;
+const MobileDropdown = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 1rem 1.25rem;
+    color: ${theme.color.text.pink};
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    font-weight: ${theme.fontWeight.bold};
+    border-bottom: 3px solid ${theme.color.default.pink};
+`;
+const CoreULStyles = styled.ul `
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+`;
+const NavigationList = styled(CoreULStyles) `
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    width: 100%;
+    background-color: ${theme.color.background.white.default};
+    position: absolute;
+    top: ${getMultipliedSize(theme.base.baseHeight, 5.6)};
+    z-index: 1;
+    visibility: ${({ isMobileNavigationOpen }) => (isMobileNavigationOpen ? 'visible' : 'hidden')};
+    clip-path: inset(
+        0% 0% ${({ isMobileNavigationOpen }) => (isMobileNavigationOpen ? '0%' : '100%')} 0%
+    );
+    transition: all 0.2s ease-in-out;
+
+    ${media.md `
+        position: static;
+        flex-direction: row;
+        visibility: visible;
+        clip-path: none;
+        width: auto;
+        height: 100%;
+    `}
+`;
+const DropdownList = styled(CoreULStyles) `
+    position: absolute;
+    top: ${getMultipliedSize(theme.base.baseHeight, 5.6)};
+    right: 0;
+    z-index: 1;
+    padding-bottom: 0.5rem;
+    background-color: ${theme.color.background.white.default};
+    border: 1px solid ${theme.color.line.L04};
+    border-radius: 0 0 ${theme.radius.default} ${theme.radius.default};
+    visibility: ${({ isDropdownOpen }) => (isDropdownOpen ? 'visible' : 'hidden')};
+    clip-path: inset(0% 0% ${({ isDropdownOpen }) => (isDropdownOpen ? '0%' : '100%')} 0%);
+    transition: all 0.2s ease-in-out;
+
+    ${getElevationShadow({ elevation: 'low' })}
+`;
+const reducer = (state, action) => {
+    var _a;
+    switch (action.type) {
+        case 'moveItemToDropdown': {
+            const lastChild = state.navigationItems[state.navigationItems.length - 1];
+            return Object.assign(Object.assign(Object.assign({}, state), { navigationItems: state.navigationItems.slice(0, -1), dropdownItems: [lastChild, ...state.dropdownItems] }), (((_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.lastItem) && {
+                lastItemWidth: [...state.lastItemWidth, action.payload.lastItem.clientWidth],
+            }));
+        }
+        case 'moveItemToNavigation': {
+            const [firstItemFromList, ...dropdownItems] = state.dropdownItems;
+            const [, ...lastItemWidth] = state.lastItemWidth;
+            return {
+                navigationItems: [...state.navigationItems, firstItemFromList],
+                dropdownItems,
+                lastItemWidth,
+            };
+        }
+        default:
+            return state;
+    }
+};
+const getReactNodeText = (reactNode) => {
+    if (reactNode === null) {
+        return '';
+    }
+    switch (typeof reactNode) {
+        case 'string':
+        case 'number':
+            return reactNode.toString();
+        case 'boolean':
+            return '';
+        case 'object': {
+            if (reactNode instanceof Array) {
+                return reactNode.map(getReactNodeText).join('');
+            }
+            if ('props' in reactNode) {
+                // Unsafe member access .children on an `any` value (@typescript-eslint/no-unsafe-member-access)
+                // eslint-disable-next-line
+                return getReactNodeText(reactNode.props.children);
+            }
+            return '';
+        }
+        default:
+            return '';
+    }
+};
+/**
+ * @visibleName Priority Navigation
+ */
+const PriorityNavigation = (_a) => {
+    var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId } = _a, props = __rest(_a, ["dropdownButtonLabel", 'data-testid']);
+    const listsContainerRef = useRef(null);
+    const navigationListRef = useRef(null);
+    const { isMobile } = useWindowSize(theme.breakpoints.md);
+    const { width: listsContainerWidth } = useResizeObserver(listsContainerRef);
+    const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false);
+    const toggleMobileNavigation = () => setIsMobileNavigationOpen(!isMobileNavigationOpen);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
+    const navigationItems = useRef(new Map()).current;
+    const initialState = {
+        navigationItems: props.children,
+        dropdownItems: [],
+        lastItemWidth: [],
+    };
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const checkHorizontalOverflow = useDebounce(() => {
+        if (navigationListRef.current && listsContainerRef.current) {
+            const listsContainerRefWidth = navigationListRef.current.scrollWidth;
+            if (state.navigationItems.length > 0 &&
+                listsContainerRefWidth + 80 > listsContainerWidth) {
+                dispatch({
+                    type: 'moveItemToDropdown',
+                    payload: {
+                        lastItem: navigationItems.get(state.navigationItems.length - 1),
+                    },
+                });
+            }
+            else if (state.dropdownItems.length > 0 &&
+                listsContainerWidth >
+                    listsContainerRefWidth +
+                        state.lastItemWidth[state.lastItemWidth.length - 1] +
+                        100) {
+                dispatch({
+                    type: 'moveItemToNavigation',
+                });
+            }
+        }
+    }, 100);
+    const selectedItem = isMobile &&
+        getReactNodeText([...state.navigationItems, ...state.dropdownItems].find(child => isValidElement(child) &&
+            child.type === PriorityNavigationItem &&
+            child.props.isActive));
+    useOutsideClick(listsContainerRef, () => {
+        if (isDropdownOpen) {
+            setIsDropdownOpen(false);
+        }
+    });
+    useEffect(() => {
+        if (!isMobile) {
+            checkHorizontalOverflow();
+        }
+    }, [
+        state.navigationItems,
+        state.dropdownItems,
+        listsContainerWidth,
+        checkHorizontalOverflow,
+        isMobile,
+    ]);
+    const navigationListItems = Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => isValidElement(navigationItem) &&
+        navigationItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: navigationItem.props.id, key: navigationItem.key, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
+        navigationItem.props.children,
+        navigationItem.props.isActive && isMobile && (React__default.createElement(Icon, { icon: Check, color: theme.color.default.pink })))));
+    return (React__default.createElement(Container, { id: props.id, "aria-label": props.navigationLabel, className: props.className, "data-testid": dataTestId },
+        React__default.createElement(ListsContainer, { ref: listsContainerRef },
+            isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation },
+                selectedItem,
+                React__default.createElement(Icon, { icon: isMobileNavigationOpen ? ChevronUp : ChevronDown }))),
+            React__default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen }, navigationListItems),
+            !isMobile && Boolean(state.dropdownItems.length) && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(ButtonIcon, { onClick: toggleDropdown, icon: isDropdownOpen ? ChevronUp : ChevronDown, isReversed: true }, dropdownButtonLabel),
+                React__default.createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, state.dropdownItems))))));
+};
+
+export { PriorityNavigation as default };

package/build/es/components/PriorityNavigation/__tests__/PriorityNavigation.spec.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

package/build/es/components/PriorityNavigationItem/PriorityNavigationItem.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode, RefObject } from 'react';
+import React from 'react';
+export interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * A ref object, or a ref callback function
+     */
+    innerRef?: RefObject<HTMLLIElement> | ((instance: HTMLLIElement | null) => void) | null;
+    /**
+     * Allows to set component as active
+     */
+    isActive?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/**
+ * @visibleName Priority NavigationItem
+ */
+declare const PriorityNavigationItem: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default PriorityNavigationItem;

package/build/es/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -0,0 +1,54 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
+import { media } from '../../utils/styledUtils.js';
+
+const Element = styled.li `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    list-style: none;
+    position: relative;
+    padding: 1rem 1.25rem;
+    flex-shrink: 0;
+
+    ${({ isActive }) => media.md `
+        justify-content: center;
+        padding: 1rem 0;
+        margin: auto 1.25rem;
+        border-top: 3px solid transparent;
+        border-bottom: 3px solid ${isActive ? theme.color.text.pink : 'transparent'};
+    `}
+
+    & a {
+        display: block;
+        color: ${({ isActive }) => (isActive ? theme.color.text.pink : theme.color.text.black)};
+        ${({ isActive }) => isActive && `font-weight: ${theme.fontWeight.bold}`};
+        border: 2px solid transparent;
+
+        &:focus {
+            border-radius: ${theme.radius.s};
+            border: 2px solid ${theme.color.focus.light};
+            box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
+            outline: none;
+        }
+
+        ${media.md `
+            margin: auto;
+        `}
+
+        &:hover {
+            color: ${theme.color.hover.pink};
+        }
+    }
+`;
+/**
+ * @visibleName Priority NavigationItem
+ */
+const PriorityNavigationItem = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
+    return (React__default.createElement(Element, { id: props.id, ref: props.innerRef, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
+};
+
+export { PriorityNavigationItem as default };

package/build/es/components/PriorityNavigationItem/__tests__/PriorityNavigationItem.spec.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';