@salesforcedevs/dx-components 0.24.2 → 0.25.3

package/src/modules/{utils → utils-internal}/recentSearches/__tests__/recentSearches.test.ts

@@ -1,4 +1,8 @@
-import { RecentSearches, LOCAL_STORAGE_KEY, LIMIT } from "utils/recentSearches";
+import {
+    RecentSearches,
+    LOCAL_STORAGE_KEY,
+    LIMIT
+} from "utils-internal/recentSearches";
 
 describe("recentSearches", () => {
     beforeEach(() => {

package/src/modules/utils-internal/storybook/storybook.ts

@@ -0,0 +1,32 @@
+import { html } from "lit-html";
+
+export const createRenderComponents =
+    (component: string) =>
+    (num: number = 12, props: string = "") => {
+        let shell = ``;
+        for (let i = 0; i < num; i++) {
+            const insertIndex = component.indexOf(">");
+            const _component = [
+                component.slice(0, insertIndex),
+                ` ${props}`,
+                component.slice(insertIndex)
+            ].join("");
+            shell = `
+        ${shell}
+        ${_component}
+      `;
+        }
+        return shell;
+    };
+
+export const renderStyle = (componentTag: string) => html`
+    <style>
+        span {
+            color: grey;
+        }
+        ${componentTag} {
+            margin-top: 16px;
+            margin-bottom: 36px;
+        }
+    </style>
+`;

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

package/src/modules/utils/storybook/storybook.ts

@@ -1,33 +0,0 @@
-import { html } from "lit-html";
-
-export const createRenderComponents = (component: string) => (
-    num: number = 12,
-    props: string = ""
-) => {
-    let shell = ``;
-    for (let i = 0; i < num; i++) {
-        const insertIndex = component.indexOf(">");
-        const _component = [
-            component.slice(0, insertIndex),
-            ` ${props}`,
-            component.slice(insertIndex)
-        ].join("");
-        shell = `
-        ${shell}
-        ${_component}
-      `;
-    }
-    return shell;
-};
-
-export const renderStyle = (componentTag: string) => html`
-    <style>
-        span {
-            color: grey;
-        }
-        ${componentTag} {
-            margin-top: 16px;
-            margin-bottom: 36px;
-        }
-    </style>
-`;