@toptal/picasso-page 102.0.0 → 102.1.0

package/dist-package/src/PageHamburger/PageHamburger.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
-interface Props {
+import type { BaseProps } from '@toptal/picasso-shared';
+interface Props extends BaseProps {
     id: string;
-    'data-testid'?: string;
+    /** Color variant of the top bar the hamburger is rendered on */
+    variant?: 'dark' | 'light';
 }
-declare const PageHamburger: ({ id, "data-testid": dataTestId, }: Props) => React.ReactElement;
+declare const PageHamburger: ({ id, variant, className, style, "data-testid": dataTestId, }: Props) => React.ReactElement;
 export default PageHamburger;
 //# sourceMappingURL=PageHamburger.d.ts.map

package/dist-package/src/PageHamburger/PageHamburger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHamburger.d.ts","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAA;IACV,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,QAAA,MAAM,aAAa,uCAGhB,KAAK,KAAG,KAAK,CAAC,YA8ChB,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"PageHamburger.d.ts","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,UAAU,KAAM,SAAQ,SAAS;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B;AAED,QAAA,MAAM,aAAa,kEAMhB,KAAK,KAAG,KAAK,CAAC,YAgDhB,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist-package/src/PageHamburger/PageHamburger.js

@@ -3,12 +3,12 @@ import { ButtonCircular } from '@toptal/picasso-button';
 import { Dropdown } from '@toptal/picasso-dropdown';
 import { Close24, Overview24 } from '@toptal/picasso-icons';
 import { useHamburgerContext } from './PageHamburgerContext';
-const PageHamburger = ({ id, 'data-testid': dataTestId, }) => {
+const PageHamburger = ({ id, variant = 'dark', className, style, 'data-testid': dataTestId, }) => {
     const { hamburgerRef } = useHamburgerContext();
     const [showContent, setShowContent] = useState(false);
     const handleShowContent = () => setShowContent(true);
     const handleHideContent = () => setShowContent(false);
-    return (React.createElement(Dropdown, { content: React.createElement("div", { id: id, ref: hamburgerRef }), classes: {
+    return (React.createElement(Dropdown, { className: className, style: style, content: React.createElement("div", { id: id, ref: hamburgerRef }), classes: {
             content: `!shadow-[inset_-1px_0px_0px_0px] !shadow-gray-200 max-h-[calc(100vh-var(--header-height,3.5rem))] !bg-gray-100`,
             popper: '[&]:mt-4',
         }, 
@@ -25,7 +25,7 @@ const PageHamburger = ({ id, 'data-testid': dataTestId, }) => {
         }, popperProps: {
             role: 'navigation',
         }, onOpen: handleShowContent, onClose: handleHideContent, keepMounted: true },
-        React.createElement(ButtonCircular, { icon: showContent ? (React.createElement(Close24, null)) : (React.createElement(Overview24, { className: 'pointer-events-none' })), "data-testid": dataTestId, variant: 'transparent' })));
+        React.createElement(ButtonCircular, { icon: showContent ? (React.createElement(Close24, null)) : (React.createElement(Overview24, { className: 'pointer-events-none' })), "data-testid": dataTestId, variant: variant === 'light' ? 'flat' : 'transparent' })));
 };
 export default PageHamburger;
 //# sourceMappingURL=PageHamburger.js.map

package/dist-package/src/PageHamburger/PageHamburger.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHamburger.js","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAO5D,MAAM,aAAa,GAAG,CAAC,EACrB,EAAE,EACF,aAAa,EAAE,UAAU,GACnB,EAAsB,EAAE;IAC9B,MAAM,EAAE,YAAY,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC9C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAE9D,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IACpD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;IAErD,OAAO,CACL,oBAAC,QAAQ,IACP,OAAO,EAAE,6BAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,GAAI,EAC3C,OAAO,EAAE;YACP,OAAO,EAAE,gHAAgH;YACzH,MAAM,EAAE,UAAU;SACnB;QACD,oFAAoF;QACpF,uFAAuF;QACvF,gEAAgE;QAChE,aAAa,QACb,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBACxB,eAAe,EAAE;oBACf,OAAO,EAAE,CAAC;iBACX;aACF;SACF,EACD,WAAW,EAAE;YACX,IAAI,EAAE,YAAY;SACnB,EACD,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,iBAAiB,EAC1B,WAAW;QAEX,oBAAC,cAAc,IACb,IAAI,EACF,WAAW,CAAC,CAAC,CAAC,CACZ,oBAAC,OAAO,OAAG,CACZ,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,SAAS,EAAC,qBAAqB,GAAG,CAC/C,iBAEU,UAAU,EACvB,OAAO,EAAC,aAAa,GACrB,CACO,CACZ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"PageHamburger.js","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAQ5D,MAAM,aAAa,GAAG,CAAC,EACrB,EAAE,EACF,OAAO,GAAG,MAAM,EAChB,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,GACnB,EAAsB,EAAE;IAC9B,MAAM,EAAE,YAAY,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC9C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAE9D,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IACpD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;IAErD,OAAO,CACL,oBAAC,QAAQ,IACP,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,6BAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,GAAI,EAC3C,OAAO,EAAE;YACP,OAAO,EAAE,gHAAgH;YACzH,MAAM,EAAE,UAAU;SACnB;QACD,oFAAoF;QACpF,uFAAuF;QACvF,gEAAgE;QAChE,aAAa,QACb,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBACxB,eAAe,EAAE;oBACf,OAAO,EAAE,CAAC;iBACX;aACF;SACF,EACD,WAAW,EAAE;YACX,IAAI,EAAE,YAAY;SACnB,EACD,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,iBAAiB,EAC1B,WAAW;QAEX,oBAAC,cAAc,IACb,IAAI,EACF,WAAW,CAAC,CAAC,CAAC,CACZ,oBAAC,OAAO,OAAG,CACZ,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,SAAS,EAAC,qBAAqB,GAAG,CAC/C,iBAEU,UAAU,EACvB,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,GACrD,CACO,CACZ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist-package/src/PageTopBar/PageTopBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTopBar.d.ts","sourceRoot":"","sources":["../../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,KAA4C,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAqBvD,KAAK,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AAEtD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,WAAW,CAAC;IACnE,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,kDAAkD;IAClD,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,oBAAoB;IACpB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,uBAAuB;IACvB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAED,eAAO,MAAM,iBAAiB;aAAkC,WAAW;EAEzE,CAAA;AAEF,eAAO,MAAM,UAAU,2EA0IrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"PageTopBar.d.ts","sourceRoot":"","sources":["../../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,KAA4C,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAqBvD,KAAK,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AAEtD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,WAAW,CAAC;IACnE,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,kDAAkD;IAClD,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,oBAAoB;IACpB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,uBAAuB;IACvB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAED,eAAO,MAAM,iBAAiB;aAAkC,WAAW;EAEzE,CAAA;AAEF,eAAO,MAAM,UAAU,2EA2IrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist-package/src/PageTopBar/PageTopBar.js

@@ -59,7 +59,7 @@ export const PageTopBar = forwardRef(function PageTopBar(_a, ref) {
                 React.createElement("div", { className: innerClassName },
                     React.createElement("div", { className: 'flex items-center gap-4' },
                         React.createElement("div", { className: 'flex items-center gap-4' },
-                            showHamburger && (React.createElement(PageHamburger, { id: hamburgerId, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.hamburger })),
+                            showHamburger && (React.createElement(PageHamburger, { id: hamburgerId, variant: isDark ? 'dark' : 'light', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.hamburger })),
                             logoLink
                                 ? React.cloneElement(logoLink, {}, logoComponent)
                                 : logoComponent,

package/dist-package/src/PageTopBar/PageTopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTopBar.js","sourceRoot":"","sources":["../../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageTopBar.js","sourceRoot":"","sources":["../../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "102.0.0",
+  "version": "102.1.0",
   "description": "Toptal UI components library - Page",
   "publishConfig": {
     "access": "public"
@@ -19,22 +19,22 @@
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
     "@toptal/picasso-accordion": "102.0.0",
-    "@toptal/picasso-autocomplete": "102.0.0",
     "@toptal/picasso-avatar": "102.0.0",
+    "@toptal/picasso-autocomplete": "102.0.0",
     "@toptal/picasso-badge": "102.0.0",
     "@toptal/picasso-button": "102.0.0",
-    "@toptal/picasso-container": "102.0.0",
     "@toptal/picasso-dropdown": "102.0.0",
+    "@toptal/picasso-menu": "102.0.0",
     "@toptal/picasso-icons": "102.0.0",
     "@toptal/picasso-logo": "102.0.0",
-    "@toptal/picasso-menu": "102.0.0",
     "@toptal/picasso-notification": "102.0.0",
+    "@toptal/picasso-container": "102.0.0",
     "@toptal/picasso-shared": "102.0.0",
-    "@toptal/picasso-tag": "102.0.0",
     "@toptal/picasso-tooltip": "102.0.0",
+    "@toptal/picasso-tag": "102.0.0",
     "@toptal/picasso-typography": "102.0.0",
-    "@toptal/picasso-user-badge": "102.0.0",
-    "@toptal/picasso-utils": "102.0.0"
+    "@toptal/picasso-utils": "102.0.0",
+    "@toptal/picasso-user-badge": "102.0.0"
   },
   "sideEffects": [
     "**/styles.ts",
@@ -44,16 +44,16 @@
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "@toptal/picasso-tailwind-merge": "^102.0.0",
-    "@toptal/picasso-provider": "^102.0.0",
     "@toptal/picasso-tailwind": "^102.0.0",
+    "@toptal/picasso-provider": "^102.0.0",
     "@toptal/picasso-skeleton-loader": "^102.0.0"
   },
   "devDependencies": {
     "react-dom": "^18.3.1",
     "styled-components": "^6.1.1",
+    "@toptal/picasso-test-utils": "102.0.0",
     "@toptal/picasso-tailwind-merge": "102.0.0",
-    "@toptal/picasso-provider": "102.0.0",
-    "@toptal/picasso-test-utils": "102.0.0"
+    "@toptal/picasso-provider": "102.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"

package/src/PageHamburger/PageHamburger.tsx

@@ -2,16 +2,21 @@ import React, { useState } from 'react'
 import { ButtonCircular } from '@toptal/picasso-button'
 import { Dropdown } from '@toptal/picasso-dropdown'
 import { Close24, Overview24 } from '@toptal/picasso-icons'
+import type { BaseProps } from '@toptal/picasso-shared'
 
 import { useHamburgerContext } from './PageHamburgerContext'
 
-interface Props {
+interface Props extends BaseProps {
   id: string
-  'data-testid'?: string
+  /** Color variant of the top bar the hamburger is rendered on */
+  variant?: 'dark' | 'light'
 }
 
 const PageHamburger = ({
   id,
+  variant = 'dark',
+  className,
+  style,
   'data-testid': dataTestId,
 }: Props): React.ReactElement => {
   const { hamburgerRef } = useHamburgerContext()
@@ -22,6 +27,8 @@ const PageHamburger = ({
 
   return (
     <Dropdown
+      className={className}
+      style={style}
       content={<div id={id} ref={hamburgerRef} />}
       classes={{
         content: `!shadow-[inset_-1px_0px_0px_0px] !shadow-gray-200 max-h-[calc(100vh-var(--header-height,3.5rem))] !bg-gray-100`,
@@ -55,7 +62,7 @@ const PageHamburger = ({
           )
         }
         data-testid={dataTestId}
-        variant='transparent'
+        variant={variant === 'light' ? 'flat' : 'transparent'}
       />
     </Dropdown>
   )

package/src/PageTopBar/PageTopBar.tsx

@@ -156,6 +156,7 @@ export const PageTopBar = forwardRef<HTMLElement, Props>(function PageTopBar(
                 {showHamburger && (
                   <PageHamburger
                     id={hamburgerId}
+                    variant={isDark ? 'dark' : 'light'}
                     data-testid={testIds?.hamburger}
                   />
                 )}

package/src/PageTopBar/test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@toptal/picasso-test-utils'
+import { render, screen } from '@toptal/picasso-test-utils'
 import { Link } from '@toptal/picasso-link'
 
 import { PageTopBar } from './PageTopBar'
@@ -47,4 +47,35 @@ describe('PageTopBar', () => {
 
     expect(container).toMatchSnapshot()
   })
+
+  describe('when the hamburger is shown', () => {
+    const renderHamburger = (variant: 'dark' | 'light') => {
+      setScreenWidth(1200)
+
+      render(
+        <PageTopBar
+          variant={variant}
+          centerContent={<div>Menu</div>}
+          testIds={{ hamburger: 'hamburger' }}
+        />
+      )
+
+      return screen.getByTestId('hamburger')
+    }
+
+    describe('when the variant is dark', () => {
+      it('renders a light hamburger button', () => {
+        expect(renderHamburger('dark')).toHaveClass('text-white')
+      })
+    })
+
+    describe('when the variant is light', () => {
+      it('renders a dark hamburger button', () => {
+        const hamburger = renderHamburger('light')
+
+        expect(hamburger).toHaveClass('text-graphite-700')
+        expect(hamburger).not.toHaveClass('text-white')
+      })
+    })
+  })
 })