@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

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.ts

@@ -0,0 +1,113 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { LightningSlotElement } from "typings/custom";
+import { isSlotEmpty } from "utils/slot";
+import { toJson } from "utils/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;
+
+    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 get labelRole(): string | null {
+        return this.labelAsPrimaryHeading ? "heading" : null;
+    }
+
+    private get labelAriaLevel(): string | null {
+        return this.labelAsPrimaryHeading ? "1" : null;
+    }
+
+    private get titleAriaLevel(): string {
+        return this.labelAsPrimaryHeading ? "2" : "1";
+    }
+
+    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}
+                `;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+const treesDesktop =
+    '<svg class="trees" width="278" height="132" viewBox="0 0 278 132" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="#3A49DA" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M213.485 78.149s-7.5-1.071-7.5-6.161M198.483 78.149s7.501-1.071 7.501-6.161M214.985 85.838s-8.947-1.286-8.947-7.395M197.023 85.838s9.001-1.286 9.001-7.395M214.985 94.197s-8.947-1.286-8.947-7.394M197.023 94.197s9.001-1.286 9.001-7.394M206.023 72.708v31.054M225.093 60.968s7.5-1.072 7.5-6.162M240.095 60.968s-7.5-1.072-7.5-6.162M223.593 68.657s8.947-1.286 8.947-7.394M241.555 68.657s-9-1.286-9-7.394M223.593 77.015s8.947-1.285 8.947-7.394M241.555 77.015s-9-1.285-9-7.394M224.951 84.723s7.59-1.091 7.59-6.271M240.189 84.723s-7.635-1.091-7.635-6.271M224.951 93.421s7.59-1.09 7.59-6.27M240.189 93.421s-7.635-1.09-7.635-6.27M232.556 55.528v48.465M264.215 105.188H159.083M159.507 105.184c-7.09 0-12.839-5.761-12.839-12.866 0-7.107 5.748-12.867 12.84-12.867M264.054 105.175c7.091 0 12.84 5.761 12.84 12.867 0 7.106-5.749 12.866-12.84 12.866M164.608 79.254c7.091 0 12.84-5.76 12.84-12.866 0-7.107-5.749-12.867-12.84-12.867h-48.042M100.603 2.012H1M85.65 27.729h14.132M100.442 2c7.09 0 12.84 5.76 12.84 12.866s-5.75 12.866-12.84 12.866M85.067 27.794c-7.09 0-12.84 5.761-12.84 12.866 0 7.107 5.75 12.867 12.84 12.867h12.714M138.379 26.977s-7.5-1.071-7.5-6.161M123.377 26.977s7.5-1.071 7.5-6.161M139.88 34.665s-8.948-1.285-8.948-7.394M121.916 34.665s9.001-1.285 9.001-7.394M139.88 43.025s-8.948-1.286-8.948-7.394M121.916 43.025s9.001-1.286 9.001-7.394M130.917 21.536v31.055M149.987 9.796s7.5-1.072 7.5-6.162M164.989 9.796s-7.5-1.072-7.5-6.162M148.486 17.485s8.948-1.286 8.948-7.394M166.45 17.485s-9.002-1.286-9.002-7.394M148.486 25.843s8.948-1.285 8.948-7.394M166.45 25.843s-9.002-1.285-9.002-7.394M149.845 33.551s7.589-1.09 7.589-6.27M165.083 33.551s-7.634-1.09-7.634-6.27M149.845 42.25s7.589-1.092 7.589-6.272M165.083 42.25s-7.634-1.092-7.634-6.272M157.449 4.356v48.465"/></g></svg>';
+
+const treesMobile =
+    '<svg class="trees-mobile" width="127" height="81" viewBox="0 0 127 81" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="#3A49DA" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linejoin="round"><path d="M112.608 79.254c7.091 0 12.84-5.76 12.84-12.866 0-7.107-5.749-12.867-12.84-12.867H64.566" stroke-linecap="round"/><path d="M48.603 2.012L0 2"/><path stroke-linecap="round" d="M33.65 27.729h14.132M48.442 2c7.09 0 12.84 5.76 12.84 12.866s-5.75 12.866-12.84 12.866M33.067 27.794c-7.09 0-12.84 5.761-12.84 12.866 0 7.107 5.75 12.867 12.84 12.867h12.714M86.379 26.977s-7.5-1.071-7.5-6.161M71.377 26.977s7.5-1.071 7.5-6.161M87.88 34.665s-8.948-1.285-8.948-7.394M69.916 34.665s9.002-1.285 9.002-7.394M87.88 43.025s-8.948-1.286-8.948-7.394M69.916 43.025s9.002-1.286 9.002-7.394M78.916 21.536v31.055M97.987 9.796s7.5-1.072 7.5-6.162M112.989 9.796s-7.5-1.072-7.5-6.162M96.486 17.485s8.948-1.286 8.948-7.394M114.45 17.485s-9.002-1.286-9.002-7.394M96.486 25.843s8.948-1.285 8.948-7.394M114.45 25.843s-9.002-1.285-9.002-7.394M97.845 33.551s7.589-1.09 7.589-6.27M113.083 33.551s-7.634-1.09-7.634-6.27M97.845 42.25s7.589-1.092 7.589-6.272M113.083 42.25s-7.634-1.092-7.634-6.272M105.449 4.356v48.465"/></g></svg>';
+
+const codeyMobile =
+    '<svg class="codey-mobile" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg"><g stroke="#1A96FF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M89.878 290h10.135a8.67 8.67 0 0 1 7.732 4.734c.6 1.176.938 2.507.938 3.917 0 4.777-3.883 8.65-8.67 8.65h-.821c-7.74 0-14.056 6.189-14.183 13.909l-.009.423c-.122 7.9 6.268 14.367 14.185 14.367h191.963c7.098 0 12.852-5.741 12.852-12.822 0-7.083-5.754-12.824-12.852-12.824h-9.137c-5.633 0-10.2-4.557-10.2-10.177 0-5.62 4.567-10.177 10.2-10.177h8.929M174 133c-16.427-5.062-18-27-18-27M205 133c16.427-5.062 18-27 18-27M192 78.658h-6.524c-5.16 0-10.1 2.06-13.683 5.708L158.4 98l-8.326-10.166a9.105 9.105 0 0 1 .816-12.438c3.74-3.524 9.76-3.107 12.959.895l7.162 8.85"/><path d="M189 78.658h6.524c5.16 0 10.1 2.06 13.683 5.708l1.027 1.045L222.6 98l8.326-10.166a9.105 9.105 0 0 0-.816-12.438c-3.74-3.524-9.76-3.107-12.959.895l-8.482 9.195M199.364 108.824l4.492 22.427c.616 3.078-.773 5.296-3.576 7.652l-.07.036c-8.431 6.74-11.29 6.74-20.685.046l-.099-.046c-.016-.009-.037-.014-.051-.027-2.279-1.968-3.775-4.062-3.28-6.823l4.177-23.265c.982-4.569 4.954-7.824 9.546-7.824s8.565 3.255 9.546 7.824"/><path d="m176 135 4.879 15H193"/><path d="m205 133-5.66 17H187M157.728 98 146 146.747l24.135 17.435c2.328 1.681 5.638.657 6.578-2.035L181 149.869"/><path d="M222.584 97 234 146.617l-24.136 17.56c-2.327 1.693-5.637.66-6.577-2.051L199 149.762M147.033 146l-14.499 41.89a9.695 9.695 0 0 0 4.518 11.68L175.778 221l.222-56.335M124 216l8-23M111 283l3.896-55.198c.747-8.864 10.144-14.32 18.323-10.637l8.3 3.737c15.768 7.1 22.127 25.962 13.827 41.014M158 256l17-34M131.055 298.148l-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61Z"/><path d="m137.055 291.148-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61ZM143.055 284.148l-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61ZM191 234h-5.91c-9.516 0-18.226 5.314-22.528 13.747L158 257M234.568 147l14.85 41.4c1.62 4.523-.237 9.578-4.37 11.889L207.325 222 207 165.196M249 193l8 23M224.645 261.632c-8.28-15.286-1.936-34.442 13.795-41.654l8.279-3.795c8.16-3.74 17.535 1.8 18.278 10.804L269 285M222 256l-15-34"/><path d="m250.945 298.148 1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM243.945 291.148l1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM236.945 284.148l1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM189 234h5.91c9.517 0 18.226 5.314 22.529 13.747L222 257M112 272h0c-10.88 0-19.543 7.901-22 18M148 324l-26-27M268 271h0c10.858 0 19.512 7.893 22 18M232 326l28-28M128 205l44 23M252 205l-42 23"/><path d="m230.945 278.148 1.873 1.89a3.244 3.244 0 0 0 4.597.014l11.626-11.59a3.266 3.266 0 0 0 .014-4.61l-1.873-1.89a3.245 3.245 0 0 0-4.597-.015L230.96 273.54a3.265 3.265 0 0 0-.014 4.61ZM266 238l-34 33M115 238l25 26M150.055 278.148l-1.873 1.89a3.243 3.243 0 0 1-4.596.014l-11.627-11.59a3.267 3.267 0 0 1-.014-4.61l1.873-1.89a3.244 3.244 0 0 1 4.596-.015l11.627 11.592a3.266 3.266 0 0 1 .014 4.61Z"/><path d="M231 278v48h-82v-46.843M149 270.917V262h82v11M209 108.5c0-2.485-1.79-4.5-4-4.5s-4 2.015-4 4.5 1.79 4.5 4 4.5 4-2.015 4-4.5ZM181 108.5c0-2.485-1.79-4.5-4-4.5s-4 2.015-4 4.5 1.79 4.5 4 4.5 4-2.015 4-4.5ZM189.415 122.552l-4.963-4.943c-.966-.963-.28-2.609 1.085-2.609h9.926c1.366 0 2.051 1.646 1.085 2.609l-4.963 4.943a1.538 1.538 0 0 1-2.17 0ZM170 85c8.981.844 16 8.133 16 17M210 85c-8.987.878-16 8.154-16 17M70 272.427C70 262.25 61.717 254 51.5 254c-10.218 0-18.5 8.25-18.5 18.427 0 6.552 3.434 12.306 8.607 15.573"/><path d="M38.27 260c-7.027 7.107-7.027 18.63 0 25.736a14.28 14.28 0 0 0 20.357 0c4.497-4.548 4.497-11.923 0-16.471a9.14 9.14 0 0 0-13.029 0c-2.877 2.91-2.877 7.63 0 10.542M20.63 282.419A13.295 13.295 0 0 0 14.64 281C7.107 281 1 287.268 1 295s6.107 14 13.64 14c4.74 0 8.915-2.481 11.36-6.247"/><path d="M32 272.38a8.15 8.15 0 0 0-2.462-.38c-4.715 0-8.538 4.03-8.538 9M5 304.82a13.734 13.734 0 0 0 19.731 0c4.359-4.458 4.359-11.687 0-16.145a8.79 8.79 0 0 0-12.628 0c-2.79 2.854-2.79 7.48 0 10.333"/><path d="M27 302c3.434 7.1 10.73 12 19.174 12 7.464 0 14.03-3.828 17.826-9.62M64 305.139c2.642 4.7 7.568 7.861 13.21 7.861 6.085 0 11.339-3.678 13.79-9"/><path d="M66 307.275c6.16 6.3 16.145 6.3 22.305 0 4.927-5.04 4.926-13.211 0-18.251a9.937 9.937 0 0 0-14.276 0c-3.154 3.225-3.154 8.455 0 11.68a6.359 6.359 0 0 0 9.136 0M95 280c-2.94-5.345-8.88-9-15.73-9-3.399 0-6.574.9-9.27 2.461M312 272.427C312 262.25 320.283 254 330.5 254c10.218 0 18.5 8.25 18.5 18.427 0 6.552-3.434 12.306-8.607 15.573"/><path d="M343.73 260c7.027 7.107 7.027 18.63 0 25.736a14.28 14.28 0 0 1-20.357 0c-4.497-4.548-4.497-11.923 0-16.471a9.14 9.14 0 0 1 13.029 0c2.877 2.91 2.877 7.63 0 10.542M360.37 282.419a13.295 13.295 0 0 1 5.99-1.419c7.533 0 13.64 6.268 13.64 14s-6.107 14-13.64 14c-4.74 0-8.915-2.481-11.36-6.247"/><path d="M350 272.38a8.15 8.15 0 0 1 2.462-.38c4.715 0 8.538 4.03 8.538 9M376 304.82a13.734 13.734 0 0 1-19.731 0c-4.359-4.458-4.359-11.687 0-16.145a8.79 8.79 0 0 1 12.628 0c2.79 2.854 2.79 7.48 0 10.333"/><path d="M354 302c-3.434 7.1-10.73 12-19.174 12A21.273 21.273 0 0 1 317 304.38M317 305.139c-2.642 4.7-7.568 7.861-13.21 7.861-6.085 0-11.34-3.678-13.79-9"/><path d="M316 307.275a15.524 15.524 0 0 1-22.305 0c-4.927-5.04-4.926-13.211 0-18.251a9.937 9.937 0 0 1 14.276 0c3.154 3.225 3.153 8.455 0 11.68a6.359 6.359 0 0 1-9.136 0M287 280c2.94-5.345 8.88-9 15.73-9 3.399 0 6.574.9 9.27 2.461M188.316 283.508c1.033-1.103 2.47-1.789 4.059-1.789 2.112 0 3.955 1.21 4.936 3.006a6.663 6.663 0 0 1 2.79-.61c3.81 0 6.899 3.2 6.899 7.147 0 3.946-3.089 7.146-6.899 7.146-.464 0-.92-.048-1.359-.14-.864 1.584-2.51 2.653-4.4 2.653a4.91 4.91 0 0 1-2.208-.521c-.876 2.116-2.917 3.6-5.296 3.6-2.477 0-4.589-1.61-5.399-3.867a5.145 5.145 0 0 1-1.098.117c-2.95 0-5.341-2.48-5.341-5.542 0-2.05 1.074-3.842 2.67-4.8a6.492 6.492 0 0 1-.511-2.535c0-3.52 2.783-6.373 6.215-6.373 2.016 0 3.807.983 4.942 2.508ZM235.25 151.665c18.293 13.738 30.124 35.598 30.124 60.217 0 3.724-.27 7.383-.793 10.963M115.568 223.911a75.81 75.81 0 0 1-.957-12.029c0-24.69 11.898-46.603 30.28-60.335"/><path d="M229.425 128.689c31.155 14.758 52.7 46.463 52.7 83.193 0 17.726-5.016 34.28-13.71 48.324M112.825 262.178c-9.464-14.457-14.965-31.735-14.965-50.296 0-37.016 21.881-68.929 53.43-83.535"/><path d="M224.991 108.866c42.967 14.559 73.885 55.181 73.885 103.017 0 23.134-7.231 44.58-19.56 62.208M100.962 274.51c-12.507-17.706-19.854-39.31-19.854-62.628 0-48.428 31.69-89.464 75.49-103.545"/><path d="M228.48 92.392c50.56 16.234 87.148 63.594 87.148 119.49 0 20.852-5.092 40.516-14.101 57.819M79.276 271.245c-9.518-17.673-14.92-37.888-14.92-59.362 0-56.295 37.112-103.93 88.231-119.833"/><path d="M54.29 255.075c-4.342-13.622-6.684-28.134-6.684-43.193 0-78.545 63.748-142.22 142.386-142.22s142.387 63.675 142.387 142.22c0 14.807-2.266 29.086-6.47 42.509M237.817 335h-95.633c-1.758 0-3.184-1.46-3.184-3.26v-2.48c0-1.8 1.426-3.26 3.184-3.26h95.633c1.757 0 3.183 1.46 3.183 3.26v2.48c0 1.8-1.426 3.26-3.183 3.26Z"/><path d="M37.955 257.436C33.433 242.698 31 227.05 31 210.831c0-6.427.382-12.765 1.125-18.993a157.799 157.799 0 0 1 6.725-30.437 157.805 157.805 0 0 1 8.881-21.568 158.657 158.657 0 0 1 7.757-13.73 159.458 159.458 0 0 1 16.358-21.558C100.948 72.282 143.103 52 190 52c87.813 0 159 71.111 159 158.831 0 15.76-2.298 30.984-6.577 45.356l-.664 1.813M48.368 75.44l-.954 2.577a.668.668 0 0 1-.396.398l-2.579.954a.673.673 0 0 0 0 1.262l2.579.954a.67.67 0 0 1 .396.398l.954 2.578a.674.674 0 0 0 1.264 0l.953-2.578a.673.673 0 0 1 .398-.398l2.577-.954a.673.673 0 0 0 0-1.262l-2.577-.954a.67.67 0 0 1-.398-.398l-.953-2.578a.674.674 0 0 0-1.264 0ZM195 24a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM101 4a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM24 255a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></g></svg>';
+
+const codeyDesktop =
+    '<svg class="codey-desktop" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg"><g stroke="#1A96FF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M89.878 290h10.135a8.67 8.67 0 0 1 7.732 4.734c.6 1.176.938 2.507.938 3.917 0 4.777-3.883 8.65-8.67 8.65h-.821c-7.74 0-14.056 6.189-14.183 13.909l-.009.423c-.122 7.9 6.268 14.367 14.185 14.367h191.963c7.098 0 12.852-5.741 12.852-12.822 0-7.083-5.754-12.824-12.852-12.824h-9.137c-5.633 0-10.2-4.557-10.2-10.177 0-5.62 4.567-10.177 10.2-10.177h8.929M174 133c-16.427-5.062-18-27-18-27M205 133c16.427-5.062 18-27 18-27M192 78.658h-6.524c-5.16 0-10.1 2.06-13.683 5.708L158.4 98l-8.326-10.166a9.105 9.105 0 0 1 .816-12.438c3.74-3.524 9.76-3.107 12.959.895l7.162 8.85"/><path d="M189 78.658h6.524c5.16 0 10.1 2.06 13.683 5.708l1.027 1.045L222.6 98l8.326-10.166a9.105 9.105 0 0 0-.816-12.438c-3.74-3.524-9.76-3.107-12.959.895l-8.482 9.195M199.364 108.824l4.492 22.427c.616 3.078-.773 5.296-3.576 7.652l-.07.036c-8.431 6.74-11.29 6.74-20.685.046l-.099-.046c-.016-.009-.037-.014-.051-.027-2.279-1.968-3.775-4.062-3.28-6.823l4.177-23.265c.982-4.569 4.954-7.824 9.546-7.824s8.565 3.255 9.546 7.824"/><path d="m176 135 4.879 15H193"/><path d="m205 133-5.66 17H187M157.728 98 146 146.747l24.135 17.435c2.328 1.681 5.638.657 6.578-2.035L181 149.869"/><path d="M222.584 97 234 146.617l-24.136 17.56c-2.327 1.693-5.637.66-6.577-2.051L199 149.762M147.033 146l-14.499 41.89a9.695 9.695 0 0 0 4.518 11.68L175.778 221l.222-56.335M124 216l8-23M111 283l3.896-55.198c.747-8.864 10.144-14.32 18.323-10.637l8.3 3.737c15.768 7.1 22.127 25.962 13.827 41.014M158 256l17-34M131.055 298.148l-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61Z"/><path d="m137.055 291.148-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61ZM143.055 284.148l-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61ZM191 234h-5.91c-9.516 0-18.226 5.314-22.528 13.747L158 257M234.568 147l14.85 41.4c1.62 4.523-.237 9.578-4.37 11.889L207.325 222 207 165.196M249 193l8 23M224.645 261.632c-8.28-15.286-1.936-34.442 13.795-41.654l8.279-3.795c8.16-3.74 17.535 1.8 18.278 10.804L269 285M222 256l-15-34"/><path d="m250.945 298.148 1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM243.945 291.148l1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM236.945 284.148l1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM189 234h5.91c9.517 0 18.226 5.314 22.529 13.747L222 257M112 272h0c-10.88 0-19.543 7.901-22 18M148 324l-26-27M268 271h0c10.858 0 19.512 7.893 22 18M232 326l28-28M128 205l44 23M252 205l-42 23"/><path d="m230.945 278.148 1.873 1.89a3.244 3.244 0 0 0 4.597.014l11.626-11.59a3.266 3.266 0 0 0 .014-4.61l-1.873-1.89a3.245 3.245 0 0 0-4.597-.015L230.96 273.54a3.265 3.265 0 0 0-.014 4.61ZM266 238l-34 33M115 238l25 26M150.055 278.148l-1.873 1.89a3.243 3.243 0 0 1-4.596.014l-11.627-11.59a3.267 3.267 0 0 1-.014-4.61l1.873-1.89a3.244 3.244 0 0 1 4.596-.015l11.627 11.592a3.266 3.266 0 0 1 .014 4.61Z"/><path d="M231 278v48h-82v-46.843M149 270.917V262h82v11M209 108.5c0-2.485-1.79-4.5-4-4.5s-4 2.015-4 4.5 1.79 4.5 4 4.5 4-2.015 4-4.5ZM181 108.5c0-2.485-1.79-4.5-4-4.5s-4 2.015-4 4.5 1.79 4.5 4 4.5 4-2.015 4-4.5ZM189.415 122.552l-4.963-4.943c-.966-.963-.28-2.609 1.085-2.609h9.926c1.366 0 2.051 1.646 1.085 2.609l-4.963 4.943a1.538 1.538 0 0 1-2.17 0ZM170 85c8.981.844 16 8.133 16 17M210 85c-8.987.878-16 8.154-16 17M70 272.427C70 262.25 61.717 254 51.5 254c-10.218 0-18.5 8.25-18.5 18.427 0 6.552 3.434 12.306 8.607 15.573"/><path d="M38.27 260c-7.027 7.107-7.027 18.63 0 25.736a14.28 14.28 0 0 0 20.357 0c4.497-4.548 4.497-11.923 0-16.471a9.14 9.14 0 0 0-13.029 0c-2.877 2.91-2.877 7.63 0 10.542M20.63 282.419A13.295 13.295 0 0 0 14.64 281C7.107 281 1 287.268 1 295s6.107 14 13.64 14c4.74 0 8.915-2.481 11.36-6.247"/><path d="M32 272.38a8.15 8.15 0 0 0-2.462-.38c-4.715 0-8.538 4.03-8.538 9M5 304.82a13.734 13.734 0 0 0 19.731 0c4.359-4.458 4.359-11.687 0-16.145a8.79 8.79 0 0 0-12.628 0c-2.79 2.854-2.79 7.48 0 10.333"/><path d="M27 302c3.434 7.1 10.73 12 19.174 12 7.464 0 14.03-3.828 17.826-9.62M64 305.139c2.642 4.7 7.568 7.861 13.21 7.861 6.085 0 11.339-3.678 13.79-9"/><path d="M66 307.275c6.16 6.3 16.145 6.3 22.305 0 4.927-5.04 4.926-13.211 0-18.251a9.937 9.937 0 0 0-14.276 0c-3.154 3.225-3.154 8.455 0 11.68a6.359 6.359 0 0 0 9.136 0M95 280c-2.94-5.345-8.88-9-15.73-9-3.399 0-6.574.9-9.27 2.461M312 272.427C312 262.25 320.283 254 330.5 254c10.218 0 18.5 8.25 18.5 18.427 0 6.552-3.434 12.306-8.607 15.573"/><path d="M343.73 260c7.027 7.107 7.027 18.63 0 25.736a14.28 14.28 0 0 1-20.357 0c-4.497-4.548-4.497-11.923 0-16.471a9.14 9.14 0 0 1 13.029 0c2.877 2.91 2.877 7.63 0 10.542M360.37 282.419a13.295 13.295 0 0 1 5.99-1.419c7.533 0 13.64 6.268 13.64 14s-6.107 14-13.64 14c-4.74 0-8.915-2.481-11.36-6.247"/><path d="M350 272.38a8.15 8.15 0 0 1 2.462-.38c4.715 0 8.538 4.03 8.538 9M376 304.82a13.734 13.734 0 0 1-19.731 0c-4.359-4.458-4.359-11.687 0-16.145a8.79 8.79 0 0 1 12.628 0c2.79 2.854 2.79 7.48 0 10.333"/><path d="M354 302c-3.434 7.1-10.73 12-19.174 12A21.273 21.273 0 0 1 317 304.38M317 305.139c-2.642 4.7-7.568 7.861-13.21 7.861-6.085 0-11.34-3.678-13.79-9"/><path d="M316 307.275a15.524 15.524 0 0 1-22.305 0c-4.927-5.04-4.926-13.211 0-18.251a9.937 9.937 0 0 1 14.276 0c3.154 3.225 3.153 8.455 0 11.68a6.359 6.359 0 0 1-9.136 0M287 280c2.94-5.345 8.88-9 15.73-9 3.399 0 6.574.9 9.27 2.461M188.316 283.508c1.033-1.103 2.47-1.789 4.059-1.789 2.112 0 3.955 1.21 4.936 3.006a6.663 6.663 0 0 1 2.79-.61c3.81 0 6.899 3.2 6.899 7.147 0 3.946-3.089 7.146-6.899 7.146-.464 0-.92-.048-1.359-.14-.864 1.584-2.51 2.653-4.4 2.653a4.91 4.91 0 0 1-2.208-.521c-.876 2.116-2.917 3.6-5.296 3.6-2.477 0-4.589-1.61-5.399-3.867a5.145 5.145 0 0 1-1.098.117c-2.95 0-5.341-2.48-5.341-5.542 0-2.05 1.074-3.842 2.67-4.8a6.492 6.492 0 0 1-.511-2.535c0-3.52 2.783-6.373 6.215-6.373 2.016 0 3.807.983 4.942 2.508ZM235.25 151.665c18.293 13.738 30.124 35.598 30.124 60.217 0 3.724-.27 7.383-.793 10.963M115.568 223.911a75.81 75.81 0 0 1-.957-12.029c0-24.69 11.898-46.603 30.28-60.335"/><path d="M229.425 128.689c31.155 14.758 52.7 46.463 52.7 83.193 0 17.726-5.016 34.28-13.71 48.324M112.825 262.178c-9.464-14.457-14.965-31.735-14.965-50.296 0-37.016 21.881-68.929 53.43-83.535"/><path d="M224.991 108.866c42.967 14.559 73.885 55.181 73.885 103.017 0 23.134-7.231 44.58-19.56 62.208M100.962 274.51c-12.507-17.706-19.854-39.31-19.854-62.628 0-48.428 31.69-89.464 75.49-103.545"/><path d="M228.48 92.392c50.56 16.234 87.148 63.594 87.148 119.49 0 20.852-5.092 40.516-14.101 57.819M79.276 271.245c-9.518-17.673-14.92-37.888-14.92-59.362 0-56.295 37.112-103.93 88.231-119.833"/><path d="M54.29 255.075c-4.342-13.622-6.684-28.134-6.684-43.193 0-78.545 63.748-142.22 142.386-142.22s142.387 63.675 142.387 142.22c0 14.807-2.266 29.086-6.47 42.509M237.817 335h-95.633c-1.758 0-3.184-1.46-3.184-3.26v-2.48c0-1.8 1.426-3.26 3.184-3.26h95.633c1.757 0 3.183 1.46 3.183 3.26v2.48c0 1.8-1.426 3.26-3.183 3.26Z"/><path d="M37.955 257.436C33.433 242.698 31 227.05 31 210.831c0-6.427.382-12.765 1.125-18.993a157.799 157.799 0 0 1 6.725-30.437 157.805 157.805 0 0 1 8.881-21.568 158.657 158.657 0 0 1 7.757-13.73 159.458 159.458 0 0 1 16.358-21.558C100.948 72.282 143.103 52 190 52c87.813 0 159 71.111 159 158.831 0 15.76-2.298 30.984-6.577 45.356l-.664 1.813M48.368 75.44l-.954 2.577a.668.668 0 0 1-.396.398l-2.579.954a.673.673 0 0 0 0 1.262l2.579.954a.67.67 0 0 1 .396.398l.954 2.578a.674.674 0 0 0 1.264 0l.953-2.578a.673.673 0 0 1 .398-.398l2.577-.954a.673.673 0 0 0 0-1.262l-2.577-.954a.67.67 0 0 1-.398-.398l-.953-2.578a.674.674 0 0 0-1.264 0ZM195 24a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM101 4a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM24 255a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></g></svg>';
+
+const moonDesktop =
+    '<svg width="1221" height="507" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M745.819 45.482c0 24.567-19.915 44.482-44.482 44.482s-44.483-19.915-44.483-44.482C656.854 20.916 676.77 1 701.337 1c24.567 0 44.482 19.916 44.482 44.482"/><path d="M745.819 45.482c0 24.567-19.915 44.482-44.482 44.482s-44.483-19.915-44.483-44.482C656.854 20.916 676.77 1 701.337 1c24.567 0 44.482 19.916 44.482 44.482Z" stroke="#90D0FE" stroke-width="2"/><path d="M476.154 420.627a4.095 4.095 0 1 1-8.191 0 4.095 4.095 0 1 1 8.19 0ZM99.154 150.627a4.095 4.095 0 1 1-8.191 0 4.095 4.095 0 1 1 8.19 0ZM1210.142 97.587l-1.518 4.1a1.063 1.063 0 0 1-.631.633l-4.102 1.518c-.933.346-.933 1.664 0 2.009l4.102 1.517c.293.109.523.34.63.633l1.519 4.102c.346.93 1.664.93 2.009 0l1.517-4.102c.109-.293.34-.524.633-.633l4.102-1.517c.932-.345.932-1.663 0-2.01l-4.102-1.517a1.068 1.068 0 0 1-.633-.632l-1.517-4.101c-.345-.933-1.663-.933-2.01 0ZM8.142 490.372l-1.518 4.1a1.067 1.067 0 0 1-.632.633l-4.1 1.518c-.934.345-.934 1.664 0 2.009l4.1 1.517c.293.109.524.34.632.633l1.518 4.1c.345.933 1.664.933 2.01 0l1.516-4.1c.11-.293.34-.524.633-.633l4.101-1.517c.932-.345.932-1.664 0-2.01l-4.1-1.517a1.071 1.071 0 0 1-.634-.632l-1.517-4.101c-.345-.933-1.664-.933-2.009 0ZM127.142 115.587l-1.518 4.1a1.064 1.064 0 0 1-.632.633l-4.1 1.518c-.934.346-.934 1.664 0 2.009l4.1 1.517c.293.109.524.34.632.633l1.518 4.102c.345.93 1.664.93 2.01 0l1.516-4.102c.11-.293.34-.524.633-.633l4.101-1.517c.932-.345.932-1.663 0-2.01l-4.1-1.517a1.068 1.068 0 0 1-.634-.632l-1.517-4.101c-.345-.933-1.664-.933-2.009 0ZM909.009 306.108c-5.999-11.612-9.387-24.793-9.387-38.765 0-11.403 2.257-22.279 6.348-32.206M1067.92 255.215c.568 3.96.862 8.01.862 12.129 0 46.713-37.867 84.58-84.58 84.58-28.474 0-53.664-14.071-68.99-35.64M911.555 224.004c14.768-24.701 41.776-41.24 72.647-41.24 38.302 0 70.658 25.459 81.068 60.378M1055.511 147.787l-3.452 9.329a2.439 2.439 0 0 1-1.44 1.44l-9.329 3.452c-2.121.784-2.121 3.784 0 4.569l9.329 3.452a2.436 2.436 0 0 1 1.44 1.44l3.452 9.329c.785 2.12 3.785 2.12 4.569 0l3.452-9.33a2.441 2.441 0 0 1 1.44-1.44l9.329-3.451c2.121-.785 2.121-3.785 0-4.57l-9.329-3.451a2.444 2.444 0 0 1-1.44-1.44l-3.452-9.33c-.784-2.12-3.784-2.12-4.569 0ZM919.251 376.385c0 5.69-4.614 10.304-10.306 10.304-5.69 0-10.305-4.613-10.305-10.305 0-5.692 4.614-10.306 10.305-10.306 5.692 0 10.306 4.615 10.306 10.307Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M984.116 224.502a5.027 5.027 0 1 1-10.054 0 5.027 5.027 0 0 1 10.054 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1046.716 254.771h29.772M1087.929 254.771h7.089M902.279 225.33h23.242M870.108 225.33h10.053"/><path d="M893.055 225.33a2.01 2.01 0 1 1-4.021 0 2.01 2.01 0 0 1 4.02 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M893.425 315.627h31.409"/><path d="M936.898 315.627a2.011 2.011 0 1 1-4.023 0 2.011 2.011 0 0 1 4.023 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1013.52 292.398v-16.036M1021.537 284.382l-16.051.002"/></g></svg>';
+
+const blog = ``;
+
+export default {
+    trees: {
+        desktop: treesDesktop,
+        mobile: treesMobile
+    },
+    codey: {
+        desktop: codeyDesktop,
+        mobile: codeyMobile
+    },
+    blog: {
+        desktop: blog,
+        mobile: blog
+    },
+    moon: {
+        desktop: moonDesktop,
+        mobile: moonDesktop
+    }
+};

package/src/modules/dx/featuresList/featuresList.css

@@ -0,0 +1,24 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.dx-text-heading-5 {
+    display: inline-flex;
+}
+
+.dx-text-heading-3 {
+    padding-bottom: var(--dx-g-spacing-xl);
+}
+
+.dx-text-body-2 {
+    padding-left: var(--dx-g-spacing-xl);
+}
+
+.option:not(:last-child) .dx-text-body-2 {
+    padding-bottom: var(--dx-g-spacing-xl);
+}
+
+.icon {
+    color: #3ba755;
+    padding-right: var(--dx-g-spacing-md);
+    padding-top: var(--dx-g-spacing-2xs);
+}

package/src/modules/dx/featuresList/featuresList.html

@@ -0,0 +1,20 @@
+<template>
+    <div class="container">
+        <h2 if:true={title} class="dx-text-heading-3">{title}</h2>
+        <ul>
+            <template for:each={options} for:item="option">
+                <li key={option.id} class="option">
+                    <div class="dx-text-heading-5">
+                        <dx-icon
+                            class="icon"
+                            size="small"
+                            symbol="check"
+                        ></dx-icon>
+                        {option.title}
+                    </div>
+                    <div class="dx-text-body-2">{option.description}</div>
+                </li>
+            </template>
+        </ul>
+    </div>
+</template>

package/src/modules/dx/featuresList/featuresList.ts

@@ -0,0 +1,21 @@
+import { LightningElement, api } from "lwc";
+import { FeatureItem } from "typings/custom";
+import { toJson } from "utils/normalizers";
+
+/**
+ * @element dx-features-list
+ */
+
+export default class FeaturesList extends LightningElement {
+    @api title!: string;
+
+    @api get options(): Array<FeatureItem> {
+        return this._options;
+    }
+
+    set options(value: Array<FeatureItem>) {
+        this._options = toJson(value);
+    }
+
+    private _options!: Array<FeatureItem>;
+}