@toptal/picasso-page 2.1.1 → 2.2.0

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

@@ -19,6 +19,7 @@ declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttribu
     } & BaseProps) => JSX.Element;
     Main: (props: {
         children?: ReactNode;
+        enableMinHeight?: boolean | undefined;
     } & BaseProps) => JSX.Element;
     Actions: ({ children, className, ...rest }: {
         children: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"PageHead.d.ts","sourceRoot":"","sources":["../../../src/PageHead/PageHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAuED,eAAO,MAAM,QAAQ,8EAkBnB,CAAA;;;;;;;;;;;;;;;AASF,wBAKE"}
+{"version":3,"file":"PageHead.d.ts","sourceRoot":"","sources":["../../../src/PageHead/PageHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA+ED,eAAO,MAAM,QAAQ,8EAkBnB,CAAA;;;;;;;;;;;;;;;;AASF,wBAKE"}

package/dist-package/src/PageHead/PageHead.js

@@ -30,9 +30,12 @@ const Tabs = (_a) => {
     return (React.createElement(Container, Object.assign({ className: className }, rest), children));
 };
 const Main = (props) => {
-    const { className, children } = props, rest = __rest(props, ["className", "children"]);
+    const { className, children, enableMinHeight } = props, rest = __rest(props, ["className", "children", "enableMinHeight"]);
     const classes = useMainStyles(props);
-    return (React.createElement(Container, Object.assign({ flex: true, justifyContent: 'space-between', alignItems: 'center', className: cx(classes.main, className) }, rest), children));
+    return (React.createElement(Container, Object.assign({ flex: true, justifyContent: 'space-between', alignItems: 'center', className: cx({
+            [classes.main]: !enableMinHeight,
+            [classes.mainEnableMinHeight]: enableMinHeight,
+        }, className) }, rest), children));
 };
 const Actions = (_a) => {
     var { children, className } = _a, rest = __rest(_a, ["children", "className"]);

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

@@ -1 +1 @@
-{"version":3,"file":"PageHead.js","sourceRoot":"","sources":["../../../src/PageHead/PageHead.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,OAAO,MAAM,MAAM,UAAU,CAAA;AAW7B,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,EAAE;IACnC,IAAI,EAAE,iBAAiB;CACxB,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,UAAU,CAAC,MAAM,EAAE;IACvC,IAAI,EAAE,qBAAqB;CAC5B,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,CAAC,EAKwC,EAAE,EAAE;QAL5C,EACb,SAAS,EACT,QAAQ,EACR,SAAS,OAE4C,EADlD,IAAI,cAJM,sCAKd,CADQ;IAEP,OAAO,CACL,oBAAC,UAAU,kBACT,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,IAChB,IAAI,GAEP,QAAQ,CACE,CACd,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,CAAC,EAIwB,EAAE,EAAE;QAJ5B,EACZ,QAAQ,EACR,SAAS,OAE2B,EADjC,IAAI,cAHK,yBAIb,CADQ;IAEP,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,SAAS,IAAM,IAAI,GACtC,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,CAAC,KAA2C,EAAE,EAAE;IAC3D,MAAM,EAAE,SAAS,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAxC,yBAAgC,CAAQ,CAAA;IAE9C,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,CAAA;IAEpC,OAAO,CACL,oBAAC,SAAS,kBACR,IAAI,QACJ,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,IAClC,IAAI,GAEP,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EAIqB,EAAE,EAAE;QAJzB,EACf,QAAQ,EACR,SAAS,OAE2B,EADjC,IAAI,cAHQ,yBAIhB,CADQ;IAEP,OAAO,CACL,oBAAC,SAAS,kBAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,IAAM,IAAI,GAC/D,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAwB,SAAS,QAAQ,CACzE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAC7D,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE;YACrC,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,QAAQ;YAC/B,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,YAAY;SACrC,CAAC,IAED,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,YAAY,GAAG;IACtB,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IACrC,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,OAAO;CACR,CAAC,CAAA"}
+{"version":3,"file":"PageHead.js","sourceRoot":"","sources":["../../../src/PageHead/PageHead.tsx"],"names":[],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageHead/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBAwBI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageHead/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBA6BI"}

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

@@ -22,5 +22,10 @@ export default ({ palette }) => createStyles({
     main: {
         height: '3.375em',
     },
+    mainEnableMinHeight: {
+        paddingTop: '0.75rem',
+        paddingBottom: '0.75rem',
+        minHeight: '3.375em',
+    },
 });
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageHead/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;KACrB;IACD,UAAU,EAAE;QACV,qCAAqC;QACrC,UAAU,EAAE;YACV,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ;YACtC,MAAM,EAAE,CAAC;SACV;KACF;IACD,YAAY,EAAE;QACZ,YAAY,EAAE,MAAM;KACrB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageHead/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;KACrB;IACD,UAAU,EAAE;QACV,qCAAqC;QACrC,UAAU,EAAE;YACV,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ;YACtC,MAAM,EAAE,CAAC;SACV;KACF;IACD,YAAY,EAAE;QACZ,YAAY,EAAE,MAAM;KACrB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;KAClB;IACD,mBAAmB,EAAE;QACnB,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,SAAS,EAAE,SAAS;KACrB;CACF,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Toptal UI components library - Page",
   "publishConfig": {
     "access": "public"

package/src/PageHead/PageHead.tsx

@@ -56,8 +56,10 @@ const Tabs = ({
   )
 }
 
-const Main = (props: { children?: ReactNode } & BaseProps) => {
-  const { className, children, ...rest } = props
+const Main = (
+  props: { children?: ReactNode; enableMinHeight?: boolean } & BaseProps
+) => {
+  const { className, children, enableMinHeight, ...rest } = props
 
   const classes = useMainStyles(props)
 
@@ -66,7 +68,13 @@ const Main = (props: { children?: ReactNode } & BaseProps) => {
       flex
       justifyContent='space-between'
       alignItems='center'
-      className={cx(classes.main, className)}
+      className={cx(
+        {
+          [classes.main]: !enableMinHeight,
+          [classes.mainEnableMinHeight]: enableMinHeight,
+        },
+        className
+      )}
       {...rest}
     >
       {children}

package/src/PageHead/story/WithEnabledMinHeight.example.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { PageHead } from '@toptal/picasso'
+
+const WithEnabledMinHeight = () => (
+  <PageHead>
+    <PageHead.Main enableMinHeight>
+      <PageHead.Title>
+        This is a very long title that extends over multiple lines to
+        demonstrate how 'enableMinHeight' prop is working. It provides a clear
+        example of how long text will be handled, and we have here some lorem
+        ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio vitae
+        justo ultricies lacinia. Nullam sit amet nunc nec libero ultricies
+        lacinia. Nullam sit amet nunc nec libero.
+      </PageHead.Title>
+    </PageHead.Main>
+  </PageHead>
+)
+
+export default WithEnabledMinHeight

package/src/PageHead/story/index.jsx

@@ -45,3 +45,8 @@ page
     'With right padding of the container',
     'base/Page'
   )
+  .addExample(
+    'PageHead/story/WithEnabledMinHeight.example.tsx',
+    'With enabled min height for the container',
+    'base/Page'
+  )

package/src/PageHead/styles.ts

@@ -25,4 +25,9 @@ export default ({ palette }: Theme) =>
     main: {
       height: '3.375em',
     },
+    mainEnableMinHeight: {
+      paddingTop: '0.75rem',
+      paddingBottom: '0.75rem',
+      minHeight: '3.375em',
+    },
   })