@contentful/f36-header - npm Package Compare versions

Comparing version 4.74.1 to 5.0.0-alpha.1

dist/esm/index.js

@@ -1,13 +0,13 @@
-import n, { forwardRef, isValidElement, Fragment } from 'react';
+import n, { forwardRef, Fragment, isValidElement } from 'react';
 import { cx, css } from 'emotion';
 import { Box, Flex } from '@contentful/f36-core';
-import { Subheading } from '@contentful/f36-typography';
 import { IconButton, Button } from '@contentful/f36-button';
 import { ArrowBackwardIcon } from '@contentful/f36-icons';
-import a from '@contentful/f36-tokens';
+import m from '@contentful/f36-tokens';
+import { DisplayText, Subheading } from '@contentful/f36-typography';
 
-var C=Object.defineProperty,X=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var S=(e,t,o)=>t in e?C(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,i=(e,t)=>{for(var o in t||(t={}))H.call(t,o)&&S(e,o,t[o]);if(x)for(var o of x(t))b.call(t,o)&&S(e,o,t[o]);return e},N=(e,t)=>X(e,M(t));var c=(e,t)=>{var o={};for(var r in e)H.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&x)for(var r of x(e))t.indexOf(r)<0&&b.call(e,r)&&(o[r]=e[r]);return o};function $(r,o){var m=r,{onClick:e}=m,t=c(m,["onClick"]);return n.createElement(IconButton,N(i({},t),{"aria-label":"Go back",icon:n.createElement(ArrowBackwardIcon,{variant:"muted"}),onClick:e,size:"small",ref:o,variant:"transparent"}))}var _=forwardRef($);var G=()=>({root:css({alignItems:"center",display:"flex"}),separator:css({height:a.spacingXl,position:"relative",width:a.spacingXs,"&::after":{backgroundColor:a.gray200,content:'""',display:"block",height:"16px",position:"absolute",left:"50%",top:"50%",width:"1px",transform:"translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 18deg)"}})});var J="div";function K(l,s){var y=l,{children:e,className:t,segments:o,separator:r,testId:m="cf-ui-segmentation"}=y,f=c(y,["children","className","segments","separator","testId"]);let E=G(),P=r!=null?r:n.createElement("div",{className:E.separator}),T=(u,p)=>n.createElement(Fragment,{key:p},p>0&&P,u);return n.createElement(Box,i({as:J,className:cx(E.root,t),ref:s,testId:m},f),e?n.Children.toArray(e).map(T):o.map(T))}var h=forwardRef(K);var R=()=>({button:css({color:a.gray500,fontSize:a.fontSizeL,fontWeight:a.fontWeightNormal,maxWidth:"none",paddingLeft:a.spacingXs,paddingRight:a.spacingXs})});var L=o=>{var r=o,{breadcrumbs:e}=r,t=c(r,["breadcrumbs"]);let m=R(),f=e.map(s=>{let l=s.onClick;return n.createElement(Button,{as:"a",className:m.button,href:s.url,key:s.url,size:"small",variant:"transparent",onClick:l},s.content)});return n.createElement(h,i({segments:f},t))};var w=56;var F=()=>({actions:css({flexGrow:0,flexShrink:1,flexBasis:"25%",textAlign:"right"}),context:css({flexGrow:0,flexShrink:1,flexBasis:"25%"}),filters:css({display:"flex",flexGrow:1,flexShrink:1,flexBasis:"50%"}),root:e=>css({background:a.gray100,height:`${56}px`,padding:e?`${a.spacingXs} ${a.spacingS}`:a.spacingS}),separator:css({backgroundColor:a.gray200,height:"16px",margin:`0 ${a.spacingS} 0 ${a.spacingXs}`,transform:"rotate3d(0, 0, 1, 18deg)",width:"1px"}),title:css({margin:`${a.spacing2Xs} 0`,"&:not(:first-child)":{marginLeft:a.spacingXs}}),noWrap:css({textWrap:"nowrap","&:not(:first-child)":{marginLeft:a.spacingXs}})});var re="header";function ne(T,P){var u=T,{actions:e,as:t,backButtonProps:o,breadcrumbs:r,className:m,filters:f,metadata:s,title:l,withBackButton:y}=u,E=c(u,["actions","as","backButtonProps","breadcrumbs","className","filters","metadata","title","withBackButton"]);let p=F();return n.createElement(Flex,i({alignItems:"center",as:re,gap:"spacingM",className:cx(p.root(!!f),m),ref:P},E),n.createElement("div",{className:p.context},n.createElement(Flex,{alignItems:"center",gap:"spacingXs"},n.createElement(h,null,y&&n.createElement(_,i({},o)),r&&n.createElement(L,{breadcrumbs:r}),l&&n.createElement("div",{className:p.noWrap},isValidElement(l)?l:n.createElement(Subheading,{as:"h1",className:p.title},l))),s&&n.createElement(Flex,{alignItems:"center",gap:"spacing2Xs"},s))),n.createElement("div",{className:p.filters},f),n.createElement("div",{className:p.actions},e))}var ae=forwardRef(ne);
+var $=Object.defineProperty,z=Object.defineProperties;var V=Object.getOwnPropertyDescriptors;var B=Object.getOwnPropertySymbols;var S=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var A=(e,t,r)=>t in e?$(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,s=(e,t)=>{for(var r in t||(t={}))S.call(t,r)&&A(e,r,t[r]);if(B)for(var r of B(t))N.call(t,r)&&A(e,r,t[r]);return e},I=(e,t)=>z(e,V(t));var i=(e,t)=>{var r={};for(var o in e)S.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&B)for(var o of B(e))t.indexOf(o)<0&&N.call(e,o)&&(r[o]=e[o]);return r};function K(o,r){var p=o,{onClick:e}=p,t=i(p,["onClick"]);return n.createElement(IconButton,I(s({},t),{"aria-label":"Go back",icon:n.createElement(ArrowBackwardIcon,{variant:"muted"}),onClick:e,size:"small",ref:r,variant:"transparent"}))}var G=forwardRef(K);var F=()=>({root:css({alignItems:"center",display:"flex"}),separator:css({height:m.spacingXl,position:"relative",width:m.spacingXs,"&::after":{backgroundColor:m.gray200,content:'""',display:"block",height:"16px",position:"absolute",left:"50%",top:"50%",width:"1px",transform:"translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 18deg)"}})});var te="div";function re(c,a){var u=c,{children:e,className:t,segments:r,separator:o,testId:p="cf-ui-segmentation"}=u,l=i(u,["children","className","segments","separator","testId"]);let d=F(),b=o!=null?o:n.createElement("div",{className:d.separator}),E=(v,f)=>n.createElement(Fragment,{key:f},f>0&&b,v);return n.createElement(Box,s({as:te,className:cx(d.root,t),ref:a,testId:p},l),e?n.Children.toArray(e).map(E):r.map(E))}var w=forwardRef(re);var L=()=>({button:css({color:m.gray500,fontSize:m.fontSizeL,fontWeight:m.fontWeightNormal,maxWidth:"none",paddingLeft:m.spacingXs,paddingRight:m.spacingXs})});var C=r=>{var o=r,{breadcrumbs:e}=o,t=i(o,["breadcrumbs"]);let p=L(),l=e.map(a=>{let c=a.onClick;return n.createElement(Button,{as:"a",className:p.button,href:a.url,key:a.url,size:"small",variant:"transparent",onClick:c},a.content)});return n.createElement(w,s({segments:l},t))};var X=56;var M=({hasFilters:e,variant:t})=>({actions:css({flexGrow:0,flexShrink:1,flexBasis:"25%",textAlign:"right"}),context:css({flexGrow:0,flexShrink:1,flexBasis:"25%"}),filters:css({display:"flex",flexGrow:1,flexShrink:1,flexBasis:"50%"}),root:css({borderBottom:t==="breadcrumb"?`1px solid ${m.gray200}`:"none",background:m.colorWhite,height:`${56}px`,marginTop:t==="title"?m.spacingS:0,padding:e?`${m.spacingXs} 0`:`${m.spacingS} 0`}),separator:css({backgroundColor:m.gray200,height:"16px",margin:`0 ${m.spacingS} 0 ${m.spacingXs}`,transform:"rotate3d(0, 0, 1, 18deg)",width:"1px"})});var O=()=>({title:css({margin:`${m.spacing2Xs} 0`,"&:not(:first-child)":{marginLeft:m.spacingXs}}),noWrap:css({textWrap:"nowrap",marginLeft:m.spacingXs})});function H({title:e,variant:t}){let r=O(),o=t==="title"?DisplayText:Subheading;return n.createElement("div",{className:r.noWrap},isValidElement(e)?e:n.createElement(o,{as:"h1",className:r.title},e))}var le="header";function ce(v,E){var f=v,{actions:e,as:t,backButtonProps:r,breadcrumbs:o,className:p,filters:l,metadata:a,title:c,withBackButton:u,variant:d="breadcrumb"}=f,b=i(f,["actions","as","backButtonProps","breadcrumbs","className","filters","metadata","title","withBackButton","variant"]);let x=M({hasFilters:!!l,variant:d});return n.createElement(Flex,s({alignItems:"center",as:le,gap:"spacingM",className:cx(x.root,p),ref:E},b),n.createElement("div",{className:x.context},n.createElement(Flex,{alignItems:"center",gap:"spacingXs"},d==="title"?n.createElement(H,{title:c,variant:"title"}):n.createElement(n.Fragment,null,u&&n.createElement(G,s({},r)),o&&n.createElement(C,{breadcrumbs:o}),c&&n.createElement(H,{title:c,variant:"breadcrumb"})),a&&n.createElement(Flex,{alignItems:"center",gap:"spacing2Xs"},a))),n.createElement("div",{className:x.filters},l),n.createElement("div",{className:x.actions},e))}var de=forwardRef(ce);
 
-export { w as HEADER_HEIGHT, ae as Header };
+export { X as HEADER_HEIGHT, de as Header };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -18,13 +18,32 @@ import { MouseEventHandler, ElementType, ReactElement, ReactNode } from 'react';
 declare const HEADER_DEFAULT_TAG = "header";
-declare type WithBackButtonOrNot = {
+declare type Variant = {
+    backButtonProps?: never;
+    breadcrumbs?: never;
+    variant: 'title';
+    withBackButton?: never;
+} | {
+    backButtonProps?: never;
+    /**
+     * An (optional) list of navigable links to prepend to the current title.
+     */
+    breadcrumbs?: BreadcrumbProps['breadcrumbs'];
+    variant?: 'breadcrumb' | undefined;
+    withBackButton?: false | never;
+} | {
+    /**
+     * Props to spread on the back button. You almost certainly want to pass
+     * an `onClick` handler.
+     */
     backButtonProps?: BackButtonProps;
     /**
+     * An (optional) list of navigable links to prepend to the current title.
+     */
+    breadcrumbs?: BreadcrumbProps['breadcrumbs'];
+    variant?: 'breadcrumb' | undefined;
+    /**
      * If `true`, renders a leading back button within the header.
      */
     withBackButton: true;
-} | {
-    backButtonProps?: never;
-    withBackButton?: false | never;
 };
-declare type HeaderInternalProps = WithBackButtonOrNot & {
+declare type HeaderInternalProps = Variant & {
     /**
@@ -35,6 +54,2 @@ * Optional JSX children to display as complementary actions (e.g. buttons) related to the current page/route.
     /**
-     * An (optional) list of navigable links to prepend to the current title.
-     */
-    breadcrumbs?: BreadcrumbProps['breadcrumbs'];
-    /**
      * An (optional) element displayed in the center of the header, typically used to render refinement/search UI.
@@ -41,0 +56,0 @@ */

dist/index.js

@@ -6,6 +6,6 @@ 'use strict';
 var f36Core = require('@contentful/f36-core');
-var f36Typography = require('@contentful/f36-typography');
 var f36Button = require('@contentful/f36-button');
 var f36Icons = require('@contentful/f36-icons');
-var a = require('@contentful/f36-tokens');
+var m = require('@contentful/f36-tokens');
+var f36Typography = require('@contentful/f36-typography');
 
@@ -15,9 +15,9 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var n__default = /*#__PURE__*/_interopDefault(n);
-var a__default = /*#__PURE__*/_interopDefault(a);
+var m__default = /*#__PURE__*/_interopDefault(m);
 
-var C=Object.defineProperty,X=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var S=(e,t,o)=>t in e?C(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,i=(e,t)=>{for(var o in t||(t={}))H.call(t,o)&&S(e,o,t[o]);if(x)for(var o of x(t))b.call(t,o)&&S(e,o,t[o]);return e},N=(e,t)=>X(e,M(t));var c=(e,t)=>{var o={};for(var r in e)H.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&x)for(var r of x(e))t.indexOf(r)<0&&b.call(e,r)&&(o[r]=e[r]);return o};function $(r,o){var m=r,{onClick:e}=m,t=c(m,["onClick"]);return n__default.default.createElement(f36Button.IconButton,N(i({},t),{"aria-label":"Go back",icon:n__default.default.createElement(f36Icons.ArrowBackwardIcon,{variant:"muted"}),onClick:e,size:"small",ref:o,variant:"transparent"}))}var _=n.forwardRef($);var G=()=>({root:emotion.css({alignItems:"center",display:"flex"}),separator:emotion.css({height:a__default.default.spacingXl,position:"relative",width:a__default.default.spacingXs,"&::after":{backgroundColor:a__default.default.gray200,content:'""',display:"block",height:"16px",position:"absolute",left:"50%",top:"50%",width:"1px",transform:"translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 18deg)"}})});var J="div";function K(l,s){var y=l,{children:e,className:t,segments:o,separator:r,testId:m="cf-ui-segmentation"}=y,f=c(y,["children","className","segments","separator","testId"]);let E=G(),P=r!=null?r:n__default.default.createElement("div",{className:E.separator}),T=(u,p)=>n__default.default.createElement(n.Fragment,{key:p},p>0&&P,u);return n__default.default.createElement(f36Core.Box,i({as:J,className:emotion.cx(E.root,t),ref:s,testId:m},f),e?n__default.default.Children.toArray(e).map(T):o.map(T))}var h=n.forwardRef(K);var R=()=>({button:emotion.css({color:a__default.default.gray500,fontSize:a__default.default.fontSizeL,fontWeight:a__default.default.fontWeightNormal,maxWidth:"none",paddingLeft:a__default.default.spacingXs,paddingRight:a__default.default.spacingXs})});var L=o=>{var r=o,{breadcrumbs:e}=r,t=c(r,["breadcrumbs"]);let m=R(),f=e.map(s=>{let l=s.onClick;return n__default.default.createElement(f36Button.Button,{as:"a",className:m.button,href:s.url,key:s.url,size:"small",variant:"transparent",onClick:l},s.content)});return n__default.default.createElement(h,i({segments:f},t))};var w=56;var F=()=>({actions:emotion.css({flexGrow:0,flexShrink:1,flexBasis:"25%",textAlign:"right"}),context:emotion.css({flexGrow:0,flexShrink:1,flexBasis:"25%"}),filters:emotion.css({display:"flex",flexGrow:1,flexShrink:1,flexBasis:"50%"}),root:e=>emotion.css({background:a__default.default.gray100,height:`${56}px`,padding:e?`${a__default.default.spacingXs} ${a__default.default.spacingS}`:a__default.default.spacingS}),separator:emotion.css({backgroundColor:a__default.default.gray200,height:"16px",margin:`0 ${a__default.default.spacingS} 0 ${a__default.default.spacingXs}`,transform:"rotate3d(0, 0, 1, 18deg)",width:"1px"}),title:emotion.css({margin:`${a__default.default.spacing2Xs} 0`,"&:not(:first-child)":{marginLeft:a__default.default.spacingXs}}),noWrap:emotion.css({textWrap:"nowrap","&:not(:first-child)":{marginLeft:a__default.default.spacingXs}})});var re="header";function ne(T,P){var u=T,{actions:e,as:t,backButtonProps:o,breadcrumbs:r,className:m,filters:f,metadata:s,title:l,withBackButton:y}=u,E=c(u,["actions","as","backButtonProps","breadcrumbs","className","filters","metadata","title","withBackButton"]);let p=F();return n__default.default.createElement(f36Core.Flex,i({alignItems:"center",as:re,gap:"spacingM",className:emotion.cx(p.root(!!f),m),ref:P},E),n__default.default.createElement("div",{className:p.context},n__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},n__default.default.createElement(h,null,y&&n__default.default.createElement(_,i({},o)),r&&n__default.default.createElement(L,{breadcrumbs:r}),l&&n__default.default.createElement("div",{className:p.noWrap},n.isValidElement(l)?l:n__default.default.createElement(f36Typography.Subheading,{as:"h1",className:p.title},l))),s&&n__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacing2Xs"},s))),n__default.default.createElement("div",{className:p.filters},f),n__default.default.createElement("div",{className:p.actions},e))}var ae=n.forwardRef(ne);
+var $=Object.defineProperty,z=Object.defineProperties;var V=Object.getOwnPropertyDescriptors;var B=Object.getOwnPropertySymbols;var S=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var A=(e,t,r)=>t in e?$(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,s=(e,t)=>{for(var r in t||(t={}))S.call(t,r)&&A(e,r,t[r]);if(B)for(var r of B(t))N.call(t,r)&&A(e,r,t[r]);return e},I=(e,t)=>z(e,V(t));var i=(e,t)=>{var r={};for(var o in e)S.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&B)for(var o of B(e))t.indexOf(o)<0&&N.call(e,o)&&(r[o]=e[o]);return r};function K(o,r){var p=o,{onClick:e}=p,t=i(p,["onClick"]);return n__default.default.createElement(f36Button.IconButton,I(s({},t),{"aria-label":"Go back",icon:n__default.default.createElement(f36Icons.ArrowBackwardIcon,{variant:"muted"}),onClick:e,size:"small",ref:r,variant:"transparent"}))}var G=n.forwardRef(K);var F=()=>({root:emotion.css({alignItems:"center",display:"flex"}),separator:emotion.css({height:m__default.default.spacingXl,position:"relative",width:m__default.default.spacingXs,"&::after":{backgroundColor:m__default.default.gray200,content:'""',display:"block",height:"16px",position:"absolute",left:"50%",top:"50%",width:"1px",transform:"translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 18deg)"}})});var te="div";function re(c,a){var u=c,{children:e,className:t,segments:r,separator:o,testId:p="cf-ui-segmentation"}=u,l=i(u,["children","className","segments","separator","testId"]);let d=F(),b=o!=null?o:n__default.default.createElement("div",{className:d.separator}),E=(v,f)=>n__default.default.createElement(n.Fragment,{key:f},f>0&&b,v);return n__default.default.createElement(f36Core.Box,s({as:te,className:emotion.cx(d.root,t),ref:a,testId:p},l),e?n__default.default.Children.toArray(e).map(E):r.map(E))}var w=n.forwardRef(re);var L=()=>({button:emotion.css({color:m__default.default.gray500,fontSize:m__default.default.fontSizeL,fontWeight:m__default.default.fontWeightNormal,maxWidth:"none",paddingLeft:m__default.default.spacingXs,paddingRight:m__default.default.spacingXs})});var C=r=>{var o=r,{breadcrumbs:e}=o,t=i(o,["breadcrumbs"]);let p=L(),l=e.map(a=>{let c=a.onClick;return n__default.default.createElement(f36Button.Button,{as:"a",className:p.button,href:a.url,key:a.url,size:"small",variant:"transparent",onClick:c},a.content)});return n__default.default.createElement(w,s({segments:l},t))};var X=56;var M=({hasFilters:e,variant:t})=>({actions:emotion.css({flexGrow:0,flexShrink:1,flexBasis:"25%",textAlign:"right"}),context:emotion.css({flexGrow:0,flexShrink:1,flexBasis:"25%"}),filters:emotion.css({display:"flex",flexGrow:1,flexShrink:1,flexBasis:"50%"}),root:emotion.css({borderBottom:t==="breadcrumb"?`1px solid ${m__default.default.gray200}`:"none",background:m__default.default.colorWhite,height:`${56}px`,marginTop:t==="title"?m__default.default.spacingS:0,padding:e?`${m__default.default.spacingXs} 0`:`${m__default.default.spacingS} 0`}),separator:emotion.css({backgroundColor:m__default.default.gray200,height:"16px",margin:`0 ${m__default.default.spacingS} 0 ${m__default.default.spacingXs}`,transform:"rotate3d(0, 0, 1, 18deg)",width:"1px"})});var O=()=>({title:emotion.css({margin:`${m__default.default.spacing2Xs} 0`,"&:not(:first-child)":{marginLeft:m__default.default.spacingXs}}),noWrap:emotion.css({textWrap:"nowrap",marginLeft:m__default.default.spacingXs})});function H({title:e,variant:t}){let r=O(),o=t==="title"?f36Typography.DisplayText:f36Typography.Subheading;return n__default.default.createElement("div",{className:r.noWrap},n.isValidElement(e)?e:n__default.default.createElement(o,{as:"h1",className:r.title},e))}var le="header";function ce(v,E){var f=v,{actions:e,as:t,backButtonProps:r,breadcrumbs:o,className:p,filters:l,metadata:a,title:c,withBackButton:u,variant:d="breadcrumb"}=f,b=i(f,["actions","as","backButtonProps","breadcrumbs","className","filters","metadata","title","withBackButton","variant"]);let x=M({hasFilters:!!l,variant:d});return n__default.default.createElement(f36Core.Flex,s({alignItems:"center",as:le,gap:"spacingM",className:emotion.cx(x.root,p),ref:E},b),n__default.default.createElement("div",{className:x.context},n__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},d==="title"?n__default.default.createElement(H,{title:c,variant:"title"}):n__default.default.createElement(n__default.default.Fragment,null,u&&n__default.default.createElement(G,s({},r)),o&&n__default.default.createElement(C,{breadcrumbs:o}),c&&n__default.default.createElement(H,{title:c,variant:"breadcrumb"})),a&&n__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacing2Xs"},a))),n__default.default.createElement("div",{className:x.filters},l),n__default.default.createElement("div",{className:x.actions},e))}var de=n.forwardRef(ce);
 
-exports.HEADER_HEIGHT = w;
-exports.Header = ae;
+exports.HEADER_HEIGHT = X;
+exports.Header = de;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@contentful/f36-header",
-  "version": "4.74.1",
+  "version": "5.0.0-alpha.1",
   "description": "Forma 36: Header component",
@@ -5,0 +5,0 @@ "scripts": {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49060

increased by12.9%

Lines of code

120

increased by18.81%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes