@ptcwebops/ptcw-design 0.0.3 → 0.0.5

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

@@ -0,0 +1,44 @@
+import { Component, Prop, Host, h } from '@stencil/core';
+export class PtcPicture {
+  constructor() {
+    this.lazy = 'lazy';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      h("picture", null,
+        h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.lazy]: true,
+    };
+  }
+  static get is() { return "ptc-picture"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-picture.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-picture.css"]
+  }; }
+  static get properties() { return {
+    "lazy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'lazy' | 'eager'",
+        "resolved": "\"eager\" | \"lazy\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "lazy",
+      "reflect": false,
+      "defaultValue": "'lazy'"
+    }
+  }; }
+}

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

@@ -0,0 +1,307 @@
+:host {
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+	background: transparent;
+	border: 0;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
+	position: relative;
+	display: block;
+	width: 12px;
+	min-width: 12px;
+	height: 12px
+}
+
+@media (min-width: 36em) {
+	:host {
+		width: 16px;
+		min-width: 16px;
+		height: 16px
+	}
+}
+
+:host(.ptc-spacer-horizontal) {
+	display: inline-block;
+	height: 100% !important
+}
+
+:host(.ptc-spacer-horizontal.xx-small) {
+	width: 4px;
+	min-width: 4px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.xx-small) {
+		width: 4px;
+		min-width: 4px
+	}
+}
+
+:host(.ptc-spacer-horizontal.x-small) {
+	width: 4px;
+	min-width: 4px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.x-small) {
+		width: 8px;
+		min-width: 8px
+	}
+}
+
+:host(.ptc-spacer-horizontal.small) {
+	width: 8px;
+	min-width: 8px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.small) {
+		width: 12px;
+		min-width: 12px
+	}
+}
+
+:host(.ptc-spacer-horizontal.medium) {
+	height: 100%
+}
+
+:host(.ptc-spacer-horizontal.large) {
+	width: 16px;
+	min-width: 16px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.large) {
+		width: 20px;
+		min-width: 20px
+	}
+}
+
+:host(.ptc-spacer-horizontal.x-large) {
+	width: 20px;
+	min-width: 20px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.x-large) {
+		width: 28px;
+		min-width: 28px
+	}
+}
+
+:host(.ptc-spacer-horizontal.xx-large) {
+	width: 28px;
+	min-width: 28px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.xx-large) {
+		width: 36px;
+		min-width: 36px
+	}
+}
+
+:host(.ptc-spacer-horizontal.xxx-large) {
+	width: 36px;
+	min-width: 36px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.xxx-large) {
+		width: 48px;
+		min-width: 48px
+	}
+}
+
+:host(.ptc-spacer-horizontal.xxxx-large) {
+	width: 48px;
+	min-width: 48px;
+	height: 100%
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-horizontal.xxxx-large) {
+		width: 72px;
+		min-width: 72px
+	}
+}
+
+:host(.ptc-spacer-vertical.xx-small) {
+	width: 100%;
+	height: 4px;
+	min-height: 4px
+}
+
+:host(.ptc-spacer-vertical.x-small) {
+	width: 100%;
+	height: 4px;
+	min-height: 4px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.x-small) {
+		height: 8px;
+		min-height: 8px
+	}
+}
+
+:host(.ptc-spacer-vertical.small) {
+	width: 100%;
+	height: 8px;
+	min-height: 8px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.small) {
+		height: 12px;
+		min-height: 12px
+	}
+}
+
+:host(.ptc-spacer-vertical.medium) {
+	width: 100%
+}
+
+:host(.ptc-spacer-vertical.large) {
+	width: 100%;
+	height: 16px;
+	min-height: 16px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.large) {
+		height: 20px;
+		min-height: 20px
+	}
+}
+
+:host(.ptc-spacer-vertical.x-large) {
+	width: 100%;
+	height: 20px;
+	min-height: 20px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.x-large) {
+		height: 28px;
+		min-height: 28px
+	}
+}
+
+:host(.ptc-spacer-vertical.xx-large) {
+	width: 100%;
+	height: 28px;
+	min-height: 28px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.xx-large) {
+		height: 36px;
+		min-height: 36px
+	}
+}
+
+:host(.ptc-spacer-vertical.xxx-large) {
+	width: 100%;
+	height: 36px;
+	min-height: 36px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.xxx-large) {
+		height: 48px;
+		min-height: 48px
+	}
+}
+
+:host(.ptc-spacer-vertical.xxxx-large) {
+	width: 100%;
+	height: 48px;
+	min-height: 48px
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-vertical.xxxx-large) {
+		height: 72px;
+		min-height: 72px
+	}
+}
+
+:host(.ptc-spacer-xx-small) {
+	display: none
+}
+
+@media (max-width: 22.5em) {
+	:host(.ptc-spacer-xx-small) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-x-small) {
+	display: none
+}
+
+@media (max-width: 35.9375em) {
+	:host(.ptc-spacer-x-small) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-small) {
+	display: none
+}
+
+@media (min-width: 36em) {
+	:host(.ptc-spacer-small) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-medium) {
+	display: none
+}
+
+@media (min-width: 48em) {
+	:host(.ptc-spacer-medium) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-large) {
+	display: none
+}
+
+@media (min-width: 62em) {
+	:host(.ptc-spacer-large) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-x-large) {
+	display: none
+}
+
+@media (min-width: 64.0625em) {
+	:host(.ptc-spacer-x-large) {
+		display: block
+	}
+}
+
+:host(.ptc-spacer-xx-large) {
+	display: none
+}
+
+@media (min-width: 76.25em) {
+	:host(.ptc-spacer-xx-large) {
+		display: block
+	}
+}

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

@@ -0,0 +1,99 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcSpacer {
+  constructor() {
+    /**
+     * Breakpoint
+     */
+    this.breakpoint = '';
+    /**
+     * Spacing Size
+     */
+    this.size = 'medium';
+    /**
+     * Direction
+     */
+    this.direction = 'vertical';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }));
+  }
+  getCssClassMap() {
+    return {
+      [this.size]: true,
+      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
+      ['ptc-spacer-vertical']: this.direction === 'vertical',
+      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
+      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
+      ['ptc-spacer-small']: this.breakpoint === 'small',
+      ['ptc-spacer-medium']: this.breakpoint === 'medium',
+      ['ptc-spacer-large']: this.breakpoint === 'large',
+      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
+      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
+    };
+  }
+  static get is() { return "ptc-spacer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-spacer.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-spacer.css"]
+  }; }
+  static get properties() { return {
+    "breakpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'' | 'medium' | 'small' | 'large' | 'x-large' | 'xx-large' | 'x-small' | 'xx-small'",
+        "resolved": "\"\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Breakpoint"
+      },
+      "attribute": "breakpoint",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large'",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Spacing Size"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'vertical' | 'horizontal'",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Direction"
+      },
+      "attribute": "direction",
+      "reflect": false,
+      "defaultValue": "'vertical'"
+    }
+  }; }
+}

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

@@ -0,0 +1,16 @@
+ptc-span.link-style {
+  color: var(--color-primary-uigrey);
+  font-weight: var(--ptc-font-weight-black);
+  position: relative;
+  line-height: var(--ptc-line-height-normal);
+}
+ptc-span.nav-style {
+  display: block;
+  color: #cac8c8;
+  font-weight: var(--ptc-font-weight-medium);
+  line-height: var(--ptc-line-height-dense);
+  text-transform: capitalize;
+  padding-left: var(--ptc-element-spacing-05);
+  font-size: 17px;
+  padding-bottom: var(--ptc-element-spacing-03);
+}

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

@@ -0,0 +1,44 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcSpan {
+  constructor() {
+    this.spanStyle = 'tag-style';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      h("span", { part: "ptc-span" },
+        h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.spanStyle]: true,
+    };
+  }
+  static get is() { return "ptc-span"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-span.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-span.css"]
+  }; }
+  static get properties() { return {
+    "spanStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'link-style' | 'tag-style' | 'nav-style'",
+        "resolved": "\"link-style\" | \"nav-style\" | \"tag-style\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "span-style",
+      "reflect": false,
+      "defaultValue": "'tag-style'"
+    }
+  }; }
+}

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

@@ -0,0 +1,64 @@
+div.center {
+  text-align: center;
+}
+div.center.dotted h1::before, div.center.dotted h2::before, div.center.dotted h3::before {
+  left: 50%;
+  transform: translateX(-50%);
+}
+div.left {
+  text-align: left;
+}
+div.left.dotted h1::before, div.left.dotted h2::before, div.left.dotted h3::before {
+  left: 0%;
+}
+div.right {
+  text-align: right;
+}
+div.right.dotted h1::before, div.right.dotted h2::before, div.right.dotted h3::before {
+  right: 0%;
+}
+div.dotted h1::before, div.dotted h2::before, div.dotted h3::before {
+  content: "";
+  position: absolute;
+  top: -6px;
+  width: 30%;
+  display: block;
+  border-top: 3px dashed #5bb73b;
+}
+div.solid h1::before, div.solid h2::before, div.solid h3::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 0.7px;
+  background-color: var(--color-secondary-grey);
+  opacity: 0.9;
+  left: 0px;
+}
+div.solid h1::after, div.solid h2::after, div.solid h3::after {
+  content: "";
+  position: absolute;
+  width: 20%;
+  height: 2px;
+  background-color: var(--color-primary-green);
+  top: -2px;
+  left: 0px;
+}
+div h1,
+div h2,
+div h3 {
+  display: inline-block;
+  position: relative;
+}
+div h1 {
+  font-size: 46px;
+  line-height: 52px;
+  font-weight: 800;
+  letter-spacing: 0px;
+  color: var(--color-primary-grey);
+}
+div h2 {
+  font-size: 28px;
+  line-height: 32px;
+  font-weight: 800;
+  color: var(--color-primary-grey);
+}

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

@@ -0,0 +1,105 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcTitle {
+  constructor() {
+    /**
+     * Title Tag Type
+     */
+    this.type = 'h2';
+    /**
+     * Text Align
+     */
+    this.textAlign = 'left';
+    /**
+     * Upperline Style
+     */
+    this.upperline = 'dotted';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    let TagType;
+    switch (this.type) {
+      case 'h1':
+        TagType = 'h1';
+        break;
+      case 'h3':
+        TagType = 'h3';
+        break;
+      default:
+        TagType = 'h2';
+    }
+    return (h(Host, null,
+      h("div", { class: classMap },
+        h(TagType, null,
+          h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.textAlign]: true,
+      [this.upperline]: true,
+    };
+  }
+  static get is() { return "ptc-title"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-title.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-title.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'h1' | 'h2' | 'h3'",
+        "resolved": "\"h1\" | \"h2\" | \"h3\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Title Tag Type"
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'h2'"
+    },
+    "textAlign": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'left' | 'center' | 'right'",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text Align"
+      },
+      "attribute": "text-align",
+      "reflect": false,
+      "defaultValue": "'left'"
+    },
+    "upperline": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'dotted' | 'solid'",
+        "resolved": "\"dotted\" | \"solid\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Upperline Style"
+      },
+      "attribute": "upperline",
+      "reflect": false,
+      "defaultValue": "'dotted'"
+    }
+  }; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/interfaces.js

@@ -0,0 +1,6 @@
+let ResponsiveBgVariables = {
+  envs: ['xs', 'sm', 'md', 'lg'],
+  selector: '.ptc-img',
+  interval: 250
+};
+export { ResponsiveBgVariables };

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}