@toptal/picasso-page 2.2.0 → 3.0.0

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

@@ -6,7 +6,7 @@ exports[`SidebarMenu renders 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="MuiList-root PicassoMenu-root PicassoSidebarMenu-root"
+      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
       role="menu"
       tabindex="-1"
     />
@@ -20,7 +20,7 @@ exports[`SidebarMenu with bottom 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="MuiList-root PicassoMenu-root PicassoSidebarMenu-root PicassoSidebarMenu-bottom"
+      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 [&_&]:flex-1 flex-grow flex-shrink max-w order-[99]"
       role="menu"
       tabindex="-1"
     />

package/src/TopBarItem/TopBarItem.tsx

@@ -6,13 +6,10 @@ import type {
 import type { ElementType, ReactElement } from 'react'
 import React, { forwardRef, memo } from 'react'
 import type { MenuItemProps } from '@material-ui/core/MenuItem'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 import { noop } from '@toptal/picasso-utils'
 
 import { SidebarItem } from '../SidebarItem'
-import styles from './styles'
 
 export interface Props extends BaseProps, TextLabelProps {
   /** Pass icon to be used as part of item */
@@ -27,20 +24,38 @@ export interface Props extends BaseProps, TextLabelProps {
   onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTopBarMenuItem' })
+const rootClasses = [
+  'min-[1280px]:text-gray-600 min-[1280px]:p-0 min-[1280px]:h-auto',
+  'min-[1280px]:w-auto min-[1280px]:m-0 min-[1280px]:flex-auto',
+  'min-[1280px]:[&_p]:text-sm',
+]
+const separatorClasses = [
+  'min-[1280px]:before:[&:not(:first-child)]:content-[""]',
+  'min-[1280px]:before:bg-gray-600 min-[1280px]:before:inline-block',
+  'min-[1280px]:before:h-2 min-[1280px]:before:mx-2 min-[1280px]:before:w-[1px]',
+]
+const bgClasses =
+  'min-[1280px]:hover:bg-transparent min-[1280px]:focus:bg-transparent'
+const textColorClasses =
+  'min-[1280px]:hover:text-gray-400 min-[1280px]:hover:text-white'
 
 export const TopBarItem: OverridableComponent<Props> = memo(
   forwardRef<HTMLElement, Props>(function TopBarItem(props, ref) {
     const { className, icon } = props
-    const classes = useStyles()
 
     return (
       <SidebarItem
         {...props}
-        className={cx(classes.root, className, {
-          [classes.selected]: props.selected,
-          [classes.icon]: icon,
-        })}
+        className={twMerge(
+          rootClasses,
+          separatorClasses,
+          bgClasses,
+          textColorClasses,
+          icon && 'min-[1280px]:[&_svg]:w-[1em]',
+          props.selected &&
+            'min-[1280px]:bg-transparent min-[1280px]:text-white',
+          className
+        )}
         ref={ref}
       />
     )

package/src/TopBarMenu/TopBarMenu.tsx

@@ -1,24 +1,18 @@
 import type { BaseProps } from '@toptal/picasso-shared'
 import type { HTMLAttributes, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import { Menu } from '@toptal/picasso-menu'
 
 import { useRegisterMenu } from '../PageHamburger'
-import styles from './styles'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLUListElement> {
   /** Menu content */
   children: ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTopBarMenu' })
-
 export const TopBarMenu = forwardRef<HTMLUListElement, Props>(
   function TopBarMenu(props, ref) {
     const { children, ...rest } = props
-    const classes = useStyles()
 
     // not more than 6 menu items are allowed by BASE design
     const items = React.Children.toArray(children).slice(0, 6)
@@ -30,7 +24,7 @@ export const TopBarMenu = forwardRef<HTMLUListElement, Props>(
         {...rest}
         allowNestedNavigation={false}
         ref={ref}
-        className={classes.root}
+        className='block min-[1280px]:flex shadow-0'
       >
         {items}
       </Menu>

package/dist-package/src/SidebarMenu/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root" | "bottom" | "compactParent">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/SidebarMenu/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/SidebarMenu/styles.ts"],"names":[],"mappings":";AAEA,wBAkBI"}

package/dist-package/src/SidebarMenu/styles.js

@@ -1,20 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    root: {
-        flex: 0,
-        boxShadow: 'none',
-        order: 1,
-        '& &': {
-            flex: 1,
-        },
-        // to cover text overflow in the sub-menu items
-        maxWidth: '100%',
-    },
-    compactParent: {
-        padding: '0.5em',
-    },
-    bottom: {
-        order: 99,
-    },
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/SidebarMenu/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/SidebarMenu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,IAAI,EAAE,CAAC;QACP,SAAS,EAAE,MAAM;QACjB,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,IAAI,EAAE,CAAC;SACR;QACD,+CAA+C;QAC/C,QAAQ,EAAE,MAAM;KACjB;IACD,aAAa,EAAE;QACb,OAAO,EAAE,OAAO;KACjB;IACD,MAAM,EAAE;QACN,KAAK,EAAE,EAAE;KACV;CACF,CAAC,CAAA"}

package/dist-package/src/TopBarItem/styles.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ spacing, palette, typography }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "icon" | "selected">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/TopBarItem/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TopBarItem/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;2DAKH,KAAK;AAAvD,wBA2CC"}

package/dist-package/src/TopBarItem/styles.js

@@ -1,46 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { headerBreakingPointXL } from '../PageTopBar/constants';
-export default ({ spacing, palette, typography }) => {
-    const itemSpacing = spacing(1);
-    return createStyles({
-        root: {
-            [headerBreakingPointXL]: {
-                color: palette.grey.main2,
-                padding: 0,
-                height: 'auto',
-                width: 'auto',
-                margin: 0,
-                flex: '1 1 auto',
-                '& + &:before': {
-                    backgroundColor: palette.grey.main2,
-                    content: '""',
-                    display: 'inline-block',
-                    height: itemSpacing,
-                    marginLeft: itemSpacing,
-                    marginRight: itemSpacing,
-                    width: 1,
-                },
-                '&:hover': {
-                    backgroundColor: 'transparent',
-                    color: palette.grey.light2,
-                },
-                '&:focus, &$selected': {
-                    backgroundColor: 'transparent',
-                    color: palette.common.white,
-                },
-                '& p': {
-                    fontSize: typography.fontSizes.small,
-                },
-            },
-        },
-        icon: {
-            [headerBreakingPointXL]: {
-                '& svg': {
-                    width: '1em',
-                },
-            },
-        },
-        selected: {},
-    });
-};
-//# sourceMappingURL=styles.js.map

package/dist-package/src/TopBarItem/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TopBarItem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAS,EAAE,EAAE;IACzD,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;IAE9B,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,CAAC,qBAAqB,CAAC,EAAE;gBACvB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;gBACzB,OAAO,EAAE,CAAC;gBACV,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,CAAC;gBACT,IAAI,EAAE,UAAU;gBAChB,cAAc,EAAE;oBACd,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;oBACnC,OAAO,EAAE,IAAI;oBACb,OAAO,EAAE,cAAc;oBACvB,MAAM,EAAE,WAAW;oBACnB,UAAU,EAAE,WAAW;oBACvB,WAAW,EAAE,WAAW;oBACxB,KAAK,EAAE,CAAC;iBACT;gBACD,SAAS,EAAE;oBACT,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;iBAC3B;gBACD,qBAAqB,EAAE;oBACrB,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;iBAC5B;gBACD,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK;iBACrC;aACF;SACF;QACD,IAAI,EAAE;YACJ,CAAC,qBAAqB,CAAC,EAAE;gBACvB,OAAO,EAAE;oBACP,KAAK,EAAE,KAAK;iBACb;aACF;SACF;QACD,QAAQ,EAAE,EAAE;KACb,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/dist-package/src/TopBarMenu/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/TopBarMenu/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TopBarMenu/styles.ts"],"names":[],"mappings":";AAIA,wBAQI"}

package/dist-package/src/TopBarMenu/styles.js

@@ -1,11 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { headerBreakingPointXL } from '../PageTopBar/constants';
-export default () => createStyles({
-    root: {
-        display: 'block',
-        [headerBreakingPointXL]: {
-            display: 'flex',
-        },
-    },
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/TopBarMenu/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TopBarMenu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;QAChB,CAAC,qBAAqB,CAAC,EAAE;YACvB,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC,CAAA"}

package/src/SidebarMenu/styles.ts

@@ -1,21 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    root: {
-      flex: 0,
-      boxShadow: 'none',
-      order: 1,
-      '& &': {
-        flex: 1,
-      },
-      // to cover text overflow in the sub-menu items
-      maxWidth: '100%',
-    },
-    compactParent: {
-      padding: '0.5em',
-    },
-    bottom: {
-      order: 99,
-    },
-  })

package/src/TopBarItem/styles.ts

@@ -1,49 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-import { headerBreakingPointXL } from '../PageTopBar/constants'
-
-export default ({ spacing, palette, typography }: Theme) => {
-  const itemSpacing = spacing(1)
-
-  return createStyles({
-    root: {
-      [headerBreakingPointXL]: {
-        color: palette.grey.main2,
-        padding: 0,
-        height: 'auto',
-        width: 'auto',
-        margin: 0,
-        flex: '1 1 auto',
-        '& + &:before': {
-          backgroundColor: palette.grey.main2,
-          content: '""',
-          display: 'inline-block',
-          height: itemSpacing,
-          marginLeft: itemSpacing,
-          marginRight: itemSpacing,
-          width: 1,
-        },
-        '&:hover': {
-          backgroundColor: 'transparent',
-          color: palette.grey.light2,
-        },
-        '&:focus, &$selected': {
-          backgroundColor: 'transparent',
-          color: palette.common.white,
-        },
-        '& p': {
-          fontSize: typography.fontSizes.small,
-        },
-      },
-    },
-    icon: {
-      [headerBreakingPointXL]: {
-        '& svg': {
-          width: '1em',
-        },
-      },
-    },
-    selected: {},
-  })
-}

package/src/TopBarMenu/styles.ts

@@ -1,13 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-import { headerBreakingPointXL } from '../PageTopBar/constants'
-
-export default () =>
-  createStyles({
-    root: {
-      display: 'block',
-      [headerBreakingPointXL]: {
-        display: 'flex',
-      },
-    },
-  })