@toptal/picasso-button 1.0.13-alpha-fx-4594-migrate-griditem-c9028d1d9.30 → 2.0.0

package/src/ButtonBase/test.tsx

@@ -0,0 +1,230 @@
+import React from 'react'
+import { render, fireEvent } from '@toptal/picasso-test-utils'
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+import { useTitleCase } from '@toptal/picasso-shared'
+import { Link } from '@toptal/picasso-link'
+import { toTitleCase } from '@toptal/picasso-utils'
+
+import type { Props } from './ButtonBase'
+import { ButtonBase } from './ButtonBase'
+
+jest.mock('@toptal/picasso-shared', () => ({
+  __esModule: true,
+  ...jest.requireActual('@toptal/picasso-shared'),
+  useTitleCase: jest.fn(value => value),
+}))
+
+jest.mock('@toptal/picasso-utils', () => ({
+  __esModule: true,
+  ...jest.requireActual('@toptal/picasso-utils'),
+  noop: jest.fn(),
+  toTitleCase: jest.fn(value => `__TITLE_CASE__${value}`),
+}))
+
+const useTitleCaseMocked = useTitleCase as jest.Mocked<typeof useTitleCase>
+const toTitleCaseMocked = toTitleCase as jest.Mocked<typeof toTitleCase>
+
+const renderButton = (props: OmitInternalProps<Props>) => {
+  const { children, disabled, loading, onClick, titleCase, as, href, ...rest } =
+    props
+
+  return render(
+    <ButtonBase
+      disabled={disabled}
+      loading={loading}
+      onClick={onClick}
+      titleCase={titleCase}
+      as={as}
+      href={href}
+      {...rest}
+    >
+      {children}
+    </ButtonBase>,
+    undefined
+  )
+}
+
+describe('ButtonBase', () => {
+  beforeEach(() => {
+    useTitleCaseMocked.mockReturnValue(false)
+    toTitleCaseMocked.mockImplementation(value => {
+      return `__TITLE_CASE__${value}`
+    })
+  })
+
+  afterEach(() => {
+    useTitleCaseMocked.mockRestore()
+    toTitleCaseMocked.mockRestore()
+  })
+
+  describe('when "as" prop is passed', () => {
+    describe('when "as" prop equals "a"', () => {
+      it('renders Button as a', () => {
+        const { container } = renderButton({
+          children: 'Click me!',
+          as: 'a',
+          href: '/',
+        })
+
+        expect(container).toMatchSnapshot()
+      })
+    })
+
+    describe('when "as" prop equals "Link" component', () => {
+      it('renders Button as a', () => {
+        const onClick = jest.fn()
+        const { container, getByText } = renderButton({
+          children: 'Click me!',
+          as: Link,
+          href: 'URL',
+          onClick,
+        })
+
+        expect(container).toMatchSnapshot()
+
+        fireEvent.click(getByText('Click me!'))
+
+        expect(onClick).toHaveBeenCalled()
+      })
+
+      describe('when "href" prop is empty', () => {
+        it('renders Button as a', () => {
+          const onClick = jest.fn()
+          const { container, getByText } = renderButton({
+            children: 'Click me!',
+            as: Link,
+            href: '',
+            onClick,
+          })
+
+          expect(container).toMatchSnapshot()
+
+          fireEvent.click(getByText('Click me!'))
+
+          expect(onClick).toHaveBeenCalled()
+        })
+      })
+
+      describe('when "disabled" prop is true', () => {
+        it('renders Button as a and does not trigger onClick handler', () => {
+          const onClick = jest.fn()
+          const { container, getByText } = renderButton({
+            children: 'Click me!',
+            as: Link,
+            href: 'URL',
+            onClick,
+            disabled: true,
+          })
+
+          expect(container).toMatchSnapshot()
+
+          fireEvent.click(getByText('Click me!'))
+
+          expect(onClick).not.toHaveBeenCalled()
+        })
+      })
+    })
+
+    describe('when "as" prop does not equal "button"', () => {
+      describe('when "href" prop is passed', () => {
+        it('renders Button as a link', () => {
+          const { container } = renderButton({
+            children: 'Click me!',
+            as: 'span',
+            href: '/',
+          })
+
+          expect(container).toMatchSnapshot()
+        })
+      })
+
+      describe('when "to" prop is passed', () => {
+        it('renders Button as a link', () => {
+          const { container } = renderButton({
+            children: 'Click me!',
+            as: 'span',
+            to: '/',
+          })
+
+          expect(container).toMatchSnapshot()
+        })
+      })
+    })
+  })
+
+  describe('when "role" prop is passed', () => {
+    it('renders Button with a custom role', () => {
+      const { container } = renderButton({
+        children: 'Click me!',
+        role: 'custom',
+      })
+
+      expect(container).toMatchSnapshot()
+    })
+  })
+
+  describe('when "disabled" prop is true', () => {
+    it('renders Button and does not trigger onClick handler', () => {
+      const onClick = jest.fn()
+      const { container, getByText } = renderButton({
+        children: 'Click me!',
+        onClick,
+        disabled: true,
+      })
+
+      expect(container).toMatchSnapshot()
+
+      fireEvent.click(getByText('Click me!'))
+
+      expect(onClick).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('when "disabled" prop is false', () => {
+    it('renders Button and does not trigger onClick handler', () => {
+      const onClick = jest.fn()
+      const { container, getByText } = renderButton({
+        children: 'Click me!',
+        onClick,
+        disabled: false,
+      })
+
+      expect(container).toMatchSnapshot()
+
+      fireEvent.click(getByText('Click me!'))
+
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('when "loading" prop is true', () => {
+    it('renders Button with loading state and does not trigger onClick handler', () => {
+      const onClick = jest.fn()
+      const { container, getByText } = renderButton({
+        children: 'Click me!',
+        onClick,
+        loading: true,
+      })
+
+      expect(container).toMatchSnapshot()
+
+      fireEvent.click(getByText('Click me!'))
+
+      expect(onClick).toHaveBeenCalledTimes(0)
+    })
+  })
+
+  describe('when "titleCase" prop is true', () => {
+    it('renders Button with transformed text to title case', () => {
+      useTitleCaseMocked.mockReturnValue(true)
+      const TEXT_CONTENT = 'Test bk9'
+
+      const { container } = renderButton({
+        children: TEXT_CONTENT,
+        titleCase: true,
+      })
+
+      expect(container).toMatchSnapshot()
+    })
+  })
+})

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

@@ -7,13 +7,14 @@ exports[`ButtonCheckbox renders 1`] = `
   >
     <label
       aria-disabled="false"
-      class="MuiButtonBase-root PicassoButton-medium PicassoButton-secondary PicassoButton-root PicassoButtonControlLabel-root PicassoButtonControlLabel-medium"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 px-4 text-center py-2 pr-6 pl-4"
       data-component-type="button"
       role="button"
       tabindex="0"
+      type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         <span
           class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
@@ -38,7 +39,7 @@ exports[`ButtonCheckbox renders 1`] = `
           </span>
         </span>
         <div
-          class="PicassoButtonControlLabel-content"
+          class="min-w"
           style="margin-left: 0.5rem;"
         >
           Click me!

package/src/ButtonCircular/ButtonCircular.tsx

@@ -1,17 +1,14 @@
 import type { ReactElement, MouseEvent, ElementType } from 'react'
 import React, { forwardRef } from 'react'
 import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type {
   BaseProps,
   ButtonOrAnchorProps,
   OverridableComponent,
 } from '@toptal/picasso-shared'
-import { kebabToCamelCase } from '@toptal/picasso-utils'
 
-import { Button } from '../Button'
-import styles from './styles'
+import { ButtonBase } from '../ButtonBase'
+import { createRootClassNames, createVariantClassNames } from './styles'
 
 export type VariantType = 'primary' | 'flat' | 'transparent'
 
@@ -40,14 +37,6 @@ export interface Props extends BaseProps, ButtonOrAnchorProps {
   responsive?: boolean
 }
 
-// Using { index: -1 } to inject CSS link to the bottom of the head
-// in order to prevent Button's styles to override ButtonCircular's ones
-// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoButtonCircular',
-  index: -1,
-})
-
 export const ButtonCircular: OverridableComponent<Props> = forwardRef<
   HTMLButtonElement,
   Props
@@ -60,39 +49,35 @@ export const ButtonCircular: OverridableComponent<Props> = forwardRef<
     hovered,
     disabled,
     responsive,
+    loading,
     ...rest
   } = props
-  const classes = useStyles()
-
-  const { root: rootClass, focusVisible: focusVisibleClass } = classes
+  const variantClassNames = createVariantClassNames(variant, {
+    disabled,
+    focused,
+    hovered,
+    active,
+  })
 
-  const variantClassName = classes[kebabToCamelCase(variant)]
+  const finalClassName = cx(
+    createRootClassNames({ responsive, active, disabled, focused, hovered }),
+    variantClassNames,
+    className
+  )
 
-  const rootClassName = cx(
-    {
-      [classes.active]: active,
-      [classes.focused]: focused,
-      [classes.hovered]: hovered,
-      [classes.disabled]: disabled,
-      [classes.responsive]: responsive,
-    },
-    variantClassName,
-    rootClass
+  const contentClassName = cx(
+    'font-semibold whitespace-nowrap',
+    'text-button-small',
+    loading ? 'opacity-0' : ''
   )
 
   return (
-    <Button
+    <ButtonBase
       {...rest}
       ref={ref}
-      classes={{
-        root: rootClassName,
-        focusVisible: focusVisibleClass,
-      }}
-      className={className}
-      size='small'
-      active={active}
-      hovered={hovered}
-      focused={focused}
+      loading={loading}
+      className={finalClassName}
+      contentClassName={contentClassName}
       disabled={disabled}
     />
   )

package/src/ButtonCircular/styles.ts

@@ -1,75 +1,127 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { alpha, outline } from '@toptal/picasso-shared'
-import { screens } from '@toptal/picasso-provider'
-
-export default ({ palette }: Theme) =>
-  createStyles({
-    root: {
-      borderRadius: '50%',
-      padding: 0,
-      minWidth: 'initial',
-      width: '1.5em',
-    },
-
-    primary: {},
-
-    responsive: {
-      width: '2.5em',
-      height: '2.5em',
-      [screens('xl')]: {
-        width: '1.5em',
-        height: '1.5em',
-      },
-    },
-
-    flat: {
-      color: palette.grey.dark,
-      backgroundColor: 'initial',
-
-      '&:hover, &$hovered': {
-        backgroundColor: palette.grey.lighter2,
-      },
-
-      '&:active, &$active': {
-        backgroundColor: palette.grey.light2,
-      },
-
-      '&$disabled': {
-        opacity: 0.48,
-        color: palette.grey.dark,
-        backgroundColor: 'initial',
-      },
-
-      border: 'none',
-    },
-
-    transparent: {
-      border: 'none',
-      color: palette.common.white,
-      backgroundColor: 'initial',
-
-      '&$focusVisible, &$focused': {
-        ...outline(palette.common.white),
-      },
-
-      '&:hover, &$hovered': {
-        backgroundColor: alpha(palette.common.white, 0.08),
-      },
-
-      '&:active, &$active': {
-        backgroundColor: alpha(palette.common.white, 0.16),
-      },
-
-      '&$disabled': {
-        color: alpha(palette.common.white, 0.48),
-        backgroundColor: 'initial',
-      },
-    },
-
-    disabled: {},
-    hovered: {},
-    focused: {},
-    active: {},
-    focusVisible: {},
-  })
+import type { VariantType } from './ButtonCircular'
+
+export const createRootClassNames = ({
+  responsive,
+}: {
+  disabled?: boolean
+  focused?: boolean
+  hovered?: boolean
+  active?: boolean
+  loading?: boolean
+  responsive?: boolean
+}) => {
+  const classNames = ['rounded-full', 'p-0']
+
+  if (responsive) {
+    classNames.push('w-[2.5em] h-[2.5em] xl:w-[1.5em] xl:h-[1.5em]')
+  } else {
+    classNames.push('w-[1.5em] h-[1.5em]')
+  }
+
+  return classNames
+}
+
+export const createVariantClassNames = (
+  variant: VariantType,
+  {
+    disabled,
+    focused,
+    hovered,
+    active,
+  }: {
+    disabled?: boolean
+    focused?: boolean
+    hovered?: boolean
+    active?: boolean
+  }
+): string[] => {
+  const variantClassNames = []
+
+  switch (variant) {
+    case 'primary':
+      variantClassNames.push('border-none')
+      variantClassNames.push('text-white')
+      variantClassNames.push('visited:text-white')
+
+      if (disabled) {
+        variantClassNames.push('bg-gray-400')
+      } else {
+        variantClassNames.push('hover:bg-[#4269D6]')
+        variantClassNames.push('active:bg-[#1A41AB]')
+
+        variantClassNames.push(
+          'focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]'
+        )
+        if (focused) {
+          variantClassNames.push('shadow-[0_0_0_3px_rgba(32,78,207,0.48)]')
+        }
+
+        if (hovered) {
+          variantClassNames.push('bg-[#4269D6]')
+        } else if (active) {
+          variantClassNames.push('bg-[#1A41AB]')
+        } else {
+          variantClassNames.push('bg-blue-500')
+        }
+      }
+      break
+    case 'flat':
+      variantClassNames.push('border-none')
+      variantClassNames.push('text-graphite-700')
+
+      if (disabled) {
+        variantClassNames.push('text-graphite-700')
+        variantClassNames.push('opacity-[0.48]')
+        variantClassNames.push('bg-transparent')
+      } else {
+        variantClassNames.push('hover:bg-gray-200')
+        variantClassNames.push('active:bg-gray-400')
+
+        variantClassNames.push(
+          'focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]'
+        )
+        if (focused) {
+          variantClassNames.push('shadow-[0_0_0_3px_rgba(32,78,207,0.48)]')
+        }
+
+        if (hovered) {
+          variantClassNames.push('bg-gray-200')
+        } else if (active) {
+          variantClassNames.push('bg-gray-400')
+        } else {
+          variantClassNames.push('bg-transparent')
+        }
+      }
+      break
+    case 'transparent':
+      variantClassNames.push('border-none')
+      variantClassNames.push('text-white')
+
+      if (disabled) {
+        variantClassNames.push('text-white/[0.48]')
+        variantClassNames.push('bg-transparent')
+      } else {
+        variantClassNames.push('hover:bg-white/[0.08]')
+        variantClassNames.push('active:bg-white/[0.16]')
+
+        variantClassNames.push(
+          'focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,0.48)]'
+        )
+        if (focused) {
+          variantClassNames.push('shadow-[0_0_0_3px_rgba(255,255,255,0.48)]')
+        }
+
+        if (hovered) {
+          variantClassNames.push('bg-white/[0.08]')
+        } else if (active) {
+          variantClassNames.push('bg-white/[0.16]')
+        } else {
+          variantClassNames.push('bg-transparent')
+        }
+      }
+
+      break
+  }
+
+  return variantClassNames
+}

package/src/ButtonControlLabel/ButtonControlLabel.tsx

@@ -1,13 +1,11 @@
 import type { ReactElement, ReactNode } from 'react'
 import React from 'react'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core'
-import cx from 'classnames'
+import { twMerge } from 'tailwind-merge'
 import { Container } from '@toptal/picasso-container'
 
 import { Button } from '../Button'
-import styles from './styles'
+import { createSizeClassNames, createContentSizeClassNames } from './styles'
 
 export interface Props extends BaseProps {
   /** Show the control initially as checked */
@@ -37,14 +35,6 @@ export interface Props extends BaseProps {
   control: ReactElement
 }
 
-// Using { index: -1 } to inject CSS link to the bottom of the head
-// in order to prevent Button's styles to override ButtonAction's ones
-// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoButtonControlLabel',
-  index: -1,
-})
-
 const ButtonControlLabel = ({
   children,
   size = 'medium',
@@ -57,14 +47,12 @@ const ButtonControlLabel = ({
   disabled,
   ...props
 }: Props) => {
-  const classes = useStyles()
-
   const contentLeftSpacing = size === 'large' ? 1 : 0.5
 
   return (
     <Button
       {...props}
-      className={cx(className, classes.root, classes[size])}
+      className={twMerge('text-center', createSizeClassNames(size), className)}
       variant='secondary'
       size={size}
       as='label'
@@ -72,7 +60,10 @@ const ButtonControlLabel = ({
       disabled={disabled}
     >
       {React.cloneElement(control, { id, checked, value, onChange, disabled })}
-      <Container className={classes.content} left={contentLeftSpacing}>
+      <Container
+        className={createContentSizeClassNames(size)}
+        left={contentLeftSpacing}
+      >
         {children}
       </Container>
     </Button>

package/src/ButtonControlLabel/styles.ts

@@ -1,27 +1,31 @@
-import { createStyles } from '@material-ui/core/styles'
+import type { SizeType } from '@toptal/picasso-shared'
 
-export default () =>
-  createStyles({
-    root: {
-      textAlign: 'center',
-      padding: '0.5rem 1.5rem 0.5rem 1rem',
-      '&$small': {
-        padding: '0.25rem 1rem 0.25rem 0.5rem',
-      },
-      '&$large': {
-        padding: '1rem 2rem 1rem 1rem',
-      },
-    },
-    content: {
-      minWidth: 64,
-      '$small &': {
-        minWidth: 48,
-      },
-      '$large &': {
-        minWidth: 84,
-      },
-    },
-    small: {},
-    medium: {},
-    large: {},
-  })
+export const createSizeClassNames = (
+  size: 'small' | 'medium' | 'large'
+): string => {
+  const sizeClassNames: Record<
+    SizeType<'small' | 'medium' | 'large'>,
+    string
+  > = {
+    small: 'py-1 pr-4 pl-2',
+    medium: 'py-2 pr-6 pl-4',
+    large: 'py-4 pr-8 pl-4',
+  }
+
+  return sizeClassNames[size]
+}
+
+export const createContentSizeClassNames = (
+  size: 'small' | 'medium' | 'large'
+): string => {
+  const sizeClassNames: Record<
+    SizeType<'small' | 'medium' | 'large'>,
+    string
+  > = {
+    small: 'min-w-12',
+    medium: 'min-w-16',
+    large: 'min-w-[5.25rem]',
+  }
+
+  return sizeClassNames[size]
+}