@salesforcedevs/dx-components 0.23.0-alpha.3 → 0.24.1

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.23.0-alpha.3",
+    "version": "0.24.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -28,5 +28,6 @@
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
-    }
+    },
+    "gitHead": "e658d28b81079529279b62fa98087020336ede4f"
 }

package/src/assets/svg/slack-cta-podcast-background-left.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="114px" height="122px" viewBox="0 0 114 122" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>podcast-cta-graphic-left</title>
+    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Podcast" transform="translate(-363.000000, -3482.000000)">
+            <g id="CTA-signup" transform="translate(52.000000, 3441.500000)">
+                <g id="podcast-cta-graphic-left" transform="translate(312.000000, 41.500000)">
+                    <path d="M19.3477,79.53155 C16.3647,73.75655 14.6787,67.20155 14.6787,60.25255 C14.6787,54.58155 15.8017,49.17255 17.8357,44.23455" id="Stroke-1" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M98.3809,54.21995 C98.6629,56.18995 98.8099,58.20395 98.8099,60.25195 C98.8099,83.48495 79.9769,102.31795 56.7439,102.31795 C42.5819,102.31795 30.0549,95.31995 22.4319,84.59195" id="Stroke-3" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M20.6133,38.69755 C27.9583,26.41255 41.3903,18.18655 56.7443,18.18655 C75.7943,18.18655 91.8853,30.84855 97.0623,48.21555" id="Stroke-5" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M92.209,0.79125 L90.492,5.43125 C90.37,5.76325 90.108,6.02425 89.776,6.14625 L85.137,7.86425 C84.082,8.25425 84.082,9.74625 85.137,10.13725 L89.776,11.85425 C90.108,11.97625 90.37,12.23725 90.492,12.56925 L92.209,17.20925 C92.6,18.26425 94.092,18.26425 94.482,17.20925 L96.199,12.56925 C96.321,12.23725 96.583,11.97625 96.915,11.85425 L101.555,10.13725 C102.609,9.74625 102.609,8.25425 101.555,7.86425 L96.915,6.14625 C96.583,6.02425 96.321,5.76325 96.199,5.43125 L94.482,0.79125 C94.092,-0.26375 92.6,-0.26375 92.209,0.79125 Z" id="Stroke-7" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M24.4414,114.48275 C24.4414,117.31375 22.1464,119.60875 19.3154,119.60875 C16.4854,119.60875 14.1904,117.31375 14.1904,114.48275 C14.1904,111.65275 16.4854,109.35775 19.3154,109.35775 C22.1464,109.35775 24.4414,111.65275 24.4414,114.48275 Z" id="Stroke-9" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M56.7012,38.94555 C56.7012,40.32655 55.5822,41.44555 54.2012,41.44555 C52.8212,41.44555 51.7012,40.32655 51.7012,38.94555 C51.7012,37.56455 52.8212,36.44555 54.2012,36.44555 C55.5822,36.44555 56.7012,37.56455 56.7012,38.94555" id="Fill-11" fill="#8FD0FE"></path>
+                    <line x1="87.835" y1="53.99925" x2="102.642" y2="53.99925" id="Stroke-13" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <line x1="108.332" y1="53.99925" x2="111.857" y2="53.99925" id="Stroke-15" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <line x1="16" y1="39.35765" x2="27.56" y2="39.35765" id="Stroke-17" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <line x1="0" y1="39.35765" x2="5" y2="39.35765" id="Stroke-19" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <path d="M11.4131,39.35765 C11.4131,39.90965 10.9651,40.35765 10.4131,40.35765 C9.8601,40.35765 9.4131,39.90965 9.4131,39.35765 C9.4131,38.80465 9.8601,38.35765 10.4131,38.35765 C10.9651,38.35765 11.4131,38.80465 11.4131,39.35765" id="Fill-21" fill="#3A49DA"></path>
+                    <path d="M11.4131,39.35765 C11.4131,39.90965 10.9651,40.35765 10.4131,40.35765 C9.8601,40.35765 9.4131,39.90965 9.4131,39.35765 C9.4131,38.80465 9.8601,38.35765 10.4131,38.35765 C10.9651,38.35765 11.4131,38.80465 11.4131,39.35765 Z" id="Stroke-23" stroke="#8FD0FE"></path>
+                    <line x1="11.5957" y1="84.26595" x2="27.2177" y2="84.26595" id="Stroke-25" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <path d="M33.2178,84.26595 C33.2178,84.81795 32.7698,85.26595 32.2178,85.26595 C31.6648,85.26595 31.2178,84.81795 31.2178,84.26595 C31.2178,83.71295 31.6648,83.26595 32.2178,83.26595 C32.7698,83.26595 33.2178,83.71295 33.2178,84.26595" id="Fill-27" fill="#8FD0FE"></path>
+                    <line x1="71.3252" y1="72.71315" x2="71.3252" y2="64.73715" id="Stroke-29" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <line x1="75.3125" y1="68.72685" x2="67.3295" y2="68.72785" id="Stroke-31" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/slack-cta-podcast-background-right.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="156px" height="83px" viewBox="0 0 156 83" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>podcast-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="Podcast" transform="translate(-888.000000, -3624.000000)" stroke="#8FD0FE" stroke-width="2">
+            <g id="CTA-signup" transform="translate(52.000000, 3441.500000)">
+                <g id="podcast-cta-graphic-right" transform="translate(837.000000, 183.500000)">
+                    <g id="tree-3" transform="translate(100.000000, 33.000600)">
+                        <line x1="8.66354655" y1="14.0094" x2="18.2225465" y2="18.7884" id="Stroke-1"></line>
+                        <path d="M36.6263465,25.983 C36.6263465,22.958 35.0753465,20.293 32.7303465,18.728 C33.8543465,17.559 34.5543465,15.98 34.5543465,14.235 C34.5543465,10.654 31.6413465,7.74 28.0573465,7.74 C27.3923465,7.74 26.7623465,7.87 26.1563465,8.056 C26.0433465,3.597 22.3983465,0 17.9113465,0 C13.5013465,0 9.88634655,3.474 9.65834655,7.83 C9.30234655,7.77 8.93834655,7.74 8.57034655,7.74 C4.98934655,7.74 2.07534655,10.654 2.07534655,14.235 C2.07534655,15.98 2.77534655,17.56 3.89934655,18.728 C3.42434655,19.046 2.96934655,19.402 2.55434655,19.817 C0.570346547,21.803 -0.323653453,24.549 0.105346547,27.35 C0.607346547,30.633 3.01434655,33.34 6.13234655,34.307 L18.0263465,39.307 L31.0963465,34.102 L31.0893465,34.082 C34.3243465,32.805 36.6263465,29.666 36.6263465,25.983 Z" id="Stroke-2"></path>
+                        <line x1="27.4877465" y1="14.0094" x2="17.9287465" y2="18.7884" id="Stroke-4"></line>
+                        <line x1="8.66354655" y1="25.6402" x2="18.2225465" y2="30.4192" id="Stroke-6"></line>
+                        <line x1="27.4877465" y1="25.6402" x2="17.9287465" y2="30.4192" id="Stroke-8"></line>
+                        <line x1="18.3197465" y1="9.6207" x2="18.3197465" y2="47.9747" id="Stroke-10"></line>
+                    </g>
+                    <g id="tree-2" transform="translate(50.000247, 42.000000)">
+                        <path d="M27.3664984,9.39600248 C27.2895938,9.39600248 27.2184571,9.41646246 27.1415525,9.41841103 C27.1578947,9.19432553 27.208844,8.97998288 27.208844,8.75102595 C27.208844,3.91759913 23.3424658,0 18.5743812,0 C13.8053353,0 9.93991829,3.91759913 9.93991829,8.75102595 C9.93991829,9.01992855 9.99471281,9.27421688 10.0177842,9.53727377 C9.5640471,9.46225385 9.10934871,9.39600248 8.63542418,9.39600248 C3.86637827,9.39600248 0,13.3136016 0,18.1460541 C0,22.979481 3.86637827,26.8970801 8.63542418,26.8970801 C9.21605383,26.8970801 9.78322519,26.8347259 10.333093,26.7236574 C11.3914924,30.3431254 14.6599375,33 18.5743812,33 C22.4474886,33 25.6861331,30.3976853 26.7810622,26.8376487 C26.9781303,26.8512887 27.1655852,26.8970801 27.3664984,26.8970801 C32.134583,26.8970801 36,22.979481 36,18.1460541 C36,13.3136016 32.134583,9.39600248 27.3664984,9.39600248 Z" id="Stroke-1"></path>
+                        <polyline id="Stroke-3" points="25 18 18.000488 25 11 18"></polyline>
+                        <line x1="18.5" y1="11" x2="18.5" y2="39" id="Stroke-5"></line>
+                    </g>
+                    <g id="tree-1" transform="translate(0.000000, 33.000600)">
+                        <line x1="8.66354655" y1="14.0094" x2="18.2225465" y2="18.7884" id="Stroke-1"></line>
+                        <g id="Group-12">
+                            <path d="M36.6263465,25.983 C36.6263465,22.958 35.0753465,20.293 32.7303465,18.728 C33.8543465,17.559 34.5543465,15.98 34.5543465,14.235 C34.5543465,10.654 31.6413465,7.74 28.0573465,7.74 C27.3923465,7.74 26.7623465,7.87 26.1563465,8.056 C26.0433465,3.597 22.3983465,0 17.9113465,0 C13.5013465,0 9.88634655,3.474 9.65834655,7.83 C9.30234655,7.77 8.93834655,7.74 8.57034655,7.74 C4.98934655,7.74 2.07534655,10.654 2.07534655,14.235 C2.07534655,15.98 2.77534655,17.56 3.89934655,18.728 C3.42434655,19.046 2.96934655,19.402 2.55434655,19.817 C0.570346547,21.803 -0.323653453,24.549 0.105346547,27.35 C0.607346547,30.633 3.01434655,33.34 6.13234655,34.307 L18.0263465,39.307 L31.0963465,34.102 L31.0893465,34.082 C34.3243465,32.805 36.6263465,29.666 36.6263465,25.983 Z" id="Stroke-2"></path>
+                            <line x1="27.4877465" y1="14.0094" x2="17.9287465" y2="18.7884" id="Stroke-4"></line>
+                            <line x1="8.66354655" y1="25.6402" x2="18.2225465" y2="30.4192" id="Stroke-6"></line>
+                            <line x1="27.4877465" y1="25.6402" x2="17.9287465" y2="30.4192" id="Stroke-8"></line>
+                            <line x1="18.3197465" y1="9.6207" x2="18.3197465" y2="47.9747" id="Stroke-10"></line>
+                        </g>
+                    </g>
+                    <path d="M148.368697,17.4393933 L147.41455,20.0170007 C147.347052,20.201175 147.202055,20.3470145 147.017892,20.4145173 L144.439612,21.3687237 C143.853791,21.5853994 143.853791,22.4146006 144.439612,22.6312763 L147.017892,23.5854827 C147.202055,23.6538189 147.347052,23.798825 147.41455,23.9829993 L148.368697,26.5606067 C148.586193,27.1464644 149.414509,27.1464644 149.632004,26.5606067 L150.585318,23.9829993 C150.65365,23.798825 150.798647,23.6538189 150.983643,23.5854827 L153.560256,22.6312763 C154.14691,22.4146006 154.14691,21.5853994 153.560256,21.3687237 L150.983643,20.4145173 C150.798647,20.3470145 150.65365,20.201175 150.585318,20.0170007 L149.632004,17.4393933 C149.414509,16.8535356 148.586193,16.8535356 148.368697,17.4393933 Z" id="Stroke-150"></path>
+                    <path d="M66.3695305,0.439393308 L65.4145504,3.01700071 C65.3470518,3.20117505 65.2020548,3.34701446 65.017892,3.41451727 L62.4396124,4.3687237 C61.8537913,4.58539939 61.8537913,5.41460061 62.4396124,5.6312763 L65.017892,6.58548273 C65.2020548,6.65381891 65.3470518,6.79882495 65.4145504,6.98299929 L66.3695305,9.56060669 C66.5861927,10.1464644 67.4153421,10.1464644 67.6320042,9.56060669 L68.5853177,6.98299929 C68.6536496,6.79882495 68.7986466,6.65381891 68.9836427,6.58548273 L71.5602557,5.6312763 C72.1469102,5.41460061 72.1469102,4.58539939 71.5602557,4.3687237 L68.9836427,3.41451727 C68.7986466,3.34701446 68.6536496,3.20117505 68.5853177,3.01700071 L67.6320042,0.439393308 C67.4153421,-0.146464436 66.5861927,-0.146464436 66.3695305,0.439393308 Z" id="Stroke-152"></path>
+                    <path d="M50.0002465,20 C50.0002465,18.3436725 48.6572963,17 46.9997812,17 C45.3431968,17 44.0002465,18.3436725 44.0002465,20 C44.0002465,21.6572581 45.3431968,23 46.9997812,23 C48.6572963,23 50.0002465,21.6572581 50.0002465,20 Z" id="Stroke-158"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/slack-logo.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="height:20px;width:20px;margin-right:12px" viewBox="0 0 122.8 122.8">
+    <path d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z" fill="#e01e5a"></path>
+    <path d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z" fill="#36c5f0"></path>
+    <path d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z" fill="#2eb67d"></path>
+    <path d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z" fill="#ecb22e"></path>
+</svg>

package/src/modules/dx/sidebar/sidebar.ts

@@ -205,7 +205,6 @@ export default class Sidebar extends LightningElement {
             );
         }
         this.isSearchLoading = e.detail;
-        console.log(e)
     }
 
     private onSidebarSearchContentScroll() {

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -53,7 +53,6 @@ export default class SidebarSearch extends LightningElement {
 
         if (hasChanged && this.engine) {
             // set advanced filters needs access to the latest coveoAdvancedQueryConfig
-            console.log('dispatching in the query change')
             this.dispatchOnLoading(true);
             this.setAdvancedFilters(this.engine);
             this.submitSearch(true);

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

@@ -0,0 +1,20 @@
+import slackButton from "dx/slackButton";
+import { createRenderComponent } from "utils/tests";
+
+const TAG = "dx-slack-button";
+const render = createRenderComponent(TAG, slackButton);
+
+describe(TAG, () => {
+    it("renders the button linking to slack", () => {
+        const element = render();
+
+        const slackBtn = element.shadowRoot.querySelectorAll(".slack-btn a");
+        expect(slackBtn).not.toBe(undefined);
+        return expect(slackBtn.length).toBe(1);
+    });
+
+    it("renders a button meeting all accesibilty requirements", () => {
+        const element = render();
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/slackButton/slackButton.css

@@ -0,0 +1,43 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.slack-cta-button {
+    align-items: center;
+    background-color: #fff;
+    border: 2px solid rgb(1, 118, 211);
+    border-radius: 4px;
+    display: inline-flex;
+    height: 48px;
+    justify-content: center;
+    text-decoration: none;
+    padding: 10px;
+    color: rgb(1, 118, 211);
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0;
+    line-height: 20px;
+}
+
+@media screen and (max-width: 768px) {
+    .slack-btn a {
+        display: inline-flex;
+        margin: 4px auto;
+    }
+
+    .slack-btn img {
+        height: 20px;
+        padding-right: 10px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .slack-btn a {
+        display: inline-flex;
+        margin: 22px 13px 8px 13px;
+    }
+
+    .slack-btn img {
+        height: 20px;
+        padding-right: 10px;
+    }
+}

package/src/modules/dx/slackButton/slackButton.html

@@ -0,0 +1,14 @@
+<template>
+    <div class="slack-btn">
+        <a
+            class="slack-cta-button"
+            href="https://slack.com/oauth/v2/authorize?scope=chat%3Awrite%2Ccommands&amp;user_scope=&amp;redirect_uri=https%3A%2F%2Fdsc-slack-app.herokuapp.com%2Fslack%2Foauth_redirect&amp;client_id=1814240140212.2864842743411"
+        >
+            <img
+                src="/assets/svg/slack-logo.svg"
+                alt="install slack extension"
+            />
+            <slot></slot>
+        </a>
+    </div>
+</template>

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

@@ -0,0 +1,21 @@
+export default {
+    title: "dx/dx-slack-button",
+    component: "dx-slack-button"
+};
+
+const createStyles = () => `
+    <style>
+        h2 {
+            font-weight: bold;
+            font-size: 24px;
+            margin: 10px 0 30px 0;
+        }
+    </style>
+`;
+
+export const Base = () => `
+    ${createStyles()}
+    <h2>Slack Button</h2>
+
+    <dx-slack-button>Slack</dx-slack-button>
+`;

package/src/modules/dx/slackButton/slackButton.ts

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

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

@@ -0,0 +1,52 @@
+import slackCta from "dx/slackCta";
+import { createRenderComponent } from "utils/tests";
+
+const TAG = "dx-slack-cta";
+const render = createRenderComponent(TAG, slackCta);
+
+describe(TAG, () => {
+    it("renders the button linking to slack", () => {
+        const element = render();
+
+        const slackBtn = element.shadowRoot.querySelectorAll(".slack-cta-btn");
+        expect(slackBtn).not.toBe(undefined);
+        return expect(slackBtn.length).toBe(1);
+    });
+
+    it("renders a button meeting all accesibilty requirements", () => {
+        const element = render();
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders the inner button text correctly", () => {
+        const element = render({
+            innerText: "foobar"
+        });
+
+        const header = element.shadowRoot
+            .querySelectorAll(".container")
+            .item(0);
+        expect(header.textContent).toBe("Follow along with Slackfoobar");
+
+        const slackBtn = element.shadowRoot
+            .querySelectorAll(".slack-cta-btn")
+            .item(0);
+        return expect(slackBtn.textContent).toBe("foobar");
+    });
+
+    it("renders the header text correctly", () => {
+        const element = render({
+            headerText: "foobar"
+        });
+
+        const slackBtn = element.shadowRoot
+            .querySelectorAll(".slack-cta-btn")
+            .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

@@ -0,0 +1,46 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.container {
+    background-repeat: no-repeat;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.podcast {
+    background-image: url("/assets/svg/slack-cta-podcast-background-left.svg"),
+        url("/assets/svg/slack-cta-podcast-background-right.svg");
+    background-size: 40% 40%;
+    background-position: 5% 25%, 95% 75%;
+}
+
+.dx-text-heading-4 {
+    font-size: var(--dx-g-text-lg);
+    max-width: 40%;
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        background-position: -100% 25%, 180% 75%;
+    }
+
+    .podcast.container {
+        background-size: 75% 60%;
+    }
+
+    .dx-text-heading-4 {
+        max-width: 28ex;
+        font-size: var(--dx-g-text-lg);
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .container {
+        min-height: 242px;
+        padding-top: 22px;
+    }
+}

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

@@ -0,0 +1,6 @@
+<template>
+    <div class={containerClass}>
+        <h2 class="dx-text-heading-4">{headerText}</h2>
+        <dx-slack-button class="slack-cta-btn">{innerText}</dx-slack-button>
+    </div>
+</template>

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

@@ -0,0 +1,25 @@
+export default {
+    title: "dx/dx-slack-cta",
+    component: "dx-slack-cta"
+};
+
+const createStyles = () => `
+    <style>
+        h2 {
+            font-weight: bold;
+            font-size: 24px;
+            margin: 10px 0 30px 0;
+        }
+    </style>
+`;
+
+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-slack-cta header-text="Get notified of new events with the new Salesforce Developers Slack app"></dx-slack-cta>
+`;

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

@@ -0,0 +1,13 @@
+import { LightningElement, api } from "lwc";
+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;
+
+    get containerClass() {
+        return cx("container", this.background);
+    }
+}