feat(Meter): added extra prop (#1318)

Telefonica · Feb 17, 2025 · 631591b · 631591b · github-actions · Feb 17, 2025
1 parent b5e4739
commit 631591b
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 21 deletions.
diff --git a/...mage_snapshots__/meter-screenshot-test-tsx-meter-default-angular-100-1-snap.png b/...mage_snapshots__/meter-screenshot-test-tsx-meter-default-angular-100-1-snap.png
diff --git a/...ge_snapshots__/meter-screenshot-test-tsx-meter-default-angular-33-33-2-snap.png b/...ge_snapshots__/meter-screenshot-test-tsx-meter-default-angular-33-33-2-snap.png
diff --git a/...ge_snapshots__/meter-screenshot-test-tsx-meter-default-angular-33-33-3-snap.png b/...ge_snapshots__/meter-screenshot-test-tsx-meter-default-angular-33-33-3-snap.png
diff --git a/...e_snapshots__/meter-screenshot-test-tsx-meter-default-circular-33-33-2-snap.png b/...e_snapshots__/meter-screenshot-test-tsx-meter-default-circular-33-33-2-snap.png
diff --git a/...e_snapshots__/meter-screenshot-test-tsx-meter-default-circular-33-33-3-snap.png b/...e_snapshots__/meter-screenshot-test-tsx-meter-default-circular-33-33-3-snap.png
diff --git a/...age_snapshots__/meter-screenshot-test-tsx-meter-default-linear-33-33-2-snap.png b/...age_snapshots__/meter-screenshot-test-tsx-meter-default-linear-33-33-2-snap.png
diff --git a/...age_snapshots__/meter-screenshot-test-tsx-meter-default-linear-33-33-3-snap.png b/...age_snapshots__/meter-screenshot-test-tsx-meter-default-linear-33-33-3-snap.png
diff --git a/src/__screenshot_tests__/meter-screenshot-test.tsx b/src/__screenshot_tests__/meter-screenshot-test.tsx
@@ -1,26 +1,32 @@
 import {openStoryPage, screen} from '../test-utils';
 
 test.each`
-    values                 | type          | themeVariant
-    ${[0]}                 | ${'linear'}   | ${'default'}
-    ${[0]}                 | ${'circular'} | ${'default'}
-    ${[0]}                 | ${'angular'}  | ${'default'}
-    ${[100]}               | ${'linear'}   | ${'default'}
-    ${[100]}               | ${'circular'} | ${'default'}
-    ${[100]}               | ${'angular'}  | ${'default'}
-    ${[33, 33]}            | ${'linear'}   | ${'default'}
-    ${[33, 33]}            | ${'circular'} | ${'default'}
-    ${[33, 33]}            | ${'angular'}  | ${'default'}
-    ${[33, 33]}            | ${'linear'}   | ${'inverse'}
-    ${[33, 33]}            | ${'circular'} | ${'inverse'}
-    ${[33, 33]}            | ${'angular'}  | ${'inverse'}
-    ${[33, 33]}            | ${'linear'}   | ${'media'}
-    ${[33, 33]}            | ${'circular'} | ${'media'}
-    ${[33, 33]}            | ${'angular'}  | ${'media'}
-    ${[20, 20, 20, 20, 0]} | ${'linear'}   | ${'default'}
-    ${[20, 20, 20, 20, 0]} | ${'circular'} | ${'default'}
-    ${[20, 20, 20, 20, 0]} | ${'angular'}  | ${'default'}
-`('Meter $themeVariant $type $values', async ({themeVariant, values, type}) => {
+    values                 | type          | themeVariant | extraContent
+    ${[0]}                 | ${'linear'}   | ${'default'} | ${''}
+    ${[0]}                 | ${'circular'} | ${'default'} | ${''}
+    ${[0]}                 | ${'angular'}  | ${'default'} | ${''}
+    ${[100]}               | ${'linear'}   | ${'default'} | ${''}
+    ${[100]}               | ${'circular'} | ${'default'} | ${''}
+    ${[100]}               | ${'angular'}  | ${'default'} | ${''}
+    ${[33, 33]}            | ${'linear'}   | ${'default'} | ${''}
+    ${[33, 33]}            | ${'circular'} | ${'default'} | ${''}
+    ${[33, 33]}            | ${'angular'}  | ${'default'} | ${''}
+    ${[33, 33]}            | ${'linear'}   | ${'inverse'} | ${''}
+    ${[33, 33]}            | ${'circular'} | ${'inverse'} | ${''}
+    ${[33, 33]}            | ${'angular'}  | ${'inverse'} | ${''}
+    ${[33, 33]}            | ${'linear'}   | ${'media'}   | ${''}
+    ${[33, 33]}            | ${'circular'} | ${'media'}   | ${''}
+    ${[33, 33]}            | ${'angular'}  | ${'media'}   | ${''}
+    ${[20, 20, 20, 20, 0]} | ${'linear'}   | ${'default'} | ${''}
+    ${[20, 20, 20, 20, 0]} | ${'circular'} | ${'default'} | ${''}
+    ${[20, 20, 20, 20, 0]} | ${'angular'}  | ${'default'} | ${''}
+    ${[33, 33]}            | ${'linear'}   | ${'default'} | ${'This is a small extra'}
+    ${[33, 33]}            | ${'linear'}   | ${'default'} | ${'This is a super long extra This is a super long extra This is a super long extra This is a super long extra'}
+    ${[33, 33]}            | ${'angular'}  | ${'default'} | ${'This is a small extra'}
+    ${[33, 33]}            | ${'angular'}  | ${'default'} | ${'This is a super long extra This is a super long extra This is a super long extra This is a super long extra'}
+    ${[33, 33]}            | ${'circular'} | ${'default'} | ${'This is a small extra'}
+    ${[33, 33]}            | ${'circular'} | ${'default'} | ${'This is a super long extra This is a super long extra This is a super long extra This is a super long extra'}
+`('Meter $themeVariant $type $values', async ({themeVariant, values, type, extraContent}) => {
     await openStoryPage({
         id: 'components-data-visualizations-meter--meter-story',
         args: {
@@ -35,6 +41,7 @@ test.each`
                 }),
                 {}
             ),
+            extraContent,
         },
     });
 

diff --git a/src/__stories__/meter-story.tsx b/src/__stories__/meter-story.tsx
@@ -4,6 +4,8 @@ import beachImg from './images/beach.jpg';
 
 import type {MeterType} from '../meter';
 
+type MeterExtraAlignment = 'start' | 'center' | 'end';
+
 export default {
     title: 'Components/Data Visualizations/Meter',
     argTypes: {
@@ -49,6 +51,10 @@ export default {
         value8: {
             control: {type: 'range', min: 0, max: 100, step: 1},
         },
+        extraAlignment: {
+            options: ['start', 'center', 'end'] as Array<MeterExtraAlignment>,
+            control: {type: 'select'},
+        },
     },
     parameters: {
         fullScreen: true,
@@ -71,6 +77,8 @@ type MeterStoryArgs = {
     value6: number;
     value7: number;
     value8: number;
+    extraContent: string;
+    extraAlignment: MeterExtraAlignment;
 };
 
 export const MeterStory: StoryComponent<MeterStoryArgs> = ({
@@ -81,6 +89,8 @@ export const MeterStory: StoryComponent<MeterStoryArgs> = ({
     fullWidth,
     width,
     ariaLabel,
+    extraContent,
+    extraAlignment,
     ...valuesArgs
 }) => {
     const values = Object.values(valuesArgs).slice(0, valuesCount);
@@ -100,6 +110,19 @@ export const MeterStory: StoryComponent<MeterStoryArgs> = ({
                         reverse={reverse}
                         values={values}
                         width={fullWidth ? '100%' : width}
+                        extra={
+                            extraContent ? (
+                                <div
+                                    style={{
+                                        alignSelf: extraAlignment,
+                                        justifyContent: 'center',
+                                        ...(type === 'linear' ? {} : {margin: '0 auto'}),
+                                    }}
+                                >
+                                    <div>{extraContent}</div>
+                                </div>
+                            ) : undefined
+                        }
                     />
                 </Box>
             </ResponsiveLayout>
@@ -124,4 +147,6 @@ MeterStory.args = {
     value6: 10,
     value7: 10,
     value8: 10,
+    extraContent: 'This is a small extra',
+    extraAlignment: 'center',
 };
diff --git a/src/meter.tsx b/src/meter.tsx
@@ -128,6 +128,7 @@ type MeterProps = {
     colors?: Array<string>;
     reverse?: boolean;
     dataAttributes?: DataAttributes;
+    extra?: React.ReactNode;
     'aria-hidden'?: boolean | 'true' | 'false';
     'aria-label'?: string;
     'aria-labelledby'?: string;
@@ -143,6 +144,7 @@ const MeterComponent = ({
     'aria-hidden': ariaHidden = false,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
+    extra,
 }: MeterProps): JSX.Element => {
     const {borderRadii, t} = useTheme();
     const {ref: containerRef, width: containerWidth} = useElementDimensions();
@@ -281,10 +283,27 @@ const MeterComponent = ({
         ' ' +
         values.map((v, i) => `${t(meterSectionLabel, i + 1, Math.round(v * 100))}`).join('. ');
 
+    const extraStyle = React.useMemo(() => {
+        if (type === TYPE_LINEAR) {
+            return {display: 'flex'};
+        }
+        const COS_45 = 0.707107;
+        const sizeFactor = (width / 2 - STROKE_WIDTH_PX) * COS_45;
+        return {
+            display: 'flex',
+            marginTop:
+                -1 * (type === TYPE_ANGULAR ? sizeFactor + STROKE_WIDTH_PX / 2 : sizeFactor + width / 2),
+            width: sizeFactor * 2,
+            minHeight: type === TYPE_ANGULAR ? sizeFactor + STROKE_WIDTH_PX / 2 : sizeFactor * 2,
+            marginLeft: 'auto',
+            marginRight: 'auto',
+        };
+    }, [width, type]);
+
     return (
         <div
             ref={containerRef}
-            style={{width: widthProp}}
+            style={{width: widthProp, minHeight: height}}
             role="meter"
             aria-label={ariaLabel || (ariaLabelledBy ? undefined : valueText)}
             aria-labelledby={ariaLabelledBy}
@@ -480,6 +499,7 @@ const MeterComponent = ({
                         );
                     })}
             </svg>
+            {extra && <div style={extraStyle}>{extra}</div>}
         </div>
     );
 };