Merge pull request #3115 from LiteFarmOrg/LF-4079-create-reusable-gro…

…up-pill-component

LF-4079 Create reusable group pill component

packages/webapp/public/locales/en/translation.json

@@ -890,6 +890,10 @@
   "HOME": {
     "GREETING": "Good day, "
   },
+  "HOVERPILL": {
+    "PLUS_OTHERS_COUNT_one": "+ {{count}} other",
+    "PLUS_OTHERS_COUNT_other": "+ {{count}} others"
+  },
   "INSIGHTS": {
     "BIODIVERSITY": {
       "AMPHIBIANS": "Amphibians",

packages/webapp/public/locales/es/translation.json

@@ -889,6 +889,10 @@
   "HOME": {
     "GREETING": "Buen dia,"
   },
+  "HOVERPILL": {
+    "PLUS_OTHERS_COUNT_one": "MISSING",
+    "PLUS_OTHERS_COUNT_other": "MISSING"
+  },
   "INSIGHTS": {
     "BIODIVERSITY": {
       "AMPHIBIANS": "Anfibio",

packages/webapp/public/locales/fr/translation.json

@@ -889,6 +889,10 @@
   "HOME": {
     "GREETING": "Bonjour, "
   },
+  "HOVERPILL": {
+    "PLUS_OTHERS_COUNT_one": "+ {{count}} autre",
+    "PLUS_OTHERS_COUNT_other": "+ {{count}} autres"
+  },
   "INSIGHTS": {
     "BIODIVERSITY": {
       "AMPHIBIANS": "Amphibiens",

packages/webapp/public/locales/pt/translation.json

@@ -888,6 +888,10 @@
   "HOME": {
     "GREETING": "Bom dia, "
   },
+  "HOVERPILL": {
+    "PLUS_OTHERS_COUNT_one": "MISSING",
+    "PLUS_OTHERS_COUNT_other": "MISSING"
+  },
   "INSIGHTS": {
     "BIODIVERSITY": {
       "AMPHIBIANS": "Anfíbios",

packages/webapp/src/assets/colors.scss

@@ -66,7 +66,8 @@
   --bgInputListTile: white;
   --mainBackground: #FAFCFB;
 
-    // New design system colours
-    --Colors-Primary-Primary-teal-900: #16423d;
-    --Colors-Accent---singles-Brown-dark: #633700;
+  // New design system colours
+  --Colors-Primary-Primary-teal-900: #16423d;
+  --Colors-Accent---singles-Blue-dark: #032d61
+  --Colors-Accent---singles-Brown-dark: #633700;
 }

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

@@ -0,0 +1,68 @@
+/*
+ *  Copyright 2024 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { Tooltip } from '@mui/material';
+import styles from './styles.module.scss';
+import { Semibold, Main } from '../Typography';
+
+export interface HoverPillProps {
+  items: string[];
+}
+
+export const HoverPill = ({ items }: HoverPillProps) => {
+  const { t } = useTranslation();
+
+  const hoverContent = (
+    <>
+      {items.map((item, index) => (
+        <Main key={index} className={styles.detailText}>
+          {item}
+        </Main>
+      ))}
+    </>
+  );
+
+  // https://mui.com/material-ui/react-tooltip/#distance-from-anchor
+  const PopperProps = {
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 4],
+        },
+      },
+    ],
+  };
+
+  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>
+  );
+};

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

@@ -0,0 +1,70 @@
+/*
+ *  Copyright 2024 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+.pillText,
+.detailText {
+  user-select: none;
+  font-family: 'Open Sans';
+  font-size: 14px;
+  line-height: normal;
+  letter-spacing: -0.308px;
+}
+
+.pill {
+  cursor: default;
+  user-select: none;
+  display: inline-flex;
+  padding: 2px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+
+  border-radius: 48px;
+  background: var(--blue200, #e9f3ff);
+  box-shadow: 0px 1px 0px 0px rgba(3, 45, 97, 0.1); // rgba of --Colors-Accent---singles-Blue-dark
+}
+
+.pillText {
+  font-weight: 700;
+  color: var(--Colors-Accent---singles-Blue-dark, #032d61);
+}
+
+.pill:hover {
+  background: var(--blue700, #0669e1);
+  box-shadow: 0px 1px 0px 0px var(--Colors-Accent---singles-Blue-dark, #032d61);
+
+  .pillText {
+    color: var(--blue200, #e9f3ff);
+  }
+}
+
+.hoverDetails {
+  margin: 0 !important;
+  padding: 8px 16px;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 8px;
+  min-width: max-content;
+
+  border-radius: 8px;
+  background: var(--white, #fff);
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.detailText {
+  color: #000;
+}

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

@@ -0,0 +1,81 @@
+/*
+ *  Copyright 2024 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+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 styles from './styles.module.scss';
+
+type HoverPillStoryProps = HoverPillProps & {
+  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,
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'center'],
+      description: 'Position of the hover pill within the Storybook frame',
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <Wrapper position={context.args.position}>
+        <Story />
+      </Wrapper>
+    ),
+    ...componentDecoratorsFullHeight,
+  ],
+
+  // To reduce the height of the docs page canvas when using 100vh decorator
+  // See https://github.com/storybookjs/storybook/issues/13765
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 300,
+      },
+    },
+  },
+};
+export default meta;
+
+interface WrapperProps {
+  children: ReactNode;
+  position?: string;
+}
+
+const Wrapper = ({ children, position = 'center' }: WrapperProps) => {
+  return <div className={clsx(styles.wrapper, styles[position])}>{children}</div>;
+};
+
+type Story = StoryObj<typeof HoverPill>;
+
+export const Plural: Story = {
+  args: {
+    items: ['Heifers', 'Foot Rot treatment', 'Feeding change'],
+  },
+};
+
+export const Singular: Story = {
+  args: {
+    items: ['Feeding change'],
+  },
+};

packages/webapp/src/stories/HoverPill/styles.module.scss

@@ -0,0 +1,47 @@
+/*
+ *  Copyright 2024 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+.wrapper {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  padding: 24px;
+}
+
+.center {
+  align-items: center;
+  justify-content: center;
+}
+
+.top-left {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.top-right {
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.bottom-left {
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+
+.bottom-right {
+  align-items: flex-end;
+  justify-content: flex-end;
+}

packages/webapp/src/stories/Pages/config/Decorators.jsx

@@ -97,6 +97,12 @@ export const componentDecoratorsWithoutPadding = [
   },
 ];
 
+export const componentDecoratorsFullHeight = [
+  (story) => {
+    return <div style={{ height: '100vh' }}>{story()}</div>;
+  },
+];
+
 export const v2TableDecorator = [
   (story) => {
     return (