@salesforcedevs/arch-components 1.20.17-alpha14 → 1.20.17-alpha16

package/src/modules/arch/sectionA/sectionA.css

@@ -0,0 +1,64 @@
+@import "arch/reset";
+
+.section {
+    padding: var(--arch-spacing-20) var(--arch-spacing-6);
+}
+
+.section-white {
+    background-color: var(--arch-color-white);
+    color: var(--arch-color-black);
+}
+
+.section-dark {
+    background-color: var(--arch-color-theme-dark);
+    color: var(--arch-color-white);
+}
+
+.section-light {
+    background-color: var(--arch-color-blue-ninety-five);
+    color: var(--arch-color-black);
+}
+
+.section-blue {
+    background-color: var(--arch-color-theme-light);
+    color: var(--arch-color-black);
+}
+
+.section-bright {
+    background-color: var(--arch-color-theme-bright);
+    color: var(--arch-color-black);
+}
+
+.content-container {
+    margin: auto;
+    max-width: 600px;
+    text-align: center;
+    padding-bottom: var(--arch-spacing-4);
+}
+
+.content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    max-width: 1280px;
+}
+
+.title {
+    font-size: var(--arch-font-size-2xl);
+    margin-bottom: var(--arch-spacing-2);
+}
+
+.description {
+    font-size: var(--arch-font-size-lg);
+    line-height: 1.5;
+    margin-bottom: var(--arch-spacing-6);
+}
+
+.slot {
+    align-self: stretch;
+}
+
+.cta {
+    margin-top: var(--arch-spacing-6);
+}

package/src/modules/arch/sectionA/sectionA.html

@@ -0,0 +1,21 @@
+<template>
+    <section class={sectionClassName}>
+        <div class="content">
+            <div class="content-container">
+                <h2 if:true={title} class="title">{title}</h2>
+                <p if:true={description} class="description">{description}</p>
+            </div>
+            <div class="slot">
+                <slot></slot>
+            </div>
+            <arch-button-link
+                href={ctaHref}
+                target={ctaTarget}
+                if:true={ctaHref}
+                class="cta"
+            >
+                {ctaTitle}
+            </arch-button-link>
+        </div>
+    </section>
+</template>

package/src/modules/arch/sectionA/sectionA.stories.js

@@ -0,0 +1,25 @@
+import { html } from "lit-html";
+
+export default {
+    title: "arch/arch-section-a",
+    component: "sb-arch-section-a"
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        sb-arch-section-a {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Base = () => html` ${createStyles()}
+    <sb-arch-section-a
+        description="Build apps faster, integrate easier, make apps smarter"
+        title="Explore Content"
+        cta-href="/"
+        cta-title="Explore"
+    >
+    </sb-arch-section-a>
+`;

package/src/modules/arch/sectionA/sectionA.ts

@@ -0,0 +1,27 @@
+import { api, LightningElement } from 'lwc';
+import { waitForPageSettled } from 'arch/utils';
+
+export default class extends LightningElement {
+    @api background: string | null = null;
+    @api description: string | null = null;
+    @api title: string = '';
+    @api ctaHref: string | null = null;
+    @api ctaTitle: string | null = null;
+    @api ctaTarget: string | null = null;
+
+    connectedCallback() {
+        const urlHash = window.location.hash.slice(1);
+        if (this.id && this.id === urlHash) {
+            // We have to restore the natural browser behavior of
+            // jumping to anchors because when DOMContentLoaded fires
+            // the page won't be fully rendered yet
+            waitForPageSettled().then(() => {
+                this.template.host.scrollIntoView();
+            });
+        }
+    }
+
+    private get sectionClassName() {
+        return `section section--${this.background}`;
+    }
+}

package/src/modules/arch/select/select.css

@@ -0,0 +1,40 @@
+@import "arch/reset";
+@import "arch/styles";
+
+.select-container {
+    position: relative;
+}
+
+select {
+    appearance: none;
+    cursor: pointer;
+    font-size: var(--arch-font-size-sm);
+    background-color: var(--arch-color-white);
+    border: 1px solid var(--arch-color-fog);
+    border-radius: var(--arch-radius-md);
+    width: 100%;
+    transition: border 0.1s linear, background-color 0.1s linear;
+    height: var(--arch-font-size-6xl);
+    padding-left: var(--arch-spacing-3);
+    padding-right: var(--arch-spacing-10);
+}
+
+.select-container-icon select {
+    padding-left: var(--arch-spacing-10);
+}
+
+.select-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--arch-color-meteorite);
+    pointer-events: none;
+}
+
+.select-icon-left {
+    left: var(--arch-spacing-3);
+}
+
+.select-icon-right {
+    right: var(--arch-spacing-3);
+}

package/src/modules/arch/select/select.html

@@ -0,0 +1,24 @@
+<template>
+    <label class={labelClassName} for="select">{labelText}</label>
+    <div class={containerClassName}>
+        <arch-icon
+            class="select-icon select-icon--left"
+            if:true={iconSymbol}
+            size="medium"
+            sprite={iconSprite}
+            symbol={iconSymbol}
+        ></arch-icon>
+        <select
+            name="arch-select"
+            id={labelText}
+            lwc:dom="manual"
+            onchange={handleChange}
+            value={value}
+        ></select>
+        <arch-icon
+            class="select-icon select-icon--right"
+            size="small"
+            symbol="chevrondown"
+        ></arch-icon>
+    </div>
+</template>

package/src/modules/arch/select/select.ts

@@ -0,0 +1,64 @@
+import { wire, api } from "lwc";
+import classnames from "classnames";
+import { ReflectedElement } from "arch/reflectedElement";
+import { EffectAdapter } from "arch/effectAdapter";
+import { sendInteractionEvent, InteractionEventTypes } from "arch/helpers";
+
+export default class extends ReflectedElement {
+    @api assistiveText: string | null = null;
+    @api iconSymbol: string | null = null;
+    @api iconSprite: string = "utility";
+    @api label: string | null = null;
+    @api value: string | null = null;
+
+    private get containerClassName() {
+        return classnames("select-container", {
+            "select-container--icon": this.iconSymbol
+        });
+    }
+
+    private get labelText() {
+        return this.label || this.assistiveText;
+    }
+
+    private get labelClassName() {
+        return classnames(
+            {
+                "arch-helper_field-label": this.label
+            },
+            {
+                "arch-helper_assistive-text": !this.label && this.assistiveText
+            }
+        );
+    }
+
+    private get options() {
+        return Array.from(this.contentElement.querySelectorAll("option")).map(
+            (n) => n.value
+        );
+    }
+
+    private handleChange(event) {
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: this.contentElement.value
+            })
+        );
+        sendInteractionEvent(
+            "Select Change",
+            InteractionEventTypes.DROPDOWN_CHANGE,
+            event
+        );
+    }
+
+    get contentElement(): HTMLSelectElement {
+        return this.template.querySelector("select")! as HTMLSelectElement;
+    }
+
+    // eslint-disable-next-line @lwc/lwc/no-unknown-wire-adapters
+    @wire(EffectAdapter, { value: "$value" })
+    innerHTMLSetCallback() {
+        this.contentElement.value =
+            this.value == null ? this.options[0] : this.value;
+    }
+}

package/src/modules/arch/socialShare/socialShare.css

@@ -0,0 +1,50 @@
+@import "arch/reset";
+
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.actions {
+    align-items: center;
+    display: grid;
+    grid-auto-flow: column;
+    grid-column-gap: var(--arch-spacing-2);
+}
+
+@media screen and (max-width: 800px) {
+    .actions {
+        width: 120px;
+    }
+}
+
+.actions a {
+    margin-right: 1rem;
+}
+
+.actions a:last-of-type {
+    margin-right: 0;
+}
+
+.actions svg {
+    height: 1rem;
+}
+
+.actions svg.fill {
+    fill: var(--arch-color-meteorite);
+}
+
+.actions svg.fill:hover {
+    fill: var(--arch-color-brand);
+}
+
+.actions svg.stroke {
+    stroke: var(--arch-color-meteorite);
+    fill: var(--arch-color-meteorite);
+}
+
+.actions svg.stroke:hover {
+    stroke: var(--arch-color-brand);
+    fill: var(--arch-color-brand);
+}

package/src/modules/arch/socialShare/socialShare.html

@@ -0,0 +1,56 @@
+<template>
+    <div class="actions">
+        <a
+            onclick={handleClick}
+            href={shareTwitter}
+            target="_blank"
+            rel="noopener"
+            id="Share-on-Twitter"
+            name="Share on Twitter"
+            aria-label="Share on Twitter (opens new tab)"
+            class="fill"
+            ><svg
+                viewBox="0 0 18 14"
+                class="fill"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M17.308 2.325a7.333 7.333 0 01-2.041.52 3.396 3.396 0 001.565-1.836 7.374 7.374 0 01-2.258.808c-.33-.33-.73-.595-1.176-.775a3.767 3.767 0 00-1.412-.274 3.75 3.75 0 00-2.518.995A3.218 3.218 0 008.43 4.108c.002.254.033.507.094.755A10.658 10.658 0 014.46 3.847a9.912 9.912 0 01-3.256-2.471 3.128 3.128 0 00-.39 2.419c.205.823.738 1.544 1.494 2.017A3.678 3.678 0 01.72 5.39a.124.124 0 000 .053c.005.767.294 1.509.82 2.101.525.592 1.254 1 2.065 1.153-.326.071-.66.1-.995.087a4.39 4.39 0 01-.671 0 3.36 3.36 0 001.265 1.638c.594.412 1.31.645 2.052.666a7.475 7.475 0 01-4.413 1.423 8.92 8.92 0 01-.844-.08 10.571 10.571 0 005.445 1.49c6.526 0 10.096-5.057 10.096-9.446v-.434a6.933 6.933 0 001.767-1.717z"
+                ></path></svg>
+        </a>
+        <a
+            onclick={handleClick}
+            href={shareLinkedIn}
+            target="_blank"
+            rel="noopener"
+            id="Share-on-LinkedIn"
+            name="Share on LinkedIn"
+            aria-label="Share on LinkedIn (opens new tab)"
+            ><svg
+                viewBox="0 0 16 17"
+                class="fill"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M15.923 10.187v6.428H12.51v-5.998c0-1.506-.493-2.535-1.729-2.535-.943 0-1.504.693-1.75 1.364-.09.24-.114.573-.114.908v6.261H5.503s.046-10.158 0-11.21h3.414v1.588l-.023.037h.023v-.037c.453-.762 1.263-1.852 3.076-1.852 2.246 0 3.93 1.602 3.93 5.046zM1.932 0C.764 0 0 .837 0 1.937c0 1.076.742 1.938 1.887 1.938h.022c1.19 0 1.931-.862 1.931-1.938C3.818.837 3.1 0 1.932 0zM.202 16.615h3.413V5.405H.203v11.21z"
+                ></path></svg>
+        </a>
+        <a
+            onclick={handleClick}
+            href={shareFacebook}
+            target="_blank"
+            rel="noopener"
+            id="Share-on-Facebook"
+            name="Share on Facebook"
+            aria-label="Share on Facebook (opens new tab)"
+            ><svg
+                viewBox="0 0 9 18"
+                class="stroke"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M6.115 0c-2.173 0-3.66 1.5-3.66 4.23v2.363H0v3.195h2.455V18h2.926V9.788h2.45l.37-3.195H5.38V4.545c0-.922.236-1.545 1.42-1.545h1.507V.128A18.2 18.2 0 006.115 0z"
+                ></path></svg>
+        </a>
+    </div>
+</template>

package/src/modules/arch/socialShare/socialShare.ts

@@ -0,0 +1,29 @@
+import { LightningElement, api } from 'lwc';
+import { sendInteractionEvent, InteractionEventTypes } from 'arch/helpers';
+
+export default class extends LightningElement {
+    @api title: string | null = '';
+    @api url: string = window.location.href;
+
+    private get shareTwitter() {
+        return `https://twitter.com/intent/tweet/?text=${encodeURIComponent(
+            this.title
+        )}&url=${encodeURIComponent(this.url)}&via=SalesforceArchs`;
+    }
+
+    private get shareLinkedIn() {
+        return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI(
+            this.url
+        )}`;
+    }
+
+    private get shareFacebook() {
+        return `https://www.facebook.com/sharer/sharer.php?u=${encodeURI(
+            this.url
+        )}`;
+    }
+    handleClick(e){
+        sendInteractionEvent('Social Share Click', InteractionEventTypes.CLICK, e, e.currentTarget);
+
+    }
+}

package/src/modules/arch/spinner/spinner.css

@@ -0,0 +1,195 @@
+:host {
+    display: block;
+
+    --offset: 500ms;
+    --duration: 1000ms;
+}
+
+.spinner-xx-small {
+    --base-size: 0.5rem;
+    --dot-size: 0.125rem;
+    --distance: 0.125rem;
+}
+
+.spinner-x-small {
+    --base-size: 1rem;
+    --dot-size: 0.25rem;
+    --distance: 0.25rem;
+}
+
+.spinner-small {
+    --base-size: 1.25rem;
+    --dot-size: 0.25rem;
+    --distance: 0.375rem;
+}
+
+.spinner-medium {
+    --base-size: 2rem;
+    --dot-size: 0.5rem;
+    --distance: 0.5rem;
+}
+
+.spinner-large {
+    --base-size: 2.75rem;
+    --dot-size: 0.625rem;
+    --distance: 0.5rem;
+}
+
+.spinner-base {
+    color: var(--arch-color-granite);
+}
+
+.spinner-inverse {
+    color: var(--arch-color-white);
+}
+
+.spinner-brand {
+    color: var(--arch-color-brand);
+}
+
+.spinner {
+    position: relative;
+    width: calc(var(--base-size) + var(--dot-size) * 2 + var(--distance));
+    height: calc(var(--base-size) + var(--dot-size) * 2 + var(--distance));
+}
+
+.assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+}
+
+.spinner-dots {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--base-size);
+    transform: translate(-50%, 0);
+}
+
+.spinner-dots,
+.spinner-dot-a,
+.spinner-dot-b {
+    transform-origin: 50% 50%;
+    will-change: transform;
+}
+
+.spinner-dot-a,
+.spinner-dot-b {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+
+.spinner-dots::before,
+.spinner-dots::after,
+.spinner-dot-a::before,
+.spinner-dot-b::before,
+.spinner-dot-a::after,
+.spinner-dot-b::after {
+    content: "";
+    position: absolute;
+    background: currentcolor;
+    border-radius: 100px;
+    animation-duration: var(--duration);
+    animation-iteration-count: infinite;
+    transform: translate3d(0, 0, 0);
+    width: var(--dot-size);
+    height: var(--dot-size);
+}
+
+.spinner-dots::before,
+.spinner-dot-a::before,
+.spinner-dot-b::before {
+    animation-name: dots-bounce-before-medium;
+    top: calc(var(--dot-size) / 2 * -1);
+    left: calc(var(--dot-size) / 2 * -1);
+}
+
+.spinner-dots::after,
+.spinner-dot-a::after,
+.spinner-dot-b::after {
+    animation-name: dots-bounce-after-medium;
+    top: calc(var(--dot-size) / 2 * -1);
+    right: calc(var(--dot-size) / 2 * -1);
+}
+
+.spinner-dot-a {
+    transform: rotate(60deg);
+}
+
+.spinner-dot-b {
+    transform: rotate(120deg);
+}
+
+.spinner-dots::before {
+    animation-delay: calc(-83.3333ms - var(--offset));
+}
+
+.spinner-dot-a::before {
+    animation-delay: calc(83.3333ms - var(--offset));
+}
+
+.spinner-dot-b::before {
+    animation-delay: calc(250ms - var(--offset));
+}
+
+.spinner-dots::after {
+    animation-delay: calc(416.6667ms - var(--offset));
+}
+
+.spinner-dot-a::after {
+    animation-delay: calc(583.3333ms - var(--offset));
+}
+
+.spinner-dot-b::after {
+    animation-delay: calc(750ms - var(--offset));
+}
+
+@keyframes dots-bounce-before-medium {
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        transform: translate3d(0, 0, 0);
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        transform: translate3d(calc(var(--distance) * -1), 0, 0);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes dots-bounce-after-medium {
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        transform: translate3d(0, 0, 0);
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        transform: translate3d(var(--distance), 0, 0);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}

package/src/modules/arch/spinner/spinner.html

@@ -0,0 +1,9 @@
+<template>
+    <div role="status" class={className}>
+        <span class="assistive-text">Loading</span>
+        <div class="spinner-dots">
+            <div class="spinner-dot-a"></div>
+            <div class="spinner-dot-b"></div>
+        </div>
+    </div>
+</template>

package/src/modules/arch/spinner/spinner.ts

@@ -0,0 +1,15 @@
+import { LightningElement, api } from 'lwc';
+
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_VARIANT = 'base';
+
+export default class extends LightningElement {
+    @api size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =
+        DEFAULT_SIZE;
+
+    @api variant: 'base' | 'brand' | 'inverse' = DEFAULT_VARIANT;
+
+    private get className() {
+        return `spinner spinner--${this.size} spinner--${this.variant}`;
+    }
+}

package/src/modules/arch/styles/styles.css

@@ -0,0 +1,24 @@
+.arch-helper_assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+}
+
+.arch-helper_field-label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+    display: block;
+    padding-right: var(--arch-spacing-2);
+    padding-top: var(--arch-spacing-2);
+    color: var(--arch-color-meteorite);
+    font-size: var(--arch-font-size-xs);
+    margin-bottom: var(--arch-spacing-2);
+}