[NavMenuItem] - implement component

packages/ui/src/2_molecules/NavMenuItem/NavMenuItem.module.css

@@ -0,0 +1,21 @@
+.navMenuItem {
+    @apply relative text-gray-10 text-opacity-75 inline-flex text-sm leading-4 px-2 py-3 rounded transition-colors cursor-pointer;
+
+    &.count {
+      @apply pr-[1.625rem];
+    }
+
+    &.active {
+      @apply bg-gray-70 text-gray-10;
+    }
+
+    &:hover {
+      @apply text-gray-10;
+    }
+
+    & > span {
+        &:last-child {
+            @apply absolute top-[0.3125rem] right-2;
+        }
+    }
+}

packages/ui/src/2_molecules/NavMenuItem/NavMenuItem.stories.tsx

@@ -0,0 +1,35 @@
+import { Story } from '@storybook/react';
+
+import React, { ComponentProps, useCallback, useState } from 'react';
+
+import { NavMenuItem } from './NavMenuItem';
+
+export default {
+  title: 'Molecule/NavMenuItem',
+  component: NavMenuItem,
+};
+
+const Template: Story<ComponentProps<typeof NavMenuItem>> = () => (
+  <>
+    <NavMenuItem children="Zero" count={10} />
+    <NavMenuItem children="Perpetual" className="mx-5" />
+    <NavMenuItem children="999 notifications" count={999} className="mr-5" />
+    <NavMenuItem children="Selected item" count={2} isActive />
+  </>
+);
+
+export const Basic = Template.bind({});
+
+const InteractiveTemplate: Story<ComponentProps<typeof NavMenuItem>> = args => {
+  const [active, setActive] = useState(false);
+  const onClick = useCallback(() => setActive(active => !active), []);
+
+  return <NavMenuItem {...args} onClick={onClick} isActive={active} />;
+};
+
+export const Interactive = InteractiveTemplate.bind({});
+Interactive.args = {
+  children: 'Menu item',
+  count: 1,
+  className: 'm-2',
+};

packages/ui/src/2_molecules/NavMenuItem/NavMenuItem.test.tsx

@@ -0,0 +1,42 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import React, { useCallback, useState } from 'react';
+
+import { NavMenuItem } from './NavMenuItem';
+
+const TestComponent = () => {
+  const [selected, setSelected] = useState(false);
+  const onClick = useCallback(() => setSelected(selected => !selected), []);
+  return (
+    <NavMenuItem children="Menu item" onClick={onClick} isActive={selected} />
+  );
+};
+
+describe('NavMenuItem', () => {
+  it('renders nav menu item', () => {
+    const { getByText } = render(<NavMenuItem children="Menu item" />);
+    expect(getByText('Menu item')).toBeInTheDocument();
+  });
+
+  it('should be active after click', () => {
+    const { getByText } = render(<TestComponent />);
+    userEvent.click(getByText('Menu item'));
+    const classes = getByText('Menu item').getAttribute('class');
+    expect(classes).toContain('active');
+  });
+
+  it('should show a count inside the Badge', () => {
+    const { getByText } = render(
+      <NavMenuItem children="Menu item" count={5} />,
+    );
+    expect(getByText('5')).toBeInTheDocument();
+  });
+
+  it('should show the maximum number which is 99 inside the Badge', () => {
+    const { getByText } = render(
+      <NavMenuItem children="Menu item" count={1000} />,
+    );
+    expect(getByText('99')).toBeInTheDocument();
+  });
+});

packages/ui/src/2_molecules/NavMenuItem/NavMenuItem.tsx

@@ -0,0 +1,50 @@
+import React, { FC, ReactNode, useMemo, useRef } from 'react';
+
+import classNames from 'classnames';
+
+import { Badge } from '../../1_atoms/Badge/Badge';
+import styles from './NavMenuItem.module.css';
+
+const MAX_NOTIFICATIONS_COUNT = 99;
+
+type NavMenuItemProps = {
+  count?: number;
+  onClick?: () => void;
+  children: ReactNode;
+  isActive?: boolean;
+  className?: string;
+  dataActionId?: string;
+};
+
+export const NavMenuItem: FC<NavMenuItemProps> = ({
+  count,
+  onClick,
+  children,
+  isActive,
+  className,
+  dataActionId,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const formattedCount = useMemo(
+    () =>
+      count && count > MAX_NOTIFICATIONS_COUNT
+        ? MAX_NOTIFICATIONS_COUNT
+        : count,
+    [count],
+  );
+
+  return (
+    <div
+      data-action-id={dataActionId}
+      onClick={onClick}
+      className={classNames(styles.navMenuItem, className, {
+        [styles.active]: isActive,
+        [styles.count]: formattedCount,
+      })}
+      ref={ref}
+    >
+      {children}
+      {formattedCount && <Badge content={formattedCount} />}
+    </div>
+  );
+};