@ptcwebops/ptcw-design 0.5.6 → 0.5.8

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

@@ -1,22 +1,55 @@
 :host {
   display: block;
 }
-:host .ptc-checkbox icon-asset {
-  vertical-align: middle;
+:host .ptc-checkbox {
+  display: block;
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+  font-family: "Raleway";
+  font-style: normal;
+  color: var(--color-gray-10);
+  padding-left: var(--spacing-lg);
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-dense);
+}
+:host .ptc-checkbox input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+:host .ptc-checkbox .check {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 1.375rem;
+  width: 1.375rem;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-gray-07);
+  box-sizing: border-box;
+  border-radius: 0.4rem;
 }
-:host .ptc-checkbox .ptc-checkbox-label {
-  vertical-align: middle;
-  margin-left: 0.5rem;
+:host .ptc-checkbox .check .mark {
+  position: absolute;
+  transition: opacity ease-out 250ms;
+  opacity: 0;
+  left: 3px;
+  top: -2px;
+  width: 1.375rem;
+  height: 1.375rem;
 }
-:host .ptc-checkbox.checked .unchecked-icon {
-  display: none;
+:host .ptc-checkbox input:checked ~ .check {
+  background-color: #1F2024;
 }
-:host .ptc-checkbox.checked .checked-icon {
-  display: inline-block;
+:host .ptc-checkbox input:checked ~ .check .mark {
+  opacity: 1;
 }
-:host .ptc-checkbox.unchecked .unchecked-icon {
-  display: inline-block;
+:host .ptc-checkbox:hover input ~ .check {
+  background-color: #E4E7E9;
 }
-:host .ptc-checkbox.unchecked .checked-icon {
-  display: none;
+:host .ptc-checkbox:hover input:checked ~ .check {
+  background-color: #33353A;
 }

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

@@ -1,76 +1,114 @@
-import { Component, h, Host, Prop, Event, State } from '@stencil/core';
-export class PtcCheckbox {
-  constructor() {
-    this.checked = 'unchecked';
-    this.handleClick = () => {
-      if (this.checked == 'unchecked') {
-        this.checked = 'checked';
-      }
-      else {
-        this.checked = 'unchecked';
-      }
-    };
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, null,
-      h("div", { class: classMap, onClick: this.handleClick },
-        h("icon-asset", { type: "solid", size: "large", name: "check-square", class: "checked-icon" }),
-        h("icon-asset", { type: "solid", size: "large", name: "square", color: "white", class: "unchecked-icon" }),
-        h("span", { class: "ptc-checkbox-label" },
-          h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-checkbox']: true,
-      [this.checked]: true
-    };
-  }
-  static get is() { return "ptc-checkbox"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-checkbox.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-checkbox.css"]
-  }; }
-  static get properties() { return {
-    "checked": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'checked' | 'unchecked'",
-        "resolved": "\"checked\" | \"unchecked\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "checked",
-      "reflect": false,
-      "defaultValue": "'unchecked'"
-    }
-  }; }
-  static get states() { return {
-    "selectedItem": {}
-  }; }
-  static get events() { return [{
-      "method": "clickedItem",
-      "name": "clickedItem",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-}
+import { Component, h, Host, Prop, Event, Element } from '@stencil/core';
+import CheckIcon from '../../media/svg-imgs/check-mark.svg';
+export class PtcCheckbox {
+  constructor() {
+    this.checked = 'unchecked';
+    this.handleClick = (e) => {
+      let input = this.host.shadowRoot.querySelector('input');
+      let parameter = {
+        event: e,
+        sender: input,
+        value: this.value,
+        checked: this.checked
+      };
+      if (this.checked == 'unchecked') {
+        this.checked = 'checked';
+      }
+      else {
+        this.checked = 'unchecked';
+      }
+      this.checkedChanged.emit(parameter);
+    };
+  }
+  componentDidLoad() {
+    let input = this.host.shadowRoot.querySelector('input');
+    input.checked = this.checked == 'checked';
+  }
+  render() {
+    return (h(Host, null,
+      h("label", { class: "ptc-checkbox", onClick: (e) => this.handleClick(e) },
+        h("slot", null),
+        h("input", { type: "checkbox", name: this.inputName, value: this.value }),
+        h("span", { class: "check" },
+          h("span", { class: "mark", innerHTML: CheckIcon })))));
+  }
+  static get is() { return "ptc-checkbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-checkbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-checkbox.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'checked' | 'unchecked'",
+        "resolved": "\"checked\" | \"unchecked\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "'unchecked'"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "inputName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-name",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "checkedChanged",
+      "name": "checkedChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}

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

@@ -14,7 +14,6 @@
 }
 
 .content-wrapper {
-  padding: 3rem;
   font-family: Raleway;
   font-size: 16px;
   font-weight: 400;
@@ -36,4 +35,28 @@
 }
 .content-wrapper.x-large {
   box-shadow: var(--ptc-shadow-x-large);
+}
+.content-wrapper.spacing-xx-small {
+  padding: var(--ptc-element-spacing-01);
+}
+.content-wrapper.spacing-x-small {
+  padding: var(--ptc-element-spacing-02);
+}
+.content-wrapper.spacing-small {
+  padding: var(--ptc-element-spacing-03);
+}
+.content-wrapper.spacing-medium {
+  padding: var(--ptc-element-spacing-04);
+}
+.content-wrapper.spacing-large {
+  padding: var(--ptc-element-spacing-05);
+}
+.content-wrapper.spacing-x-large {
+  padding: var(--ptc-element-spacing-06);
+}
+.content-wrapper.spacing-xx-large {
+  padding: var(--ptc-element-spacing-07);
+}
+.content-wrapper.spacing-xxx-large {
+  padding: var(--ptc-element-spacing-08);
 }

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

@@ -1,98 +1,119 @@
-import { Component, h, Prop, Host } from '@stencil/core';
-export class PtcContainer {
-  constructor() {
-    /**
-     * Theme
-     */
-    this.backgroundColor = 'white';
-    this.elevation = 'small';
-    this.containerType = 'normal';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: this.getContainerClass() },
-      h("div", { class: classMap },
-        h("slot", null))));
-  }
-  getContainerClass() {
-    switch (this.containerType) {
-      case 'large':
-        return 'ptc-container-lg';
-      case 'none':
-        return undefined;
-      default:
-        return 'ptc-container';
-    }
-  }
-  getCssClassMap() {
-    return {
-      ['content-wrapper']: true,
-      [this.backgroundColor]: true,
-      [this.elevation]: true
-    };
-  }
-  static get is() { return "ptc-container"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-container.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-container.css"]
-  }; }
-  static get properties() { return {
-    "backgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'white' | 'gray'",
-        "resolved": "\"gray\" | \"white\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme"
-      },
-      "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "'white'"
-    },
-    "elevation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'x-small' | 'small' | 'medium' | 'large' | 'x-large'",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "elevation",
-      "reflect": false,
-      "defaultValue": "'small'"
-    },
-    "containerType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'normal' | 'large' | 'none'",
-        "resolved": "\"large\" | \"none\" | \"normal\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "container-type",
-      "reflect": false,
-      "defaultValue": "'normal'"
-    }
-  }; }
-}
+import { Component, h, Prop, Host } from '@stencil/core';
+export class PtcContainer {
+  constructor() {
+    /**
+     * Theme
+     */
+    this.backgroundColor = 'white';
+    this.elevation = 'small';
+    this.containerType = 'normal';
+    this.spacing = 'xxx-large';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: this.getContainerClass() },
+      h("div", { class: classMap },
+        h("slot", null))));
+  }
+  getContainerClass() {
+    switch (this.containerType) {
+      case 'large':
+        return 'ptc-container-lg';
+      case 'none':
+        return undefined;
+      default:
+        return 'ptc-container';
+    }
+  }
+  getCssClassMap() {
+    const spacing = `spacing-${this.spacing}`;
+    return {
+      ['content-wrapper']: true,
+      [this.backgroundColor]: true,
+      [this.elevation]: true,
+      [spacing]: true
+    };
+  }
+  static get is() { return "ptc-container"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-container.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-container.css"]
+  }; }
+  static get properties() { return {
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'white' | 'gray'",
+        "resolved": "\"gray\" | \"white\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme"
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "'white'"
+    },
+    "elevation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'x-small' | 'small' | 'medium' | 'large' | 'x-large'",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "elevation",
+      "reflect": false,
+      "defaultValue": "'small'"
+    },
+    "containerType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'normal' | 'large' | 'none'",
+        "resolved": "\"large\" | \"none\" | \"normal\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "container-type",
+      "reflect": false,
+      "defaultValue": "'normal'"
+    },
+    "spacing": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xxx-large' | 'xxx-large'",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-small\" | \"xxx-large\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "spacing",
+      "reflect": false,
+      "defaultValue": "'xxx-large'"
+    }
+  }; }
+}