@toptal/picasso-page 5.1.21 → 5.2.0
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.
- package/dist-package/src/PageTopBar/PageTopBar.d.ts +1 -1
- package/dist-package/src/PageTopBar/PageTopBar.d.ts.map +1 -1
- package/dist-package/src/PageTopBar/PageTopBar.js +1 -1
- package/dist-package/src/PageTopBar/PageTopBar.js.map +1 -1
- package/dist-package/src/PageTopBar/styles.d.ts +1 -1
- package/dist-package/src/PageTopBar/styles.d.ts.map +1 -1
- package/dist-package/src/PageTopBar/styles.js +3 -0
- package/dist-package/src/PageTopBar/styles.js.map +1 -1
- package/package.json +1 -1
- package/src/PageTopBar/PageTopBar.tsx +2 -2
- package/src/PageTopBar/story/Variants.example.tsx +24 -0
- package/src/PageTopBar/styles.ts +3 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ReactNode, ReactElement, HTMLAttributes } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import type { BaseProps } from '@toptal/picasso-shared';
|
|
4
|
-
declare type VariantType = 'dark' | 'light' | 'grey';
|
|
4
|
+
declare type VariantType = 'dark' | 'light' | 'grey' | 'black';
|
|
5
5
|
export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
|
|
6
6
|
/** Title which is displayed along the `Logo` */
|
|
7
7
|
title?: string;
|
|
@@ -1 +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;AAEhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAyBvD,aAAK,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;
|
|
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;AAEhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAyBvD,aAAK,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;AAMF,eAAO,MAAM,UAAU,2EA2IrB,CAAA;AAQF,eAAe,UAAU,CAAA"}
|
|
@@ -48,7 +48,7 @@ export const PageTopBar = forwardRef(function PageTopBar(props, ref) {
|
|
|
48
48
|
setHasPageHamburger(showHamburger);
|
|
49
49
|
return () => setHasPageHamburger(false);
|
|
50
50
|
}, [setHasPageHamburger, showHamburger]);
|
|
51
|
-
const isDark = ['dark', 'grey'].includes(variant);
|
|
51
|
+
const isDark = ['dark', 'grey', 'black'].includes(variant);
|
|
52
52
|
const logoVariant = isDark ? 'white' : 'default';
|
|
53
53
|
const logoDefault = (React.createElement(React.Fragment, null,
|
|
54
54
|
React.createElement(Logo, { variant: logoVariant, emblem: true, className: classes.logoEmblem }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageTopBar.js","sourceRoot":"","sources":["../../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EACL,aAAa,EACb,UAAU,EACV,oCAAoC,EACpC,aAAa,GACd,MAAM,0BAA0B,CAAA;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,kBAAkB,CAAA;AACzB,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,MAAM,kBAAkB,GAAG,IAAI,CAAA;AA2B/B,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAA2B;IAC7E,OAAO,EAAE,MAAM;CAChB,CAAC,CAAA;AAEF,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,eAAe;CACtB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAqB,SAAS,UAAU,CAC1E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,OAAO,GAAG,MAAM,EAChB,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,wIAaL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE,CAAA;IACxC,MAAM,EAAE,iCAAiC,EAAE,GACzC,oCAAoC,EAAE,CAAA;IAExC,yBAAyB,CAAC,GAAG,EAAE;QAC7B,YAAY,CAAC,IAAI,CAAC,CAAA;QAElB,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,KAAK,CAAC,CAAA;QACrB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAmB,WAAW,CAAC,CAAA;IAEtE,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAElE,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,aAAa,GAAG,UAAU,GAAG,kBAAkB,CAAA;IAErD,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,CAAA;IAEnC,MAAM,aAAa,GAAG,aAAa,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,aAAa,CAAC,CAAA;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,mBAAmB,CAAC,aAAa,CAAC,CAAA;QAElC,OAAO,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAA;IACzC,CAAC,EAAE,CAAC,mBAAmB,EAAE,aAAa,CAAC,CAAC,CAAA;IAExC,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"PageTopBar.js","sourceRoot":"","sources":["../../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EACL,aAAa,EACb,UAAU,EACV,oCAAoC,EACpC,aAAa,GACd,MAAM,0BAA0B,CAAA;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,kBAAkB,CAAA;AACzB,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,MAAM,kBAAkB,GAAG,IAAI,CAAA;AA2B/B,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAA2B;IAC7E,OAAO,EAAE,MAAM;CAChB,CAAC,CAAA;AAEF,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,eAAe;CACtB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAqB,SAAS,UAAU,CAC1E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,OAAO,GAAG,MAAM,EAChB,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,wIAaL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE,CAAA;IACxC,MAAM,EAAE,iCAAiC,EAAE,GACzC,oCAAoC,EAAE,CAAA;IAExC,yBAAyB,CAAC,GAAG,EAAE;QAC7B,YAAY,CAAC,IAAI,CAAC,CAAA;QAElB,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,KAAK,CAAC,CAAA;QACrB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAmB,WAAW,CAAC,CAAA;IAEtE,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAElE,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,aAAa,GAAG,UAAU,GAAG,kBAAkB,CAAA;IAErD,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,CAAA;IAEnC,MAAM,aAAa,GAAG,aAAa,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,aAAa,CAAC,CAAA;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,mBAAmB,CAAC,aAAa,CAAC,CAAA;QAElC,OAAO,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAA;IACzC,CAAC,EAAE,CAAC,mBAAmB,EAAE,aAAa,CAAC,CAAC,CAAA;IAExC,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC1D,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAA;IAChD,MAAM,WAAW,GAAG,CAClB;QACE,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,EAAE,MAAM,QAAC,SAAS,EAAE,OAAO,CAAC,UAAU,GAAI;QACpE,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CACtD,CACJ,CAAA;IAED,MAAM,aAAa,GAAG,IAAI,IAAI,WAAW,CAAA;IAEzC,MAAM,cAAc,GAAG,KAAK,IAAI,CAC9B,oBAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,UAAU,EAAC,QAAQ;QACtD,6BACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAClE;QACF,oBAAC,SAAS,IAAC,IAAI,EAAC,OAAO;YACrB,oBAAC,UAAU,IAAC,MAAM,EAAE,MAAM,IAAG,KAAK,CAAc,CACtC,CACF,CACb,CAAA;IAED,MAAM,cAAc,GAAG,EAAE,CACvB;QACE,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,SAAS,IAAI,KAAK,KAAK,MAAM;QAClD,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,KAAK,MAAM;KACjC,EACD,OAAO,CAAC,OAAO,CAChB,CAAA;IAED,OAAO,CACL,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE;QAC5C,6BAAK,SAAS,EAAE,OAAO,CAAC,OAAO;YAC7B,gDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,WAAW,EACX,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,OAAO,CAAC,EAChB,SAAS,EACT;oBACE,CAAC,OAAO,CAAC,iCAAiC,CAAC,EACzC,iCAAiC;iBACpC,CACF,EACD,KAAK,EAAE,KAAK;gBAEZ,6BAAK,SAAS,EAAE,cAAc;oBAE5B,6BAAK,SAAS,EAAE,OAAO,CAAC,IAAI;wBAC1B,oBAAC,SAAS,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO;4BAC5C,aAAa,IAAI,CAChB,oBAAC,aAAa,IACZ,EAAE,EAAE,WAAW,iBACF,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,GAC/B,CACH;4BACA,QAAQ;gCACP,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,EAAE,aAAa,CAAC;gCACjD,CAAC,CAAC,aAAa;4BAChB,cAAc,CACL;wBACX,WAAW,CACR;oBAGL,aAAa;wBACZ,CAAC,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,mBAAmB;4BAClB,6BAAK,SAAS,EAAE,OAAO,CAAC,mBAAmB,IACxC,aAAa,CACV,CACc,CACvB,CAAC,CAAC,CAAC,CACF,oBAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,aAAa,IACxC,aAAa,CACJ,CACb,CAAC;oBAGJ,6BAAK,SAAS,EAAE,OAAO,CAAC,KAAK;wBAC1B,WAAW;wBACX,YAAY,CACT,CACF,CACC,CACL,CACqB,CAC9B,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,UAAU,CAAC,YAAY,GAAG;IACxB,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { Theme } from '@material-ui/core/styles';
|
|
2
|
-
declare const _default: ({ palette, layout, zIndex, screens }: Theme) => import("@material-ui/styles").StyleRules<{}, "title" | "content" | "left" | "right" | "wide" | "root" | "grey" | "dark" | "light" | "fullWidth" | "preventPageWidthChangeOnScrollbar" | "wrapper" | "centerContent" | "centerContentPortal" | "divider" | "dividerBlue" | "logo" | "logoEmblem">;
|
|
2
|
+
declare const _default: ({ palette, layout, zIndex, screens }: Theme) => import("@material-ui/styles").StyleRules<{}, "title" | "content" | "left" | "right" | "wide" | "root" | "black" | "grey" | "dark" | "light" | "fullWidth" | "preventPageWidthChangeOnScrollbar" | "wrapper" | "centerContent" | "centerContentPortal" | "divider" | "dividerBlue" | "logo" | "logoEmblem">;
|
|
3
3
|
export default _default;
|
|
4
4
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageTopBar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;+DAKC,KAAK;AAA3D,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageTopBar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;+DAKC,KAAK;AAA3D,wBAuGI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageTopBar/styles.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageTopBar/styles.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -27,7 +27,7 @@ import styles from './styles'
|
|
|
27
27
|
|
|
28
28
|
const SMALL_SCREEN_WIDTH = 1280
|
|
29
29
|
|
|
30
|
-
type VariantType = 'dark' | 'light' | 'grey'
|
|
30
|
+
type VariantType = 'dark' | 'light' | 'grey' | 'black'
|
|
31
31
|
|
|
32
32
|
export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
|
|
33
33
|
/** Title which is displayed along the `Logo` */
|
|
@@ -109,7 +109,7 @@ export const PageTopBar = forwardRef<HTMLElement, Props>(function PageTopBar(
|
|
|
109
109
|
return () => setHasPageHamburger(false)
|
|
110
110
|
}, [setHasPageHamburger, showHamburger])
|
|
111
111
|
|
|
112
|
-
const isDark = ['dark', 'grey'].includes(variant)
|
|
112
|
+
const isDark = ['dark', 'grey', 'black'].includes(variant)
|
|
113
113
|
const logoVariant = isDark ? 'white' : 'default'
|
|
114
114
|
const logoDefault = (
|
|
115
115
|
<>
|
|
@@ -50,6 +50,30 @@ const Example = () => (
|
|
|
50
50
|
/>
|
|
51
51
|
</Container>
|
|
52
52
|
|
|
53
|
+
<Container style={{ position: 'relative', height: '6rem' }}>
|
|
54
|
+
<Page.TopBar
|
|
55
|
+
variant='black'
|
|
56
|
+
title='Black'
|
|
57
|
+
actionItems={
|
|
58
|
+
<Container right={SPACING_6}>
|
|
59
|
+
<Button.Circular variant='transparent' icon={<Bell16 />} />
|
|
60
|
+
</Container>
|
|
61
|
+
}
|
|
62
|
+
rightContent={
|
|
63
|
+
<Page.TopBarMenu
|
|
64
|
+
name='Jacqueline Roque'
|
|
65
|
+
meta='Developer'
|
|
66
|
+
avatar='./jacqueline-with-flowers-1954-square.jpg'
|
|
67
|
+
>
|
|
68
|
+
<Menu>
|
|
69
|
+
<Menu.Item>My Account</Menu.Item>
|
|
70
|
+
<Menu.Item>Log Out</Menu.Item>
|
|
71
|
+
</Menu>
|
|
72
|
+
</Page.TopBarMenu>
|
|
73
|
+
}
|
|
74
|
+
/>
|
|
75
|
+
</Container>
|
|
76
|
+
|
|
53
77
|
<Container style={{ position: 'relative', height: '6rem' }}>
|
|
54
78
|
<Page hamburgerId='hamburger-default-example'>
|
|
55
79
|
<Page.TopBar
|
package/src/PageTopBar/styles.ts
CHANGED