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

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -0,0 +1,469 @@
+@import "helpers/button";
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/card";
+
+:host {
+    width: 100%;
+
+    --dx-c-featured-content-header-background-color: var(
+        --dx-g-indigo-vibrant-90
+    );
+    --dx-c-tree-graphic-color: var(--dx-g-indigo-vibrant-40);
+    --dx-c-featured-content-header-padding-horizontal: var(
+        --dx-g-page-padding-horizontal
+    );
+    --dx-c-featured-content-main-content-max-width: 840px;
+    --dx-c-bottom-image-width: calc(
+        100vw - var(--dx-g-page-padding-horizontal-lg) * 2
+    );
+    --dx-c-bottom-image-height: calc(var(--dx-c-bottom-image-width) / 2);
+    --dx-c-moon-graphic-color: var(--dx-g-indigo-vibrant-40);
+    --dx-c-featured-content-header-image-container-transform: scale(0.7)
+        translateY(14px);
+}
+
+.container {
+    --image-radius: var(--dx-g-spacing-smd);
+
+    /* content padding of text and image within the graphic */
+    --vertical-padding: var(--dx-g-spacing-6xl);
+
+    /* actual spacing between bottom of graphic and rest of page content */
+    --bottom-spacing: var(--dx-g-spacing-4xl);
+    --item-spacing: var(--dx-g-spacing-xl);
+    --swoop-height: 30%;
+    --swoop-inset: calc(2.5 * var(--vertical-padding));
+    --swoop-z-index: 11;
+
+    position: relative;
+    padding: var(--vertical-padding)
+        var(--dx-c-featured-content-header-padding-horizontal);
+    background-color: var(--dx-c-featured-content-header-background-color);
+}
+
+/* LAYOUTS */
+
+.img-placement_inline {
+    display: grid;
+    grid-template-areas: "label label" "main image";
+    grid-template-columns: 50% auto;
+    grid-gap: 0 80px;
+}
+
+.img-placement_below {
+    --swoop-inset: calc(80px + 38vw);
+
+    margin-bottom: calc(var(--dx-c-bottom-image-height) / 2);
+}
+
+.container:not(.img-placement_below) {
+    overflow: hidden;
+}
+
+/* SWOOP SILHOUETTE */
+
+.swoop-silhouette {
+    position: absolute;
+    bottom: -2px;
+    left: -1px;
+    z-index: calc(var(--swoop-z-index) + 1);
+    height: var(--swoop-height);
+    overflow: hidden;
+    pointer-events: none;
+
+    /* Add 2px to cover subpixel rendering svg issue where a gap shows on the sides */
+    width: calc(100vw + 2px);
+}
+
+/* BOTTOM GRAPHIC */
+
+.bg-image-container {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+}
+
+.bg-trees {
+    top: initial;
+    right: initial;
+    bottom: calc(var(--padding-bottom) * -1 - 10px);
+    left: 0;
+    width: 100%;
+    transform: var(--dx-c-featured-content-header-image-container-transform);
+}
+
+.trees-mobile {
+    display: none;
+}
+
+.bg-trees::before {
+    content: "";
+    background-color: var(--dx-c-tree-graphic-color);
+    height: 2px;
+    width: 10000px;
+    position: absolute;
+    left: 1px;
+    transform: translateX(-100%);
+    top: 1px;
+}
+
+.bg-moon {
+    top: initial;
+    right: initial;
+    bottom: calc(var(--padding-bottom) * -1 - 10px);
+    left: 0;
+    width: 100%;
+    transform: var(--dx-c-featured-content-header-image-container-transform);
+}
+
+.moon-mobile {
+    display: none;
+}
+
+.bg-moon::before {
+    content: "";
+    background-color: var(--dx-c-moon-graphic-color);
+    height: 2px;
+    width: 10000px;
+    position: absolute;
+    left: 1px;
+    transform: translateX(-100%);
+    top: 1px;
+}
+
+.bg-codey {
+    height: 100%;
+    width: 100%;
+    transform-origin: right;
+    transform: translate(110%, -110%);
+    top: unset;
+}
+
+.codey-mobile {
+    display: none;
+}
+
+.custom-bg-codey::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url(/assets/svg/cloud-1.svg), url(/assets/svg/cloud-2.svg),
+        url(/assets/svg/trees.svg);
+    background-position: top center, 102% 10%, 65% 90%;
+    background-repeat: no-repeat, no-repeat, no-repeat;
+}
+@media screen and (max-width: 1174px) {
+    .custom-bg-codey::after {
+        background-image: url(/assets/svg/cloud-2.svg);
+        background-position: calc(100% + 30px) -20%;
+    }
+}
+@media screen and (max-width: 1024px) {
+    .custom-bg-codey::after {
+        background-position: calc(100% + 30px) -40%;
+    }
+
+    .bg-codey {
+        width: 300px;
+        margin-top: -50px;
+    }
+
+    .bg-codey > svg {
+        width: 100%;
+    }
+}
+@media screen and (max-width: 960px) {
+    .bg-codey {
+        display: none;
+    }
+}
+@media screen and (max-width: 768px) {
+    .custom-bg-codey::after {
+        background-position: calc(100% + 80px) -100px;
+    }
+}
+
+.custom-bg-blog::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url(/assets/svg/fch-blog-cloud-1.png),
+        url(/assets/svg/fch-blog-cloud-2.png),
+        url(/assets/svg/fch-blog-planet.png);
+    background-position: calc(100% + -60px) -80px, 67% calc(100% + -100px),
+        54% 70px;
+    background-repeat: no-repeat, no-repeat, no-repeat;
+}
+@media screen and (max-width: 1024px) {
+    .custom-bg-blog::after {
+        background-image: url(/assets/svg/fch-blog-cloud-1.png);
+        background-position: calc(100% + 78px) -60px;
+    }
+
+    .custom-bg-blog::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-image: url(/assets/svg/fch-blog-cloud-2.png);
+        background-repeat: no-repeat;
+        background-position: bottom left;
+        transform: rotate(180deg);
+        left: -96%;
+        bottom: -90%;
+    }
+}
+@media screen and (max-width: 600px) {
+    .custom-bg-blog::after {
+        background-size: 225px;
+        background-position: calc(100% + 58px) -60px;
+    }
+}
+
+/* Z INDEX STUFF */
+
+.label,
+.main-content,
+.image-container {
+    position: relative;
+    z-index: var(--swoop-z-index);
+}
+
+/* IMAGE */
+
+.image-container {
+    display: block;
+    grid-area: image;
+    height: 0;
+    padding-top: 50%;
+    z-index: calc(var(--swoop-z-index) + 2);
+}
+
+img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(24, 24, 24, 0.1);
+    border-radius: var(--image-radius);
+    object-fit: cover;
+}
+
+a.image-container > img {
+    transition: var(--dx-g-transition-filter-2x);
+}
+
+.img-placement_below .image-container {
+    margin-top: var(--item-spacing);
+    margin-bottom: calc(var(--dx-c-bottom-image-height) * -1);
+}
+
+/* MAIN CONTENT AREA */
+
+.main-content {
+    grid-area: main;
+    max-width: var(--dx-c-featured-content-main-content-max-width);
+}
+
+.main-content > * {
+    z-index: 10;
+}
+
+/* SLOT */
+
+.slot-container {
+    display: none;
+    margin-top: var(--dx-g-spacing-xl);
+}
+
+.has-slotted .slot-container {
+    display: block;
+}
+
+/* TEXT */
+
+.title-link {
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+.label {
+    grid-area: label;
+    color: var(--dx-g-indigo-vibrant-40);
+    padding-bottom: var(--dx-g-spacing-lg);
+}
+
+.dx-text-heading-2 {
+    padding-bottom: var(--dx-g-spacing-sm);
+    display: block;
+}
+
+/* AUTHORS */
+
+.authors {
+    padding-top: var(--dx-g-spacing-sm);
+    padding-bottom: var(--item-spacing);
+}
+
+dx-image-and-label {
+    --dx-c-image-and-label-text-color: var(--dx-g-text-heading-color);
+
+    display: inline-block;
+    padding-right: var(--dx-g-spacing-lg);
+}
+
+/* DARK VARIANT */
+.variant_dark {
+    background: linear-gradient(
+        -180deg,
+        rgb(40, 23, 153) 0%,
+        rgb(46, 43, 182) 100%
+    );
+}
+
+.variant_dark dx-image-and-label {
+    --dx-c-image-and-label-text-color: white;
+}
+
+.variant_dark .label {
+    color: rgb(190, 199, 246);
+}
+
+.variant_dark .title,
+.variant_dark .body {
+    color: white;
+}
+
+/* SHARED LINK HOVERING */
+
+.container.link-hovered a.image-container > img {
+    filter: var(--dx-g-button-image-filter-hover);
+}
+
+.container.link-hovered .title-link {
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+.container.link-hovered.variant_dark .title-link {
+    color: var(--dx-g-indigo-vibrant-90);
+}
+
+@media screen and (min-width: 1920px) {
+    .swoop-container,
+    .swoop-silhouette {
+        left: initial;
+        right: 0;
+        transform: initial;
+        width: 1920px;
+    }
+}
+
+@media screen and (max-width: 1401px) {
+    .img-placement_below .image-container {
+        padding-top: calc(
+            50% + var(--dx-c-featured-content-header-padding-horizontal) / 2
+        );
+        margin-top: var(--item-spacing);
+        margin-right: calc(
+            var(--dx-c-featured-content-header-padding-horizontal) * -1
+        );
+    }
+
+    .img-placement_below img {
+        border-radius: var(--image-radius) 0 0 var(--image-radius);
+    }
+}
+
+@media screen and (min-width: 1400px) {
+    .img-placement_below {
+        --swoop-inset: 680px;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .container {
+        --swoop-height: 14vw;
+        --vertical-padding: 80px;
+        --bottom-spacing: var(--dx-g-spacing-2xl);
+        --item-spacing: var(--dx-g-spacing-md);
+    }
+
+    .container:not(.img-placement_below) {
+        --swoop-inset: 64px;
+    }
+
+    .img-placement_inline {
+        display: grid;
+        grid-template-areas: "label" "image" "main";
+        grid-template-columns: 100%;
+        grid-gap: 0;
+    }
+
+    .img-placement_inline .image-container {
+        margin-bottom: 20px;
+    }
+
+    .img-placement_below .image-container {
+        margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.72);
+    }
+
+    .dx-text-heading-4 {
+        font-size: var(--dx-g-text-xl);
+    }
+
+    .dx-text-heading-2 {
+        font-size: var(--dx-g-text-2xl);
+        line-height: var(--dx-g-spacing-2xl);
+    }
+
+    .dx-text-body-1 {
+        font-size: var(--dx-g-text-base);
+        letter-spacing: 0;
+        line-height: var(--dx-g-spacing-lg);
+    }
+
+    .authors {
+        padding-top: 0;
+    }
+
+    dx-image-and-label {
+        display: block;
+        padding-bottom: var(--dx-g-spacing-sm);
+    }
+
+    .trees {
+        display: none;
+    }
+
+    .trees-mobile {
+        display: block;
+    }
+
+    .moon {
+        display: none;
+    }
+
+    .moon-mobile {
+        display: block;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .img-placement_below .image-container {
+        margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.8);
+    }
+}
+
+@media screen and (max-width: 420px) {
+    .img-placement_below .image-container {
+        margin-bottom: calc(var(--dx-c-bottom-image-height) * -1);
+    }
+}

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -0,0 +1,96 @@
+<template>
+    <div class={classname} part="container">
+        <div
+            if:true={label}
+            role={labelRole}
+            aria-level={labelAriaLevel}
+            class="label dx-text-heading-4"
+        >
+            {label}
+        </div>
+        <div class="main-content">
+            <div
+                role="heading"
+                aria-level={titleAriaLevel}
+                class="title dx-text-heading-2"
+            >
+                <a
+                    class="title-link"
+                    if:true={href}
+                    href={href}
+                    target={target}
+                    onmouseenter={setLinkHovered}
+                    onmouseleave={setLinkInactive}
+                >
+                    {title}
+                </a>
+                <template if:false={href}>{title}</template>
+            </div>
+            <div class="authors" if:true={authors}>
+                <template for:each={authors} for:item="author">
+                    <dx-image-and-label
+                        key={author.key}
+                        img-src={author.imgSrc}
+                        img-size={author.imgSize}
+                        label={author.name}
+                        href={author.href}
+                    ></dx-image-and-label>
+                </template>
+            </div>
+            <span class="body dx-text-body-1">{body}</span>
+            <div class="slot-container">
+                <slot onslotchange={onSlotChange}></slot>
+            </div>
+            <div
+                class={backgroundImageClass}
+                if:true={hasBackgroundImage}
+                lwc:dom="manual"
+            ></div>
+        </div>
+        <div if:true={hasPlainImage} class="image-container">
+            <img src={imgSrc} alt={imgAlt} />
+        </div>
+        <a
+            if:true={hasLinkedImage}
+            href={href}
+            target={target}
+            class="image-container"
+            onmouseenter={setLinkHovered}
+            onmouseleave={setLinkInactive}
+        >
+            <img src={imgSrc} alt={imgAlt} />
+        </a>
+        <svg
+            class="swoop-silhouette"
+            width="1920px"
+            height="331px"
+            viewBox="0 0 1920 331"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            preserveAspectRatio="none"
+        >
+            <defs>
+                <path
+                    d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
+                    id="path-1"
+                ></path>
+            </defs>
+            <g
+                id="Documentation-landing-page"
+                stroke="none"
+                stroke-width="1"
+                fill="none"
+                fill-rule="evenodd"
+            >
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use
+                    id="Combined-Shape"
+                    fill="#FFFFFF"
+                    xlink:href="#path-1"
+                ></use>
+            </g>
+        </svg>
+    </div>
+</template>

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

@@ -0,0 +1,153 @@
+import { html } from "lit-html";
+import mockProps from "./__tests__/mockProps";
+
+const BACKGROUND_IMAGE_OPTIONS = ["trees", "codey", "blog"];
+
+export default {
+    title: "dx/dx-featured-content-header ",
+    component: "dx-featured-content-header "
+};
+
+const createStylesLightVariant = () => html`
+    <style>
+        dx-featured-content-header {
+            --dx-c-featured-content-header-background-color: rgb(58, 73, 218);
+        }
+    </style>
+`;
+
+const createBaseStyles = () => html`
+    <style>
+        body {
+            padding: 0 !important;
+        }
+        dx-podcast-player {
+            display: block;
+            width: 300px;
+        }
+    </style>
+`;
+
+const authors = JSON.stringify(mockProps.authors);
+
+export const PodcastEpisode = () => html` ${createBaseStyles()}
+    <dx-featured-content-header
+        label="Developers Podcast"
+        title="${mockProps.title}"
+        href="${mockProps.href}"
+        target="${mockProps.target}"
+        body="${mockProps.body}"
+    >
+        <dx-podcast-player
+            src="https://www3.assets.heroku.com/podcasts/codeish/Codeish_Episode_108_Wicked_CoolKit.mp3"
+        >
+        </dx-podcast-player>
+    </dx-featured-content-header>`;
+
+export const BlogPost = () => html` ${createBaseStyles()}
+    <dx-featured-content-header
+        label="${mockProps.label}"
+        title="${mockProps.title}"
+        href="${mockProps.href}"
+        target="${mockProps.target}"
+        body="${mockProps.body}"
+        authors="${authors}"
+        img-src="https://i.imgur.com/FUsyxR5.jpg"
+        img-alt="test alt"
+        img-placement="below"
+    >
+        <dx-podcast-player
+            src="https://www3.assets.heroku.com/podcasts/codeish/Codeish_Episode_108_Wicked_CoolKit.mp3"
+        >
+        </dx-podcast-player>
+    </dx-featured-content-header>`;
+
+export const LightVariation = () => html` ${createBaseStyles()}
+    ${createStylesLightVariant()}
+    <dx-featured-content-header
+        label="${mockProps.label}"
+        title="${mockProps.title}"
+        href="${mockProps.href}"
+        target="${mockProps.target}"
+        body="${mockProps.body}"
+        authors="${authors}"
+        img-src="https://i.imgur.com/FUsyxR5.jpg"
+        img-alt="test alt"
+        dark="true"
+    >
+    </dx-featured-content-header>`;
+
+export const LightVariationNoLink = () => html` ${createBaseStyles()}
+    ${createStylesLightVariant()}
+    <dx-featured-content-header
+        label="${mockProps.label}"
+        title="${mockProps.title}"
+        body="${mockProps.body}"
+        authors="${authors}"
+        img-src="https://i.imgur.com/FUsyxR5.jpg"
+        img-alt="test alt"
+        dark="true"
+    >
+    </dx-featured-content-header>`;
+
+export const MainContentWidth = () => html` ${createBaseStyles()}
+    ${createStylesLightVariant()}
+    <style>
+        dx-featured-content-header {
+            --dx-c-featured-content-main-content-max-width: 600px;
+        }
+    </style>
+    <dx-featured-content-header
+        title="${mockProps.title}"
+        body="${mockProps.body}"
+        authors="${authors}"
+        dark="true"
+    >
+    </dx-featured-content-header>`;
+
+export const BackgroundImage = ({
+    backgroundImage
+}: {
+    backgroundImage: string;
+}) => html` ${createBaseStyles()} ${createStylesLightVariant()}
+    <style>
+        dx-featured-content-header {
+            --dx-c-featured-content-main-content-max-width: 600px;
+        }
+    </style>
+    <dx-featured-content-header
+        title="${mockProps.title}"
+        body="${mockProps.body}"
+        authors="${authors}"
+        dark="true"
+        background-img="${backgroundImage}"
+    >
+    </dx-featured-content-header>`;
+
+BackgroundImage.args = {
+    backgroundImage: "codey"
+};
+
+BackgroundImage.argTypes = {
+    backgroundImage: {
+        control: {
+            type: "select",
+            options: BACKGROUND_IMAGE_OPTIONS
+        }
+    }
+};
+
+export const CodeSamples = () => html` 
+
+<style>
+    dx-featured-content-header {
+        --dx-c-featured-content-main-content-max-width: 600px;
+    }
+</style>
+<dx-featured-content-header
+    class="documentation_header"
+    title="Code Samples"
+    body="all the description here"
+    dark="true"
+    background-img="moon"
+></dx-featured-content-header>`;