@financial-times/qanda-ui 1.0.0 → 1.0.1

package/dist/cjs/components/Expander/index.js

@@ -40,13 +40,17 @@ function Expander({ className = '', children = [], expandLabel = 'Expand', colla
             }
             const numberOfCharacters = element.textContent?.length || 300;
             const windowWidth = window.visualViewport?.width || window.innerWidth || 1200; // Fallback to desktop configuration.
-            // Check if the element's height exceeds 3 lines for mobile or 1 line for above mobile
-            // Note: This need to stay aligned with the CSS for the expander
-            const mobileNumberOfCharacters = 100;
-            const desktopNumberOfCharacters = 200;
+            // Approximate cut-off using character counts
+            // On average: ~176 characters on mobile (4 lines) and ~374 on desktop (5 lines)
+            // We set thresholds slightly higher (250 / 425) to ensure some text is hidden
+            // before showing the expander
+            // Note: This needs to stay aligned with the CSS for the expander
+            const mobileNumberOfCharacters = 225;
+            const desktopNumberOfCharacters = 425;
             const characterForExpander = windowWidth <= 490
                 ? mobileNumberOfCharacters
                 : desktopNumberOfCharacters;
+            // Show the expander if character count exceeds the threshold
             setExpander(numberOfCharacters > characterForExpander);
         };
         const debouncedCheck = debounce(checkNeedForExpanderButton, 250);

package/dist/cjs/components/FloatingActionBar/index.js

@@ -86,10 +86,10 @@ function FloatingActionBar({ isLive = true }) {
                                     'data-testid': `floating-action-bar__${view.testIdSuffix}`,
                                     ariaHasPopup: 'dialog',
                                 }, label: view.description, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
-                                    ariaLabel: 'Back to top',
-                                    'data-trackable': (0, tracking_1.trackingNS)('back_to_top'),
-                                    'data-trackable-context-trigger_action': 'Back to top',
-                                    'data-testid': 'floating-action-bar__back-to-top-button',
-                                }, label: "Back to top", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__updates-counter o3-type-detail", "aria-label": `${updatedComments.length} new ${updatedComments.length === 1 ? 'update' : 'updates'} available`, role: "status", "aria-live": "polite", children: updatedComments.length }))] })] }));
+                                    ariaLabel: 'Latest answers',
+                                    'data-trackable': (0, tracking_1.trackingNS)('latest-answers'),
+                                    'data-trackable-context-trigger_action': 'Latest answers',
+                                    'data-testid': 'floating-action-bar__latest-answers-button',
+                                }, label: "Latest answers", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__updates-counter o3-type-detail", "aria-label": `${updatedComments.length} new ${updatedComments.length === 1 ? 'update' : 'updates'} available`, role: "status", "aria-live": "polite", children: updatedComments.length }))] })] }));
 }
 exports.default = FloatingActionBar;

package/dist/esm/components/Expander/index.js

@@ -38,13 +38,17 @@ function Expander({ className = '', children = [], expandLabel = 'Expand', colla
             }
             const numberOfCharacters = element.textContent?.length || 300;
             const windowWidth = window.visualViewport?.width || window.innerWidth || 1200; // Fallback to desktop configuration.
-            // Check if the element's height exceeds 3 lines for mobile or 1 line for above mobile
-            // Note: This need to stay aligned with the CSS for the expander
-            const mobileNumberOfCharacters = 100;
-            const desktopNumberOfCharacters = 200;
+            // Approximate cut-off using character counts
+            // On average: ~176 characters on mobile (4 lines) and ~374 on desktop (5 lines)
+            // We set thresholds slightly higher (250 / 425) to ensure some text is hidden
+            // before showing the expander
+            // Note: This needs to stay aligned with the CSS for the expander
+            const mobileNumberOfCharacters = 225;
+            const desktopNumberOfCharacters = 425;
             const characterForExpander = windowWidth <= 490
                 ? mobileNumberOfCharacters
                 : desktopNumberOfCharacters;
+            // Show the expander if character count exceeds the threshold
             setExpander(numberOfCharacters > characterForExpander);
         };
         const debouncedCheck = debounce(checkNeedForExpanderButton, 250);

package/dist/esm/components/FloatingActionBar/index.js

@@ -84,10 +84,10 @@ function FloatingActionBar({ isLive = true }) {
                                     'data-testid': `floating-action-bar__${view.testIdSuffix}`,
                                     ariaHasPopup: 'dialog',
                                 }, label: view.description, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), _jsx(Button, { attributes: {
-                                    ariaLabel: 'Back to top',
-                                    'data-trackable': trackingNS('back_to_top'),
-                                    'data-trackable-context-trigger_action': 'Back to top',
-                                    'data-testid': 'floating-action-bar__back-to-top-button',
-                                }, label: "Back to top", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && (_jsx("div", { className: "floating-action-bar__updates-counter o3-type-detail", "aria-label": `${updatedComments.length} new ${updatedComments.length === 1 ? 'update' : 'updates'} available`, role: "status", "aria-live": "polite", children: updatedComments.length }))] })] }));
+                                    ariaLabel: 'Latest answers',
+                                    'data-trackable': trackingNS('latest-answers'),
+                                    'data-trackable-context-trigger_action': 'Latest answers',
+                                    'data-testid': 'floating-action-bar__latest-answers-button',
+                                }, label: "Latest answers", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && (_jsx("div", { className: "floating-action-bar__updates-counter o3-type-detail", "aria-label": `${updatedComments.length} new ${updatedComments.length === 1 ? 'update' : 'updates'} available`, role: "status", "aria-live": "polite", children: updatedComments.length }))] })] }));
 }
 export default FloatingActionBar;

package/dist/qanda.scss

@@ -608,33 +608,24 @@ $app-header-color: #007acc;
     }
   }
 
-  /* Mobile will show 3 lines of text before ellipse */
-  @container (max-width: 490px) {
-    .qanda-block__text.expander--collapsed
-      .expander__text--multiline
-      > p:first-of-type {
-      display: block;
-      display: -webkit-box;
-      /* Note: This need to stay aligned with the JS for the expander */
-      line-clamp: 3;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      /* Without this the letter like `g` may be visually cut. 
+  .qanda-block__text.expander--collapsed
+    .expander__text--multiline
+    > p:first-of-type {
+    display: block;
+    display: -webkit-box;
+    /* Note: This need to stay aligned with the JS for the expander */
+    line-clamp: 4;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /* Without this the letter like `g` may be visually cut. 
       To be tested with final font */
-      padding-bottom: 1px;
-    }
-  }
-
-  /* Above mobile it will show 1 line of text before ellipse */
-  @container (min-width: 491px) {
-    .qanda-block__text.expander--collapsed
-      .expander__text--multiline
-      > p:first-of-type {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
+    padding-bottom: 1px;
+    @container (min-width: 491px) {
+      /* Note: This need to stay aligned with the JS for the expander */
+      line-clamp: 5;
+      -webkit-line-clamp: 5;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/qanda-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Components for the Live Q&A (AKA Ask an Expert) UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",