@salesforcedevs/dx-components 0.35.0 → 0.38.0

package/lwc.config.json

@@ -18,6 +18,7 @@
         "dx/cardPodcastEpisodeProvider",
         "dx/cardSmall",
         "dx/cardTrailheadModule",
+        "dx/cardTrial",
         "dx/cardVideoPreview",
         "dx/checkbox",
         "dx/checkboxNative",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.35.0",
+    "version": "0.38.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -26,5 +26,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "f7fc8ed1e4ba14038343beeeed60324f50622117"
+    "gitHead": "8aa0d5f09d65166284bdb76e598fb69031b76049"
 }

package/src/modules/dx/cardTrial/cardTrial.css

@@ -0,0 +1,71 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/card";
+
+.card-trial {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.card-trial.has-image {
+    padding-bottom: 80px;
+}
+
+dx-icon-badge.badge-main {
+    --dx-c-icon-badge-icon-size: var(--dx-g-spacing-mlg);
+    --dx-c-icon-badge-size: var(--dx-g-spacing-2xl);
+
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.label {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+dx-card-title {
+    margin-bottom: var(--dx-g-spacing-xs);
+}
+
+.body {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.terms {
+    font-weight: var(--dx-g-font-bold);
+}
+
+dx-hr {
+    --dx-c-hr-padding-horizontal: 0;
+
+    width: 100%;
+}
+
+.details {
+    display: flex;
+    flex-direction: column;
+}
+
+.detail {
+    display: flex;
+    flex-direction: row;
+}
+
+.detail:not(:last-of-type) {
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
+.detail dx-icon-badge {
+    --dx-c-icon-badge-icon-size: 10px;
+    --dx-c-icon-badge-size: 18px;
+    --dx-c-icon-badge-color: var(--dx-g-blue-vibrant-40);
+
+    padding-right: var(--dx-g-spacing-sm);
+}
+
+img {
+    position: absolute;
+    bottom: 0;
+    right: var(--dx-g-spacing-mlg);
+    width: var(--dx-g-spacing-6xl);
+}

package/src/modules/dx/cardTrial/cardTrial.html

@@ -0,0 +1,31 @@
+<template>
+    <a class={className} href={href} target={target}>
+        <dx-icon-badge
+            class="badge-main"
+            background-color={badgeBackgroundColor}
+            symbol={badgeSymbol}
+            sprite={badgeSprite}
+        ></dx-icon-badge>
+        <span class="label dx-text-label-3">{label}</span>
+        <dx-card-title
+            href={href}
+            target={target}
+            title={title}
+        ></dx-card-title>
+        <p class="body dx-text-body-3 static-font">{body}</p>
+        <span class="terms dx-text-body-3 static-font">{terms}</span>
+        <dx-hr spacing="md"></dx-hr>
+        <ul class="details">
+            <template for:each={details} for:item="detail">
+                <li class="detail" key={detail}>
+                    <dx-icon-badge
+                        background-color={badgeBackgroundColor}
+                        symbol="check"
+                    ></dx-icon-badge>
+                    <span class="detail-text dx-text-body-4">{detail}</span>
+                </li>
+            </template>
+        </ul>
+        <img if:true={imgSrc} src={imgSrc} alt="" />
+    </a>
+</template>

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -0,0 +1,34 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toJson } from "utils/normalizers";
+
+export default class CardTrial extends LightningElement {
+    @api badgeBackgroundColor?: string = "indigo-vibrant-90";
+    @api badgeSprite?: string = "salesforcebrand";
+    @api badgeSymbol!: string;
+    @api body!: string;
+    @api href!: string;
+    @api label!: string;
+    @api imgSrc?: string;
+    @api target?: string;
+    @api terms!: string;
+    @api title!: string;
+    @api
+    get details() {
+        return this._details;
+    }
+    set details(value) {
+        this._details = toJson(value);
+    }
+
+    private _details!: string[];
+
+    private get className() {
+        return cx(
+            "card-trial",
+            "dx-card-base",
+            "dx-card-base_section-vertical",
+            this.imgSrc && "has-image"
+        );
+    }
+}

package/src/modules/dx/hr/hr.css

@@ -13,6 +13,7 @@ h2 {
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     color: var(--dx-g-blue-vibrant-20);
+    text-transform: uppercase;
     letter-spacing: 0;
     line-height: 18px;
 }

package/src/modules/helpers/card/card.css

@@ -233,26 +233,26 @@ a.dx-card-base:hover dx-card-title {
         -webkit-line-clamp: 3;
     }
 
-    .dx-text-body-2 {
+    .dx-text-body-2:not(.static-font) {
         font-size: var(--dx-g-text-sm);
         line-height: 20px;
     }
 
-    .dx-text-body-3 {
+    .dx-text-body-3:not(.static-font) {
         font-size: var(--dx-g-text-xs);
         line-height: 16px;
     }
 
-    .dx-text-heading-3 {
+    .dx-text-heading-3:not(.static-font) {
         font-size: 24px;
         line-height: 28px;
     }
 
-    .dx-text-heading-5 {
+    .dx-text-heading-5:not(.static-font) {
         font-size: 12px;
     }
 
-    .dx-text-heading-6 {
+    .dx-text-heading-6:not(.static-font) {
         font-size: var(--dx-g-text-sm);
     }
 }