@ptcwebops/ptcw-design 3.1.6 → 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/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({});

package/dist/custom-elements/index.js

@@ -24863,6 +24863,8 @@ const PtcTextfield$1 = class extends HTMLElement$1 {
         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/esm/embedded-form_9.entry.js

@@ -11745,6 +11745,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')) {