@salesforcedevs/dx-components 0.25.1 → 0.25.5

package/lwc.config.json

@@ -64,7 +64,6 @@
         "dx/sidebar",
         "dx/sidebarOld",
         "dx/slackCta",
-        "dx/slackButton",
         "dx/socials",
         "dx/toc",
         "dx/tree",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.25.1",
+    "version": "0.25.5",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -29,5 +29,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "19fa005af70d80558071eaacf3b0366d99004754"
+    "gitHead": "df6cab7fd62a3d7bcb6796f0f16c17088682b0e9"
 }

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

@@ -1,7 +1,7 @@
 import { html } from "lit-html";
 import mockProps from "./__tests__/mockProps";
 import featureListMockProps from "../featuresList/__tests__/mockProps";
-import { renderStyle } from "../../utils/storybook/storybook";
+import { renderStyle } from "../../utils-internal/storybook/storybook";
 
 export default {
     title: "dx/dx-group-text",

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

@@ -1,5 +1,8 @@
 import { html } from "lit-html";
-import { coveoXMLDocsConfig, coveoSFDocsConfig } from "../../utils/coveo/coveo";
+import {
+    coveoXMLDocsConfig,
+    coveoSFDocsConfig
+} from "../../utils-internal/coveo/coveo";
 import { SAMPLE_TREES, SAMPLE_TREES_WITH_METHODS } from "./__tests__/mockProps";
 
 export default {

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

@@ -8,7 +8,7 @@ describe(TAG, () => {
     it("renders the button linking to slack", () => {
         const element = render();
 
-        const slackBtn = element.shadowRoot.querySelectorAll(".slack-cta-btn");
+        const slackBtn = element.shadowRoot.querySelectorAll(".button");
         expect(slackBtn).not.toBe(undefined);
         return expect(slackBtn.length).toBe(1);
     });
@@ -28,9 +28,7 @@ describe(TAG, () => {
             .item(0);
         expect(header.textContent).toBe("Follow along with Slackfoobar");
 
-        const slackBtn = element.shadowRoot
-            .querySelectorAll(".slack-cta-btn")
-            .item(0);
+        const slackBtn = element.shadowRoot.querySelectorAll(".button").item(0);
         return expect(slackBtn.textContent).toBe("foobar");
     });
 
@@ -39,9 +37,7 @@ describe(TAG, () => {
             headerText: "foobar"
         });
 
-        const slackBtn = element.shadowRoot
-            .querySelectorAll(".slack-cta-btn")
-            .item(0);
+        const slackBtn = element.shadowRoot.querySelectorAll(".button").item(0);
         expect(slackBtn.textContent).toBe("Add to Slack");
 
         const header = element.shadowRoot

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

@@ -11,11 +11,14 @@
     text-align: center;
 }
 
+.button {
+    padding: 10px;
+}
+
 .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%;
+    background-position: 20% 25%, 80% 75%;
 }
 
 .dx-text-heading-4 {
@@ -24,14 +27,6 @@
 }
 
 @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);

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

@@ -1,6 +1,17 @@
 <template>
     <div class={containerClass}>
         <h2 class="dx-text-heading-4">{headerText}</h2>
-        <dx-slack-button class="slack-cta-btn">{innerText}</dx-slack-button>
+
+        <dx-button
+            size="large"
+            variant="secondary"
+            icon-symbol="slack"
+            icon-sprite="salesforcebrand"
+            icon-position="left"
+            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"
+            class="button"
+        >
+            {innerText}
+        </dx-button>
     </div>
 </template>

package/src/modules/dx/toc/__tests__/mockProps.ts

@@ -17,6 +17,12 @@ export default {
                 "Why build on Quip? This is an extra long blurb to test the toc wrapping ability",
             id: "quip",
             anchor: "#test3"
+        },
+        {
+            label:
+                "SomeLongExampleWordWithoutAnyBreaks and Then a Word",
+            id: "long-word",
+            anchor: "#test4"
         }
     ]
 };

package/src/modules/dx/toc/toc.css

@@ -9,6 +9,7 @@
     display: flex;
     flex-direction: row-reverse;
     width: var(--dx-c-toc-width);
+    word-break: break-word;
 }
 
 .toc_collapsed {

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

@@ -1,6 +0,0 @@
-<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/slackButton/__tests__/slackButton.test.ts

@@ -1,20 +0,0 @@
-import slackButton from "dx/slackButton";
-import { createRenderComponent } from "utils-internal/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

@@ -1,43 +0,0 @@
-@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

@@ -1,14 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

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