@chopsui/chops-header - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

chops-header.js

@@ -1,3 +0,7 @@
-import {LitElement, html} from '@polymer/lit-element/lit-element.js';
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
 
+import {LitElement, html} from 'lit-element/lit-element.js';
+
 export class ChopsHeader extends LitElement {
@@ -10,3 +14,2 @@ constructor() {
 
-
   static get properties() {
@@ -22,2 +25,14 @@ return {
       },
+      /* URL for the image location of the application's logo. No logo is
+       * shown if this is not specified. */
+      logoSrc: {
+        type: String,
+      },
+      // TODO(zhangtiff): Also make the :host element extend the "header"
+      // tag once browsers implement extending native elements with web
+      // components.
+      role: {
+        type: String,
+        reflect: true,
+      },
     };
@@ -28,13 +43,8 @@ }
     return html`
-      <link
-        href="https://fonts.googleapis.com/css?family=Roboto"
-        rel="stylesheet"
-      >
       <style>
         :host {
+          color: var(--chops-header-text-color);
           box-sizing: border-box;
-          position: fixed;
-          background: white;
-          font-family: 'Roboto', sans-serif;
-          font-size: 16px;
+          background: hsl(221, 67%, 92%);
+          font-size: 14px;
           width: 100%;
@@ -47,8 +57,5 @@ height: 50px;
           z-index: 100;
-          border-bottom: 1px solid hsl(0, 0%, 88%);
         }
-        ::slotted(img) {
-          max-height: 100%;
-        }
         a {
+          color: var(--chops-header-text-color);
           text-decoration: none;
@@ -59,25 +66,54 @@ }
         }
-        .header-section {
-          padding: 0 16px;
-          height: 100%;
+        #headerTitle {
+          font-size: 18px;
           display: flex;
           align-items: center;
         }
-        #login {
-          align-self: flex-end;
+        #headerTitle img {
+          height: 32px;
+          width: 32px;
+          font-size: 10px;
+          overflow: hidden;
+          margin: 0;
         }
-        #title {
-          font-size: 20px;
+        #headerTitle small {
+          font-size: 14px;
+        }
+        #headerTitleText {
           display: flex;
-          align-items: center;
+          align-items: baseline;
+        }
+        #headerTitleTextMain {
           padding: 0 8px;
-          height: 100%;
         }
+        .header-section {
+          padding: 0.5em 16px;
+          display: flex;
+          align-items: center;
+        }
+        @media (max-width: 840px) {
+          .header-section {
+            font-size: 0.8em;
+            min-width: 10%;
+            text-align: left;
+          }
+        }
       </style>
       <div class="header-section">
-        <slot name="hamburger"></slot>
-        <slot name="logo"></slot>
-        <a id="title" href="${this.homeUrl}">
-          ${this.appTitle}
-        </a>
+        <slot name="before-header"></slot>
+        <div id="headerTitle">
+          ${this.logoSrc ? html`
+            <a href="/">
+              <img src=${this.logoSrc} alt="${this.appTitle} Logo" title="${this.appTitle} Logo">
+            </a>
+          ` : ''}
+          <span id="headerTitleText">
+            <a id="headerTitleTextMain" href="/">
+              ${this.appTitle}
+            </a>
+            <small>
+              <slot name="subheader"></slot>
+            </small>
+          </span>
+        </div>
       </div>
@@ -87,5 +123,2 @@ <div class="header-section">
       </div>
-      <div id="login" class="header-section">
-        <slot name="login"></slot>
-      </div>
     `;
@@ -92,0 +125,0 @@ }

package.json

 {
   "name": "@chopsui/chops-header",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "A shared header element for Chops.",
-  "author": "Chrome Operations team",
-  "license": "ISC"
+  "author": "The Chromium Authors",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "https://chromium.googlesource.com/infra/infra/crdx/chopsui-npm.git"
+  },
+  "dependencies": {
+    "lit-element": "^2.0.0"
+  },
+  "gitHead": "40fdff3d24acd2a83654a509aae5b144983bb0e4"
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4330

increased by93.39%

Number of package files

3

increased by50%

Lines of code

140

increased by66.67%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlit-element@^2.0.0

• + Addedlit-element@2.5.1(transitive)

• + Addedlit-html@1.4.1(transitive)