FLOW-947 | f-document-viewer (#183)

* FLOW-947 f-document-viewer * FLOW-947 f-document-viewer test cases * FLOW-947 version change * FLOW-947 sonar colud errors * FLOW-947 test * FLOW-947 changes * FLOW-947 f-document-viewer * FLOW-947 f-document-viewer test cases * FLOW-947 sonar colud errors * FLOW-947 build error * FLOW-947 build error * FLOW-947 changes * FLOW-947 changes * FLOW-947 remove unsed function * FLOW-947 remove unsed function * FLOW-947 required field addition * FLOW-947 test cases * FLOW-947 tets fixed * FLOW-947 test cases --------- Co-authored-by: vikas-cldcvr <[email protected]>
ollionorg · Nov 6, 2023 · 801548c · 801548c
1 parent 3c9ef64
commit 801548c
Show file tree

Hide file tree

Showing 14 changed files with 1,210 additions and 2 deletions.
diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.2.0] - 2023-10-30
+
+### Features
+
+- `f-document-viewer` : component designed for document viewing, accepting JSON schema as input.
+
 ## [2.1.8] - 2023-10-20
 
 ### Patch Changes

diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-core",
-  "version": "2.1.8",
+  "version": "2.2.0",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

diff --git a/packages/flow-core/src/components/f-accordion/f-accordion.ts b/packages/flow-core/src/components/f-accordion/f-accordion.ts
@@ -173,6 +173,7 @@ export class FAccordion extends FRoot {
 					.gap=${this.iconPlacement === "left" ? "medium" : "auto"}
 					width="100%"
 					class="f-accordion-header"
+					part="accordion-header"
 					.padding=${this.headerPadding}
 					clickable
 					@mouseenter=${() => this.stateChange("enter")}
@@ -186,6 +187,7 @@ export class FAccordion extends FRoot {
 				</f-div>
 				<f-div
 					class="f-accordion"
+					part="accordion-body"
 					?data-accordion-open=${this.open}
 					direction="column"
 					.padding=${this.bodyPadding}

diff --git a/packages/flow-core/src/components/f-div/f-div-global.scss b/packages/flow-core/src/components/f-div/f-div-global.scss
@@ -321,7 +321,7 @@ f-div {
 		> f-div[height="fill-container"] {
 			height: 100%;
 		}
-		> f-accordion{
+		> f-accordion {
 			max-width: 100%;
 		}
 	}

diff --git a/packages/flow-core/src/components/f-document-viewer/f-document-viewer-global.scss b/packages/flow-core/src/components/f-document-viewer/f-document-viewer-global.scss
@@ -0,0 +1,15 @@
+f-div[direction="column"] {
+	> f-document-viewer {
+		flex: 1 1;
+		max-height: 100%;
+		width: 100%;
+	}
+}
+
+f-div[direction="row"] {
+	> f-document-viewer {
+		flex: 1 1;
+		max-width: 100%;
+		height: 100%;
+	}
+}
diff --git a/packages/flow-core/src/components/f-document-viewer/f-document-viewer.scss b/packages/flow-core/src/components/f-document-viewer/f-document-viewer.scss
@@ -0,0 +1,137 @@
+// common mixins imported from this file
+@import "./../../mixins/scss/mixins";
+
+:host {
+	@keyframes slide-notch-right {
+		from {
+			left: 0px;
+		}
+		to {
+			left: 300px;
+		}
+	}
+
+	@keyframes slide-notch-left {
+		from {
+			left: 300px;
+		}
+		to {
+			left: 0px;
+		}
+	}
+
+	@keyframes slide-right {
+		from {
+			width: 0px;
+		}
+		to {
+			width: 300px;
+		}
+	}
+
+	@keyframes slide-left {
+		from {
+			width: 300px;
+		}
+		to {
+			width: 0px;
+		}
+	}
+
+	f-accordion::part(accordion-header) {
+		padding: 12px 4px 12px 12px !important;
+		justify-content: flex-start;
+		align-items: flex-start;
+	}
+	f-accordion[icon="none"]::part(accordion-header) {
+		padding: 12px 4px 12px 46px !important;
+		justify-content: flex-start;
+		align-items: flex-start;
+	}
+	f-accordion::part(accordion-body) {
+		padding: 0px 0px 0px 12px !important;
+	}
+	#jumplinks-wrapper {
+		overflow-x: hidden !important;
+	}
+	.jump-links {
+		overflow-x: hidden !important;
+	}
+	.custom-body-padding {
+		padding: 4px 4px 4px 46px !important;
+	}
+
+	.notch {
+		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
+		border-radius: 0px 8px 8px 0px !important;
+		margin-top: 12px;
+		background-color: var(--color-neutral-subtle) !important;
+	}
+
+	.notch-icon[data-column-open="true"] {
+		transform: rotate(0deg);
+		transition: transform 0.25s linear;
+	}
+
+	.notch-icon[data-column-open="false"] {
+		transform: rotate(180deg);
+		transition: transform 0.25s linear;
+	}
+	.jumplinks-expanded {
+		width: inherit;
+	}
+
+	.jumplinks-collapsed {
+		width: inherit;
+	}
+
+	@media (min-width: 768px) {
+		.jumplinks-expanded {
+			animation: 0.25s ease-out 0s 1 slide-right;
+		}
+		.jumplinks-collapsed {
+			width: inherit;
+			animation: 0.25s ease-out 0s 1 slide-left;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.jumplinks-collapsed {
+			position: fixed !important;
+			width: inherit;
+			animation: 0.25s ease-out 0s 1 slide-left;
+			z-index: 1000;
+		}
+		.jumplinks-expanded {
+			position: fixed !important;
+			animation: 0.25s ease-out 0s 1 slide-right;
+			z-index: 1000;
+			border-radius: 0px 8px 8px 0px;
+			height: -webkit-fill-available !important;
+		}
+		.notch {
+			position: relative;
+			z-index: 1000;
+		}
+		.notch[data-column-open="true"] {
+			left: 300px;
+			animation: 0.25s ease-out 0s 1 slide-notch-right;
+		}
+		.notch[data-column-open="false"] {
+			left: 0px;
+			animation: 0.25s ease-out 0s 1 slide-notch-left;
+		}
+		.jumplinks-highlight[data-column-open="true"][data-jump-links="true"] {
+			&::before {
+				content: "";
+				position: fixed;
+				width: 100vw;
+				height: 100vh;
+				background-color: rgba(0, 0, 0, 0.5);
+				z-index: 10;
+				top: 0;
+				left: 0;
+			}
+		}
+	}
+}
diff --git a/packages/flow-core/src/components/f-document-viewer/f-document-viewer.test.ts b/packages/flow-core/src/components/f-document-viewer/f-document-viewer.test.ts
@@ -0,0 +1,143 @@
+import { html, fixture, expect, oneEvent } from "@open-wc/testing";
+import {
+	FDocumentViewer,
+	FDocViewerContent,
+	FDocumentStatement,
+	FSelect,
+	FAccordion,
+	FDiv,
+	FText,
+	FSearch
+} from "@cldcvr/flow-core";
+import { faker } from "@faker-js/faker";
+
+export default function getFakeDocumentContent(items = 2, levels = 2): FDocViewerContent {
+	const doc = {} as FDocViewerContent;
+	for (let level = 0; level < items; level++) {
+		doc[`${level + 1}.`] = createDocContentObject(levels, level + 1, "heading");
+	}
+	return doc;
+}
+
+function createDocContentObject(
+	levels: number,
+	index: number | string,
+	type: "heading" | "para" = "para"
+): FDocumentStatement {
+	const content = {} as FDocViewerContent;
+	const doc = {
+		title: type === "heading" ? faker.lorem.words(6) : faker.lorem.sentence(100),
+		type: type,
+		open: true
+	} as FDocumentStatement;
+
+	if (levels > 0) {
+		for (let i = 0; i < 2; i++) {
+			if (i === 1) {
+				content[`${index}.${i + 1}.`] = createDocContentObject(levels - 1, `${index}.${i + 1}`);
+			} else {
+				content[`${index}.${i + 1}.`] = faker.lorem.sentence(100);
+			}
+		}
+	}
+	if (content && Object.keys(content).length > 0) {
+		doc.data = content;
+	}
+	return doc;
+}
+
+describe("f-document-viewer", () => {
+	it("is defined", () => {
+		const el = document.createElement("f-document-viewer");
+		expect(el).instanceOf(FDocumentViewer);
+	});
+
+	it("should not show jumplinks on the basis of prop `jump-links`", async () => {
+		const el = await fixture(html`
+			<f-document-viewer
+				.content=${getFakeDocumentContent()}
+				.jump-links=${false}
+			></f-document-viewer>
+		`);
+		const descendant = el.shadowRoot!.querySelector(".jumplinks-wrapper")!;
+		expect(descendant).to.equal(null);
+	});
+
+	it("should not show notch for collapsing jump-links", async () => {
+		const el = await fixture(html`
+			<f-document-viewer
+				.content=${getFakeDocumentContent()}
+				?jump-links=${true}
+				?collapsible-jump-links=${false}
+			></f-document-viewer>
+		`);
+		const descendant = el.shadowRoot!.querySelector(".notch")!;
+		expect(descendant).to.equal(null);
+	});
+
+	it("should render content", async () => {
+		const el = await fixture(html`
+			<f-document-viewer .content=${getFakeDocumentContent(3)}></f-document-viewer>
+		`);
+		const descendant = el.shadowRoot!.querySelector(".preview-scrollable")!;
+		const content = descendant.children[0].children;
+		expect(descendant.children.length).to.equal(3 + 1);
+		expect(content.length).to.equal(2);
+	});
+
+	it("should render jumplinks section", async () => {
+		const el = await fixture(html`
+			<f-document-viewer .content=${getFakeDocumentContent(3)}></f-document-viewer>
+		`);
+		const descendant = el.shadowRoot!.querySelector(".jump-links")!;
+		expect(descendant.children.length).to.equal(3);
+	});
+
+	it("should filter according to level selected", async () => {
+		const el = await fixture<FDocumentViewer>(html`
+			<f-document-viewer .content=${getFakeDocumentContent()}></f-document-viewer>
+		`);
+		const filter = el.shadowRoot!.querySelector<FSelect>(".f-select-level-selector")!;
+
+		const listner = oneEvent(filter, "input");
+
+		filter.value = "Only L1";
+		const event = new CustomEvent("input", {
+			detail: {
+				value: "Only L1"
+			},
+			bubbles: true,
+			composed: true
+		});
+		filter.dispatchEvent(event);
+		await listner;
+		await el.updateComplete;
+
+		const descendants = el.shadowRoot!.querySelectorAll<FAccordion | FDiv>(`[data-level="2"]`);
+
+		expect(descendants[0].style.display).to.equal("none");
+	});
+
+	it("should highlight the text searched", async () => {
+		const el = await fixture<FDocumentViewer>(html`
+			<f-document-viewer .content=${getFakeDocumentContent()}></f-document-viewer>
+		`);
+		const highlight = el.shadowRoot!.querySelector<FSearch>(".f-search-text-highlight")!;
+
+		const listner = oneEvent(highlight, "input");
+		highlight.value = "The";
+		const event = new CustomEvent("input", {
+			detail: {
+				value: "The"
+			},
+			bubbles: true,
+			composed: true
+		});
+		highlight.dispatchEvent(event);
+		await listner;
+		await el.updateComplete;
+
+		const descendants = el.shadowRoot!.querySelectorAll<FText>("#doc-text");
+		expect(descendants[0].highlight).to.equal("The");
+	});
+});