@ptcwebops/ptcw-design 0.0.4 → 0.0.6

package/dist/collection/components/list-item/list-item.js

@@ -0,0 +1,63 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class ListItem {
+  constructor() {
+    this.listType = 'para-list';
+    this.linkHref = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      h("li", null, this.linkHref ? (h("a", Object.assign({}, (this.linkHref ? { href: this.linkHref } : {})),
+        h("slot", null))) : (h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.listType]: true,
+    };
+  }
+  static get is() { return "list-item"; }
+  static get originalStyleUrls() { return {
+    "$": ["list-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["list-item.css"]
+  }; }
+  static get properties() { return {
+    "listType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'link-primary' | 'link-sub' | 'icon' | 'para-list'",
+        "resolved": "\"icon\" | \"link-primary\" | \"link-sub\" | \"para-list\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "list-type",
+      "reflect": false,
+      "defaultValue": "'para-list'"
+    },
+    "linkHref": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "link-href",
+      "reflect": false,
+      "defaultValue": "undefined"
+    }
+  }; }
+}

package/dist/collection/components/ptc-button/ptc-button.css

@@ -1,177 +1,76 @@
-:host {
-  display: block;
-  box-sizing: border-box;
-}
-
-:host([disabled]) {
+button:disabled {
   pointer-events: none;
+  opacity: 0.6;
 }
 
-@keyframes gradient {
-  0% {
-    background-position: 0%;
-  }
-  100% {
-    background-position: 100%;
-  }
-}
 button {
   background-color: var(--color-primary-uigrey);
   display: inline-block;
   border-style: solid;
-  border-width: 2.5px;
+  border-width: 1px;
   white-space: normal;
   position: relative;
-  /* -webkit-backface-visibility: hidden; */
-  transition: box-shadow 0.4s cubic-bezier(0, 0, 0.23, 1);
-  text-transform: uppercase;
   text-decoration: none;
   cursor: pointer;
+  padding: 9.4px 17.5px;
+  border-radius: 3px;
 }
-button.large {
-  padding: 15px 28px;
-}
-button.small {
-  padding: 10px 20px;
-}
-button.round {
-  border-radius: var(--ptc-border-radius-medium);
-}
-button.icon svg, button.icon-right svg, button.icon-down svg {
+button.animation-right svg, button.animation-down svg {
   transition: all ease-out 0.25s;
   position: relative;
-  top: 4px;
 }
-button:hover.icon-right svg {
+button:hover.animation-right svg {
   transform: translateX(var(--ptc-element-spacing-02));
 }
-button:hover.icon-down svg {
+button:hover.animation-down svg {
   transform: translateY(var(--ptc-element-spacing-02));
 }
 button span {
-  font-family: "Rajdhani", sans-serif;
-  font-size: 19px;
+  font-size: var(--ptc-font-size-small);
   font-weight: bold;
-  letter-spacing: var(--ptc-letter-spacing-normal);
-  text-align: center;
-  position: relative;
-  z-index: 2;
+  line-height: 0.86;
 }
 
-.offwhite {
-  box-shadow: 0 0 25.8px 3.2px rgba(0, 0, 0, 0.5);
-  border: solid 2.5px var(--color-primary-uigrey);
-  background-image: linear-gradient(to right, #ffffff, #d3d3d3, #e5e5e5);
-}
-.offwhite:hover:after {
-  opacity: 1;
-}
-.offwhite:after {
-  position: absolute;
-  content: "";
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background-image: linear-gradient(to right, #e5e5e5, #d3d3d3, #ffffff);
-  opacity: 0;
-  transition: opacity 0.6s cubic-bezier(0, 0, 0.23, 1);
-}
-.offwhite:hover {
-  box-shadow: 0 0 49px 6.1px rgba(0, 0, 0, 0.55);
-}
-.offwhite span {
-  color: var(--color-primary-uigrey);
+.icon-left svg {
+  margin-right: var(--ptc-element-spacing-01);
 }
 
-.neon {
-  background-color: var(--color-black-100);
-  border: 0px;
-  position: relative;
-  -webkit-box-shadow: 0 0 49px 0 rgba(116, 195, 77, 0.35);
-  box-shadow: 0 0 49px 0 rgba(116, 195, 77, 0.35);
-}
-.neon:hover {
-  -webkit-box-shadow: 0 0 49px 0 rgba(116, 195, 77, 0.6);
-  box-shadow: 0 0 49px 0 rgba(116, 195, 77, 0.6);
-}
-.neon:before {
-  content: "";
-  position: absolute;
-  top: calc(-1 * 2.5px);
-  left: calc(-1 * 3px);
-  width: calc(100% + 2 * 3px);
-  height: calc(100% + 2 * 2.5px);
-  background: linear-gradient(to right, var(--color-secondary-turquoiseblue), var(--color-secondary-turtlegreen), var(--color-secondary-turtlegreen), var(--color-secondary-turquoiseblue));
-  z-index: -1;
-  background-size: 200% 200%;
-  border-radius: 4px;
-}
-.neon:hover:before {
-  -webkit-animation: gradient 0.6s cubic-bezier(0, 0, 0.23, 1) forwards 1;
-  animation: gradient 0.6s cubic-bezier(0, 0, 0.23, 1) forwards 1;
-}
-.neon span {
-  color: var(--color-white);
+.icon-right svg {
+  margin-left: var(--ptc-element-spacing-01);
 }
 
 .blackgrey {
-  box-shadow: 0 0 25.8px 3.2px rgba(0, 0, 0, 0.5);
-  border: solid 2.5px var(--color-primary-uigrey);
-  background-image: linear-gradient(to left, var(--color-primary-uigrey), var(--color-black));
-}
-.blackgrey:after {
-  position: absolute;
-  content: "";
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-primary-uigrey);
-  background-image: linear-gradient(to left, var(--color-black), var(--color-primary-uigrey));
-  opacity: 0;
-  transition: opacity 0.6s cubic-bezier(0, 0, 0.23, 1);
-  border-radius: 4px;
+  box-shadow: var(--ptc-shadow-x-small);
+  border: solid 1px var(--color-primary-uigrey);
+  background-image: linear-gradient(285deg, var(--color-primary-uigrey) 155%, #6e717c 62%);
 }
 .blackgrey:hover {
-  box-shadow: 0 0 49px 6.1px rgba(0, 0, 0, 0.55);
-}
-.blackgrey:hover:after {
-  opacity: 1;
+  box-shadow: var(--ptc-shadow-x-large);
 }
 .blackgrey span {
-  color: #ffffff;
+  color: var(--color-white);
 }
 
 .turtlegreen {
-  box-shadow: 0 0 25.8px 3.2px rgba(0, 0, 0, 0.5);
-  border: solid 2.5px var(--color-secondary-tutlegreen-dark);
-  background-image: linear-gradient(to right, var(--color-secondary-turtlegreen), var(--color-secondary-tutlegreen-dark));
-}
-.turtlegreen:after {
-  position: absolute;
-  content: "";
-  top: -1px;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 103%;
-  background-image: linear-gradient(to right, var(--color-secondary-tutlegreen-dark), var(--color-secondary-turtlegreen));
-  opacity: 0;
-  transition: opacity 0.6s cubic-bezier(0, 0, 0.23, 1);
-  border-radius: 2px;
+  box-shadow: var(--ptc-shadow-x-small);
+  border: solid 1px #5bb73b;
+  background-image: linear-gradient(285deg, #5bb73b 155%, #178642 62%);
 }
 .turtlegreen:hover {
-  box-shadow: 0 0 49px 6.1px rgba(0, 0, 0, 0.55);
-}
-.turtlegreen:hover:after {
-  opacity: 1;
+  box-shadow: var(--ptc-shadow-x-large);
 }
 .turtlegreen span {
   color: var(--color-white);
+}
+
+.offwhite {
+  box-shadow: var(--ptc-shadow-x-small);
+  border: solid 1px var(--color-primary-uigrey);
+  background-image: linear-gradient(to right, #ffffff, #d3d3d3, #e5e5e5);
+}
+.offwhite:hover {
+  box-shadow: var(--ptc-shadow-x-large);
+}
+.offwhite span {
+  color: var(--color-primary-uigrey);
 }

package/dist/collection/components/ptc-button/ptc-button.js

@@ -1,4 +1,4 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, Prop, h, Event, Host } from '@stencil/core';
 export class PtcButton {
   constructor() {
     /**
@@ -10,30 +10,30 @@ export class PtcButton {
      */
     this.color = 'blackgrey';
     /**
-     * Button shape
-     */
-    this.shape = 'round';
-    /**
-     * Button Size
+     * Icon Animation
      */
-    this.size = 'large';
+    this.iconAnimation = '';
     /**
-     * Icon Animation
+     * Icon Position
      */
-    this.icon = '';
+    this.iconPosition = 'icon-right';
+  }
+  clickEventHandler() {
+    this.clickEvent.emit();
+    console.log('click!');
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h("button", { type: this.type, class: classMap, disabled: this.disabled },
-      h("span", null,
-        h("slot", null))));
+    return (h(Host, null,
+      h("button", { type: this.type, class: classMap, disabled: this.disabled, onClick: this.clickEventHandler.bind(this) },
+        h("span", null,
+          h("slot", null)))));
   }
   getCssClassMap() {
     return {
       [this.color]: true,
-      [this.size]: true,
-      [this.shape]: true,
-      [this.icon]: true,
+      [this.iconAnimation]: true,
+      [this.iconPosition]: true,
     };
   }
   static get is() { return "ptc-button"; }
@@ -48,12 +48,12 @@ export class PtcButton {
       "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
+        "original": "boolean | undefined",
         "resolved": "boolean",
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Disabled button"
@@ -83,7 +83,7 @@ export class PtcButton {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'offwhite' | 'blackgrey' | 'turtlegreen'| 'neon'",
+        "original": "'offwhite' | 'blackgrey' | 'turtlegreen' | 'neon'",
         "resolved": "\"blackgrey\" | \"neon\" | \"offwhite\" | \"turtlegreen\"",
         "references": {}
       },
@@ -97,59 +97,57 @@ export class PtcButton {
       "reflect": false,
       "defaultValue": "'blackgrey'"
     },
-    "shape": {
+    "iconAnimation": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'square' | 'round'",
-        "resolved": "\"round\" | \"square\"",
+        "original": "'animation-right' | 'animation-down' | ''",
+        "resolved": "\"\" | \"animation-down\" | \"animation-right\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Button shape"
+        "text": "Icon Animation"
       },
-      "attribute": "shape",
+      "attribute": "icon-animation",
       "reflect": false,
-      "defaultValue": "'round'"
+      "defaultValue": "''"
     },
-    "size": {
+    "iconPosition": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'small' | 'large'",
-        "resolved": "\"large\" | \"small\"",
+        "original": "'icon-left' | 'icon-right'",
+        "resolved": "\"icon-left\" | \"icon-right\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Button Size"
+        "text": "Icon Position"
       },
-      "attribute": "size",
+      "attribute": "icon-position",
       "reflect": false,
-      "defaultValue": "'large'"
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'icon-right' | 'icon-down' | 'icon' | ''",
-        "resolved": "\"\" | \"icon\" | \"icon-down\" | \"icon-right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
+      "defaultValue": "'icon-right'"
+    }
+  }; }
+  static get events() { return [{
+      "method": "clickEvent",
+      "name": "clickEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Icon Animation"
+        "text": "Emitted when the button has focus."
       },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "''"
-    }
-  }; }
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
 }