@salesforcedevs/arch-components 1.20.17-alpha1

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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,12 @@
+@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

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

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

@@ -0,0 +1,65 @@
+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

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

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

@@ -0,0 +1,26 @@
+@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

@@ -0,0 +1,10 @@
+<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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,53 @@
+@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

@@ -0,0 +1,18 @@
+<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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,11 @@
+@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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,6 @@
+/* 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

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

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

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

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

@@ -0,0 +1,70 @@
+@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

@@ -0,0 +1,42 @@
+<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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,43 @@
+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(';')
+        }));
+    }
+}