@salesforcedevs/arch-components 1.20.17-alpha1 → 1.20.17-alpha11

package/src/modules/tm/skillsCardA/skillsCardA.ts

@@ -1,38 +0,0 @@
-import { api } from 'lwc';
-
-import { ChildrenElement } from 'shared/children';
-
-export type Item = {
-    href: string;
-    target: string;
-    title: string;
-    value: string;
-};
-
-export default class extends ChildrenElement<Item> {
-    @api title: string = '';
-    @api description: string | null = null;
-    @api theme: 'cold' | 'warm' = 'cold';
-
-    childTagName = 'TM-SKILL-ITEM';
-    extractor = extractItemAttributes;
-
-    private get skills() {
-        return this.items.map((item) => {
-            return {
-                ...item,
-                valueClassName: `progress-value progress-value--${this.theme}`,
-                valueStyle: `width: ${item.value}%`
-            };
-        });
-    }
-}
-
-export function extractItemAttributes(element: Element): Item {
-    return {
-        href: element.getAttribute('href')!,
-        target: element.getAttribute('target') || '',
-        title: element.getAttribute('title')!,
-        value: element.getAttribute('value')!
-    };
-}

package/src/modules/tm/skillsGridA/skillsGridA.css

@@ -1,12 +0,0 @@
-@import 'tds/reset';
-
-.skills-grid {
-    justify-content: center;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    grid-column-gap: var(--tds-spacing-6);
-    grid-row-gap: var(--tds-spacing-6);
-    max-width: 1280px;
-    list-style: none;
-    padding-left: var(--tds-spacing-0);
-}

package/src/modules/tm/skillsGridA/skillsGridA.html

@@ -1,5 +0,0 @@
-<template>
-    <div class="skills-grid">
-        <slot></slot>
-    </div>
-</template>

package/src/modules/tm/skillsGridA/skillsGridA.stories.ts

@@ -1,65 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tm/tm-skills-grid-a',
-    parameters: {
-        modules: ['/modules/tm-skills-grid-a.js']
-    }
-};
-
-export const Base = () => html`
-    <tm-skills-grid-a>
-        <tm-skills-card-a
-            title="General skills to develop"
-            description="These are the most common general skills listed in job postings for Contract Tracer roles."
-        >
-            <tm-skill-item
-                title="Communication (written/verbal)"
-                value="46"
-            ></tm-skill-item>
-            <tm-skill-item
-                href="#"
-                title="Stakeholder Engagement"
-                value="32"
-            ></tm-skill-item>
-            <tm-skill-item href="#" title="Research" value="38"></tm-skill-item>
-            <tm-skill-item
-                href="#"
-                title="Project Management"
-                value="43"
-            ></tm-skill-item>
-            <tm-skill-item
-                href="#"
-                title="Customer Service"
-                value="24"
-            ></tm-skill-item>
-        </tm-skills-card-a>
-        <tm-skills-card-a
-            title="Technical and specialized skills to master"
-            description="You'll need these frequently requested skills to really excel. Good news is will teach you them for free!"
-            theme="warm"
-        >
-            <tm-skill-item
-                href="#"
-                title="Data Management"
-                value="80"
-            ></tm-skill-item>
-            <tm-skill-item
-                href="#"
-                title="Medical Ethics"
-                value="65"
-            ></tm-skill-item>
-            <tm-skill-item href="#" title="Privacy" value="75"></tm-skill-item>
-            <tm-skill-item
-                href="#"
-                title="Salesforce Health Cloud"
-                value="43"
-            ></tm-skill-item>
-            <tm-skill-item
-                href="#"
-                title="Virology & Epdiemiology"
-                value="42"
-            ></tm-skill-item>
-        </tm-skills-card-a>
-    </tm-skills-grid-a>
-`;

package/src/modules/tm/skillsGridA/skillsGridA.ts

@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class extends LightningElement {}

package/src/modules/tm/statsA/statsA.css

@@ -1,26 +0,0 @@
-@import 'tds/reset';
-
-ul {
-    --spacing: var(--tds-spacing-6);
-    justify-content: center;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    grid-column-gap: var(--spacing);
-    grid-row-gap: var(--spacing);
-    max-width: 1280px;
-}
-
-li {
-}
-
-h3 {
-    font-size: var(--tds-font-size-7xl);
-    margin-bottom: var(--tds-spacing-1);
-    margin-top: var(--tds-spacing-0);
-    font-family: 'Neutraface';
-}
-
-p {
-    font-size: var(--tds-font-size-md);
-    margin: var(--tds-spacing-0);
-}

package/src/modules/tm/statsA/statsA.html

@@ -1,10 +0,0 @@
-<template>
-    <ul>
-        <template for:each={items} for:item="item">
-            <li key={item.title}>
-                <h3>{item.title}</h3>
-                <p>{item.description}</p>
-            </li>
-        </template>
-    </ul>
-</template>

package/src/modules/tm/statsA/statsA.stories.js

@@ -1,29 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tm/tm-stats-a',
-    parameters: {
-        modules: ['/modules/tm-stats-a.js']
-    }
-};
-
-export const Base = () => html`
-    <tm-stats-a>
-        <tm-stat-item
-            title="$15-$35"
-            description="average hourly pay (US data)"
-        ></tm-stat-item>
-        <tm-stat-item
-            title="200K"
-            description="estimated tracers needed to safely reopen (US data)"
-        ></tm-stat-item>
-        <tm-stat-item
-            title="45 States"
-            description="are actively looking to hire"
-        ></tm-stat-item>
-        <tm-stat-item
-            title="75%"
-            description="can work from home"
-        ></tm-stat-item>
-    </tm-stats-a>
-`;

package/src/modules/tm/statsA/statsA.ts

@@ -1,20 +0,0 @@
-import { ChildrenElement } from 'shared/children';
-
-export type ItemAttribute = string | null;
-
-export type Item = {
-    description: ItemAttribute;
-    title: ItemAttribute;
-};
-
-export default class extends ChildrenElement<Item> {
-    childTagName = 'TM-STAT-ITEM';
-    extractor = extractItemAttributes;
-}
-
-export function extractItemAttributes(element: Element) {
-    return {
-        description: element.getAttribute('description'),
-        title: element.getAttribute('title')
-    } as Item;
-}

package/src/modules/tm/textItem/textItem.css

@@ -1,53 +0,0 @@
-@import 'tds/reset';
-
-:host {
-    height: 100%;
-}
-
-.content {
-    display: flex;
-    flex-direction: column;
-}
-
-.content-inner {
-    flex: 1;
-}
-
-.title {
-    font-size: var(--tds-font-size-lg);
-    font-weight: bold;
-}
-
-.description {
-    margin-top: var(--tds-spacing-3);
-    line-height: var(--tds-line-height-normal);
-}
-
-.text-item[data-icon^='left'] {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: row-reverse;
-    padding: var(--tds-spacing-6);
-}
-
-.text-item[data-icon^='left'] .content {
-    flex: 1;
-}
-
-.text-item[data-icon^='left'] .icon {
-    margin-right: var(--tds-spacing-6);
-}
-
-.text-item[data-icon='left--small'] .icon {
-    --icon-size: var(--tds-spacing-4);
-}
-
-.text-item[data-icon='left--large'] .icon {
-    --icon-size: var(--tds-spacing-10);
-}
-
-@media screen and (max-width: 400px) {
-    .text-item[data-icon^='left'] {
-        padding: var(--tds-spacing-2) var(--tds-spacing-0);
-    }
-}

package/src/modules/tm/textItem/textItem.html

@@ -1,18 +0,0 @@
-<template>
-    <div class="text-item" data-icon={iconVariant}>
-        <div class="content">
-            <div class="content-inner">
-                <h3 class="title">{title}</h3>
-                <p if:true={description} class="description">{description}</p>
-            </div>
-        </div>
-        <template if:true={hasIcon}>
-            <tds-icon
-                class="icon"
-                size="override"
-                sprite={iconSprite}
-                symbol={iconSymbol}
-            ></tds-icon>
-        </template>
-    </div>
-</template>

package/src/modules/tm/textItem/textItem.ts

@@ -1,32 +0,0 @@
-import { api, track, LightningElement } from 'lwc';
-
-export type TextItemAttribute = string | null;
-
-export type ItemImageVariant = 'left--small';
-
-export type TextItem = {
-    description: TextItemAttribute;
-    iconSymbol: TextItemAttribute;
-    iconSprite: TextItemAttribute;
-    title: TextItemAttribute;
-};
-
-export default class extends LightningElement {
-    @api description: TextItemAttribute = null;
-    @api iconSymbol: TextItemAttribute = null;
-    @api iconSprite: TextItemAttribute = null;
-    @api iconVariant: ItemImageVariant | null = null;
-    @api title: string = '';
-    private get hasIcon() {
-        return this.iconVariant && this.iconSymbol;
-    }
-}
-
-export function extractTextItemAttributes(element: Element) {
-    return {
-        description: element.getAttribute('description'),
-        iconSymbol: element.getAttribute('icon-symbol'),
-        iconSprite: element.getAttribute('icon-sprite') || 'utility',
-        title: element.getAttribute('title')
-    } as TextItem;
-}

package/src/modules/tm/textItemGridA/textItemGridA.css

@@ -1,11 +0,0 @@
-@import 'tds/reset';
-
-ul {
-    --spacing: var(--tds-spacing-4);
-    justify-content: center;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    grid-column-gap: var(--spacing);
-    grid-row-gap: var(--spacing);
-    max-width: 1280px;
-}

package/src/modules/tm/textItemGridA/textItemGridA.html

@@ -1,15 +0,0 @@
-<template>
-    <ul>
-        <template for:each={items} for:item="item">
-            <li key={item.title}>
-                <tm-text-item
-                    icon-symbol={item.iconSymbol}
-                    icon-sprite={item.iconSprite}
-                    icon-variant={variant}
-                    description={item.description}
-                    title={item.title}
-                ></tm-text-item>
-            </li>
-        </template>
-    </ul>
-</template>

package/src/modules/tm/textItemGridA/textItemGridA.stories.js

@@ -1,67 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tm/tm-text-item-grid-a',
-    parameters: {
-        chromatic: {
-            viewports: [400, 800, 1199]
-        },
-        modules: ['/modules/tm-text-item-grid-a.js']
-    }
-};
-
-export const Base = () => html`
-    <tm-text-item-grid-a>
-        <tm-card
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
-            title="Hello A"
-        ></tm-card>
-        <tm-card
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
-            title="Hello B"
-        ></tm-card>
-        <tm-card
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
-            title="Hello C"
-        ></tm-card>
-        <tm-card
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
-            title="Hello D"
-        ></tm-card>
-        <tm-card
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
-            title="Hello E"
-        ></tm-card>
-    </tm-text-item-grid-a>
-`;
-
-export const Icon = () => html`
-    <tm-text-item-grid-a icon-type="left">
-        <tm-card
-            icon-symbol="account"
-            icon-sprite="standard"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
-            title="Hello A"
-        ></tm-card>
-        <tm-card
-            icon-symbol="activity"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
-            title="Hello B"
-        ></tm-card>
-        <tm-card
-            icon-symbol="activity"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
-            title="Hello C"
-        ></tm-card>
-        <tm-card
-            icon-symbol="activity"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
-            title="Hello D"
-        ></tm-card>
-        <tm-card
-            icon-symbol="activity"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
-            title="Hello E"
-        ></tm-card>
-    </tm-text-item-grid-a>
-`;

package/src/modules/tm/textItemGridA/textItemGridA.ts

@@ -1,20 +0,0 @@
-import { api } from 'lwc';
-
-import { TextItem, extractTextItemAttributes } from 'tm/textItem';
-
-import { ChildrenElement } from 'shared/children';
-
-export default class extends ChildrenElement<TextItem> {
-    @api iconType: 'left' | null = null;
-
-    private get variant() {
-        switch (this.iconType) {
-            case 'left':
-                return 'left--large';
-            default:
-                return null;
-        }
-    }
-
-    extractor = extractTextItemAttributes;
-}

package/src/modules/tm/threeCardGrid/threeCardGrid.css

@@ -1,6 +0,0 @@
-/* Override the default grid template columns at tablet resolution, forcing 3 columns */
-@media screen and (min-width: 640px) {
-    dx-grid::part(container) {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}

package/src/modules/tm/threeCardGrid/threeCardGrid.html

@@ -1,5 +0,0 @@
-<template>
-    <dx-grid columns="three">
-        <slot></slot>
-    </dx-grid>
-</template>

package/src/modules/tm/threeCardGrid/threeCardGrid.ts

@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class ThreeCardGrid extends LightningElement {}

package/src/modules/tm/trailblazersA/trailblazersA.css

@@ -1,70 +0,0 @@
-@import 'tds/reset';
-@import 'tm/cardBase';
-
-ul {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
-    grid-gap: var(--tds-spacing-6);
-    justify-content: center;
-    margin: 0;
-    max-width: 1280px;
-    padding: 0;
-}
-
-.card {
-    overflow: hidden;
-}
-
-.image {
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 0;
-    padding-top: 60%;
-}
-
-.content {
-    padding: var(--tds-spacing-6);
-}
-
-.name {
-    color: var(--tds-color-black);
-    font-size: var(--tds-font-size-xl);
-    font-weight: bold;
-}
-.role {
-    color: var(--tds-color-black);
-    font-size: var(--tds-font-size-lg);
-    margin-top: var(--tds-spacing-1);
-    padding-bottom: var(--tds-spacing-2);
-}
-.item {
-    color: var(--tds-color-meteorite);
-    display: flex;
-    font-size: var(--tds-font-size-smd);
-    margin: var(--tds-spacing-2) 0;
-}
-
-.item span,
-.item a {
-    margin-left: var(--tds-spacing-2);
-}
-
-.link {
-    color: var(--tds-color-meteorite);
-}
-.cta {
-    margin-top: var(--tds-spacing-4);
-}
-
-@media screen and (max-width: 800px) {
-    ul {
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    }
-}
-
-@media screen and (max-width: 400px) {
-    ul {
-        grid-template-columns: 1fr;
-    }
-}

package/src/modules/tm/trailblazersA/trailblazersA.html

@@ -1,42 +0,0 @@
-<template>
-    <ul>
-        <template for:each={trailblazers} for:item="item">
-            <li class="card card-base" key={item.name}>
-                <div class="image" style={item.style}></div>
-                <div class="content">
-                    <div class="name">{item.name}</div>
-                    <div class="role">{item.role}</div>
-                    <div class="item">
-                        <tds-icon symbol="favorite"></tds-icon>
-                        <span>{item.rank}</span>
-                    </div>
-                    <div class="item">
-                        <tds-icon symbol="checkin"></tds-icon>
-                        <span>{item.location}</span>
-                    </div>
-                    <div class="item">
-                        <tds-icon symbol="clock"></tds-icon>
-                        <span>{item.since}</span>
-                    </div>
-                    <div class="item">
-                        <tds-icon symbol="user"></tds-icon>
-                        <a
-                            class="link"
-                            href={item.profileHref}
-                            target={item.profileTarget}
-                            >{item.profileTitle}</a
-                        >
-                    </div>
-                    <tds-button-link
-                        class="cta"
-                        href={item.ctaHref}
-                        if:true={item.ctaHref}
-                        target={item.ctaTarget}
-                    >
-                        {item.ctaTitle}
-                    </tds-button-link>
-                </div>
-            </li>
-        </template>
-    </ul>
-</template>

package/src/modules/tm/trailblazersA/trailblazersA.stories.js

@@ -1,52 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tm/tm-trailblazers-a',
-    parameters: {
-        chromatic: {
-            viewports: [400, 800, 1199]
-        },
-        modules: ['/modules/tm-trailblazers-a.js']
-    }
-};
-
-export const Base = () => html`
-    <tm-trailblazers-a>
-        <tm-trailblazer-item
-            cta-href="/"
-            cta-title="My Story"
-            img-src="/images/card-a.png"
-            location="Sacremento, California"
-            name="Jim Smith A"
-            profile-href="https://trailblazer.me/jima"
-            profile-title="trailblazer.me/jima"
-            rank="Ranger"
-            role="Architect, US Bank"
-            since="Trailblazer Since 2018"
-        ></tm-trailblazer-item>
-        <tm-trailblazer-item
-            cta-href="/"
-            cta-title="My Story"
-            img-src="/images/card-a.png"
-            location="Sacremento, California"
-            name="Jim Smith B"
-            profile-href="https://trailblazer.me/jimb"
-            profile-title="trailblazer.me/jimb"
-            rank="Ranger"
-            role="Architect, US Bank"
-            since="Trailblazer Since 2018"
-        ></tm-trailblazer-item>
-        <tm-trailblazer-item
-            cta-href="/"
-            cta-title="My Story"
-            img-src="/images/card-a.png"
-            location="Sacremento, California"
-            name="Jim Smith C"
-            profile-href="https://trailblazer.me/jimc"
-            profile-title="trailblazer.me/jimc"
-            rank="Ranger"
-            role="Architect, US Bank"
-            since="Trailblazer Since 2018"
-        ></tm-trailblazer-item>
-    </tm-trailblazers-a>
-`;

package/src/modules/tm/trailblazersA/trailblazersA.ts

@@ -1,43 +0,0 @@
-import { ChildrenElement } from 'shared/children';
-
-export type Trailblazer = {
-    ctaHref: string;
-    ctaTarget: string;
-    ctaTitle: string;
-    imgSrc: string;
-    location: string;
-    name: string;
-    profileHref: string;
-    profileTarget: string;
-    profileTitle: string;
-    rank: string;
-    role: string;
-    since: string;
-};
-
-export default class extends ChildrenElement<Trailblazer> {
-    childTagName = 'TM-TRAILBLAZER-ITEM';
-    extractor = (element: Element) => {
-        return {
-            ctaHref: element.getAttribute('cta-href')!,
-            ctaTarget: element.getAttribute('cta-target') || '',
-            ctaTitle: element.getAttribute('cta-title')!,
-            imgSrc: element.getAttribute('img-src')!,
-            location: element.getAttribute('location')!,
-            name: element.getAttribute('name')!,
-            profileHref: element.getAttribute('profile-href')!,
-            profileTarget: element.getAttribute('profile-target') || '',
-            profileTitle: element.getAttribute('profile-title')!,
-            rank: element.getAttribute('rank')!,
-            role: element.getAttribute('role')!,
-            since: element.getAttribute('since')!
-        };
-    };
-
-    get trailblazers() {
-        return this.items.map((item) => ({
-            ...item,
-            style: [`background-image: url(${item.imgSrc})`].join(';')
-        }));
-    }
-}