@salesforcedevs/arch-components 1.20.17-alpha3 → 1.20.17-alpha5

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

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

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

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

@@ -1,56 +0,0 @@
-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;
-        } 
-            const imgType = this.imgSrc.split('.').pop();
-            const imgName = this.imgSrc.replace(`.${imgType || ''}`, '');
-            const 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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