@toptal/picasso-lab 9.3.1 → 13.0.0

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

@@ -1,59 +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: 300px;
-  padding-right: 20px;
-  resize: horizontal;
-  overflow: auto;
-  border-right: 3px solid black;
-`
-
-const Example = () => {
-  return (
-    <>
-      <DynamicWidthContainer style={{ marginTop: 150 }}>
-        <TypographyOverflow
-          lines={2}
-          as='p'
-          tooltipVariant='light'
-          data-testid='ellipsed-text-lines2'
-        >
-          Two lines typography with a very long text and{' '}
-          <a href='#'>two words link</a> and dynamic width. Try to resize.
-        </TypographyOverflow>
-      </DynamicWidthContainer>
-      <DynamicWidthContainer>
-        <TypographyOverflow
-          lines={3}
-          as='p'
-          tooltipVariant='light'
-          data-testid='ellipsed-text-lines3'
-        >
-          Three lines typography with a very long text and a very long text and{' '}
-          a very long text and <a href='#'>two words link</a> and dynamic width.
-          Try to resize.
-        </TypographyOverflow>
-      </DynamicWidthContainer>
-      <DynamicWidthContainer>
-        <TypographyOverflow
-          lines={4}
-          as='p'
-          tooltipVariant='light'
-          data-testid='ellipsed-text-lines4'
-        >
-          &lt;https://longlong.longlong.html/very/long/html/link/very/long/html/link/&gt;
-          Four lines typography with a very long text and a very long text and a
-          very long text and a very long text and a very long text and a very
-          long text and a very long text and <a href='#'>two words link</a> and
-          dynamic width. Try to resize.
-        </TypographyOverflow>
-      </DynamicWidthContainer>
-    </>
-  )
-}
-
-export default Example

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

@@ -1,23 +0,0 @@
-import React from 'react'
-import { TypographyOverflow } from '@toptal/picasso-lab'
-
-const Example = () => {
-  return (
-    <div style={{ width: 300, marginTop: 100 }}>
-      <TypographyOverflow
-        data-testid='ellipsed-text-dark'
-        tooltipVariant='dark'
-      >
-        Dark tooltip. This typography is very long and therefore it overflows.
-      </TypographyOverflow>
-      <TypographyOverflow
-        data-testid='ellipsed-text-light'
-        tooltipVariant='light'
-      >
-        Light tooltip. This typography is very long and therefore it overflows.
-      </TypographyOverflow>
-    </div>
-  )
-}
-
-export default Example

package/src/TypographyOverflow/story/index.jsx

@@ -1,83 +0,0 @@
-import { TypographyOverflow } from '../TypographyOverflow'
-import PicassoBook from '~/.storybook/components/PicassoBook'
-
-const page = PicassoBook.section('Picasso Lab').createPage(
-  'TypographyOverflow',
-  'Show tooltip when typography overflows'
-)
-
-page.createTabChapter('Props').addComponentDocs({
-  component: TypographyOverflow,
-  name: 'TypographyOverflow'
-})
-
-page
-  .createChapter()
-  .addExample('TypographyOverflow/story/Default.example.tsx', {
-    title: 'Default',
-    effect: async (testPage, makeScreenshot) => {
-      await testPage.hover('[data-testid="ellipsed-text"]')
-      await testPage.waitFor(200)
-      await makeScreenshot()
-
-      await testPage.hover('[data-testid="ellipsed-text-dynamic-width"]')
-      await testPage.waitFor(200)
-      await makeScreenshot()
-    }
-  })
-  .addExample('TypographyOverflow/story/Multiline.example.tsx', {
-    title: 'Multiline',
-    effect: async (testPage, makeScreenshot) => {
-      await testPage.hover('[data-testid="ellipsed-text-lines2"]')
-      await testPage.waitFor(200)
-      await makeScreenshot()
-
-      await testPage.hover('[data-testid="ellipsed-text-lines3"]')
-      await testPage.waitFor(200)
-      await makeScreenshot()
-
-      await testPage.hover('[data-testid="ellipsed-text-lines4"]')
-      await testPage.waitFor(200)
-      await makeScreenshot()
-    }
-  })
-  .addExample('TypographyOverflow/story/CheckboxLabel.example.tsx', {
-    title: 'Checkbox label',
-    effect: async (testPage, makeScreenshot) => {
-      await testPage.hover('[data-testid="ellipsed-text"]')
-      await testPage.waitFor(600)
-      await makeScreenshot()
-    }
-  })
-  .addExample('TypographyOverflow/story/CustomTooltip.example.tsx', {
-    title: 'Custom tooltip content',
-    effect: async (testPage, makeScreenshot) => {
-      await testPage.hover('[data-testid="ellipsed-text"]')
-      await testPage.waitFor(200)
-      await makeScreenshot()
-    }
-  })
-  .addExample('TypographyOverflow/story/TooltipVariants.example.tsx', {
-    title: 'Light tooltip background',
-    effect: async (testPage, makeScreenshot) => {
-      await testPage.hover('[data-testid="ellipsed-text-dark"]')
-      await testPage.waitFor(200)
-      await makeScreenshot()
-
-      await testPage.hover('[data-testid="ellipsed-text-light"]')
-      await testPage.waitFor(200)
-      await makeScreenshot()
-    }
-  })
-  .addExample('TypographyOverflow/story/Delay.example.tsx', {
-    title: 'Delay',
-    effect: async (testPage, makeScreenshot) => {
-      await testPage.hover('[data-testid="default-delay-tooltip"]')
-      await testPage.waitFor(200)
-      await makeScreenshot()
-
-      await testPage.hover('[data-testid="long-delay-tooltip"]')
-      await testPage.waitFor(500)
-      await makeScreenshot()
-    }
-  })

package/src/TypographyOverflow/styles.ts

@@ -1,29 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    singleLine: {
-      display: 'block',
-      whiteSpace: 'nowrap'
-    },
-    multiLine: {
-      display: '-webkit-box',
-      whiteSpace: 'initial',
-      wordBreak: 'break-word'
-    },
-    wrapper: {
-      '-webkit-box-orient': 'vertical',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      /**
-       * Workaround for `textOverflow: ellipsis`.
-       * Browser can show ellipsis at the end, even if it's not required -
-       * it's possible if the text has the very same width as the container
-       * (ellipsis width will be the same as the width of the text hidden by these ellipsis).
-       * It could be also affected by the font itself, when it has wider render bouncing borders.
-       * So to be sure, that text container in slightly wider than parent,
-       * we have to to add some super-minor space at the end.
-       */
-      paddingRight: '0.9px'
-    }
-  })

package/src/TypographyOverflow/test.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import { fireEvent, render, waitFor } from '@toptal/picasso/test-utils'
-
-import TypographyOverflow from '.'
-
-jest.mock('@toptal/picasso/utils', () => ({
-  ...(jest.requireActual('@toptal/picasso/utils') as {}),
-  isOverflown: jest.fn(() => true),
-  isPointerDevice: jest.fn(() => true)
-}))
-
-describe('TypographyOverflow', () => {
-  describe('when overflow happened', () => {
-    it('renders tooltip by default', async () => {
-      const { getByTestId, queryByTestId } = render(
-        <TypographyOverflow
-          tooltipContent={<p data-testid='tooltip' />}
-          data-testid='typography'
-        >
-          Just Typography
-        </TypographyOverflow>
-      )
-
-      // no tooltip by default
-      expect(queryByTestId('tooltip')).not.toBeInTheDocument()
-
-      // check tooltip opens
-      // current implementation swaps elements on mouse enter, so another event is needed
-      fireEvent.mouseOver(getByTestId('typography'))
-      fireEvent.mouseOver(getByTestId('typography'))
-      await waitFor(() => {
-        expect(queryByTestId('tooltip')).toBeInTheDocument()
-      })
-
-      // check tooltip hides
-      fireEvent.mouseLeave(getByTestId('typography'))
-      await waitFor(() => {
-        expect(queryByTestId('tooltip')).not.toBeInTheDocument()
-      })
-    })
-
-    it('does not render tooltip if it is disabled', async () => {
-      const { getByTestId, queryByTestId } = render(
-        <TypographyOverflow
-          disableTooltip
-          tooltipContent={<p data-testid='tooltip' />}
-          data-testid='typography'
-        >
-          Just Typography
-        </TypographyOverflow>
-      )
-
-      // check tooltip never opens
-      fireEvent.mouseEnter(getByTestId('typography'))
-      await waitFor(() => {
-        expect(queryByTestId('tooltip')).not.toBeInTheDocument()
-      })
-    })
-  })
-})

package/src/index.ts

@@ -1,35 +0,0 @@
-export { default as Calendar } from './Calendar'
-export type { DateOrDateRangeType } from './Calendar'
-export {
-  default as DatePicker,
-  datePickerParseDateString,
-  DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT,
-  DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT
-} from './DatePicker'
-export type {
-  DatePickerValue,
-  DatePickerStringParser,
-  DatePickerProps
-} from './DatePicker'
-export { default as Drawer } from './Drawer'
-export type { DrawerProps } from './Drawer'
-export { default as Dropzone, ErrorCode as DropzoneErrorCode } from './Dropzone'
-export type {
-  DropzoneProps,
-  FileUpload as DropzoneFileUpload,
-  FileError as DropzoneFileError,
-  FileRejection as DropzoneFileRejection,
-  DropEvent as DropzoneDropEvent
-} from './Dropzone'
-export { default as OverviewBlock } from './OverviewBlock'
-export type { OverviewBlockProps } from './OverviewBlock'
-export { default as TypographyOverflow } from './TypographyOverflow'
-export type { TypographyOverflowProps } from './TypographyOverflow'
-export { default as EmptyState } from './EmptyState'
-export { default as Section } from './Section'
-export type { SectionProps } from './Section'
-export { default as Note } from './Note'
-export type { NoteProps } from './Note'
-export { default as Timeline } from './Timeline'
-export type { TimelineProps } from './Timeline'
-// hygen code generator inserts export statements above this comment.

package/src/story/index.jsx

@@ -1,10 +0,0 @@
-import { doc } from 'storybook-readme'
-
-import PicassoBook from '~/.storybook/components/PicassoBook'
-import README from '../../README.md'
-import CHANGELOG from '../../CHANGELOG.md'
-
-const section = PicassoBook.section('Picasso Lab')
-
-section.createDocPage('README', doc(README), { alwaysOnTop: true })
-section.createDocPage('CHANGELOG', doc(CHANGELOG), { alwaysOnTop: true })

package/tsconfig.build.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-  "compilerOptions": {
-    "outDir": "dist-package"
-  },
-  "include": ["src"]
-}