@toptal/picasso-lab 9.3.0 → 9.3.1

package/src/EmptyStateCollection/EmptyStateCollection.tsx

@@ -0,0 +1,56 @@
+import { Container, Typography } from '@toptal/picasso'
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  ReactElement,
+  cloneElement
+} from 'react'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import { Search16 as Search } from '@toptal/picasso/Icon'
+
+import styles from './styles'
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  /** Adds <Icon /> before EmptyStateCollection content */
+  icon?: ReactElement
+}
+
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoEmptyStateCollection'
+})
+
+export const EmptyStateCollection = forwardRef<HTMLDivElement, Props>(
+  function EmptyStateCollection(props, ref) {
+    const classes = useStyles()
+    const { icon, children, style, ...rest } = props
+    const iconProps = {
+      className: classes.icon,
+      color: 'dark-grey' as const
+    }
+    const iconElement = icon ? (
+      cloneElement(icon, iconProps)
+    ) : (
+      <Search {...iconProps} />
+    )
+
+    return (
+      <Container {...rest} alignItems='center' flex ref={ref} style={style}>
+        <Container
+          alignItems='center'
+          className={classes.iconWrapper}
+          flex
+          right='xsmall'
+        >
+          {iconElement}
+        </Container>
+        <Container>
+          <Typography size='small'>{children}</Typography>
+        </Container>
+      </Container>
+    )
+  }
+)
+
+EmptyStateCollection.displayName = 'EmptyStateCollection'
+
+export default EmptyStateCollection

package/src/EmptyStateCollection/index.tsx

@@ -0,0 +1 @@
+export { default } from './EmptyStateCollection'

package/src/EmptyStateCollection/story/Default.example.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { EmptyState } from '@toptal/picasso-lab'
+import { Container } from '@toptal/picasso'
+
+const DefaultExample = () => (
+  <Container>
+    <EmptyState.Collection>No memorandums were added yet</EmptyState.Collection>
+  </Container>
+)
+
+export default DefaultExample

package/src/EmptyStateCollection/story/index.jsx

@@ -0,0 +1,20 @@
+import { EmptyStateCollection } from '../EmptyStateCollection'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const componentDocs = PicassoBook.createComponentDocs(
+  EmptyStateCollection,
+  'EmptyState.Collection'
+)
+
+const chapter = PicassoBook.connectToPage(page =>
+  page
+    .createChapter('EmptyState.Collection')
+    .addExample('EmptyStateCollection/story/Default.example.tsx', {
+      id: 'EmptyStateCollection'
+    })
+)
+
+export default {
+  componentDocs,
+  chapter
+}

package/src/EmptyStateCollection/styles.ts

@@ -0,0 +1,10 @@
+import { createStyles } from '@material-ui/core/styles'
+
+export default () =>
+  createStyles({
+    icon: {
+      flexBasis: '1rem',
+      minWidth: '1rem',
+      height: '1rem'
+    }
+  })

package/src/EmptyStatePage/EmptyStatePage.tsx

@@ -0,0 +1,65 @@
+import { Container, Typography } from '@toptal/picasso'
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  ReactElement,
+  cloneElement
+} from 'react'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+
+import styles from './styles'
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  /** Adds <Icon /> above EmptyStatePage content  */
+  image: ReactElement
+  /** Adds Title string below the main image */
+  title?: string
+}
+
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoEmptyStatePage'
+})
+
+export const EmptyStatePage = forwardRef<HTMLDivElement, Props>(
+  function EmptyStatePage(props, ref) {
+    const classes = useStyles()
+    const { image, title, children, style, ...rest } = props
+
+    return (
+      <Container
+        {...rest}
+        direction='column'
+        alignItems='center'
+        flex
+        ref={ref}
+        style={style}
+      >
+        <Container
+          alignItems='center'
+          justifyContent='center'
+          bottom='small'
+          flex
+        >
+          {cloneElement(image, { className: classes.image })}
+        </Container>
+        {title && (
+          <Container bottom='xsmall'>
+            <Typography variant='heading' size='medium'>
+              {title}
+            </Typography>
+          </Container>
+        )}
+        <Typography
+          size='small'
+          as={typeof children === 'string' ? 'p' : 'div'}
+        >
+          {children}
+        </Typography>
+      </Container>
+    )
+  }
+)
+
+EmptyStatePage.displayName = 'EmptyStatePage'
+
+export default EmptyStatePage

package/src/EmptyStatePage/index.tsx

@@ -0,0 +1 @@
+export { default } from './EmptyStatePage'

package/src/EmptyStatePage/story/Default.example.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { EmptyState } from '@toptal/picasso-lab'
+import { Container, Image } from '@toptal/picasso'
+
+const DefaultExample = () => (
+  <Container>
+    <EmptyState.Page
+      title='Memorandums page is empty'
+      image={
+        <Image
+          src='./jacqueline-with-flowers-1954-square.jpg'
+          alt='Placeholder image'
+        />
+      }
+    >
+      No memorandums were added yet
+    </EmptyState.Page>
+  </Container>
+)
+
+export default DefaultExample

package/src/EmptyStatePage/story/index.jsx

@@ -0,0 +1,21 @@
+import { EmptyStatePage } from '../EmptyStatePage'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const componentDocs = PicassoBook.createComponentDocs(
+  EmptyStatePage,
+  'EmptyState.Page'
+)
+
+const chapter = PicassoBook.connectToPage(page =>
+  page
+    .createChapter('EmptyState.Page')
+    .addExample('EmptyStatePage/story/Default.example.tsx', {
+      id: 'EmptyStatePage',
+      waitUntilImagesLoaded: true
+    })
+)
+
+export default {
+  componentDocs,
+  chapter
+}

package/src/EmptyStatePage/styles.ts

@@ -0,0 +1,9 @@
+import { createStyles } from '@material-ui/core/styles'
+
+export default () =>
+  createStyles({
+    image: {
+      width: '8rem',
+      height: '8rem'
+    }
+  })

package/src/Note/Note.tsx

@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import { BaseProps } from '@toptal/picasso-shared'
+import cx from 'classnames'
+
+import NoteTitle from '../NoteTitle'
+import NoteSubtitle from '../NoteSubtitle'
+import NoteContent from '../NoteContent'
+import styles from './styles'
+
+export interface Props extends BaseProps {
+  children: React.ReactNode
+}
+
+const useStyles = makeStyles<Theme>(styles)
+
+export const Note = forwardRef<HTMLDivElement, Props>(function Note(
+  { children, className, ...rest },
+  ref
+) {
+  const classes = useStyles()
+
+  return (
+    <div ref={ref} className={cx(classes.root, className)} {...rest}>
+      {children}
+    </div>
+  )
+})
+
+Note.displayName = 'Note'
+
+export default Object.assign(Note, {
+  Title: NoteTitle,
+  Subtitle: NoteSubtitle,
+  Content: NoteContent
+})

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

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Note renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="makeStyles-root"
+    >
+      <div
+        class="makeStyles-root"
+      >
+        <h4
+          class="MuiTypography-root MuiTypography-h4"
+        >
+          Title
+        </h4>
+      </div>
+      <div
+        class="PicassoContainer-bottomsmallMargin"
+      >
+        <p
+          class="MuiTypography-root PicassoTypography-bodySmall PicassoTypography-darkGrey MuiTypography-body1"
+        >
+          Subtitle
+        </p>
+      </div>
+      <p
+        class="MuiTypography-root PicassoTypography-bodyMedium PicassoTypography-black MuiTypography-body1"
+      >
+        Content
+      </p>
+    </div>
+  </div>
+</div>
+`;

package/src/Note/index.ts

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

package/src/Note/story/Default.example.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Note } from '@toptal/picasso-lab'
+
+const Example = () => (
+  <Note>
+    <Note.Title>Awesome title</Note.Title>
+    <Note.Subtitle>added on November 14, 2019 at 3:46</Note.Subtitle>
+    <Note.Content>
+      This is a dummy content comment used for example purpouses
+    </Note.Content>
+  </Note>
+)
+
+export default Example

package/src/Note/story/index.jsx

@@ -0,0 +1,23 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+import noteTitleStory from '../../NoteTitle/story'
+import noteSubtitleStory from '../../NoteSubtitle/story'
+import noteContentStory from '../../NoteContent/story'
+import { Note } from '../Note'
+
+const page = PicassoBook.section('Picasso Lab').createPage(
+  'Note',
+  `
+  ${PicassoBook.createBaseDocsLink(
+    'https://app.abstract.com/projects/1b06c884-06af-482a-bf12-a82f521a19a1/branches/master/commits/cd38a6cc5bf8f8b535b142fb9a2c9578c641dd82/files/96635516-c961-460f-988e-7ca2f565a7ec/layers/3B863FAB-C94C-4EE2-8061-FBFAB45778AE?mode=design&present=true&selected=root-699B47BF-FAEA-4D18-8474-A2EB3EA863B2'
+  )}
+  `
+)
+
+page
+  .createTabChapter('Props')
+  .addComponentDocs({ component: Note, name: 'Note' })
+  .addComponentDocs(noteTitleStory.componentDocs)
+  .addComponentDocs(noteSubtitleStory.componentDocs)
+  .addComponentDocs(noteContentStory.componentDocs)
+
+page.createChapter().addExample('Note/story/Default.example.tsx', 'Default') // picasso-skip-visuals

package/src/Note/styles.ts

@@ -0,0 +1,27 @@
+import { Theme, createStyles } from '@material-ui/core/styles'
+
+const barWidth = 4
+
+export default ({ palette, sizes, spacing }: Theme) =>
+  createStyles({
+    root: {
+      borderRadius: sizes.borderRadius.medium,
+      border: `1px solid ${palette.grey.lighter2}`,
+      padding: `${spacing(3)}px ${spacing(3)}px ${spacing(3)}px ${
+        spacing(3) + barWidth
+      }px`,
+      position: 'relative',
+      overflow: 'hidden',
+      backgroundColor: palette.common.white,
+      '&:before': {
+        background: palette.yellow.main,
+        display: 'block',
+        height: '100%',
+        left: 0,
+        position: 'absolute',
+        content: '""',
+        top: 0,
+        width: barWidth
+      }
+    }
+  })

package/src/Note/test.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { render } from '@toptal/picasso/test-utils'
+
+import Note from './Note'
+
+const renderNote = () => {
+  return render(
+    <Note>
+      <Note.Title>Title</Note.Title>
+      <Note.Subtitle>Subtitle</Note.Subtitle>
+      <Note.Content>Content</Note.Content>
+    </Note>
+  )
+}
+
+describe('Note', () => {
+  it('renders', () => {
+    const { container } = renderNote()
+
+    expect(container).toMatchSnapshot()
+  })
+})

package/src/NoteContent/NoteContent.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef, ReactNode } from 'react'
+import { BaseProps } from '@toptal/picasso-shared'
+import { Typography } from '@toptal/picasso'
+
+export interface Props extends BaseProps {
+  children: ReactNode
+}
+
+export const NoteContent = forwardRef<HTMLDivElement, Props>(
+  function NoteContent({ children, ...rest }, ref) {
+    return (
+      <Typography ref={ref} as='p' size='medium' color='black' {...rest}>
+        {children}
+      </Typography>
+    )
+  }
+)
+
+NoteContent.defaultProps = {}
+
+NoteContent.displayName = 'NoteContent'
+
+export default NoteContent

package/src/NoteContent/index.ts

@@ -0,0 +1 @@
+export { default } from './NoteContent'

package/src/NoteContent/story/index.jsx

@@ -0,0 +1,12 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+import { NoteContent } from '../NoteContent'
+
+const componentDocs = PicassoBook.createComponentDocs(
+  NoteContent,
+  'Note.Content',
+  'Note content'
+)
+
+export default {
+  componentDocs
+}

package/src/NoteSubtitle/NoteSubtitle.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef, ReactNode } from 'react'
+import { BaseProps } from '@toptal/picasso-shared'
+import { Container, Typography } from '@toptal/picasso'
+
+export interface Props extends BaseProps {
+  children: ReactNode
+}
+
+export const NoteSubtitle = forwardRef<HTMLDivElement, Props>(
+  function NoteSubtitle({ children, ...rest }, ref) {
+    return (
+      <Container ref={ref} bottom='small' {...rest}>
+        <Typography color='dark-grey' size='small'>
+          {children}
+        </Typography>
+      </Container>
+    )
+  }
+)
+
+NoteSubtitle.defaultProps = {}
+
+NoteSubtitle.displayName = 'NoteSubtitle'
+
+export default NoteSubtitle

package/src/NoteSubtitle/index.ts

@@ -0,0 +1 @@
+export { default } from './NoteSubtitle'

package/src/NoteSubtitle/story/index.jsx

@@ -0,0 +1,12 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+import { NoteSubtitle } from '../NoteSubtitle'
+
+const componentDocs = PicassoBook.createComponentDocs(
+  NoteSubtitle,
+  'Note.Subtitle',
+  'Note subtitle'
+)
+
+export default {
+  componentDocs
+}

package/src/NoteTitle/NoteTitle.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import { BaseProps } from '@toptal/picasso-shared'
+import cx from 'classnames'
+import { Typography } from '@toptal/picasso'
+
+import styles from './styles'
+
+export interface Props extends BaseProps {
+  children: React.ReactNode
+}
+
+const useStyles = makeStyles<Theme>(styles)
+
+export const NoteTitle = forwardRef<HTMLDivElement, Props>(function NoteTitle(
+  { children, className, ...rest },
+  ref
+) {
+  const classes = useStyles()
+
+  return (
+    <div ref={ref} className={cx(classes.root, className)} {...rest}>
+      <Typography variant='heading' size='small'>
+        {children}
+      </Typography>
+    </div>
+  )
+})
+
+NoteTitle.defaultProps = {}
+
+NoteTitle.displayName = 'NoteTitle'
+
+export default NoteTitle

package/src/NoteTitle/index.ts

@@ -0,0 +1 @@
+export { default } from './NoteTitle'

package/src/NoteTitle/story/index.jsx

@@ -0,0 +1,12 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+import { NoteTitle } from '../NoteTitle'
+
+const componentDocs = PicassoBook.createComponentDocs(
+  NoteTitle,
+  'Note.Title',
+  'Note title'
+)
+
+export default {
+  componentDocs
+}

package/src/NoteTitle/styles.ts

@@ -0,0 +1,8 @@
+import { createStyles } from '@material-ui/core/styles'
+
+export default () =>
+  createStyles({
+    root: {
+      marginBottom: '0.25rem'
+    }
+  })

package/src/OverviewBlock/OverviewBlock.tsx

@@ -0,0 +1,125 @@
+import React, {
+  forwardRef,
+  ElementType,
+  HTMLAttributes,
+  MouseEvent,
+  ReactNode
+} from 'react'
+import { Theme, makeStyles } from '@material-ui/core/styles'
+import cx from 'classnames'
+import {
+  OverridableComponent,
+  ColorType,
+  BaseProps,
+  TextLabelProps,
+  useTitleCase
+} from '@toptal/picasso-shared'
+import { Container, Typography } from '@toptal/picasso'
+import { toTitleCase } from '@toptal/picasso/utils'
+
+import styles from './styles'
+import { useOverviewBlockGroupContext } from '../OverviewBlockGroup/OverviewBlockGroupContext'
+import OverviewBlockGroup from '../OverviewBlockGroup'
+import OverviewBlockRow from '../OverviewBlockRow'
+
+type VariantColorType = Extract<ColorType, 'red' | 'green' | 'yellow'>
+
+type Variant = `value-${VariantColorType}` | `label-${VariantColorType}`
+
+type ColorSchema = {
+  value: ColorType
+  label: ColorType
+}
+
+export type Props = BaseProps &
+  TextLabelProps &
+  HTMLAttributes<HTMLButtonElement> & {
+    /** Counter value  */
+    value: ReactNode
+    /** Counter title  */
+    label: string
+    /** The color variant  */
+    variant?: Variant
+    /** Component used for the root node. Either a string to use a DOM element or a component. */
+    as?: ElementType
+    /** Callback invoked when component is clicked */
+    onClick?: (event: MouseEvent) => void
+  }
+
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoOverviewBlock'
+})
+
+export const OverviewBlock: OverridableComponent<Props> = forwardRef<
+  HTMLButtonElement,
+  Props
+>(function OverviewBlock(props, ref) {
+  const {
+    value,
+    label,
+    variant,
+    as,
+    className,
+    onClick,
+    titleCase: propsTitleCase,
+    ...rest
+  } = props
+  const classes = useStyles()
+  const { align, blockWidth } = useOverviewBlockGroupContext()
+
+  const color: ColorSchema = {
+    value: 'black',
+    label: 'dark-grey'
+  }
+
+  if (variant) {
+    const [partName, colorName] = variant.split('-') as [
+      keyof ColorSchema,
+      ColorType
+    ]
+
+    color[partName] = colorName
+  }
+
+  const isClickable = Boolean(onClick) || typeof as !== 'string'
+
+  const Component = isClickable && as ? as : 'div'
+
+  const titleCase = useTitleCase(propsTitleCase)
+
+  return (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cx(
+        { [classes.clickable]: isClickable },
+        { [classes.disableOutline]: !isClickable },
+        classes[`${align}Align`],
+        classes[`${blockWidth}Width`],
+        classes.root,
+        className
+      )}
+      onClick={onClick}
+    >
+      <Container align='left'>
+        <Typography size='xsmall' weight='semibold' color={color.label}>
+          {titleCase ? toTitleCase(label) : label}
+        </Typography>
+        <Typography size='large' weight='semibold' color={color.value}>
+          {value}
+        </Typography>
+      </Container>
+    </Component>
+  )
+})
+
+OverviewBlock.defaultProps = {
+  as: 'button'
+}
+
+OverviewBlock.displayName = 'OverviewBlock'
+
+export default Object.assign(OverviewBlock, {
+  Group: OverviewBlockGroup,
+  Row: OverviewBlockRow
+})