@myuw-web-components/myuw-card - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

dist/myuw-card.js

@@ -215,2 +215,5 @@ var MyUWCard = (function (exports) {
           }
+          p {
+            margin-bottom: 20px;
+          }
           .warn {
@@ -244,2 +247,80 @@ color: #c5050c;
 
+  class MyUWFabLink extends HTMLElement {
+    static get elementName() {
+      return "myuw-fab-link";
+    }
+
+    static get template() {
+      if (this._template === undefined) {
+        this._template = document.createElement("template");
+        this._template.innerHTML = `
+        <style>
+          div {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            max-width: 100px;
+          }
+          a {
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            background-color: var(--myuw-fab-color, #0479a8);
+            margin-bottom: 4px;
+          }
+          a:hover {
+            background-color: var(--myuw-fab-color-hover, #034e6c);
+          }
+          a:not([disabled]) {
+            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+          }
+          img {
+            width: 24px;
+            height: 24px;
+            position: relative;
+            top: 20%;
+            left: 20%;
+            filter: invert(1);
+            opacity: 0.87;
+          }
+          p {
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            margin-top: 0px;
+            margin-bottom: 10px;
+            padding: 3px 8px;
+            text-align: center;
+          }
+        </style>
+
+        <div>
+          <a id="fab-link" href="#" target="_blank" rel="noopener noreferrer">
+            <img src="https://my.wisc.edu/images/widgetIcons/canvas-logo.svg">
+          </a>
+          <p><slot></slot></p>
+        </div>
+      `;
+      }
+
+      return this._template;
+    }
+
+    constructor() {
+      super();
+      this.attachShadow({
+        mode: "open"
+      });
+      this.shadowRoot.append(MyUWFabLink.template.content.cloneNode(true));
+      this.shadowRoot.getElementById("fab-link").href = this.href;
+    }
+
+    get href() {
+      return this.getAttribute("href") || "#";
+    }
+
+  }
+  window.customElements.define(MyUWFabLink.elementName, MyUWFabLink);
+
   class MyUWIconLink extends HTMLElement {
@@ -311,2 +392,40 @@ static get elementName() {
 
+  class MyUWLinkList extends HTMLElement {
+    static get elementName() {
+      return "myuw-link-list";
+    }
+
+    static get template() {
+      if (this._template === undefined) {
+        this._template = document.createElement("template");
+        this._template.innerHTML = `
+        <style>
+          :host {
+            display: flex;
+            flex: 1;
+            justify-content: space-evenly;
+            align-items: flex-start;
+          }
+          ::slotted(myuw-fab-link) {
+          }
+        </style>
+
+        <slot></slot>
+      `;
+      }
+
+      return this._template;
+    }
+
+    constructor() {
+      super();
+      this.attachShadow({
+        mode: "open"
+      });
+      this.shadowRoot.appendChild(MyUWLinkList.template.content.cloneNode(true));
+    }
+
+  }
+  window.customElements.define(MyUWLinkList.elementName, MyUWLinkList);
+
   exports.MyUWCardContent = MyUWCardContent;
@@ -317,3 +436,5 @@ exports.MyUWCardFooter = MyUWCardFooter;
   exports.MyUWCardMessage = MyUWCardMessage;
+  exports.MyUWFabLink = MyUWFabLink;
   exports.MyUWIconLink = MyUWIconLink;
+  exports.MyUWLinkList = MyUWLinkList;
 
@@ -320,0 +441,0 @@ return exports;

dist/myuw-card.min.js

@@ -99,2 +99,5 @@ var MyUWCard=function(a){'use strict';class b extends HTMLElement{static get elementName(){return"myuw-card-content"}static get template(){return void 0===this._template&&(this._template=document.createElement("template"),this._template.innerHTML=`
           }
+          p {
+            margin-bottom: 20px;
+          }
           .warn {
@@ -105,4 +108,52 @@ color: #c5050c;
         <p id="message"><slot></slot></p>
-      `),this._template}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(f.template.content.cloneNode(!0));const a=this.shadowRoot.getElementById("message");a.className=this.variant}get variant(){return this.getAttribute("variant")||""}}window.customElements.define(f.elementName,f);class g extends HTMLElement{static get elementName(){return"myuw-icon-link"}static get template(){return void 0===this._template&&(this._template=document.createElement("template"),this._template.innerHTML=`
+      `),this._template}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(f.template.content.cloneNode(!0));const a=this.shadowRoot.getElementById("message");a.className=this.variant}get variant(){return this.getAttribute("variant")||""}}window.customElements.define(f.elementName,f);class g extends HTMLElement{static get elementName(){return"myuw-fab-link"}static get template(){return void 0===this._template&&(this._template=document.createElement("template"),this._template.innerHTML=`
         <style>
+          div {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            max-width: 100px;
+          }
+          a {
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            background-color: var(--myuw-fab-color, #0479a8);
+            margin-bottom: 4px;
+          }
+          a:hover {
+            background-color: var(--myuw-fab-color-hover, #034e6c);
+          }
+          a:not([disabled]) {
+            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+          }
+          img {
+            width: 24px;
+            height: 24px;
+            position: relative;
+            top: 20%;
+            left: 20%;
+            filter: invert(1);
+            opacity: 0.87;
+          }
+          p {
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            margin-top: 0px;
+            margin-bottom: 10px;
+            padding: 3px 8px;
+            text-align: center;
+          }
+        </style>
+
+        <div>
+          <a id="fab-link" href="#" target="_blank" rel="noopener noreferrer">
+            <img src="https://my.wisc.edu/images/widgetIcons/canvas-logo.svg">
+          </a>
+          <p><slot></slot></p>
+        </div>
+      `),this._template}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.append(g.template.content.cloneNode(!0)),this.shadowRoot.getElementById("fab-link").href=this.href}get href(){return this.getAttribute("href")||"#"}}window.customElements.define(g.elementName,g);class h extends HTMLElement{static get elementName(){return"myuw-icon-link"}static get template(){return void 0===this._template&&(this._template=document.createElement("template"),this._template.innerHTML=`
+        <style>
           :host {
@@ -142,2 +193,15 @@ flex: 1;
         </a>
-      `),this._template}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(g.template.content.cloneNode(!0)),this.shadowRoot.getElementById("link").href=this.href}get href(){return this.getAttribute("href")||"#"}}return window.customElements.define(g.elementName,g),a.MyUWCardContent=b,a.MyUWCardFooter=c,a.MyUWCardFrame=e,a.MyUWCardHeader=d,a.MyUWCardMessage=f,a.MyUWIconLink=g,a}({});
+      `),this._template}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(h.template.content.cloneNode(!0)),this.shadowRoot.getElementById("link").href=this.href}get href(){return this.getAttribute("href")||"#"}}window.customElements.define(h.elementName,h);class i extends HTMLElement{static get elementName(){return"myuw-link-list"}static get template(){return void 0===this._template&&(this._template=document.createElement("template"),this._template.innerHTML=`
+        <style>
+          :host {
+            display: flex;
+            flex: 1;
+            justify-content: space-evenly;
+            align-items: flex-start;
+          }
+          ::slotted(myuw-fab-link) {
+          }
+        </style>
+
+        <slot></slot>
+      `),this._template}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(i.template.content.cloneNode(!0))}}return window.customElements.define(i.elementName,i),a.MyUWCardContent=b,a.MyUWCardFooter=c,a.MyUWCardFrame=e,a.MyUWCardHeader=d,a.MyUWCardMessage=f,a.MyUWFabLink=g,a.MyUWIconLink=h,a.MyUWLinkList=i,a}({});

package.json

 {
   "name": "@myuw-web-components/myuw-card",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "",
@@ -5,0 +5,0 @@ "module": "dist/myuw-card.min.mjs",

README.md

@@ -63,2 +63,40 @@ # myuw-card
 
+#### List of links with message
+
+```html
+<myuw-card-content>
+  <myuw-card-message variant="warn">
+    You need to click these buttons!
+  </myuw-card-message>
+  <myuw-link-list>
+    <myuw-fab-link href="https://www.google.com">Deposit money</myuw-fab-link>
+    <myuw-fab-link href="https://www.google.com">Report lost card</myuw-fab-link>
+  </myuw-link-list>
+</myuw-card-content>
+```
+
+#### Two rows of list of links
+
+```html
+<myuw-card-content>
+  <myuw-link-list>
+    <myuw-fab-link href="https://www.google.com">Jump around</myuw-fab-link>
+    <myuw-fab-link href="https://www.google.com">Sit on Terrace</myuw-fab-link>
+  </myuw-link-list>
+  <myuw-link-list>
+    <myuw-fab-link href="https://www.google.com">Deposit money</myuw-fab-link>
+    <myuw-fab-link href="https://www.google.com">Report lost card</myuw-fab-link>
+  </myuw-link-list>
+</myuw-card-content>
+```
+
+### Customization
+
+The following CSS variables are defined for customization:
+
+| Variable               | Description                             | Default |
+|------------------------|-----------------------------------------|---------|
+|`--myuw-fab-color`      |FAB button background color              |`#0479a8`|
+|`--myuw-fab-color-hover`|FAB button background color when hovering|`#034e6c`|
+
 ## Contributing
@@ -65,0 +103,0 @@

No alert changes

Improved metrics

Total package byte prevSize

56916

increased by27.59%

Lines of code

1177

increased by41.3%

Number of lines in readme file

137

increased by38.38%

No dependency changes