@salesforcedevs/dx-components 0.24.0 → 0.25.1

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-cta-blog-background-left.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="45px" height="34px" viewBox="0 0 45 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>blog-cta-graphic-left</title>
-    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Blog---v1" transform="translate(-424.000000, -2216.000000)" stroke-width="2">
-            <g id="CTA-signup" transform="translate(52.000000, 2169.000000)">
-                <g id="blog-cta-graphic-left" transform="translate(373.000000, 47.500000)">
-                    <circle id="Oval-Copy-12" stroke="#90D1FF" cx="39.5" cy="4.5" r="3.5"></circle>
-                    <path d="M7.42619649,16.2472709 L5.80463043,20.6293714 C5.68941141,20.9429183 5.44197383,21.1894114 5.12842699,21.3046304 L0.747270909,22.9271409 C-0.249090303,23.295464 -0.249090303,24.704536 0.747270909,25.0738035 L5.12842699,26.6953696 C5.44197383,26.8105886 5.68941141,27.0570817 5.80463043,27.3706286 L7.42619649,31.7527291 C7.79546401,32.7490903 9.20453599,32.7490903 9.57285909,31.7527291 L11.1944252,27.3706286 C11.3096442,27.0570817 11.5570817,26.8105886 11.8706286,26.6953696 L16.2527291,25.0738035 C17.2481459,24.704536 17.2481459,23.295464 16.2527291,22.9271409 L11.8706286,21.3046304 C11.5570817,21.1894114 11.3096442,20.9429183 11.1944252,20.6293714 L9.57285909,16.2472709 C9.20453599,15.2509097 7.79546401,15.2509097 7.42619649,16.2472709 Z" id="Stroke-7-Copy-2" stroke="#8FD0FE" stroke-linecap="round" stroke-linejoin="round"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

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

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="23px" height="22px" viewBox="0 0 23 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>blog-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="Blog---v1" transform="translate(-936.000000, -2378.000000)" stroke="#8FD0FE" stroke-width="2">
-            <g id="CTA-signup" transform="translate(52.000000, 2169.000000)">
-                <path d="M894.236764,210.879142 L892.329039,216.034555 C892.193488,216.403433 891.902385,216.693425 891.533506,216.828977 L886.379205,218.737813 C885.207015,219.171134 885.207015,220.828866 886.379205,221.263298 L891.533506,223.171023 C891.902385,223.306575 892.193488,223.596567 892.329039,223.965445 L894.236764,229.120858 C894.671197,230.293047 896.328928,230.293047 896.76225,229.120858 L898.669974,223.965445 C898.805526,223.596567 899.096629,223.306575 899.465508,223.171023 L904.62092,221.263298 C905.791999,220.828866 905.791999,219.171134 904.62092,218.737813 L899.465508,216.828977 C899.096629,216.693425 898.805526,216.403433 898.669974,216.034555 L896.76225,210.879142 C896.328928,209.706953 894.671197,209.706953 894.236764,210.879142 Z" id="blog-cta-graphic-right"></path>
-            </g>
-        </g>
-    </g>
-</svg>

package/src/modules/dx/slackAdd/slackAdd.css

@@ -1,93 +0,0 @@
-@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;
-}
-
-.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;
-}
-
-.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%;
-}
-
-.blog {
-    background-image: url("/assets/svg/slack-cta-blog-background-left.svg"),
-        url("/assets/svg/slack-cta-blog-background-right.svg");
-    background-position: 20% 25%, 80% 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%;
-    }
-
-    .blog.container {
-        background-size: 75% 20%;
-    }
-
-    .dx-text-heading-4 {
-        max-width: 28ex;
-        font-size: var(--dx-g-text-lg);
-    }
-
-    .slack-btn a {
-        display: inline-flex;
-        margin: 4px auto;
-    }
-
-    .slack-btn img {
-        height: 20px;
-        padding-right: 10px;
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .container {
-        min-height: 242px;
-        padding-top: 22px;
-    }
-
-    .slack-btn a {
-        display: inline-flex;
-        margin: 22px 13px 8px 13px;
-    }
-
-    .slack-btn img {
-        height: 20px;
-        padding-right: 10px;
-    }
-}

package/src/modules/dx/slackAdd/slackAdd.html

@@ -1,17 +0,0 @@
-<template>
-    <div class={containerClass}>
-        <h2 class="dx-text-heading-4">{headerText}</h2>
-        <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"
-                />
-                {innerText}
-            </a>
-        </div>
-    </div>
-</template>

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>
-`;