Merge pull request #19 from eea/develop

Add tooltip size option
eea · Sep 19, 2023 · 2edcd53 · 2edcd53
2 parents fc49ea7 + 4fe81f7
commit 2edcd53
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 41 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,11 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [0.5.4](https://github.com/eea/volto-slate-label/compare/0.5.3...0.5.4) - 18 September 2023
+### [0.5.5](https://github.com/eea/volto-slate-label/compare/0.5.4...0.5.5) - 19 September 2023
 
 #### :hammer_and_wrench: Others
 
-- Refs #257521 - Restore style for simple labels with tooltip. [GhitaB - [`d4a39b5`](https://github.com/eea/volto-slate-label/commit/d4a39b5e22c13e221165a7e14bf98b40f6a26e50)]
+- Add more tests [kreafox - [`f04ad03`](https://github.com/eea/volto-slate-label/commit/f04ad03cf50abffde59e6c086846bedac641a4d5)]
+- Update tests [kreafox - [`68ebc30`](https://github.com/eea/volto-slate-label/commit/68ebc3005202f96e58a77a4beb930621d50f2887)]
+- Add tooltip size option [kreafox - [`12a01ab`](https://github.com/eea/volto-slate-label/commit/12a01abae8a2457578e7c44b7e55a4d8aaebe032)]
+### [0.5.4](https://github.com/eea/volto-slate-label/compare/0.5.3...0.5.4) - 18 September 2023
+
 ### [0.5.3](https://github.com/eea/volto-slate-label/compare/0.5.2...0.5.3) - 15 September 2023
 
 #### :house: Internal changes

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-slate-label",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "@eeacms/volto-slate-label: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/editor/LabelWrapper.jsx b/src/editor/LabelWrapper.jsx
@@ -9,46 +9,58 @@ import {
 const LabelWrapper = (props) => {
   const { attributes, children, element } = props;
   const { data = {} } = element;
-  const { uid, label_type, label_pointing } = data;
+  const {
+    uid,
+    always_show,
+    label_type,
+    label_pointing,
+    tooltip_type,
+    tooltip_size,
+    tooltip_content,
+    tooltip_pointing,
+  } = data;
+
   const isTooltipText =
-    data.tooltip_content &&
-    serializeNodesToText(data.tooltip_content).trim().length > 0;
+    tooltip_content && serializeNodesToText(tooltip_content).trim().length > 0;
 
-  if (isTooltipText) {
-    return (
-      <Popup
-        position={data.tooltip_pointing}
-        open={data.always_show || undefined}
-        on={!data.always_show ? 'click' : undefined}
-        trigger={
-          label_type !== undefined && label_type !== 'simple' ? (
-            <label
-              className={cx(label_type, label_pointing, 'with-popup ui label')}
-            >
-              {children}
-            </label>
-          ) : (
-            <span
-              id={`label_ref-${uid}`}
-              {...attributes}
-              className="label-node with-popup"
-            >
-              {children}
-            </span>
-          )
-        }
-        className={data.tooltip_type}
-      >
-        {serializeNodes(data.tooltip_content)}
-      </Popup>
-    );
-  } else {
-    return (
-      <label className={cx(label_type, label_pointing, 'ui label')}>
-        {children}
-      </label>
-    );
-  }
+  return isTooltipText ? (
+    <Popup
+      wide={
+        tooltip_size === 'wide'
+          ? true
+          : tooltip_size === 'extra'
+          ? 'very'
+          : null
+      }
+      position={tooltip_pointing}
+      open={always_show || undefined}
+      on={!always_show ? 'click' : undefined}
+      trigger={
+        label_type !== undefined && label_type !== 'simple' ? (
+          <label
+            className={cx(label_type, label_pointing, 'with-popup ui label')}
+          >
+            {children}
+          </label>
+        ) : (
+          <span
+            id={`label_ref-${uid}`}
+            {...attributes}
+            className="label-node with-popup"
+          >
+            {children}
+          </span>
+        )
+      }
+      className={tooltip_type}
+    >
+      {serializeNodes(tooltip_content)}
+    </Popup>
+  ) : (
+    <label className={cx(label_type, label_pointing, 'ui label')}>
+      {children}
+    </label>
+  );
 };
 
 export default LabelWrapper;
diff --git a/src/editor/LabelWrapper.test.jsx b/src/editor/LabelWrapper.test.jsx
@@ -19,6 +19,7 @@ describe('LabelWrapper', () => {
           tooltip_pointing: 'top center',
           always_show: false,
           tooltip_type: 'info',
+          tooltip_size: 'wide',
         },
       },
     };
@@ -41,6 +42,7 @@ describe('LabelWrapper', () => {
           tooltip_pointing: 'top center',
           always_show: true,
           tooltip_type: 'info',
+          tooltip_size: 'wide',
         },
       },
     };
@@ -62,6 +64,29 @@ describe('LabelWrapper', () => {
           tooltip_pointing: 'top center',
           always_show: true,
           tooltip_type: 'info',
+          tooltip_size: 'wide',
+        },
+      },
+    };
+    render(
+      <LabelWrapper {...props}>
+        <div>Test</div>
+      </LabelWrapper>,
+    );
+  });
+  it('renders without crashing with no tooltip_size', () => {
+    const props = {
+      attributes: {},
+      element: {
+        data: {
+          uid: '123',
+          label_type: 'type',
+          label_pointing: 'pointing',
+          tooltip_content: [{ text: 'Tooltip Content' }],
+          tooltip_pointing: 'top center',
+          always_show: true,
+          tooltip_type: 'info',
+          tooltip_size: undefined,
         },
       },
     };
@@ -84,6 +109,7 @@ describe('LabelWrapper', () => {
           tooltip_pointing: 'top center',
           always_show: true,
           tooltip_type: 'info',
+          tooltip_size: 'wide',
         },
       },
     };

diff --git a/src/editor/schema.js b/src/editor/schema.js
@@ -13,6 +13,7 @@ export const LabelEditorSchema = {
         'tooltip_content',
         'tooltip_pointing',
         'tooltip_type',
+        'tooltip_size',
         'always_show',
       ],
     },
@@ -77,6 +78,16 @@ export const LabelEditorSchema = {
       ],
       default: '',
     },
+    tooltip_size: {
+      title: 'Tooltip size',
+      type: 'string',
+      factory: 'Choice',
+      choices: [
+        ['wide', 'Wide'],
+        ['extra', 'Extra wide'],
+      ],
+      default: '',
+    },
     always_show: {
       title: 'Always show tooltip',
       description: 'Always show the content label tooltip.',