FLOW-969 : f-countdown component

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
+title: ""
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 ## Bug description

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
+title: ""
 labels: enhancement
-assignees: ''
-
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**

packages/flow-core-config/CHANGELOG.md

@@ -1,6 +1,5 @@
 <h4 class="margin-btm-8">Release Notes</h4>
 
-
 # Change Log
 
 ## [1.1.3] - 2023-10-12

packages/flow-core/CHANGELOG.md

@@ -2,14 +2,20 @@
 
 # Change Log
 
+## [2.7.0] - 2023-12-11
+
+### Features
+
+- `f-countdown`: component added
+
 ## [2.6.3] - 2023-12-12
 
 ### Improvements
 
 - `disable-result` attribute added on `f-search` to disable showing autocomplete results.
 - `disable-suggestions` attribute added on `f-suggest` to disable showing autocomplete results.
 
-## [2.6.2] - 2023-12-11
+## [2.6.2] - 2023-12-12
 
 ### Bug fixes
 

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-core",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.test.ts

@@ -70,14 +70,14 @@ describe("f-breadcrumb", () => {
 
 	it("should render with icon variant crumbs", async () => {
 		const el = await fixture(html`
-			<f-breadcrumb 
-			.variant=${"icon"} 
-			.crumbs=${[
-					{ tabIndex: 0, title: "Label 1", icon:"i-app" },
-					{ tabIndex: 1, title: "Label 2", icon:"i-app" },
+			<f-breadcrumb
+				.variant=${"icon"}
+				.crumbs=${[
+					{ tabIndex: 0, title: "Label 1", icon: "i-app" },
+					{ tabIndex: 1, title: "Label 2", icon: "i-app" },
 					{ tabIndex: 2, title: "Label 3", icon: "i-home" },
-					{ tabIndex: 3, title: "Label 4", icon:"i-info-fill" },
-					{ tabIndex: 4, title: "Label 5", icon:"i-app" }
+					{ tabIndex: 3, title: "Label 4", icon: "i-info-fill" },
+					{ tabIndex: 4, title: "Label 5", icon: "i-app" }
 				]}
 			></f-breadcrumb>
 		`);
@@ -87,20 +87,20 @@ describe("f-breadcrumb", () => {
 
 	it("should render with icon variant and the last crumb should be in active primary mode", async () => {
 		const el = await fixture(html`
-			<f-breadcrumb 
-			variant="icon"
-			.crumbs=${[
-					{ tabIndex: 0, title: "Home", icon:"i-app" },
-					{ tabIndex: 1, title: "New Label", icon:"i-app" },
+			<f-breadcrumb
+				variant="icon"
+				.crumbs=${[
+					{ tabIndex: 0, title: "Home", icon: "i-app" },
+					{ tabIndex: 1, title: "New Label", icon: "i-app" },
 					{ tabIndex: 2, title: "Pipeline", icon: "i-home" },
-					{ tabIndex: 3, title: "Working", icon:"i-info-fill" },
-					{ tabIndex: 4, title: "Active", icon:"i-app" }
+					{ tabIndex: 3, title: "Working", icon: "i-info-fill" },
+					{ tabIndex: 4, title: "Active", icon: "i-app" }
 				]}
 			></f-breadcrumb>
 		`);
 		const descendants = el.shadowRoot!.querySelector(".f-breadcrumbs")!;
-		const selected = descendants.children[descendants.children.length-1];
-		const text = selected.querySelector("f-text")!
+		const selected = descendants.children[descendants.children.length - 1];
+		const text = selected.querySelector("f-text")!;
 		expect(text.innerHTML).includes("Active");
 	});
 });

packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts

@@ -14,13 +14,12 @@ injectCss("f-breadcrumb", globalStyle);
 
 const variants = ["text", "icon"] as const;
 const sizes = ["medium", "small"] as const;
- 
+
 export type FBreadCrumbsProp = { tabIndex: number; title: string; icon?: string };
 export type FBreadcrumbs = FBreadCrumbsProp[];
 export type FBreadcrumbSize = (typeof sizes)[number];
 export type FBreadcrumbVariant = (typeof variants)[number];
 
-
 @flowElement("f-breadcrumb")
 export class FBreadcrumb extends FRoot {
 	/**
@@ -175,128 +174,120 @@ export class FBreadcrumb extends FRoot {
 	render() {
 		this.createSeperateCrumbs();
 
-
 		const textBreadcrumb = html` <f-div gap="x-small" align="middle-left">
-					${this.crumbs?.length <= 4
-						? this.crumbs?.map((crumb, index) => this.crumbLoop(crumb, index, this.crumbs))
-						: html`
-								<f-div
-									width="hug-content"
-									align="middle-left"
-									class="f-breadcrumb-content"
-									?disabled=${this.disabled}
-									@click=${(event: MouseEvent) =>
-										this.handleDispatchEvent(event, this.initialCrumbs)}
-								>
-									<f-text
-										.size=${this.textSize}
-										variant="para"
-										weight="regular"
-										class="f-breadcrumb-text-hover"
-										.tooltip=${this.initialCrumbs?.title}
-										?ellipsis=${true}
-										>${this.initialCrumbs?.title}</f-text
-									>
-								</f-div>
-								<f-icon
-									source="i-chevron-right"
-									size="x-small"
-									state="secondary"
-									class="system-icon-size"
-								></f-icon>
-								<f-div
-									clickable
-									?disabled=${this.disabled}
-									@mouseenter=${() => this.toggleBreadcrumbPopover("open")}
-									id="breadcrumb-popover"
-								>
-									<f-text
-										class="toggle-popover-hover"
-										variant="heading"
-										state="secondary"
-										size="small"
-										>...</f-text
-									>
-								</f-div>
-								<f-popover .overlay=${false} size="small">
-									<f-div
-										state="secondary"
-										direction="column"
-										@mouseleave=${() => this.toggleBreadcrumbPopover("close")}
-									>
-										${this.middlePopoverCrumbs?.map(
-											(crumb, index) =>
-												html` <f-div
-													class="popover-crumb-list"
-													padding="medium"
-													.border=${this.middlePopoverCrumbs.length - 1 === index
-														? "none"
-														: "small solid secondary bottom"}
-													clickable
-													@click=${(event: MouseEvent) => this.handleDispatchEvent(event, crumb)}
-													><f-text
-														class="popover-text-hover"
-														variant="para"
-														size="medium"
-														weight="regular"
-														>${crumb?.title}</f-text
-													></f-div
-												>`
-										)}
-									</f-div>
-								</f-popover>
-								<f-icon
-									source="i-chevron-right"
-									size="x-small"
-									state="secondary"
-									class="system-icon-size"
-								></f-icon>
-								${this.endingCrumbs?.map((crumb, index) =>
-									this.crumbLoop(crumb, index, this.endingCrumbs)
+			${this.crumbs?.length <= 4
+				? this.crumbs?.map((crumb, index) => this.crumbLoop(crumb, index, this.crumbs))
+				: html`
+						<f-div
+							width="hug-content"
+							align="middle-left"
+							class="f-breadcrumb-content"
+							?disabled=${this.disabled}
+							@click=${(event: MouseEvent) => this.handleDispatchEvent(event, this.initialCrumbs)}
+						>
+							<f-text
+								.size=${this.textSize}
+								variant="para"
+								weight="regular"
+								class="f-breadcrumb-text-hover"
+								.tooltip=${this.initialCrumbs?.title}
+								?ellipsis=${true}
+								>${this.initialCrumbs?.title}</f-text
+							>
+						</f-div>
+						<f-icon
+							source="i-chevron-right"
+							size="x-small"
+							state="secondary"
+							class="system-icon-size"
+						></f-icon>
+						<f-div
+							clickable
+							?disabled=${this.disabled}
+							@mouseenter=${() => this.toggleBreadcrumbPopover("open")}
+							id="breadcrumb-popover"
+						>
+							<f-text class="toggle-popover-hover" variant="heading" state="secondary" size="small"
+								>...</f-text
+							>
+						</f-div>
+						<f-popover .overlay=${false} size="small">
+							<f-div
+								state="secondary"
+								direction="column"
+								@mouseleave=${() => this.toggleBreadcrumbPopover("close")}
+							>
+								${this.middlePopoverCrumbs?.map(
+									(crumb, index) =>
+										html` <f-div
+											class="popover-crumb-list"
+											padding="medium"
+											.border=${this.middlePopoverCrumbs.length - 1 === index
+												? "none"
+												: "small solid secondary bottom"}
+											clickable
+											@click=${(event: MouseEvent) => this.handleDispatchEvent(event, crumb)}
+											><f-text
+												class="popover-text-hover"
+												variant="para"
+												size="medium"
+												weight="regular"
+												>${crumb?.title}</f-text
+											></f-div
+										>`
 								)}
-						  `}
-			  </f-div>`
+							</f-div>
+						</f-popover>
+						<f-icon
+							source="i-chevron-right"
+							size="x-small"
+							state="secondary"
+							class="system-icon-size"
+						></f-icon>
+						${this.endingCrumbs?.map((crumb, index) =>
+							this.crumbLoop(crumb, index, this.endingCrumbs)
+						)}
+				  `}
+		</f-div>`;
 
-			  const iconBreadcrumb = html`<f-div class="f-breadcrumbs" overflow="visible">
-					${this.crumbs.map((item, index) =>
-						index !== this.crumbs.length - 1
-							? html`<f-div
-									class="f-breadcrumb"
-									state="secondary"
-									width=${this.crumbSize}
-									height=${this.crumbSize}
-									padding="small"
-									align="middle-center"
-									variant="curved"
-									tooltip=${item.title}
-									clickable
+		const iconBreadcrumb = html`<f-div class="f-breadcrumbs" overflow="visible">
+			${this.crumbs.map((item, index) =>
+				index !== this.crumbs.length - 1
+					? html`<f-div
+							class="f-breadcrumb"
+							state="secondary"
+							width=${this.crumbSize}
+							height=${this.crumbSize}
+							padding="small"
+							align="middle-center"
+							variant="curved"
+							tooltip=${item.title}
+							clickable
+							@click=${(event: MouseEvent) => this.handleDispatchEvent(event, item)}
+					  >
+							<f-icon source=${item.icon} .size=${this.iconSize}></f-icon>
+					  </f-div>`
+					: html`
+							<f-div gap="large" align="middle-center">
+								<div
+									class="f-breadcrumb-primary"
+									size=${this.size}
 									@click=${(event: MouseEvent) => this.handleDispatchEvent(event, item)}
-							  >
-									<f-icon source=${item.icon} .size=${this.iconSize}></f-icon>
-							  </f-div>`
-							: html`
-									<f-div gap="large" align="middle-center">
-										<div
-											class="f-breadcrumb-primary"
-											size=${this.size}
-											@click=${(event: MouseEvent) => this.handleDispatchEvent(event, item)}
-										>
-											<f-icon
-												source=${item.icon}
-												.size=${this.iconSize}
-												class="f-breadcrumb-primary-icon"
-											></f-icon>
-										</div>
-										<f-text inline variant="para" .size=${this.textSize} weight="medium">
-											${item.title}</f-text
-										>
-									</f-div>
-							  `
-					)}
-			  </f-div>`
-		return this.variant === "text"
-			? textBreadcrumb
-			: iconBreadcrumb;
+								>
+									<f-icon
+										source=${item.icon}
+										.size=${this.iconSize}
+										class="f-breadcrumb-primary-icon"
+									></f-icon>
+								</div>
+								<f-text inline variant="para" .size=${this.textSize} weight="medium">
+									${item.title}</f-text
+								>
+							</f-div>
+					  `
+			)}
+		</f-div>`;
+		return this.variant === "text" ? textBreadcrumb : iconBreadcrumb;
 	}
 }