@salesforcedevs/dx-components 0.0.0-alpha.0

package/src/modules/dx/feature/feature.css

@@ -0,0 +1,135 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgba(0, 20, 45, 0.4);
+    --dx-c-feature-description-left-img-src: url(/assets/svg/feature-backdrop1.svg);
+    --dx-c-feature-description-max-width: 31.75rem;
+    --dx-c-feature-img-margin-left: auto;
+    --dx-c-feature-img-container-padding: 4rem;
+    --dx-c-feature-image-max-width: 100%;
+    --dx-c-feature-description-font-size: var(--dx-g-text-base);
+}
+
+.label {
+    display: inline-block;
+    padding-bottom: 15px;
+    font-size: 16px;
+    font-weight: bold;
+    letter-spacing: normal;
+    line-height: 20px;
+}
+
+.dx-text-body-2 {
+    font-size: var(--dx-c-feature-description-font-size);
+}
+
+h3 {
+    padding-bottom: var(--dx-g-spacing-lg);
+}
+
+section {
+    display: flex;
+    align-items: center;
+}
+
+.description,
+.image {
+    width: 45%;
+}
+
+.image {
+    background-size: contain;
+    background-repeat: no-repeat;
+    padding: var(--dx-c-feature-img-container-padding);
+}
+
+.image img {
+    box-shadow: var(--dx-c-feature-img-box-shadow);
+    max-width: var(--dx-c-feature-image-max-width);
+}
+
+.body {
+    max-width: var(--dx-c-feature-description-max-width);
+}
+
+.cta-button {
+    display: block;
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.description-left {
+    flex-direction: row;
+}
+
+.description-right {
+    flex-direction: row-reverse;
+}
+
+.description-left .image {
+    margin-left: var(--dx-c-feature-img-margin-left);
+    background-image: var(--dx-c-feature-description-left-img-src);
+}
+
+.description-right .image {
+    margin-right: auto;
+    background-image: url(/assets/svg/feature-backdrop2.svg);
+}
+
+.image-display-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: -40px;
+}
+
+.image-display-container .image-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.image-display-container .image-container > img {
+    width: 71.75%;
+    margin-top: -7.2%;
+    margin-left: 6%;
+    height: 55%;
+    border-radius: 6px;
+}
+
+.image-display-container .image-display {
+    width: 100%;
+}
+
+/* Mobile responsiveness */
+
+@media screen and (max-width: 768px) {
+    h3 {
+        padding-bottom: var(--dx-g-spacing-md);
+    }
+
+    .body {
+        max-width: unset;
+    }
+
+    .description,
+    .image {
+        width: 100%;
+    }
+
+    .description-right,
+    .description-left {
+        flex-direction: column-reverse;
+    }
+
+    .description-right .image,
+    .description-left .image {
+        margin: auto;
+        background-image: none;
+        padding: 3rem;
+    }
+}

package/src/modules/dx/feature/feature.html

@@ -0,0 +1,33 @@
+<template>
+    <section class={sectionClass}>
+        <div class="description">
+            <h2 if:true={hasLabel} class="dx-text-heading-7 label">{label}</h2>
+            <h3 class="dx-text-heading-3">{title}</h3>
+            <div class="body dx-text-body-2">
+                <slot></slot>
+            </div>
+            <dx-button
+                class="cta-button"
+                size="large"
+                target={target}
+                icon-symbol={iconSymbol}
+                href={buttonHref}
+            >
+                {buttonLabel}
+            </dx-button>
+        </div>
+        <div if:true={isDisplay} class="image-display-container">
+            <img
+                class="image-display"
+                src="/assets/svg/featured-demo-art-blank.svg"
+                alt={title}
+            />
+            <div class="image-container">
+                <img src={imageSrc} alt={title} />
+            </div>
+        </div>
+        <div if:false={isDisplay} class="image">
+            <img src={imageSrc} alt={title} />
+        </div>
+    </section>
+</template>

package/src/modules/dx/feature/feature.ts

@@ -0,0 +1,34 @@
+import { LightningElement, api } from "lwc";
+
+export default class Feature extends LightningElement {
+    @api label!: string;
+    @api title!: string;
+    @api imageSrc!: string;
+    @api buttonHref: string | null = null;
+    @api buttonLabel: string | null = null;
+    @api descriptionPosition?: "right" | "left" = "left";
+    @api isExternalLink: boolean = false;
+    @api variant?: "display";
+
+    private get isDisplay(): boolean {
+        return this.variant === "display";
+    }
+
+    private get sectionClass(): string {
+        return this.descriptionPosition === "left"
+            ? "description-left"
+            : "description-right";
+    }
+
+    get hasLabel(): boolean {
+        return !!this.label;
+    }
+
+    get target(): string {
+        return this.isExternalLink ? "_blank" : "_self";
+    }
+
+    get iconSymbol(): string {
+        return this.isExternalLink ? "new_window" : "";
+    }
+}

package/src/modules/dx/featureGrid/featureGrid.html

@@ -0,0 +1,3 @@
+<template>
+    <slot onslotchange={onSlotChange}></slot>
+</template>

package/src/modules/dx/featureGrid/featureGrid.ts

@@ -0,0 +1,15 @@
+import { LightningElement } from "lwc";
+import { LightningSlotElement } from "typings/custom";
+
+export default class FeatureGrid extends LightningElement {
+    private onSlotChange(e: LightningSlotElement) {
+        // @ts-ignore
+        const slot = e.target;
+        slot.assignedElements().forEach(
+            (featureElement: any, index: number) => {
+                featureElement.descriptionPosition =
+                    index % 2 === 0 ? "left" : "right";
+            }
+        );
+    }
+}

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);
+    }
+}