@salesforcedevs/dx-components 0.0.0

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

@@ -0,0 +1,468 @@
+@import "dxHelpers/button";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/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,
+.featured-content-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 */
+
+.featured-content-main-content {
+    grid-area: main;
+    max-width: var(--dx-c-featured-content-main-content-max-width);
+}
+
+.featured-content-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 {
+        --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,109 @@
+<template>
+    <div class={classname} part="container">
+        <template if:true={labelAsPrimaryHeading}>
+            <h1 if:true={label} class="label dx-text-heading-4">{label}</h1>
+        </template>
+        <template if:false={labelAsPrimaryHeading}>
+            <p if:true={label} class="label dx-text-heading-4">{label}</p>
+        </template>
+        <div class="featured-content-main-content">
+            <template if:false={labelAsPrimaryHeading}>
+                <h1 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>
+                </h1>
+            </template>
+            <template if:true={labelAsPrimaryHeading}>
+                <h2 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>
+                </h2>
+            </template>
+            <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>
+        <template if:false={noSwoop}>
+            <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>
+        </template>
+    </div>
+</template>

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

@@ -0,0 +1,102 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { LightningSlotElement } from "typings/custom";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toJson } from "dxUtils/normalizers";
+import { ImageAndLabel } from "../imageAndLabel";
+import svgs from "./svgs";
+
+export default class FeaturedContentHeader extends LightningElement {
+    @api label?: string | null = null;
+    @api labelAsPrimaryHeading: boolean = false;
+    @api body!: string;
+    @api imgSrc?: string;
+    @api imgAlt?: string = "Featured content image";
+    @api imgPlacement?: "inline" | "below" = "inline";
+    @api dark: boolean = false;
+    @api href?: string;
+    @api target?: string | null = null;
+    @api title!: string;
+    @api backgroundImg?: "trees" | "codey" | "blog" | "moon" | null = null;
+    @api noSwoop: boolean = false;
+
+    private _authors?: Array<ImageAndLabel>;
+    private isSlotEmpty: boolean = true;
+    private isLinkHovered: boolean = false;
+
+    // ! Move this map away from the component and probably the filter too.
+    @api
+    get authors() {
+        if (this._authors && this._authors.length) {
+            return this._authors!.map((author, index) => ({
+                ...author,
+                imgSrc: author.avatar_urls?.["24"] || author.imgSrc,
+                key: index
+            }));
+        }
+        return undefined;
+    }
+
+    set authors(value: any) {
+        this._authors = (toJson(value) as Array<any>)?.filter(
+            (author) => author.name
+        );
+    }
+
+    private get classname() {
+        return cx(
+            "container",
+            this.imgSrc && `img-placement_${this.imgPlacement}`,
+            this.dark && "variant_dark",
+            this.isLinkHovered && "link-hovered",
+            !this.isSlotEmpty && "has-slotted",
+            this.backgroundImg && `custom-bg-${this.backgroundImg}`
+        );
+    }
+
+    private get hasPlainImage() {
+        return this.imgSrc && !this.href;
+    }
+
+    private get hasLinkedImage() {
+        return this.imgSrc && this.href;
+    }
+
+    private get hasBackgroundImage() {
+        return this.backgroundImg !== null;
+    }
+
+    private get backgroundImageClass() {
+        return cx(
+            "bg-image-container",
+            this.backgroundImg && `bg-${this.backgroundImg}`
+        );
+    }
+
+    private setLinkHovered() {
+        this.isLinkHovered = true;
+    }
+
+    private setLinkInactive() {
+        this.isLinkHovered = false;
+    }
+
+    private onSlotChange(e: LightningSlotElement): void {
+        this.isSlotEmpty = isSlotEmpty(e);
+    }
+
+    renderedCallback(): void {
+        // Setting the svgs with innerHTML prevents their IDs from being rewritten
+        // which is necessary to preserve the svg masking and other effects
+        if (this.backgroundImg && svgs[this.backgroundImg]) {
+            const bgSvg = this.template.querySelector(".bg-image-container");
+            if (bgSvg) {
+                // eslint-disable-next-line @lwc/lwc/no-inner-html
+                bgSvg.innerHTML = `
+                    ${svgs[this.backgroundImg].desktop}
+                    ${svgs[this.backgroundImg].mobile}
+                `;
+            }
+        }
+    }
+}