@salesforcedevs/dx-components 0.26.1 → 0.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.26.1",
+    "version": "0.26.2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -29,5 +29,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "2a51ec546bb18ade7d60d2591d4402a5512d89a0"
+    "gitHead": "a51ec257e0bc853955267650e17c86e8a250ea16"
 }

package/src/modules/dx/podcastSubscription/podcastSubscription.css

@@ -49,8 +49,7 @@
 @media screen and (min-width: 768px) {
     .container {
         background-image: url("/assets/svg/podcast-subscription-clouds.svg");
-        min-height: 242px;
-        padding-top: 22px;
+        min-height: 230px;
     }
 
     .badges {

package/src/modules/dx/slackCta/__tests__/slackCta.test.ts

@@ -1,8 +1,10 @@
 import slackCta from "dx/slackCta";
 import { createRenderComponent } from "utils-internal/tests";
+import SlackCtaTest from "test-components/slackCtaTest";
 
 const TAG = "dx-slack-cta";
 const render = createRenderComponent(TAG, slackCta);
+const renderSlotted = createRenderComponent("dx-slack-cta-test", SlackCtaTest);
 
 describe(TAG, () => {
     it("renders the button linking to slack", () => {
@@ -14,7 +16,7 @@ describe(TAG, () => {
     });
 
     it("renders a button meeting all accesibilty requirements", () => {
-        const element = render();
+        const element = renderSlotted();
         return expect(element).toBeAccessible();
     });
 
@@ -26,23 +28,9 @@ describe(TAG, () => {
         const header = element.shadowRoot
             .querySelectorAll(".container")
             .item(0);
-        expect(header.textContent).toBe("Follow along with Slackfoobar");
+        expect(header.textContent).toBe("foobar");
 
         const slackBtn = element.shadowRoot.querySelectorAll(".button").item(0);
         return expect(slackBtn.textContent).toBe("foobar");
     });
-
-    it("renders the header text correctly", () => {
-        const element = render({
-            headerText: "foobar"
-        });
-
-        const slackBtn = element.shadowRoot.querySelectorAll(".button").item(0);
-        expect(slackBtn.textContent).toBe("Add to Slack");
-
-        const header = element.shadowRoot
-            .querySelectorAll(".container")
-            .item(0);
-        return expect(header.textContent).toBe("foobarAdd to Slack");
-    });
 });

package/src/modules/dx/slackCta/slackCta.css

@@ -18,12 +18,21 @@
 .podcast {
     background-image: url("/assets/svg/slack-cta-podcast-background-left.svg"),
         url("/assets/svg/slack-cta-podcast-background-right.svg");
-    background-position: 20% 25%, 80% 75%;
+    background-position: 20% 0%, 80% 100%;
+    padding-top: 20px;
+    margin-top: -20px;
+    padding-bottom: var(--dx-g-spacing-2xl);
+    margin-bottom: calc(var(--dx-g-spacing-2xl) * -1);
 }
 
 .dx-text-heading-4 {
     font-size: var(--dx-g-text-lg);
-    max-width: 40%;
+    max-width: 370px;
+}
+@media screen and (max-width: 1000px) {
+    .podcast {
+        background-position: 10% 10%, 90% 100%;
+    }
 }
 
 @media screen and (max-width: 768px) {
@@ -31,11 +40,8 @@
         max-width: 28ex;
         font-size: var(--dx-g-text-lg);
     }
-}
 
-@media screen and (min-width: 768px) {
-    .container {
-        min-height: 242px;
-        padding-top: 22px;
+    .podcast {
+        background-image: none;
     }
 }

package/src/modules/dx/slackCta/slackCta.html

@@ -1,9 +1,9 @@
 <template>
     <div class={containerClass}>
-        <h2 class="dx-text-heading-4">{headerText}</h2>
+        <h2 class="dx-text-heading-4"><slot></slot></h2>
 
         <dx-button
-            size="large"
+            size="small"
             variant="secondary"
             icon-symbol="slack"
             icon-sprite="salesforcebrand"

package/src/modules/dx/slackCta/slackCta.stories.ts

@@ -17,9 +17,9 @@ export const Base = () => `
     ${createStyles()}
     <h2>Add to Slack</h2>
 
-    <dx-slack-cta header-text="Get notified of new episodes with the new Salesforce Developers Slack app" background="podcast"></dx-slack-cta>
-    
-    <dx-slack-cta header-text="Get the latest Salesforce Developer posts exactly how you want." inner-text="Send posts to Slack" background="blog"></dx-slack-cta>
+    <dx-hr spacing="2xl"></dx-hr>
+    <dx-slack-cta background="podcast">Get notified of new episodes with the new Salesforce Developers Slack app</dx-slack-cta>
+    <dx-hr spacing="2xl"></dx-hr>
 
-    <dx-slack-cta header-text="Get notified of new events with the new Salesforce Developers Slack app"></dx-slack-cta>
+    <dx-slack-cta inner-text="Send posts to Slack" >Get the latest Salesforce Developer posts exactly how you want.</dx-slack-cta>
 `;

package/src/modules/dx/slackCta/slackCta.ts

@@ -3,7 +3,6 @@ import { SlackCtaBackgroundVariant } from "typings/custom";
 import cx from "classnames";
 
 export default class SlackAdd extends LightningElement {
-    @api headerText?: string = "Follow along with Slack";
     @api innerText?: string = "Add to Slack";
     @api background?: SlackCtaBackgroundVariant;
 

package/src/modules/test-components/slackCtaTest/slackCtaTest.html

@@ -0,0 +1,3 @@
+<template>
+    <dx-slack-cta>test</dx-slack-cta>
+</template>

package/src/modules/test-components/slackCtaTest/slackCtaTest.ts

@@ -0,0 +1,3 @@
+import { LightningElement } from "lwc";
+
+export default class SlackCtaTest extends LightningElement {}