@salesforcedevs/dx-components 0.25.2 → 0.26.0

package/lwc.config.json

@@ -63,8 +63,8 @@
         "dx/select",
         "dx/sidebar",
         "dx/sidebarOld",
+        "dx/skipNavLink",
         "dx/slackCta",
-        "dx/slackButton",
         "dx/socials",
         "dx/toc",
         "dx/tree",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.25.2",
+    "version": "0.26.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -29,5 +29,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "66db495d67f1b7280ad0946332910f38c563d39b"
+    "gitHead": "e3cf39d3be484acbf9bae459659f6e65f1f932cf"
 }

package/src/modules/dx/header/header.html

@@ -1,7 +1,8 @@
 <template>
     <dx-brand-theme-provider brand={brand}>
         <header class={className}>
-            <dx-banner 
+            <dx-skip-nav-link></dx-skip-nav-link>
+            <dx-banner
                 if:true={bannerMarkup}
                 banner-markup={bannerMarkup}
             ></dx-banner>

package/src/modules/dx/skipNavLink/skipNavLink.css

@@ -0,0 +1,21 @@
+@import "helpers/text";
+
+a {
+    left: 0;
+    top: 0;
+    position: absolute;
+    padding: 0 var(--dx-g-spacing-mlg);
+    height: var(--dx-g-spacing-3xl);
+    transform: translateY(-1000%);
+    background: var(--dx-g-indigo-natural-20);
+    border-radius: 0 5px 5px 0;
+    z-index: 100000000;
+    text-decoration: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+a:focus {
+    transform: translateY(var(--dx-g-spacing-xl));
+}

package/src/modules/dx/skipNavLink/skipNavLink.html

@@ -0,0 +1,3 @@
+<template>
+    <a class="dx-text-button-light" href="#maincontent">Skip Navigation</a>
+</template>

package/src/modules/dx/skipNavLink/skipNavLink.ts

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

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/helpers/commonHeader/commonHeader.css

@@ -21,7 +21,7 @@ header {
     position: relative;
 }
 
-header > * {
+header > *:not(dx-skip-nav-link) {
     width: 100%;
     display: flex;
     flex-direction: row;

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 {}