@salesforcedevs/arch-components 1.20.17-alpha13 → 1.20.17-alpha15

package/src/modules/arch/summary/summary.css

@@ -0,0 +1,134 @@
+@import "arch/reset";
+
+.summary {
+    display: flex;
+    padding-bottom: 0.75rem;
+    padding-top: 0.75rem;
+}
+
+[data-display="brick"] {
+    flex-direction: row;
+}
+
+[data-display*="tile"] {
+    flex-direction: column;
+}
+
+.body,
+.footer {
+    flex-wrap: wrap;
+    margin-top: var(--arch-spacing-3);
+}
+
+.header {
+    align-items: flex-start;
+    display: flex;
+    justify-content: space-between;
+}
+
+.header-actions {
+    margin-bottom: -1.5rem;
+}
+
+.header-actions[data-alignment="start"] {
+    align-self: flex-start;
+}
+
+.header-actions[data-alignment="center"] {
+    align-self: flex-center;
+}
+
+.header-actions[data-alignment="end"] {
+    align-self: flex-end;
+}
+
+.summary:not([data-slots*="image"], [data-slots*="action"]) .header {
+    display: none;
+}
+
+.content {
+    display: flex;
+    flex: 1;
+}
+
+.content-start {
+    flex: 1;
+}
+
+.pretitle,
+.title,
+.description {
+    margin-top: var(--arch-spacing-1);
+}
+
+.pretitle {
+    color: var(--arch-color-meteorite);
+    font-size: var(--arch-font-size-sm);
+}
+
+.pretitle a {
+    color: var(--arch-color-brand);
+    text-decoration: none;
+}
+
+.pretitle a:hover {
+    text-decoration: underline;
+}
+
+.title {
+    display: inline-block;
+    font-size: var(--title-font-size, var(--arch-font-size-lg));
+    font-weight: 600;
+    text-align: left;
+}
+
+.title-link {
+    appearance: none;
+    background: none;
+    border: none;
+    color: var(--arch-color-brand);
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.title-link:hover {
+    text-decoration: underline;
+}
+
+.description {
+    color: var(--arch-color-meteorite);
+    font-size: var(--arch-font-size-sm);
+}
+
+.footer {
+    display: flex;
+    font-size: var(--arch-font-size-sm);
+    justify-content: space-between;
+    align-items: center;
+}
+
+.summary:not([data-slots*="meta"]) .footer {
+    display: none;
+}
+
+[data-display="brick"] .body {
+    flex: 1;
+    margin-top: 0;
+    margin-left: var(--arch-spacing-4);
+}
+
+[data-display="brick"] .body .content {
+    margin-top: 0;
+}
+
+@media screen and (min-width: 640px) {
+    [data-display^="brick-tile"] {
+        flex-direction: row;
+    }
+
+    [data-display^="brick-tile"] .body {
+        margin-left: var(--arch-spacing-4);
+        margin-top: 0;
+        flex: 1;
+    }
+}

package/src/modules/arch/summary/summary.html

@@ -0,0 +1,71 @@
+<template>
+    <div class="summary" data-display={displayMode}>
+        <div class="header">
+            <div class="image">
+                <slot name="image" onslotchange={onSlotChange}></slot>
+            </div>
+            <template if:true={isTile}>
+                <div data-alignment={actionsAlignment} class="header-actions">
+                    <slot name="action" onslotchange={onSlotChange}></slot>
+                </div>
+            </template>
+        </div>
+        <div class="body">
+            <div class="content">
+                <div class="content-start">
+                    <div class="pretitle">
+                        <slot name="pretitle" onslotchange={onSlotChange}>
+                            {pretitle}
+                            <a
+                                if:true={pretitleLinkHref}
+                                href={pretitleLinkHref}
+                                target={pretitleLinkTarget}
+                            >
+                                {pretitleLinkTitle}
+                            </a>
+                        </slot>
+                    </div>
+                    <arch-heading level={titleHeadingLevel}>
+                        <template if:true={titleIsAnchor}>
+                            <a
+                                class="title title-link"
+                                href={path}
+                                onclick={onTitleClick}
+                                target={pathTarget}
+                            >
+                                {title}
+                            </a>
+                        </template>
+                        <template if:true={titleIsButton}>
+                            <button
+                                class="title title-link"
+                                onclick={onTitleButtonClick}
+                            >
+                                {title}
+                            </button>
+                        </template>
+                        <template if:true={titleIsText}>
+                            <span class="title">{title}</span>
+                        </template>
+                    </arch-heading>
+                    <template if:true={showDescription}>
+                        <div class="description">{description}</div>
+                    </template>
+                </div>
+                <template if:false={isTile}>
+                    <div class="content-end">
+                        <slot name="action" onslotchange={onSlotChange}></slot>
+                    </div>
+                </template>
+            </div>
+            <div class="footer">
+                <div>
+                    <slot name="meta-left" onslotchange={onSlotChange}></slot>
+                </div>
+                <div>
+                    <slot name="meta-right" onslotchange={onSlotChange}></slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,148 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'arch/arch-summary',
+    parameters: {
+        modules: ['/modules/arch-summary.js'],
+        chromatic: {
+            viewports: [400, 800, 1199]
+        }
+    }
+};
+
+export const Base = () => html`
+    <arch-summary
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        path="/"
+        pretitle="Pretitle by "
+        pretitle-link-href="/"
+        pretitle-link-title="Link"
+        title="Title"
+    >
+        <arch-content-icon
+            slot="image"
+            src="/images/badge-1.png"
+        ></arch-content-icon>
+        <button slot="action">Action</button>
+        <span slot="meta-left">Meta left</span>
+        <span slot="meta-right">Meta right</span>
+    </arch-summary>
+`;
+
+export const CustomPretitle = () => html`
+    <arch-summary
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        path="/"
+        title="Title"
+    >
+        <arch-content-icon
+            slot="image"
+            src="/images/badge-1.png"
+        ></arch-content-icon>
+        <div slot="pretitle">
+            Pretitle by <a href="#">Link</a> (custom content)
+        </div>
+        <button slot="action">Action</button>
+        <span slot="meta-left">Meta left</span>
+        <span slot="meta-right">Meta right</span>
+    </arch-summary>
+`;
+
+export const Brick = () => html`
+    <arch-summary
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        display-mode="brick"
+        path="/"
+        title="Title"
+    >
+        <arch-content-icon
+            slot="image"
+            src="/images/badge-1.png"
+            size="small"
+        ></arch-content-icon>
+
+        <div slot="pretitle">
+            Pretitle by <a href="#">Link</a> (custom content)
+        </div>
+        <button slot="action">Action</button>
+        <span slot="meta-left">Meta left</span>
+        <span slot="meta-right">Meta right</span>
+    </arch-summary>
+`;
+
+export const BrickTile = () => html`
+    <arch-summary
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        display-mode="brick-tile"
+        path="/"
+        title="Title"
+    >
+        <arch-content-icon
+            slot="image"
+            src="/images/badge-1.png"
+            size="small"
+        ></arch-content-icon>
+
+        <div slot="pretitle">
+            Pretitle by <a href="#">Link</a> (custom content)
+        </div>
+        <button slot="action">Action</button>
+        <span slot="meta-left">Meta left</span>
+        <span slot="meta-right">Meta right</span>
+    </arch-summary>
+`;
+
+export const BrickCompact = () => html`
+    <arch-summary
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        compact
+        display-mode="brick-tile"
+        path="/"
+        title="Title"
+    >
+        <arch-content-icon
+            slot="image"
+            src="/images/badge-1.png"
+            size="small"
+        ></arch-content-icon>
+
+        <div slot="pretitle">
+            Pretitle by <a href="#">Link</a> (custom content)
+        </div>
+        <button slot="action">Action</button>
+        <span slot="meta-left">Meta left</span>
+        <span slot="meta-right">Meta right</span>
+    </arch-summary>
+`;
+
+export const TitleButton = () => html`
+    <arch-summary
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        pretitle="Pretitle by "
+        pretitle-link-href="/"
+        pretitle-link-title="Link"
+        title="Title"
+        title-mode="button"
+    >
+        <arch-content-icon
+            slot="image"
+            src="/images/badge-1.png"
+        ></arch-content-icon>
+    </arch-summary>
+`;
+
+export const TitleText = () => html`
+    <arch-summary
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        pretitle="Pretitle by "
+        pretitle-link-href="/"
+        pretitle-link-title="Link"
+        title="Title"
+        title-mode="text"
+    >
+        <arch-content-icon
+            slot="image"
+            src="/images/badge-1.png"
+        ></arch-content-icon>
+    </arch-summary>
+`;

package/src/modules/arch/summary/summary.ts

@@ -0,0 +1,96 @@
+import { api, LightningElement } from 'lwc';
+
+type TitleMode = 'anchor' | 'button' | 'text';
+
+export const mediaQueryTile = window.matchMedia(`(max-width: 640px)`);
+
+export default class extends LightningElement {
+    @api actionsAlignment: 'start' | 'center' | 'end' = 'start';
+    @api compact: boolean | string | null = null;
+    @api description: string | null = null;
+    @api displayMode: 'brick' | 'brick-tile' | 'tile' = 'tile';
+    @api path: string | null = null;
+    @api pathTarget: string | null = null;
+    @api pretitle: string | null = null;
+    @api pretitleLinkHref: string | null = null;
+    @api pretitleLinkTarget: string | null = null;
+    @api pretitleLinkTitle: string | null = null;
+    @api title: string = '';
+    @api titleHeadingLevel: '1' | '2' | '3' | '4' | null = null;
+
+    private _titleMode: TitleMode = 'anchor';
+
+    @api
+    get titleMode(): TitleMode {
+        // Backwards compatability
+        if (this._titleMode === 'anchor' && !this.path) {
+            if (process.env.NODE_ENV === 'development') {
+                console.warn(
+                    `title-mode was set to "anchor" but is missing "path" attribute, falling back to "button"`
+                );
+            }
+            return 'button';
+        }
+        return this._titleMode;
+    }
+
+    set titleMode(value) {
+        this._titleMode = value;
+    }
+
+    private isTile = true;
+
+    connectedCallback() {
+        this.onMediaQueryTile(mediaQueryTile);
+        mediaQueryTile.addListener(this.onMediaQueryTile);
+    }
+
+    disconnectedCallback() {
+        mediaQueryTile.removeListener(this.onMediaQueryTile);
+    }
+
+    private get isCompact() {
+        return typeof this.compact === 'boolean'
+            ? this.compact
+            : this.compact !== null;
+    }
+
+    private onMediaQueryTile = () => {
+        this.isTile =
+            this.displayMode === 'tile' ||
+            (this.displayMode === 'brick-tile' && mediaQueryTile.matches);
+    };
+
+    private onSlotChange() {
+        const slots = Array.from(
+            this.template.querySelectorAll('slot')
+        ) as HTMLSlotElement[];
+        const slotNames = slots
+            .filter((slot) => slot.assignedNodes()[0])
+            .map((slot) => slot.getAttribute('name'))
+            .join(' ');
+        this.template
+            .querySelector('.summary')!
+            .setAttribute('data-slots', slotNames);
+    }
+
+    private onTitleButtonClick() {
+        this.dispatchEvent(new CustomEvent('navigate'));
+    }
+
+    private get showDescription() {
+        return !this.isCompact;
+    }
+
+    private get titleIsAnchor() {
+        return this.titleMode === 'anchor';
+    }
+
+    private get titleIsButton() {
+        return this.titleMode === 'button';
+    }
+
+    private get titleIsText() {
+        return this.titleMode === 'text';
+    }
+}

package/src/modules/arch/tab/tab.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/src/modules/arch/tab/tab.html

@@ -0,0 +1,5 @@
+<template>
+    <template if:true={loaded}>
+        <slot></slot>
+    </template>
+</template>

package/src/modules/arch/tab/tab.ts

@@ -0,0 +1,46 @@
+import { LightningElement, api } from 'lwc';
+
+let uid = 0;
+
+export type TabElement = {
+    label: string;
+    load: () => void;
+    title: string;
+    unload: () => void;
+    value: string;
+};
+
+export default class extends LightningElement {
+    @api label: string | null = null;
+    @api value: string | null = null;
+
+    private loaded: boolean = false;
+
+    @api load() {
+        this.loaded = true;
+    }
+
+    @api unload() {
+        this.loaded = false;
+    }
+
+    connectedCallback() {
+        setTimeout(()=> {
+            this.dispatchEvent(
+                new CustomEvent('privatetabregister', {
+                    cancelable: true,
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        label: this.label,
+                        title: this.title || this.label,
+                        value: this.value || `tab-${uid++}`,
+                        load: () => this.load(),
+                        unload: () => this.unload()
+                    }
+                })
+            );
+
+        }, 0);        
+    }
+}

package/src/modules/arch/tabset/tabset.css

@@ -0,0 +1,112 @@
+@import "arch/reset";
+
+.tablist {
+    display: flex;
+    align-items: flex-start;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid var(--arch-color-fog);
+}
+
+.tab {
+    position: relative;
+    color: var(--arch-color-meteorite);
+    padding: 0 var(--arch-spacing-3);
+    margin-bottom: -1px;
+    height: var(--arch-spacing-10);
+    line-height: var(--arch-spacing-10);
+    box-shadow: inset 0 0 var(--arch-color-ocean);
+    transition: box-shadow var(--arch-duration-normal);
+}
+
+.tab:hover {
+    box-shadow: inset 0 -2px var(--arch-color-ocean);
+}
+
+.tab[aria-hidden="true"] {
+    visibility: hidden;
+}
+
+.tab-active {
+    font-weight: bold;
+    color: var(--arch-color-black);
+    box-shadow: inset 0 -3px var(--arch-color-ocean) !important;
+}
+
+.tab > a {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    cursor: pointer;
+    color: inherit;
+    border: 0;
+    text-transform: inherit;
+    z-index: 1;
+    outline: none !important;
+}
+
+.tab > a:focus {
+    text-decoration: underline;
+}
+
+.tabpanel[aria-hidden="true"] {
+    display: none;
+}
+
+.tabpanel {
+    position: relative;
+    padding: var(--arch-spacing-4) 0;
+}
+
+.overflow-tab {
+    position: relative;
+}
+
+.overflow-tab-icon {
+    margin-left: var(--arch-spacing-1);
+}
+
+.menu {
+    background-color: var(--arch-color-white);
+    border-radius: var(--arch-radius-md);
+    border: 1px solid var(--arch-color-fog);
+    box-shadow: var(--arch-shadow-sm);
+    margin-top: var(--arch-spacing-2);
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 9999;
+    padding: var(--arch-spacing-1) 0;
+    outline: 0;
+}
+
+.menu-item {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--arch-spacing-2) var(--arch-spacing-3);
+    color: var(--arch-color-black);
+    white-space: nowrap;
+    cursor: pointer;
+    font-size: var(--arch-font-size-sm);
+    line-height: var(--arch-line-height-normal);
+    outline: 0;
+}
+
+.menu-item > span {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.menu-item[data-active="true"],
+.menu-item:hover {
+    background-color: var(--arch-color-sand);
+}

package/src/modules/arch/tabset/tabset.html

@@ -0,0 +1,62 @@
+<template>
+    <div onprivatetabregister={handleTabRegister}>
+        <ul role="tablist" class="tablist" onkeydown={handleKeyDown}>
+            <template for:each={tabs} for:item="tab">
+                <li
+                    key={tab.value}
+                    role="presentation"
+                    title={tab.title}
+                    class={tab.className}
+                    if:false={tab.overflow}
+                >
+                    <a
+                        id={tab.labelId}
+                        role="tab"
+                        tabindex={tab.tabindex}
+                        aria-selected={tab.active}
+                        data-value={tab.value}
+                        onclick={tab.onselect}
+                        aria-controls="tabpanel"
+                    >
+                        {tab.label}
+                    </a>
+                </li>
+            </template>
+            <li class="tab overflow-tab" aria-hidden={isOverflowHidden}>
+                <a tabindex="0" data-menu="trigger">
+                    {labels.overflowButton}
+                    <arch-icon
+                        class="overflow-tab-icon"
+                        symbol="chevrondown"
+                        size="small"
+                    ></arch-icon>
+                </a>
+
+                <div data-menu="menu" id="menu" class="menu">
+                    <template for:each={tabs} for:item="tab">
+                        <a
+                            if:true={tab.overflow}
+                            key={tab.value}
+                            class="menu-item"
+                            data-menu="item"
+                            data-value={tab.value}
+                            onclick={tab.onmenuselect}
+                        >
+                            {tab.label}
+                        </a>
+                    </template>
+                </div>
+            </li>
+        </ul>
+
+        <div
+            id="tabpanel"
+            class="tabpanel"
+            role="tabpanel"
+            aria-labelledby="active-tab"
+            tabindex="0"
+        >
+            <slot></slot>
+        </div>
+    </div>
+</template>