@toptal/picasso-lab 9.1.1-alpha-sat-750--poc-picasso-with-ssr.2531 → 9.3.1

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
+}

package/src/OverviewBlockRow/styles.ts

@@ -0,0 +1,27 @@
+import { createStyles, Theme } from '@material-ui/core/styles'
+
+export default ({ palette, sizes }: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      borderRadius: sizes.borderRadius.medium,
+      padding: '1rem 0',
+      border: `${sizes.borderWidth} solid ${palette.grey.lighter2}`,
+      backgroundColor: palette.common.white,
+      justifyContent: 'flex-start',
+      '& > *': {
+        flex: '1 0'
+      },
+      '&:not(:first-child)': {
+        borderTop: 0,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
+      },
+      '&:not(:last-child)': {
+        borderBottom: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        paddingBottom: 0
+      }
+    }
+  })

package/src/Section/Section.tsx

@@ -0,0 +1,163 @@
+import cx from 'classnames'
+import React, { forwardRef, ReactNode, useState } from 'react'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import { Collapse } from '@material-ui/core'
+import {
+  ArrowDownMinor16,
+  BaseProps,
+  Button,
+  Container,
+  SizeType,
+  Typography
+} from '@toptal/picasso'
+import { Rotate180 } from '@toptal/picasso/utils/Transitions'
+
+import styles from './styles'
+
+type VariantType = 'bordered' | 'default' | 'withHeaderBar'
+
+export interface Props extends BaseProps {
+  /** Title of the Section */
+  title?: ReactNode
+  /** Subtitle of the Section */
+  subtitle?: ReactNode
+  /** Additional actions of the Section */
+  actions?: ReactNode
+  /** Main content of the Section */
+  children?: ReactNode
+  /** Whether section can be collapsed */
+  collapsible?: boolean
+  /** Default collapsed value **(applied if `collapsible: true`)** */
+  defaultCollapsed?: boolean
+  testIds?: {
+    header?: string
+    title?: string
+    subtitle?: string
+    actions?: string
+    collapse?: string
+  }
+  variant?: VariantType
+  /** Title size of the inner text */
+  titleSize?: SizeType<'small' | 'medium'>
+}
+
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoSection'
+})
+
+export const Section = forwardRef<HTMLDivElement, Props>(function Section(
+  props,
+  ref
+) {
+  const {
+    className,
+    style,
+    title,
+    subtitle,
+    actions,
+    children,
+    testIds,
+    collapsible = false,
+    defaultCollapsed = true,
+    variant = 'default',
+    titleSize = 'medium',
+    ...rest
+  } = props
+  const classes = useStyles()
+  const [collapsed, setCollapsed] = useState(
+    collapsible ? defaultCollapsed : false
+  )
+
+  const toggleCollapse = () => setCollapsed(!collapsed)
+
+  const renderTitle = () =>
+    title ? (
+      <Typography
+        className={classes.title}
+        data-testid={testIds?.title}
+        variant='heading'
+        size={titleSize}
+      >
+        {title}
+      </Typography>
+    ) : null
+
+  const renderSubtitle = () =>
+    subtitle ? (
+      <Typography
+        className={classes.subtitle}
+        data-testid={testIds?.subtitle}
+        size='medium'
+        color='dark-grey'
+      >
+        {subtitle}
+      </Typography>
+    ) : null
+
+  const renderCollapse = () =>
+    collapsible ? (
+      <Button.Circular
+        onClick={toggleCollapse}
+        data-testid={testIds?.collapse}
+        variant='flat'
+        icon={
+          <Rotate180 on={!collapsed}>
+            <ArrowDownMinor16 />
+          </Rotate180>
+        }
+      />
+    ) : null
+
+  const hasActions = actions || collapsible
+  const renderActions = () =>
+    hasActions ? (
+      <Container data-testid={testIds?.actions} className={classes.actions}>
+        {actions}
+        {renderCollapse()}
+      </Container>
+    ) : null
+
+  const hasHeader = title || subtitle || hasActions
+
+  return (
+    <Container
+      ref={ref}
+      className={cx(
+        {
+          [classes[variant]]: true,
+          [classes.collapsed]: variant === 'default' && collapsed
+        },
+        classes.root,
+        className
+      )}
+      style={style}
+      {...rest}
+    >
+      {hasHeader && (
+        <Container
+          data-testid={testIds?.header}
+          className={cx({
+            [classes[`${variant}Header`]]: true,
+            [classes[`${variant}CollapsedHeader`]]: collapsed
+          })}
+        >
+          {renderTitle()}
+          {renderSubtitle()}
+          {renderActions()}
+        </Container>
+      )}
+      <Collapse in={!collapsed} unmountOnExit>
+        {children}
+      </Collapse>
+    </Container>
+  )
+})
+
+Section.displayName = 'Section'
+Section.defaultProps = {
+  collapsible: false,
+  defaultCollapsed: true,
+  titleSize: 'medium'
+}
+
+export default Section