@ptcwebops/ptcw-design 0.1.1 → 0.1.2

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

@@ -0,0 +1,155 @@
+button:disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+button {
+  background-color: var(--color-primary-uigrey);
+  display: inline-block;
+  border-style: solid;
+  border-width: 1px;
+  white-space: normal;
+  position: relative;
+  text-decoration: none;
+  cursor: pointer;
+  padding: 9.4px 17.5px;
+  border-radius: 3px;
+}
+button.animation-right ::slotted([slot=slot-after-text]), button.animation-right ::slotted([slot=slot-before-text]), button.animation-down ::slotted([slot=slot-after-text]), button.animation-down ::slotted([slot=slot-before-text]) {
+  transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
+  position: relative;
+  display: inline-block;
+}
+button:hover.animation-right ::slotted([slot=slot-after-text]), button:hover.animation-right ::slotted([slot=slot-before-text]) {
+  transform: translateX(var(--ptc-element-spacing-02));
+}
+button:hover.animation-down ::slotted([slot=slot-after-text]), button:hover.animation-down ::slotted([slot=slot-before-text]) {
+  transform: translateY(var(--ptc-element-spacing-02));
+}
+button span {
+  font-size: var(--ptc-font-size-small);
+  font-weight: bold;
+  line-height: 0.86;
+}
+
+.icon-left ::slotted([slot=slot-before-text]) {
+  margin-right: var(--ptc-element-spacing-01);
+}
+
+.icon-right ::slotted([slot=slot-after-text]) {
+  margin-left: var(--ptc-element-spacing-01);
+}
+
+.blackgrey {
+  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: var(--ptc-shadow-x-large);
+}
+.blackgrey span {
+  color: var(--color-white);
+}
+
+.turtlegreen {
+  box-shadow: var(--ptc-shadow-x-small);
+  border: solid 1px #5bb73b;
+  background-image: linear-gradient(285deg, #5bb73b 155%, #178642 62%);
+}
+.turtlegreen:hover {
+  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);
+}
+
+.legacy-green {
+  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));
+}
+@media screen and (min-width: 768px) {
+  .legacy-green {
+    padding: 20px 20px;
+  }
+}
+.legacy-green: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;
+}
+.legacy-green:hover {
+  box-shadow: 0 0 49px 6.1px rgba(0, 0, 0, 0.55);
+}
+.legacy-green:hover span {
+  color: var(--color-white);
+}
+.legacy-green:hover:after {
+  opacity: 1;
+}
+.legacy-green span {
+  font-family: var(--ptc-font-secondary-latin);
+  color: var(--color-white);
+  z-index: 100;
+  position: relative;
+  text-transform: uppercase;
+  font-weight: var(--ptc-font-weight-bold);
+  letter-spacing: var(--ptc-letter-spacing-normal);
+  font-size: var(--ptc-font-size-medium);
+}
+@media screen and (min-width: 768px) {
+  .legacy-green span {
+    font-size: 19px;
+    letter-spacing: var(--ptc-letter-spacing-loose);
+  }
+}
+.legacy-green icon-asset {
+  display: inline;
+}
+
+a {
+  border-style: solid;
+  border-width: 1px;
+  position: relative;
+  text-decoration: none;
+  padding: 9.4px 17.5px;
+  border-radius: 3px;
+  text-decoration: none;
+  display: inline-block;
+  outline: none;
+  position: relative;
+}
+a.animation-right ::slotted([slot=slot-after-text]), a.animation-right ::slotted([slot=slot-before-text]), a.animation-down ::slotted([slot=slot-after-text]), a.animation-down ::slotted([slot=slot-before-text]) {
+  transition: all ease-out 0.25s;
+  position: relative;
+  display: inline-block;
+  margin-left: 5px;
+}
+a:hover.animation-right ::slotted([slot=slot-after-text]), a:hover.animation-right ::slotted([slot=slot-before-text]) {
+  transform: translateX(var(--ptc-element-spacing-02));
+}
+a:hover.animation-down ::slotted([slot=slot-after-text]), a:hover.animation-down ::slotted([slot=slot-before-text]) {
+  transform: translateY(var(--ptc-element-spacing-02));
+}

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

@@ -0,0 +1,223 @@
+import { Component, Prop, h, Event, Host } from '@stencil/core';
+export class PtcButton {
+  constructor() {
+    /**
+     * Button type
+     */
+    this.type = 'button';
+    /**
+     * Button theme color
+     */
+    this.color = 'blackgrey';
+    /**
+     * Icon Animation
+     */
+    this.iconAnimation = '';
+    /**
+     * Icon Position
+     */
+    this.iconPosition = 'icon-right';
+    /**
+     * Link URL (Optional)
+     */
+    this.linkHref = undefined;
+    /**
+     * (optional) Link target
+     * */
+    this.target = '_self';
+    /**
+     *  (optional) Link rel
+     * */
+    this.rel = undefined;
+  }
+  clickEventHandler() {
+    this.clickEvent.emit();
+    console.log('click!');
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const Tag = !!this.linkHref ? 'a' : 'button';
+    return (h(Host, null,
+      h(Tag, Object.assign({ class: classMap, disabled: this.disabled, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {})),
+        h("span", null,
+          h("slot", { name: "slot-before-text" }),
+          h("slot", null),
+          h("slot", { name: "slot-after-text" })))));
+  }
+  getCssClassMap() {
+    return {
+      [this.color]: true,
+      [this.iconAnimation]: true,
+      [this.iconPosition]: true,
+    };
+  }
+  static get is() { return "ptc-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-button.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean | undefined",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Disabled button"
+      },
+      "attribute": "disabled",
+      "reflect": true
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'button' | 'reset' | 'submit' | 'link'",
+        "resolved": "\"button\" | \"link\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Button type"
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'button'"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'offwhite' | 'blackgrey' | 'turtlegreen' | 'neon' | 'legacy-green'",
+        "resolved": "\"blackgrey\" | \"legacy-green\" | \"neon\" | \"offwhite\" | \"turtlegreen\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Button theme color"
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'blackgrey'"
+    },
+    "iconAnimation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'animation-right' | 'animation-down' | ''",
+        "resolved": "\"\" | \"animation-down\" | \"animation-right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon Animation"
+      },
+      "attribute": "icon-animation",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "iconPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'icon-left' | 'icon-right'",
+        "resolved": "\"icon-left\" | \"icon-right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon Position"
+      },
+      "attribute": "icon-position",
+      "reflect": false,
+      "defaultValue": "'icon-right'"
+    },
+    "linkHref": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Link URL (Optional)"
+      },
+      "attribute": "link-href",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) Link target"
+      },
+      "attribute": "target",
+      "reflect": false,
+      "defaultValue": "'_self'"
+    },
+    "rel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) Link rel"
+      },
+      "attribute": "rel",
+      "reflect": false,
+      "defaultValue": "undefined"
+    }
+  }; }
+  static get events() { return [{
+      "method": "clickEvent",
+      "name": "clickEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the button has focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,239 @@
+:host {
+  display: block;
+}
+
+:host(.lottie-card) .card-border {
+  box-shadow: 1px 1px 14px 0 rgba(101, 101, 101, 0.35);
+  border: 1px solid #c9c9c9;
+  border-radius: 10px;
+  position: relative;
+  overflow: hidden;
+}
+:host(.lottie-card) .card-border::after {
+  content: "";
+  height: 40%;
+  width: 4px;
+  position: absolute;
+  top: 30%;
+  right: -2px;
+  background-color: #74c34d;
+  z-index: 2;
+  display: block;
+}
+:host(.lottie-card) .card-border:hover {
+  box-shadow: 1px 1px 35px 0 rgba(101, 101, 101, 0.65);
+}
+:host(.lottie-card) .card-border:hover .card-body h3 {
+  border-bottom: 2px solid var(--color-primary-green);
+}
+:host(.lottie-card) .card-layout {
+  display: block;
+}
+@media only screen and (min-width: 992px) {
+  :host(.lottie-card) .card-layout {
+    display: flex;
+    flex-flow: nowrap row;
+    justify-content: center;
+  }
+}
+:host(.lottie-card) .link-wrapper {
+  outline: none;
+  text-decoration: none;
+}
+:host(.lottie-card) .link-wrapper:hover {
+  outline: none;
+  text-decoration: none;
+}
+:host(.lottie-card) .card-media {
+  flex-basis: 40%;
+  border-right: 1px solid #c9c9c9;
+}
+:host(.lottie-card) .card-body {
+  flex-basis: 60%;
+  align-self: center;
+  padding: 0 30px 10px;
+}
+:host(.lottie-card) .card-body h3 {
+  display: inline-block;
+  line-height: 1;
+  color: #40434a;
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: var(--ptc-font-size-medium);
+  text-transform: uppercase;
+  border-bottom: 2px solid transparent;
+  margin-bottom: var(--ptc-element-spacing-02);
+}
+
+:host(.simple-card) .card-layout {
+  display: block;
+}
+:host(.simple-card) .link-wrapper {
+  outline: none;
+  text-decoration: none;
+}
+:host(.simple-card) .link-wrapper:hover {
+  outline: none;
+  text-decoration: none;
+}
+:host(.simple-card) .link-wrapper:hover .card-body h3::before {
+  width: 100%;
+}
+:host(.simple-card) .link-wrapper:hover ::slotted([slot=slot-after-heading]) {
+  margin-left: 15px;
+}
+:host(.simple-card) .card-body h3 {
+  color: #40434a;
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-black);
+  line-height: 1.86;
+  text-transform: uppercase;
+  position: relative;
+  margin-bottom: var(--ptc-element-spacing-02);
+  display: inline-block;
+}
+:host(.simple-card) .card-body h3::before {
+  display: block;
+  position: absolute;
+  content: "";
+  width: var(--ptc-element-spacing-06);
+  border-bottom: 2px solid var(--color-secondary-turtlegreen);
+  bottom: 1px;
+  transition: width var(--ptc-transition-medium) var(--ptc-standard-ease);
+}
+:host(.simple-card) ::slotted([slot=slot-after-heading]) {
+  margin-left: 5px;
+  transition: margin-left var(--ptc-transition-medium) var(--ptc-standard-ease);
+}
+
+:host(.clip-edge-card) .card-border {
+  overflow: hidden;
+  filter: drop-shadow(rgba(0, 0, 0, 0.32) 0px 3px 6px);
+  width: 100%;
+}
+:host(.clip-edge-card) .card-border:hover {
+  filter: drop-shadow(rgba(0, 0, 0, 0.32) 0px 6px 12px);
+}
+:host(.clip-edge-card) .card-layout {
+  display: block;
+}
+:host(.clip-edge-card) .link-wrapper {
+  outline: none;
+  text-decoration: none;
+}
+:host(.clip-edge-card) .link-wrapper:hover {
+  outline: none;
+  text-decoration: none;
+}
+:host(.clip-edge-card) .card-media {
+  position: relative;
+  width: 100%;
+  height: 124px;
+  overflow: hidden;
+  border-radius: var(--ptc-border-radius-medium);
+}
+:host(.clip-edge-card) .card-body {
+  transform: translateY(calc((-1) * var(--ptc-element-spacing-04)));
+  overflow: hidden;
+  width: calc(95% - var(--ptc-element-spacing-04) - var(--ptc-element-spacing-06));
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-medium);
+  line-height: var(--ptc-line-height-dense);
+  color: #40434a;
+  clip-path: var(--ptc-clip-path-bottom-right);
+  background-color: var(--color-white);
+  border-radius: var(--ptc-border-radius-medium);
+  padding: var(--ptc-element-spacing-05) var(--ptc-element-spacing-04) var(--ptc-element-spacing-03) var(--ptc-element-spacing-06);
+}
+:host(.clip-edge-card) .card-body h3 {
+  display: inline-block;
+  margin: 0px;
+  font-size: var(--ptc-font-size-medium);
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: var(--ptc-line-height-dense);
+  color: var(--color-primary-uigrey);
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  transition: border-bottom var(--ptc-transition-medium) var(--ptc-standard-ease);
+  margin-bottom: var(--ptc-element-spacing-03);
+}
+:host(.clip-edge-card) ::slotted([slot=slot-description]) {
+  height: 0;
+  opacity: 0;
+  transition: height var(--ptc-transition-medium) var(--ptc-standard-ease), opacity var(--ptc-transition-medium) var(--ptc-standard-ease);
+}
+:host(.clip-edge-card) ::slotted([slot=slot-image]) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transform: scale(1);
+  transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
+  transform-origin: top center;
+}
+:host(.clip-edge-card) .link-wrapper:hover .card-body h3 {
+  border-bottom: 2px solid var(--color-secondary-turtlegreen);
+}
+:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-description]) {
+  height: 54px;
+  opacity: 1;
+}
+:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-image]) {
+  transform: scale(1.1);
+}
+
+:host(.hightlight-card) .card-border {
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  width: 100%;
+  border-radius: var(--ptc-border-radius-medium);
+  overflow: hidden;
+}
+:host(.hightlight-card) .card-border:hover .card-media {
+  transform: scale(1.1);
+}
+:host(.hightlight-card) .card-layout {
+  display: block;
+  position: relative;
+}
+:host(.hightlight-card) .link-wrapper {
+  outline: none;
+  text-decoration: none;
+}
+:host(.hightlight-card) .link-wrapper:hover {
+  outline: none;
+  text-decoration: none;
+}
+:host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]) {
+  height: var(--ptc-layout-spacing-05);
+  opacity: 1;
+}
+:host(.hightlight-card) .card-media {
+  width: 100%;
+  height: auto;
+  min-height: 450px;
+  position: relative;
+  transform: scale(1);
+  transform-origin: center bottom;
+  transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
+  transition-delay: var(--ptc-delay-medium);
+}
+:host(.hightlight-card) .card-body {
+  position: absolute;
+  bottom: 0;
+  top: auto;
+  left: 0;
+  right: auto;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
+  background-color: var(--color-white);
+}
+:host(.hightlight-card) .card-body h3 {
+  font-size: 30px;
+  line-height: 1.27;
+  font-weight: var(--ptc-font-weight-bold);
+  color: var(--color-primary-uigrey);
+  margin: var(--ptc-element-spacing-04) 0;
+}
+:host(.hightlight-card) ::slotted([slot=slot-description]) {
+  height: 0;
+  opacity: 0;
+  transition: height var(--ptc-transition-medium) var(--ptc-standard-ease), opacity var(--ptc-transition-fast) var(--ptc-standard-ease);
+  transition-delay: var(--ptc-delay-medium);
+}