@salesforcedevs/mrkt-components 0.0.0-alpha.2 → 0.0.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/mrkt-components",
-    "version": "0.0.0-alpha.2",
+    "version": "0.0.0-alpha.5",
     "description": "Marketing Lightning web components for DSC",
     "license": "MIT",
     "engines": {

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.css

@@ -5,19 +5,19 @@
     --padding-vertical: 108px;
     --mrkt-c-two-col-list-section-padding-top: var(--padding-vertical);
     --mrkt-c-two-col-list-section-padding-bottom: var(--padding-vertical);
+    --mrkt-c-two-col-list-section-align-items: center;
 }
 
 .two-col-panel-section {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
+    align-items: var(--mrkt-c-two-col-list-section-align-items);
     width: 100%;
     padding: var(--mrkt-c-two-col-list-section-padding-top)
         var(--dx-g-page-padding-horizontal)
         var(--mrkt-c-two-col-list-section-padding-bottom)
         var(--dx-g-page-padding-horizontal);
-    overflow: hidden;
 }
 
 .text-container {
@@ -79,7 +79,7 @@ img {
 .graphic-1 {
     width: 306px;
     bottom: 100px;
-    left: -106px;
+    left: -120px;
     z-index: 0;
 }
 
@@ -138,6 +138,12 @@ img {
 }
 
 @media (max-width: 768px) {
+    .main-cta {
+        --dx-c-button-display: inline;
+        --dx-c-button-horizontal-spacing: var(--dx-g-spacing-md);
+        --dx-c-button-vertical-spacing: var(--dx-g-spacing-xs);
+    }
+
     .two-col-panel-section {
         display: flex;
         flex-direction: column;

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.ts

@@ -1,6 +1,5 @@
 import { api, LightningElement } from "lwc";
 import cx from "classnames";
-import mockProps from "./__tests__/mockProps";
 
 export default class TwoColPanelSection extends LightningElement {
     @api body!: string;
@@ -13,18 +12,18 @@ export default class TwoColPanelSection extends LightningElement {
 
     @api modalBadgeBackgroundColor?: string;
     @api modalBadgeSprite?: string;
-    @api modalBadgeSymbol?: string = mockProps.badgeSymbol;
-    @api modalTitle?: string = mockProps.title;
-    @api modalBody?: string = mockProps.body;
-    @api modalDetails?: string = JSON.stringify(mockProps.details);
-    @api modalLabel: string = mockProps.label;
-    @api modalTerms: string = mockProps.terms;
-    @api modalTwoColTitle: string = mockProps.twoColTitle;
-    @api modalTwoColDetails: string = JSON.stringify(mockProps.twoColDetails);
-    @api modalButtonCta: string = mockProps.buttonOneCta;
-    @api modalButtonHref: string = mockProps.buttonOneHref;
-    @api modalButtonIcon: string = mockProps.buttonOneIcon;
-    @api modalButtonIconSize: string = mockProps.buttonOneIconSize;
+    @api modalBadgeSymbol?: string;
+    @api modalTitle?: string;
+    @api modalBody?: string;
+    @api modalDetails?: string;
+    @api modalLabel?: string;
+    @api modalTerms?: string;
+    @api modalTwoColTitle?: string;
+    @api modalTwoColDetails?: string;
+    @api modalButtonCta?: string;
+    @api modalButtonHref?: string;
+    @api modalButtonIcon?: string;
+    @api modalButtonIconSize?: string;
 
     private modalOpen: boolean = false;