@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

package/src/modules/dx/banner/banner.css

@@ -1,472 +1,46 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
-:host {
-    font-family: var(--dx-g-font-display);
-}
+.container {
+    --primary-color: var(--dx-g-cloud-blue-vibrant-50);
+    --secondary-color: var(--dx-g-cloud-blue-vibrant-40);
 
-.banner {
-    padding: var(--dx-g-spacing-4xl);
+    width: 100%;
     display: flex;
-    overflow: hidden;
-    position: relative;
-}
-
-.banner:not(.banner-inset) {
-    padding: var(--dx-g-spacing-4xl) var(--dx-g-page-padding-horizontal);
-}
-
-@media screen and (max-width: 768px) {
-    .banner {
-        padding: var(--dx-g-spacing-2xl);
-        flex-direction: column-reverse;
-    }
-}
-
-.banner-image-position-left {
-    flex-direction: row-reverse;
-}
-
-.banner.banner-size-small {
-    padding: var(--dx-g-spacing-2xl);
-}
-
-.banner-inset {
-    margin: var(--dx-g-spacing-4xl);
-    border-radius: var(--dx-g-spacing-sm);
-}
-
-.banner-no-image {
-    text-align: center;
-    display: block;
-}
-
-/*
- * Title
- */
-.title {
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-5xl);
-    line-height: var(--dx-g-text-5xl);
-    font-weight: var(--dx-g-font-demi);
-    margin-bottom: var(--dx-g-spacing-md);
-}
-
-/*
- * Backgrounds
- */
-
-/*
- * Teal
- */
-.banner-bg_teal {
-    background: linear-gradient(
-        45deg,
-        var(--dx-g-teal-vibrant-30) 0%,
-        var(--dx-g-teal-vibrant-50) 100%
-    );
-}
-
-.banner-swoop-teal .bg-swoop-container path[fill] {
-    fill: var(--dx-g-teal-vibrant-50);
-}
-
-/*
- * Subtitle
- */
-.subtitle {
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-xl);
-    line-height: var(--dx-g-text-xl);
-    font-weight: var(--dx-g-font-demi);
-}
-
-.banner-bg_teal .title,
-.banner-bg_teal .subtitle {
-    /* TODO: which variable matches this color? */
-    color: #bdd6ff;
-}
-
-.banner-bg_teal .svg-color-container line[stroke],
-.banner-bg_teal .svg-color-container polyline[stroke],
-.banner-bg_teal .svg-color-container path[stroke],
-.banner-bg_teal .svg-color-container g[stroke] {
-    stroke: #bdd6ff;
-}
-
-.banner-bg_teal .svg-color-container circle[fill],
-.banner-bg_teal .svg-color-container path[fill] {
-    fill: #bdd6ff;
-}
-
-/*
- * Indigo
- */
-.banner-bg_dark-indigo {
-    background: linear-gradient(
-        45deg,
-        var(--dx-g-indigo-vibrant-20) 0%,
-        var(--dx-g-indigo-vibrant-30) 100%
-    );
-}
-
-.banner-swoop-dark-indigo .bg-swoop-container path[fill] {
-    fill: var(--dx-g-indigo-vibrant-30);
-}
-
-.banner-bg_dark-indigo .title,
-.banner-bg_dark-indigo .subtitle {
-    color: #bdd6ff;
-}
-
-.banner-bg_dark-indigo .svg-color-container line[stroke],
-.banner-bg_dark-indigo .svg-color-container polyline[stroke],
-.banner-bg_dark-indigo .svg-color-container path[stroke],
-.banner-bg_dark-indigo .svg-color-container g[stroke] {
-    stroke: #bdd6ff;
-}
-
-.banner-bg_dark-indigo .svg-color-container circle[fill],
-.banner-bg_dark-indigo .svg-color-container path[fill] {
-    fill: #bdd6ff;
-}
-
-/*
- * Transparent
- */
-.banner-swoop-transparent .bg-swoop-container path[fill] {
-    fill: transparent;
-}
-
-.banner-bg_transparent .title,
-.banner-bg_transparent .subtitle {
-    color: var(--dx-g-blue-vibrant-20);
-}
-
-.banner-bg_transparent .svg-color-container line[stroke],
-.banner-bg_transparent .svg-color-container polyline[stroke],
-.banner-bg_transparent .svg-color-container path[stroke],
-.banner-bg_transparent .svg-color-container g[stroke] {
-    stroke: var(--dx-g-gray-10);
-}
-
-.banner-bg_transparent .svg-color-container circle[fill],
-.banner-bg_transparent .svg-color-container path[fill] {
-    fill: var(--dx-g-gray-10);
-}
-
-/*
- * Cloud Blue
- */
-.banner-bg_cloud-blue-vibrant {
-    background: var(--dx-g-cloud-blue-vibrant-95);
-}
-
-.banner-swoop-cloud-blue-vibrant .bg-swoop-container path[fill] {
-    fill: var(--dx-g-cloud-blue-vibrant-95);
-}
-
-.banner-bg_cloud-blue-vibrant .title,
-.banner-bg_cloud-blue-vibrant .subtitle {
-    color: var(--dx-g-indigo-vibrant-40);
-}
-
-.banner-bg_cloud-blue-vibrant .svg-color-container line[stroke],
-.banner-bg_cloud-blue-vibrant .svg-color-container polyline[stroke],
-.banner-bg_cloud-blue-vibrant .svg-color-container path[stroke],
-.banner-bg_cloud-blue-vibrant .svg-color-container g[stroke] {
-    stroke: var(--dx-g-indigo-vibrant-40);
-}
-
-.banner-bg_cloud-blue-vibrant .svg-color-container circle[fill],
-.banner-bg_cloud-blue-vibrant .svg-color-container path[fill] {
-    fill: var(--dx-g-indigo-vibrant-40);
-}
-
-/*
- * Cloud Blue
- */
-.banner-bg_cloud-blue-natural {
-    background: var(--dx-g-cloud-blue-natural-95);
-}
-
-.banner-swoop-cloud-blue-natural .bg-swoop-container path[fill] {
-    fill: var(--dx-g-cloud-blue-natural-95);
-}
-
-.banner-bg_cloud-blue-natural .title,
-.banner-bg_cloud-blue-natural .subtitle {
-    color: var(--dx-g-blue-vibrant-20);
-}
-
-.banner-bg_cloud-blue-natural .svg-color-container line[stroke],
-.banner-bg_cloud-blue-natural .svg-color-container polyline[stroke],
-.banner-bg_cloud-blue-natural .svg-color-container path[stroke],
-.banner-bg_cloud-blue-natural .svg-color-container g[stroke] {
-    stroke: var(--dx-g-blue-vibrant-20);
-}
-
-.banner-bg_cloud-blue-natural .svg-color-container circle[fill],
-.banner-bg_cloud-blue-natural .svg-color-container path[fill] {
-    fill: var(--dx-g-blue-vibrant-20);
-}
-
-/*
- * Light Blue
- */
-
-.banner-bg_light-blue {
-    background: linear-gradient(
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    min-height: 24px;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    background: repeating-linear-gradient(
         45deg,
-        var(--dx-g-blue-vibrant-90) 0%,
-        var(--dx-g-blue-vibrant-80) 100%
+        var(--primary-color),
+        var(--primary-color) 20px,
+        var(--secondary-color) 20px,
+        var(--secondary-color) 40px
     );
 }
 
-.banner-swoop-light-blue .bg-swoop-container path[fill] {
-    fill: var(--dx-g-blue-vibrant-80);
-}
-
-.banner-bg_light-blue .title,
-.banner-bg_light-blue .subtitle {
-    color: var(--dx-g-blue-vibrant-20);
-}
-
-.banner-bg_light-blue .svg-color-container line[stroke],
-.banner-bg_light-blue .svg-color-container polyline[stroke],
-.banner-bg_light-blue .svg-color-container path[stroke],
-.banner-bg_light-blue .svg-color-container g[stroke] {
-    stroke: var(--dx-g-blue-vibrant-20);
-}
-
-.banner-bg_light-blue .svg-color-container circle[fill],
-.banner-bg_light-blue .svg-color-container path[fill] {
-    fill: var(--dx-g-blue-vibrant-20);
-}
-
-/*
- * Blue
- */
-.banner-bg_blue {
-    /* TODO: what variable is this? */
-    background: #8fd0fe;
-}
-
-.banner-swoop-blue .bg-swoop-container path[fill] {
-    fill: #8fd0fe;
-}
-
-.banner-bg_blue .title,
-.banner-bg_blue .subtitle {
-    color: var(--dx-g-indigo-vibrant-20);
-}
-
-.banner-bg_blue .svg-color-container line[stroke],
-.banner-bg_blue .svg-color-container polyline[stroke],
-.banner-bg_blue .svg-color-container path[stroke],
-.banner-bg_blue .svg-color-container g[stroke] {
-    stroke: var(--dx-g-indigo-vibrant-20);
-}
-
-.banner-bg_blue .svg-color-container circle[fill],
-.banner-bg_blue .svg-color-container path[fill] {
-    fill: var(--dx-g-indigo-vibrant-20);
-}
-
-/*
- * Light Indigo
- */
-.banner-bg_light-indigo {
-    background: var(--dx-g-indigo-vibrant-40);
-}
-
-.banner-swoop-light-indigo .bg-swoop-container path[fill] {
-    fill: var(--dx-g-indigo-vibrant-40);
-}
-
-.banner-bg_light-indigo .title,
-.banner-bg_light-indigo .subtitle {
-    color: #fff;
-}
-
-.banner-bg_light-indigo .svg-color-container line[stroke],
-.banner-bg_light-indigo .svg-color-container polyline[stroke],
-.banner-bg_light-indigo .svg-color-container path[stroke],
-.banner-bg_light-indigo .svg-color-container g[stroke] {
-    stroke: #fff;
-}
-
-.banner-bg_teal .svg-color-container circle[fill],
-.banner-bg_light-indigo .svg-color-container path[fill] {
-    fill: #fff;
-}
-
-.banner-size-small .title {
-    font-size: var(--dx-g-text-2xl);
-    line-height: var(--dx-g-text-2xl);
-}
-
-@media screen and (max-width: 768px) {
-    .title {
-        font-size: var(--dx-g-text-3xl);
-        line-height: var(--dx-g-text-3xl);
-        margin-bottom: var(--dx-g-spacing-sm);
-    }
-
-    .banner-size-small .title {
-        font-size: var(--dx-g-text-xl);
-        line-height: var(--dx-g-text-xl);
-        margin-bottom: var(--dx-g-spacing-sm);
-    }
-}
-
-.banner-size-small .subtitle {
-    font-size: var(--dx-g-text-lg);
-    line-height: var(--dx-g-text-xl);
-    font-weight: var(--dx-g-font-normal);
-}
-
-@media screen and (max-width: 768px) {
-    .subtitle {
-        font-size: var(--dx-g-text-lg);
-        line-height: var(--dx-g-text-lg);
-        font-weight: var(--dx-g-font-normal);
-    }
-}
-
-.banner-has-cta .subtitle {
-    margin-bottom: var(--dx-g-spacing-lg);
-}
-
-/*
- * Text container
- */
-.text-container {
-    align-self: center;
-    flex: 1;
-    z-index: 1;
-}
-
-.banner-title-position-bottom .text-container {
-    align-self: flex-end;
-}
-
-.banner-no-image .text-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-/*
- * Image container
- */
-.image-container {
-    margin-left: var(--dx-g-spacing-3xl);
-    z-index: 1;
-}
-
-.banner-image-position-left .image-container {
-    margin-left: 0;
-    margin-right: var(--dx-g-spacing-3xl);
-}
-
-.mobile-image {
-    display: none;
-}
-
-@media screen and (max-width: 768px) {
-    .image-container {
-        margin-left: 0;
-        margin-bottom: var(--dx-g-spacing-lg);
-        align-self: flex-end;
-    }
-
-    .desktop-image {
-        display: none;
-    }
-
-    .banner-graphic .bg-image-container {
-        display: none;
-    }
-
-    .mobile-image {
-        display: block;
-    }
-}
-
-.banner-no-image .image-container {
-    display: none;
-}
-
-/*
- * Background container
- */
-
-.bg-image-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-}
-
-.bg-image-container .svg-container {
-    position: absolute;
-}
-
-.banner-graphic-bear .bg-image-container {
-    top: 0;
-    left: 0;
-}
-
-.banner-graphic-clouds .bg-image-container {
-    bottom: 0;
-    left: 0;
-}
-
-.banner-graphic-clouds .bg-image-container .svg-container {
-    bottom: 0;
-}
-
-.banner-graphic-moon-clouds .bg-image-container {
-    top: 0;
-    left: 0;
-}
-
-.banner-graphic-moon-stars .bg-image-container {
-    top: 0;
-    left: 0;
-}
-
-.banner-swoop .bg-image-container {
-    z-index: -1;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.banner-swoop-swoop-1 .bg-image-container svg {
-    height: 100%;
-}
-
-.banner-swoop-swoop-2 .bg-image-container svg {
+.container_inner {
     height: 100%;
+    display: flex;
+    background: var(--primary-color);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm);
+    color: white;
+    font-weight: bold;
 }
 
-.banner-swoop-swoop-3 .bg-image-container svg {
-    height: 100%;
-    position: absolute;
-    left: 54%;
+.container a {
+    text-decoration: underline;
+    transition: var(--dx-g-transition-hue-1x);
+    margin-right: 4px;
 }
 
-.banner-swoop-swoop-4 .bg-image-container svg {
-    height: 100%;
+.container a:hover {
+    opacity: 0.8;
 }
 
-.bg-image-container .bg-cover {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+.container dx-icon {
+    margin-right: var(--dx-g-spacing-sm);
+    margin-top: var(--dx-g-spacing-2xs);
 }

package/src/modules/dx/banner/banner.html

@@ -1,41 +1,13 @@
 <template>
-    <div class={className}>
-        <div if:true={hasBgImg} class={bgClass}>
-            <div class="bg-cover"></div>
-            <span class="svg-container" lwc:dom="manual"></span>
-        </div>
-        <div class="text-container">
-            <h2 class="title">{title}</h2>
-            <h3 class="subtitle">{subtitle}</h3>
-            <dx-button
-                if:true={cta}
-                href={ctaHref}
-                target={ctaTarget}
-                rel={ctaRel}
-                aria-label={ctaAriaLabel}
-                variant="primary"
-            >
-                {cta}
-            </dx-button>
-        </div>
-        <div if:true={hasImg} class="image-container">
-            <div class="desktop-image svg-color-container">
-                <template if:true={imgSrc}>
-                    <img src={imgSrc} alt={imgAlt} role={imgRole} />
-                </template>
-                <span class="svg-container" lwc:dom="manual"></span>
-            </div>
-            <div class="mobile-image svg-color-container">
-                <template if:true={mobileImgSrc}>
-                    <img
-                        if:true={mobileImgSrc}
-                        src={mobileImgSrc}
-                        alt={imgAlt}
-                        role={imgRole}
-                    />
-                </template>
-                <span class="svg-container" lwc:dom="manual"></span>
-            </div>
+    <div class="container">
+        <div class="container_inner dx-text-body-4">
+            <dx-icon symbol="announcement"></dx-icon>
+            <!--
+                NOTE: Here we are rendering mark up using lwc:dom & innerHTML
+                option instead of slots because the html markup will come as a
+                property to the component from a configuration
+            -->
+            <div lwc:dom="manual" class="info-container"></div>
         </div>
     </div>
 </template>

package/src/modules/dx/banner/banner.ts

@@ -1,130 +1,12 @@
 import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import svgs from "./svgs";
+import { setContainerInnerHtml } from "dxUtils/lwc";
 
-const graphicImages = ["bear", "clouds", "moon-clouds", "moon-stars"];
-const swoopImages = ["swoop-1", "swoop-2", "swoop-3", "swoop-4"];
+export default class Banner extends LightningElement {
+    @api bannerMarkup =
+        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
 
-export default class Button extends LightningElement {
-    @api title: string = "";
-    @api subtitle: string = "";
-    @api size: "medium" | "small" = "medium";
-    @api titlePosition: "center" | "bottom" = "center";
-    @api inset: boolean = false;
-
-    // cta props
-    @api cta?: string;
-    @api ctaHref: string | null = null;
-    @api ctaTarget: "_self" | "_blank" | "_parent" | "_top" | null = null;
-    @api ctaRel: string | null = null;
-    @api ctaAriaLabel: string = "";
-
-    // image props
-    @api imgPosition: "right" | "left" = "right";
-    @api img: string | null = null;
-    @api mobileImg: string | null = null;
-    @api imgAlt: string | null = null;
-    @api imgRole: string | null = null;
-    @api backgroundColor:
-        | "teal"
-        | "dark-indigo"
-        | "cloud-blue-natural"
-        | "cloud-blue-vibrant"
-        | "light-blue"
-        | "blue"
-        | "light-indigo"
-        | "transparent" = "transparent";
-    @api backgroundImg:
-        | "bear"
-        | "clouds"
-        | "moon-clouds"
-        | "moon-stars"
-        | "swoop-1"
-        | "swoop-2"
-        | "swoop-3"
-        | "swoop-4"
-        | null = null;
-
-    private get className(): string {
-        return cx(
-            "banner",
-            this.inset && `banner-inset`,
-            this.cta && `banner-has-cta`,
-            !this.hasImg && "banner-no-image",
-            this.isGraphic &&
-                `banner-graphic banner-graphic-${this.backgroundImg}`,
-            this.isSwoop &&
-                `banner-swoop banner-swoop-${this.backgroundImg} banner-swoop-${this.backgroundColor}`,
-            `banner-title-position-${this.titlePosition}`,
-            `banner-image-position-${this.imgPosition}`,
-            `banner-size-${this.size}`,
-            `banner-bg_${this.isSwoop ? "transparent" : this.backgroundColor}`
-        );
-    }
-
-    private get bgClass(): string {
-        return cx(
-            "bg-image-container",
-            this.isGraphic && "bg-graphic-container svg-color-container",
-            this.isSwoop && "bg-swoop-container"
-        );
-    }
-
-    private get isGraphic(): boolean {
-        return (
-            this.backgroundImg !== null &&
-            graphicImages.includes(this.backgroundImg)
-        );
-    }
-
-    private get isSwoop(): boolean {
-        return (
-            this.backgroundImg !== null &&
-            swoopImages.includes(this.backgroundImg)
-        );
-    }
-
-    private get hasBgImg(): boolean {
-        return this.isGraphic || this.isSwoop;
-    }
-
-    private get hasImg(): boolean {
-        return !!this.img || !!this.mobileImg || this.isGraphic;
-    }
-
-    private get imgSrc(): string {
-        return this.img!;
-    }
-
-    private get mobileImgSrc(): string {
-        return this.mobileImg!;
-    }
-
-    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 .svg-container"
-            );
-            const desktopSvg = this.template.querySelector(
-                ".desktop-image .svg-container"
-            );
-            const mobileSvg = this.template.querySelector(
-                ".mobile-image .svg-container"
-            );
-            if (bgSvg) {
-                // eslint-disable-next-line @lwc/lwc/no-inner-html
-                bgSvg.innerHTML = svgs[this.backgroundImg].bg;
-            }
-            if (desktopSvg) {
-                // eslint-disable-next-line @lwc/lwc/no-inner-html
-                desktopSvg.innerHTML = svgs[this.backgroundImg].desktop;
-            }
-            if (mobileSvg) {
-                // eslint-disable-next-line @lwc/lwc/no-inner-html
-                mobileSvg.innerHTML = svgs[this.backgroundImg].mobile;
-            }
-        }
+    renderedCallback() {
+        const container = this.template.querySelector(".info-container");
+        setContainerInnerHtml(container, this.bannerMarkup);
     }
 }