@cagovweb/cal-ds-banner - npm Package Compare versions

Comparing version 0.0.1-beta1 to 0.0.1-beta2

.html-data.json

@@ -7,3 +7,14 @@ {
       "description": "README.md",
-      "attributes": [],
+      "attributes": [
+        {
+          "name": "data-target",
+          "description": "a query for where this banner should be placed instead of top of BODY.",
+          "references": [
+            {
+              "name": "Reference - Eureka",
+              "url": "https://template.webstandards.ca.gov/"
+            }
+          ]
+        }
+      ],
 
@@ -10,0 +21,0 @@ "references": [

dist/index.js

@@ -226,5 +226,5 @@ var CssBaseStyleString = ":host{font-family:system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",\"Noto Sans\",\"Liberation Sans\",Arial,sans-serif;--gov-header:#071645;--brand-primary:#13394b;--brand-secondary:#0070a3;--banner-light:#d5dbde;--banner-dark:#09202b;--brand-hover-light:#3ca3d3;--brand-hover-dark:#246c8e;--background-primary-light:#d9d8cf;--background-secondary-light:#f5f3eb;--background-primary-dark:#43433f;--background-secondary-dark:#65645f;--action-primary:#fec335;--action-secondary:#fae2ad;--text-white:#fff;--grey:#ccc;--grey-text:#323232;--grey-background:#eee;--gutter-gap:1.674vw;--flow-space:1rem;--radius:1rem;--shadow:0.2rem 0.2rem 0.5rem 0 rgba(0 0 0 / 25%);--shadow-focus:0.1rem 0.1rem 0.25rem 0 rgba(0 0 0 / 10%);--shadow-active:0.2rem 0.2rem 0.5rem 0 rgba(0 0 0 / 60%);--font-size:1rem;--ratio:1.24;--s0:calc(var(--font-size) - 0.3rem) + 0.2vw;--st:calc(var(--s0) * var(--ratio));--base:calc(var(--st) * var(--ratio));--lt:calc(var(--base) * var(--ratio));--h6:calc(var(--s0) * var(--ratio));--h5:calc(var(--h6) * var(--ratio));--h4:calc(var(--h5) * var(--ratio));--h3:calc(var(--h4) * var(--ratio));--h2:calc(var(--h3) * var(--ratio));--h1:calc(var(--h2) * var(--ratio) * var(--ratio));}";
 
-var css = ".alert-section{background-color:#fdbc5b;border:none;min-height:2rem;}.alert-container{> p{margin-top:0;margin-bottom:0;font-size:1.4rem;a{color:#0057ad;text-decoration:underline;&:hover,&:focus{color:#20367c;text-decoration:none;}&:focus{outline:2px solid #0057ad;}}}> svg{width:1rem;height:1rem;enable-background:new 0 0 18 17.6;}@media (width >= 576px){max-width:576px!important;}@media (width >= 768px){max-width:768px!important;}@media (width >= 992px){max-width:992px!important;}@media (width >= 1200px){max-width:1200px!important;}@media (width >= 1280px){max-width:1280px!important;}display:flex;gap:5px;align-items:center;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px;padding-top:0.5rem;padding-bottom:0.5rem;width:100%;max-width:1280px;font-family:\"Noto Sans\",system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",sans-serif;}";
+var css = ":host > div{background-color:#fdbc5b;border:none;min-height:2rem;> div{display:flex;gap:0.3rem;align-items:center;margin:0 auto;padding:0.5rem 1rem;width:100%;max-width:1280px;font-family:\"Noto Sans\",system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",sans-serif;> p{margin:0;font-size:1.4rem;a{color:#0057ad;text-decoration:underline;&:hover,&:focus{color:#20367c;text-decoration:none;}&:focus{outline:2px solid #0057ad;}}}@media (width >= 576px){max-width:576px!important;}@media (width >= 768px){max-width:768px!important;}@media (width >= 992px){max-width:992px!important;}@media (width >= 1200px){max-width:1200px!important;}@media (width >= 1280px){max-width:1280px!important;}}}";
 
-var html = "<div class=\"alert-section\"> <div class=\"alert-container\"> <svg class=\"alert-icon-red\" aria-hidden=\"true\" version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 18 17.6\" xml:space=\"preserve\"> <style type=\"text/css\"> .st0{fill:url(#SVGID_1_);} </style> <g> <radialGradient id=\"SVGID_1_\" cx=\"7.6553\" cy=\"6.5485\" r=\"7.5719\" gradientUnits=\"userSpaceOnUse\"> <stop offset=\"0.4356\" style=\"stop-color:#FF0000\"/> <stop offset=\"0.8402\" style=\"stop-color:#AB0000\"/> </radialGradient> <circle class=\"st0\" cx=\"9\" cy=\"8.7\" r=\"8\"/> </g> </svg> <p></p> </div> </div> ";
+var html = "<div> <div> <svg aria-hidden=\"true\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 18 17.6\" style=\"width: 1rem; height: 1rem;\"> <g> <radialGradient id=\"SVGID_1_\" cx=\"7.6553\" cy=\"6.5485\" r=\"7.5719\" gradientUnits=\"userSpaceOnUse\"> <stop offset=\"0.4356\" style=\"stop-color:#FF0000\"/> <stop offset=\"0.8402\" style=\"stop-color:#AB0000\"/> </radialGradient> <circle style=\"fill:url(#SVGID_1_);\" cx=\"9\" cy=\"8.7\" r=\"8\"/> </g> </svg> <p></p> </div> </div> ";
 
@@ -235,3 +235,3 @@ // from
 
-class my_component extends cal_ds_base {
+class my extends cal_ds_base {
   /** @override */
@@ -242,3 +242,23 @@ static get tagName() {
 
+  /**
+   * @protected
+   * @override
+   */
+  static get observedAttributes() {
+    return ["data-target"];
+  }
+
   constructor() {
+    /**
+     * @param {string} name
+     */
+    const attributeChangedCallback = name => {
+      switch (name) {
+        case my.observedAttributes[0]: //"data-target":
+          _contentChanged();
+
+          break;
+      }
+    };
+
     const _contentChanged = () => {
@@ -258,4 +278,10 @@ if (this.UserTemplate && this.shadowRoot && this.HTMLTemplateString) {
 
-      //Move itself to the top
-      if (document.body.firstElementChild !== this) document.body.prepend(this);
+      const target = document.querySelector(
+        this.dataset.target || ":scope > body"
+      );
+      if (!target)
+        throw new Error(`Can't find data-target - ${this.dataset.target}`);
+
+      //Move itself to the target
+      if (target.firstElementChild !== this) target.prepend(this);
     };
@@ -267,3 +293,4 @@
       html,
-      connectedCallback: _contentChanged
+      connectedCallback: _contentChanged,
+      attributeChangedCallback
     });
@@ -298,3 +325,3 @@
 
-const my_bundle = [my_component];
+const my_bundle = [my];
 
@@ -301,0 +328,0 @@ for (const c of my_bundle) {

package.json

 {
   "name": "@cagovweb/cal-ds-banner",
-  "version": "0.0.1-beta1",
+  "version": "0.0.1-beta2",
   "description": "cal-ds-banner top banner",
@@ -38,3 +38,3 @@ "type": "module",
     "access": "public",
-    "tag": "beta"
+    "tag": "latest"
   },
@@ -41,0 +41,0 @@ "license": "ISC",

README.md

@@ -14,2 +14,14 @@ # `cal-ds-banner`
     </cal-ds-banner>
+
+    <cal-ds-banner data-target="header">
+      <template>
+        <p>Banner on the top of the HEADER</p>
+      </template>
+    </cal-ds-banner>
+
+    <cal-ds-banner data-target="header > span">
+      <template>
+        <p>Banner on the top of the first direct SPAN in HEADER</p>
+      </template>
+    </cal-ds-banner>
 ```

src/index.js

@@ -13,3 +13,3 @@ // from
 
-export default class extends cal_ds_base {
+export default class my extends cal_ds_base {
   /** @override */
@@ -20,3 +20,23 @@ static get tagName() {
 
+  /**
+   * @protected
+   * @override
+   */
+  static get observedAttributes() {
+    return ["data-target"];
+  }
+
   constructor() {
+    /**
+     * @param {string} name
+     */
+    const attributeChangedCallback = name => {
+      switch (name) {
+        case my.observedAttributes[0]: //"data-target":
+          _contentChanged();
+
+          break;
+      }
+    };
+
     const _contentChanged = () => {
@@ -36,4 +56,10 @@ if (this.UserTemplate && this.shadowRoot && this.HTMLTemplateString) {
 
-      //Move itself to the top
-      if (document.body.firstElementChild !== this) document.body.prepend(this);
+      const target = document.querySelector(
+        this.dataset.target || ":scope > body"
+      );
+      if (!target)
+        throw new Error(`Can't find data-target - ${this.dataset.target}`);
+
+      //Move itself to the target
+      if (target.firstElementChild !== this) target.prepend(this);
     };
@@ -45,3 +71,4 @@
       html,
-      connectedCallback: _contentChanged
+      connectedCallback: _contentChanged,
+      attributeChangedCallback
     });
@@ -48,0 +75,0 @@

No alert changes

Improved metrics

Total package byte prevSize

18269

increased by6.99%

Lines of code

464

increased by11%

Number of lines in readme file

27

increased by80%

No dependency changes