@salesforcedevs/dx-components - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3-beta.0

package.json

 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.1.2",
+    "version": "0.1.3-beta.0",
     "description": "DX Lightning web components",
@@ -5,0 +5,0 @@ "license": "MIT",

src/modules/dx/helmet/__tests__/helmet.test.ts

 import Helmet from "dx/helmet";
-import Breadcrumbs from "dx/breadcrumbs";
 import { createRenderComponent } from "utils/tests";
@@ -10,44 +9,28 @@ import { HelmetVariant } from "typings/custom-new";
 describe("dx-helmet", () => {
-    it("renders the breadcrumbs", () => {
-        const defaultTitle = "Salesforce";
-        const expectedBreadcrumbs = [
-            { href: "https://www.heroku.com", label: "Heroku" }
-        ];
+    it("renders title according to the api", () => {
+        const title = "Super Cool Title";
+        const component = render({ title });
 
-        const component = render({ breadcrumbs: expectedBreadcrumbs });
+        const header: HTMLElement = component.shadowRoot.querySelector("h7");
+        expect(header.textContent).toBe(title);
 
-        const div: HTMLElement = component.shadowRoot.querySelector("div");
-        expect(div).not.toBeNull();
-        expect(div.classList).toHaveLength(2);
-        expect(div.classList).toContain("helmet");
-        expect(div.classList).toContain("variant--neutral");
+        const links: HTMLElement[] = component.shadowRoot.querySelectorAll("a");
+        expect(links.length).toBe(1);
 
-        const breadcrumbs: Breadcrumbs = component.shadowRoot.querySelector(
-            "dx-breadcrumbs"
-        );
-        expect(breadcrumbs).not.toBeNull();
-        expect(breadcrumbs.title).toBe(defaultTitle);
-        expect(breadcrumbs.breadcrumbs).toHaveLength(1);
-        expect(breadcrumbs.breadcrumbs[0]).toHaveProperty(
-            "href",
-            expectedBreadcrumbs[0].href
-        );
-        expect(breadcrumbs.breadcrumbs[0]).toHaveProperty(
-            "label",
-            expectedBreadcrumbs[0].label
-        );
-
         return expect(component).toBeAccessible();
     });
 
-    it("renders title according to the api", () => {
-        const title = "Super Cool Title";
-        const component = render({ title });
+    it("renders second link if currentPropertyHref is passed in through the api", () => {
+        const currentPropertyTitle = "Mulesoft";
+        const currentPropertyHref = "https://developer.mulesoft.com";
+        const component = render({ currentPropertyTitle, currentPropertyHref });
 
-        const breadcrumbs: Breadcrumbs = component.shadowRoot.querySelector(
-            "dx-breadcrumbs"
+        const links: HTMLElement[] = component.shadowRoot.querySelectorAll("a");
+        expect(links.length).toBe(2);
+
+        const currentPropertyLink: HTMLElement = links[1];
+        expect(currentPropertyLink.textContent).toBe(currentPropertyTitle);
+        expect(currentPropertyLink.getAttribute("href")).toBe(
+            currentPropertyHref
         );
-        expect(breadcrumbs).not.toBeNull();
-        expect(breadcrumbs.title).toBe(title);
-        expect(breadcrumbs.breadcrumbs).toHaveLength(0);
 
@@ -54,0 +37,0 @@ return expect(component).toBeAccessible();

src/modules/dx/helmet/helmet.stories.ts

@@ -16,13 +16,5 @@ import { html } from "lit-html";
 
-const mockBreadcrumbs = JSON.stringify([
-    { href: "https://www.heroku.com", label: "Heroku" }
-]);
-
 export const Clear = () => html`
     ${markup}
-    <dx-helmet
-        breadcrumbs="${mockBreadcrumbs}"
-        title="Salesforce Developers"
-        variant="clear"
-    ></dx-helmet>
+    <dx-helmet title="Salesforce Developers" variant="clear"></dx-helmet>
 `;
@@ -32,7 +24,3 @@
     ${markup}
-    <dx-helmet
-        breadcrumbs="${mockBreadcrumbs}"
-        title="Salesforce Developers"
-        variant="dark"
-    ></dx-helmet>
+    <dx-helmet title="Salesforce Developers" variant="dark"></dx-helmet>
 `;
@@ -42,7 +30,3 @@
     ${markup}
-    <dx-helmet
-        breadcrumbs="${mockBreadcrumbs}"
-        title="Salesforce Developers"
-        variant="light"
-    ></dx-helmet>
+    <dx-helmet title="Salesforce Developers" variant="light"></dx-helmet>
 `;
@@ -52,7 +36,13 @@
     ${markup}
+    <dx-helmet title="Salesforce Developers" variant="neutral"></dx-helmet>
+`;
+
+export const NeutralWithCurrentPropertyLink = () => html`
+    ${markup}
     <dx-helmet
-        breadcrumbs="${mockBreadcrumbs}"
         title="Salesforce Developers"
+        current-property-title="Mulesoft"
+        current-property-href="https://developer.mulesoft.com/"
         variant="neutral"
     ></dx-helmet>
 `;

src/modules/dx/helmet/helmet.ts

 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { HelmetVariant, Breadcrumb } from "typings/custom-new";
+import { HelmetVariant } from "typings/custom-new";
 
 export default class Helmet extends LightningElement {
-    private _breadcrumbs: Breadcrumb[] = [];
     @api title: string = "Salesforce";
+    @api currentPropertyTitle: string = "Heroku";
+    @api currentPropertyHref?: string;
     @api variant: HelmetVariant = "neutral";
 
-    @api
-    get breadcrumbs() {
-        return this._breadcrumbs;
+    get currentPropertyAlt() {
+        return `Link to {this.title}`;
     }
-    set breadcrumbs(value) {
-        this._breadcrumbs = value;
-    }
 
@@ -18,0 +15,0 @@ get className() {

No alert changes

Improved metrics

Total package byte prevSize

1830991

increased by0.12%

Lines of code

13714

increased by0.03%

No dependency changes