LF-4711 Refactor HoverPillOverflow and HoverPill into one component H…

…overPillOverflowList

packages/webapp/src/components/HoverPill/index.tsx → packages/webapp/src/components/HoverPillOverflowList/index.tsx

@@ -1,5 +1,5 @@
 /*
- *  Copyright 2024 LiteFarm.org
+ *  Copyright 2024, 2025 LiteFarm.org
  *  This file is part of LiteFarm.
  *
  *  LiteFarm is free software: you can redistribute it and/or modify
@@ -18,16 +18,21 @@ import { Tooltip } from '@mui/material';
 import styles from './styles.module.scss';
 import { Semibold, Main } from '../Typography';
 
-export interface HoverPillProps {
+export interface HoverPillOverflowListProps {
   items: string[];
+  noneText?: string;
 }
 
-export const HoverPill = ({ items }: HoverPillProps) => {
+export const HoverPillOverflowList = ({ items, noneText = '' }: HoverPillOverflowListProps) => {
   const { t } = useTranslation();
 
+  if (items.length === 0) {
+    return <Main className={styles.itemText}>{noneText}</Main>;
+  }
+
   const hoverContent = (
     <>
-      {items.map((item, index) => (
+      {items.slice(1).map((item, index) => (
         <Main key={index} className={styles.detailText}>
           {item}
         </Main>
@@ -48,21 +53,26 @@ export const HoverPill = ({ items }: HoverPillProps) => {
   };
 
   return (
-    <Tooltip
-      title={hoverContent}
-      placement="bottom-end"
-      classes={{
-        tooltip: styles.hoverDetails,
-      }}
-      PopperProps={PopperProps}
-      enterTouchDelay={0}
-      leaveTouchDelay={900000}
-    >
-      <div className={styles.pill}>
-        <Semibold className={styles.pillText}>
-          {t('HOVERPILL.PLUS_OTHERS_COUNT', { count: items.length })}
-        </Semibold>
-      </div>
-    </Tooltip>
+    <div className={styles.container}>
+      <Main className={styles.itemText}>{items[0]}</Main>
+      {items.length > 1 && (
+        <Tooltip
+          title={hoverContent}
+          placement="bottom-end"
+          classes={{
+            tooltip: styles.hoverDetails,
+          }}
+          PopperProps={PopperProps}
+          enterTouchDelay={0}
+          leaveTouchDelay={900000}
+        >
+          <div className={styles.pill}>
+            <Semibold className={styles.pillText}>
+              {t('HOVERPILL.PLUS_OTHERS_COUNT', { count: items.length - 1 })}
+            </Semibold>
+          </div>
+        </Tooltip>
+      )}
+    </div>
   );
 };

packages/webapp/src/components/HoverPill/styles.module.scss → packages/webapp/src/components/HoverPillOverflowList/styles.module.scss

@@ -1,5 +1,5 @@
 /*
- *  Copyright 2024 LiteFarm.org
+ *  Copyright 2024, 2025 LiteFarm.org
  *  This file is part of LiteFarm.
  *
  *  LiteFarm is free software: you can redistribute it and/or modify
@@ -13,6 +13,17 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
+.container {
+  display: flex;
+  gap: 8px;
+}
+
+.itemText {
+  color: var(--Colors-Neutral-Neutral-700);
+  font-size: 16px;
+  font-weight: 400;
+}
+
 .pillText,
 .detailText {
   user-select: none;

packages/webapp/src/components/Table/Cell/index.tsx

@@ -13,17 +13,16 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 import Plain from './CellTypes/Plain';
-import HoverPillOverflow from './CellTypes/HoverPillOverflow';
 import RightChevronLink from './CellTypes/RightChevronLink';
 import IconText from './CellTypes/IconText';
 import { StatusIndicatorPill, StatusIndicatorPillProps } from '../../StatusIndicatorPill';
+import { HoverPillOverflowList, HoverPillOverflowListProps } from '../../HoverPillOverflowList';
 import { CellKind } from '../types';
-import type { HoverPillOverflowProps } from './CellTypes/HoverPillOverflow';
 import type { IconTextProps } from './CellTypes/IconText';
 import type { PlainCellProps } from './CellTypes/Plain';
 import type { RightChevronLinkProps } from './CellTypes/RightChevronLink';
 
-type HoverPillOverflowPropsStrategy = HoverPillOverflowProps & {
+type HoverPillOverflowPropsStrategy = HoverPillOverflowListProps & {
   kind: CellKind.HOVER_PILL_OVERFLOW;
 };
 type IconTextPropsStrategy = IconTextProps & { kind: CellKind.ICON_TEXT };
@@ -47,7 +46,7 @@ type CellStrategyProps =
 const Cell = ({ kind, ...props }: CellStrategyProps) => {
   switch (kind) {
     case CellKind.HOVER_PILL_OVERFLOW:
-      return <HoverPillOverflow {...(props as HoverPillOverflowProps)} />;
+      return <HoverPillOverflowList {...(props as HoverPillOverflowListProps)} />;
     case CellKind.ICON_TEXT:
       return <IconText {...(props as IconTextProps)} />;
     case CellKind.PLAIN:

packages/webapp/src/components/Table/Cell/styles.module.scss

@@ -73,10 +73,6 @@
   font-size: 12px;
 }
 
-.marginRight8px {
-  margin-right: 8px;
-}
-
 .highlightedText {
   display: flex;
   padding: 4px;

packages/webapp/src/stories/HoverPill/HoverPill.stories.tsx → packages/webapp/src/stories/HoverPillOverflowList/HoverPillOverflowList.stories.tsx

@@ -17,17 +17,20 @@ import { ReactNode } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import clsx from 'clsx';
 import { componentDecoratorsFullHeight } from '../Pages/config/Decorators';
-import { HoverPill, HoverPillProps } from '../../components/HoverPill';
+import {
+  HoverPillOverflowList,
+  HoverPillOverflowListProps,
+} from '../../components/HoverPillOverflowList';
 import styles from './styles.module.scss';
 
-type HoverPillStoryProps = HoverPillProps & {
+type HoverPillStoryProps = HoverPillOverflowListProps & {
   position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
 };
 
 // https://storybook.js.org/docs/writing-stories/typescript
 const meta: Meta<HoverPillStoryProps> = {
-  title: 'Components/HoverPill',
-  component: HoverPill,
+  title: 'Components/HoverPillOverflowList',
+  component: HoverPillOverflowList,
   argTypes: {
     position: {
       control: 'select',
@@ -66,16 +69,35 @@ const Wrapper = ({ children, position = 'center' }: WrapperProps) => {
   return <div className={clsx(styles.wrapper, styles[position])}>{children}</div>;
 };
 
-type Story = StoryObj<typeof HoverPill>;
+type Story = StoryObj<typeof HoverPillOverflowList>;
 
-export const Plural: Story = {
+export const NoItems: Story = {
   args: {
-    items: ['Heifers', 'Foot Rot treatment', 'Feeding change'],
+    items: [],
+  },
+};
+
+export const NoItemsWithNoneText: Story = {
+  args: {
+    items: [],
+    noneText: 'none',
+  },
+};
+
+export const OneItem: Story = {
+  args: {
+    items: ['Heifers'],
   },
 };
 
-export const Singular: Story = {
+export const TwoItems: Story = {
   args: {
-    items: ['Feeding change'],
+    items: ['Heifers', 'Foot Rot treatment'],
+  },
+};
+
+export const ThreeItems: Story = {
+  args: {
+    items: ['Heifers', 'Foot Rot treatment', 'Feeding change'],
   },
 };