@ptcwebops/ptcw-design 3.1.5 → 3.1.7

package/dist/cjs/embedded-form_9.cjs.entry.js

@@ -11749,6 +11749,8 @@ const PtcTextfield = class {
         if (this.el.classList.contains('invalid-field')) {
           this.el.classList.remove('invalid-field');
         }
+        this.inputValue = this.iti.getNumber();
+        // console.log('sending phone number: ' + this.inputValue);
       }
       else if (!this.iti.isValidNumber()) {
         if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {

package/dist/cjs/ptc-modal-quiz.cjs.entry.js

@@ -115,9 +115,9 @@ const PtcModalQuiz = class {
     const PriorityOptions = () => {
       return index.h("div", { class: "options-container" }, index.h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Low) }, index.h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `1` }), index.h("label", { class: "option-label", htmlFor: `1` }, index.h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Low (1% - 30%)"))), index.h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Medium) }, index.h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `2` }), index.h("label", { class: "option-label", htmlFor: `2` }, index.h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Medium (31% - 65%)"))), index.h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.High) }, index.h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `3` }), index.h("label", { class: "option-label", htmlFor: `3` }, index.h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "High (66% - 100%)"))));
     };
-    return (index.h(index.Host, null, index.h("div", { class: "modal-quiz-container" }, index.h("div", null, index.h("div", null, index.h("div", { class: "modal-quiz-progress" }, index.h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Question ", this.currentQuestion, " of ", this.totalQuestions), index.h(ProgressDots, null)), index.h("div", { class: "modal-quiz-content" }, index.h("div", { class: "content" }, index.h("ptc-title", { type: "h2", "text-align": "left", "title-size": "xx-large", "title-color": "gray", upperline: "dotted", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-1", "title-weight": "w-8", "is-plm-hub": "false" }, index.h("slot", { name: `question-${this.currentQuestion}-title` })), index.h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, index.h("slot", { name: `question-${this.currentQuestion}-subtitle` })), index.h(PriorityOptions, null), index.h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, (this.currentSelectedPriority) ? index.h("slot", { name: this.getPriorityAnswerSlotName() }) : null), index.h("div", { class: "modal-quiz-ctas" }, index.h("ptc-button", { type: "link", color: "ptc-tertiary", onClick: () => this.handlePreviousClick(), disabled: (this.currentQuestion === 1) }, "Previous"), index.h("ptc-spacer", { size: "large", breakpoint: "x-small" }), (this.currentQuestion === this.totalQuestions) ?
-      index.h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleEmailReportClick(e), disabled: this.currentSelectedPriority == null }, "Email Full Report") :
-      index.h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleNextClick(e), disabled: this.currentSelectedPriority == null }, "Next Question"))), index.h("div", { class: "image" }, index.h("slot", { name: `question-${this.currentQuestion}-image` })))))), index.h("slot", { name: "script" })));
+    return (index.h(index.Host, null, index.h("div", { class: "modal-quiz-container" }, index.h("div", null, index.h("div", null, index.h("div", { class: "modal-quiz-progress" }, index.h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Question ", this.currentQuestion, " of ", this.totalQuestions), index.h(ProgressDots, null)), index.h("div", { class: "modal-quiz-content" }, index.h("div", { class: "content" }, index.h("ptc-title", { type: "h2", "text-align": "left", "title-size": "xx-large", "title-color": "gray", upperline: "dotted", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-1", "title-weight": "w-8", "is-plm-hub": "false" }, index.h("slot", { name: `question-${this.currentQuestion}-title` })), index.h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, index.h("slot", { name: `question-${this.currentQuestion}-subtitle` })), index.h(PriorityOptions, null), index.h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, (this.currentSelectedPriority) ? index.h("slot", { name: this.getPriorityAnswerSlotName() }) : null), index.h("div", { class: "modal-quiz-ctas" }, index.h("ptc-button", { type: "link", color: "ptc-tertiary", onClick: () => this.handlePreviousClick(), disabled: (this.currentQuestion === 1) }, index.h("slot", { name: "previous-ques-text" })), index.h("ptc-spacer", { size: "large", breakpoint: "x-small" }), (this.currentQuestion === this.totalQuestions) ?
+      index.h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleEmailReportClick(e), disabled: this.currentSelectedPriority == null }, index.h("slot", { name: "email-results-text" })) :
+      index.h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleNextClick(e), disabled: this.currentSelectedPriority == null }, index.h("slot", { name: "next-ques-text" })))), index.h("div", { class: "image" }, index.h("slot", { name: `question-${this.currentQuestion}-image` })))))), index.h("slot", { name: "script" })));
   }
   get el() { return index.getElement(this); }
 };

package/dist/collection/components/ptc-modal-quiz/ptc-modal-quiz.js

@@ -106,9 +106,9 @@ export class PtcModalQuiz {
     const PriorityOptions = () => {
       return h("div", { class: "options-container" }, h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Low) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `1` }), h("label", { class: "option-label", htmlFor: `1` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Low (1% - 30%)"))), h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Medium) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `2` }), h("label", { class: "option-label", htmlFor: `2` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Medium (31% - 65%)"))), h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.High) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `3` }), h("label", { class: "option-label", htmlFor: `3` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "High (66% - 100%)"))));
     };
-    return (h(Host, null, h("div", { class: "modal-quiz-container" }, h("div", null, h("div", null, h("div", { class: "modal-quiz-progress" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Question ", this.currentQuestion, " of ", this.totalQuestions), h(ProgressDots, null)), h("div", { class: "modal-quiz-content" }, h("div", { class: "content" }, h("ptc-title", { type: "h2", "text-align": "left", "title-size": "xx-large", "title-color": "gray", upperline: "dotted", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-1", "title-weight": "w-8", "is-plm-hub": "false" }, h("slot", { name: `question-${this.currentQuestion}-title` })), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: `question-${this.currentQuestion}-subtitle` })), h(PriorityOptions, null), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, (this.currentSelectedPriority) ? h("slot", { name: this.getPriorityAnswerSlotName() }) : null), h("div", { class: "modal-quiz-ctas" }, h("ptc-button", { type: "link", color: "ptc-tertiary", onClick: () => this.handlePreviousClick(), disabled: (this.currentQuestion === 1) }, "Previous"), h("ptc-spacer", { size: "large", breakpoint: "x-small" }), (this.currentQuestion === this.totalQuestions) ?
-      h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleEmailReportClick(e), disabled: this.currentSelectedPriority == null }, "Email Full Report") :
-      h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleNextClick(e), disabled: this.currentSelectedPriority == null }, "Next Question"))), h("div", { class: "image" }, h("slot", { name: `question-${this.currentQuestion}-image` })))))), h("slot", { name: "script" })));
+    return (h(Host, null, h("div", { class: "modal-quiz-container" }, h("div", null, h("div", null, h("div", { class: "modal-quiz-progress" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Question ", this.currentQuestion, " of ", this.totalQuestions), h(ProgressDots, null)), h("div", { class: "modal-quiz-content" }, h("div", { class: "content" }, h("ptc-title", { type: "h2", "text-align": "left", "title-size": "xx-large", "title-color": "gray", upperline: "dotted", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-1", "title-weight": "w-8", "is-plm-hub": "false" }, h("slot", { name: `question-${this.currentQuestion}-title` })), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: `question-${this.currentQuestion}-subtitle` })), h(PriorityOptions, null), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, (this.currentSelectedPriority) ? h("slot", { name: this.getPriorityAnswerSlotName() }) : null), h("div", { class: "modal-quiz-ctas" }, h("ptc-button", { type: "link", color: "ptc-tertiary", onClick: () => this.handlePreviousClick(), disabled: (this.currentQuestion === 1) }, h("slot", { name: "previous-ques-text" })), h("ptc-spacer", { size: "large", breakpoint: "x-small" }), (this.currentQuestion === this.totalQuestions) ?
+      h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleEmailReportClick(e), disabled: this.currentSelectedPriority == null }, h("slot", { name: "email-results-text" })) :
+      h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleNextClick(e), disabled: this.currentSelectedPriority == null }, h("slot", { name: "next-ques-text" })))), h("div", { class: "image" }, h("slot", { name: `question-${this.currentQuestion}-image` })))))), h("slot", { name: "script" })));
   }
   static get is() { return "ptc-modal-quiz"; }
   static get encapsulation() { return "shadow"; }

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

@@ -94,6 +94,8 @@ export class PtcTextfield {
         if (this.el.classList.contains('invalid-field')) {
           this.el.classList.remove('invalid-field');
         }
+        this.inputValue = this.iti.getNumber();
+        // console.log('sending phone number: ' + this.inputValue);
       }
       else if (!this.iti.isValidNumber()) {
         if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {

package/dist/collection/stories/Link.stories.js

@@ -3,6 +3,12 @@ import { html } from 'lit';
 export default {
   title: 'Atoms/ptc-link',
   tags: ['autodocs'],
+  parameters: {
+    design: {
+        type: "figma",
+        url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1802%3A62&mode=design&t=e6dLB5mUTCuEu23J-1",
+    },
+  },
   argTypes: {
     disabled: {
       control: 'boolean',

package/dist/collection/stories/design-tokens/color/Color.stories.js

@@ -0,0 +1,96 @@
+import "./style.css";
+import colors from "./colors.json";
+
+const meta = {
+    title: 'Design Tokens/Color',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1718%3A247&mode=design&t=3CAodvJ7V1gNzCOU-1",
+        },
+    },
+};
+
+export default meta;
+
+export const About = {
+    render: () => {
+        const colorPicker = document.createElement('div');
+
+        const colorBaseSelect = document.createElement('section');
+        const select = document.createElement('select');
+        select.id = "color-base";
+        const colorBases = Object.keys(colors);
+        for (let color of colorBases) {
+            select.insertAdjacentHTML(
+                'beforeend', 
+                `<option value="${color}">${color}</option>`
+            )
+        };
+        colorBaseSelect.insertAdjacentHTML('beforeend', '<label>Color</label>');
+        colorBaseSelect.insertAdjacentElement('beforeend', select);
+
+        const colorVariantInput = document.createElement('section');
+        const input = document.createElement('input');
+        input.id = "color-variant";
+        input.type = "number";
+        input.value = 7;
+        input.min = 1;
+        input.max = 12;
+        colorVariantInput.insertAdjacentHTML('beforeend', '<label>Variant</label>');
+        colorVariantInput.insertAdjacentElement('beforeend', input);
+
+        const colorBlock = document.createElement('section');
+        colorBlock.id = "color-block";
+        colorBlock.style.background = "#00890B";
+        colorBlock.style.marginBottom = "50px";
+        colorBlock.value = "--color-green-07";
+
+        const colorVariable = document.createElement('section');
+        colorVariable.insertAdjacentHTML('beforeend', "<label>Variable</label>");
+        colorVariable.insertAdjacentHTML('beforeend', "<code id='color-variable'>--color-green-07</code>");
+
+        const colorHexCode = document.createElement('section');
+        colorHexCode.insertAdjacentHTML('beforeend', "<label>Hex code</label>");
+        colorHexCode.insertAdjacentHTML('beforeend', "<code id='color-hex-code'>#00890B</code>");
+
+        select.addEventListener('change', e => {
+            let colorBase = e.target.value;
+            let colorVariant = document.getElementById('color-variant');
+            let colorBlock = document.getElementById('color-block');
+            let colorVariable = document.getElementById('color-variable');
+            let colorHex = document.getElementById('color-hex-code');
+
+            colorVariant.max = colors[colorBase].length;
+            colorVariant.value = 1;
+            let colorHexCode = colors[colorBase][0]["code"];
+            colorBlock.style.background = colorHexCode;
+            colorVariable.innerText = colors[colorBase][0]["variable"];
+            colorHex.innerText = colorHexCode;
+        });
+
+        input.addEventListener('change', e => {
+            let colorBase = document.getElementById('color-base').value;
+            let colorVariant = e.target;
+            let colorBlock = document.getElementById('color-block');
+            let colorVariable = document.getElementById('color-variable');
+            let colorHex = document.getElementById('color-hex-code');
+
+            let colorVariantValue = colorVariant.value;
+            colorVariant.max = colors[colorBase].length;
+            let colorHexCode = colors[colorBase][colorVariantValue-1]["code"];
+            colorBlock.style.background = colorHexCode;
+            colorVariable.innerText = colors[colorBase][colorVariantValue-1]["variable"];
+            colorHex.innerText = colorHexCode;
+        });
+
+        colorPicker.insertAdjacentHTML('beforeend', "<h2>Color Palette 2.0</h2>");
+        colorPicker.insertAdjacentElement('beforeend', colorBaseSelect);
+        colorPicker.insertAdjacentElement('beforeend', colorVariantInput);
+        colorPicker.insertAdjacentElement('beforeend', colorBlock);
+        colorPicker.insertAdjacentElement('beforeend', colorVariable);
+        colorPicker.insertAdjacentElement('beforeend', colorHexCode);
+
+        return colorPicker;
+    }
+}

package/dist/collection/stories/design-tokens/color/Temp.stories.js

@@ -0,0 +1,98 @@
+import { html } from 'lit';
+
+export default {
+    title: 'Design Tokens/Temp',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1718%3A247&mode=design&t=3CAodvJ7V1gNzCOU-1",
+        },
+    },
+};
+
+const AboutTemplate = args => {
+    return html `
+        <style>
+            input {
+                padding: 5px 8px 5px 8px;
+                width: 200px;
+                border-radius: 8px;
+                border: 1px solid var(--color-gray-04);
+            }
+
+            select {
+                padding: 5px 8px 5px 8px;
+                width: 200px;
+                border-radius: 8px;
+                border: 1px solid var(--color-gray-04);
+            }
+
+            #color-block {
+                height: 100px;
+                width: 100px;
+                border-radius: 5px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 16px;
+            }
+        </style>
+
+        <h2>Color</h2>
+
+        <div style="margin-bottom: 50px">
+            <div>
+                <label>Color</label><br/>
+                <select>
+                    <option selected="selected" value="green">Green</option>
+                    <option value="blue">Blue</option>
+                    <option value="orange">Orange</option>
+                    <option value="red">Red</option>
+                    <option value="gray">Gray</option>
+                </select>
+            </div>
+            <br/>
+            <div>
+                <label>Variant</label><br/>
+                <input id="number" type="number" value="7" min="1" max="12"/>
+            </div>
+        </div>
+        <div id="color-block" style="background:#00890B" value="--color-green-07"></div>
+        <br />
+        <div>
+            <label>Variable</label><br/> 
+            <code id="color-variable">--color-green-07</code>
+        </div>
+        <br/>
+        <div>
+            <label>Hex code</label><br/> 
+            <code id="color-hex-code">#00890B</code>
+        </div>
+
+        <script>
+            const colors = {
+                "green": ["#E1F1E2","#BDE1BF","#97CF9B","#7DC382","#5CB463","#33A13C","#00890B","#006E09","#005807","#004606","#003805","#002D04"],
+                "blue": ["#E1EDF6","#C3DDEE","#A1C9E5","#89BBDF","#6CAAD7","#4795CD","#197BC0","#14629A","#104E7B","#0D3E62","#0A324E","#08283E"],
+                "orange": ["#F8EDE3","#F0DBC7","#E7C7A7","#E1B991","#D9A876","#CF9254","#C37729","#9C5F21","#7D4C1A","#643D15","#503111","#40270E"],
+                "red": ["#FAE6E6","#F4CDCD","#EDB1B1","#E99D9D","#E38484","#DC6565","#D33E3E","#A7232E","#861C25","#6B161E","#561218","#450E13"],
+                "gray": ["#F6F6F6","#E4E7E9","#BEC6CA","#AEB8BD","#9AA6AD","#819099","#617480","#4E5D66","#3E4A52","#323B42","#282F35","#20262A"]
+            }
+            document.querySelector('select').addEventListener('change', e => {
+                let colorBase = e.target.value;
+                let colorVariant = document.querySelector('#number').value;
+                let colorHexCode = colors[colorBase][colorVariant-1];
+                document.getElementById('color-block').style.background = colorHexCode;
+                document.getElementById('color-variable').innerText = "--color-"+colorBase+"-"+colorVariant.padStart(2,'0');
+                document.getElementById('color-hex-code').innerText = colorHexCode;
+            });
+            document.querySelector('#number').addEventListener('change', e => {
+                let colorBase = document.querySelector('select').value;
+                let colorVariant = e.target.value;
+                let colorHexCode = colors[colorBase][colorVariant-1];
+                document.getElementById('color-block').style.background = colorHexCode;
+                document.getElementById('color-variable').innerText = "--color-"+colorBase+"-"+colorVariant.padStart(2,'0');
+                document.getElementById('color-hex-code').innerText = colorHexCode;
+            });
+        </script>
+    `
+}

package/dist/collection/stories/design-tokens/containers/About.stories.js

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default {
+    title: 'Design Tokens/Containers',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1771%3A59&mode=design&t=mXFihiX08xo9n6HS-1",
+        },
+    },
+};
+
+const AboutTemplate = args => {
+    return html `
+        <h2>Containers</h2>
+    `
+}
+
+export const About = AboutTemplate.bind({});

package/dist/collection/stories/design-tokens/elevations/About.stories.js

@@ -0,0 +1,68 @@
+import { html } from 'lit';
+
+export default {
+    title: 'Design Tokens/Elevations',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1%3A261&mode=design&t=6gVgJ9yDrxuMo3pg-1",
+        },
+    },
+};
+
+const AboutTemplate = args => {
+    return html `
+        <style>
+            table {
+                border-collapse: collapse;
+                width: 100%; 
+                border: 1px solid whitesmoke;
+                border-radius: 7px;
+                box-shadow: var(--ptc-shadow-x-small);
+                margin: 10px 0 30px 0;
+            }
+            
+            th, td {
+                text-align: left;
+                padding: 25px;
+                border: 1px solid whitesmoke;
+            }
+            tr:nth-child(even) {background-color: #f2f2f2;}
+        </style>
+        <h2>Elevation</h2>
+        <p>Elevation tokens are used to give elements the appearance of being raised off the page. Use them with the <strong>box-shadow</strong> property. These are especially useful for menus, popovers, and dialogs.</p>
+    
+        <table>
+            <thead>
+                <tr>
+                    <th>Token</th>
+                    <th>Example</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>--ptc-shadow-x-small</td>
+                    <td><div class="elevation-demo" style="box-shadow: var(--ptc-shadow-x-small);"></div></td>
+                </tr>
+                <tr>
+                    <td>--ptc-shadow-small</td>
+                    <td><div class="elevation-demo" style="box-shadow: var(--ptc-shadow-small);"></div></td>
+                </tr>
+                <tr>
+                    <td>--ptc-shadow-medium</td>
+                    <td><div class="elevation-demo" style="box-shadow: var(--ptc-shadow-medium);"></div></td>
+                </tr>
+                <tr>
+                    <td>--ptc-shadow-large</td>
+                    <td><div class="elevation-demo" style="box-shadow: var(--ptc-shadow-large);"></div></td>
+                </tr>
+                <tr>
+                    <td>--ptc-shadow-x-large</td>
+                    <td><div class="elevation-demo" style="box-shadow: var(--ptc-shadow-x-large);"></div></td>
+                </tr>
+            </tbody>
+        </table>
+        `
+}
+
+export const About = AboutTemplate.bind({});

package/dist/collection/stories/design-tokens/grid/About.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+import { Source } from '@storybook/blocks';
+
+export default {
+    title: 'Design Tokens/Grid',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1637%3A58&mode=design&t=wElsipYyzT8825HE-1",
+        },
+    },
+};
+
+const AboutTemplate = args => {
+    return html `
+        <h2>Grid</h2>
+        <p>PTC Design System is using Griddle. Credits to Dave Berning. <br>
+        Please check the <a href="https://github.com/daveberning/griddle#spacing-modifiers" target="_blank">github documentation</a>
+        <p>
+    `
+}
+export const About = AboutTemplate.bind({});

package/dist/collection/stories/design-tokens/motion/About.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit';
+
+export default {
+    title: 'Design Tokens/Motion',
+};
+
+const AboutTemplate = args => {
+    return html `
+        <h2>Motion</h2>
+    `
+}
+
+export const About = AboutTemplate.bind({});

package/dist/collection/stories/design-tokens/shape/About.stories.js

@@ -0,0 +1,69 @@
+import { html } from 'lit';
+
+export default {
+    title: 'Design Tokens/Shape',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1%3A296&mode=design&t=mXFihiX08xo9n6HS-1",
+        },
+    },
+};
+
+const AboutTemplate = args => {
+    return html `
+        <style>
+            table {
+                border-collapse: collapse;
+                width: 100%; 
+                border: 1px solid whitesmoke;
+                border-radius: 7px;
+                box-shadow: var(--ptc-shadow-x-small);
+                margin: 10px 0 30px 0;
+            }
+            
+            th, td {
+                text-align: left;
+                padding: 25px;
+                border: 1px solid whitesmoke;
+            }
+            tr:nth-child(even) {background-color: #f2f2f2;}
+        </style>
+        
+        <h2>Shape</h2>
+
+        <h3>Border Radius</h3>
+
+        <p>Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.</p>
+    
+        <table>
+            <tr>
+                <td>Token</td>
+                <td>Value</td>
+                <td>Example</td>
+            </tr>
+            <tr>
+                <td>--ptc-border-radius-standard</td>
+                <td>0.25rem (4px)</td>
+                <td><div class="border-radius-demo" style="border-radius: var(--ptc-border-radius-standard);"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-border-radius-large</td>
+                <td>0.75rem (12px)</td>
+                <td><div class="border-radius-demo" style="border-radius: var(--ptc-border-radius-large);"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-border-radius-pill</td>
+                <td>9999px</td>
+                <td><div class="border-radius-demo" style="border-radius: var(--ptc-border-radius-pill); width: 6rem;"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-border-radius-circle</td>
+                <td>50%</td>
+                <td><div class="border-radius-demo" style="border-radius: var(--ptc-border-radius-circle);"></div></td>
+            </tr>
+        </table>
+    `
+}
+
+export const About = AboutTemplate.bind({});

package/dist/collection/stories/design-tokens/space/About.stories.js

@@ -0,0 +1,128 @@
+import { html } from 'lit';
+
+export default {
+    title: 'Design Tokens/Space',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1%3A305&mode=design&t=6gVgJ9yDrxuMo3pg-1",
+        },
+    },
+};
+
+const AboutTemplate = args => {
+    return html `
+        <style>
+            table {
+                border-collapse: collapse;
+                width: 100%; 
+                border: 1px solid whitesmoke;
+                border-radius: 7px;
+                box-shadow: var(--ptc-shadow-x-small);
+                margin: 10px 0 30px 0;
+            }
+            
+            th, td {
+                text-align: left;
+                padding: 25px;
+                border: 1px solid whitesmoke;
+            }
+            tr:nth-child(even) {background-color: #f2f2f2;}
+        </style>
+
+        <h2>Space</h2>
+
+        <h3>Element Spacing</h3>
+        <table>
+            <tr>
+                <td>Token</td>
+                <td>Value</td>
+                <td>Example</td>
+            </tr>
+            <tr>
+                <td>--ptc-element-spacing-01</td>
+                <td>0.25rem (4px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-element-spacing-01); height: var(--ptc-element-spacing-01)"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-element-spacing-02</td>
+                <td>0.5rem (8px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-element-spacing-02); height: var(--ptc-element-spacing-02)"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-element-spacing-03</td>
+                <td>0.75rem (12px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-element-spacing-03); height: var(--ptc-element-spacing-03)"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-element-spacing-04</td>
+                <td>1rem (16px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-element-spacing-04); height: var(--ptc-element-spacing-04)"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-element-spacing-05</td>
+                <td>1.25rem (20px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-element-spacing-05); height: var(--ptc-element-spacing-05)"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-element-spacing-06</td>
+                <td>1.5rem (24px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-element-spacing-06); height: var(--ptc-element-spacing-06)"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-element-spacing-07</td>
+                <td>2rem (32px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-element-spacing-07); height: var(--ptc-element-spacing-07)"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-element-spacing-08</td>
+                <td>2.5rem (40px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-element-spacing-08); height: var(--ptc-element-spacing-08)"></div></td>
+            </tr>
+        </table>
+
+        <hr />
+
+        <h3>Layout Spacing</h3>
+        <table>
+            <tr>
+                <td>Token</td>
+                <td>Value</td>
+                <td>Example</td>
+            </tr>
+            <tr>
+                <td>--ptc-layout-spacing-01</td>
+                <td>0.5rem (8px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-layout-spacing-01); height: var(--ptc-layout-spacing-01)"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-layout-spacing-02</td>
+                <td>1rem (16px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-layout-spacing-02); height: var(--ptc-layout-spacing-02)"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-layout-spacing-03</td>
+                <td>1.5rem (24px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-layout-spacing-03); height: var(--ptc-layout-spacing-03)"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-layout-spacing-04</td>
+                <td>2rem (32px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-layout-spacing-04); height: var(--ptc-layout-spacing-04)"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-layout-spacing-05</td>
+                <td>4rem (64px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-layout-spacing-05); height: var(--ptc-layout-spacing-05)"></div></td>
+            </tr>
+            <tr>
+                <td>--ptc-layout-spacing-06</td>
+                <td>5rem (80px)</td>
+                <td><div class="spacing-demo" style="width:var(--ptc-layout-spacing-06); height: var(--ptc-layout-spacing-06)"></div></td>
+            </tr>
+        </table>
+    `
+}
+
+export const About = AboutTemplate.bind({});
+

package/dist/collection/stories/design-tokens/typography/About.stories.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+
+export default {
+    title: 'Design Tokens/Typography',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1802%3A60&mode=design&t=mXFihiX08xo9n6HS-1",
+        },
+    },
+};
+
+const AboutTemplate = args => {
+    return html `
+        <h2>Typography</h2>
+        <p>PTC Design System is using google fonts</p>
+    `
+}
+
+export const About = AboutTemplate.bind({});