@graphcommerce/next-ui 3.25.1 → 4.0.0

package/Button/LinkOrButton.tsx

@@ -0,0 +1,80 @@
+import { Link, LinkProps, useForkRef } from '@mui/material'
+import React, { useRef } from 'react'
+import { ConditionalExcept } from 'type-fest'
+import { Button, ButtonProps } from './Button'
+
+type OmitNever<T extends Record<string, unknown>> = {
+  [K in keyof T as T[K] extends never ? never : K]: T[K]
+}
+type SharedProperties<A, B> = OmitNever<
+  ConditionalExcept<Pick<A & B, keyof A & keyof B>, Record<string, unknown> | undefined>
+>
+
+export type LinkOrButtonProps = {
+  button?: ButtonProps
+  link?: LinkProps
+  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+} & SharedProperties<
+  Omit<ButtonProps, 'sx'>,
+  Omit<LinkProps, 'color' | 'sx'> & Pick<ButtonProps, 'endIcon' | 'startIcon' | 'color' | 'loading'>
+>
+
+/** Renders a Link until the breakpoint is reached and will then render a button. */
+export const LinkOrButton = React.forwardRef<
+  HTMLButtonElement & HTMLAnchorElement,
+  LinkOrButtonProps
+>((props, ref) => {
+  const {
+    // Own created props
+    breakpoint = 'md',
+    button,
+    link,
+
+    // Shared props
+    loading,
+    children,
+    startIcon,
+    endIcon,
+    color,
+    ...sharedProps
+  } = props
+
+  const buttonRef = useForkRef(ref, useRef(null))
+  const linkRef = useForkRef(ref, useRef(null))
+
+  return (
+    <>
+      <Button
+        sx={{ display: { xs: 'none', [breakpoint]: 'inline-flex' }, ...button?.sx }}
+        ref={buttonRef}
+        startIcon={startIcon}
+        endIcon={endIcon}
+        color={color}
+        loading={loading}
+        {...sharedProps}
+        {...button}
+      >
+        {children}
+      </Button>
+
+      <Link
+        sx={{
+          display: { xs: 'inline-flex', [breakpoint]: 'none' },
+          alignItems: 'center',
+          ...link?.sx,
+        }}
+        ref={linkRef}
+        color={loading ? 'text.disabled' : color}
+        underline='none'
+        aria-disabled={loading}
+        variant='body2'
+        {...sharedProps}
+        {...link}
+      >
+        {startIcon}
+        <span>{children}</span>
+        {endIcon}
+      </Link>
+    </>
+  )
+})

package/Button/index.tsx

@@ -1,177 +1,2 @@
-import {
-  Button as MuiButton,
-  ButtonClassKey as MuiButtonClassKey,
-  Theme,
-  makeStyles,
-} from '@material-ui/core'
-import clsx from 'clsx'
-import React from 'react'
-
-type BaseButtonProps = Omit<Parameters<typeof MuiButton>['0'], 'variant' | 'classes'> & {
-  variant?: 'text' | 'outlined' | 'contained' | 'pill' | 'pill-link'
-}
-
-type ButtonClassKey =
-  | 'pill'
-  | 'pillLink'
-  | 'pillPrimary'
-  | 'pillSecondary'
-  | 'pillSizeLarge'
-  | 'pillSizeSmall'
-  | 'pillNoElevation'
-  | 'withStartIcon'
-  | 'startIconText'
-  | 'loading'
-
-type ClassKeys = ButtonClassKey | MuiButtonClassKey
-
-export type ButtonProps = BaseButtonProps & {
-  classes?: { [index in ClassKeys]?: string }
-  loading?: boolean
-  text?: Text
-}
-
-const useStyles = makeStyles<
-  Theme,
-  BaseButtonProps & { classes?: { [index in ButtonClassKey]?: string } },
-  ButtonClassKey
->(
-  (theme: Theme) => ({
-    root: {},
-    label: {},
-    disabled: {},
-    withStartIcon: {
-      [theme.breakpoints.down('sm')]: {
-        height: 40,
-        width: 40,
-        textAlign: 'center',
-        minWidth: 'unset',
-        borderRadius: 99,
-        '& > span > .MuiButton-startIcon': {
-          margin: 'unset',
-        },
-      },
-    },
-    pill: {
-      borderRadius: '99em',
-    },
-    pillLink: {
-      [theme.breakpoints.up('md')]: {
-        // manually match MuiButton and containedPrimary styles
-        textTransform: 'none',
-        ...theme.typography.body2,
-        fontWeight: 400,
-        borderRadius: '99em',
-        boxShadow: theme.shadows[6],
-        backgroundColor: theme.palette.background.paper,
-        color: theme.palette.text.primary,
-        '&:hover': {
-          background: theme.palette.background.paper,
-        },
-      },
-    },
-    pillPrimary: {
-      [theme.breakpoints.up('md')]: {
-        backgroundColor: theme.palette.primary.main,
-        color: theme.palette.primary.contrastText,
-        '&:hover': {
-          background: theme.palette.primary.dark,
-        },
-      },
-    },
-    pillSecondary: {
-      [theme.breakpoints.up('md')]: {
-        backgroundColor: theme.palette.secondary.main,
-        color: theme.palette.secondary.contrastText,
-        '&:hover': {
-          background: theme.palette.secondary.dark,
-        },
-      },
-    },
-    pillSizeLarge: {},
-    pillSizeSmall: {},
-    pillNoElevation: {
-      /* disableElevation does not stop adding box shadow on active... ?! */
-      '&:active': {
-        boxShadow: 'none',
-      },
-    },
-    startIconText: {
-      display: 'none',
-      [theme.breakpoints.up('md')]: {
-        display: 'unset',
-      },
-    },
-    loading: {
-      '& svg': {
-        stroke: theme.palette.text.disabled,
-      },
-    },
-  }),
-  { name: 'MuiPillButton' },
-)
-
-export default React.forwardRef<any, ButtonProps>((props, ref) => {
-  const { classes = {}, ...baseProps } = props
-  const { variant, color, size, className, children, loading, disabled, text, ...buttonProps } =
-    baseProps
-  const {
-    pill,
-    pillPrimary,
-    pillSecondary,
-    pillSizeLarge,
-    pillSizeSmall,
-    pillLink,
-    ...buttonClasses
-  } = classes
-
-  const pillClasses = useStyles({
-    ...baseProps,
-    classes: {
-      pill,
-      pillPrimary,
-      pillSecondary,
-      pillSizeLarge,
-      pillSizeSmall,
-      pillLink,
-      ...buttonClasses,
-    },
-  })
-
-  const variantMap = {
-    pill: 'contained',
-    'pill-link': 'text',
-  }
-
-  const withIcon = typeof buttonProps.startIcon !== 'undefined'
-  const content = <>{loading ? <>Loading</> : children}</>
-
-  return (
-    <MuiButton
-      {...buttonProps}
-      classes={buttonClasses}
-      color={color}
-      variant={variantMap[variant ?? ''] ?? variant}
-      size={size}
-      ref={ref}
-      disabled={loading || disabled}
-      className={clsx(
-        {
-          [pillClasses.pill]: variant?.startsWith('pill'),
-          [pillClasses.pillLink]: variant === 'pill-link',
-          [pillClasses.pillPrimary]: variant?.startsWith('pill') && color === 'primary',
-          [pillClasses.pillSecondary]: variant?.startsWith('pill') && color === 'secondary',
-          [pillClasses.pillSizeLarge]: variant?.startsWith('pill') && size === 'large',
-          [pillClasses.pillSizeSmall]: variant?.startsWith('pill') && size === 'small',
-          [pillClasses.pillNoElevation]: buttonProps.disableElevation,
-          [pillClasses.loading]: loading,
-          [pillClasses.withStartIcon]: withIcon,
-        },
-        className,
-      )}
-    >
-      {withIcon && <span className={pillClasses.startIconText}>{content}</span>}
-      {!withIcon && content}
-    </MuiButton>
-  )
-})
+export * from './Button'
+export * from './LinkOrButton'