@toptal/picasso-lab 9.3.0 → 9.3.1

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

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

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

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

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

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

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

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

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

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