LF-4711 Remove variants and accept both strings as props; update stor…

…ies accordingly
LiteFarmOrg · Feb 4, 2025 · 6e1691d · 6e1691d
1 parent 69eaea8
commit 6e1691d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 31 deletions.
diff --git a/packages/webapp/src/components/StatusIndicatorPill/index.tsx b/packages/webapp/src/components/StatusIndicatorPill/index.tsx
@@ -25,38 +25,22 @@ export enum Status {
   OFFLINE = 'OFFLINE',
 }
 
-export enum PillVariant {
-  SENSOR = 'SENSOR',
-}
-
 export interface StatusIndicatorPillProps {
   status: Status;
-  variant?: PillVariant;
+  pillText: string;
+  tooltipText?: string;
   showHoverTooltip?: boolean;
 }
 
-const statusTextMapping = {
-  [PillVariant.SENSOR]: {
-    [Status.ONLINE]: {
-      pillText: 'STATUS.ONLINE',
-      tooltipText: 'STATUS.SENSOR.ONLINE_TOOLTIP',
-    },
-    [Status.OFFLINE]: {
-      pillText: 'STATUS.OFFLINE',
-      tooltipText: 'STATUS.SENSOR.OFFLINE_TOOLTIP',
-    },
-  },
-};
-
 export const StatusIndicatorPill = ({
   status,
-  variant = PillVariant.SENSOR,
+  pillText,
+  tooltipText = '',
   showHoverTooltip = true,
 }: StatusIndicatorPillProps) => {
   const { t } = useTranslation();
 
   const isOnline = status === Status.ONLINE;
-  const { pillText, tooltipText } = statusTextMapping[variant][status];
 
   const hoverContent = <Main className={styles.hoverText}>{t(tooltipText)}</Main>;
 

diff --git a/packages/webapp/src/stories/StatusIndicatorPill/StatusIndicatorPill.stories.tsx b/packages/webapp/src/stories/StatusIndicatorPill/StatusIndicatorPill.stories.tsx
@@ -72,21 +72,27 @@ const Wrapper = ({ children, position = 'center' }: WrapperProps) => {
 
 type Story = StoryObj<typeof StatusIndicatorPill>;
 
-export const SensorOnline: Story = {
+export const Online: Story = {
   args: {
     status: Status.ONLINE,
+    pillText: 'Online',
+    tooltipText: 'Device has sent data in the last 12 hours',
   },
 };
 
-export const SensorOffline: Story = {
+export const Offline: Story = {
   args: {
     status: Status.OFFLINE,
+    pillText: 'Offline',
+    tooltipText: 'Device has not sent data in the last 12 hours',
   },
 };
 
-export const SensorNoHoverTooltip: Story = {
+export const HoverTooltipDisabled: Story = {
   args: {
     status: Status.OFFLINE,
+    pillText: 'Offline',
+    tooltipText: 'Device has not sent data in the last 12 hours',
     showHoverTooltip: false,
   },
 };
diff --git a/packages/webapp/src/stories/Table/TableCells.stories.jsx b/packages/webapp/src/stories/Table/TableCells.stories.jsx
@@ -45,14 +45,18 @@ const getFakeColumns = () => {
     },
     {
       id: 'StatusIndicatorPill',
-      label: 'Status',
-      format: (d) => (
-        <Cell
-          kind={CellKind.STATUS_INDICATOR_PILL}
-          status={Math.random() < 1 / 4 ? Status.OFFLINE : Status.ONLINE}
-          showHoverTooltip={false}
-        />
-      ),
+      label: 'Availability',
+      format: (d) => {
+        const isAvailable = Math.random() < 3 / 4;
+        return (
+          <Cell
+            kind={CellKind.STATUS_INDICATOR_PILL}
+            status={isAvailable ? Status.ONLINE : Status.OFFLINE}
+            pillText={isAvailable ? 'Available' : 'Sold out'}
+            tooltipText={isAvailable ? 'This crop is available' : 'This crop is sold out'}
+          />
+        );
+      },
       sortable: false,
     },
     {