@salesforcedevs/mrkt-components 0.0.0-alpha.0

package/src/modules/mrkt/tdxSection/tdxSection.css

@@ -0,0 +1,115 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-g-text-heading-color: white;
+    --padding-top: 54px;
+    --padding-bottom: 74px;
+}
+
+.container {
+    background-color: var(--dx-g-indigo-vibrant-20);
+    display: flex;
+    justify-content: space-between;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    margin-top: 120px;
+}
+
+.content {
+    flex-grow: 1;
+    margin: var(--padding-top) 0 var(--padding-bottom) 0;
+}
+
+.content-body {
+    color: white;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-base);
+    margin-top: var(--dx-g-spacing-smd);
+}
+
+.content-info {
+    margin-top: 30px;
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
+.image-container {
+    width: 550px;
+    flex-shrink: 0;
+    position: relative;
+}
+
+img {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+
+@media screen and (max-width: 1024px) {
+    :host {
+        --padding-top: 38px;
+        --padding-bottom: 72px;
+    }
+
+    .container {
+        align-items: center;
+        margin-top: 0;
+    }
+
+    .content {
+        padding: 0 var(--dx-g-page-padding-horizontal);
+        width: auto;
+    }
+
+    .content-title {
+        font-size: var(--dx-g-text-3xl);
+    }
+
+    .image-container {
+        height: unset;
+        padding: var(--dx-g-spacing-sm) 0;
+        width: 400px;
+    }
+
+    img {
+        position: relative;
+        margin: 0 auto;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        flex-direction: column-reverse;
+        text-align: center;
+        margin-top: 170px;
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-top: 0;
+    }
+
+    .content-title {
+        font-size: var(--dx-g-text-3xl);
+    }
+
+    .content-info {
+        margin-top: var(--dx-g-spacing-lg);
+    }
+
+    .image-container {
+        height: 212px;
+        width: 100%;
+        max-width: 381px;
+        padding: unset;
+    }
+
+    img {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 100%;
+    }
+}

package/src/modules/mrkt/tdxSection/tdxSection.html

@@ -0,0 +1,14 @@
+<template>
+    <div class="container">
+        <div class="content">
+            <h3 class="content-title dx-text-heading-2b">{title}</h3>
+            <h4 class="dx-text-heading-4">{subtitle}</h4>
+            <p class="content-body">{body}</p>
+            <p class="content-info dx-text-heading-6">{info}</p>
+            <dx-button href={buttonHref}>{buttonLabel}</dx-button>
+        </div>
+        <div class="image-container">
+            <img src={imgSrc} alt={imgAlt} />
+        </div>
+    </div>
+</template>

package/src/modules/mrkt/tdxSection/tdxSection.ts

@@ -0,0 +1,12 @@
+import { api, LightningElement } from "lwc";
+
+export default class TdxSection extends LightningElement {
+    @api title!: string;
+    @api subtitle!: string;
+    @api body!: string;
+    @api info!: string;
+    @api buttonLabel!: string;
+    @api buttonHref!: string;
+    @api imgSrc!: string;
+    @api imgAlt!: string;
+}

package/src/modules/mrkt/threeColListSection/threeColListSection.css

@@ -0,0 +1,102 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --padding-vertical: 56px;
+    --mrkt-c-three-col-list-section-padding-top: var(--padding-vertical);
+}
+
+.three-col-list-section {
+    width: 100%;
+    padding-top: var(--mrkt-c-three-col-list-section-padding-top);
+}
+
+.three-col-list-section.dark {
+    background: var(--dx-g-indigo-vibrant-15);
+}
+
+.item-grid-padding {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+}
+
+.item-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: var(--dx-g-spacing-xl) var(--dx-g-spacing-3xl);
+    justify-items: center;
+    width: 100%;
+    max-width: 1024px;
+}
+
+.item {
+    width: 100%;
+    max-width: 450px;
+    display: grid;
+    grid-template-areas:
+        "icon"
+        "title"
+        "subtitle";
+    grid-gap: var(--dx-g-spacing-sm);
+    justify-items: center;
+}
+
+dx-icon-badge {
+    --dx-c-icon-badge-size: 60px;
+
+    grid-area: icon;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.title,
+.subtitle {
+    text-align: center;
+}
+
+.title {
+    grid-area: title;
+}
+
+.subtitle {
+    grid-area: subtitle;
+}
+
+.three-col-list-section.dark .title,
+.three-col-list-section.dark .subtitle {
+    color: white;
+}
+
+.img-container {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    z-index: 2;
+    margin-top: var(--dx-g-spacing-3xl);
+    margin-bottom: -35px;
+}
+
+img {
+    width: 250px;
+    aspect-ratio: 25 / 14;
+}
+
+@media (max-width: 1024px) {
+    .img-container {
+        margin-bottom: -28px;
+    }
+
+    img {
+        width: 200px;
+    }
+}
+
+@media (max-width: 768px) {
+    .item-grid {
+        grid-template-columns: 1fr;
+    }
+}

package/src/modules/mrkt/threeColListSection/threeColListSection.html

@@ -0,0 +1,27 @@
+<template>
+    <div class="three-col-list-section">
+        <div class="item-grid-padding">
+            <div class="item-grid">
+                <template for:each={items} for:item="item">
+                    <div class="item" key={item.title}>
+                        <dx-icon-badge
+                            symbol={item.iconSymbol}
+                            sprite={item.iconSprite}
+                            color={item.iconColor}
+                            background-color={item.iconBackgroundColor}
+                            background-size="large"
+                        ></dx-icon-badge>
+                        <h3 class="title dx-text-heading-4b">{item.title}</h3>
+                        <span class="subtitle dx-text-body-2">
+                            {item.subtitle}
+                        </span>
+                    </div>
+                </template>
+            </div>
+        </div>
+        <div class="img-container">
+            <img src="/assets/svg/mrkt-cta-section-img-left.svg" alt="" />
+            <img src="/assets/svg/mrkt-cta-section-img-right.svg" alt="" />
+        </div>
+    </div>
+</template>

package/src/modules/mrkt/threeColListSection/threeColListSection.ts

@@ -0,0 +1,24 @@
+import { api, LightningElement } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+
+type Item = {
+    title: string;
+    subtitle: string;
+    iconSymbol: string;
+    iconSprite: string;
+    iconColor: string;
+    iconBackgroundColor: string;
+};
+
+export default class ThreeColListSection extends LightningElement {
+    @api dark?: boolean;
+    @api
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._items = toJson(value);
+    }
+
+    private _items!: Item[];
+}

package/src/modules/mrkt/twoColListSection/twoColListSection.css

@@ -0,0 +1,65 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --padding-vertical: 56px;
+    --mrkt-c-two-col-list-section-padding-top: var(--padding-vertical);
+    --mrkt-c-two-col-list-section-padding-bottom: var(--padding-vertical);
+}
+
+.two-col-list-section {
+    padding: var(--mrkt-c-two-col-list-section-padding-top)
+        var(--dx-g-page-padding-horizontal)
+        var(--mrkt-c-two-col-list-section-padding-bottom)
+        var(--dx-g-page-padding-horizontal);
+    display: flex;
+}
+
+.two-col-list-section.dark {
+    background: var(--dx-g-indigo-vibrant-15);
+}
+
+.item-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--dx-g-spacing-3xl) var(--dx-g-spacing-6xl);
+    width: max-content;
+    margin: auto;
+}
+
+.item {
+    width: 100%;
+    max-width: 414px;
+    display: grid;
+    grid-template-areas:
+        "icon title"
+        "icon subtitle";
+    grid-template-columns: min-content auto;
+    grid-template-rows: min-content;
+    grid-gap: var(--dx-g-spacing-xs) var(--dx-g-spacing-mlg);
+}
+
+dx-icon-badge {
+    --dx-c-icon-badge-size: 60px;
+
+    grid-area: icon;
+}
+
+.title {
+    grid-area: title;
+}
+
+.subtitle {
+    grid-area: subtitle;
+}
+
+.two-col-list-section.dark .title,
+.two-col-list-section.dark .subtitle {
+    color: white;
+}
+
+@media (max-width: 768px) {
+    .item-grid {
+        grid-template-columns: 1fr;
+    }
+}

package/src/modules/mrkt/twoColListSection/twoColListSection.html

@@ -0,0 +1,19 @@
+<template>
+    <div class={className}>
+        <div class="item-grid">
+            <template for:each={items} for:item="item">
+                <div class="item" key={item.title}>
+                    <dx-icon-badge
+                        symbol={item.iconSymbol}
+                        sprite={item.iconSprite}
+                        color={item.iconColor}
+                        background-color={item.iconBackgroundColor}
+                        background-size="large"
+                    ></dx-icon-badge>
+                    <h3 class="title dx-text-heading-4b">{item.title}</h3>
+                    <span class="subtitle dx-text-body-2">{item.subtitle}</span>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>

package/src/modules/mrkt/twoColListSection/twoColListSection.ts

@@ -0,0 +1,29 @@
+import { api, LightningElement } from "lwc";
+import cx from "classnames";
+import { toJson } from "dxUtils/normalizers";
+
+type Item = {
+    title: string;
+    subtitle: string;
+    iconSymbol: string;
+    iconSprite: string;
+    iconColor: string;
+    iconBackgroundColor: string;
+};
+
+export default class TwoColListSection extends LightningElement {
+    @api dark?: boolean;
+    @api
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._items = toJson(value);
+    }
+
+    private _items!: Item[];
+
+    private get className(): string {
+        return cx("two-col-list-section", this.dark && "dark");
+    }
+}

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.css

@@ -0,0 +1,143 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --padding-vertical: 108px;
+    --mrkt-c-two-col-list-section-padding-top: var(--padding-vertical);
+    --mrkt-c-two-col-list-section-padding-bottom: var(--padding-vertical);
+}
+
+.two-col-panel-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: var(--mrkt-c-two-col-list-section-padding-top)
+        var(--dx-g-page-padding-horizontal)
+        var(--mrkt-c-two-col-list-section-padding-bottom)
+        var(--dx-g-page-padding-horizontal);
+    overflow: hidden;
+}
+
+.text-container {
+    display: flex;
+    flex-direction: column;
+    padding-right: 80px;
+    width: 50%;
+    z-index: 1;
+}
+
+.text-container > * {
+    max-width: 500px;
+}
+
+.text-container > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+dx-button {
+    margin-top: var(--dx-g-spacing-sm);
+}
+
+.card-container {
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.subtitle {
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+.dark .subtitle,
+.dark .title,
+.dark .body {
+    color: white;
+}
+
+img {
+    position: absolute;
+}
+
+.graphic-1 {
+    width: 306px;
+    bottom: -32px;
+    left: -106px;
+    z-index: 0;
+}
+
+.graphic-2 {
+    width: 170px;
+    top: 15px;
+    left: calc(100% - 38px);
+    z-index: 1;
+}
+
+.graphic-3 {
+    width: 142px;
+    right: -38px;
+    bottom: -38px;
+    z-index: 0;
+}
+
+.graphic-swoop {
+    position: relative;
+    width: 100%;
+}
+
+.dark {
+    background: var(--dx-g-indigo-vibrant-15);
+}
+
+@media (max-width: 1024px) {
+    :host {
+        --padding-vertical: var(--dx-g-spacing-3xl);
+    }
+
+    .title {
+        font-size: var(--dx-g-text-2xl);
+    }
+
+    .body {
+        font-size: var(--dx-g-text-sm);
+        line-height: 20px;
+    }
+
+    .text-container {
+        max-width: 440px;
+    }
+
+    .graphic-1 {
+        width: 220px;
+        left: -80px;
+        top: 30px;
+        z-index: 0;
+    }
+
+    .graphic-2,
+    .graphic-3 {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .two-col-panel-section {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .text-container {
+        width: 100%;
+        text-align: center;
+        justify-content: center;
+        align-items: center;
+        padding-right: unset;
+        padding-bottom: 72px;
+    }
+
+    .graphic-1 {
+        display: none;
+    }
+}

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.html

@@ -0,0 +1,55 @@
+<template>
+    <div class={className}>
+        <div class="text-container">
+            <span class="subtitle dx-text-label-4">{subtitle}</span>
+            <h2 class="title dx-text-heading-3">{title}</h2>
+            <p class="body dx-text-body-2">{body}</p>
+            <dx-button href={buttonHref}>{buttonText}</dx-button>
+        </div>
+        <div class="card-container">
+            <img
+                if:false={light}
+                class="graphic-1"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-1.svg"
+                alt=""
+            />
+            <img
+                if:false={light}
+                class="graphic-2"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-2.svg"
+                alt=""
+            />
+            <img
+                if:false={light}
+                class="graphic-3"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-3.svg"
+                alt=""
+            />
+            <img
+                if:true={light}
+                class="graphic-1"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-1-light.svg"
+                alt=""
+            />
+            <img
+                if:true={light}
+                class="graphic-2"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-2-light.svg"
+                alt=""
+            />
+            <img
+                if:true={light}
+                class="graphic-3"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-3-light.svg"
+                alt=""
+            />
+            <slot></slot>
+        </div>
+    </div>
+    <img
+        if:false={light}
+        class="graphic-swoop"
+        src="/assets/svg/mrkt-two-col-panel-section-swoop.svg"
+        alt=""
+    />
+</template>

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.ts

@@ -0,0 +1,15 @@
+import { api, LightningElement } from "lwc";
+import cx from "classnames";
+
+export default class TwoColPanelSection extends LightningElement {
+    @api body!: string;
+    @api buttonHref!: string;
+    @api buttonText!: string;
+    @api subtitle!: string;
+    @api title!: string;
+    @api light?: boolean = false;
+
+    private get className(): string {
+        return cx("two-col-panel-section", !this.light && "dark");
+    }
+}

package/src/modules/mrkt/twoColSection/twoColSection.css

@@ -0,0 +1,67 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --padding-vertical: 56px;
+    --mrkt-c-two-col-section-padding-top: var(--padding-vertical);
+    --mrkt-c-two-col-section-padding-bottom: var(--padding-vertical);
+}
+
+.two-col-section {
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    padding: var(--mrkt-c-two-col-section-padding-top)
+        var(--dx-g-page-padding-horizontal)
+        var(--mrkt-c-two-col-section-padding-bottom)
+        var(--dx-g-page-padding-horizontal);
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    align-items: center;
+}
+
+.two-col-section.dark {
+    background: var(--dx-g-indigo-vibrant-15);
+}
+
+img {
+    width: 50%;
+    max-width: 400px;
+    flex-grow: 1;
+    margin-right: 60px;
+}
+
+.text-container {
+    flex-grow: 1;
+}
+
+h2 {
+    padding-bottom: var(--dx-g-spacing-smd);
+}
+
+.two-col-section.dark h2,
+.two-col-section.dark span {
+    color: white;
+}
+
+@media (max-width: 1024px) {
+    img {
+        margin-right: var(--dx-g-spacing-2xl);
+    }
+}
+
+@media (max-width: 768px) {
+    .two-col-section {
+        flex-direction: column;
+    }
+
+    .text-container {
+        width: 100%;
+        text-align: center;
+    }
+
+    img {
+        width: 100%;
+        margin: 0 auto 56px auto;
+    }
+}

package/src/modules/mrkt/twoColSection/twoColSection.html

@@ -0,0 +1,9 @@
+<template>
+    <div class={className}>
+        <img src={imgSrc} alt={imgAlt} />
+        <div class="text-container">
+            <h2 class="dx-text-heading-4">{title}</h2>
+            <span class="dx-text-body-2">{subtitle}</span>
+        </div>
+    </div>
+</template>