Merge 602aaaf into d0f7956

textkernel · Feb 5, 2021 · 4c9953c · 4c9953c
2 parents d0f7956 + 602aaaf
commit 4c9953c
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 4 deletions.
diff --git a/src/components/WeightedResultBar/WeightedResultBar.tsx b/src/components/WeightedResultBar/WeightedResultBar.tsx
@@ -10,8 +10,8 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
     children: string;
     /** Weight of this result in percentage */
     percentage: number;
-    /** Weight of this result in absolute number */
-    count: number;
+    /** A react node with a weight of this result in absolute number */
+    count: NotEmptySingleReactNode;
     /** Color context for the weighted bar */
     context?: Context;
 }
@@ -33,7 +33,7 @@ export const WeightedResultBar: React.FC<Props> = (props) => {
         <div {...rest} {...block(props)}>
             <div {...elem('details', props)}>
                 <Text inline>{children}</Text>
-                <Text inline>{count}</Text>
+                {['number', 'string'].includes(typeof count) ? <Text inline>{count}</Text> : count}
             </div>
             <ProgressBar percentage={percentageToShow} context={context} small />
         </div>

diff --git a/src/components/WeightedResultBar/__tests__/WeightedResultBar.spec.js b/src/components/WeightedResultBar/__tests__/WeightedResultBar.spec.js
@@ -17,6 +17,19 @@ describe('WeightedResultBar', () => {
             wrapper.update();
         });
 
+        expect(toJson(wrapper)).toMatchSnapshot();
+    });
+    it('should render correctly with a custom count', () => {
+        const wrapper = mount(
+            <WeightedResultBar percentage={67} count={<p>456</p>}>
+                Result
+            </WeightedResultBar>
+        );
+        act(() => {
+            jest.runAllTimers();
+            wrapper.update();
+        });
+
         expect(toJson(wrapper)).toMatchSnapshot();
     });
 });
diff --git a/src/components/WeightedResultBar/__tests__/__snapshots__/WeightedResultBar.spec.js.snap b/src/components/WeightedResultBar/__tests__/__snapshots__/WeightedResultBar.spec.js.snap
@@ -59,3 +59,61 @@ exports[`WeightedResultBar should render correctly 1`] = `
   </div>
 </WeightedResultBar>
 `;
+
+exports[`WeightedResultBar should render correctly with a custom count 1`] = `
+<WeightedResultBar
+  context="brand"
+  count={
+    <p>
+      456
+    </p>
+  }
+  percentage={67}
+>
+  <div
+    className="WeightedResultBar"
+  >
+    <div
+      className="WeightedResultBar__details"
+    >
+      <Text
+        context="default"
+        inline={true}
+        size="normal"
+      >
+        <span>
+          Result
+        </span>
+      </Text>
+      <p>
+        456
+      </p>
+    </div>
+    <ProgressBar
+      animated={false}
+      context="brand"
+      hidden={false}
+      percentage={67}
+      small={true}
+    >
+      <div
+        aria-hidden={false}
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow={67}
+        className="ProgressBar ProgressBar--small"
+        role="progressbar"
+      >
+        <div
+          className="ProgressBar__fill ProgressBar__fill--context_brand ProgressBar__fill--small"
+          style={
+            Object {
+              "width": "67%",
+            }
+          }
+        />
+      </div>
+    </ProgressBar>
+  </div>
+</WeightedResultBar>
+`;
diff --git a/stories/WeightedResultBar.tsx b/stories/WeightedResultBar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, number } from '@storybook/addon-knobs';
-import { WeightedResultBar, WeightedResultBarLoader } from '@textkernel/oneui';
+import { WeightedResultBar, WeightedResultBarLoader, Text } from '@textkernel/oneui';
 
 storiesOf('Molecules|WeightedResultBar', module)
     .addDecorator(withKnobs)
@@ -30,6 +30,41 @@ storiesOf('Molecules|WeightedResultBar', module)
             </div>
         );
     })
+    .add('With a custom count', () => {
+        const ClickableCount = ({ count }) => (
+            <Text
+                inline
+                context="brand"
+                onClick={() => console.log(`WeightedResultBar count: ${count}`)}
+            >
+                {count}
+            </Text>
+        );
+
+        return (
+            <div style={{ width: 500 }}>
+                <WeightedResultBar
+                    percentage={number('Percentage', 100)}
+                    count={<ClickableCount count={number('Percentage', 100)} />}
+                    context="primary"
+                >
+                    Repair and Maintenance Technician
+                </WeightedResultBar>
+                <WeightedResultBar percentage={76} count={<ClickableCount count={94} />}>
+                    Sales Manager
+                </WeightedResultBar>
+                <WeightedResultBar percentage={64} count={<ClickableCount count={79} />}>
+                    Software Engineer
+                </WeightedResultBar>
+                <WeightedResultBar percentage={64} count={<ClickableCount count={79} />}>
+                    Operations Manager
+                </WeightedResultBar>
+                <WeightedResultBar percentage={58} count={<ClickableCount count={72} />}>
+                    Business Development Manager
+                </WeightedResultBar>
+            </div>
+        );
+    })
     .add('WeightedResultBarLoader', () => {
         return (
             <div style={{ width: 500 }}>