feat(OverviewBlock): add custom label (#3650)

* feat(OverviewBlock): add custom label * chore: add changeset * test(OverviewBlock): wrap test with a describe function * chore: update changeset message
toptal · Jun 27, 2023 · 7da746c · 7da746c
1 parent f72284a
commit 7da746c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 6 deletions.
diff --git a/.changeset/plenty-drinks-search.md b/.changeset/plenty-drinks-search.md
@@ -0,0 +1,7 @@
+---
+'@toptal/picasso': minor
+---
+
+### OverviewBlock
+
+- it allows to use custom labels on `OverviewBlock`
diff --git a/packages/picasso/src/OverviewBlock/OverviewBlock.tsx b/packages/picasso/src/OverviewBlock/OverviewBlock.tsx
@@ -15,7 +15,7 @@ import styles from './styles'
 import { useOverviewBlockGroupContext } from '../OverviewBlockGroup/OverviewBlockGroupContext'
 import Container from '../Container'
 import Typography from '../Typography'
-import { toTitleCase } from '../utils'
+import { toTitleCase, isString } from '../utils'
 
 type VariantColorType = Extract<ColorType, 'red' | 'green' | 'yellow'>
 
@@ -32,7 +32,7 @@ export type Props = BaseProps &
     /** Counter value  */
     value: ReactNode
     /** Counter title  */
-    label: string
+    label: ReactNode
     /** The color variant  */
     variant?: Variant
     /** Component used for the root node. Either a string to use a DOM element or a component. */
@@ -97,9 +97,13 @@ export const OverviewBlock: OverridableComponent<Props> = forwardRef<
       onClick={onClick}
     >
       <Container align='left'>
-        <Typography size='xxsmall' weight='semibold' color={color.label}>
-          {titleCase ? toTitleCase(label) : label}
-        </Typography>
+        {isString(label) ? (
+          <Typography size='xxsmall' weight='semibold' color={color.label}>
+            {titleCase ? toTitleCase(label) : label}
+          </Typography>
+        ) : (
+          label
+        )}
         <Typography size='large' weight='semibold' color={color.value}>
           {value}
         </Typography>

diff --git a/packages/picasso/src/OverviewBlock/story/CustomLabel.example.tsx b/packages/picasso/src/OverviewBlock/story/CustomLabel.example.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Typography, OverviewBlock, Tooltip } from '@toptal/picasso'
+
+const customLabel = (
+  <Tooltip content='You inside the tooltip!' placement='top'>
+    <Typography size='xxsmall' weight='semibold'>
+      Custom Label with Tooltip
+    </Typography>
+  </Tooltip>
+)
+
+const CustomLabel = () => {
+  return (
+    <OverviewBlock.Group>
+      <OverviewBlock value='4249' label={customLabel} />
+      <OverviewBlock value='19302' label='Standard Label' />
+    </OverviewBlock.Group>
+  )
+}
+
+export default CustomLabel
diff --git a/packages/picasso/src/OverviewBlock/story/index.jsx b/packages/picasso/src/OverviewBlock/story/index.jsx
@@ -6,7 +6,7 @@ import PicassoBook from '~/.storybook/components/PicassoBook'
 const page = PicassoBook.section('Components').createPage(
   'OverviewBlock',
   `Allows displaying counters.
-  
+
   ${PicassoBook.createSourceLink(__filename)}
   `
 )
@@ -38,5 +38,6 @@ page
   .addExample('OverviewBlock/story/Number.example.tsx', 'Number')
   .addExample('OverviewBlock/story/Multiline.example.tsx', 'Multi-line')
   .addExample('OverviewBlock/story/Routing.example.tsx', 'Routing')
+  .addExample('OverviewBlock/story/CustomLabel.example.tsx', 'Custom label')
 
 page.connect(overviewBlockGroupStory.chapter)
diff --git a/packages/picasso/src/OverviewBlock/test.tsx b/packages/picasso/src/OverviewBlock/test.tsx
@@ -53,6 +53,19 @@ describe('overview-block', () => {
     expect(spiedOnTitleCase).toHaveBeenCalledTimes(0)
   })
 
+  describe('when label is a ReactNode', () => {
+    it('renders custom label', () => {
+      const customLabel = <div data-testid='custom-label'>Custom Label</div>
+
+      const { getByTestId } = renderOverviewBlock({
+        value: 'abc dk9',
+        label: customLabel,
+      })
+
+      expect(getByTestId('custom-label')).toBeInTheDocument()
+    })
+  })
+
   describe('when OnClick function is defined', () => {
     describe('when `as` prop is defined', () => {
       it('render the element as `Link`', () => {