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

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

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

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

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

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

@@ -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

@@ -0,0 +1,36 @@
+import slackCta from "dx/slackCta";
+import { createRenderComponent } from "utils-internal/tests";
+import SlackCtaTest from "test-components/slackCtaTest";
+
+const TAG = "dx-slack-cta";
+const render = createRenderComponent(TAG, slackCta);
+const renderSlotted = createRenderComponent("dx-slack-cta-test", SlackCtaTest);
+
+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 = renderSlotted();
+        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("foobar");
+
+        const slackBtn = element.shadowRoot.querySelectorAll(".button").item(0);
+        return expect(slackBtn.textContent).toBe("foobar");
+    });
+});

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

@@ -0,0 +1,47 @@
+@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% 0%, 80% 100%;
+    padding-top: 20px;
+    margin-top: -20px;
+    padding-bottom: var(--dx-g-spacing-2xl);
+    margin-bottom: calc(var(--dx-g-spacing-2xl) * -1);
+}
+
+.dx-text-heading-4 {
+    font-size: var(--dx-g-text-lg);
+    max-width: 370px;
+}
+@media screen and (max-width: 1000px) {
+    .podcast {
+        background-position: 10% 10%, 90% 100%;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .dx-text-heading-4 {
+        max-width: 28ex;
+        font-size: var(--dx-g-text-lg);
+    }
+
+    .podcast {
+        background-image: none;
+    }
+}

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

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

@@ -0,0 +1,25 @@
+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-hr spacing="2xl"></dx-hr>
+    <dx-slack-cta background="podcast">Get notified of new episodes with the new Salesforce Developers Slack app</dx-slack-cta>
+    <dx-hr spacing="2xl"></dx-hr>
+
+    <dx-slack-cta inner-text="Send posts to Slack" >Get the latest Salesforce Developer posts exactly how you want.</dx-slack-cta>
+`;

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

@@ -0,0 +1,12 @@
+import { LightningElement, api } from "lwc";
+import { SlackCtaBackgroundVariant } from "typings/custom";
+import cx from "classnames";
+
+export default class SlackAdd extends LightningElement {
+    @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

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

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

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

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

@@ -0,0 +1,81 @@
+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;
+    }
+}