@salesforcedevs/dw-components 1.16.3 → 1.17.6

package/lwc.config.json

@@ -26,7 +26,6 @@
         "dw/podcastsPromo",
         "dw/rcgTable",
         "dw/recaptcha",
-        "dw/slackCta",
         "dw/tbidLoginMenu",
         "dwUtils/forms"
     ]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.16.3",
+    "version": "1.17.6",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -26,5 +26,5 @@
         "@types/setimmediate": "1.0.4",
         "setimmediate": "1.0.5"
     },
-    "gitHead": "f8568b8045441f7665a88afbff63c3c2a0e173a8"
+    "gitHead": "a3108bb2342f34377f5ec64b2bd0cb0c67c2c506"
 }

package/src/modules/dw/blogsGrid/blogsGrid.css

@@ -5,80 +5,6 @@
     --dx-c-post-list-padding-horizontal: var(--dx-g-page-padding-horizontal);
 }
 
-.title {
-    font-family: var(--dx-g-font-display);
-    color: var(--dx-g-blue-vibrant-20);
-    font-weight: 500;
-    text-align: center;
-}
-
-dx-section.section-reduced-padding {
-    --dx-c-section-padding-vertical: unset;
-}
-
-@media only screen and (min-width: 640px) {
-    .title {
-        font-size: 24px;
-        height: 64px;
-        letter-spacing: -0.5px;
-        line-height: 32px;
-        width: 500px;
-    }
-}
-
-@media only screen and (max-width: 640px) {
-    .title {
-        font-size: 20px;
-        height: 84px;
-        letter-spacing: -0.4px;
-        line-height: 28px;
-        width: 321px;
-    }
-
-    .box {
-        background-position: 0% 25%, 90% 75%;
-    }
-}
-
-.button {
-    font-size: 14px;
-    font-weight: 500;
-    letter-spacing: 0;
-    height: 48px;
-    padding: 10px;
-}
-
-.subscription-box {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-}
-
-.subscription-box > .box > .content > .title {
-    color: var(--dx-g-text-heading-color);
-}
-
-.content {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-}
-
-.cta-container {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.box {
-    background-image: var(--dx-blog-grid-themed-left-subscribe-image),
-        var(--dx-blog-grid-themed-right-subscribe-image);
-    background-position: 4% 25%, 90% 60%;
-    background-repeat: no-repeat;
-    width: 100%;
-}
-
 .icon {
     float: right;
     margin-left: 6px;

package/src/modules/dw/blogsGrid/blogsGrid.html

@@ -1,44 +1,4 @@
 <template>
-    <dx-hr spacing="2xl"></dx-hr>
-
-    <dx-section class="section-padding-lg section-reduced-padding">
-        <div class="subscription-box">
-            <div class="box">
-                <div class="content">
-                    <h2 class="title">{rssTitle}</h2>
-                    <p lwc:if={rssBody}>{rssBody}</p>
-                    <div class="cta-container">
-                        <dx-button
-                            size="small"
-                            variant="secondary"
-                            icon-symbol="slack"
-                            icon-sprite="salesforcebrand"
-                            icon-position="left"
-                            href="/slack/install"
-                            class="button"
-                        >
-                            {rssBtnOneLabel}
-                        </dx-button>
-                        <dx-button
-                            size="small"
-                            variant="secondary"
-                            icon-symbol="rss"
-                            icon-position="left"
-                            icon-sprite="general"
-                            href="https://developer.salesforce.com/blogs/feed"
-                            class="button"
-                            onclick={rssOnClick}
-                        >
-                            {rssBtnTwoLabel}
-                        </dx-button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </dx-section>
-
-    <dx-hr spacing="2xl"></dx-hr>
-
     <div class="container">
         <dx-grid columns={columns}>
             <template for:each={postList} for:item="post">

package/src/modules/dw/blogsGrid/blogsGrid.ts

@@ -1,26 +1,11 @@
 import { api } from "lwc";
 import { normalizePost } from "dxUtils/normalizers";
-import { track } from "dxUtils/analytics";
 import { WordpressBlogPost, NormalizedPost } from "typings/custom";
 import { PostsGrid } from "dwUtils/postsGrid";
 
-const BLOG_SUBSCRIBE_HREF = "https://developer.salesforce.com/blogs/feed";
-
-const ANALYTICS_INFO = {
-    click_text: "Subscribe to RSS",
-    element_title: "Subscribe to RSS",
-    click_url: BLOG_SUBSCRIBE_HREF,
-    content_category: "cta"
-};
-
 export default class BlogsGrid extends PostsGrid {
     @api showMoreLabel = "SHOW MORE";
     @api viewArchivesLabel = "VIEW ARCHIVES";
-    @api rssTitle =
-        "Get the latest Salesforce Developer blog posts and podcast episodes via Slack or RSS.";
-    @api rssBody?: string;
-    @api rssBtnOneLabel = "Add to Slack";
-    @api rssBtnTwoLabel = "Subscribe to RSS";
     @api archiveCta = "/content-archive?content-type=Blogs";
 
     _loadMoreAmount = 21;
@@ -28,15 +13,4 @@ export default class BlogsGrid extends PostsGrid {
     normalizePost(post: WordpressBlogPost): NormalizedPost {
         return normalizePost(post);
     }
-
-    rssOnClick(event: Event): void {
-        track(event.target!, "custEv_ctaButtonClick", {
-            ...ANALYTICS_INFO,
-            element_type: "button"
-        });
-        track(event.target!, "custEv_linkClick", {
-            ...ANALYTICS_INFO,
-            element_type: "link"
-        });
-    }
 }

package/src/modules/dw/codeSamplesGrid/codeSamplesGrid.ts

@@ -2,6 +2,7 @@ import { api, LightningElement } from "lwc";
 
 import { CodeSample } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 const DEFAULT_BUTTON_TEXT = "Explore on GitHub";
 export default class CodeSamplesGrid extends LightningElement {
@@ -66,4 +67,18 @@ export default class CodeSamplesGrid extends LightningElement {
             this.deviceType = "mobile-small";
         }
     };
+
+    handleReadItClick(event: any) {
+        track(document, "custEv_ctaButtonClick", {
+            click_text: event.currentTarget.innerText,
+            item_title: event.currentTarget.innerText,
+            click_url: `${
+                event.currentTarget.href.includes("http")
+                    ? event.currentTarget.href
+                    : window.location.origin + event.currentTarget.href
+            }`,
+            element_type: "button",
+            content_category: "cta"
+        });
+    }
 }

package/src/modules/dw/slackCta/slackCta.css

@@ -1,46 +0,0 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-
-.container {
-    background-repeat: no-repeat;
-    display: flex;
-    flex-flow: column wrap;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-
-.button {
-    padding: 10px;
-}
-
-.podcast {
-    background-image: url("https://a.sfdcstatic.com/developer-website/images/slack-cta-podcast-background-left.svg"),
-        url("https://a.sfdcstatic.com/developer-website/images/slack-cta-podcast-background-right.svg");
-    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-display-6 {
-    font-size: var(--dx-g-text-xl);
-    max-width: 370px;
-}
-@media screen and (max-width: 1000px) {
-    .podcast {
-        background-position: 10% 10%, 90% 100%;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .dx-text-display-6 {
-        max-width: 28ex;
-        font-size: var(--dx-g-text-lg);
-    }
-
-    .podcast {
-        background-image: none;
-    }
-}

package/src/modules/dw/slackCta/slackCta.html

@@ -1,17 +0,0 @@
-<template>
-    <div class={containerClass}>
-        <h2 class="dx-text-display-6"><slot></slot></h2>
-
-        <dx-button
-            size="small"
-            variant="secondary"
-            icon-symbol="slack"
-            icon-sprite="salesforcebrand"
-            icon-position="left"
-            href="/slack/install"
-            class="button"
-        >
-            {innerText}
-        </dx-button>
-    </div>
-</template>

package/src/modules/dw/slackCta/slackCta.ts

@@ -1,12 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { SlackCtaBackgroundVariant } from "typings/custom";
-import cx from "classnames";
-
-export default class SlackAdd extends LightningElement {
-    @api innerText?: string = "Add to Slack";
-    @api background?: SlackCtaBackgroundVariant;
-
-    get containerClass() {
-        return cx("container", this.background);
-    }
-}