@ptcwebops/ptcw-design 0.5.5 → 0.5.6

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

@@ -1,76 +1,76 @@
-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, 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": {}
+      }
+    }]; }
+}

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

@@ -1,16 +1,39 @@
+:host {
+  display: block;
+  position: relative;
+}
+
 .white {
-  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.24);
   border-radius: 4px;
-  background: #FFFFFF;
-  margin-top: 5rem;
+  background-color: var(--color-white);
+}
+
+.gray {
+  border-radius: 4px;
+  background-color: var(--color-white-gray);
 }
 
-div {
-  padding: 1rem;
+.content-wrapper {
+  padding: 3rem;
   font-family: Raleway;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
-  letter-spacing: 0em;
+  letter-spacing: 0;
   text-align: left;
+}
+.content-wrapper.x-small {
+  box-shadow: var(--ptc-shadow-x-small);
+}
+.content-wrapper.small {
+  box-shadow: var(--ptc-shadow-small);
+}
+.content-wrapper.medium {
+  box-shadow: var(--ptc-shadow-medium);
+}
+.content-wrapper.large {
+  box-shadow: var(--ptc-shadow-large);
+}
+.content-wrapper.x-large {
+  box-shadow: var(--ptc-shadow-x-large);
 }

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

@@ -1,49 +1,98 @@
-import { Component, h, Prop, Host } from '@stencil/core';
-export class PtcContainer {
-  constructor() {
-    /**
-     * Theme
-     */
-    this.backgroundColor = 'white';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap },
-      h("div", { class: "white" },
-        h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-container']: true,
-      [this.backgroundColor]: 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'"
-    }
-  }; }
-}
+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'"
+    }
+  }; }
+}