@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

package/src/modules/dx/podcastHost/podcastHost.css

@@ -0,0 +1,62 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-host-img-width: 48px;
+    --dx-c-host-img-margin-right: 16px;
+}
+
+.container {
+    background: white;
+    box-shadow: var(--dx-g-box-shadow-sm);
+    border-radius: 16px;
+    padding: 36px;
+    overflow: hidden;
+}
+
+.host-presentation,
+.host-img {
+    display: flex;
+}
+
+.host-img {
+    margin-right: var(--dx-c-host-img-margin-right);
+    align-items: center;
+}
+
+.host-img > img {
+    border-radius: 99999px;
+    width: var(--dx-c-host-img-width);
+}
+
+.host-bio > p {
+    margin: 16px 0;
+}
+
+.dx-text-label-2 {
+    color: var(--dx-g-gray-30);
+}
+
+@media (min-width: 640px) {
+    .host {
+        position: relative;
+    }
+
+    .host dx-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+
+    .host-bio {
+        margin-left: calc(
+            var(--dx-c-host-img-width) + var(--dx-c-host-img-margin-right)
+        );
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 20px;
+    }
+}

package/src/modules/dx/podcastHost/podcastHost.html

@@ -0,0 +1,28 @@
+<template>
+    <div class="container">
+        <div class="host">
+            <div class="host-presentation">
+                <div class="host-img">
+                    <img src={imgSrc} alt={fullName} />
+                </div>
+                <h2>
+                    <span class="dx-text-label-2">Hosted by</span>
+                    <br />
+                    <span class="dx-text-heading-4">{fullName}</span>
+                </h2>
+            </div>
+            <div class="host-bio">
+                <p>{bio}</p>
+            </div>
+            <dx-button
+                href={twitterHref}
+                target="_blank"
+                variant="inline"
+                icon-symbol="twitter"
+                icon-sprite="brand"
+            >
+                Follow {firstName} on Twitter
+            </dx-button>
+        </div>
+    </div>
+</template>

package/src/modules/dx/podcastHost/podcastHost.stories.ts

@@ -0,0 +1,17 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-podcast-host",
+    component: "dx-podcast-host"
+};
+
+export const Base = () => html`
+    <dx-podcast-host
+        first-name="Maynard"
+        last-name="James Keenan"
+        img-src="https://placekitten.com/96/96"
+        twitter-href="https://twitter.com/puscifer"
+        bio="Maynard James Keenan (born James Herbert Keenan; April 17, 1964) is an American singer, songwriter, musician, record producer, actor, martial artist, and winemaker. He is best known as the lead singer and primary lyricist of the rock band Tool, with whom he has released five studio albums, A Perfect Circle, with whom he has released four studio albums, and Puscifer, with whom he has released four studio albums."
+    >
+    </dx-podcast-host>
+`;

package/src/modules/dx/podcastHost/podcastHost.ts

@@ -0,0 +1,13 @@
+import { LightningElement, api } from "lwc";
+
+export default class PodcastHost extends LightningElement {
+    @api firstName: string = "";
+    @api lastName: string = "";
+    @api imgSrc: string = "";
+    @api twitterHref: string = "";
+    @api bio: string = "";
+
+    get fullName() {
+        return `${this.firstName} ${this.lastName}`;
+    }
+}

package/src/modules/dx/podcastPlayer/__tests__/podcastPlayer.test.ts

@@ -0,0 +1,20 @@
+import PodcastPlayer from "dx/podcastPlayer";
+import { createRenderComponent } from "utils-internal/tests";
+
+const TAG = "dx-podcast-player";
+const render = createRenderComponent(TAG, PodcastPlayer);
+
+const src =
+    "https://www3.assets.heroku.com/podcasts/codeish/Codeish_Episode_108_Wicked_CoolKit.mp3";
+
+describe(TAG, () => {
+    it("renders <audio> with provided src", () => {
+        const component = render({ src });
+
+        const player = component.shadowRoot.querySelector("audio");
+        expect(player).not.toBe(null);
+        expect(player.getAttribute("src")).toEqual(src);
+
+        return expect(component).toBeAccessible();
+    });
+});

package/src/modules/dx/podcastPlayer/podcastPlayer.css

@@ -0,0 +1,10 @@
+audio {
+    display: block;
+    width: 100%;
+    max-height: 40px;
+    border-radius: 3px;
+}
+
+audio:focus {
+    outline: none;
+}

package/src/modules/dx/podcastPlayer/podcastPlayer.html

@@ -0,0 +1,3 @@
+<template>
+    <audio controls src={src}></audio>
+</template>

package/src/modules/dx/podcastPlayer/podcastPlayer.stories.ts

@@ -0,0 +1,13 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-podcast-player",
+    component: "dx-podcast-player"
+};
+
+export const Base = () => html`
+    <dx-podcast-player
+        src="https://www3.assets.heroku.com/podcasts/codeish/Codeish_Episode_108_Wicked_CoolKit.mp3"
+    >
+    </dx-podcast-player>
+`;

package/src/modules/dx/podcastPlayer/podcastPlayer.ts

@@ -0,0 +1,5 @@
+import { LightningElement, api } from "lwc";
+
+export default class PodcastPlayer extends LightningElement {
+    @api src: string = "";
+}

package/src/modules/dx/podcastSubscription/__tests__/podcastSubscription.test.ts

@@ -0,0 +1,16 @@
+import podcastSubscription from "dx/podcastSubscription";
+import { createRenderComponent } from "utils-internal/tests";
+
+const TAG = "dx-podcast-subscription";
+const render = createRenderComponent(TAG, podcastSubscription);
+
+describe(TAG, () => {
+    it("renders the badges linking to main podcast platforms", () => {
+        const element = render();
+
+        const badges = element.shadowRoot.querySelectorAll(".badges a");
+        expect(badges).not.toBe(undefined);
+        expect(badges.length).toBeGreaterThan(0);
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/podcastSubscription/podcastSubscription.css

@@ -0,0 +1,91 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.container {
+    background-repeat: no-repeat;
+    background-position: center;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        background-image: url("/assets/svg/podcast-subscription-clouds-small.svg");
+        background-size: auto 200px;
+    }
+
+    .dx-text-heading-4 {
+        max-width: 28ex;
+        font-size: var(--dx-g-text-lg);
+    }
+
+    .badges {
+        margin: 8px auto 6px auto;
+        text-align: center;
+    }
+
+    .badges a {
+        display: inline-block;
+        margin: 4px auto;
+    }
+
+    .badges img {
+        width: 164px;
+    }
+
+    .secondary-links {
+        display: none;
+    }
+
+    .or-wherever {
+        margin-top: 2px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .container {
+        background-image: url("/assets/svg/podcast-subscription-clouds.svg");
+        min-height: 230px;
+    }
+
+    .badges {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .badges a {
+        display: inline-block;
+        margin: 22px 13px 8px 13px;
+    }
+
+    .badges img {
+        height: 40px;
+    }
+
+    .or-wherever {
+        display: none;
+    }
+
+    .secondary-links {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .secondary-links li {
+        margin: 9px 6px;
+    }
+
+    .secondary-links a {
+        color: var(--dx-g-blue-vibrant-50);
+        text-decoration: none;
+    }
+
+    .secondary-links a:hover {
+        text-decoration: underline;
+    }
+}

package/src/modules/dx/podcastSubscription/podcastSubscription.html

@@ -0,0 +1,24 @@
+<template>
+    <div class="container">
+        <h2 class="dx-text-heading-4">
+            Tune in to the Salesforce Developers Podcast
+        </h2>
+        <ul class="badges">
+            <template for:each={badgeLinks} for:item="badgeLink">
+                <li key={badgeLink.href}>
+                    <a href={badgeLink.href}>
+                        <img src={badgeLink.imgSrc} alt={badgeLink.imgAlt} />
+                    </a>
+                </li>
+            </template>
+        </ul>
+        <p class="or-wherever">Or wherever you listen to podcasts!</p>
+        <ul class="secondary-links">
+            <template for:each={secondaryLinks} for:item="secondaryLink">
+                <li key={secondaryLink.href}>
+                    <a href={secondaryLink.href}>{secondaryLink.text}</a>
+                </li>
+            </template>
+        </ul>
+    </div>
+</template>

package/src/modules/dx/podcastSubscription/podcastSubscription.stories.ts

@@ -0,0 +1,23 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-podcast-subscription",
+    component: "dx-podcast-subscription"
+};
+
+const createStyles = () => html`
+    <style>
+        h2 {
+            font-weight: bold;
+            font-size: 24px;
+            margin: 10px 0 30px 0;
+        }
+    </style>
+`;
+
+export const Base = () => html`
+    ${createStyles()}
+    <h2>Podcast Subscription</h2>
+
+    <dx-podcast-subscription>eo!</dx-podcast-subscription>
+`;

package/src/modules/dx/podcastSubscription/podcastSubscription.ts

@@ -0,0 +1,58 @@
+import { LightningElement } from "lwc";
+
+export default class PodcastSubscription extends LightningElement {
+    badgeLinks = [
+        {
+            href:
+                "https://podcasts.apple.com/us/podcast/salesforce-developer-podcast/id1482325260",
+            imgAlt: "Listen on Apple Podcasts",
+            imgSrc: "/assets/svg/podcasts-subscription-apple.svg"
+        },
+        {
+            href:
+                "https://www.google.com/podcasts?feed=aHR0cHM6Ly9zYWxlc2ZvcmNlZGV2cG9kY2FzdC5saWJzeW4uY29tL3Jzcw%3D%3D",
+            imgAlt: "Listen on Google Podcasts",
+            imgSrc: "/assets/svg/podcasts-subscription-google.svg"
+        },
+        {
+            imgSrc: "/assets/svg/podcasts-subscription-spotify.svg",
+            imgAlt: "Listen on Spotify",
+            href: "https://open.spotify.com/show/75y378cB3FM6RQ8MGUDJ5M"
+        }
+    ];
+
+    secondaryLinks = [
+        {
+            href: "https://app.stitcher.com/browse/feed/470480/details",
+            text: "Stitcher"
+        },
+        {
+            href:
+                "https://www.amazon.com/Emerald-City-Productions-Salesforce-Developer/dp/B082PPXMLN/",
+            text: "Alexa"
+        },
+        {
+            href:
+                "https://www.pandora.com/podcast/salesforce-developer-podcast/PC:34746",
+            text: "Pandora"
+        },
+        {
+            href:
+                "https://www.iheart.com/podcast/263-salesforce-developer-podca-56252827",
+            text: "iHeartRadio"
+        },
+        {
+            href:
+                "https://tunein.com/podcasts/Technology-Podcasts/Salesforce-Developer-Podcast-p1255006/",
+            text: "Tune-in"
+        },
+        {
+            href: "https://www.breaker.audio/salesforce-developer-podcast",
+            text: "Breaker"
+        },
+        {
+            href: "https://dev.to/salesforce_developers_podcast",
+            text: "dev.to"
+        }
+    ];
+}

package/src/modules/dx/popover/__tests__/mockProps.ts

@@ -0,0 +1,8 @@
+export default {
+    ariaLabel: "Label Test",
+    offset: "medium",
+    pagePadding: 20,
+    placement: "top-start",
+    small: true,
+    width: "300px"
+};