@toptal/picasso 13.4.0 → 13.4.2

package/src/ButtonGroupItem/styles.ts

@@ -0,0 +1,23 @@
+import { createStyles, Theme } from '@material-ui/core/styles'
+
+import { createOutlineCommons, activeGroup } from '../Button/styles'
+
+export default (theme: Theme) =>
+  createStyles({
+    root: {
+      '&:active, &$active, &:hover, &$hovered, &:focus, &$focused': {
+        // border overlap to keep proper border width, but on state change
+        // we need to move up overlapped border
+        zIndex: 1
+      },
+      '&$group': {
+        ...createOutlineCommons(theme),
+        '&:active, &$active': activeGroup(theme)
+      }
+    },
+    active: {},
+    hovered: {},
+    focused: {},
+    disabled: {},
+    group: {}
+  })

package/src/ButtonLoader/ButtonLoader.tsx

@@ -0,0 +1,60 @@
+import React, { FC } from 'react'
+import { BaseProps } from '@toptal/picasso-shared'
+import ContentLoader from 'react-content-loader'
+
+import { palette } from '../utils'
+import { ButtonProps } from '../Button'
+
+export interface Props extends BaseProps, Pick<ButtonProps, 'size'> {
+  circular?: boolean
+}
+
+const BORDER_RADIUS = 4
+
+// Extrapolated from `em` styles from @toptal/picasso/Button/styles.ts on the basis of 1em=16px
+const BUTTON_SIZES = {
+  small: 24,
+  medium: 36,
+  large: 48
+}
+
+const BUTTON_HORIZONTAL_PADDINGS = {
+  small: 36,
+  medium: 52,
+  large: 58
+}
+
+export const ButtonLoader: FC<Props> = ({
+  style,
+  className,
+  size = 'medium',
+  circular = false
+}) => {
+  const borderRadius = circular ? '50%' : BORDER_RADIUS
+  const height = BUTTON_SIZES[size]
+  const width = circular ? height : height + BUTTON_HORIZONTAL_PADDINGS[size]
+
+  return (
+    <ContentLoader
+      className={className}
+      viewBox={`0 0 ${width} ${height}`}
+      color={palette.grey.main2}
+      width={width}
+      height={height}
+      style={style}
+    >
+      <rect
+        x='0'
+        y='0'
+        rx={borderRadius}
+        ry={borderRadius}
+        width={width}
+        height={height}
+      />
+    </ContentLoader>
+  )
+}
+
+ButtonLoader.displayName = 'ButtonLoader'
+
+export default ButtonLoader

package/src/ButtonLoader/index.ts

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

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

@@ -0,0 +1,65 @@
+import React from 'react'
+import { SkeletonLoader, Container, Typography } from '@toptal/picasso'
+
+const Example = () => (
+  <>
+    <Container bottom='medium'>
+      <Container bottom='xsmall'>
+        <Typography>Default</Typography>
+      </Container>
+      <SkeletonLoader.Button />
+    </Container>
+
+    <Container bottom='medium'>
+      <Container bottom='xsmall'>
+        <Typography>Align center</Typography>
+      </Container>
+
+      <Container flex justifyContent='center'>
+        <SkeletonLoader.Button />
+      </Container>
+    </Container>
+
+    <Container bottom='medium'>
+      <Container bottom='xsmall'>
+        <Typography>Align right</Typography>
+      </Container>
+
+      <Container flex justifyContent='flex-end'>
+        <SkeletonLoader.Button />
+      </Container>
+    </Container>
+
+    <Container bottom='medium'>
+      <Container bottom='xsmall'>
+        <Typography variant='heading'>Sizes</Typography>
+      </Container>
+      <Container inline>
+        <SkeletonLoader.Button size='small' />
+      </Container>
+      <Container inline left='small'>
+        <SkeletonLoader.Button size='medium' />
+      </Container>
+      <Container inline left='small'>
+        <SkeletonLoader.Button size='large' />
+      </Container>
+    </Container>
+
+    <Container bottom='medium'>
+      <Container bottom='xsmall'>
+        <Typography variant='heading'>Circular</Typography>
+      </Container>
+      <Container inline>
+        <SkeletonLoader.Button circular size='small' />
+      </Container>
+      <Container inline left='small'>
+        <SkeletonLoader.Button circular size='medium' />
+      </Container>
+      <Container inline left='small'>
+        <SkeletonLoader.Button circular size='large' />
+      </Container>
+    </Container>
+  </>
+)
+
+export default Example

package/src/ButtonLoader/story/index.jsx

@@ -0,0 +1,22 @@
+import { ButtonLoader } from '../ButtonLoader'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const componentDocs = PicassoBook.createComponentDocs(
+  ButtonLoader,
+  'SkeletonLoader.Button'
+)
+
+const chapter = PicassoBook.connectToPage(
+  page =>
+    page
+      .createChapter('SkeletonLoader.Button')
+      .addExample('ButtonLoader/story/Default.example.tsx', {
+        id: 'ButtonLoader',
+        waitUntilImagesLoaded: true
+      }) // picasso-skip-visuals
+)
+
+export default {
+  componentDocs,
+  chapter
+}

package/src/ButtonRadio/ButtonRadio.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Radio from '../Radio'
+import ButtonControlLabel, {
+  ButtonControlLabelProps
+} from '../ButtonControlLabel'
+
+export interface Props extends Omit<ButtonControlLabelProps, 'control'> {
+  testIds?: {
+    radio?: string
+  }
+}
+
+const ButtonRadio = ({ testIds, ...rest }: Props) => {
+  return (
+    <ButtonControlLabel
+      {...rest}
+      control={<Radio data-testid={testIds?.radio} />}
+    />
+  )
+}
+
+export default ButtonRadio

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

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonRadio renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <label
+      aria-disabled="false"
+      class="MuiButtonBase-root PicassoButton-medium PicassoButton-secondary PicassoButton-root PicassoButtonControlLabel-root PicassoButtonControlLabel-medium"
+      data-component-type="button"
+      role="button"
+      tabindex="0"
+    >
+      <span
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+      >
+        <span
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiRadio-root Radio-root"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <input
+              class="PrivateSwitchBase-input"
+              type="radio"
+              value=""
+            />
+            <div
+              class="Radio-uncheckedIcon"
+            />
+          </span>
+        </span>
+        <div
+          class="PicassoButtonControlLabel-content"
+          style="margin-left: 0.5rem;"
+        >
+          Click me!
+        </div>
+      </span>
+    </label>
+  </div>
+</div>
+`;

package/src/ButtonRadio/index.ts

@@ -0,0 +1,5 @@
+import { Props } from './ButtonRadio'
+
+export { default } from './ButtonRadio'
+export type ButtonRadioProps = Props
+export * from './ButtonRadio'

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

@@ -0,0 +1,21 @@
+import React, { ChangeEvent } from 'react'
+import { Button, Container } from '@toptal/picasso'
+
+const handleClick = (_: ChangeEvent<HTMLInputElement>, value: boolean) =>
+  alert(value)
+
+const Example = () => (
+  <Container>
+    <Button.Radio size='small' onChange={handleClick}>
+      Button
+    </Button.Radio>
+    <Button.Radio size='medium' onChange={handleClick}>
+      Button
+    </Button.Radio>
+    <Button.Radio size='large' onChange={handleClick}>
+      Button
+    </Button.Radio>
+  </Container>
+)
+
+export default Example

package/src/ButtonRadio/story/States.example.tsx

@@ -0,0 +1,24 @@
+import React, { ChangeEvent } from 'react'
+import { Button, Container } from '@toptal/picasso'
+
+const handleClick = (_: ChangeEvent<HTMLInputElement>, value: boolean) =>
+  alert(value)
+
+const Example = () => (
+  <Container>
+    <Button.Radio hovered onChange={handleClick}>
+      Button
+    </Button.Radio>
+    <Button.Radio focused onChange={handleClick}>
+      Button
+    </Button.Radio>
+    <Button.Radio active onChange={handleClick}>
+      Button
+    </Button.Radio>
+    <Button.Radio disabled onChange={handleClick}>
+      Button
+    </Button.Radio>
+  </Container>
+)
+
+export default Example

package/src/ButtonRadio/story/index.jsx

@@ -0,0 +1,20 @@
+import ButtonRadio from '../ButtonRadio'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const chapter = PicassoBook.connectToPage(
+  page =>
+    page
+      .createChapter('Radio Button', 'Radio Style Button.')
+      .addExample('ButtonRadio/story/Default.example.tsx', 'Default') // picasso-skip-visuals
+      .addExample('ButtonRadio/story/States.example.tsx', 'States') // picasso-skip-visuals
+)
+
+const componentDocs = PicassoBook.createComponentDocs(
+  ButtonRadio,
+  'Button.Radio'
+)
+
+export default {
+  chapter,
+  componentDocs
+}

package/src/ButtonRadio/test.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { render, fireEvent, PicassoConfig } from '@toptal/picasso/test-utils'
+import { OmitInternalProps } from '@toptal/picasso-shared'
+
+import ButtonRadio, { Props } from './ButtonRadio'
+
+const renderButtonRadio = (
+  props: OmitInternalProps<Props>,
+  picassoConfig?: PicassoConfig
+) => {
+  return render(<ButtonRadio {...props} />, undefined, picassoConfig)
+}
+
+describe('ButtonRadio', () => {
+  it('renders', () => {
+    const { container } = renderButtonRadio({ children: 'Click me!' })
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('changes value of radio when clicking on button', () => {
+    const onChange = jest.fn()
+    const { getByTestId } = renderButtonRadio({
+      children: 'Click me!',
+      onChange,
+      'data-testid': 'button'
+    })
+
+    const anyChangeEvent = expect.anything()
+
+    fireEvent.click(getByTestId('button'))
+    expect(onChange).toHaveBeenCalledWith(anyChangeEvent, true)
+
+    fireEvent.click(getByTestId('button'))
+    expect(onChange).toHaveBeenCalledWith(anyChangeEvent, true)
+  })
+
+  it('changes value of radio when clicking on radio', () => {
+    const onChange = jest.fn()
+    const { getByTestId } = renderButtonRadio({
+      children: 'Click me!',
+      onChange,
+      testIds: { radio: 'radio' }
+    })
+
+    fireEvent.click(getByTestId('radio'))
+
+    const anyChangeEvent = expect.anything()
+
+    expect(onChange).toHaveBeenCalledWith(anyChangeEvent, true)
+  })
+
+  it('ignores clicks when disabled', () => {
+    const onChange = jest.fn()
+    const { getByTestId } = renderButtonRadio({
+      children: 'Click me!',
+      onChange,
+      testIds: { radio: 'radio' },
+      'data-testid': 'button',
+      disabled: true
+    })
+
+    fireEvent.click(getByTestId('radio'))
+    fireEvent.click(getByTestId('button'))
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})

package/src/ButtonSplit/ButtonSplit.tsx

@@ -0,0 +1,164 @@
+import React, {
+  forwardRef,
+  ReactNode,
+  MouseEvent,
+  FC,
+  HTMLAttributes
+} from 'react'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import { SizeType, BaseProps } from '@toptal/picasso-shared'
+import cx from 'classnames'
+
+import { ArrowDownMinor24, ArrowDownMinor16 } from '../Icon'
+import Button, { ButtonProps } from '../Button'
+import Dropdown from '../Dropdown'
+import styles from './styles'
+
+export interface Props
+  extends BaseProps,
+    Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+  /** Content of Button component */
+  children: ReactNode
+  /** Content element that opens when anchor is clicked */
+  menu: ReactNode
+  /** Callback invoked when component is clicked */
+  onClick?: ButtonProps['onClick']
+  /** A button can have different sizes */
+  size?: ButtonProps['size']
+  /** The variant to use */
+  variant?: 'primary' | 'secondary'
+  /** Is component disaled or not */
+  disabled?: boolean
+  // Internal props
+  menuButtonProps?: Omit<ButtonProps, 'children'>
+  actionButtonProps?: Omit<ButtonProps, 'children'>
+  testIds?: {
+    actionButton?: string
+    menuButton?: string
+  }
+}
+// Using { index: -1 } to inject CSS link to the bottom of the head
+// in order to prevent Button's styles to override ButtonSplit's ones
+// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoButtonSplit',
+  index: -1
+})
+
+const DropdownIcon = ({
+  size,
+  className
+}: {
+  size: SizeType<'small' | 'medium' | 'large'>
+  className?: string
+}) => {
+  if (size === 'large') {
+    return <ArrowDownMinor24 className={className} />
+  }
+
+  return <ArrowDownMinor16 className={className} />
+}
+
+const EventStopPropagation: FC = ({ children }) => {
+  const handleClick = (
+    event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>
+  ) => {
+    event.stopPropagation()
+  }
+
+  return <span onClick={handleClick}>{children}</span>
+}
+
+export const ButtonSplit = forwardRef<HTMLDivElement, Props>(
+  function ButtonSplit(props, ref) {
+    const {
+      size = 'medium',
+      menu,
+      children,
+      variant = 'primary',
+      disabled,
+      style,
+      className,
+      onClick,
+      menuButtonProps,
+      actionButtonProps,
+      testIds = {},
+      ...rest
+    } = props
+    const classes = useStyles()
+
+    const commonClasses = cx(classes.button, {
+      [classes.primaryVariant]: variant === 'primary',
+      [classes.disabled]: disabled
+    })
+
+    const renderMenuButton = ({
+      isOpen,
+      disabled
+    }: {
+      isOpen: boolean
+      disabled?: boolean
+    }) => {
+      const menuButton = (
+        <Button
+          {...menuButtonProps}
+          variant={variant}
+          className={`${commonClasses} ${classes.menuButton} ${
+            classes[`${size}Size`]
+          }`}
+          size={size}
+          disabled={disabled}
+          data-testid={testIds.menuButton}
+        >
+          <DropdownIcon
+            className={cx({
+              [classes.rotated]: isOpen
+            })}
+            size={size}
+          />
+        </Button>
+      )
+
+      return disabled ? (
+        <EventStopPropagation>{menuButton}</EventStopPropagation>
+      ) : (
+        menuButton
+      )
+    }
+
+    return (
+      <Button.Group {...rest} ref={ref} style={style} className={className}>
+        <Button
+          {...actionButtonProps}
+          className={`${commonClasses} ${classes.actionButton}`}
+          size={size}
+          variant={variant}
+          disabled={disabled}
+          onClick={onClick}
+          data-testid={testIds.actionButton}
+        >
+          {children}
+        </Button>
+        <Dropdown
+          content={menu}
+          className={cx(classes.dropdown, {
+            [classes.disabled]: disabled
+          })}
+        >
+          {({ isOpen }: { isOpen: boolean }) =>
+            renderMenuButton({ isOpen, disabled })
+          }
+        </Dropdown>
+      </Button.Group>
+    )
+  }
+)
+
+ButtonSplit.defaultProps = {
+  size: 'medium',
+  variant: 'primary'
+}
+
+ButtonSplit.displayName = 'ButtonSplit'
+
+export default ButtonSplit

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

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonSplit closes menu on click to the item 1`] = `
+<svg
+  class="PicassoSvgArrowDownMinor24-root-100"
+  style="min-width: 24px; min-height: 24px;"
+  viewBox="0 0 24 24"
+>
+  <path
+    d="M18.007 8.3l.707.707-6 6-.707.707-.707-.707-6-6 .707-.707 6 6 6-6z"
+  />
+</svg>
+`;
+
+exports[`ButtonSplit default render 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="PicassoButtonGroup-root"
+    >
+      <button
+        class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root PicassoButtonSplit-primaryVariant PicassoButtonSplit-actionButton"
+        data-component-type="button"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        >
+          Action
+        </span>
+      </button>
+      <div
+        class="PicassoDropdown-root PicassoButtonSplit-dropdown"
+      >
+        <div
+          class="PicassoDropdown-anchor"
+        >
+          <button
+            class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root PicassoButtonSplit-primaryVariant PicassoButtonSplit-menuButton PicassoButtonSplit-mediumSize"
+            data-component-type="button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+            >
+              <svg
+                class="PicassoSvgArrowDownMinor16-root"
+                style="min-width: 16px; min-height: 16px;"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M11.997 5.29l.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ButtonSplit renders arrow down icon for a closed menu 1`] = `
+<svg
+  class="PicassoSvgArrowDownMinor16-root-100"
+  style="min-width: 16px; min-height: 16px;"
+  viewBox="0 0 16 16"
+>
+  <path
+    d="M11.997 5.29l.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4z"
+  />
+</svg>
+`;
+
+exports[`ButtonSplit renders arrow up icon for an opened menu 1`] = `
+<svg
+  class="PicassoSvgArrowDownMinor16-root-100 PicassoButtonSplit-rotated-12"
+  style="min-width: 16px; min-height: 16px;"
+  viewBox="0 0 16 16"
+>
+  <path
+    d="M11.997 5.29l.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4z"
+  />
+</svg>
+`;

package/src/ButtonSplit/index.ts

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

package/src/ButtonSplit/story/Sizes.example.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Button, Menu, Container } from '@toptal/picasso'
+
+const Example = () => {
+  const handleClick = () => console.info('Item is clicked')
+
+  const menu = (
+    <Menu data-testid='menu'>
+      <Menu.Item onClick={handleClick}>First item</Menu.Item>
+      <Menu.Item onClick={handleClick}>Second item</Menu.Item>
+      <Menu.Item onClick={handleClick}>Third item</Menu.Item>
+    </Menu>
+  )
+
+  return (
+    <Container flex gap='small'>
+      <Button.Split size='small' menu={menu}>
+        Button
+      </Button.Split>
+      <Button.Split size='medium' menu={menu}>
+        Button
+      </Button.Split>
+      <Button.Split size='large' menu={menu}>
+        Button
+      </Button.Split>
+    </Container>
+  )
+}
+
+export default Example