npm - @graphcommerce/next-ui - Versions diffs - 3.0.1 - Mend

@graphcommerce/next-ui 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/.babelrc +3 -0
package/AnimatedRow/index.tsx +20 -0
package/ApolloError/ApolloErrorAlert.tsx +59 -0
package/ApolloError/ApolloErrorFullPage.tsx +25 -0
package/AppShell/AppShellHeader/appShellHeaderContext.tsx +11 -0
package/AppShell/AppShellHeader/index.tsx +433 -0
package/AppShell/AppShellHeader/useAppShellHeaderContext.tsx +6 -0
package/AppShell/AppShellProvider/index.tsx +18 -0
package/AppShell/AppShellSticky/index.tsx +66 -0
package/AppShell/AppShellTitle/index.tsx +45 -0
package/AppShell/DesktopNavActions.tsx +28 -0
package/AppShell/DesktopNavBar.tsx +110 -0
package/AppShell/FixedFab.tsx +41 -0
package/AppShell/ForwardButton.tsx +53 -0
package/AppShell/FullPageShellBase.tsx +59 -0
package/AppShell/Menu.tsx +7 -0
package/AppShell/MenuFab.tsx +132 -0
package/AppShell/MenuFabSecondaryItem.tsx +32 -0
package/AppShell/MinimalPageShellBase.tsx +22 -0
package/AppShell/PageShellHeader/index.tsx +14 -0
package/AppShell/SheetShellBase/index.tsx +107 -0
package/AppShell/SheetShellBase/useSheetStyles.ts +11 -0
package/AppShell/SheetShellDragIndicator/index.tsx +48 -0
package/AppShell/SheetShellHeader/index.tsx +28 -0
package/AppShell/ShellBase.tsx +45 -0
package/AppShell/useFabAnimation.tsx +19 -0
package/AppShell/useFixedFabAnimation.tsx +18 -0
package/AspectRatioContainer/index.tsx +27 -0
package/Blog/BlogAuthor/index.tsx +60 -0
package/Blog/BlogContent/index.tsx +24 -0
package/Blog/BlogHeader/index.tsx +64 -0
package/Blog/BlogList/index.tsx +27 -0
package/Blog/BlogListItem/index.tsx +83 -0
package/Blog/BlogTags/index.tsx +34 -0
package/Blog/BlogTitle/index.tsx +29 -0
package/Button/index.tsx +164 -0
package/ButtonLink/index.tsx +45 -0
package/CHANGELOG.md +1095 -0
package/ChipMenu/index.tsx +130 -0
package/ContainerWithHeader/index.tsx +49 -0
package/Debug/DebugSpacer.tsx +51 -0
package/FlagAvatar/index.tsx +28 -0
package/Form/FormActions.tsx +15 -0
package/Form/FormDivider.tsx +14 -0
package/Form/FormHeader.tsx +27 -0
package/Form/FormRow.tsx +14 -0
package/Form/InputCheckmark.tsx +19 -0
package/Form/index.tsx +62 -0
package/FramerNextPagesSlider/Slide.tsx +71 -0
package/FramerNextPagesSlider/Slider.tsx +39 -0
package/FramerNextPagesSlider/index.ts +1 -0
package/FramerNextPagesSlider/types.ts +3 -0
package/FramerScroller/components/SidebarGallery.tsx +246 -0
package/FramerScroller/components/SidebarSlider.tsx +103 -0
package/FullPageMessage/index.tsx +68 -0
package/Highlight/index.tsx +14 -0
package/IconHeader/index.tsx +109 -0
package/JsonLd/index.tsx +18 -0
package/Page/App.tsx +15 -0
package/Page/Document.tsx +23 -0
package/Page/framerFeatures.ts +4 -0
package/Page/types.ts +19 -0
package/PageLoadIndicator/index.tsx +46 -0
package/PageMeta/index.tsx +40 -0
package/Pagination/index.tsx +123 -0
package/RenderType/index.tsx +40 -0
package/Row/ButtonLinkList/index.tsx +53 -0
package/Row/ColumnOne/index.tsx +11 -0
package/Row/ColumnOneBoxed/index.tsx +27 -0
package/Row/ColumnOneCentered/index.tsx +22 -0
package/Row/ColumnThree/index.tsx +66 -0
package/Row/ColumnTwo/index.tsx +44 -0
package/Row/ColumnTwoSpread/index.tsx +41 -0
package/Row/ColumnTwoWithTop/index.tsx +53 -0
package/Row/ContentLinks/index.tsx +48 -0
package/Row/HeroBanner/index.tsx +102 -0
package/Row/IconBlocks/IconBlock/index.tsx +56 -0
package/Row/IconBlocks/index.tsx +57 -0
package/Row/ParagraphWithSidebarSlide/index.tsx +114 -0
package/Row/Quote/index.tsx +13 -0
package/Row/RowImageText/index.tsx +67 -0
package/Row/RowImageTextBoxed/index.tsx +75 -0
package/Row/SpecialBanner/index.tsx +107 -0
package/Row/index.tsx +13 -0
package/SectionContainer/index.tsx +39 -0
package/SectionHeader/index.tsx +69 -0
package/Separator/index.tsx +33 -0
package/Snackbar/ErrorSnackbar.tsx +9 -0
package/Snackbar/MessageSnackbar.tsx +5 -0
package/Snackbar/MessageSnackbarImpl.tsx +202 -0
package/StarRatingField/index.tsx +58 -0
package/Stepper/Stepper.tsx +45 -0
package/StyledBadge/index.tsx +21 -0
package/Styles/index.tsx +3 -0
package/Styles/responsiveVal.tsx +20 -0
package/SvgImage/SvgImageSimple.tsx +66 -0
package/SvgImage/index.tsx +76 -0
package/TextInputNumber/index.tsx +169 -0
package/Theme/types.ts +63 -0
package/TimeAgo/index.tsx +29 -0
package/Title/index.tsx +71 -0
package/ToggleButton/index.tsx +100 -0
package/ToggleButtonGroup/index.tsx +112 -0
package/UspList/UspListItem.tsx +46 -0
package/UspList/index.tsx +32 -0
package/icons/icon_addresses.svg +17 -0
package/icons/icon_arrow_back.svg +1 -0
package/icons/icon_arrow_forward.svg +1 -0
package/icons/icon_box.svg +6 -0
package/icons/icon_chat.svg +1 -0
package/icons/icon_checkmark.svg +1 -0
package/icons/icon_checkmark_green.svg +1 -0
package/icons/icon_chevron_back.svg +8 -0
package/icons/icon_chevron_down.svg +8 -0
package/icons/icon_chevron_left.svg +8 -0
package/icons/icon_chevron_right.svg +8 -0
package/icons/icon_chevron_up.svg +8 -0
package/icons/icon_close.svg +6 -0
package/icons/icon_close_circle.svg +1 -0
package/icons/icon_collapse_vertical.svg +11 -0
package/icons/icon_customer_service.svg +6 -0
package/icons/icon_email.svg +1 -0
package/icons/icon_email_outline.svg +6 -0
package/icons/icon_expand_vertical.svg +11 -0
package/icons/icon_heart.svg +15 -0
package/icons/icon_home.svg +6 -0
package/icons/icon_id.svg +6 -0
package/icons/icon_invoice_red.svg +7 -0
package/icons/icon_location_red.svg +7 -0
package/icons/icon_lock.svg +6 -0
package/icons/icon_menu.svg +1 -0
package/icons/icon_min.svg +1 -0
package/icons/icon_newspaper.svg +6 -0
package/icons/icon_party.svg +7 -0
package/icons/icon_person.svg +6 -0
package/icons/icon_person_alt.svg +6 -0
package/icons/icon_person_alt_big.svg +15 -0
package/icons/icon_phone.svg +1 -0
package/icons/icon_plus.svg +1 -0
package/icons/icon_sad_face.svg +11 -0
package/icons/icon_sad_shoppingbag.svg +16 -0
package/icons/icon_search.svg +1 -0
package/icons/icon_shopping_bag.svg +7 -0
package/icons/icon_shutdown.svg +6 -0
package/icons/icon_star.svg +6 -0
package/icons/icon_star_filled_muted.svg +6 -0
package/icons/icon_star_yellow.svg +6 -0
package/icons/index.tsx +42 -0
package/index.ts +163 -0
package/package.json +61 -0
package/tsconfig.json +5 -0
package/types.d.ts +13 -0
package/useIntersectionObserver/index.tsx +31 -0

package/AppShell/SheetShellHeader/index.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import useSheetContext from '@graphcommerce/framer-sheet/hooks/useSheetContext'
+import { useElementScroll } from '@graphcommerce/framer-utils'
+import React from 'react'
+import AppShellHeader, { AppShellHeaderProps } from '../AppShellHeader'
+import useSheetStyles from '../SheetShellBase/useSheetStyles'
+import SheetShellDragIndicator from '../SheetShellDragIndicator'
+type SheetShellHeaderProps = {
+  hideDragIndicator?: boolean
+} & Omit<AppShellHeaderProps, 'scrollY'>
+export default function SheetShellHeader(props: SheetShellHeaderProps) {
+  const { hideDragIndicator } = props
+  const { contentRef } = useSheetContext()
+  const { y } = useElementScroll(contentRef)
+  const sheetClasses = useSheetStyles()
+  return (
+    <AppShellHeader
+      {...props}
+      scrollY={y}
+      dragIndicator={
+        hideDragIndicator ? undefined : <SheetShellDragIndicator classes={sheetClasses} />
+      }
+      sheet
+    />
+  )
+}

package/AppShell/ShellBase.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import { useTheme } from '@material-ui/core'
+import Head from 'next/head'
+import React from 'react'
+import PageLoadIndicator from '../PageLoadIndicator'
+export type PageLayoutBaseProps = { name: string; children?: React.ReactNode }
+const ShellBase = (props: { name: string; children?: React.ReactNode }) => {
+  const { children, name } = props
+  const theme = useTheme()
+  return (
+    <>
+      <PageLoadIndicator />
+      <Head>
+        <meta name='theme-color' content={theme.palette.background.default} key='theme-color' />
+        <meta
+          name='viewport'
+          content='minimum-scale=1, initial-scale=1, width=device-width'
+          key='viewport'
+        />
+        <meta name='application-name' content={name} key='application-name' />
+        <meta
+          name='apple-mobile-web-app-capable'
+          content='yes'
+          key='apple-mobile-web-app-capable'
+        />
+        <meta
+          name='apple-mobile-web-app-status-bar-style'
+          content='default'
+          key='apple-mobile-web-app-status-bar-style'
+        />
+        <meta name='apple-mobile-web-app-title' content={name} key='apple-mobile-web-app-title' />
+        <meta name='format-detection' content='telephone=no' key='format-detection' />
+        <meta name='mobile-web-app-capable' content='yes' key='mobile-web-app-capable' />
+        <link rel='apple-touch-icon' href='/manifest/icon-512-512.png' key='apple-touch-icon' />
+        <link rel='manifest' href='/manifest.webmanifest' key='manifest' />
+        <link rel='shortcut icon' href='/manifest/favicon.ico' key='shortcut icon' />
+      </Head>
+      {children}
+    </>
+  )
+}
+export default ShellBase

package/AppShell/useFabAnimation.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import { useMediaQuery, useTheme } from '@material-ui/core'
+import { useMotionTemplate, useTransform, useViewportScroll } from 'framer-motion'
+export default function useFabAnimation() {
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+  const { scrollY } = useViewportScroll()
+  const scrollTo = isMobile ? 0 : 130
+  const scale = useTransform(scrollY, [50, scrollTo], [0.4, 1])
+  const opacity = useTransform(scrollY, [50, scrollTo], [0, 1])
+  const opacity1 = useTransform(scrollY, [0, scrollTo], [0, 0.08])
+  const opacity2 = useTransform(scrollY, [0, scrollTo], [0, 0.1])
+  const filter = useMotionTemplate`
+    drop-shadow(0 1px 4px rgba(0,0,0,${opacity1}))
+    drop-shadow(0 4px 10px rgba(0,0,0,${opacity2}))`
+  return { filter, opacity, scale }
+}

package/AppShell/useFixedFabAnimation.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { useMediaQuery, useTheme } from '@material-ui/core'
+import { useMotionTemplate, useTransform, useViewportScroll } from 'framer-motion'
+export default function useFixedFabAnimation() {
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+  const { scrollY } = useViewportScroll()
+  const scrollTo = isMobile ? 0 : 60
+  const opacity = useTransform(scrollY, [50, scrollTo], [0, 1])
+  const opacity1 = useTransform(scrollY, [0, scrollTo], [0, 0.08])
+  const opacity2 = useTransform(scrollY, [0, scrollTo], [0, 0.1])
+  const filter = useMotionTemplate`
+    drop-shadow(0 1px 4px rgba(0,0,0,${opacity1}))
+    drop-shadow(0 4px 10px rgba(0,0,0,${opacity2}))`
+  return { filter, opacity }
+}

package/AspectRatioContainer/index.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import { makeStyles } from '@material-ui/styles'
+import React from 'react'
+import { UseStyles } from '../Styles'
+const useStyles = makeStyles({
+  root: ({ width, height }: Props) => ({
+    position: `relative`,
+    paddingTop: `calc(100% / ${width} * ${height})`,
+    '& img, & video': {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: `100%`,
+      height: `auto`,
+    },
+  }),
+})
+export type Props = { width: number; height: number }
+export type AspectRatioContainerProps = Props & UseStyles<typeof useStyles>
+const AspectRatioContainer: React.FC<AspectRatioContainerProps> = ({ children, ...styleProps }) => {
+  const classes = useStyles(styleProps)
+  return <div className={classes.root}>{children}</div>
+}
+export default AspectRatioContainer

package/Blog/BlogAuthor/index.tsx ADDED Viewed

@@ -0,0 +1,60 @@
+import { Avatar, Chip, makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import Row from '../../Row'
+import { UseStyles } from '../../Styles'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    wrapper: {
+      display: 'flex',
+      justifyContent: 'left',
+      maxWidth: 800,
+      margin: `0 auto`,
+      marginBottom: theme.spacings.md,
+      '& > div': {
+        height: 52,
+        borderRadius: 30,
+        '& > div': {
+          width: '44px !important',
+          height: '44px !important',
+        },
+      },
+    },
+    date: {
+      color: theme.palette.text.disabled,
+    },
+    author: {},
+  }),
+  { name: 'BlogAuthor' },
+)
+export type BlogAuthorProps = UseStyles<typeof useStyles> & {
+  author: string
+  date: string
+  locale: string
+}
+export default function BlogAuthor(props: BlogAuthorProps) {
+  const { author, date, locale } = props
+  const classes = useStyles()
+  const formatter = new Intl.DateTimeFormat(locale, {
+    month: 'long',
+    day: 'numeric',
+  })
+  return (
+    <div className={classes.wrapper}>
+      <Chip
+        variant='outlined'
+        avatar={<Avatar>{author.charAt(0).toUpperCase()}</Avatar>}
+        label={
+          <section>
+            <div className={classes.author}>{author}</div>
+            <div className={classes.date}>{formatter.format(new Date(date))}</div>
+          </section>
+        }
+      />
+    </div>
+  )
+}

package/Blog/BlogContent/index.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    wrapper: {
+      maxWidth: 800,
+      margin: '0 auto',
+      marginBottom: theme.spacings.sm,
+    },
+  }),
+  { name: 'BlogContent' },
+)
+export type BlogContentProps = {
+  content: React.ReactElement
+}
+export default function BlogContent(props: BlogContentProps) {
+  const { content } = props
+  const classes = useStyles()
+  return <div className={classes.wrapper}>{content}</div>
+}

package/Blog/BlogHeader/index.tsx ADDED Viewed

@@ -0,0 +1,64 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import React from 'react'
+import Row from '../../Row'
+import { UseStyles } from '../../Styles'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    header: {
+      maxWidth: 800,
+      margin: `0 auto`,
+      marginBottom: theme.spacings.md,
+      position: 'relative',
+      backgroundColor: 'rgba(0,0,0,0.08)',
+      overflow: 'hidden',
+    },
+    copy: {
+      color: '#fff',
+      display: 'grid',
+      justifyItems: 'end',
+      alignContent: 'end',
+      padding: `${theme.spacings.lg} ${theme.spacings.md}`,
+      minHeight: '30vh',
+      '& > *': {
+        zIndex: 0,
+        maxWidth: 'max-content',
+      },
+      [theme.breakpoints.up('lg')]: {
+        padding: `${theme.spacings.lg} ${theme.spacings.lg}`,
+      },
+    },
+    asset: {
+      position: 'absolute',
+      top: '0',
+      zIndex: 0,
+      width: '100%',
+      height: '100%',
+      '& img': {
+        width: '100%',
+        height: '100% !important',
+        objectFit: 'cover',
+      },
+      [theme.breakpoints.up('md')]: {
+        height: '100%',
+      },
+    },
+  }),
+  { name: 'BlogHeader' },
+)
+export type BlogHeaderProps = UseStyles<typeof useStyles> & {
+  asset?: React.ReactNode
+}
+export default function BlogHeader(props: BlogHeaderProps) {
+  const { asset } = props
+  const classes = useStyles()
+  return (
+    <div className={classes.header}>
+      <Typography variant='body1' className={classes.copy} />
+      {asset && <div className={classes.asset}>{asset}</div>}
+    </div>
+  )
+}

package/Blog/BlogList/index.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import Row from '../../Row'
+import { UseStyles } from '../../Styles'
+import responsiveVal from '../../Styles/responsiveVal'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'grid',
+      gap: theme.spacings.md,
+      gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 285)}, 1fr))`,
+    },
+  }),
+  { name: 'BlogList' },
+)
+export type BlogListProps = UseStyles<typeof useStyles> & {
+  children: React.ReactElement
+}
+export default function BlogList(props: BlogListProps) {
+  const { children } = props
+  const classes = useStyles()
+  return <Row className={classes.root}>{children}</Row>
+}

package/Blog/BlogListItem/index.tsx ADDED Viewed

@@ -0,0 +1,83 @@
+import { Link, makeStyles, Theme, Typography } from '@material-ui/core'
+import PageLink from 'next/link'
+import React from 'react'
+import { UseStyles } from '../../Styles'
+import responsiveVal from '../../Styles/responsiveVal'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    item: {
+      display: 'grid',
+      gridTemplateRows: `${responsiveVal(140, 220)} auto auto`,
+      alignContent: 'start',
+      color: theme.palette.text.primary,
+      gap: theme.spacings.sm,
+      marginBottom: theme.spacings.sm,
+    },
+    date: {
+      display: 'inline-block',
+      textDecoration: 'none',
+      color: 'rgb(0, 0, 0, 0.3)',
+    },
+    asset: {
+      display: 'grid',
+      overflow: 'hidden',
+      height: '100%',
+      width: '100%',
+      '& img': {
+        height: '100% !important',
+        objectFit: 'cover',
+      },
+      '& p': {
+        alignSelf: 'center',
+        justifySelf: 'center',
+      },
+      background: 'rgb(0, 0, 0, 0.08)',
+    },
+    title: {
+      ...theme.typography.h3,
+    },
+  }),
+  { name: 'BlogListItem' },
+)
+export type BlogListItemProps = UseStyles<typeof useStyles> & {
+  asset: React.ReactNode
+  url: string
+  date: string
+  locale: string
+  title: string
+}
+export default function BlogListItem(props: BlogListItemProps) {
+  const { asset, url, date, locale, title } = props
+  const classes = useStyles(props)
+  const formatter = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+  return (
+    <div className={classes.item}>
+      <PageLink href={`/${url}`} passHref>
+        <Link color='inherit'>
+          <div className={classes.asset}>{asset}</div>
+        </Link>
+      </PageLink>
+      <time className={classes.date} dateTime={date}>
+        {formatter.format(new Date(date))}
+      </time>
+      <PageLink href={`/${url}`} passHref>
+        <Link href={`/${url}`} className={classes.title} color='inherit'>
+          <Typography component='h2' variant='h4' color='inherit'>
+            {title}
+          </Typography>
+        </Link>
+      </PageLink>
+    </div>
+  )
+}

package/Blog/BlogTags/index.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+import { Chip, makeStyles, Theme } from '@material-ui/core'
+import PageLink from 'next/link'
+import React from 'react'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    wrapper: {
+      maxWidth: 800,
+      margin: `0 auto`,
+      marginBottom: theme.spacings.sm,
+    },
+    tag: {
+      marginRight: 8,
+      borderRadius: 4,
+      fontSize: 14,
+    },
+  }),
+  { name: 'BlogTitle' },
+)
+export default function BlogTitle(props) {
+  const { relatedPages } = props
+  const classes = useStyles()
+  return (
+    <div className={classes.wrapper}>
+      {relatedPages.map((page) => (
+        <PageLink key={page.url} href={`/${page.url}`} passHref>
+          <Chip label={page.title} className={classes.tag} />
+        </PageLink>
+      ))}
+    </div>
+  )
+}

package/Blog/BlogTitle/index.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import React from 'react'
+import Row from '../../Row'
+import { UseStyles } from '../../Styles'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    wrapper: {
+      maxWidth: 800,
+      margin: `0 auto`,
+    },
+  }),
+  { name: 'BlogTitle' },
+)
+export type BlogTitleProps = UseStyles<typeof useStyles> & {
+  title: string
+}
+export default function BlogTitle(props: BlogTitleProps) {
+  const { title } = props
+  const classes = useStyles()
+  return (
+    <div className={classes.wrapper}>
+      <Typography variant='h1'>{title}</Typography>
+    </div>
+  )
+}

package/Button/index.tsx ADDED Viewed

@@ -0,0 +1,164 @@
+import { Button as MuiButton, ButtonClassKey as MuiButtonClassKey, Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/styles'
+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'
+  | 'textBold'
+  | 'withStartIcon'
+  | 'startIconText'
+type ClassKeys = ButtonClassKey | MuiButtonClassKey
+type Text = 'normal' | 'bold'
+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: 40 / 2,
+    },
+    pillLink: {
+      [theme.breakpoints.up('md')]: {
+        background: theme.palette.secondary.main,
+        color: theme.palette.secondary.contrastText,
+        boxShadow: theme.shadows[2],
+        borderRadius: 25,
+        padding: '6px 16px',
+        fontWeight: theme.typography.fontWeightBold,
+        '&:hover': {
+          background: theme.palette.secondary.dark,
+        },
+      },
+    },
+    pillPrimary: {
+      //
+    },
+    pillSecondary: {
+      //
+    },
+    pillSizeLarge: {
+      borderRadius: 59 / 2,
+    },
+    pillSizeSmall: {
+      borderRadius: 33 / 2,
+    },
+    pillNoElevation: {
+      /* disableElevation does not stop adding box shadow on active... ?! */
+      '&:active': {
+        boxShadow: 'none',
+      },
+    },
+    textBold: {
+      fontWeight: theme.typography.fontWeightBold,
+    },
+    startIconText: {
+      display: 'none',
+      [theme.breakpoints.up('md')]: {
+        display: 'unset',
+      },
+    },
+  }),
+  { 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,
+    textBold,
+    ...buttonClasses
+  } = classes
+  const pillClasses = useStyles({
+    ...baseProps,
+    classes: {
+      pill,
+      pillPrimary,
+      pillSecondary,
+      pillSizeLarge,
+      pillSizeSmall,
+      pillLink,
+      textBold,
+      ...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 === 'pill',
+          [pillClasses.pillPrimary]: variant === 'pill' && color === 'primary',
+          [pillClasses.pillSecondary]: variant === 'pill' && color === 'secondary',
+          [pillClasses.pillSizeLarge]: variant === 'pill' && size === 'large',
+          [pillClasses.pillSizeSmall]: variant === 'pill' && size === 'small',
+          [pillClasses.pillNoElevation]: buttonProps.disableElevation,
+          [pillClasses.pillLink]: variant === 'pill-link',
+          [pillClasses.textBold]: text === 'bold',
+          [pillClasses.withStartIcon]: withIcon,
+        },
+        className,
+      )}
+    >
+      {withIcon && <span className={pillClasses.startIconText}>{content}</span>}
+      {!withIcon && content}
+    </MuiButton>
+  )
+})

package/ButtonLink/index.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import PageLink from 'next/link'
+import React from 'react'
+import Button, { ButtonProps } from '../Button'
+import { UseStyles } from '../Styles'
+import SvgImage from '../SvgImage'
+import { iconChevronRight } from '../icons'
+const useStyles = makeStyles((theme: Theme) => ({
+  buttonLink: {
+    color: theme.palette.text.primary,
+    textDecoration: 'none',
+    padding: `${theme.spacings.xs} 0`,
+    borderBottom: `1px solid ${theme.palette.grey[300]}`,
+    borderRadius: 0,
+    ...theme.typography.body1,
+    '& > *': {
+      display: 'grid',
+      gridAutoFlow: 'column',
+      justifyContent: 'space-between',
+      gap: `${theme.spacings.xs}`,
+    },
+  },
+}))
+export type ButtonLinkProps = {
+  title: string
+  url: string
+  endIcon?: React.ReactNode
+} & ButtonProps &
+  UseStyles<typeof useStyles>
+export default function ButtonLink(props: ButtonLinkProps) {
+  const { title, url, endIcon, ...buttonProps } = props
+  const classes = useStyles(props)
+  return (
+    <PageLink href={url} passHref>
+      <Button {...buttonProps} className={classes.buttonLink}>
+        <span>{title}</span>
+        {endIcon ?? <SvgImage src={iconChevronRight} alt='chevron right' />}
+      </Button>
+    </PageLink>
+  )
+}