@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tm/heroA/heroA.css

@@ -0,0 +1,116 @@
+@import 'tds/reset';
+
+a {
+    text-decoration: none;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+    max-height: 475px;
+}
+
+.hero {
+    padding: 0 var(--tds-spacing-6);
+}
+
+.hero--white {
+    background-color: var(--tds-color-white);
+    color: var(--tds-color-black);
+}
+
+.hero--dark {
+    background-color: var(--tds-color-theme-dark);
+    color: var(--tds-color-white);
+}
+
+.hero--blue {
+    background-color: var(--tds-color-blue-ninety-five);
+    color: var(--tds-color-black);
+}
+
+.hero--light {
+    background-color: var(--tds-color-theme-light);
+    color: var(--tds-color-black);
+}
+
+.hero--bright {
+    background-color: var(--tds-color-theme-bright);
+    color: var(--tds-color-black);
+}
+
+.content {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin: auto;
+    max-width: 1280px;
+    min-height: 500px;
+}
+
+.content-start {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    padding-top: var(--tds-spacing-12);
+    padding-bottom: var(--tds-spacing-12);
+    padding-right: var(--tds-spacing-6);
+    width: 40%;
+    min-width: 400px;
+}
+
+.content-end--center {
+    margin-top: var(--tds-spacing-8);
+    margin-bottom: var(--tds-spacing-8);
+}
+
+.content-end--bottom {
+    align-self: flex-end;
+    margin-top: var(--tds-spacing-8);
+}
+
+.title {
+    font-family: 'Neutraface';
+    font-size: var(--tds-font-size-6xl);
+    line-height: 1;
+    white-space: pre-line;
+}
+
+.subtitle {
+    line-height: 1.5;
+    margin: var(--tds-spacing-2) 0;
+    font-size: var(--tds-font-size-xl);
+}
+
+.cta {
+    margin-top: var(--tds-spacing-2);
+}
+
+@media screen and (max-width: 1100px) {
+    .content {
+        flex-direction: column;
+        padding-top: var(--tds-spacing-8);
+    }
+
+    .content-start {
+        align-items: center;
+        margin: auto;
+        max-width: 400px;
+        min-width: auto;
+        padding: var(--tds-spacing-2) 0 var(--tds-spacing-3);
+        text-align: center;
+        width: 100%;
+    }
+
+    .content-end {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 450px;
+        max-height: 450px;
+    }
+
+    .title {
+        white-space: normal;
+        font-size: var(--tds-font-size-5xl);
+    }
+}

package/src/modules/tm/heroA/heroA.html

@@ -0,0 +1,27 @@
+<template>
+    <div class={heroClassName}>
+        <div class="content">
+            <div class="content-start">
+                <h1 class="title">{title}</h1>
+                <p if:true={subtitle} class="subtitle">{subtitle}</p>
+                <slot name="cta">
+                    <tds-button-link
+                        class="cta"
+                        size="large"
+                        href={ctaHref}
+                        target={ctaTarget}
+                        if:true={ctaHref}
+                        variant={buttonVariant}
+                        onclick={handleCtaClick}
+                        >{ctaLabel}</tds-button-link
+                    >
+                </slot>
+            </div>
+            <div if:true={imgSrc} class={contentEndClassName}>
+                <picture>
+                    <img alt="" src={imgSrc} loading="lazy" decoding="async" />
+                </picture>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,49 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-hero-a',
+    parameters: {
+        chromatic: {
+            viewports: [400, 1100, 1199]
+        },
+        modules: ['/modules/tm-hero-a.js']
+    }
+};
+
+export const Base = () => html`
+    <tm-hero-a
+        cta-href="/"
+        cta-label="CTA"
+        img-src="/images/hero-a-architect.png"
+        img-align="bottom"
+        subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
+        title="Hello
+Architects"
+    ></tm-hero-a>
+`;
+
+export const Light = () => html`
+    <tm-hero-a
+        background="light"
+        cta-href="/"
+        cta-label="CTA"
+        img-src="/images/hero-a-architect.png"
+        img-align="bottom"
+        subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
+        title="Hello
+Architects"
+    ></tm-hero-a>
+`;
+
+export const Dark = () => html`
+    <tm-hero-a
+        background="dark"
+        cta-href="/"
+        cta-label="CTA"
+        img-src="/images/hero-a-architect.png"
+        img-align="bottom"
+        subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
+        title="Hello
+Architects"
+    ></tm-hero-a>
+`;

package/src/modules/tm/heroA/heroA.ts

@@ -0,0 +1,56 @@
+import { api, LightningElement } from 'lwc';
+import { track } from 'shared/track';
+
+const widths = [820, 640, 320, 75];
+
+export default class extends LightningElement {
+    @api background: 'white' | 'dark' | 'light' = 'white';
+    @api ctaHref: string | undefined;
+    @api ctaLabel: string | undefined;
+    @api ctaTarget: string | undefined;
+    @api imgSrc: string | undefined;
+    @api imgAlign: 'bottom' | 'center' = 'center';
+    @api subtitle: string | undefined;
+    @api title: string = '';
+
+    private get buttonVariant() {
+        return this.background === 'dark' ? 'neutral' : 'brand';
+    }
+
+    private get heroClassName() {
+        return `hero hero--${this.background}`;
+    }
+
+    private get contentEndClassName() {
+        return `content-end content-end--${this.imgAlign}`;
+    }
+
+    private handleCtaClick() {
+        track(this.template.host, 'cta_clicked', {
+            ctaType: 'primary',
+            label: this.ctaLabel
+        });
+    }
+
+    private get imgSrcSetWebP() {
+        if (!this.imgSrc) {
+            return '';
+        }
+
+        if(this.isRemoteImage){
+            return this.imgSrc;
+        } else {
+            const imgType = this.imgSrc.split('.').pop();
+            const imgName = this.imgSrc.replace(`.${imgType || ''}`, '');
+            let srcSet: string[] = [];
+            widths.forEach((width) => {
+                srcSet.push(`${imgName}-${width}w.webp ${width}w`);
+            });
+            return srcSet.join(',');
+        }
+    }
+
+    private get isRemoteImage() {
+        return /^(https?\:\/\/|\/\/)/i.test(this.imgSrc || '');
+    }
+}

package/src/modules/tm/heroB/heroB.css

@@ -0,0 +1,78 @@
+@import 'tds/reset';
+
+a {
+    text-decoration: none;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+    max-height: 100px;
+}
+
+.hero--white {
+    background-color: var(--tds-color-white);
+    color: var(--tds-color-black);
+}
+
+.hero--dark {
+    background-color: var(--tds-color-theme-dark);
+    color: var(--tds-color-white);
+}
+
+.hero--blue {
+    background-color: var(--tds-color-blue-ninety-five);
+    color: var(--tds-color-black);
+}
+
+.hero--light {
+    background-color: var(--tds-color-theme-light);
+    color: var(--tds-color-black);
+}
+
+.hero--bright {
+    background-color: var(--tds-color-theme-bright);
+    color: var(--tds-color-black);
+}
+
+.content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--tds-spacing-6) 0;
+    text-align: center;
+    min-height: 448px;
+    max-width: 600px;
+    margin: auto;
+}
+
+.content > * + * {
+    margin-top: var(--tds-spacing-4);
+}
+
+.title {
+    font-family: 'Neutraface';
+    font-size: var(--tds-font-size-6xl);
+    line-height: 1;
+    white-space: pre-line;
+}
+
+.subtitle {
+    line-height: 1.5;
+    margin: var(--tds-spacing-2) 0;
+    font-size: var(--tds-font-size-xl);
+}
+
+.cta {
+    margin-top: var(--tds-spacing-2);
+}
+
+@media screen and (max-width: 1280px) {
+    .hero {
+        padding: 0 var(--tds-spacing-4);
+    }
+}
+
+@media screen and (max-width: 768px) {
+}

package/src/modules/tm/heroB/heroB.html

@@ -0,0 +1,26 @@
+<template>
+    <div class={heroClassName} style={backgroundStyle}>
+        <div class="content">
+            <img
+                alt=""
+                if:true={imgSrc}
+                src={imgSrc}
+                loading="lazy"
+                decoding="async"
+            />
+            <h1 class="title">{title}</h1>
+            <p class="subtitle" if:true={subtitle}>{subtitle}</p>
+            <slot name="cta">
+                <tds-button-link
+                    class="cta"
+                    size="large"
+                    href={ctaHref}
+                    target={ctaTarget}
+                    if:true={ctaHref}
+                    variant={buttonVariant}
+                    >{ctaLabel}</tds-button-link
+                >
+            </slot>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,44 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-hero-b',
+    parameters: {
+        chromatic: {
+            viewports: [400, 1199]
+        },
+        modules: ['/modules/tm-hero-b.js']
+    }
+};
+
+export const Base = () => html`
+  <tm-hero-b
+    cta-href="/"
+    cta-label="CTA"
+    img-src="/images/hero-b.png"
+    subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
+    title="Hello Architects"
+  ></tm-hero-a>
+`;
+
+export const Light = () => html`
+  <tm-hero-b
+    background="light"
+    cta-href="/"
+    cta-label="CTA"
+    img-src="/images/hero-b.png"
+    subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
+    title="Hello Architects"
+  ></tm-hero-a>
+`;
+
+export const Dark = () => html`
+  <tm-hero-b
+    background="dark"
+    background-src="/images/architect-bg.svg"
+    cta-href="/"
+    cta-label="CTA"
+    img-src="/images/hero-b.png"
+    subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
+    title="Hello Architects"
+  ></tm-hero-a>
+`;

package/src/modules/tm/heroB/heroB.ts

@@ -0,0 +1,26 @@
+import { api, LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    @api background: 'white' | 'dark' | 'light' = 'white';
+    @api backgroundSrc: string | undefined;
+    @api ctaHref: string | undefined;
+    @api ctaLabel: string | undefined;
+    @api ctaTarget: string | undefined;
+    @api imgSrc: string | undefined;
+    @api subtitle: string | undefined;
+    @api title: string = '';
+
+    private get buttonVariant() {
+        return this.background === 'dark' ? 'neutral' : 'brand';
+    }
+
+    private get heroClassName() {
+        return `hero hero--${this.background}`;
+    }
+
+    private get backgroundStyle() {
+        return this.backgroundSrc
+            ? `background-image: url(${this.backgroundSrc})`
+            : '';
+    }
+}

package/src/modules/tm/page/__tests__/page.test.ts

@@ -0,0 +1,35 @@
+import { nextTick } from 'shared/testutils';
+
+import Page from '../page';
+
+customElements.define('tm-page', Page.CustomElementConstructor);
+
+describe('tm-page', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    // Skip this test as LWC in test mode doesn't support child nodes for light DOM components
+    // The page component uses slots for content
+    it.skip('provides a default slot', async () => {
+        document.body.innerHTML = `
+      <tm-page>Hello</tm-page>
+    `;
+        await nextTick();
+        expect(
+            document
+                .querySelector('tm-page')!
+                .shadowRoot!.querySelector('slot')!
+                .assignedNodes()[0].textContent
+        ).toEqual('Hello');
+    });
+
+    it('renders the component', () => {
+        document.body.innerHTML = '<tm-page></tm-page>';
+        const element = document.querySelector('tm-page')!;
+        expect(element).toBeTruthy();
+        expect(element.shadowRoot).toBeTruthy();
+    });
+});

package/src/modules/tm/page/page.css

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

package/src/modules/tm/page/page.html

@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>

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

@@ -0,0 +1,10 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-page',
+    parameters: {
+        modules: ['/modules/tm-page.js']
+    }
+};
+
+export const Base = () => html` <tm-page> Hello </tm-page> `;

package/src/modules/tm/page/page.ts

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

package/src/modules/tm/pageHeaderA/pageHeaderA.css

@@ -0,0 +1,82 @@
+@import 'tds/reset';
+
+.root {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: var(--tds-spacing-12) 0;
+    padding-left: 1rem;
+}
+
+@media screen and (max-width: 800px) {
+    .root {
+        padding-top: 1.25rem;
+        display: block;
+    }
+}
+
+.pretitle {
+    color: var(--tds-colors-meteorite);
+}
+
+h1 {
+    font-size: var(--tds-font-size-4xl);
+    margin: 0;
+    padding: 0;
+}
+
+.actions {
+    align-items: center;
+    display: grid;
+    grid-auto-flow: column;
+    grid-column-gap: var(--tds-spacing-2);
+}
+
+@media screen and (max-width: 800px) {
+    .root,
+    .actions {
+        padding-top: 1.25rem;
+    }
+
+    .actions {
+        width: 120px;
+    }
+}
+
+.actions a,
+.actions a:visited {
+    padding-right: 1rem;
+    color: var(--tds-color-black);
+    text-decoration: none;
+}
+
+.actions a:hover {
+    color: var(--tds-color-brand);
+}
+
+.actions img {
+    width: 18px;
+    margin-right: 1rem;
+}
+
+.actions svg {
+    height: 1rem;
+}
+
+.actions svg.fill {
+    fill: var(--tds-color-meteorite);
+}
+
+.actions svg.fill:hover {
+    fill: var(--tds-color-brand);
+}
+
+.actions svg.stroke {
+    stroke: var(--tds-color-meteorite);
+    fill: var(--tds-color-meteorite);
+}
+
+.actions svg.stroke:hover {
+    stroke: var(--tds-color-brand);
+    fill: var(--tds-color-brand);
+}

package/src/modules/tm/pageHeaderA/pageHeaderA.html

@@ -0,0 +1,24 @@
+<template>
+    <div class="root">
+        <div class="heading">
+            <span class="pretitle" if:true={pretitle}>{pretitle}</span>
+            <h1>{title}</h1>
+        </div>
+        <div class="actions">
+            <!--
+            <template if:false={isJpTranslationBlank}>
+                <a 
+                    href={jptranslation}
+                    class="jp-translation"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="日本語版はここからダウンロード"
+                    >
+                <img src="/assets/images/icons/globe.png" />
+                日本語版はここからダウンロード</a>
+            </template>
+            -->
+            <sa-social-share title={title} url={location}></sa-social-share>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,18 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-page-header-a',
+    parameters: {
+        modules: ['/modules/tm-page-header-a.js']
+    }
+};
+
+export const Base = () => html`
+    <tm-page-header-a
+        pretitle="Reference Architecture"
+        title="Content Lifecycle Management and Modeling"
+    >
+        <tm-cta title="Download" variant="brand"></tm-cta>
+        <tm-cta title="Share"></tm-cta>
+    </tm-page-header-a>
+`;

package/src/modules/tm/pageHeaderA/pageHeaderA.ts

@@ -0,0 +1,51 @@
+import { api } from 'lwc';
+import { ChildrenElement } from 'shared/children';
+
+export type CTA = {
+    href: string;
+    target?: string;
+    title: string;
+    variant: string;
+};
+
+export default class extends ChildrenElement<CTA> {
+    @api pretitle: string | null = null;
+    @api title: string = '';
+    @api url: string = '';
+    @api jptranslation: string | null = null;
+
+    childTagName = 'TM-CTA';
+    
+    location: string=window.location.href;
+
+    extractor = (element: Element) => {
+        return {
+            href: element.getAttribute('href')!,
+            target: element.getAttribute('target') || undefined,
+            title: element.getAttribute('title')!,
+            variant: element.getAttribute('variant') || 'neutral'
+        };
+    };
+
+    private get shareTwitter() {
+        return decodeURI(
+            `https://twitter.com/intent/tweet/?text=${this.title}&url=${window.location.href}&via=SalesforceArchs`
+        );
+    }
+
+    private get shareLinkedIn() {
+        return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI(
+            window.location.href
+        )}`;
+    }
+
+    private get shareFacebook() {
+        return `https://www.facebook.com/sharer/sharer.php?u=${encodeURI(
+            window.location.href
+        )}`;
+    }
+
+    get isJpTranslationBlank() {
+        return !this.jptranslation || this.jptranslation.trim() === '';
+    }
+}