@toptal/picasso-lab 9.3.1 → 10.0.0

package/src/Section/styles.ts

@@ -1,65 +0,0 @@
-import { createStyles, Theme } from '@material-ui/core'
-
-const defaultHeader = {
-  display: 'flex',
-  paddingBottom: '1.5rem'
-}
-
-const defaultCollapsedHeader = {
-  paddingBottom: '0'
-}
-
-export default ({ sizes, palette }: Theme) =>
-  createStyles({
-    root: {
-      paddingTop: '2rem'
-    },
-    title: {
-      marginRight: '1rem'
-    },
-    subtitle: {
-      alignSelf: 'center',
-      marginRight: '1rem'
-    },
-    actions: {
-      display: 'flex',
-      marginLeft: 'auto'
-    },
-
-    collapsed: {
-      paddingBottom: '2rem'
-    },
-    default: {},
-    bordered: {
-      borderRadius: sizes.borderRadius.medium,
-      border: `solid ${sizes.borderWidth} ${palette.grey.light}`,
-      padding: '2rem',
-      '& > :last-child': {
-        paddingBottom: '0'
-      }
-    },
-    withHeaderBar: {
-      padding: 0,
-      '& > :last-child:not(:first-child)': {
-        padding: '1.5rem'
-      },
-      borderRadius: sizes.borderRadius.medium,
-      border: `solid ${sizes.borderWidth} ${palette.grey.light2}`
-    },
-    defaultHeader,
-    borderedHeader: defaultHeader,
-    withHeaderBarHeader: {
-      display: 'flex',
-      padding: '0.75rem 1rem',
-      borderRadius: `${sizes.borderRadius.medium} ${sizes.borderRadius.medium} 0 0`,
-      borderBottom: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
-      backgroundColor: palette.grey.lighter
-    },
-
-    defaultCollapsedHeader,
-    borderedCollapsedHeader: defaultCollapsedHeader,
-    withHeaderBarCollapsedHeader: {
-      borderBottom: 'none',
-      borderRadius: sizes.borderRadius.medium
-    }
-  })

package/src/Section/test.tsx

@@ -1,115 +0,0 @@
-import React from 'react'
-import {
-  fireEvent,
-  render,
-  waitForElementToBeRemoved
-} from '@toptal/picasso/test-utils'
-
-import Section, { Props } from './Section'
-
-const DEFAULT_HEADER_TEST_ID = 'header'
-const DEFAULT_TITLE_TEST_ID = 'title'
-const DEFAULT_SUBTITLE_TEST_ID = 'subtitle'
-const DEFAULT_ACTIONS_TEST_ID = 'actions'
-const DEFAULT_COLLAPSE_TEST_ID = 'collapse'
-
-const DEFAULT_CONTENT_TEST_ID = 'content'
-
-const renderSection = ({
-  testIds = {
-    header: DEFAULT_HEADER_TEST_ID,
-    title: DEFAULT_TITLE_TEST_ID,
-    subtitle: DEFAULT_SUBTITLE_TEST_ID,
-    actions: DEFAULT_ACTIONS_TEST_ID,
-    collapse: DEFAULT_COLLAPSE_TEST_ID
-  },
-  children = <div data-testid={DEFAULT_CONTENT_TEST_ID} />,
-  ...rest
-}: Partial<Props> = {}) =>
-  render(
-    <Section testIds={testIds} {...rest}>
-      {children}
-    </Section>
-  )
-
-describe('Section', () => {
-  it('renders with title, subtitle, actions and content', () => {
-    const { container, getByTestId } = renderSection({
-      title: 'Title',
-      subtitle: 'Subtitle',
-      actions: 'Actions'
-    })
-
-    const title = getByTestId(DEFAULT_TITLE_TEST_ID)
-    const subtitle = getByTestId(DEFAULT_SUBTITLE_TEST_ID)
-    const actions = getByTestId(DEFAULT_ACTIONS_TEST_ID)
-
-    expect(title).toBeInTheDocument()
-    expect(title).toHaveTextContent('Title')
-    expect(subtitle).toBeInTheDocument()
-    expect(subtitle).toHaveTextContent('Subtitle')
-    expect(actions).toBeInTheDocument()
-    expect(actions).toHaveTextContent('Actions')
-    expect(getByTestId(DEFAULT_CONTENT_TEST_ID)).toBeInTheDocument()
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('renders without header', () => {
-    const { container, queryByTestId } = renderSection()
-
-    expect(queryByTestId(DEFAULT_HEADER_TEST_ID)).not.toBeInTheDocument()
-    expect(queryByTestId(DEFAULT_TITLE_TEST_ID)).not.toBeInTheDocument()
-    expect(queryByTestId(DEFAULT_SUBTITLE_TEST_ID)).not.toBeInTheDocument()
-    expect(queryByTestId(DEFAULT_ACTIONS_TEST_ID)).not.toBeInTheDocument()
-    expect(queryByTestId(DEFAULT_CONTENT_TEST_ID)).toBeInTheDocument()
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('renders with only title', () => {
-    const { queryByTestId } = renderSection({ title: 'Title' })
-
-    expect(queryByTestId(DEFAULT_HEADER_TEST_ID)).toBeInTheDocument()
-    expect(queryByTestId(DEFAULT_TITLE_TEST_ID)).toBeInTheDocument()
-    expect(queryByTestId(DEFAULT_SUBTITLE_TEST_ID)).not.toBeInTheDocument()
-    expect(queryByTestId(DEFAULT_ACTIONS_TEST_ID)).not.toBeInTheDocument()
-  })
-
-  it('renders collapsible initially collapsed', async () => {
-    const { container, queryByTestId } = renderSection({
-      collapsible: true
-    })
-
-    expect(queryByTestId(DEFAULT_CONTENT_TEST_ID)).not.toBeInTheDocument()
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('renders collapsible initially expanded', async () => {
-    const { container, getByTestId } = renderSection({
-      collapsible: true,
-      defaultCollapsed: false
-    })
-
-    expect(getByTestId(DEFAULT_CONTENT_TEST_ID)).toBeInTheDocument()
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('collapses and expands', async () => {
-    const { findByTestId, getByTestId, queryByTestId } = renderSection({
-      collapsible: true
-    })
-
-    expect(queryByTestId(DEFAULT_CONTENT_TEST_ID)).not.toBeInTheDocument()
-
-    const collapse = getByTestId(DEFAULT_COLLAPSE_TEST_ID)
-
-    fireEvent.click(collapse)
-    expect(await findByTestId(DEFAULT_CONTENT_TEST_ID)).toBeInTheDocument()
-
-    fireEvent.click(collapse)
-    await waitForElementToBeRemoved(getByTestId(DEFAULT_CONTENT_TEST_ID))
-  })
-})

package/src/Timeline/Timeline.tsx

@@ -1,25 +0,0 @@
-import React, { forwardRef, ReactElement } from 'react'
-import { BaseProps } from '@toptal/picasso-shared'
-import { Container } from '@toptal/picasso'
-
-import TimelineRow, { TimelineRowProps } from '../TimelineRow'
-
-export type Props = BaseProps & {
-  /** Timeline rows */
-  children: ReactElement<TimelineRowProps> | ReactElement<TimelineRowProps>[]
-}
-
-export const Timeline = forwardRef<HTMLDivElement, Props>(function Timeline(
-  { className, children },
-  ref
-) {
-  return (
-    <Container ref={ref} className={className} flex direction='column'>
-      {children}
-    </Container>
-  )
-})
-
-Timeline.displayName = 'Timeline'
-
-export default Object.assign(Timeline, { Row: TimelineRow })

package/src/Timeline/__snapshots__/test.tsx.snap

@@ -1,332 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Timeline renders 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class="Picasso-root"
-    >
-      <div
-        class="PicassoContainer-flex PicassoContainer-column"
-      >
-        <div
-          class="PicassoContainer-flex PicassoTimelineRow-root"
-        >
-          <div
-            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
-          >
-            <div
-              class="PicassoTimelineRow-dot"
-              data-testid="dot"
-            />
-            <div
-              class="PicassoTimelineRow-connector"
-            />
-          </div>
-          <div
-            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
-          >
-            Row #1
-          </div>
-        </div>
-        <div
-          class="PicassoContainer-flex PicassoTimelineRow-root"
-        >
-          <div
-            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
-          >
-            <div
-              class="PicassoTimelineRow-dot"
-              data-testid="dot"
-            />
-            <div
-              class="PicassoTimelineRow-connector"
-            />
-          </div>
-          <div
-            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
-          >
-            Row #2
-          </div>
-        </div>
-        <div
-          class="PicassoContainer-flex PicassoTimelineRow-root"
-        >
-          <div
-            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
-          >
-            <div
-              class="PicassoTimelineRow-dot"
-              data-testid="dot"
-            />
-            <div
-              class="PicassoTimelineRow-connector"
-            />
-          </div>
-          <div
-            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
-          >
-            Row #3
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Timeline renders with dates 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class="Picasso-root"
-    >
-      <div
-        class="PicassoContainer-flex PicassoContainer-column"
-      >
-        <div
-          class="PicassoContainer-flex PicassoTimelineRow-root"
-        >
-          <div
-            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
-          >
-            <div
-              class="PicassoTimelineRow-dot"
-            />
-            <div
-              class="PicassoTimelineRow-connector"
-            />
-          </div>
-          <div
-            class="PicassoContainer-rightlargeMargin PicassoTimelineRow-date"
-          >
-            <p
-              class="MuiTypography-root PicassoTypography-bodyMedium PicassoTypography-semibold PicassoTimelineRow-dateText MuiTypography-body1"
-            >
-              25.06.2021
-            </p>
-          </div>
-          <div
-            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
-          >
-            Row #1
-          </div>
-        </div>
-        <div
-          class="PicassoContainer-flex PicassoTimelineRow-root"
-        >
-          <div
-            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
-          >
-            <div
-              class="PicassoTimelineRow-dot"
-            />
-            <div
-              class="PicassoTimelineRow-connector"
-            />
-          </div>
-          <div
-            class="PicassoContainer-rightlargeMargin PicassoTimelineRow-date"
-          >
-            <p
-              class="MuiTypography-root PicassoTypography-bodyMedium PicassoTypography-semibold PicassoTimelineRow-dateText MuiTypography-body1"
-            >
-              25.06.2022
-            </p>
-          </div>
-          <div
-            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
-          >
-            Row #2
-          </div>
-        </div>
-        <div
-          class="PicassoContainer-flex PicassoTimelineRow-root"
-        >
-          <div
-            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
-          >
-            <div
-              class="PicassoTimelineRow-dot"
-            />
-            <div
-              class="PicassoTimelineRow-connector"
-            />
-          </div>
-          <div
-            class="PicassoContainer-rightlargeMargin PicassoTimelineRow-date"
-          >
-            <p
-              class="MuiTypography-root PicassoTypography-bodyMedium PicassoTypography-semibold PicassoTimelineRow-dateText MuiTypography-body1"
-            >
-              25.06.2023
-            </p>
-          </div>
-          <div
-            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
-          >
-            Row #3
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Timeline renders with icons 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class="Picasso-root"
-    >
-      <div
-        class="PicassoContainer-flex PicassoContainer-column"
-      >
-        <div
-          class="PicassoContainer-flex PicassoTimelineRow-root"
-        >
-          <div
-            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
-          >
-            <span
-              class="PicassoTimelineRow-icon"
-              data-testid="icon-1"
-            />
-            <div
-              class="PicassoTimelineRow-connector"
-            />
-          </div>
-          <div
-            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
-          >
-            Row #1
-          </div>
-        </div>
-        <div
-          class="PicassoContainer-flex PicassoTimelineRow-root"
-        >
-          <div
-            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
-          >
-            <span
-              class="PicassoTimelineRow-icon"
-              data-testid="icon-2"
-            />
-            <div
-              class="PicassoTimelineRow-connector"
-            />
-          </div>
-          <div
-            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
-          >
-            Row #2
-          </div>
-        </div>
-        <div
-          class="PicassoContainer-flex PicassoTimelineRow-root"
-        >
-          <div
-            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
-          >
-            <span
-              class="PicassoTimelineRow-icon"
-              data-testid="icon-3"
-            />
-            <div
-              class="PicassoTimelineRow-connector"
-            />
-          </div>
-          <div
-            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
-          >
-            Row #3
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Timeline renders without a connector 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class="Picasso-root"
-    >
-      <div
-        class="PicassoContainer-flex PicassoContainer-column"
-      >
-        <div
-          class="PicassoContainer-flex PicassoTimelineRow-root"
-        >
-          <div
-            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
-          >
-            <div
-              class="PicassoTimelineRow-dot"
-              data-testid="dot"
-            />
-            <div
-              class="PicassoTimelineRow-connector"
-              data-testid="connector"
-            />
-          </div>
-          <div
-            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
-          >
-            Row #1
-          </div>
-        </div>
-        <div
-          class="PicassoContainer-flex PicassoTimelineRow-root"
-        >
-          <div
-            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
-          >
-            <div
-              class="PicassoTimelineRow-dot"
-              data-testid="dot"
-            />
-            <div
-              class="PicassoTimelineRow-connector"
-              data-testid="connector"
-            />
-          </div>
-          <div
-            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
-          >
-            Row #2
-          </div>
-        </div>
-        <div
-          class="PicassoContainer-flex PicassoTimelineRow-root"
-        >
-          <div
-            class="PicassoContainer-rightmediumMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column"
-          >
-            <div
-              class="PicassoTimelineRow-dot"
-              data-testid="dot"
-            />
-          </div>
-          <div
-            class="PicassoContainer-bottomlargeMargin PicassoTimelineRow-content"
-          >
-            Row #3
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/Timeline/index.ts

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

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

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

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

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

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