solid-ui 2.4.14 → 2.4.15-2b5b280a

package/lib/footer/index.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createControllerInfoBlock = createControllerInfoBlock;
+exports.initFooter = initFooter;
+exports.rebuildFooter = rebuildFooter;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _authn = require("../authn/authn");
+
+var _headerFooterHelpers = require("../utils/headerFooterHelpers");
+
+/*
+    This file was copied from mashlib/src/global/footer.ts file. It is modified to
+    work in solid-ui by adjusting where imported functions are found.
+ */
+var DEFAULT_SOLID_PROJECT_URL = 'https://solidproject.org';
+var DEFAULT_SOLID_PROJECT_NAME = 'solidproject.org';
+/*
+  FooterOptions allow for customizing the link and name of the link part of the footer.
+  */
+
+/**
+ * Initialize footer component, the footer object returned depends on whether the user is authenticated.
+ * @param store the data store
+ * @returns the footer
+ */
+function initFooter(_x, _x2) {
+  return _initFooter.apply(this, arguments);
+}
+/**
+ * @ignore exporting this only for the unit test
+ */
+
+
+function _initFooter() {
+  _initFooter = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(store, options) {
+    var footer, pod, podOwner;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            footer = document.getElementById('PageFooter');
+
+            if (footer) {
+              _context2.next = 3;
+              break;
+            }
+
+            return _context2.abrupt("return");
+
+          case 3:
+            pod = (0, _headerFooterHelpers.getPod)();
+            _context2.next = 6;
+            return (0, _headerFooterHelpers.getPodOwner)(pod, store);
+
+          case 6:
+            podOwner = _context2.sent;
+            rebuildFooter(footer, store, pod, podOwner, options)();
+
+            _authn.authSession.onLogin(rebuildFooter(footer, store, pod, podOwner, options));
+
+            _authn.authSession.onLogout(rebuildFooter(footer, store, pod, podOwner, options));
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _initFooter.apply(this, arguments);
+}
+
+function rebuildFooter(footer, store, pod, podOwner, options) {
+  return /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var user;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            user = (0, _authn.currentUser)();
+            footer.innerHTML = '';
+            _context.t0 = footer;
+            _context.next = 5;
+            return createControllerInfoBlock(store, user, pod, podOwner, options);
+
+          case 5:
+            _context.t1 = _context.sent;
+
+            _context.t0.appendChild.call(_context.t0, _context.t1);
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+}
+/**
+ * @ignore exporting this only for the unit test
+ */
+
+
+function createControllerInfoBlock(store, user, pod, podOwner, options) {
+  var profileLinkContainer = document.createElement('div');
+
+  if (!pod || !podOwner || user && user.equals(podOwner)) {
+    return profileLinkContainer;
+  }
+
+  (0, _headerFooterHelpers.addStyleClassToElement)(profileLinkContainer, ['footer-pod-info', 'footer'], 'footer');
+  var podLinkPre = document.createElement('span');
+  podLinkPre.innerText = "You're visiting ";
+  var podLink = document.createElement('a');
+  podLink.href = pod.uri;
+  podLink.innerText = 'the Pod';
+  var profileLinkPre = document.createElement('span');
+  profileLinkPre.innerText = ' controlled by ';
+  var profileLink = document.createElement('a');
+  profileLink.href = podOwner.uri;
+  profileLink.innerText = (0, _headerFooterHelpers.getName)(store, podOwner);
+  var solidProjectLinkPre = document.createElement('span');
+  solidProjectLinkPre.innerText = '. For more info, check out ';
+  var solidProjectLink = document.createElement('a');
+  solidProjectLink.href = options && options.solidProjectUrl ? options.solidProjectUrl : DEFAULT_SOLID_PROJECT_URL;
+  solidProjectLink.innerText = options && options.solidProjectName ? options.solidProjectName : DEFAULT_SOLID_PROJECT_NAME;
+  var solidProjectLinkPost = document.createElement('span');
+  solidProjectLinkPost.innerText = '.';
+  profileLinkContainer.appendChild(podLinkPre);
+  profileLinkContainer.appendChild(podLink);
+  profileLinkContainer.appendChild(profileLinkPre);
+  profileLinkContainer.appendChild(profileLink);
+  profileLinkContainer.appendChild(solidProjectLinkPre);
+  profileLinkContainer.appendChild(solidProjectLink);
+  profileLinkContainer.appendChild(solidProjectLinkPost);
+  return profileLinkContainer;
+}
+//# sourceMappingURL=index.js.map

package/lib/footer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/footer/index.ts"],"names":["DEFAULT_SOLID_PROJECT_URL","DEFAULT_SOLID_PROJECT_NAME","initFooter","store","options","footer","document","getElementById","pod","podOwner","rebuildFooter","authSession","onLogin","onLogout","user","innerHTML","createControllerInfoBlock","appendChild","profileLinkContainer","createElement","equals","podLinkPre","innerText","podLink","href","uri","profileLinkPre","profileLink","solidProjectLinkPre","solidProjectLink","solidProjectUrl","solidProjectName","solidProjectLinkPost"],"mappings":";;;;;;;;;;;;;;;AAKA;;AACA;;AANA;AACA;AACA;AACA;AAKA,IAAMA,yBAAyB,GAAG,0BAAlC;AACA,IAAMC,0BAA0B,GAAG,kBAAnC;AAEA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;SACsBC,U;;;AAWtB;AACA;AACA;;;;8FAbO,kBAA2BC,KAA3B,EAAkDC,OAAlD;AAAA;AAAA;AAAA;AAAA;AAAA;AACCC,YAAAA,MADD,GACUC,QAAQ,CAACC,cAAT,CAAwB,YAAxB,CADV;;AAAA,gBAEAF,MAFA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAKCG,YAAAA,GALD,GAKO,kCALP;AAAA;AAAA,mBAMkB,sCAAYA,GAAZ,EAAiBL,KAAjB,CANlB;;AAAA;AAMCM,YAAAA,QAND;AAOLC,YAAAA,aAAa,CAACL,MAAD,EAASF,KAAT,EAAgBK,GAAhB,EAAqBC,QAArB,EAA+BL,OAA/B,CAAb;;AACAO,+BAAYC,OAAZ,CAAoBF,aAAa,CAACL,MAAD,EAASF,KAAT,EAAgBK,GAAhB,EAAqBC,QAArB,EAA+BL,OAA/B,CAAjC;;AACAO,+BAAYE,QAAZ,CAAqBH,aAAa,CAACL,MAAD,EAASF,KAAT,EAAgBK,GAAhB,EAAqBC,QAArB,EAA+BL,OAA/B,CAAlC;;AATK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,G;;;;AAcA,SAASM,aAAT,CAAwBL,MAAxB,EAA6CF,KAA7C,EAAoEK,GAApE,EAA2FC,QAA3F,EAAuHL,OAAvH,EAAgJ;AACrJ,oGAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AACCU,YAAAA,IADD,GACQ,yBADR;AAELT,YAAAA,MAAM,CAACU,SAAP,GAAmB,EAAnB;AAFK,0BAGLV,MAHK;AAAA;AAAA,mBAGoBW,yBAAyB,CAACb,KAAD,EAAQW,IAAR,EAAcN,GAAd,EAAmBC,QAAnB,EAA6BL,OAA7B,CAH7C;;AAAA;AAAA;;AAAA,wBAGEa,WAHF;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAP;AAKD;AACD;AACA;AACA;;;AACO,SAASD,yBAAT,CAAoCb,KAApC,EAA2DW,IAA3D,EAAmFN,GAAnF,EAA0GC,QAA1G,EAAsIL,OAAtI,EAA4K;AACjL,MAAMc,oBAAoB,GAAGZ,QAAQ,CAACa,aAAT,CAAuB,KAAvB,CAA7B;;AACA,MAAI,CAACX,GAAD,IAAQ,CAACC,QAAT,IAAsBK,IAAI,IAAIA,IAAI,CAACM,MAAL,CAAYX,QAAZ,CAAlC,EAA0D;AACxD,WAAOS,oBAAP;AACD;;AAED,mDAAuBA,oBAAvB,EAA6C,CAAC,iBAAD,EAAoB,QAApB,CAA7C,EAA4E,QAA5E;AAEA,MAAMG,UAAU,GAAGf,QAAQ,CAACa,aAAT,CAAuB,MAAvB,CAAnB;AACAE,EAAAA,UAAU,CAACC,SAAX,GAAuB,kBAAvB;AAEA,MAAMC,OAAO,GAAGjB,QAAQ,CAACa,aAAT,CAAuB,GAAvB,CAAhB;AACAI,EAAAA,OAAO,CAACC,IAAR,GAAehB,GAAG,CAACiB,GAAnB;AACAF,EAAAA,OAAO,CAACD,SAAR,GAAoB,SAApB;AAEA,MAAMI,cAAc,GAAGpB,QAAQ,CAACa,aAAT,CAAuB,MAAvB,CAAvB;AACAO,EAAAA,cAAc,CAACJ,SAAf,GAA2B,iBAA3B;AAEA,MAAMK,WAAW,GAAGrB,QAAQ,CAACa,aAAT,CAAuB,GAAvB,CAApB;AACAQ,EAAAA,WAAW,CAACH,IAAZ,GAAmBf,QAAQ,CAACgB,GAA5B;AACAE,EAAAA,WAAW,CAACL,SAAZ,GAAwB,kCAAQnB,KAAR,EAAeM,QAAf,CAAxB;AAEA,MAAMmB,mBAAmB,GAAGtB,QAAQ,CAACa,aAAT,CAAuB,MAAvB,CAA5B;AACAS,EAAAA,mBAAmB,CAACN,SAApB,GAAgC,6BAAhC;AAEA,MAAMO,gBAAgB,GAAGvB,QAAQ,CAACa,aAAT,CAAuB,GAAvB,CAAzB;AACAU,EAAAA,gBAAgB,CAACL,IAAjB,GAAwBpB,OAAO,IAAIA,OAAO,CAAC0B,eAAnB,GAAqC1B,OAAO,CAAC0B,eAA7C,GAA+D9B,yBAAvF;AACA6B,EAAAA,gBAAgB,CAACP,SAAjB,GAA6BlB,OAAO,IAAIA,OAAO,CAAC2B,gBAAnB,GAAsC3B,OAAO,CAAC2B,gBAA9C,GAAiE9B,0BAA9F;AAEA,MAAM+B,oBAAoB,GAAG1B,QAAQ,CAACa,aAAT,CAAuB,MAAvB,CAA7B;AACAa,EAAAA,oBAAoB,CAACV,SAArB,GAAiC,GAAjC;AAEAJ,EAAAA,oBAAoB,CAACD,WAArB,CAAiCI,UAAjC;AACAH,EAAAA,oBAAoB,CAACD,WAArB,CAAiCM,OAAjC;AACAL,EAAAA,oBAAoB,CAACD,WAArB,CAAiCS,cAAjC;AACAR,EAAAA,oBAAoB,CAACD,WAArB,CAAiCU,WAAjC;AACAT,EAAAA,oBAAoB,CAACD,WAArB,CAAiCW,mBAAjC;AACAV,EAAAA,oBAAoB,CAACD,WAArB,CAAiCY,gBAAjC;AACAX,EAAAA,oBAAoB,CAACD,WAArB,CAAiCe,oBAAjC;AAEA,SAAOd,oBAAP;AACD","sourcesContent":["/*\n    This file was copied from mashlib/src/global/footer.ts file. It is modified to\n    work in solid-ui by adjusting where imported functions are found.\n */\nimport { IndexedFormula, NamedNode } from 'rdflib'\nimport { authSession, currentUser } from '../authn/authn'\nimport { addStyleClassToElement, getName, getPod, getPodOwner } from '../utils/headerFooterHelpers'\n\nconst DEFAULT_SOLID_PROJECT_URL = 'https://solidproject.org'\nconst DEFAULT_SOLID_PROJECT_NAME = 'solidproject.org'\n\n/*\n  FooterOptions allow for customizing the link and name of the link part of the footer.\n  */\nexport type FooterOptions = {\n    solidProjectUrl?: string,\n    solidProjectName?: string\n  }\n\n/**\n * Initialize footer component, the footer object returned depends on whether the user is authenticated.\n * @param store the data store\n * @returns the footer\n */\nexport async function initFooter (store: IndexedFormula, options?: FooterOptions) {\n  const footer = document.getElementById('PageFooter')\n  if (!footer) {\n    return\n  }\n  const pod = getPod()\n  const podOwner = await getPodOwner(pod, store)\n  rebuildFooter(footer, store, pod, podOwner, options)()\n  authSession.onLogin(rebuildFooter(footer, store, pod, podOwner, options))\n  authSession.onLogout(rebuildFooter(footer, store, pod, podOwner, options))\n}\n/**\n * @ignore exporting this only for the unit test\n */\nexport function rebuildFooter (footer: HTMLElement, store: IndexedFormula, pod: NamedNode | null, podOwner: NamedNode | null, options?: FooterOptions) {\n  return async () => {\n    const user = currentUser()\n    footer.innerHTML = ''\n    footer.appendChild(await createControllerInfoBlock(store, user, pod, podOwner, options))\n  }\n}\n/**\n * @ignore exporting this only for the unit test\n */\nexport function createControllerInfoBlock (store: IndexedFormula, user: NamedNode | null, pod: NamedNode | null, podOwner: NamedNode | null, options?: FooterOptions): HTMLElement {\n  const profileLinkContainer = document.createElement('div')\n  if (!pod || !podOwner || (user && user.equals(podOwner))) {\n    return profileLinkContainer\n  }\n\n  addStyleClassToElement(profileLinkContainer, ['footer-pod-info', 'footer'], 'footer')\n\n  const podLinkPre = document.createElement('span')\n  podLinkPre.innerText = \"You're visiting \"\n\n  const podLink = document.createElement('a')\n  podLink.href = pod.uri\n  podLink.innerText = 'the Pod'\n\n  const profileLinkPre = document.createElement('span')\n  profileLinkPre.innerText = ' controlled by '\n\n  const profileLink = document.createElement('a')\n  profileLink.href = podOwner.uri\n  profileLink.innerText = getName(store, podOwner)\n\n  const solidProjectLinkPre = document.createElement('span')\n  solidProjectLinkPre.innerText = '. For more info, check out '\n\n  const solidProjectLink = document.createElement('a')\n  solidProjectLink.href = options && options.solidProjectUrl ? options.solidProjectUrl : DEFAULT_SOLID_PROJECT_URL\n  solidProjectLink.innerText = options && options.solidProjectName ? options.solidProjectName : DEFAULT_SOLID_PROJECT_NAME\n\n  const solidProjectLinkPost = document.createElement('span')\n  solidProjectLinkPost.innerText = '.'\n\n  profileLinkContainer.appendChild(podLinkPre)\n  profileLinkContainer.appendChild(podLink)\n  profileLinkContainer.appendChild(profileLinkPre)\n  profileLinkContainer.appendChild(profileLink)\n  profileLinkContainer.appendChild(solidProjectLinkPre)\n  profileLinkContainer.appendChild(solidProjectLink)\n  profileLinkContainer.appendChild(solidProjectLinkPost)\n\n  return profileLinkContainer\n}\n"],"file":"index.js"}

package/lib/footer/styleMap.d.ts

@@ -0,0 +1,8 @@
+export declare const styleMap: {
+    footer: {
+        borderTop: string;
+        fontSize: string;
+        padding: string;
+    };
+};
+//# sourceMappingURL=styleMap.d.ts.map

package/lib/footer/styleMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleMap.d.ts","sourceRoot":"","sources":["../../src/footer/styleMap.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAA"}

package/lib/footer/styleMap.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styleMap = void 0;
+var styleMap = {
+  footer: {
+    borderTop: 'solid 1px $divider-color',
+    fontSize: '0.9em',
+    padding: '0.5em 1.5em'
+  }
+};
+exports.styleMap = styleMap;
+//# sourceMappingURL=styleMap.js.map

package/lib/footer/styleMap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/footer/styleMap.ts"],"names":["styleMap","footer","borderTop","fontSize","padding"],"mappings":";;;;;;AAAO,IAAMA,QAAQ,GAAG;AACtBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,SAAS,EAAE,0BADL;AAENC,IAAAA,QAAQ,EAAE,OAFJ;AAGNC,IAAAA,OAAO,EAAE;AAHH;AADc,CAAjB","sourcesContent":["export const styleMap = {\n  footer: {\n    borderTop: 'solid 1px $divider-color',\n    fontSize: '0.9em',\n    padding: '0.5em 1.5em'\n  }\n}\n"],"file":"styleMap.js"}

package/lib/header/index.d.ts

@@ -2,35 +2,38 @@ import { IndexedFormula, NamedNode } from 'rdflib';
 export declare type MenuItemLink = {
     label: string;
     url: string;
+    target?: string;
 };
 export declare type MenuItemButton = {
     label: string;
-    onclick: () => {};
+    onclick: () => void;
 };
 export declare type MenuItems = MenuItemLink | MenuItemButton;
 export declare type HeaderOptions = {
     logo?: string;
-    menuList?: MenuItems[];
+    helpIcon?: string;
+    helpMenuList?: MenuItems[];
 };
 /**
  * Initialize header component, the header object returned depends on whether the user is authenticated.
  * @param store the data store
- * @param options allow the header to be customized with a personalized logo and a menu list of links or buttons.
+ * @param userMenuList a list of menu items when the user is logged in
+ * @param options allow the header to be customized with a personalized logo, help icon and a help menu list of links or buttons.
  * @returns a header for an authenticated user with menu items given or a login screen
  */
-export declare function initHeader(store: IndexedFormula, options?: HeaderOptions): Promise<void>;
+export declare function initHeader(store: IndexedFormula, userMenuList: MenuItems[], options?: HeaderOptions): Promise<void>;
 /**
  * @ignore exporting this only for the unit test
  */
-export declare function rebuildHeader(header: HTMLElement, store: IndexedFormula, pod: NamedNode, options?: HeaderOptions): () => Promise<void>;
+export declare function rebuildHeader(header: HTMLElement, store: IndexedFormula, pod: NamedNode, userMenuList: MenuItems[], options?: HeaderOptions): () => Promise<void>;
 /**
  * @ignore exporting this only for the unit test
  */
-export declare function createBanner(store: IndexedFormula, pod: NamedNode, user: NamedNode | null, options?: HeaderOptions): Promise<HTMLElement>;
+export declare function createBanner(store: IndexedFormula, pod: NamedNode, user: NamedNode | null, userMenuList: MenuItems[], options?: HeaderOptions): Promise<HTMLElement>;
 /**
  * @ignore exporting this only for the unit test
  */
-export declare function createHelpMenu(): HTMLDivElement;
+export declare function createHelpMenu(options: HeaderOptions, helpMenuItems: MenuItems[]): HTMLDivElement | undefined;
 /**
  * @ignore exporting this only for the unit test
  */
@@ -46,7 +49,7 @@ export declare function createUserMenuLink(label: string, href: string, target?:
 /**
  * @ignore exporting this only for the unit test
  */
-export declare function createUserMenu(store: IndexedFormula, user: NamedNode, options?: HeaderOptions): Promise<HTMLElement>;
+export declare function createUserMenu(store: IndexedFormula, user: NamedNode, userMenuList: MenuItems[]): Promise<HTMLElement>;
 /**
  * @ignore exporting this only for the unit test
  */

package/lib/header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/header/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAOlD,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,oBAAY,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAA;CAClB,CAAA;AAED,oBAAY,SAAS,GAAG,YAAY,GAAG,cAAc,CAAA;AAMrD,oBAAY,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAA;CACvB,CAAA;AAED;;;;;GAKG;AACH,wBAAsB,UAAU,CAAE,KAAK,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,aAAa,iBAU/E;AACD;;GAEG;AACH,wBAAgB,aAAa,CAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,aAAa,uBAMjH;AACD;;GAEG;AACH,wBAAsB,YAAY,CAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,CA6BhJ;AACD;;GAEG;AACH,wBAAgB,cAAc,mBAyC7B;AACD;;GAEG;AACH,wBAAgB,wBAAwB,mBAKvC;AACD;;GAEG;AACH,wBAAgB,oBAAoB,CAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,GAAG,WAAW,CAM7G;AACD;;GAEG;AACH,wBAAgB,kBAAkB,CAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAC,MAAM,GAAG,WAAW,CAO5F;AAED;;GAEG;AACH,wBAAsB,cAAc,CAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,CA0D3H;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAE,KAAK,EAAE,WAAW,GAAG,WAAW,CAKnE;AACD;;GAEG;AACH,wBAAgB,aAAa,CAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,CAe3F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/header/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAalD,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,oBAAY,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,oBAAY,SAAS,GAAG,YAAY,GAAG,cAAc,CAAA;AAMrD,oBAAY,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,EAAE,CAAA;CAC3B,CAAA;AAED;;;;;;GAMG;AACH,wBAAsB,UAAU,CAAE,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,aAAa,iBAU1G;AACD;;GAEG;AACH,wBAAgB,aAAa,CAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,aAAa,uBAM5I;AACD;;GAEG;AACH,wBAAsB,YAAY,CAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,CA+B3K;AACD;;GAEG;AACH,wBAAgB,cAAc,CAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,8BA8CjF;AACD;;GAEG;AACH,wBAAgB,wBAAwB,mBAKvC;AACD;;GAEG;AACH,wBAAgB,oBAAoB,CAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,GAAG,WAAW,CAM7G;AACD;;GAEG;AACH,wBAAgB,kBAAkB,CAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAO7F;AAED;;GAEG;AACH,wBAAsB,cAAc,CAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC,WAAW,CAAC,CAqD7H;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAE,KAAK,EAAE,WAAW,GAAG,WAAW,CAKnE;AACD;;GAEG;AACH,wBAAgB,aAAa,CAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,CAe3F"}

package/lib/header/index.js

@@ -22,7 +22,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-var _ = require("..");
+var _iconBase = require("../iconBase");
 
 var _authn = require("../authn/authn");
 
@@ -30,7 +30,7 @@ var widgets = _interopRequireWildcard(require("../widgets"));
 
 var _emptyProfile = require("./empty-profile");
 
-var _headerHelpers = require("./headerHelpers");
+var _headerFooterHelpers = require("../utils/headerFooterHelpers");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -43,13 +43,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     work in solid-ui by adjusting where imported functions are found.
  */
 
+/**
+ * menu icons
+*/
+var DEFAULT_HELP_MENU_ICON = _iconBase.icons.iconBase + 'noun_help.svg';
+var DEFAUL_SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg';
+
 /**
  * Initialize header component, the header object returned depends on whether the user is authenticated.
  * @param store the data store
- * @param options allow the header to be customized with a personalized logo and a menu list of links or buttons.
+ * @param userMenuList a list of menu items when the user is logged in
+ * @param options allow the header to be customized with a personalized logo, help icon and a help menu list of links or buttons.
  * @returns a header for an authenticated user with menu items given or a login screen
  */
-function initHeader(_x, _x2) {
+function initHeader(_x, _x2, _x3) {
   return _initHeader.apply(this, arguments);
 }
 /**
@@ -58,7 +65,7 @@ function initHeader(_x, _x2) {
 
 
 function _initHeader() {
-  _initHeader = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(store, options) {
+  _initHeader = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(store, userMenuList, options) {
     var header, pod;
     return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
@@ -74,12 +81,12 @@ function _initHeader() {
             return _context2.abrupt("return");
 
           case 3:
-            pod = (0, _headerHelpers.getPod)();
-            rebuildHeader(header, store, pod, options)();
+            pod = (0, _headerFooterHelpers.getPod)();
+            rebuildHeader(header, store, pod, userMenuList, options)();
 
-            _authn.authSession.onLogout(rebuildHeader(header, store, pod, options));
+            _authn.authSession.onLogout(rebuildHeader(header, store, pod, userMenuList, options));
 
-            _authn.authSession.onLogin(rebuildHeader(header, store, pod, options));
+            _authn.authSession.onLogin(rebuildHeader(header, store, pod, userMenuList, options));
 
           case 7:
           case "end":
@@ -91,7 +98,7 @@ function _initHeader() {
   return _initHeader.apply(this, arguments);
 }
 
-function rebuildHeader(header, store, pod, options) {
+function rebuildHeader(header, store, pod, userMenuList, options) {
   return /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var user;
     return _regenerator["default"].wrap(function _callee$(_context) {
@@ -102,7 +109,7 @@ function rebuildHeader(header, store, pod, options) {
             header.innerHTML = '';
             _context.t0 = header;
             _context.next = 5;
-            return createBanner(store, pod, user, options);
+            return createBanner(store, pod, user, userMenuList, options);
 
           case 5:
             _context.t1 = _context.sent;
@@ -122,7 +129,7 @@ function rebuildHeader(header, store, pod, options) {
  */
 
 
-function createBanner(_x3, _x4, _x5, _x6) {
+function createBanner(_x4, _x5, _x6, _x7, _x8) {
   return _createBanner.apply(this, arguments);
 }
 /**
@@ -131,22 +138,22 @@ function createBanner(_x3, _x4, _x5, _x6) {
 
 
 function _createBanner() {
-  _createBanner = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(store, pod, user, options) {
-    var podLink, image, userMenu, helpMenu, banner, leftSideOfHeader;
+  _createBanner = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(store, pod, user, userMenuList, options) {
+    var podLink, image, userMenu, banner, leftSideOfHeader, helpMenu;
     return _regenerator["default"].wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
             podLink = document.createElement('a');
             podLink.href = pod.uri;
-            (0, _headerHelpers.addStyleClassToElement)(podLink, ['header-banner__link']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(podLink, ['header-banner__link']);
             image = document.createElement('img');
 
             if (options) {
-              image.src = options.logo ? options.logo : 'https://solidproject.org/assets/img/solid-emblem.svg';
+              image.src = options.logo ? options.logo : DEFAUL_SOLID_ICON_URL;
             }
 
-            (0, _headerHelpers.addStyleClassToElement)(image, ['header-banner__icon']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(image, ['header-banner__icon']);
             podLink.appendChild(image);
 
             if (!user) {
@@ -155,7 +162,7 @@ function _createBanner() {
             }
 
             _context3.next = 10;
-            return createUserMenu(store, user, options);
+            return createUserMenu(store, user, userMenuList);
 
           case 10:
             _context3.t0 = _context3.sent;
@@ -167,18 +174,22 @@ function _createBanner() {
 
           case 14:
             userMenu = _context3.t0;
-            helpMenu = createHelpMenu();
             banner = document.createElement('div');
-            (0, _headerHelpers.addStyleClassToElement)(banner, ['header-banner']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(banner, ['header-banner']);
             banner.appendChild(podLink);
             leftSideOfHeader = document.createElement('div');
-            (0, _headerHelpers.addStyleClassToElement)(leftSideOfHeader, ['header-banner__right-menu']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(leftSideOfHeader, ['header-banner__right-menu']);
             leftSideOfHeader.appendChild(userMenu);
-            leftSideOfHeader.appendChild(helpMenu);
+
+            if (options && options.helpMenuList) {
+              helpMenu = createHelpMenu(options, options.helpMenuList);
+              leftSideOfHeader.appendChild(helpMenu);
+            }
+
             banner.appendChild(leftSideOfHeader);
             return _context3.abrupt("return", banner);
 
-          case 25:
+          case 24:
           case "end":
             return _context3.stop();
         }
@@ -188,29 +199,36 @@ function _createBanner() {
   return _createBanner.apply(this, arguments);
 }
 
-function createHelpMenu() {
+function createHelpMenu(options, helpMenuItems) {
+  if (!helpMenuItems) return;
   var helpMenuList = document.createElement('ul');
-  (0, _headerHelpers.addStyleClassToElement)(helpMenuList, ['header-user-menu__list']);
-  helpMenuList.appendChild(createUserMenuItem(createUserMenuLink('User guide', 'https://github.com/solid/userguide', '_blank')));
-  helpMenuList.appendChild(createUserMenuItem(createUserMenuLink('Report a problem', 'https://github.com/solid/solidos/issues', '_blank')));
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuList, ['header-user-menu__list']);
+  helpMenuItems.forEach(function (menuItem) {
+    var menuItemType = menuItem.url ? 'url' : 'onclick';
+
+    if (menuItemType === 'url') {
+      helpMenuList.appendChild(createUserMenuItem(createUserMenuLink(menuItem.label, menuItem.url, menuItem.target)));
+    } else {
+      helpMenuList.appendChild(createUserMenuItem(createUserMenuButton(menuItem.label, menuItem.onclick)));
+    }
+  });
   var helpMenu = document.createElement('nav');
-  (0, _headerHelpers.addStyleClassToElement)(helpMenu, ['header-user-menu__navigation-menu']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenu, ['header-user-menu__navigation-menu']);
   helpMenu.setAttribute('aria-hidden', 'true');
   helpMenu.appendChild(helpMenuList);
-  var helpIcon = _.icons.iconBase + 'noun_144.svg';
   var helpMenuContainer = document.createElement('div');
-  (0, _headerHelpers.addStyleClassToElement)(helpMenuContainer, ['header-banner__user-menu']);
-  (0, _headerHelpers.addStyleClassToElement)(helpMenuContainer, ['header-user-menu']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuContainer, ['header-banner__user-menu']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuContainer, ['header-user-menu']);
   helpMenuContainer.appendChild(helpMenu);
   var helpMenuTrigger = document.createElement('button');
-  (0, _headerHelpers.addStyleClassToElement)(helpMenuTrigger, ['header-user-menu__trigger']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuTrigger, ['header-user-menu__trigger']);
   helpMenuTrigger.type = 'button';
   var helpMenuIcon = document.createElement('img');
-  helpMenuIcon.src = helpIcon;
-  (0, _headerHelpers.addStyleClassToElement)(helpMenuIcon, ['header-banner__help-icon']);
+  helpMenuIcon.src = options && options.helpIcon ? options.helpIcon : _iconBase.icons.iconBase + DEFAULT_HELP_MENU_ICON;
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuIcon, ['header-banner__help-icon']);
   helpMenuContainer.appendChild(helpMenuTrigger);
   helpMenuTrigger.appendChild(helpMenuIcon);
-  var throttledMenuToggle = (0, _headerHelpers.throttle)(function (event) {
+  var throttledMenuToggle = (0, _headerFooterHelpers.throttle)(function (event) {
     return toggleMenu(event, helpMenuTrigger, helpMenu);
   }, 50);
   helpMenuTrigger.addEventListener('click', throttledMenuToggle);
@@ -235,7 +253,7 @@ function createHelpMenu() {
 
 function createLoginSignUpButtons() {
   var profileLoginButtonPre = document.createElement('div');
-  (0, _headerHelpers.addStyleClassToElement)(profileLoginButtonPre, ['header-banner__login']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(profileLoginButtonPre, ['header-banner__login']);
   profileLoginButtonPre.appendChild((0, _authn.loginStatusBox)(document, null, {}));
   return profileLoginButtonPre;
 }
@@ -246,7 +264,7 @@ function createLoginSignUpButtons() {
 
 function createUserMenuButton(label, onClick) {
   var button = document.createElement('button');
-  (0, _headerHelpers.addStyleClassToElement)(button, ['header-user-menu__button']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(button, ['header-user-menu__button']);
   button.addEventListener('click', onClick);
   button.innerText = label;
   return button;
@@ -258,7 +276,7 @@ function createUserMenuButton(label, onClick) {
 
 function createUserMenuLink(label, href, target) {
   var link = document.createElement('a');
-  (0, _headerHelpers.addStyleClassToElement)(link, ['header-user-menu__link']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(link, ['header-user-menu__link']);
   link.href = href;
   link.innerText = label;
   if (target) link.target = target;
@@ -269,7 +287,7 @@ function createUserMenuLink(label, href, target) {
  */
 
 
-function createUserMenu(_x7, _x8, _x9) {
+function createUserMenu(_x9, _x10, _x11) {
   return _createUserMenu.apply(this, arguments);
 }
 /**
@@ -278,7 +296,7 @@ function createUserMenu(_x7, _x8, _x9) {
 
 
 function _createUserMenu() {
-  _createUserMenu = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(store, user, options) {
+  _createUserMenu = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(store, user, userMenuList) {
     var fetcher, loggedInMenuList, loggedInMenu, loggedInMenuTrigger, profileImg, loggedInMenuContainer, throttledMenuToggle, timer;
     return _regenerator["default"].wrap(function _callee4$(_context4) {
       while (1) {
@@ -296,32 +314,26 @@ function _createUserMenu() {
 
           case 4:
             loggedInMenuList = document.createElement('ul');
-            (0, _headerHelpers.addStyleClassToElement)(loggedInMenuList, ['header-user-menu__list']);
-            loggedInMenuList.appendChild(createUserMenuItem(createUserMenuLink('Show your profile', user.uri)));
-
-            if (options) {
-              if (options.menuList) {
-                options.menuList.forEach(function (menuItem) {
-                  var menuItemType = menuItem.url ? 'url' : 'onclick';
-
-                  if (menuItemType === 'url') {
-                    loggedInMenuList.appendChild(createUserMenuItem(createUserMenuLink(menuItem.label, menuItem[menuItemType])));
-                  } else {
-                    loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton(menuItem.label, menuItem[menuItemType])));
-                  }
-                });
-              }
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenuList, ['header-user-menu__list']);
+
+            if (userMenuList) {
+              userMenuList.forEach(function (menuItem) {
+                var menuItemType = menuItem.url ? 'url' : 'onclick';
+
+                if (menuItemType === 'url') {
+                  loggedInMenuList.appendChild(createUserMenuItem(createUserMenuLink(menuItem.label, menuItem.url, menuItem.target)));
+                } else {
+                  loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton(menuItem.label, menuItem.onclick)));
+                }
+              });
             }
 
-            loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton('Log out', function () {
-              return _authn.authSession.logout();
-            })));
             loggedInMenu = document.createElement('nav');
-            (0, _headerHelpers.addStyleClassToElement)(loggedInMenu, ['header-user-menu__navigation-menu']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenu, ['header-user-menu__navigation-menu']);
             loggedInMenu.setAttribute('aria-hidden', 'true');
             loggedInMenu.appendChild(loggedInMenuList);
             loggedInMenuTrigger = document.createElement('button');
-            (0, _headerHelpers.addStyleClassToElement)(loggedInMenuTrigger, ['header-user-menu__trigger']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenuTrigger, ['header-user-menu__trigger']);
             loggedInMenuTrigger.type = 'button';
             profileImg = getProfileImg(store, user);
 
@@ -332,11 +344,11 @@ function _createUserMenu() {
             }
 
             loggedInMenuContainer = document.createElement('div');
-            (0, _headerHelpers.addStyleClassToElement)(loggedInMenuContainer, ['header-banner__user-menu']);
-            (0, _headerHelpers.addStyleClassToElement)(loggedInMenuContainer, ['header-user-menu']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenuContainer, ['header-banner__user-menu']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenuContainer, ['header-user-menu']);
             loggedInMenuContainer.appendChild(loggedInMenuTrigger);
             loggedInMenuContainer.appendChild(loggedInMenu);
-            throttledMenuToggle = (0, _headerHelpers.throttle)(function (event) {
+            throttledMenuToggle = (0, _headerFooterHelpers.throttle)(function (event) {
               return toggleMenu(event, loggedInMenuTrigger, loggedInMenu);
             }, 50);
             loggedInMenuTrigger.addEventListener('click', throttledMenuToggle);
@@ -354,7 +366,7 @@ function _createUserMenu() {
             });
             return _context4.abrupt("return", loggedInMenuContainer);
 
-          case 29:
+          case 27:
           case "end":
             return _context4.stop();
         }
@@ -366,7 +378,7 @@ function _createUserMenu() {
 
 function createUserMenuItem(child) {
   var menuProfileItem = document.createElement('li');
-  (0, _headerHelpers.addStyleClassToElement)(menuProfileItem, ['header-user-menu__list-item']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(menuProfileItem, ['header-user-menu__list-item']);
   menuProfileItem.appendChild(child);
   return menuProfileItem;
 }
@@ -379,9 +391,9 @@ function getProfileImg(store, user) {
   var profileUrl = null;
 
   try {
-    var _profileUrl = widgets.findImage(user);
+    profileUrl = widgets.findImage(user);
 
-    if (!_profileUrl) {
+    if (!profileUrl) {
       return _emptyProfile.emptyProfile;
     }
   } catch (_unused) {
@@ -389,8 +401,8 @@ function getProfileImg(store, user) {
   }
 
   var profileImage = document.createElement('div');
-  (0, _headerHelpers.addStyleClassToElement)(profileImage, ['header-user-menu__photo']);
-  profileImage.style.backgroundImage = "url(\"".concat(profileUrl, "\")");
+  (0, _headerFooterHelpers.addStyleClassToElement)(profileImage, ['header-user-menu__photo']);
+  profileImage.style.backgroundImage = "url(".concat(profileUrl, ")");
   return profileImage;
 }
 /**