| 1 | {"version":3,"file":"Header.js","sources":["../src/components/Header/Header.js"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Inside } from 'use-inside'\nimport { GU, textStyle } from '../../style'\nimport { useTheme } from '../../theme'\nimport { useLayout } from '../Layout/Layout'\n\nfunction Header({ primary, secondary, children, ...props }) {\n const theme = useTheme()\n const { layoutName } = useLayout()\n const fullWidth = layoutName === 'small'\n\n return (\n <Inside name=\"Header\">\n <div\n css={`\n padding: ${fullWidth ? 0 : 3 * GU}px 0;\n background: ${fullWidth ? theme.surface : 'none'};\n margin-bottom: ${fullWidth ? 2 * GU : 0}px;\n box-shadow: ${fullWidth ? '0px 2px 3px rgba(0, 0, 0, 0.05)' : 'none'};\n `}\n {...props}\n >\n <div\n css={`\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: ${fullWidth ? 8 * GU : 5 * GU}px;\n padding: 0 ${fullWidth && !children ? 2 * GU : 0}px;\n `}\n >\n {children || (\n <>\n <Inside name=\"Header:primary\">\n <div\n css={`\n display: flex;\n min-width: 0;\n flex-shrink: 1;\n flex-grow: 1;\n margin-right: ${secondary ? 2 * GU : 0}px;\n `}\n >\n {typeof primary === 'string' && primary ? (\n <Header.Title>{primary}</Header.Title>\n ) : (\n primary\n )}\n </div>\n </Inside>\n <Inside name=\"Header:secondary\">\n <div\n css={`\n flex-shrink: 0;\n `}\n >\n {secondary}\n </div>\n </Inside>\n </>\n )}\n </div>\n </div>\n </Inside>\n )\n}\n\nHeader.propTypes = {\n primary: PropTypes.node,\n secondary: PropTypes.node,\n children: PropTypes.node,\n}\n\nHeader.Title = function HeaderTitle({ children, ...props }) {\n const theme = useTheme()\n const { layoutName } = useLayout()\n const fullWidth = layoutName === 'small'\n return (\n <h1\n css={`\n color: ${theme.content};\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n ${textStyle(fullWidth ? 'title3' : 'title2')};\n `}\n {...props}\n >\n {children}\n </h1>\n )\n}\n\nHeader.Title.propTypes = {\n children: PropTypes.node,\n}\n\nexport default Header\n"],"names":["Header","primary","secondary","children","props","theme","useTheme","useLayout","layoutName","fullWidth","React","Inside","GU","surface","propTypes","PropTypes","node","Title","HeaderTitle","content","textStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAASA,MAAT,OAA4D;AAAA,MAA1CC,OAA0C,QAA1CA,OAA0C;AAAA,MAAjCC,SAAiC,QAAjCA,SAAiC;AAAA,MAAtBC,QAAsB,QAAtBA,QAAsB;AAAA,MAATC,KAAS;;AAC1D,MAAMC,KAAK,GAAGC,cAAQ,EAAtB;;AAD0D,mBAEnCC,gBAAS,EAF0B;AAAA,MAElDC,UAFkD,cAElDA,UAFkD;;AAG1D,MAAMC,SAAS,GAAGD,UAAU,KAAK,OAAjC;AAEA,sBACEE,6BAACC,SAAD;AAAQ,IAAA,IAAI,EAAC;AAAb,kBACED,iEAOMN,KAPN;AAAA,UAEeK,SAAS,GAAG,CAAH,GAAO,IAAIG,YAFnC;AAAA,WAGkBH,SAAS,GAAGJ,KAAK,CAACQ,OAAT,GAAmB,MAH9C;AAAA,WAIqBJ,SAAS,GAAG,IAAIG,YAAP,GAAY,CAJ1C;AAAA,WAKkBH,SAAS,GAAG,iCAAH,GAAuC;AALlE,mBASEC;AAAA,WAKcD,SAAS,GAAG,IAAIG,YAAP,GAAY,IAAIA,YALvC;AAAA,WAMiBH,SAAS,IAAI,CAACN,QAAd,GAAyB,IAAIS,YAA7B,GAAkC;AANnD,KASGT,QAAQ,iBACPO,yEACEA,6BAACC,SAAD;AAAQ,IAAA,IAAI,EAAC;AAAb,kBACED;AAAA,WAMoBR,SAAS,GAAG,IAAIU,YAAP,GAAY;AANzC,KASG,OAAOX,OAAP,KAAmB,QAAnB,IAA+BA,OAA/B,gBACCS,6BAAC,MAAD,CAAQ,KAAR,QAAeT,OAAf,CADD,GAGCA,OAZJ,CADF,CADF,eAkBES,6BAACC,SAAD;AAAQ,IAAA,IAAI,EAAC;AAAb,kBACED,gDAKGR,SALH,CADF,CAlBF,CAVJ,CATF,CADF,CADF;AAsDD;;AAEDF,MAAM,CAACc,SAAP,GAAmB;AACjBb,EAAAA,OAAO,EAAEc,eAAS,CAACC,IADF;AAEjBd,EAAAA,SAAS,EAAEa,eAAS,CAACC,IAFJ;AAGjBb,EAAAA,QAAQ,EAAEY,eAAS,CAACC;AAHH,CAAnB;;;;;;;;;;;AAMAhB,MAAM,CAACiB,KAAP,GAAe,SAASC,WAAT,QAA6C;AAAA,MAAtBf,QAAsB,SAAtBA,QAAsB;AAAA,MAATC,KAAS;;AAC1D,MAAMC,KAAK,GAAGC,cAAQ,EAAtB;;AAD0D,oBAEnCC,gBAAS,EAF0B;AAAA,MAElDC,UAFkD,eAElDA,UAFkD;;AAG1D,MAAMC,SAAS,GAAGD,UAAU,KAAK,OAAjC;AACA,sBACEE,+DAQMN,KARN;AAAA,WAEaC,KAAK,CAACc,OAFnB;AAAA,WAMMC,oBAAS,CAACX,SAAS,GAAG,QAAH,GAAc,QAAxB;AANf,MAUGN,QAVH,CADF;AAcD,CAlBD;;AAoBAH,MAAM,CAACiB,KAAP,CAAaH,SAAb,GAAyB;AACvBX,EAAAA,QAAQ,EAAEY,eAAS,CAACC;AADG,CAAzB;;;;"} |