@toptal/picasso-lab 9.3.1 → 10.0.0

package/src/Timeline/test.tsx

@@ -1,101 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,153 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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

@@ -1,29 +0,0 @@
-import React from 'react'
-import { TypographyOverflow } from '@toptal/picasso-lab'
-import { Container } from '@toptal/picasso'
-
-const Example = () => {
-  return (
-    <Container flex>
-      <div style={{ width: 300, marginTop: 100 }}>
-        <TypographyOverflow data-testid='default-delay-tooltip'>
-          Default delay. This typography is very long and therefore it
-          overflows.
-        </TypographyOverflow>
-      </div>
-
-      <Container left='large'>
-        <div style={{ width: 300, marginTop: 100 }}>
-          <TypographyOverflow
-            tooltipDelay='long'
-            data-testid='long-delay-tooltip'
-          >
-            Long delay. This typography is very long and therefore it overflows.
-          </TypographyOverflow>
-        </div>
-      </Container>
-    </Container>
-  )
-}
-
-export default Example

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

@@ -1,64 +0,0 @@
-import React from 'react'
-import { Checkbox, Radio, Grid } from '@toptal/picasso'
-import { TypographyOverflow } from '@toptal/picasso-lab'
-
-const checkboxOptions = [
-  { label: 'Inbound sales', value: 'inbound_sales' },
-  { label: 'Legal', value: 'legal' },
-  {
-    label: 'VIP talent screening',
-    value: 'vip_talent_screening'
-  },
-  { label: 'English screening', value: 'engish_screening' },
-  { label: 'Designer screening', value: 'designer_screening' },
-  {
-    label: 'Technical screening',
-    value: 'technical_screening'
-  }
-]
-
-const radioOptions = [
-  { label: 'Recruiting', value: 'recruiting' },
-  { label: 'Customer service', value: 'customer_service' },
-  { label: 'Staff', value: 'staff' },
-  {
-    label: 'Accounts receivable',
-    value: 'accounts_receivable'
-  },
-  { label: 'Accounts payable', value: 'accounts_payable' },
-  { label: 'Sourcing', value: 'sourcing' }
-]
-
-const Example = () => {
-  return (
-    <div style={{ width: '660px' }}>
-      <Grid spacing={16}>
-        <Grid.Item small={12}>
-          <Grid>
-            {checkboxOptions.map(({ label: optionLabel, value }) => (
-              <Grid.Item key={value} small={2} large={2}>
-                <Checkbox
-                  label={<TypographyOverflow>{optionLabel}</TypographyOverflow>}
-                  value={value}
-                />
-              </Grid.Item>
-            ))}
-          </Grid>
-
-          <Grid>
-            {radioOptions.map(({ label: optionLabel, value }) => (
-              <Grid.Item key={value} small={2} large={2}>
-                <Radio
-                  label={<TypographyOverflow>{optionLabel}</TypographyOverflow>}
-                  value={value}
-                />
-              </Grid.Item>
-            ))}
-          </Grid>
-        </Grid.Item>
-      </Grid>
-    </div>
-  )
-}
-
-export default Example