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

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

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

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

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