@debtcollective/dc-header-component - npm Package Compare versions

Comparing version 0.10.2 to 0.12.1

CHANGELOG.md

@@ -6,2 +6,46 @@ # Change Log
 
+## [0.12.1](https://github.com/debtcollective/packages/compare/v0.12.0...v0.12.1) (2020-09-09)
+
+**Note:** Version bump only for package @debtcollective/dc-header-component
+
+
+
+
+
+# [0.12.0](https://github.com/debtcollective/packages/compare/v0.10.2...v0.12.0) (2020-09-09)
+
+
+### Features
+
+* **header:** add a toggleable side menu ([42366ea](https://github.com/debtcollective/packages/commit/42366ea))
+* **header:** add messages/notifications icons ([15ee94f](https://github.com/debtcollective/packages/commit/15ee94f))
+* **header:** add notifications link alongside counters ([b7a80f6](https://github.com/debtcollective/packages/commit/b7a80f6))
+* **header:** add root link and close btn within menu ([f9f9fee](https://github.com/debtcollective/packages/commit/f9f9fee))
+* **header:** allow to transition from header desktop to mobile ([7f938ef](https://github.com/debtcollective/packages/commit/7f938ef))
+* **header:** update btns to match red brand colour ([abebcad](https://github.com/debtcollective/packages/commit/abebcad))
+* **header:** update layout to have navigation on the left ([c9517cc](https://github.com/debtcollective/packages/commit/c9517cc))
+* **header:** use <slot /> API to improve flexibility ([e215c6d](https://github.com/debtcollective/packages/commit/e215c6d))
+
+
+
+
+
+# [0.11.0](https://github.com/debtcollective/packages/compare/v0.10.2...v0.11.0) (2020-09-09)
+
+
+### Features
+
+* **header:** add a toggleable side menu ([42366ea](https://github.com/debtcollective/packages/commit/42366ea))
+* **header:** add messages/notifications icons ([15ee94f](https://github.com/debtcollective/packages/commit/15ee94f))
+* **header:** add notifications link alongside counters ([b7a80f6](https://github.com/debtcollective/packages/commit/b7a80f6))
+* **header:** add root link and close btn within menu ([f9f9fee](https://github.com/debtcollective/packages/commit/f9f9fee))
+* **header:** allow to transition from header desktop to mobile ([7f938ef](https://github.com/debtcollective/packages/commit/7f938ef))
+* **header:** update btns to match red brand colour ([abebcad](https://github.com/debtcollective/packages/commit/abebcad))
+* **header:** update layout to have navigation on the left ([c9517cc](https://github.com/debtcollective/packages/commit/c9517cc))
+* **header:** use <slot /> API to improve flexibility ([e215c6d](https://github.com/debtcollective/packages/commit/e215c6d))
+
+
+
+
+
 ## [0.10.2](https://github.com/debtcollective/packages/compare/v0.10.1...v0.10.2) (2020-07-22)
@@ -8,0 +52,0 @@

dist/cjs/loader.cjs.js

@@ -5,8 +5,12 @@ 'use strict';
 
-const index = require('./index-d49680fd.js');
+const index = require('./index-2f891e81.js');
+const patch = require('./patch-eddb3357.js');
 
-const defineCustomElements = (win, options) => index.patchEsm().then(() => {
-  return index.bootstrapLazy([["dc-header.cjs",[[1,"dc-header",{"links":[1],"user":[32]}]]]], options);
-});
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patch.patchEsm().then(() => {
+  return index.bootstrapLazy([["dc-header_3.cjs",[[1,"dc-header",{"links":[1],"donateURL":[1,"donate-u-r-l"],"user":[32],"isMenuOpen":[32]},[[0,"toggleMenu","toggleMenuHandler"]]],[4,"dc-menu",{"open":[4]}],[0,"dc-user-items",{"user":[16]}]]]], options);
+  });
+};
 
 exports.defineCustomElements = defineCustomElements;

dist/cjs/web-header.cjs.js

 'use strict';
 
-const index = require('./index-d49680fd.js');
+const index = require('./index-2f891e81.js');
+const patch = require('./patch-eddb3357.js');
 
-index.patchBrowser().then(options => {
-  return index.bootstrapLazy([["dc-header.cjs",[[1,"dc-header",{"links":[1],"user":[32]}]]]], options);
+patch.patchBrowser().then(options => {
+  return index.bootstrapLazy([["dc-header_3.cjs",[[1,"dc-header",{"links":[1],"donateURL":[1,"donate-u-r-l"],"user":[32],"isMenuOpen":[32]},[[0,"toggleMenu","toggleMenuHandler"]]],[4,"dc-menu",{"open":[4]}],[0,"dc-user-items",{"user":[16]}]]]], options);
 });

dist/collection/collection-manifest.json

 {
   "entries": [
+    "./components/dc-header/dc-menu.js",
+    "./components/dc-header/dc-user-items.js",
     "./components/dc-header/dc-header.js"
@@ -7,4 +9,4 @@ ],
     "name": "@stencil/core",
-    "version": "1.12.7",
-    "typescriptVersion": "3.8.3"
+    "version": "1.16.5",
+    "typescriptVersion": "3.9.7"
   },
@@ -11,0 +13,0 @@ "collections": [],

dist/collection/components/dc-header/dc-header.js

@@ -1,4 +0,6 @@
-import { Component, Prop, State, h, Watch, getAssetPath } from "@stencil/core";
+import { Component, Prop, State, h, Watch, getAssetPath, Host, Listen } from "@stencil/core";
 import { syncCurrentUser } from "../../services/session";
-import { preffixCommunityURL, getAvatarURL, signupURL, loginURL, } from "../../utils/community";
+import "./dc-menu";
+import "./dc-user-items";
+import { loginURL } from "../../utils/community";
 export class Header {
@@ -10,6 +12,17 @@ constructor() {
         this._logo = "logo.png";
+        this._logoSmall = "logo-small.png";
     }
     linksDidChangeHandler(newValue) {
+        if (!newValue) {
+            this._links = [];
+            return;
+        }
         this._links = JSON.parse(newValue);
     }
+    toggleMenuHandler() {
+        this.toggleMenu();
+    }
+    toggleMenu() {
+        this.isMenuOpen = !this.isMenuOpen;
+    }
     async syncCurrentUser() {
@@ -25,12 +38,20 @@ const user = await syncCurrentUser(process.env.COMMUNITY_URL);
         const user = this.user;
-        return (h("header", { class: "header" },
-            h("a", { class: "logo-link", href: "/" },
-                h("img", { class: "logo", src: getAssetPath(`./assets/${this._logo}`), alt: "The Debtcollective" })),
-            h("nav", { class: "nav" },
-                this._links.map(({ text, href }) => (h("div", { class: "nav-item" },
-                    h("a", { class: "nav-link", href: href }, text)))),
-                h("div", { class: "session-items" }, user ? (h("a", { id: "current-user", href: preffixCommunityURL(`u/${user.username}`), target: "_blank" },
-                    h("img", { alt: "Profile picture", width: "32", height: "32", src: getAvatarURL(user), title: user.username, class: "avatar" }))) : (h("div", { class: "session-links" },
-                    h("a", { href: signupURL, class: "btn btn-session" }, "Sign up"),
-                    h("a", { href: loginURL, class: "btn btn-session" }, "Login")))))));
+        return (h(Host, null,
+            h("header", { class: "header" },
+                h("a", { class: "logo-link d-md-flex", href: "/" },
+                    h("img", { class: "logo", src: getAssetPath(`./assets/${this._logo}`), alt: "The Debtcollective" })),
+                h("button", { class: "btn-transparent logo-link d-md-none", onClick: this.toggleMenuHandler.bind(this) },
+                    h("img", { class: "logo", src: getAssetPath(`./assets/${this._logoSmall}`), alt: "The Debtcollective" }),
+                    h("span", { class: "material-icons ml-1" }, "keyboard_arrow_right")),
+                h("nav", { class: "nav" },
+                    h("slot", { name: "header" }, this._links.map(({ text, href }) => (h("div", { class: "nav-item d-md-flex" },
+                        h("a", { class: "nav-link", href: href }, text)))))),
+                h("div", { class: "session-items" }, user ? (h("dc-user-items", { user: user })) : (h("div", { class: "session-links" },
+                    h("a", { href: loginURL, class: "btn btn-outline" },
+                        h("span", { class: "d-md-flex" }, "Member"),
+                        "\u00A0Login"),
+                    h("a", { href: this.donateURL, class: "btn btn-primary" }, "Donate"))))),
+            h("dc-menu", { open: this.isMenuOpen },
+                h("slot", { name: "menu" }, this._links.map(({ text, href }) => (h("div", { class: "nav-item" },
+                    h("a", { class: "nav-link", href: href }, text))))))));
     }
@@ -63,6 +84,24 @@ static get is() { return "dc-header"; }
             "reflect": false
+        },
+        "donateURL": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Link to follow in order to prompt user to donate"
+            },
+            "attribute": "donate-u-r-l",
+            "reflect": false
         }
     }; }
     static get states() { return {
-        "user": {}
+        "user": {},
+        "isMenuOpen": {}
     }; }
@@ -73,2 +112,9 @@ static get watchers() { return [{
         }]; }
+    static get listeners() { return [{
+            "name": "toggleMenu",
+            "method": "toggleMenuHandler",
+            "target": undefined,
+            "capture": false,
+            "passive": false
+        }]; }
 }

dist/types/components.d.ts

@@ -11,2 +11,6 @@ /* eslint-disable */
         /**
+          * Link to follow in order to prompt user to donate
+         */
+        "donateURL": string;
+        /**
           * The links you need to display within the header this string needs to be JSON (able to JSON.parse)
@@ -16,2 +20,21 @@ */
     }
+    interface DcMenu {
+        /**
+          * Wether or not the mobile menu is displayed
+         */
+        "open": boolean;
+    }
+    interface DcUserItems {
+        /**
+          * An object with the user data. Follows Discourse structure as https://docs.discourse.org/#tag/Users/paths/~1users~1{username}.json/get
+         */
+        "user": {
+    id: number;
+    admin: boolean;
+    avatar_template: string;
+    username: string;
+    unread_notifications: number;
+    unread_high_priority_notifications: number;
+  };
+    }
 }
@@ -25,4 +48,18 @@ declare global {
     };
+    interface HTMLDcMenuElement extends Components.DcMenu, HTMLStencilElement {
+    }
+    var HTMLDcMenuElement: {
+        prototype: HTMLDcMenuElement;
+        new (): HTMLDcMenuElement;
+    };
+    interface HTMLDcUserItemsElement extends Components.DcUserItems, HTMLStencilElement {
+    }
+    var HTMLDcUserItemsElement: {
+        prototype: HTMLDcUserItemsElement;
+        new (): HTMLDcUserItemsElement;
+    };
     interface HTMLElementTagNameMap {
         "dc-header": HTMLDcHeaderElement;
+        "dc-menu": HTMLDcMenuElement;
+        "dc-user-items": HTMLDcUserItemsElement;
     }
@@ -33,2 +70,6 @@ }
         /**
+          * Link to follow in order to prompt user to donate
+         */
+        "donateURL"?: string;
+        /**
           * The links you need to display within the header this string needs to be JSON (able to JSON.parse)
@@ -38,4 +79,26 @@ */
     }
+    interface DcMenu {
+        "onToggleMenu"?: (event: CustomEvent<void>) => void;
+        /**
+          * Wether or not the mobile menu is displayed
+         */
+        "open"?: boolean;
+    }
+    interface DcUserItems {
+        /**
+          * An object with the user data. Follows Discourse structure as https://docs.discourse.org/#tag/Users/paths/~1users~1{username}.json/get
+         */
+        "user"?: {
+    id: number;
+    admin: boolean;
+    avatar_template: string;
+    username: string;
+    unread_notifications: number;
+    unread_high_priority_notifications: number;
+  };
+    }
     interface IntrinsicElements {
         "dc-header": DcHeader;
+        "dc-menu": DcMenu;
+        "dc-user-items": DcUserItems;
     }
@@ -48,4 +111,6 @@ }
             "dc-header": LocalJSX.DcHeader & JSXBase.HTMLAttributes<HTMLDcHeaderElement>;
+            "dc-menu": LocalJSX.DcMenu & JSXBase.HTMLAttributes<HTMLDcMenuElement>;
+            "dc-user-items": LocalJSX.DcUserItems & JSXBase.HTMLAttributes<HTMLDcUserItemsElement>;
         }
     }
 }

dist/types/components/dc-header/dc-header.d.ts

@@ -0,1 +1,3 @@
+import "./dc-menu";
+import "./dc-user-items";
 declare type User = {
@@ -6,2 +8,4 @@ id: number;
     username: string;
+    unread_notifications: number;
+    unread_high_priority_notifications: number;
 };
@@ -15,2 +19,6 @@ export declare class Header {
     /**
+     * Link to follow in order to prompt user to donate
+     */
+    donateURL: string;
+    /**
      * An object with the user data. Follows Discourse structure as
@@ -21,5 +29,10 @@ * https://docs.discourse.org/#tag/Users/paths/~1users~1{username}.json/get
     /**
+     * Wether or not the menu is displayed
+     */
+    isMenuOpen: boolean;
+    /**
      * Logo image
      */
     private _logo;
+    private _logoSmall;
     /**
@@ -30,2 +43,4 @@ * Host the value of "links" parsed to an actual Array
     linksDidChangeHandler(newValue: any): void;
+    toggleMenuHandler(): void;
+    toggleMenu(): void;
     syncCurrentUser(): Promise<void>;
@@ -32,0 +47,0 @@ componentWillLoad(): Promise<void>;

dist/types/stencil-public-runtime.d.ts

@@ -351,2 +351,11 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
     /**
+     * A `@Prop` or `@State` property changed and a rerender is about to be requested.
+     *
+     * Called multiple times throughout the life of
+     * the component as its properties change.
+     *
+     * componentShouldUpdate is not called on the first render.
+     */
+    componentShouldUpdate?(newVal: any, oldVal: any, propName: string): boolean | void;
+    /**
      * The component is about to update and re-render.
@@ -701,2 +710,3 @@ *
         open?: boolean;
+        onToggle?: (event: Event) => void;
     }
@@ -789,4 +799,4 @@ interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
         alt?: string;
-        autoCapitalize?: string;
-        autocapitalize?: string;
+        autoCapitalize?: any;
+        autocapitalize?: any;
         autoComplete?: string;
@@ -867,2 +877,3 @@ autocomplete?: string;
     interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
+        as?: string;
         href?: string;
@@ -1004,2 +1015,4 @@ hrefLang?: string;
         size?: number;
+        autoComplete?: string;
+        autocomplete?: string;
     }
@@ -1051,2 +1064,3 @@ interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
     interface ThHTMLAttributes<T> extends HTMLAttributes<T> {
+        abbr?: string;
         colSpan?: number;
@@ -1091,4 +1105,3 @@ headers?: string;
         lang?: string;
-        spellCheck?: boolean;
-        spellcheck?: boolean | string;
+        spellcheck?: 'true' | 'false' | any;
         style?: {
@@ -1116,4 +1129,4 @@ [key: string]: string | undefined;
         vocab?: string;
-        autoCapitalize?: string;
-        autocapitalize?: string;
+        autoCapitalize?: any;
+        autocapitalize?: any;
         autoCorrect?: string;
@@ -1302,4 +1315,4 @@ autocorrect?: string;
         'radius'?: number | string;
-        'ref-x'?: number | string;
-        'ref-y'?: number | string;
+        'refX'?: number | string;
+        'refY'?: number | string;
         'rendering-intent'?: number | string;
@@ -1405,2 +1418,3 @@ 'repeatCount'?: number | string;
         part?: string;
+        exportparts?: string;
         onCopy?: (event: ClipboardEvent) => void;
@@ -1420,2 +1434,6 @@ onCopyCapture?: (event: ClipboardEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
+        onFocusIn?: (event: FocusEvent) => void;
+        onFocusInCapture?: (event: FocusEvent) => void;
+        onFocusOut?: (event: FocusEvent) => void;
+        onFocusOutCapture?: (event: FocusEvent) => void;
         onBlur?: (event: FocusEvent) => void;
@@ -1422,0 +1440,0 @@ onBlurCapture?: (event: FocusEvent) => void;

dist/web-header.js

@@ -20,2 +20,3 @@
 
+  
   scriptElm = doc.createElement('script');
@@ -26,6 +27,6 @@ scriptElm.setAttribute('nomodule', '');
   scriptElm.setAttribute('data-stencil-namespace', 'web-header');
-  doc.head.appendChild(scriptElm);
-
+  doc.head.appendChild(scriptElm)
+  
   console.warn(warn.join('\n'));
 
 })(document);

dist/web-header/web-header.esm.js

@@ -1,1 +0,1 @@
-import{p as s,b as a}from"./p-6a0fd432.js";s().then(s=>a([["p-0153c580",[[1,"dc-header",{links:[1],user:[32]}]]]],s));
+import{b as e}from"./p-703aba10.js";import{p as n}from"./p-df50867d.js";n().then(n=>e([["p-9b44b63e",[[1,"dc-header",{links:[1],donateURL:[1,"donate-u-r-l"],user:[32],isMenuOpen:[32]},[[0,"toggleMenu","toggleMenuHandler"]]],[4,"dc-menu",{open:[4]}],[0,"dc-user-items",{user:[16]}]]]],n));

package.json

 {
   "name": "@debtcollective/dc-header-component",
-  "version": "0.10.2",
+  "version": "0.12.1",
   "description": "Stencil header component for debtcollective web apps",
@@ -28,5 +28,5 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@stencil/core": "1.12.7",
-    "@types/jest": "^25.2.1",
-    "@types/node": "^13.13.5",
+    "@stencil/core": "1.16.5",
+    "@types/jest": "25.2.1",
+    "@types/node": "13.13.5",
     "@types/puppeteer": "2.0.1",
@@ -42,3 +42,3 @@ "puppeteer": "2.1.1",
   "license": "MIT",
-  "gitHead": "64148b750be0924a627d21cebc9980ba11878efe"
+  "gitHead": "b6c98c594b88a301503620ffed9cbddad8e13813"
 }

readme.md

@@ -17,2 +17,4 @@ ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
 
+For header to have the dynamic variables you need to `cp .env.sample .env` then simple run.
+
 ```bash
@@ -23,2 +25,4 @@ npm install
 
+> In order to have a sense over the community session, you need to have the application running and make sure COMMUNITY_URL variable match the application *(is set to localhost port 3000 by default)*. Ultimately, you will need to allow CORS on the community app in that sense: Admin > Settings > CORS > add `http://lvh.me:3333`
+
 To build the component for production, run:
@@ -46,2 +50,29 @@
 
+You can render the default styles with links you pass as props like:
+
+```html
+<dc-header links='[{"href":"http://debtcollective.org/","text":"About us"}, {"href":"https://community.debtcollective.org/","text":"Community"}, {"href":"https://teespring.com/stores/debt-collective","text":"Store"}]'></dc-header>
+```
+
+Alternatively, you can choose to inject your own structure by doing something like:
+
+```html
+<dc-header>
+  <div slot="header">
+    <div class="nav-item d-md-flex">
+      <a class="nav-link" href='http://debtcollective.org/'>
+        About us
+      </a>
+    </div>
+  </div>
+  <div slot="menu">
+    <div class="nav-item">
+      <a class="nav-link" href='http://debtcollective.org/'>
+        About us (Just menu)
+      </a>
+    </div>
+  </div>
+</dc-header>
+```
+
 ### Script tag
@@ -48,0 +79,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

879435

increased by19.03%

Number of package files

87

increased by17.57%

Lines of code

11432

increased by23.63%

Number of lines in readme file

92

increased by50.82%

Worsened metrics

Number of low supply chain risk alerts

29

increased by11.54%

Number of medium supply chain risk alerts

26

increased by18.18%

No dependency changes