@salesforcedevs/dx-components 0.26.0 → 0.26.1-alpha0.4

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

@@ -1,96 +0,0 @@
-import SidebarSearchResult from "dx/sidebarSearchResult";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-sidebar-search-result";
-const render = createRenderComponent(TAG, SidebarSearchResult);
-
-const MOCK_RESULT = {
-    description: "test description here",
-    descriptionHighlights: [{ length: 5, offset: 5 }],
-    href: "/test",
-    selected: false,
-    title: "test title here",
-    titleHighlights: [{ length: 5, offset: 5 }]
-};
-
-const MOCK_RESULT_2 = {
-    description:
-        "Auth.MyDomainLoginDiscoveryHandler to show a custom error message on the My Domain login page ... Auth.LoginDiscoveryHandler to show an error message on the Experience Cloud site login page",
-    descriptionHighlights: [
-        { length: 4, offset: 0 },
-        { length: 4, offset: 98 }
-    ],
-    href: "/test",
-    selected: false,
-    title: "Auth Exceptions | Apex Reference Guide | Salesforce Developers",
-    titleHighlights: [{ length: 4, offset: 0 }]
-};
-
-describe(TAG, () => {
-    it("renders a result with the correct highlighted content", () => {
-        const element = render(MOCK_RESULT);
-
-        const title = element.shadowRoot.querySelector(".title");
-        const titleBolds = element.shadowRoot.querySelectorAll(".title .bold");
-        expect(title.textContent).toEqual(MOCK_RESULT.title);
-        expect(titleBolds.length).toEqual(MOCK_RESULT.titleHighlights.length);
-        expect(titleBolds[0].textContent).toEqual("title");
-
-        const description = element.shadowRoot.querySelector(".description");
-        const descriptionBolds =
-            element.shadowRoot.querySelectorAll(".description .bold");
-        expect(description.textContent).toEqual(MOCK_RESULT.description);
-        expect(descriptionBolds.length).toEqual(
-            MOCK_RESULT.descriptionHighlights.length
-        );
-        expect(descriptionBolds[0].textContent).toEqual("descr");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders another result variant with the correct highlighted content", () => {
-        const element = render(MOCK_RESULT_2);
-
-        const title = element.shadowRoot.querySelector(".title");
-        const titleBolds = element.shadowRoot.querySelectorAll(".title .bold");
-        expect(title.textContent).toEqual(MOCK_RESULT_2.title);
-        expect(titleBolds.length).toEqual(MOCK_RESULT_2.titleHighlights.length);
-        expect(titleBolds[0].textContent).toEqual("Auth");
-
-        const description = element.shadowRoot.querySelector(".description");
-        const descriptionBolds =
-            element.shadowRoot.querySelectorAll(".description .bold");
-        expect(description.textContent).toEqual(MOCK_RESULT_2.description);
-        expect(descriptionBolds.length).toEqual(
-            MOCK_RESULT_2.descriptionHighlights.length
-        );
-        expect(descriptionBolds[0].textContent).toEqual("Auth");
-        expect(descriptionBolds[1].textContent).toEqual("Auth");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a result as selected when specified", () => {
-        const element = render({ ...MOCK_RESULT, selected: true });
-
-        const selected = element.shadowRoot.querySelector(
-            ".sidebar-item-selected"
-        );
-        expect(selected).not.toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't add bold class when there is no highlighted term", () => {
-        const element = render({
-            ...MOCK_RESULT,
-            descriptionHighlights: [],
-            titleHighlights: []
-        });
-
-        const selected = element.shadowRoot.querySelector(".bold");
-        expect(selected).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -1,36 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/sidebar";
-
-a {
-    display: flex;
-    flex-direction: column;
-}
-
-.sidebar-item {
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-md);
-}
-
-.search-text {
-    font-size: var(--dx-g-text-xs);
-    font-family: var(--dx-g-font-sans);
-    line-height: 18px;
-    overflow-wrap: break-word;
-}
-
-.description {
-    -webkit-line-clamp: 3;
-    overflow-wrap: break-word;
-}
-
-.title {
-    color: var(--dx-g-text-heading-color);
-}
-
-.bold {
-    font-weight: 700;
-}
-
-a > *:not(:last-child) {
-    margin-bottom: 2px;
-}

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html

@@ -1,14 +0,0 @@
-<template>
-    <a class={className} href={href}>
-        <span class="title search-text">
-            <template for:each={titleChunks} for:item="chunk">
-                <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
-            </template>
-        </span>
-        <span class="description dx-text-body-3 sidebar-item-truncate-text">
-            <template for:each={descriptionChunks} for:item="chunk">
-                <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
-            </template>
-        </span>
-    </a>
-</template>

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts

@@ -1,70 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import { CoveoHighlights } from "typings/custom";
-
-const toChunks = (value: string, highlights: CoveoHighlights) => {
-    if (!highlights || highlights.length < 1) {
-        return [
-            {
-                value,
-                id: 0
-            }
-        ];
-    }
-
-    let endIndex = 0;
-    return highlights.reduce((acc, { length, offset }, i) => {
-        const plainValue = value.slice(endIndex, offset);
-        const plainChunk = {
-            value: plainValue,
-            id: endIndex
-        };
-
-        endIndex = offset + length;
-        const boldValue = value.slice(offset, endIndex);
-        const boldChunk = {
-            value: boldValue,
-            class: "bold",
-            id: offset
-        };
-
-        let chunks =
-            plainValue.length > 0
-                ? [...acc, plainChunk, boldChunk]
-                : [...acc, boldChunk];
-
-        const remaining = value.slice(endIndex);
-        if (remaining.length > 0 && highlights.length - 1 === i) {
-            chunks = [
-                ...chunks,
-                {
-                    value: remaining,
-                    id: value.length
-                }
-            ];
-        }
-
-        return chunks;
-    }, []);
-};
-
-export default class SidebarSearchResult extends LightningElement {
-    @api description!: string;
-    @api descriptionHighlights!: CoveoHighlights;
-    @api href!: string;
-    @api selected!: boolean;
-    @api title!: string;
-    @api titleHighlights!: CoveoHighlights;
-
-    private get titleChunks() {
-        return toChunks(this.title, this.titleHighlights);
-    }
-
-    private get descriptionChunks() {
-        return toChunks(this.description, this.descriptionHighlights);
-    }
-
-    private get className(): string {
-        return cx("sidebar-item", this.selected && "sidebar-item-selected");
-    }
-}

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

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

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

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

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

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

@@ -1,48 +0,0 @@
-import slackCta from "dx/slackCta";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-slack-cta";
-const render = createRenderComponent(TAG, slackCta);
-
-describe(TAG, () => {
-    it("renders the button linking to slack", () => {
-        const element = render();
-
-        const slackBtn = element.shadowRoot.querySelectorAll(".button");
-        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();
-    });
-
-    it("renders the inner button text correctly", () => {
-        const element = render({
-            innerText: "foobar"
-        });
-
-        const header = element.shadowRoot
-            .querySelectorAll(".container")
-            .item(0);
-        expect(header.textContent).toBe("Follow along with Slackfoobar");
-
-        const slackBtn = element.shadowRoot.querySelectorAll(".button").item(0);
-        return expect(slackBtn.textContent).toBe("foobar");
-    });
-
-    it("renders the header text correctly", () => {
-        const element = render({
-            headerText: "foobar"
-        });
-
-        const slackBtn = element.shadowRoot.querySelectorAll(".button").item(0);
-        expect(slackBtn.textContent).toBe("Add to Slack");
-
-        const header = element.shadowRoot
-            .querySelectorAll(".container")
-            .item(0);
-        return expect(header.textContent).toBe("foobarAdd to Slack");
-    });
-});

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

@@ -1,41 +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;
-}
-
-.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-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) {
-    .dx-text-heading-4 {
-        max-width: 28ex;
-        font-size: var(--dx-g-text-lg);
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .container {
-        min-height: 242px;
-        padding-top: 22px;
-    }
-}

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

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

@@ -1,25 +0,0 @@
-export default {
-    title: "dx/dx-slack-cta",
-    component: "dx-slack-cta"
-};
-
-const createStyles = () => `
-    <style>
-        h2 {
-            font-weight: bold;
-            font-size: 24px;
-            margin: 10px 0 30px 0;
-        }
-    </style>
-`;
-
-export const Base = () => `
-    ${createStyles()}
-    <h2>Add to Slack</h2>
-
-    <dx-slack-cta header-text="Get notified of new episodes with the new Salesforce Developers Slack app" background="podcast"></dx-slack-cta>
-    
-    <dx-slack-cta header-text="Get the latest Salesforce Developer posts exactly how you want." inner-text="Send posts to Slack" background="blog"></dx-slack-cta>
-
-    <dx-slack-cta header-text="Get notified of new events with the new Salesforce Developers Slack app"></dx-slack-cta>
-`;

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

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

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

@@ -1,114 +0,0 @@
-import Socials from "dx/socials";
-import IconBadge from "dx/iconBadge";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-socials";
-const render = createRenderComponent(TAG, Socials);
-
-const TEST_URL = encodeURIComponent(window.location.href);
-
-describe(TAG, () => {
-    const originalConsole = global.console;
-
-    beforeAll(() => {
-        global.console = { ...global.console, error: jest.fn() };
-    });
-
-    afterAll(() => {
-        global.console = originalConsole;
-    });
-
-    it("renders dx-icon-badge for each social link", () => {
-        const component = render();
-
-        const links: Array<HTMLAnchorElement> =
-            component.shadowRoot.querySelectorAll("a");
-        expect(links).toHaveLength(3);
-
-        const [facebookLink, twitterLink, linkedinLink] = links;
-
-        expect(facebookLink.href).toBe(
-            `https://www.facebook.com/sharer/sharer.php?u=${TEST_URL}`
-        );
-        expect(facebookLink.target).toBe("_blank");
-        expect(facebookLink.title).toBe("Facebook");
-
-        expect(twitterLink.href).toBe(
-            `https://twitter.com/intent/tweet?url=${TEST_URL}&text=${document.title}`
-        );
-        expect(twitterLink.target).toBe("_blank");
-        expect(twitterLink.title).toBe("Twitter");
-
-        expect(linkedinLink.href).toBe(
-            `http://www.linkedin.com/sharing/share-offsite/?url=${TEST_URL}`
-        );
-        expect(linkedinLink.target).toBe("_blank");
-        expect(linkedinLink.title).toBe("Linkedin");
-
-        const iconBadge: Array<IconBadge> =
-            component.shadowRoot.querySelectorAll("dx-icon-badge");
-        expect(iconBadge).toHaveLength(3);
-
-        const [facebookIcon, twitterIcon, linkedinIcon] = iconBadge;
-
-        expect(facebookIcon.sprite).toBe("brand");
-        expect(facebookIcon.symbol).toBe("facebook-f");
-
-        expect(twitterIcon.sprite).toBe("brand");
-        expect(twitterIcon.symbol).toBe("twitter");
-
-        expect(linkedinIcon.sprite).toBe("brand");
-        expect(linkedinIcon.symbol).toBe("linkedin-in");
-
-        const detailSection =
-            component.shadowRoot.querySelector(".details-section");
-        expect(detailSection).toBeNull();
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders the specified target for each 'a' tag", () => {
-        const expectedTarget = "_self";
-        const component = render({ linksTarget: expectedTarget });
-
-        const links: Array<HTMLAnchorElement> =
-            component.shadowRoot.querySelectorAll("a");
-        expect(links).toHaveLength(3);
-        links.forEach(({ target }) => expect(target).toBe(expectedTarget));
-
-        expect(global.console.error).not.toBeCalled();
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("doesn't update target if not valid", () => {
-        const testTarget = "not_valid_at_all";
-        const component = render({ linksTarget: testTarget });
-
-        const links: Array<HTMLAnchorElement> =
-            component.shadowRoot.querySelectorAll("a");
-        expect(links).toHaveLength(3);
-        links.forEach(({ target }) => expect(target).toBe("_blank"));
-
-        expect(global.console.error).toBeCalledTimes(1);
-        expect(global.console.error).toBeCalledWith(
-            "Invalid links target, valid options are: _self, _blank, _parent, _top, framename"
-        );
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders details section", () => {
-        const component = render({ details: "Test|Another Test" });
-
-        const details: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll(".details-section span");
-        expect(details).toHaveLength(2);
-
-        const [testDetail, anotherTestDetail] = details;
-        expect(testDetail.textContent).toBe("Test");
-        expect(anotherTestDetail.textContent).toBe("Another Test");
-
-        return expect(component).toBeAccessible();
-    });
-});

package/src/modules/dx/socials/socials.css

@@ -1,35 +0,0 @@
-:host {
-    display: inline-block;
-}
-
-.details-section {
-    color: var(--dx-g-gray-30);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-xs);
-    letter-spacing: 0.7px;
-    margin-bottom: var(--dx-g-spacing-sm);
-    text-transform: uppercase;
-}
-
-.details-section span {
-    display: block;
-    line-height: var(--dx-g-spacing-md);
-}
-
-.socials-group {
-    display: flex;
-}
-
-.socials-group a:not(:last-child) {
-    margin-right: var(--dx-g-spacing-md);
-}
-
-dx-icon-badge {
-    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-icon-badge-size: 34px;
-    --dx-c-icon-badge-icon-size: 18px;
-}
-
-dx-icon-badge:hover {
-    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-40);
-}

package/src/modules/dx/socials/socials.html

@@ -1,22 +0,0 @@
-<template>
-    <div class="details-section" if:true={hasDetails}>
-        <template for:each={details} for:item="detail">
-            <span key={detail}>{detail}</span>
-        </template>
-    </div>
-    <div class="socials-group">
-        <template for:each={socials} for:item="social">
-            <a
-                href={social.href}
-                key={social.name}
-                target={linksTarget}
-                title={social.name}
-            >
-                <dx-icon-badge
-                    sprite={spriteName}
-                    symbol={social.symbol}
-                ></dx-icon-badge>
-            </a>
-        </template>
-    </div>
-</template>

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

@@ -1,24 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-socials",
-    component: "dx-socials"
-};
-
-export const Base = () => html` <dx-socials></dx-socials> `;
-
-export const SocialWithTarget = ({ target }: any) => html`
-    <dx-socials links-target="${target}"></dx-socials>
-`;
-
-SocialWithTarget.args = {
-    target: "_top"
-};
-
-export const SocialWithDetails = ({ details }: any) => html`
-    <dx-socials details="${details}"></dx-socials>
-`;
-
-SocialWithDetails.args = {
-    details: "jan 18, 2021|12 min read"
-};

package/src/modules/dx/socials/socials.ts

@@ -1,81 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { normalizeToArray } from "utils/normalizers";
-
-type Icon = { name: string; symbol: string; baseShareUrl: string };
-
-const URL_TOKEN = "{url}";
-const TEXT_TOKEN = "{text}";
-
-const SOCIAL_ICONS: Array<Icon> = [
-    {
-        name: "Facebook",
-        symbol: "facebook-f",
-        baseShareUrl: `https://www.facebook.com/sharer/sharer.php?u=${URL_TOKEN}`
-    },
-    {
-        name: "Twitter",
-        symbol: "twitter",
-        baseShareUrl: `https://twitter.com/intent/tweet?url=${URL_TOKEN}&text=${TEXT_TOKEN}`
-    },
-    {
-        name: "Linkedin",
-        symbol: "linkedin-in",
-        baseShareUrl: `http://www.linkedin.com/sharing/share-offsite/?url=${URL_TOKEN}`
-    }
-];
-
-const SPRITE_NAME = "brand";
-
-const VALID_TARGETS = ["_self", "_blank", "_parent", "_top", "framename"];
-
-export default class Socials extends LightningElement {
-    private _linksTarget: string = "_blank";
-    private _details: Array<string> = [];
-
-    @api
-    get details() {
-        return this._details;
-    }
-
-    set details(value) {
-        this._details = normalizeToArray(value, "|") as Array<string>;
-    }
-
-    @api
-    get linksTarget(): string {
-        return this._linksTarget;
-    }
-
-    set linksTarget(value: string) {
-        if (value && !VALID_TARGETS.includes(value)) {
-            console.error(
-                `Invalid links target, valid options are: ${VALID_TARGETS.join(
-                    ", "
-                )}`
-            );
-            return;
-        }
-        this._linksTarget = value;
-    }
-
-    get socials() {
-        const url = encodeURIComponent(document.location.href);
-        const text = encodeURIComponent(document.title);
-        return SOCIAL_ICONS.map(({ baseShareUrl, ...value }: Icon) => {
-            return {
-                ...value,
-                href: baseShareUrl
-                    .replace(URL_TOKEN, url)
-                    .replace(TEXT_TOKEN, text)
-            };
-        });
-    }
-
-    get spriteName() {
-        return SPRITE_NAME;
-    }
-
-    get hasDetails() {
-        return this.details && this.details.length > 0;
-    }
-}