[FX-5687] Migrate PageFooter to TailwindCSS

.changeset/witty-seahorses-approve.md

@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-page': patch
+---
+
+- migrate `PageFooter` to TailwindCSS

packages/base/Page/src/Page/Page.tsx

@@ -47,8 +47,13 @@ export const Page = forwardRef<HTMLDivElement, Props>(function Page(
     <div
       {...rest}
       ref={ref}
-      className={cx(classes.root, className)}
-      style={{ ...style, '--header-height': '3.5rem' } as React.CSSProperties}
+      className={cx(
+        classes.root,
+        className,
+        '[--content-padding-horizontal:1em] md:[--content-padding-horizontal:2em]',
+        '[--header-height:3.5rem] [--content-width-wide:90em] [--content-width:75em]'
+      )}
+      style={{ ...style } as React.CSSProperties}
     >
       <PageContext.Provider value={{ width, fullWidth }}>
         <PageHamburgerContextProvider hamburgerId={hamburgerId}>

packages/base/Page/src/Page/__snapshots__/test.tsx.snap

@@ -6,8 +6,7 @@ exports[`Page renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="Page-root"
-      style="--header-height: 3.5rem;"
+      class="Page-root [--content-padding md:[--content-padding [--header [--content-width [--content"
     >
       <div>
         Test

packages/base/Page/src/PageFooter/PageFooter.tsx

@@ -1,13 +1,11 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { useContext, forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import type { BaseProps } from '@toptal/picasso-shared'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
 import { PageContext } from '../Page'
 import type { PageContextProps } from '../Page/types'
-import styles from './styles'
+import { getMaxWidthClass } from './styles'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
   /** Content for copyright. You can override default if needed. */
@@ -16,37 +14,36 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
   rightContent?: ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPageFooter',
-})
-
 export const PageFooter = forwardRef<HTMLElement, Props>(function PageFooter(
   props,
   ref
 ) {
   const { className, style, rightContent, copyrightContent, ...rest } = props
-  const classes = useStyles()
   const { width, fullWidth } = useContext<PageContextProps>(PageContext)
 
-  const contentClassnames = cx(
-    {
-      [classes.fullWidth]: fullWidth || width === 'full',
-      [classes.wide]: width === 'wide',
-    },
-    classes.content
+  const contentClassnames = twJoin(
+    getMaxWidthClass({ width, fullWidth }),
+    'box-border',
+    'flex justify-between xs:max-lg:flex-col',
+    'text-white text-md leading-[1em]',
+    'mx-auto pt-2 pb-6 px-[--content-padding-horizontal]'
   )
 
   return (
     <footer
       {...rest}
       ref={ref}
-      className={cx(classes.root, className)}
+      className={twMerge('bg-[#262d3d] w-full', className)}
       style={style}
     >
       <div className={contentClassnames}>
-        <div className={classes.left}>{copyrightContent}</div>
+        <div className='flex items-center justify-center mt-4'>
+          {copyrightContent}
+        </div>
 
-        <div className={classes.right}>{rightContent}</div>
+        <div className='flex items-center justify-center mt-4 xs:max-lg:-order-1 xs:max-md:flex-col'>
+          {rightContent}
+        </div>
       </div>
     </footer>
   )

packages/base/Page/src/PageFooter/story/CopyrightContent.example.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { Page, Typography } from '@toptal/picasso'
 
 const Example = () => (
-  <div>
+  <Page>
     <Page.Footer copyrightContent={<CopyrightContent />} />
-  </div>
+  </Page>
 )
 
 const CopyrightContent = () => (

packages/base/Page/src/PageFooter/story/Default.example.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { Page } from '@toptal/picasso'
 
 const Example = () => (
-  <div>
+  <Page>
     <Page.Footer />
-  </div>
+  </Page>
 )
 
 export default Example

packages/base/Page/src/PageFooter/story/RightContent.example.tsx

@@ -13,9 +13,9 @@ const StyledLink = styled(Link)`
 `
 
 const Example = () => (
-  <div>
+  <Page>
     <Page.Footer rightContent={<Links />} />
-  </div>
+  </Page>
 )
 
 const Links = () => (

packages/base/Page/src/PageFooter/styles.ts

@@ -1,60 +1,13 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
+import type { PageContextProps } from '../Page/types'
 
-export default ({ palette, screens, layout }: Theme) =>
-  createStyles({
-    root: {
-      backgroundColor: palette.grey.darker,
-      width: '100%',
-    },
-    content: {
-      boxSizing: 'border-box',
-      display: 'flex',
-      justifyContent: 'space-between',
-      margin: '0 auto',
-      paddingTop: '0.5rem',
-      paddingBottom: '1.5rem',
-      paddingLeft: layout.contentMobilePaddingHorizontal,
-      paddingRight: layout.contentMobilePaddingHorizontal,
-      maxWidth: layout.contentWidth,
-      color: palette.common.white,
-      fontSize: '0.875rem',
-      lineHeight: '1em',
+export const getMaxWidthClass = ({ fullWidth, width }: PageContextProps) => {
+  if (fullWidth || width === 'full') {
+    return 'max-w-full'
+  }
 
-      [screens('xs', 'sm', 'md')]: {
-        flexDirection: 'column',
-      },
+  if (width === 'wide') {
+    return 'max-w-[--content-width-wide]'
+  }
 
-      [screens('md', 'lg', 'xl')]: {
-        paddingLeft: layout.contentPaddingHorizontal,
-        paddingRight: layout.contentPaddingHorizontal,
-      },
-    },
-    centered: {},
-    wide: {
-      maxWidth: layout.contentWidthWide,
-    },
-    fullWidth: {
-      maxWidth: '100%',
-    },
-    left: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: '1rem',
-    },
-    right: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: '1rem',
-
-      [screens('xs', 'sm', 'md')]: {
-        order: -1,
-      },
-
-      [screens('xs', 'sm')]: {
-        flexDirection: 'column',
-      },
-    },
-  })
+  return 'max-w-[--content-width]'
+}