feat(cxl-ui): <cxl-marketing-nav> add descriptions

https://app.clickup.com/t/2x7c7dv
conversionxl · Sep 8, 2022 · 7d20e64 · 7d20e64
1 parent b981a1d
commit 7d20e64
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 49 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss
@@ -8,3 +8,7 @@
 ::slotted(a:not(:hover)) {
   text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
 }
+
+::slotted(.vaadin-context-menu-item--description) {
+  font-family: var(--lumo-font-family);
+}
diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js
@@ -1,5 +1,6 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, render } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import '@conversionxl/cxl-lumo-styles';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
@@ -225,6 +226,16 @@ export class CXLMarketingNavElement extends LitElement {
 
         menuItem.appendChild(link);
 
+        // Add `description` element, if WordPress Menu Item has `description` field set.
+        if (item.description) {
+          const descriptionItem = document.createElement('div');
+
+          descriptionItem.classList.add('vaadin-context-menu-item--description');
+          render(html`${unsafeHTML(item.description)}`, descriptionItem);
+
+          menuItem.appendChild(descriptionItem);
+        }
+
         // eslint-disable-next-line no-param-reassign
         self[i] = { component: menuItem };
       }

diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.data.json b/packages/storybook/cxl-ui/cxl-marketing-nav.data.json
@@ -436,60 +436,60 @@
       "children": [
         {
           "depth": 1,
-          "text": "Account details",
+          "text": "Go to My Account",
+          "component": "a",
+          "href": "http:\/\/localhost:8080\/my-account\/",
+          "id": 87,
+          "parent": 41
+        },
+        {
+          "component": "hr"
+        },
+        {
+          "depth": 1,
+          "text": "Subscriptions",
+          "component": "a",
+          "href": "http:\/\/localhost:8080\/my-account\/subscriptions\/",
           "id": 88,
-          "parent": 41,
-          "children": [
-            {
-              "depth": 2,
-              "text": "Account hello!",
-              "component": "a",
-              "href": "http:\/\/localhost:8080\/hello-world\/",
-              "id": 92,
-              "parent": 88
-            },
-            {
-              "depth": 2,
-              "text": "Addresses",
-              "component": "a",
-              "href": "http:\/\/localhost:8080\/edit-address\/",
-              "id": 89,
-              "parent": 88,
-              "children": [
-                {
-                  "depth": 3,
-                  "text": "<span data-post-status=\"publish\"><\/span>Hello world!",
-                  "component": "a",
-                  "href": "http:\/\/localhost:8080\/hello-world\/",
-                  "id": 93,
-                  "parent": 89
-                },
-                {
-                  "depth": 3,
-                  "text": "Downloads",
-                  "component": "a",
-                  "href": "http:\/\/localhost:8080\/downloads\/",
-                  "id": 90,
-                  "parent": 89
-                }
-              ]
-            },
-            {
-              "depth": 2,
-              "text": "<span data-post-status=\"publish\"><\/span>Hello world!",
-              "component": "a",
-              "href": "http:\/\/localhost:8080\/hello-world\/",
-              "id": 91,
-              "parent": 88
-            }
-          ]
+          "parent": 41
         },
         {
           "depth": 1,
           "text": "Orders",
           "component": "a",
-          "href": "http:\/\/localhost:8080\/orders\/",
-          "id": 87,
+          "href": "http:\/\/localhost:8080\/my-account\/orders\/",
+          "id": 89,
+          "parent": 41
+        },
+        {
+          "depth": 1,
+          "text": "Account details",
+          "component": "a",
+          "href": "http:\/\/localhost:8080\/my-account\/edit-account\/",
+          "id": 90,
+          "parent": 41
+        },
+        {
+          "component": "hr"
+        },
+        {
+          "depth": 1,
+          "text": "Skip Trial Period",
+          "description": "Gain unlimited instant access to all CXL features.",
+          "component": "a",
+          "href": "http:\/\/localhost:8080\/my-account\/skip-trial-period\/",
+          "id": 90,
+          "parent": 41
+        },
+        {
+          "component": "hr"
+        },
+        {
+          "depth": 1,
+          "text": "Logout",
+          "component": "a",
+          "href": "http:\/\/localhost:8080\/my-account\/logout\/",
+          "id": 91,
           "parent": 41
         }
       ]