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

package/src/modules/dx/helmet/helmet.css

@@ -0,0 +1,83 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+span {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-2xs);
+    color: var(--dx-c-breadcrumb-color);
+    margin-top: 0.5px;
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+nav > *:not(:last-child) {
+    margin-right: 6px;
+}
+
+nav a,
+nav span {
+    transition: var(--dx-g-transition-hue-1x);
+    display: flex;
+    align-items: center;
+}
+
+a:hover {
+    transition: var(--dx-g-transition-hue-1x);
+    color: var(--dx-c-breadcrumb-hover-color);
+}
+
+.home-link {
+    flex-shrink: 0;
+    margin-right: var(--dx-g-spacing-xs);
+}
+
+.home-link > .home-link-title {
+    color: var(--dx-c-home-link-color);
+    line-height: 18px;
+}
+
+.home-link > svg {
+    margin-right: 12px;
+    width: 18px;
+}
+
+.helmet {
+    height: var(--dx-g-spacing-xl);
+    position: relative;
+}
+
+.helmet.variant_clear {
+    background-color: white;
+
+    --dx-c-home-link-color: var(--dx-g-blue-natural-10);
+    --dx-c-breadcrumb-color: var(--dx-g-gray-50);
+    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
+}
+
+.helmet.variant_dark {
+    background-color: var(--dx-g-blue-vibrant-40);
+
+    --dx-c-home-link-color: white;
+    --dx-c-breadcrumb-color: var(--dx-g-blue-vibrant-90);
+    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-80);
+}
+
+.helmet.variant_light {
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+
+    --dx-c-home-link-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-breadcrumb-color: var(--dx-g-gray-30);
+    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
+}
+
+.helmet.variant_neutral {
+    background-color: var(--dx-g-gray-95);
+
+    --dx-c-home-link-color: var(--dx-g-gray-30);
+    --dx-c-breadcrumb-color: var(--dx-g-gray-50);
+    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
+}

package/src/modules/dx/helmet/helmet.html

@@ -0,0 +1,39 @@
+<template>
+    <div class={className} style={style}>
+        <nav role="navigation" class="helmet-title">
+            <a
+                href="https://developer.salesforce.com"
+                class="home-link"
+                alt={titleAlt}
+            >
+                <svg
+                    width="28px"
+                    height="20px"
+                    viewBox="0 0 28 20"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <title>{title}</title>
+                    <g
+                        id="Section-/-Nav-/-Footer-/-Architects"
+                        transform="translate(-148.000000, -447.000000)"
+                    >
+                        <path
+                            d="M163.003774,447.648649 C164.8,447.648649 166.384906,448.675676 167.230189,450.189189 C167.969811,449.864865 168.762264,449.648649 169.607547,449.648649 C172.883019,449.648649 175.524528,452.351351 175.524528,455.702703 C175.524528,459.054054 172.883019,461.756757 169.607547,461.756757 C169.184906,461.756757 168.815094,461.702703 168.445283,461.648649 C167.70566,463 166.279245,463.918919 164.641509,463.918919 C163.954717,463.918919 163.320755,463.756757 162.739623,463.486486 C162,465.27027 160.256604,466.513514 158.196226,466.513514 C156.083019,466.513514 154.233962,465.162162 153.54717,463.216216 C153.230189,463.27027 152.913208,463.324324 152.596226,463.324324 C150.060377,463.324324 148,461.216216 148,458.621622 C148,456.891892 148.898113,455.378378 150.271698,454.567568 C150.007547,453.918919 149.849057,453.162162 149.849057,452.405405 C149.849057,449.432432 152.226415,447 155.184906,447 C157.033962,447.054054 158.566038,447.864865 159.516981,449.162162 C160.415094,448.243243 161.630189,447.648649 163.003774,447.648649 Z"
+                            id="Path"
+                            fill="#00A1E0"
+                        ></path>
+                    </g>
+                </svg>
+                <span class="home-link-title">{title}</span>
+            </a>
+            <span>/</span>
+            <span if:true={currentPropertyHref}>
+                <a href={currentPropertyHref} alt={currentPropertyAlt}>
+                    {currentPropertyTitle}
+                </a>
+            </span>
+            <span if:false={currentPropertyHref}>{currentPropertyTitle}</span>
+        </nav>
+    </div>
+</template>

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

@@ -0,0 +1,53 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-helmet",
+    component: "dx-helmet"
+};
+
+const markup = html`
+    <style>
+        body {
+            padding: 0 !important;
+        }
+    </style>
+`;
+
+export const Clear = () => html`
+    ${markup}
+    <dx-helmet title="Salesforce Developers" variant="clear"></dx-helmet>
+`;
+
+export const Dark = () => html`
+    ${markup}
+    <dx-helmet title="Salesforce Developers" variant="dark"></dx-helmet>
+`;
+
+export const Light = () => html`
+    ${markup}
+    <dx-helmet title="Salesforce Developers" variant="light"></dx-helmet>
+`;
+
+export const Neutral = () => html`
+    ${markup}
+    <dx-helmet title="Salesforce Developers" variant="neutral"></dx-helmet>
+`;
+
+export const CustomPadding = () => html`
+    ${markup}
+    <dx-helmet
+        title="Salesforce Developers"
+        variant="neutral"
+        horizontal-padding="2rem"
+    ></dx-helmet>
+`;
+
+export const NeutralWithCurrentPropertyLink = () => html`
+    ${markup}
+    <dx-helmet
+        title="Salesforce Developers"
+        current-property-title="MuleSoft"
+        current-property-href="https://developer.mulesoft.com/"
+        variant="neutral"
+    ></dx-helmet>
+`;

package/src/modules/dx/helmet/helmet.ts

@@ -0,0 +1,27 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { HelmetVariant } from "typings/custom";
+
+export default class Helmet extends LightningElement {
+    @api title: string = "Salesforce";
+    @api currentPropertyTitle: string = "Heroku";
+    @api currentPropertyHref?: string;
+    @api variant: HelmetVariant = "neutral";
+    @api horizontalPadding: string = "20px";
+
+    private get style() {
+        return `padding: 0 ${this.horizontalPadding};`;
+    }
+
+    private get titleAlt() {
+        return `Link to ${this.title}`;
+    }
+
+    private get currentPropertyAlt() {
+        return `Link to ${this.currentPropertyTitle}`;
+    }
+
+    private get className() {
+        return cx("helmet", `variant_${this.variant}`);
+    }
+}

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

@@ -0,0 +1,53 @@
+import Hr from "dx/hr";
+import { createRenderComponent } from "utils-internal/tests";
+import {
+    separator as separatorProps,
+    heading as headingProps,
+    link as linkProps,
+    loadMore as loadMoreProps
+} from "./mockProps";
+
+const TAG = "dx-hr";
+const render = createRenderComponent(TAG, Hr);
+
+describe(TAG, () => {
+    it("renders as an <h2> when given text", () => {
+        const element = render(headingProps);
+        const h2 = element.shadowRoot.querySelector("h2");
+        expect(h2).not.toBeNull();
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders a <p> separator when not given text", () => {
+        const element = render(separatorProps);
+        const p = element.shadowRoot.querySelector("p");
+        expect(p).not.toBeNull();
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders with a button and the given text when used with the link variant", () => {
+        const element = render(linkProps);
+        const dxButton = element.shadowRoot.querySelector("dx-button");
+        expect(dxButton).not.toBeNull();
+        expect(dxButton.href).toEqual(linkProps.href);
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders with a button and when used with the load-more variant", () => {
+        const element = render(loadMoreProps);
+        const dxButton = element.shadowRoot.querySelector("dx-button");
+        expect(dxButton).not.toBeNull();
+        return expect(element).toBeAccessible();
+    });
+
+    it("triggers a custom loadmore event when used with the load-more variant and the button gets clicked", () => {
+        const element = render(loadMoreProps);
+        const mockLoadMore = jest.fn();
+        element.addEventListener("loadmore", mockLoadMore);
+        const dxButton = element.shadowRoot.querySelector("dx-button");
+
+        dxButton.click();
+        expect(mockLoadMore).toHaveBeenCalled();
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/hr/__tests__/mockProps.ts

@@ -0,0 +1,16 @@
+export const heading = {
+    text: "Heading"
+};
+
+export const link = {
+    href: "https://salesforce.com",
+    text: "View more episodes",
+    variant: "link"
+};
+
+export const loadMore = {
+    text: "Load more stuff",
+    variant: "load-more"
+};
+
+export const separator = {};

package/src/modules/dx/hr/hr.css

@@ -0,0 +1,55 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-hr-padding-horizontal: var(--dx-g-page-padding-horizontal);
+}
+
+p,
+h2 {
+    display: flex;
+    flex-direction: row;
+    padding: 0 var(--dx-c-hr-padding-horizontal);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-sm);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: 0;
+    line-height: 18px;
+}
+
+p::before,
+h2::before,
+p::after,
+h2::after {
+    transform: translateY(-2px); /* offset for display font ghost padding */
+    content: "";
+    flex: 1 1;
+    border-bottom: 2px solid var(--dx-g-gray-95);
+    margin: auto;
+    margin-right: 0;
+    margin-left: 0;
+}
+
+h2::before {
+    margin-right: var(--dx-g-spacing-md);
+}
+
+h2::after {
+    margin-left: var(--dx-g-spacing-md);
+}
+
+dx-button {
+    display: flex;
+    width: 100%;
+    text-transform: uppercase;
+    padding: 0 var(--dx-c-hr-padding-horizontal);
+}
+
+dx-button::before {
+    content: "";
+    border-bottom: 2px solid var(--dx-g-gray-95);
+    flex: 1 1;
+    transform: translateY(-2px); /* offset for display font ghost padding */
+    margin: auto;
+    margin-right: var(--dx-g-spacing-md);
+}

package/src/modules/dx/hr/hr.html

@@ -0,0 +1,23 @@
+<template>
+    <p if:true={isSeparator} part="hr" role="separator" style={style}></p>
+    <h2 if:true={isHeading} part="hr" style={style}>{text}</h2>
+    <dx-button
+        if:true={isLink}
+        href={href}
+        icon-symbol="forward"
+        style={style}
+        target={target}
+        variant="inline"
+    >
+        {text}
+    </dx-button>
+    <dx-button
+        if:true={isLoadMore}
+        icon-symbol="arrowdown"
+        onclick={handleClick}
+        style={style}
+        variant="inline"
+    >
+        {text}
+    </dx-button>
+</template>

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

@@ -0,0 +1,50 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-hr",
+    component: "dx-hr"
+};
+
+const createStyles = () => html`
+    <style>
+        body {
+            padding: 12px 0 0 0 !important;
+        }
+        .title {
+            margin-left: 24px;
+        }
+    </style>
+`;
+
+const title = (value: string) => html`<span class="title">${value}</span>`;
+
+export const Separator = () => html`
+    ${createStyles()}
+
+    <dx-hr></dx-hr>
+`;
+
+export const Heading = () => html`
+    ${createStyles()} ${title("Heading Less Spacing")}
+    <dx-hr text="Heading" spacing="md"></dx-hr>
+
+    ${title("Heading No spacing")}
+    <dx-hr text="Heading" spacing="${null}"></dx-hr>
+
+    ${title("Heading Storybook Controlled")}
+    <dx-hr text="Heading"></dx-hr>
+`;
+
+export const Link = () => html`
+    ${createStyles()} ${title("Link")}
+    <dx-hr
+        variant="link"
+        href="https://salesforce.com"
+        text="Visit another page"
+    ></dx-hr>
+`;
+
+export const LoadMore = () => html`
+    ${createStyles()} ${title("Load More")}
+    <dx-hr variant="load-more" text="Load more content"></dx-hr>
+`;

package/src/modules/dx/hr/hr.ts

@@ -0,0 +1,45 @@
+import { LightningElement, api } from "lwc";
+
+import { HrVariant } from "typings/custom";
+
+export default class Hr extends LightningElement {
+    @api text: string | null = null;
+    @api href?: string | null;
+    @api target: string | null = "_top";
+    @api spacing: string | null = "2xl";
+    @api variant: HrVariant | null = null;
+
+    private get ariaRole() {
+        return this.isHeading ? "heading" : "separator";
+    }
+
+    private get style() {
+        return this.spacing
+            ? `margin: var(--dx-g-spacing-${this.spacing}) 0;`
+            : "";
+    }
+
+    private get isButtonVariant() {
+        return this.variant === "link" || this.variant === "load-more";
+    }
+
+    private get isLink() {
+        return this.variant === "link";
+    }
+
+    private get isLoadMore() {
+        return this.variant === "load-more";
+    }
+
+    private get isHeading() {
+        return !this.isButtonVariant && this.text;
+    }
+
+    private get isSeparator() {
+        return !this.isButtonVariant && !this.text;
+    }
+
+    handleClick() {
+        this.dispatchEvent(new CustomEvent("loadmore"));
+    }
+}

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

@@ -0,0 +1,54 @@
+import Icon from "dx/icon";
+import { createRenderComponent } from "utils-internal/tests";
+
+const TAG = "dx-icon";
+const render = createRenderComponent(TAG, Icon);
+
+describe(TAG, () => {
+    it("renders null when not given a symbol property", () => {
+        const element = render();
+        const svgEl = element.shadowRoot.querySelector("svg");
+        expect(svgEl).toBeNull();
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders an icon defaulted to size small", () => {
+        const element = render({ symbol: "search" });
+        const svgEl = element.shadowRoot.querySelector("svg");
+        expect(svgEl.getAttribute("style")).toContain(
+            "--dx-c-icon-size: var(--dx-g-icon-size-sm)"
+        );
+        const href = element.shadowRoot
+            .querySelector("use")
+            .getAttribute("xlink:href");
+        expect(href).toContain(
+            "/assets/icons/utility-sprite/svg/symbols.svg#search"
+        );
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders an hot-orange-vibrant-30 medium icon", () => {
+        const element = render({
+            symbol: "search",
+            color: "hot-orange-vibrant-30"
+        });
+        const svgEl = element.shadowRoot.querySelector("svg");
+
+        expect(svgEl.getAttribute("style")).toContain(
+            "fill: var(--dx-g-hot-orange-vibrant-30);"
+        );
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders the use element with the correct xlink:href", () => {
+        const element = render({ symbol: "audio", sprite: "doctype" });
+
+        const useEl = element.shadowRoot.querySelector("use");
+        const href = useEl.getAttribute("xlink:href");
+        expect(href).toContain(
+            "/assets/icons/doctype-sprite/svg/symbols.svg#audio"
+        );
+
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/icon/icon.css

@@ -0,0 +1,14 @@
+@import "helpers/reset";
+
+:host {
+    display: block;
+
+    --dx-c-icon-color: currentColor;
+}
+
+svg {
+    display: inherit;
+    fill: var(--dx-c-icon-color);
+    height: var(--dx-c-icon-size);
+    width: var(--dx-c-icon-size);
+}

package/src/modules/dx/icon/icon.html

@@ -0,0 +1,11 @@
+<template>
+    <svg
+        aria-hidden="true"
+        style={style}
+        xmlns="http://www.w3.org/2000/svg"
+        if:true={symbol}
+        part="svg"
+    >
+        <use xlink:href={href}></use>
+    </svg>
+</template>

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

@@ -0,0 +1,100 @@
+import { html } from "lit-html";
+
+const SIZE_OPTIONS = [
+    "xsmall",
+    "small",
+    "medium",
+    "large",
+    "xlarge",
+    "2xlarge"
+];
+const BRAND_ICONS = [
+    "analytics",
+    "collaboration",
+    "commerce",
+    "employees",
+    "experience",
+    "heroku",
+    "industries",
+    "integration",
+    "learning",
+    "marketing",
+    "partners",
+    "platform",
+    "sales",
+    "service",
+    "success",
+    "slack"
+];
+
+export default {
+    title: "dx/dx-icon",
+    component: "dx-icon"
+};
+
+const createStyles = () => html`
+    <style>
+        span {
+            color: grey;
+        }
+
+        dx-icon {
+            margin-top: 8px;
+            margin-bottom: 32px;
+        }
+    </style>
+`;
+
+export const Sizes = () => html`
+    ${createStyles()}
+    <span>Size: xsmall</span>
+    <dx-icon size="xsmall" symbol="edit"></dx-icon>
+
+    <span>Size: small</span>
+    <dx-icon size="small" symbol="edit"></dx-icon>
+
+    <span>Size: medium</span>
+    <dx-icon size="medium" symbol="edit"></dx-icon>
+
+    <span>Size: large</span>
+    <dx-icon size="large" symbol="edit"></dx-icon>
+
+    <span>Size: xlarge</span>
+    <dx-icon size="xlarge" symbol="edit"></dx-icon>
+
+    <span>Size: 2xlarge</span>
+    <dx-icon size="2xlarge" symbol="edit"></dx-icon>
+`;
+
+export const SalesforceBrandIcons = ({
+    sprite,
+    symbol,
+    size
+}: {
+    sprite: string;
+    symbol: string;
+    size: string;
+}) => html`
+    <dx-icon sprite="${sprite}" symbol="${symbol}" size="${size}"></dx-icon>
+`;
+
+SalesforceBrandIcons.args = {
+    symbol: "learning",
+    sprite: "salesforcebrand",
+    size: "2xlarge"
+};
+
+SalesforceBrandIcons.argTypes = {
+    size: {
+        control: {
+            type: "select",
+            options: SIZE_OPTIONS
+        }
+    },
+    symbol: {
+        control: {
+            type: "select",
+            options: BRAND_ICONS
+        }
+    }
+};