@toptal/picasso-lab 9.3.0 → 9.3.1

package/src/Timeline/story/Dates.example.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { Timeline, Note } from '@toptal/picasso-lab'
+import { Tasks16, Pencil16, Email16 } from '@toptal/picasso/Icon'
+import { Link, Typography } from '@toptal/picasso'
+
+const Example = () => (
+  <div style={{ maxWidth: 500 }}>
+    <Timeline>
+      <Timeline.Row icon={<Tasks16 />} date='Jun 24, 2020'>
+        <Typography>
+          System marked job{' '}
+          <Link fontSize='inherit'>
+            Principal Solutions Product Manager (203875) → Cleo O'Connell
+          </Link>{' '}
+          as inactive
+        </Typography>
+      </Timeline.Row>
+      <Timeline.Row icon={<Pencil16 />} date='Jun 23, 2020'>
+        <Typography inline>
+          <Link fontSize='inherit'>Bettina Barreto</Link>
+        </Typography>{' '}
+        added a note
+        <Note>
+          <Note.Title>New TOP</Note.Title>
+          <Note.Content>
+            This part was obfuscated, some content was here.
+          </Note.Content>
+        </Note>
+      </Timeline.Row>
+      <Timeline.Row icon={<Tasks16 />} date='Jun 23, 2020'>
+        <Typography>
+          <Link fontSize='inherit'>Carolina Della Corte</Link> changed
+          commitment of{' '}
+          <Link fontSize='inherit'>
+            Principal Solutions Product Manager (203875) → Cleo O'Connell
+          </Link>{' '}
+          from part-time to hourly
+        </Typography>
+      </Timeline.Row>
+      <Timeline.Row icon={<Email16 />} date='Jun 22, 2020'>
+        <Note>
+          <Note.Title>Review of your Toptal coding exercize</Note.Title>
+          <Note.Content>
+            This part was obfuscated, some content was here.
+          </Note.Content>
+        </Note>
+      </Timeline.Row>
+    </Timeline>
+  </div>
+)
+
+export default Example

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

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Timeline } from '@toptal/picasso-lab'
+import { Typography, Container } from '@toptal/picasso'
+
+const Example = () => (
+  <Timeline>
+    <Timeline.Row>
+      <Typography size='medium' variant='heading'>
+        Founder
+      </Typography>
+      <Container bottom='small'>
+        <Typography size='small'>Brutalism 2019 - PRESENT</Typography>
+      </Container>
+      <Typography size='medium'>
+        Founded a private practice focusing on computational design and art.
+      </Typography>
+    </Timeline.Row>
+
+    <Timeline.Row>
+      <Typography size='medium' variant='heading'>
+        Computational Geometry Engineer
+      </Typography>
+      <Container bottom='small'>
+        <Typography size='small'>Arkio 2018 - 2019</Typography>
+      </Container>
+      <Typography size='medium'>
+        Worked on the core engine supporting Arkio's computational geometry
+        operations in VR.
+      </Typography>
+    </Timeline.Row>
+  </Timeline>
+)
+
+export default Example

package/src/Timeline/story/TrimLastConnector.example.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Timeline } from '@toptal/picasso-lab'
+import { Typography, Link } from '@toptal/picasso'
+
+const Example = () => (
+  <Timeline>
+    <Timeline.Row date='May 21, 11:17 PM'>
+      <Typography as='div'>
+        <Link fontSize='inherit'>Lavinia Maluf</Link> commented task{' '}
+        <Typography weight='semibold'>
+          “Mark meetings’ outcome (through the Unresolved Meetings page)”
+        </Typography>{' '}
+        on <Link fontSize='inherit'>Obfuscated subject for meeting 124555</Link>
+      </Typography>
+    </Timeline.Row>
+
+    <Timeline.Row date='May 23, 9:19 AM' hasConnector={false}>
+      <Typography as='div'>
+        <Link fontSize='inherit'>Tomas Urban</Link> commented task{' '}
+        <Typography weight='semibold'>
+          “Mark meetings’ outcome (through the Unresolved Meetings page)”
+        </Typography>{' '}
+        on <Link fontSize='inherit'>Obfuscated subject for meeting 124555</Link>
+      </Typography>
+    </Timeline.Row>
+  </Timeline>
+)
+
+export default Example

package/src/Timeline/story/index.jsx

@@ -0,0 +1,27 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+import timelineRowStory from '../../TimelineRow/story'
+import Timeline from '../Timeline'
+
+const page = PicassoBook.section('Picasso Lab').createPage(
+  'Timeline',
+  `
+  ${PicassoBook.createBaseDocsLink(
+    'https://share.goabstract.com/e4c79c6c-4bcd-4411-97b7-09e821925e8e?mode=build&sha=e93949b90e728478fecb60bd7ba1efc06803315b'
+  )}
+  `
+)
+
+page
+  .createTabChapter('Props')
+  .addComponentDocs({ component: Timeline, name: 'Timeline' })
+  .addComponentDocs(timelineRowStory.componentDocs)
+
+page
+  .createChapter()
+  .addExample('Timeline/story/Default.example.tsx', 'Default') // picasso-skip-visuals
+  .addExample('Timeline/story/Dates.example.tsx', 'Dates') // picasso-skip-visuals
+  .addExample('Timeline/story/TrimLastConnector.example.tsx', {
+    title: 'Trim last connector',
+    description:
+      'You can trim last connector by passing `hasConnector={false}` to the `Timeline.Row` component. It can be useful in situation when you sort date points in the ascending order.'
+  }) // picasso-skip-visuals

package/src/Timeline/test.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { render, TestingPicasso } from '@toptal/picasso/test-utils'
+
+import Timeline, { Props } from './Timeline'
+
+const renderTimeline = ({ children }: Props) =>
+  render(
+    <TestingPicasso>
+      <Timeline>{children}</Timeline>
+    </TestingPicasso>
+  )
+
+describe('Timeline', () => {
+  it('renders', async () => {
+    const { container, queryByText, queryAllByTestId } = renderTimeline({
+      children: (
+        <>
+          <Timeline.Row testIds={{ dot: 'dot' }}>Row #1</Timeline.Row>
+          <Timeline.Row testIds={{ dot: 'dot' }}>Row #2</Timeline.Row>
+          <Timeline.Row testIds={{ dot: 'dot' }}>Row #3</Timeline.Row>
+        </>
+      )
+    })
+
+    expect(queryByText('Row #1')).toBeInTheDocument()
+    expect(queryByText('Row #2')).toBeInTheDocument()
+    expect(queryByText('Row #3')).toBeInTheDocument()
+
+    expect(queryAllByTestId('dot')).toHaveLength(3)
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders without a connector', async () => {
+    const { container, queryAllByTestId } = renderTimeline({
+      children: (
+        <>
+          <Timeline.Row testIds={{ dot: 'dot', connector: 'connector' }}>
+            Row #1
+          </Timeline.Row>
+          <Timeline.Row testIds={{ dot: 'dot', connector: 'connector' }}>
+            Row #2
+          </Timeline.Row>
+          <Timeline.Row
+            testIds={{ dot: 'dot', connector: 'connector' }}
+            hasConnector={false}
+          >
+            Row #3
+          </Timeline.Row>
+        </>
+      )
+    })
+
+    expect(queryAllByTestId('dot')).toHaveLength(3)
+    expect(queryAllByTestId('connector')).toHaveLength(2)
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders with dates', async () => {
+    const { container, queryByText } = renderTimeline({
+      children: (
+        <>
+          <Timeline.Row date='25.06.2021'>Row #1</Timeline.Row>
+          <Timeline.Row date='25.06.2022'>Row #2</Timeline.Row>
+          <Timeline.Row date='25.06.2023'>Row #3</Timeline.Row>
+        </>
+      )
+    })
+
+    expect(queryByText('25.06.2021')).toBeInTheDocument()
+    expect(queryByText('25.06.2022')).toBeInTheDocument()
+    expect(queryByText('25.06.2023')).toBeInTheDocument()
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders with icons', async () => {
+    const { container, queryByTestId } = renderTimeline({
+      children: (
+        <>
+          <Timeline.Row icon={<span data-testid='icon-1' />}>
+            Row #1
+          </Timeline.Row>
+          <Timeline.Row icon={<span data-testid='icon-2' />}>
+            Row #2
+          </Timeline.Row>
+          <Timeline.Row icon={<span data-testid='icon-3' />}>
+            Row #3
+          </Timeline.Row>
+        </>
+      )
+    })
+
+    expect(queryByTestId('icon-1')).toBeInTheDocument()
+    expect(queryByTestId('icon-2')).toBeInTheDocument()
+    expect(queryByTestId('icon-3')).toBeInTheDocument()
+
+    expect(container).toMatchSnapshot()
+  })
+})

package/src/TimelineRow/TimelineRow.tsx

@@ -0,0 +1,83 @@
+import React, { ReactElement, ReactNode } from 'react'
+import { Theme, makeStyles } from '@material-ui/core/styles'
+import { BaseProps } from '@toptal/picasso-shared'
+import { Container, Typography } from '@toptal/picasso'
+import cx from 'classnames'
+
+import styles from './styles'
+
+export interface Props extends BaseProps {
+  /** Timeline row content */
+  children: ReactNode
+  /** Icon for the row between lines */
+  icon?: ReactElement
+  /** Timeline row date */
+  date?: string
+  /** Whether to render a connector line after the row */
+  hasConnector?: boolean
+  testIds?: {
+    dot?: string
+    connector?: string
+  }
+}
+
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoTimelineRow'
+})
+
+const TimelineRow = ({
+  className,
+  children,
+  icon,
+  date,
+  hasConnector,
+  'data-testid': dataTestId,
+  testIds = {}
+}: Props) => {
+  const classes = useStyles()
+
+  return (
+    <Container
+      data-testid={dataTestId}
+      className={cx(classes.root, className)}
+      flex
+    >
+      <Container flex direction='column' alignItems='center' right='medium'>
+        {typeof icon !== 'undefined' ? (
+          React.cloneElement(icon, {
+            className: cx(icon.props.className, classes.icon)
+          })
+        ) : (
+          <div className={classes.dot} data-testid={testIds.dot} />
+        )}
+        {hasConnector && (
+          <div className={classes.connector} data-testid={testIds.connector} />
+        )}
+      </Container>
+
+      {date && (
+        <Container className={classes.date} right='large'>
+          <Typography
+            className={classes.dateText}
+            weight='semibold'
+            size='medium'
+          >
+            {date}
+          </Typography>
+        </Container>
+      )}
+
+      <Container className={classes.content} bottom='large'>
+        {children}
+      </Container>
+    </Container>
+  )
+}
+
+TimelineRow.defaultProps = {
+  hasConnector: true
+}
+
+TimelineRow.displayName = 'TimelineRow'
+
+export default TimelineRow

package/src/TimelineRow/index.ts

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

package/src/TimelineRow/story/index.jsx

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

package/src/TimelineRow/styles.ts

@@ -0,0 +1,47 @@
+import { createStyles, Theme } from '@material-ui/core/styles'
+import { rem } from '@toptal/picasso-shared'
+
+export default ({ palette }: Theme) =>
+  createStyles({
+    root: {
+      // No bottom spacing for the last Container
+      '&:last-child $content': {
+        marginBottom: 0
+      }
+    },
+    content: {},
+    icon: {
+      margin: '4px 0',
+      color: palette.grey.main2
+    },
+    dot: {
+      // Outer dot icon dimensions should match picasso 16px icons
+      width: '16px',
+      height: '16px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'white',
+      margin: '4px 0',
+
+      '&:after': {
+        content: '""',
+        width: '9px',
+        height: '9px',
+        background: palette.grey.main2,
+        borderRadius: '50%',
+        lineHeight: '20px'
+      }
+    },
+    date: {
+      flex: '0 0 auto'
+    },
+    dateText: {
+      lineHeight: rem('24px')
+    },
+    connector: {
+      flex: 1,
+      width: 0,
+      borderLeft: `1px dashed ${palette.grey.main2}`
+    }
+  })

package/src/TypographyOverflow/TypographyOverflow.tsx

@@ -0,0 +1,153 @@
+import cx from 'classnames'
+import React, { ReactNode, useCallback, useState } from 'react'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import { Tooltip, Typography, TypographyProps } from '@toptal/picasso'
+import { isOverflown } from '@toptal/picasso/utils'
+import { BaseProps } from '@toptal/picasso-shared'
+import { DelayType, VariantType } from '@toptal/picasso/Tooltip/Tooltip'
+
+import styles from './styles'
+
+export interface Props extends BaseProps, TypographyProps {
+  /** A typography which can possibly overflow */
+  children?: ReactNode
+  /** Number of lines displayed */
+  lines?: number
+  /** A content to show in tooltip when typography overflows. By default, TypographyOverflow's children are used. */
+  tooltipContent?: ReactNode
+  /** A delay in showing the tooltip when typography overflows. */
+  tooltipDelay?: DelayType
+  /** Tooltip color variant to use. */
+  tooltipVariant?: VariantType
+  /** Do not show tooltips for shorten content. */
+  disableTooltip?: boolean
+}
+
+const useStyles = makeStyles<Theme, Props>(styles, {
+  name: 'TypographyOverflow'
+})
+
+export const TypographyOverflow = (props: Props) => {
+  const {
+    children,
+    lines = 1,
+    tooltipContent,
+    tooltipDelay,
+    tooltipVariant,
+    disableTooltip,
+    className,
+    onClick,
+    onMouseEnter,
+    style,
+    ...rest
+  } = props
+
+  const classes = useStyles(props)
+  const [isTooltipActive, setIsTooltipActive] = useState(false)
+  const [isTooltipOpened, setIsTooltipOpened] = useState(false)
+  const [isTooltipAnimating, setIsTooltipAnimating] = useState(false)
+  const isTooltipRendered = isTooltipActive || isTooltipAnimating
+  const isMultiline = lines > 1
+
+  // We are paying a very high price when using dynamic JSS rules
+  // for a component that is used on a very large scale.
+  // It was causing a major UI freezes and unnecessary style recalculations,
+  // that's why we decided to go with inline styles:
+  // https://github.com/toptal/picasso/pull/2110
+  const extendedStyle = isMultiline
+    ? { ...style, WebkitLineClamp: lines }
+    : style
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      if (
+        !isTooltipOpened &&
+        !disableTooltip &&
+        isOverflown(event.currentTarget)
+      ) {
+        setIsTooltipOpened(true)
+        setIsTooltipActive(true)
+      }
+
+      if (onClick) {
+        onClick(event)
+      }
+    },
+    [isTooltipOpened, disableTooltip, onClick]
+  )
+
+  const handleMouseEnter = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      if (isOverflown(event.currentTarget)) {
+        setIsTooltipActive(true)
+        setIsTooltipAnimating(true)
+      }
+
+      if (onMouseEnter) {
+        onMouseEnter(event)
+      }
+    },
+    [onMouseEnter]
+  )
+
+  const handleTooltipOpen = useCallback(() => {
+    setIsTooltipOpened(true)
+  }, [])
+
+  const handleTooltipClose = useCallback(() => {
+    setIsTooltipActive(false)
+    setIsTooltipOpened(false)
+  }, [])
+
+  const handleTransitionExiting = useCallback(() => {
+    setIsTooltipAnimating(true)
+  }, [])
+
+  const handleTransitionExited = useCallback(() => {
+    setIsTooltipAnimating(false)
+  }, [])
+
+  const typography = (
+    <Typography
+      {...rest}
+      style={extendedStyle}
+      className={cx(
+        classes.wrapper,
+        isMultiline ? classes.multiLine : classes.singleLine,
+        className
+      )}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+    >
+      {children}
+    </Typography>
+  )
+
+  const tooltip = (
+    <Tooltip
+      open={isTooltipOpened}
+      content={tooltipContent ?? children}
+      variant={tooltipVariant}
+      placement='top'
+      delay={tooltipDelay}
+      interactive
+      disableListeners={disableTooltip}
+      onOpen={handleTooltipOpen}
+      onClose={handleTooltipClose}
+      onTransitionExiting={handleTransitionExiting}
+      onTransitionExited={handleTransitionExited}
+    >
+      {typography}
+    </Tooltip>
+  )
+
+  return isTooltipRendered ? tooltip : typography
+}
+
+TypographyOverflow.displayName = 'TypographyOverflow'
+
+TypographyOverflow.defaultProps = {
+  noWrap: true
+}
+
+export default TypographyOverflow

package/src/TypographyOverflow/index.ts

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

package/src/TypographyOverflow/story/CheckboxLabel.example.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Checkbox } from '@toptal/picasso'
+import { TypographyOverflow } from '@toptal/picasso-lab'
+
+const Example = () => {
+  return (
+    <div style={{ display: 'flex' }}>
+      <div style={{ marginTop: 100, maxWidth: '150px', flexBasis: '150px' }}>
+        <Checkbox
+          label={
+            <TypographyOverflow data-testid='ellipsed-text'>
+              This typography is very long and therefore it overflows.
+            </TypographyOverflow>
+          }
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Example

package/src/TypographyOverflow/story/CustomTooltip.example.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { TypographyOverflow } from '@toptal/picasso-lab'
+import { Typography } from '@toptal/picasso'
+
+const Example = () => {
+  return (
+    <div style={{ width: 300, marginTop: 100 }}>
+      <TypographyOverflow
+        data-testid='ellipsed-text'
+        tooltipContent={
+          <Typography color='yellow' weight='semibold'>
+            This typography is very long and therefore it overflows.
+          </Typography>
+        }
+      >
+        This typography is very long and therefore it overflows.
+      </TypographyOverflow>
+    </div>
+  )
+}
+
+export default Example

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { TypographyOverflow } from '@toptal/picasso-lab'
+import styled from 'styled-components'
+import { Container } from '@toptal/picasso'
+
+const DynamicWidthContainer = styled(Container)`
+  margin-top: 1rem;
+  width: 500px;
+  padding-right: 20px;
+  resize: horizontal;
+  overflow: auto;
+  border-right: 3px solid black;
+`
+
+const Example = () => {
+  return (
+    <>
+      <div style={{ width: 300, marginTop: 100 }}>
+        <TypographyOverflow data-testid='ellipsed-text'>
+          This typography is very long and therefore it overflows.
+        </TypographyOverflow>
+      </div>
+      <DynamicWidthContainer>
+        <TypographyOverflow data-testid='ellipsed-text-dynamic-width'>
+          Another typography is very long and has dynamic width. Try to resize.
+        </TypographyOverflow>
+      </DynamicWidthContainer>
+    </>
+  )
+}
+
+export default Example