@toptal/picasso-lab 9.3.0 → 9.3.1

package/src/OverviewBlock/index.ts

@@ -0,0 +1,6 @@
+import { OmitInternalProps } from '@toptal/picasso-shared'
+
+import { Props } from './OverviewBlock'
+
+export { default } from './OverviewBlock'
+export type OverviewBlockProps = OmitInternalProps<Props>

package/src/OverviewBlock/story/Default.example.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { OverviewBlock } from '@toptal/picasso-lab'
+
+const DefaultExample = () => {
+  const handleClick = (title: string) => {
+    window.alert(`${title} clicked`)
+  }
+
+  return (
+    <OverviewBlock.Group>
+      <OverviewBlock
+        value='4249'
+        label='ACH'
+        onClick={() => handleClick('ACH')}
+      />
+      <OverviewBlock
+        value='19302'
+        label='Credit Card'
+        onClick={() => handleClick('Credit Card')}
+      />
+      <OverviewBlock
+        value='979'
+        label='PayPal'
+        onClick={() => handleClick('PayPal')}
+      />
+      <OverviewBlock
+        value='803'
+        label='Wire'
+        onClick={() => handleClick('Wire')}
+      />
+    </OverviewBlock.Group>
+  )
+}
+
+export default DefaultExample

package/src/OverviewBlock/story/Multiline.example.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { OverviewBlock } from '@toptal/picasso-lab'
+
+const MultilineExample = () => (
+  <section>
+    <OverviewBlock.Group>
+      <OverviewBlock.Row>
+        <OverviewBlock
+          value='$26,125,123.70'
+          label='Outstanding'
+          variant='label-yellow'
+        />
+        <OverviewBlock
+          value='$5,837,806.68'
+          label='Overdue'
+          variant='label-red'
+        />
+        <OverviewBlock
+          value='$1,232,107.99'
+          label='Disputed'
+          variant='label-red'
+        />
+        <OverviewBlock
+          value='$1,722,076.43'
+          label='Incollections'
+          variant='label-red'
+        />
+      </OverviewBlock.Row>
+      <OverviewBlock.Row>
+        <OverviewBlock
+          value='$935,590.65'
+          label='Written off'
+          variant='label-red'
+        />
+        <OverviewBlock value='$5,758,716.46' label='Pending receipt' />
+        <OverviewBlock
+          value='$44,244,163.83'
+          label='Credited'
+          variant='label-green'
+        />
+        <OverviewBlock
+          value='$585,895,606.35'
+          label='Paid'
+          variant='label-green'
+        />
+      </OverviewBlock.Row>
+    </OverviewBlock.Group>
+  </section>
+)
+
+export default MultilineExample

package/src/OverviewBlock/story/Number.example.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { OverviewBlock } from '@toptal/picasso-lab'
+
+const NumberExample = () => {
+  return (
+    <OverviewBlock.Group>
+      <OverviewBlock value='63' label='Pending tasks' variant='label-red' />
+      <OverviewBlock value='0' label="Today's tasks" variant='label-red' />
+      <OverviewBlock
+        value='0'
+        label="This week's tasks"
+        variant='label-green'
+      />
+      <OverviewBlock value='63' label='Total tasks' />
+      <OverviewBlock value='63' label='Playbook tasks' variant='label-yellow' />
+    </OverviewBlock.Group>
+  )
+}
+
+export default NumberExample

package/src/OverviewBlock/story/Routing.example.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { OverviewBlock } from '@toptal/picasso-lab'
+import { MemoryRouter as Router, Link, Route, Switch } from 'react-router-dom'
+
+const Index = () => <h2>Home</h2>
+const About = () => <h2>About</h2>
+const Users = () => <h2>Users</h2>
+
+const RoutingExample = () => (
+  <Router>
+    <div>
+      <OverviewBlock.Group>
+        <OverviewBlock value='10' label='Home' as={Link} to='/' />
+        <OverviewBlock
+          value='11'
+          label='About'
+          variant='label-green'
+          as={Link}
+          to='/about'
+        />
+        <OverviewBlock
+          value='15'
+          label='Users'
+          variant='label-green'
+          as={Link}
+          to='/users'
+        />
+      </OverviewBlock.Group>
+
+      <Switch>
+        <Route path='/' exact component={Index} />
+        <Route path='/about' component={About} />
+        <Route path='/users' component={Users} />
+        <Route component={Index} />
+      </Switch>
+    </div>
+  </Router>
+)
+
+export default RoutingExample

package/src/OverviewBlock/story/Text.example.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { OverviewBlock } from '@toptal/picasso-lab'
+
+const TextExample = () => {
+  return (
+    <OverviewBlock.Group>
+      <OverviewBlock value='Active' label='Status' variant='value-green' />
+      <OverviewBlock value='Developers' label='Interested In' />
+      <OverviewBlock value='Ambiguous' label='Priority / Intent' />
+      <OverviewBlock value='1968' label='Days in Funnel' />
+    </OverviewBlock.Group>
+  )
+}
+
+export default TextExample

package/src/OverviewBlock/story/index.jsx

@@ -0,0 +1,100 @@
+import overviewBlockGroupStory from '../../OverviewBlockGroup/story'
+import overviewBlockRowStory from '../../OverviewBlockRow/story'
+import { OverviewBlock } from '../OverviewBlock'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Picasso Lab').createPage(
+  'OverviewBlock',
+  'Allows displaying counters.'
+)
+
+page
+  .createTabChapter('Props')
+  .addComponentDocs({
+    component: OverviewBlock,
+    name: 'OverviewBlock',
+    // react-docgen-typescript doesn't work with generics, so we have to generate this
+    // documentation manually
+    additionalDocs: {
+      children: {
+        name: 'children',
+        type: 'ReactNode',
+        description: 'Content of the component'
+      },
+      value: {
+        name: 'value',
+        type: 'string',
+        description: 'Counter value'
+      },
+      title: {
+        name: 'title',
+        type: 'string',
+        description: 'Counter title'
+      },
+      color: {
+        name: 'variant',
+        type: {
+          name: 'enum',
+          enums: [
+            "'value-red'",
+            "'value-green'",
+            "'value-blue'",
+            "'value-yellow'",
+            "'label-red'",
+            "'label-green'",
+            "'label-blue'",
+            "'label-yellow'"
+          ]
+        },
+        description: 'The color variant'
+      },
+      align: {
+        name: 'align',
+        type: {
+          name: 'enum',
+          enums: ["'default'", "'center'"]
+        },
+        defaultValue: 'default',
+        description:
+          'Value and label alignment. By default content is aligned to the left.'
+      },
+      width: {
+        name: 'width',
+        type: {
+          name: 'enum',
+          enums: ["'narrow'", "'regular'", "'wide'"]
+        },
+        defaultValue: 'regular',
+        description: 'The width variant'
+      },
+      as: {
+        name: 'as',
+        type: {
+          name: 'enum'
+        },
+        defaultValue: 'button',
+        description:
+          'The component used for the root node.\nEither a string to use a DOM element or a component.'
+      },
+      onClick: {
+        name: 'onClick',
+        type: {
+          name: 'function',
+          description: '(event: MouseEvent) => void'
+        },
+        description: 'Callback invoked when component is clicked'
+      }
+    }
+  })
+  .addComponentDocs(overviewBlockGroupStory.componentDocs)
+  .addComponentDocs(overviewBlockRowStory.componentDocs)
+
+page
+  .createChapter()
+  .addExample('OverviewBlock/story/Default.example.tsx', 'Default')
+  .addExample('OverviewBlock/story/Text.example.tsx', 'Text')
+  .addExample('OverviewBlock/story/Number.example.tsx', 'Number')
+  .addExample('OverviewBlock/story/Multiline.example.tsx', 'Multi-line')
+  .addExample('OverviewBlock/story/Routing.example.tsx', 'Routing')
+
+page.connect(overviewBlockGroupStory.chapter)

package/src/OverviewBlock/styles.ts

@@ -0,0 +1,44 @@
+import { createStyles, Theme } from '@material-ui/core/styles'
+import { rem } from '@toptal/picasso-shared'
+
+export default ({ palette, sizes }: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      backgroundColor: palette.common.white,
+      margin: 0,
+      minWidth: rem('150px'),
+      border: 'none',
+      textDecoration: 'none',
+      '&:not(:first-child)': {
+        borderLeft: `${sizes.borderWidth} solid ${palette.grey.light2}`
+      }
+    },
+    clickable: {
+      cursor: 'pointer',
+      outline: 'none',
+      '&:hover': {
+        backgroundColor: palette.blue.lighter
+      }
+    },
+    disableOutline: {
+      outline: 'none'
+    },
+
+    defaultAlign: {
+      alignItems: 'flex-start'
+    },
+    centerAlign: {
+      alignItems: 'center'
+    },
+    narrowWidth: {
+      padding: '0.75rem 1rem'
+    },
+    regularWidth: {
+      padding: '0.75rem 1.5rem'
+    },
+    wideWidth: {
+      padding: '0.75rem 2rem'
+    }
+  })

package/src/OverviewBlock/test.tsx

@@ -0,0 +1,111 @@
+import React, { ComponentProps } from 'react'
+import { render, PicassoConfig } from '@toptal/picasso/test-utils'
+import * as titleCaseModule from 'ap-style-title-case'
+import { Link, MemoryRouter as Router } from 'react-router-dom'
+
+import OverviewBlock from './OverviewBlock'
+
+jest.mock('ap-style-title-case')
+
+const renderOverviewBlock = (
+  props: ComponentProps<typeof OverviewBlock>,
+  picassoConfig?: PicassoConfig
+) => {
+  return render(
+    <Router>
+      <OverviewBlock {...props} />
+    </Router>,
+    undefined,
+    picassoConfig
+  )
+}
+
+let spiedOnTitleCase: jest.SpyInstance
+
+describe('OverviewBlock', () => {
+  beforeEach(() => {
+    spiedOnTitleCase = jest.spyOn(titleCaseModule, 'default')
+  })
+
+  afterEach(() => {
+    spiedOnTitleCase.mockReset()
+  })
+
+  it('should transform text to title case when Picasso titleCase property is true', () => {
+    const LABEL_TEXT = 'abc dj4'
+
+    renderOverviewBlock(
+      { value: 'abc co5', label: LABEL_TEXT },
+      { titleCase: true }
+    )
+
+    expect(spiedOnTitleCase).toHaveBeenCalledWith(LABEL_TEXT)
+  })
+
+  it('should not transform text to title case when Picasso titleCase property is true but the component property overrides it', () => {
+    renderOverviewBlock(
+      { value: 'abc dk9', label: 'abc ps0', titleCase: false },
+      { titleCase: true }
+    )
+
+    expect(spiedOnTitleCase).toHaveBeenCalledTimes(0)
+  })
+
+  describe('when OnClick function is defined', () => {
+    describe('when `as` prop is defined', () => {
+      it('render the element as `Link`', () => {
+        const { getByTestId } = renderOverviewBlock({
+          value: 'abc dk9',
+          label: 'abc ps0',
+          as: Link,
+          onClick: jest.fn(),
+          to: '/',
+          'data-testid': 'OverviewBlock'
+        })
+        const block = getByTestId('OverviewBlock')
+
+        // By the Link component to -> href
+        expect(block).toHaveAttribute('href', '/')
+        expect(block.nodeName).toBe('A')
+      })
+    })
+
+    describe('when `as` prop is undefined', () => {
+      it('render the element as `button`', () => {
+        const { getByTestId } = renderOverviewBlock({
+          value: 'abc dk9',
+          label: 'abc ps0',
+          onClick: jest.fn(),
+          'data-testid': 'OverviewBlock'
+        })
+
+        expect(getByTestId('OverviewBlock').nodeName).toBe('BUTTON')
+      })
+    })
+  })
+
+  describe('when OnClick function is undefined', () => {
+    it('renders the element as `div`', () => {
+      const { getByTestId } = renderOverviewBlock({
+        value: 'abc dk9',
+        label: 'abc ps0',
+        'data-testid': 'OverviewBlock'
+      })
+
+      expect(getByTestId('OverviewBlock').nodeName).toBe('DIV')
+    })
+
+    it('renders the element as `Link`', () => {
+      const { getByTestId } = renderOverviewBlock({
+        as: Link,
+        to: '/',
+        'data-testid': 'OverviewBlock'
+      })
+      const block = getByTestId('OverviewBlock')
+
+      // By the Link component to -> href
+      expect(block).toHaveAttribute('href', '/')
+      expect(block.nodeName).toBe('A')
+    })
+  })
+})

package/src/OverviewBlockGroup/OverviewBlockGroup.tsx

@@ -0,0 +1,56 @@
+import React, {
+  FunctionComponent,
+  HTMLAttributes,
+  ReactNode,
+  ReactComponentElement
+} from 'react'
+
+import { Alignment, BlockWidth } from './settings'
+import { OverviewBlockGroupContext } from './OverviewBlockGroupContext'
+import OverviewBlockRow from '../OverviewBlockRow'
+
+type Props = HTMLAttributes<HTMLDivElement> & {
+  /** Value and label alignment for blocks. By default content is aligned to the left. */
+  align?: Alignment
+  /** The block width variant */
+  blockWidth?: BlockWidth
+}
+
+// We need to inject a single row if there is none provided.
+// It allows to skip `OverviewBlock.Row` component for a single-row groups.
+const shouldInjectRow = (children?: ReactNode) => {
+  if (!children) {
+    return false
+  }
+
+  return !React.Children.toArray(children)
+    .filter((el): el is ReactComponentElement<typeof OverviewBlockRow> =>
+      React.isValidElement(el)
+    )
+    .some(el => el.type.displayName === OverviewBlockRow.displayName)
+}
+
+const OverviewBlockGroup: FunctionComponent<Props> = props => {
+  const { children, align = 'default', blockWidth = 'regular', ...rest } = props
+
+  return (
+    <section {...rest}>
+      <OverviewBlockGroupContext.Provider value={{ align, blockWidth }}>
+        {shouldInjectRow(children) ? (
+          <OverviewBlockRow>{children}</OverviewBlockRow>
+        ) : (
+          children
+        )}
+      </OverviewBlockGroupContext.Provider>
+    </section>
+  )
+}
+
+OverviewBlockGroup.displayName = 'OverviewBlockGroup'
+
+OverviewBlockGroup.defaultProps = {
+  align: 'default',
+  blockWidth: 'regular'
+}
+
+export default OverviewBlockGroup

package/src/OverviewBlockGroup/OverviewBlockGroupContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react'
+
+import { Alignment, BlockWidth } from './settings'
+
+interface OverviewBlockGroupSettings {
+  align: Alignment
+  blockWidth: BlockWidth
+}
+
+const defaultSettings = {
+  align: 'default' as const,
+  blockWidth: 'regular' as const
+}
+
+export const OverviewBlockGroupContext = createContext<
+  OverviewBlockGroupSettings
+>(defaultSettings)
+
+export const useOverviewBlockGroupContext = () => {
+  return useContext(OverviewBlockGroupContext)
+}

package/src/OverviewBlockGroup/index.ts

@@ -0,0 +1 @@
+export { default } from './OverviewBlockGroup'

package/src/OverviewBlockGroup/settings.ts

@@ -0,0 +1,2 @@
+export type Alignment = 'default' | 'center'
+export type BlockWidth = 'narrow' | 'regular' | 'wide'

package/src/OverviewBlockGroup/story/BlockWidth.example.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { OverviewBlock } from '@toptal/picasso-lab'
+import { Container } from '@toptal/picasso'
+
+const BlockWidthExample = () => {
+  return (
+    <Container>
+      <Container>
+        <OverviewBlock.Group blockWidth='narrow'>
+          <OverviewBlock value='Narrow' label='Width' />
+          <OverviewBlock value='Narrow' label='Width' />
+          <OverviewBlock value='Narrow' label='Width' />
+          <OverviewBlock value='Narrow' label='Width' />
+          <OverviewBlock value='Narrow' label='Width' />
+        </OverviewBlock.Group>
+      </Container>
+
+      <Container top='small'>
+        <OverviewBlock.Group blockWidth='regular'>
+          <OverviewBlock value='Regular' label='Width' />
+          <OverviewBlock value='Regular' label='Width' />
+          <OverviewBlock value='Regular' label='Width' />
+          <OverviewBlock value='Regular' label='Width' />
+        </OverviewBlock.Group>
+      </Container>
+
+      <Container top='small'>
+        <OverviewBlock.Group blockWidth='wide'>
+          <OverviewBlock value='Wide' label='Width' />
+          <OverviewBlock value='Wide' label='Width' />
+          <OverviewBlock value='Wide' label='Width' />
+        </OverviewBlock.Group>
+      </Container>
+    </Container>
+  )
+}
+
+export default BlockWidthExample

package/src/OverviewBlockGroup/story/CenterAligned.example.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { OverviewBlock } from '@toptal/picasso-lab'
+
+const CenterAlignedExample = () => {
+  return (
+    <OverviewBlock.Group align='center'>
+      <OverviewBlock value='12345678' label='Label' variant='label-red' />
+      <OverviewBlock
+        value='$585,895,606.35'
+        label='Paid'
+        variant='label-green'
+      />
+    </OverviewBlock.Group>
+  )
+}
+
+export default CenterAlignedExample

package/src/OverviewBlockGroup/story/index.jsx

@@ -0,0 +1,25 @@
+import OverviewBlockGroup from '../OverviewBlockGroup'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const componentDocs = PicassoBook.createComponentDocs(
+  OverviewBlockGroup,
+  'OverviewBlock.Group'
+)
+
+const chapter = PicassoBook.connectToPage(page =>
+  page
+    .createChapter('Visual variants of the groups', '')
+    .addExample(
+      'OverviewBlockGroup/story/CenterAligned.example.tsx',
+      'Center Aligned'
+    )
+    .addExample(
+      'OverviewBlockGroup/story/BlockWidth.example.tsx',
+      'Block Width'
+    )
+)
+
+export default {
+  chapter,
+  componentDocs
+}

package/src/OverviewBlockGroup/test.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render } from '@toptal/picasso/test-utils'
+
+import OverviewBlock from '../OverviewBlock'
+import OverviewBlockGroup from './OverviewBlockGroup'
+
+describe('OverlayBlockGroup', () => {
+  it('allows to render a single block', () => {
+    expect(() => {
+      render(
+        <OverviewBlockGroup>
+          <OverviewBlock value='Value' label='Label' />
+        </OverviewBlockGroup>
+      )
+    }).not.toThrow()
+  })
+})

package/src/OverviewBlockRow/OverviewBlockRow.tsx

@@ -0,0 +1,22 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react'
+import { Theme, makeStyles } from '@material-ui/core/styles'
+import cx from 'classnames'
+
+import styles from './styles'
+
+type Props = HTMLAttributes<HTMLDivElement>
+
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoOverviewBlockRow'
+})
+
+const OverviewBlockRow: FunctionComponent<Props> = props => {
+  const { className, ...rest } = props
+  const classes = useStyles()
+
+  return <div {...rest} className={cx(classes.root, className)} />
+}
+
+OverviewBlockRow.displayName = 'OverviewBlockRow'
+
+export default OverviewBlockRow

package/src/OverviewBlockRow/index.ts

@@ -0,0 +1 @@
+export { default } from './OverviewBlockRow'

package/src/OverviewBlockRow/story/index.jsx

@@ -0,0 +1,11 @@
+import OverviewBlockRow from '../OverviewBlockRow'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const componentDocs = PicassoBook.createComponentDocs(
+  OverviewBlockRow,
+  'OverviewBlock.Row'
+)
+
+export default {
+  componentDocs
+}