@salesforcedevs/dx-components 0.26.1-alpha0.5 → 0.26.3

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/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.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/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.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;
+    }
+}