@salesforcedevs/dx-components 0.56.1 → 0.56.2-example

package/src/assets/svg/big-moon.svg

@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397 322" width="397" height="322"><defs><clipPath clipPathUnits="userSpaceOnUse" id="cp1"><path d="m0 0h397v322h-397z"/></clipPath></defs><style>.a{fill:#3a49da}.b{fill:none;stroke:#90d0fe;stroke-width:2}.c{fill:none;stroke:#90d0fe;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.d{fill:none;stroke:#90d0fe;stroke-linecap:round;stroke-width:2}</style><g clip-path="url(#cp1)"><path class="a" d="m424.5 322c-207.1 0-374.5-167.4-374.5-374.5 0-207.1 167.4-374.5 374.5-374.5 207.1 0 374.5 167.4 374.5 374.5 0 207.1-167.4 374.5-374.5 374.5z"/><path class="b" d="m270 137c-5.5 0-10-4.5-10-10 0-5.5 4.5-10 10-10 5.5 0 10 4.5 10 10 0 5.5-4.5 10-10 10z"/><path class="c" d="m356.2 93.2c5.3-9.8 5.8-21.3 1.4-31.6"/><path class="c" d="m353.3 97.7c-10 13.4-27.9 19.1-44.4 14.2-16.4-5-27.6-19.5-27.6-36q0-2.7 0.4-5.3"/><path class="c" d="m282.9 65.2c4.6-14.3 17.5-24.8 33.2-26.6 15.6-1.9 30.9 5.2 38.9 18.1"/><path class="c" d="m291.6 70.4h-13.9"/><path class="c" d="m272.3 70.4h-3.3"/><path class="c" d="m374.5 57.3h-4.7"/><path class="c" d="m363.9 57.3h-14.5"/><path class="b" d="m364.6 58.2c-0.5 0-0.9-0.4-0.9-0.9 0-0.5 0.4-0.9 0.9-0.9 0.6 0 1 0.4 1 0.9 0 0.5-0.4 0.9-1 0.9z"/><path class="c" d="m363.5 97.5h-14.7"/><path class="c" d="m331.5 172l2.1 5.7q0.3 0.6 0.9 0.9l5.7 2.1c1.3 0.5 1.3 2.3 0 2.8l-5.7 2.1q-0.6 0.3-0.9 0.9l-2.1 5.7c-0.5 1.3-2.3 1.3-2.8 0l-2.1-5.7q-0.3-0.6-0.9-0.9l-5.7-2.1c-1.3-0.5-1.3-2.3 0-2.8l5.7-2.1q0.6-0.3 0.9-0.9l2.1-5.7c0.5-1.3 2.3-1.3 2.8 0z"/><path class="c" d="m162.4 32.6l3.4 9.3q0.5 1.1 1.5 1.5l9.3 3.4c2.1 0.8 2.1 3.8 0 4.6l-9.3 3.4q-1 0.4-1.5 1.5l-3.4 9.3c-0.8 2.1-3.8 2.1-4.6 0l-3.4-9.3q-0.5-1.1-1.5-1.5l-9.3-3.4c-2.1-0.8-2.1-3.8 0-4.6l9.3-3.4q1-0.4 1.5-1.5l3.4-9.3c0.8-2.1 3.8-2.1 4.6 0z"/><path class="c" d="m8 284v-16"/><path class="c" d="m16.1 276h-16.1"/><path class="d" d="m160 176h28"/><path class="d" d="m204 176h-9"/><path class="b" d="m200 106c-1.1 0-2-0.9-2-2 0-1.1 0.9-2 2-2 1.1 0 2 0.9 2 2 0 1.1-0.9 2-2 2z"/><path class="b" d="m150 246c-1.1 0-2-0.9-2-2 0-1.1 0.9-2 2-2 1.1 0 2 0.9 2 2 0 1.1-0.9 2-2 2z"/></g></svg>

package/src/assets/svg/blue-circle.svg

@@ -0,0 +1,3 @@
+<svg width="126" height="126" viewBox="0 0 126 126" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="63" cy="63" r="62" fill="white" stroke="#90D0FE" stroke-width="2"/>
+</svg>

package/src/assets/svg/subscribe-background-left.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="45px" height="34px" viewBox="0 0 45 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>blog-cta-graphic-left</title>
+    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Blog---v1" transform="translate(-424.000000, -2216.000000)" stroke-width="2">
+            <g id="CTA-signup" transform="translate(52.000000, 2169.000000)">
+                <g id="blog-cta-graphic-left" transform="translate(373.000000, 47.500000)">
+                    <circle id="Oval-Copy-12" stroke="#90D1FF" cx="39.5" cy="4.5" r="3.5"></circle>
+                    <path d="M7.42619649,16.2472709 L5.80463043,20.6293714 C5.68941141,20.9429183 5.44197383,21.1894114 5.12842699,21.3046304 L0.747270909,22.9271409 C-0.249090303,23.295464 -0.249090303,24.704536 0.747270909,25.0738035 L5.12842699,26.6953696 C5.44197383,26.8105886 5.68941141,27.0570817 5.80463043,27.3706286 L7.42619649,31.7527291 C7.79546401,32.7490903 9.20453599,32.7490903 9.57285909,31.7527291 L11.1944252,27.3706286 C11.3096442,27.0570817 11.5570817,26.8105886 11.8706286,26.6953696 L16.2527291,25.0738035 C17.2481459,24.704536 17.2481459,23.295464 16.2527291,22.9271409 L11.8706286,21.3046304 C11.5570817,21.1894114 11.3096442,20.9429183 11.1944252,20.6293714 L9.57285909,16.2472709 C9.20453599,15.2509097 7.79546401,15.2509097 7.42619649,16.2472709 Z" id="Stroke-7-Copy-2" stroke="#8FD0FE" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/subscribe-background-right.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23px" height="22px" viewBox="0 0 23 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>blog-cta-graphic-right</title>
+    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Blog---v1" transform="translate(-936.000000, -2378.000000)" stroke="#8FD0FE" stroke-width="2">
+            <g id="CTA-signup" transform="translate(52.000000, 2169.000000)">
+                <path d="M894.236764,210.879142 L892.329039,216.034555 C892.193488,216.403433 891.902385,216.693425 891.533506,216.828977 L886.379205,218.737813 C885.207015,219.171134 885.207015,220.828866 886.379205,221.263298 L891.533506,223.171023 C891.902385,223.306575 892.193488,223.596567 892.329039,223.965445 L894.236764,229.120858 C894.671197,230.293047 896.328928,230.293047 896.76225,229.120858 L898.669974,223.965445 C898.805526,223.596567 899.096629,223.306575 899.465508,223.171023 L904.62092,221.263298 C905.791999,220.828866 905.791999,219.171134 904.62092,218.737813 L899.465508,216.828977 C899.096629,216.693425 898.805526,216.403433 898.669974,216.034555 L896.76225,210.879142 C896.328928,209.706953 894.671197,209.706953 894.236764,210.879142 Z" id="blog-cta-graphic-right"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/trial-left.svg

@@ -0,0 +1,6 @@
+<svg width="477" height="393" viewBox="0 0 477 393" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M475.962 306.74C475.962 309.003 474.129 310.836 471.866 310.836C469.604 310.836 467.771 309.003 467.771 306.74C467.771 304.478 469.604 302.644 471.866 302.644C474.129 302.644 475.962 304.478 475.962 306.74Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M98.9625 36.7401C98.9625 39.0031 97.1295 40.836 94.8665 40.836C92.6045 40.836 90.7715 39.0031 90.7715 36.7401C90.7715 34.4781 92.6045 32.644 94.8665 32.644C97.1295 32.644 98.9625 34.4781 98.9625 36.7401Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.95075 376.485L6.43275 380.586C6.32475 380.879 6.09375 381.11 5.80075 381.218L1.69975 382.736C0.76675 383.081 0.76675 384.4 1.69975 384.745L5.80075 386.262C6.09375 386.371 6.32475 386.602 6.43275 386.895L7.95075 390.996C8.29575 391.928 9.61475 391.928 9.95975 390.996L11.4768 386.895C11.5858 386.602 11.8167 386.371 12.1097 386.262L16.2107 384.745C17.1427 384.4 17.1427 383.081 16.2107 382.736L12.1097 381.218C11.8167 381.11 11.5858 380.879 11.4768 380.586L9.95975 376.485C9.61475 375.552 8.29575 375.552 7.95075 376.485Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M126.951 1.69975L125.433 5.80075C125.325 6.09475 125.094 6.32475 124.801 6.43275L120.7 7.95075C119.767 8.29675 119.767 9.61474 120.7 9.95974L124.801 11.4768C125.094 11.5858 125.325 11.8167 125.433 12.1097L126.951 16.2117C127.296 17.1427 128.615 17.1427 128.96 16.2117L130.477 12.1097C130.586 11.8167 130.817 11.5858 131.11 11.4768L135.211 9.95974C136.143 9.61474 136.143 8.29675 135.211 7.95075L131.11 6.43275C130.817 6.32475 130.586 6.09475 130.477 5.80075L128.96 1.69975C128.615 0.76675 127.296 0.76675 126.951 1.69975Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/svg/trial-right.svg

@@ -0,0 +1,26 @@
+<svg width="562" height="325" viewBox="0 0 562 325" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7706_186134)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.8185 -16.518C88.8185 8.049 68.9035 27.964 44.3365 27.964C19.7695 27.964 -0.146484 8.049 -0.146484 -16.518C-0.146484 -41.084 19.7695 -61 44.3365 -61C68.9035 -61 88.8185 -41.084 88.8185 -16.518Z" stroke="#90D0FE" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M553.142 35.5865L551.624 39.6875C551.516 39.9815 551.286 40.2115 550.993 40.3195L546.891 41.8375C545.958 42.1835 545.958 43.5015 546.891 43.8465L550.993 45.3635C551.286 45.4725 551.516 45.7035 551.624 45.9965L553.142 50.0985C553.488 51.0295 554.806 51.0295 555.151 50.0985L556.668 45.9965C556.777 45.7035 557.008 45.4725 557.301 45.3635L561.403 43.8465C562.335 43.5015 562.335 42.1835 561.403 41.8375L557.301 40.3195C557.008 40.2115 556.777 39.9815 556.668 39.6875L555.151 35.5865C554.806 34.6535 553.488 34.6535 553.142 35.5865Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M252.008 244.108C246.009 232.496 242.621 219.315 242.621 205.343C242.621 193.94 244.878 183.064 248.969 173.137" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M410.92 193.214C411.488 197.175 411.782 201.225 411.782 205.343C411.782 252.056 373.915 289.923 327.202 289.923C298.728 289.923 273.538 275.852 258.211 254.283" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M254.555 162.004C269.323 137.303 296.331 120.764 327.202 120.764C365.504 120.764 397.86 146.223 408.27 181.142" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M398.511 85.7866L395.059 95.1156C394.813 95.7826 394.286 96.3075 393.619 96.5555L384.29 100.008C382.169 100.792 382.169 103.792 384.29 104.577L393.619 108.029C394.286 108.276 394.813 108.802 395.059 109.469L398.511 118.798C399.296 120.919 402.296 120.919 403.08 118.798L406.532 109.469C406.78 108.802 407.305 108.276 407.972 108.029L417.301 104.577C419.422 103.792 419.422 100.792 417.301 100.008L407.972 96.5555C407.305 96.3075 406.78 95.7826 406.532 95.1156L403.08 85.7866C402.296 83.6656 399.296 83.6656 398.511 85.7866Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M262.252 314.385C262.252 320.076 257.638 324.69 251.946 324.69C246.255 324.69 241.641 320.076 241.641 314.385C241.641 308.693 246.255 304.079 251.946 304.079C257.638 304.079 262.252 308.693 262.252 314.385Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M327.116 162.502C327.116 165.278 324.865 167.529 322.09 167.529C319.313 167.529 317.062 165.278 317.062 162.502C317.062 159.727 319.313 157.476 322.09 157.476C324.865 157.476 327.116 159.727 327.116 162.502Z" fill="#90D0FE"/>
+<path d="M389.715 192.771H419.487" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M430.93 192.771H438.019" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M245.277 163.33H268.519" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M213.107 163.33H223.16" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M236.056 163.33C236.056 164.441 235.156 165.341 234.045 165.341C232.935 165.341 232.035 164.441 232.035 163.33C232.035 162.22 232.935 161.32 234.045 161.32C235.156 161.32 236.056 162.22 236.056 163.33Z" fill="#90D0FE"/>
+<path d="M236.424 253.626H267.833" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M279.898 253.627C279.898 254.737 278.998 255.638 277.887 255.638C276.777 255.638 275.877 254.737 275.877 253.627C275.877 252.517 276.777 251.616 277.887 251.616C278.998 251.616 279.898 252.517 279.898 253.627Z" fill="#90D0FE"/>
+<path d="M356.52 230.398V214.362" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M364.535 222.382L348.484 222.384" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_7706_186134">
+<rect width="562" height="325" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/modules/dx/banner/banner (1).ts

@@ -0,0 +1,12 @@
+import { LightningElement, api } from "lwc";
+import { setContainerInnerHtml } from "dxUtils/lwc";
+
+export default class Banner extends LightningElement {
+    @api bannerMarkup =
+        'Thank you for visiting the Salesforce Developers website! <span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">We value your feedback</a></span>';
+
+    renderedCallback() {
+        const container = this.template.querySelector(".info-container");
+        setContainerInnerHtml(container, this.bannerMarkup);
+    }
+}

package/src/modules/dx/banner/banner.ts

@@ -1,14 +1,12 @@
 import { LightningElement, api } from "lwc";
+import { setContainerInnerHtml } from "dxUtils/lwc";
 
 export default class Banner extends LightningElement {
     @api bannerMarkup =
         '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
 
-    renderedCallback(){
+    renderedCallback() {
         const container = this.template.querySelector(".info-container");
-        if(container){
-            // eslint-disable-next-line @lwc/lwc/no-inner-html
-            container.innerHTML = this.bannerMarkup
-        }
+        setContainerInnerHtml(container, this.bannerMarkup);
     }
 }

package/src/modules/dx/button/button.css

@@ -4,6 +4,7 @@
     width: min-content;
     font-size: inherit;
 
+    --dx-c-button-background-color: transparent;
     --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
     --dx-c-button-primary-color-hover: var(--dx-g-blue-vibrant-40);
     --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-90);
@@ -11,20 +12,25 @@
     --dx-c-button-justify-content: center;
     --dx-c-button-opacity: 1;
     --dx-c-button-font-size: var(--dx-g-text-sm);
+    --dx-c-button-font-weight: var(--dx-g-font-normal);
+    --dx-c-button-display: flex;
 }
 
 .button {
+    background-color: var(--dx-c-button-background-color);
     opacity: var(--dx-c-button-opacity);
     width: inherit;
-    display: flex;
+    display: var(--dx-c-button-display);
     align-items: center;
     justify-content: var(--dx-c-button-justify-content);
     user-select: none;
     white-space: nowrap;
     font-size: var(--dx-c-button-font-size);
     transition: var(--dx-g-transition-hue-1x);
-    padding: 0 var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
+    padding: var(--dx-c-button-vertical-spacing, 0)
+        var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
     border-radius: var(--dx-g-spacing-xs);
+    font-weight: var(--dx-c-button-font-weight);
 }
 
 .button:focus {
@@ -49,23 +55,18 @@
 .button.variant_inline dx-icon,
 .button.variant_inline-inherit dx-icon {
     display: inline-block;
-    transform: translate(0, -2px);
 }
 
 .button > span {
     font-family: inherit;
     font-size: inherit;
+    font-weight: inherit;
 }
 
 .button:not(.variant_inline-inherit).font-display {
     font-family: var(--dx-g-font-display);
 }
 
-.button.font-display:not(.variant_inline):not(.variant_inline-inherit) > span {
-    /* offset accounts for display font's ghost padding */
-    margin-top: 5px;
-}
-
 .button.font-sans {
     font-family: var(--dx-g-font-sans);
 }
@@ -135,7 +136,7 @@
 
 .button.variant_secondary {
     color: var(--dx-c-button-primary-color);
-    background: transparent;
+    background: var(--dx-c-button-background-color);
     border: 1px solid var(--dx-c-button-primary-color);
 }
 

package/src/modules/dx/buttonToggle/buttonToggle.css

@@ -0,0 +1,50 @@
+@import "dxHelpers/reset";
+
+button {
+    border: 2px solid var(--dx-g-gray-50);
+    border-radius: 4px;
+    color: var(--dx-g-gray-50);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-smd);
+}
+
+button:focus {
+    outline: 5px solid var(--dx-g-blue-vibrant-60);
+    border-color: var(--dx-g-blue-vibrant-50);
+}
+
+button:hover {
+    border-color: var(--dx-g-blue-vibrant-20);
+}
+
+button:focus,
+button:hover {
+    background-color: var(--dx-g-blue-vibrant-95);
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+button:disabled,
+button:disabled:hover {
+    background-color: var(--dx-g-gray-80);
+    border-color: var(--dx-g-gray-80);
+    color: white;
+    cursor: default;
+}
+
+button:focus:hover {
+    border-color: var(--dx-g-blue-vibrant-50);
+}
+
+.label-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.pressed {
+    background-color: var(--sds-g-gray-14);
+    border-color: var(--sds-g-gray-14);
+    color: white;
+}

package/src/modules/dx/buttonToggle/buttonToggle.html

@@ -0,0 +1,17 @@
+<template>
+    <button
+        aria-labelledby="label"
+        class={className}
+        onclick={handleMouseEvent}
+        onmouseenter={handleMouseEvent}
+        onmouseleave={handleMouseEvent}
+        onfocus={handleMouseEvent}
+        onblur={handleMouseEvent}
+        disabled={disabled}
+    >
+        <div class="label-container">
+            <span id="label">{label}</span>
+            <dx-icon sprite="utility" symbol={symbol} size="small"></dx-icon>
+        </div>
+    </button>
+</template>

package/src/modules/dx/buttonToggle/buttonToggle.ts

@@ -0,0 +1,75 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class ButtonToggle extends LightningElement {
+    @api label!: string;
+
+    @api
+    get value() {
+        return this._value;
+    }
+    set value(value: boolean) {
+        this._value = normalizeBoolean(value);
+    }
+
+    @api
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value: boolean) {
+        this._disabled = normalizeBoolean(value);
+    }
+
+    private _value = false;
+    private _disabled = false;
+    private mouseHovering = false;
+    private hasFocus = false;
+
+    private get className(): string {
+        return cx(this.value && "pressed");
+    }
+
+    private get symbol() {
+        if (
+            (this.value && this.mouseHovering && !this.hasFocus) ||
+            (this.value && this.hasFocus)
+        ) {
+            return "close";
+        } else if (this.value) {
+            return "check";
+        }
+
+        return "add";
+    }
+
+    private handleMouseEvent(e: MouseEvent) {
+        switch (e.type) {
+            case "click":
+                this._value = !this._value;
+                this.dispatchEvent(
+                    new CustomEvent("toggle", {
+                        detail: {
+                            label: this.label,
+                            value: this.value
+                        }
+                    })
+                );
+                break;
+            case "mouseenter":
+                this.mouseHovering = true;
+                break;
+            case "mouseleave":
+                this.mouseHovering = false;
+                break;
+            case "focus":
+                this.hasFocus = true;
+                break;
+            case "blur":
+                this.hasFocus = false;
+                break;
+            default:
+                break;
+        }
+    }
+}

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -3,6 +3,8 @@ import cx from "classnames";
 import { toDxColor } from "dxUtils/css";
 import { track } from "dxUtils/analytics";
 
+export const ANALYTICS_EVENT_NAME = "custEv_ctaLinkClick";
+
 export default class CardCallout extends LightningElement {
     @api backgroundColor: string = "indigo-vibrant-40";
     @api color: string = "white";
@@ -28,10 +30,12 @@ export default class CardCallout extends LightningElement {
     }
 
     private sendGtm(e: PointerEvent) {
-        track(e.currentTarget, "custEv_ctaLinkClick", {
-            content_type: "callout",
-            item_title: this.title,
-            item_location: this.href
+        track(e.currentTarget, ANALYTICS_EVENT_NAME, {
+            clickURL: this.href,
+            itemTitle: this.title,
+            clickText: this.label,
+            elementType: "card callout",
+            destinationType: "internal"
         });
     }
 }

package/src/modules/dx/cardContent/cardContent.html

@@ -20,7 +20,10 @@
             />
         </a>
         <div
-            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
+            class="
+                dx-card-base_section-vertical dx-card-base_column
+                card_section-text
+            "
         >
             <span if:true={label} part="label" class="label dx-text-label-3">
                 {label}

package/src/modules/dx/cardDocs/cardDocs.html

@@ -7,7 +7,10 @@
             class="image dx-card-base_image"
         />
         <div
-            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
+            class="
+                dx-card-base_section-vertical dx-card-base_column
+                card_section-text
+            "
         >
             <span class="dx-text-label-3">{label}</span>
             <dx-card-title title={title} target={target}></dx-card-title>

package/src/modules/dx/cardEvent/cardEvent.html

@@ -44,8 +44,7 @@
                         {location}
                     </span>
                     <dx-type-badge
-                        color={brandType}
-                        type="content-type"
+                        color={typeBadgeColor}
                         value={type}
                         if:true={type}
                     ></dx-type-badge>

package/src/modules/dx/cardEvent/cardEvent.ts

@@ -36,7 +36,7 @@ export default class CardEvent extends LightningElement {
         this.isLinkHovered = false;
     }
 
-    private get brandType() {
+    private get typeBadgeColor() {
         return this.type === "Webinar" ? "green" : "red";
     }
 }

package/src/modules/dx/cardExpanded/cardExpanded.html

@@ -1,11 +1,6 @@
 <template>
     <div class={containerClass}>
-        <dx-type-badge
-            color={badgeColor}
-            type="content-type"
-            value={contentType}
-            size={badgeSize}
-        ></dx-type-badge>
+        <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
         <dx-card-title
             if:true={title}
             href={href}

package/src/modules/dx/cardExpanded/cardExpanded.ts

@@ -10,8 +10,8 @@ export default class ExpandedCard extends ArchiveCard {
     @api authorImgSrc?: string | null = null;
     @api length?: string;
 
-    private get isBlog() {
-        return this.contentType === "Blog";
+    private get isBlog(): boolean {
+        return this.contentType === "blog";
     }
 
     private get hasAuthor(): boolean {

package/src/modules/dx/cardMinimal/cardMinimal.html

@@ -3,11 +3,6 @@
         <a class="dx-text-truncate" href={href} target={target}>
             <h4>{title}</h4>
         </a>
-        <dx-type-badge
-            color={badgeColor}
-            size={badgeSize}
-            type="content-type"
-            value={contentType}
-        ></dx-type-badge>
+        <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
     </div>
 </template>

package/src/modules/dx/cardTrial/cardTrial.css

@@ -9,7 +9,7 @@
 }
 
 .card-trial.has-image {
-    padding-bottom: 80px;
+    padding-bottom: 90px;
 }
 
 dx-icon-badge.badge-main {
@@ -20,7 +20,9 @@ dx-icon-badge.badge-main {
 }
 
 .label {
-    margin-bottom: var(--dx-g-spacing-sm);
+    color: var(--dx-g-gray-30);
+    margin-top: 5px;
+    margin-bottom: var(--dx-g-spacing-md);
 }
 
 dx-card-title {
@@ -28,10 +30,11 @@ dx-card-title {
 }
 
 .body {
-    margin-bottom: var(--dx-g-spacing-sm);
+    margin-bottom: var(--dx-g-spacing-md);
 }
 
 .terms {
+    margin-top: auto;
     font-weight: var(--dx-g-font-bold);
 }
 
@@ -46,6 +49,10 @@ dx-hr {
     flex-direction: column;
 }
 
+.details_top-margin {
+    margin-top: var(--dx-g-spacing-lg);
+}
+
 .detail {
     display: flex;
     flex-direction: row;
@@ -67,5 +74,57 @@ img {
     position: absolute;
     bottom: 0;
     right: var(--dx-g-spacing-mlg);
-    width: var(--dx-g-spacing-6xl);
+}
+
+dx-button {
+    --dx-c-button-font-size: var(--dx-g-text-base);
+    --dx-c-button-font-weight: var(--dx-g-font-bold);
+}
+
+.recommended-container {
+    background-color: var(--dx-g-blue-vibrant-50);
+    border-radius: var(--dx-g-card-border-radius) var(--dx-g-card-border-radius)
+        0 0;
+    height: var(--dx-g-spacing-3xl);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.recommended-label {
+    color: white;
+    font-family: var(--dx-g-font-sans);
+    font-weight: var(--dx-g-font-bold);
+    font-size: var(--dx-g-text-base);
+}
+
+div.card-trial.recommended-border {
+    border: 3px solid var(--dx-g-blue-vibrant-50);
+    border-radius: 0 0 var(--dx-g-card-border-radius)
+        var(--dx-g-card-border-radius);
+}
+
+.recommended-border .top-text {
+    margin-top: var(--dx-g-spacing-mlg);
+}
+
+.top-text {
+    color: var(--dx-g-gray-30);
+}
+
+.badge-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.button-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.button-one,
+.button-two {
+    margin-top: 15px;
+    width: 100%;
 }