FDS-642 circle variant added in f-progress-bar (#227)

* FDS-642 circle variant for progress bar added

* FDS-642 search-keyword property added to f-log to search externally

* FDS-642 changelog updated

packages/flow-core/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.8.1] - 2024-02-07
+
+### Improvements
+
+- `circle` variant added in `f-progress-bar` to show progress in circle.
+
 ## [2.8.0] - 2024-02-06
 
 ### Features

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "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-progress-bar/f-progress-bar-global.scss

@@ -4,4 +4,8 @@ f-progress-bar {
 	@include base();
 	display: flex;
 	flex: 1 0 auto;
+	&[variant="circle"] {
+		display: inline-flex;
+		flex: 0 0 auto;
+	}
 }

packages/flow-core/src/components/f-progress-bar/f-progress-bar.scss

@@ -34,4 +34,57 @@ $states: (
 			}
 		}
 	}
+
+	.f-progress-bar-circle {
+		@include base();
+		display: flex;
+		position: relative;
+		border-radius: 50%;
+		overflow: hidden;
+
+		@each $state, $color in $states {
+			&[data-state="#{$state}"] {
+				--f-circle-progress-fill: #{map.get($color, "background")};
+				background-color: var(--f-circle-progress-fill);
+			}
+		}
+
+		&:before {
+			content: "";
+			display: block;
+			height: 100%;
+			width: 100%;
+			background-color: var(--color-neutral-subtle);
+		}
+
+		&:after {
+			content: "";
+			display: block;
+			height: 100%;
+			width: 100%;
+			transition: transform 300ms linear;
+			background-color: var(--color-neutral-subtle);
+		}
+
+		&.less-than-eq-50 {
+			&:after {
+				transform: var(--f-progress-transform);
+				transform-origin: left;
+			}
+		}
+		&.grt-than-50 {
+			background-color: var(--color-neutral-subtle);
+			&:after {
+				transform: var(--f-progress-transform);
+				transform-origin: left;
+				background-color: var(--f-circle-progress-fill);
+			}
+
+			&:before {
+				transform: rotate(180deg);
+				transform-origin: right;
+				background-color: var(--f-circle-progress-fill);
+			}
+		}
+	}
 }

packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts

@@ -9,6 +9,9 @@ import { validateHTMLColor } from "validate-color";
 import { validateHTMLColorName } from "validate-color";
 import { flowElement } from "../../utils";
 import { injectCss } from "@ollion/flow-core-config";
+import { classMap } from "lit-html/directives/class-map.js";
+import { keyed } from "lit/directives/keyed.js";
+
 injectCss("f-progress-bar", globalStyle);
 
 export type FProgressBarState =
@@ -41,7 +44,7 @@ export class FProgressBar extends FRoot {
 
 	 */
 	@property({ type: String, reflect: true })
-	variant?: "block" | "curved" = "block";
+	variant?: "block" | "curved" | "circle" = "block";
 
 	/**
 	 * @attribute The medium size is the default and recommended option.
@@ -82,6 +85,18 @@ export class FProgressBar extends FRoot {
 		}
 	}
 
+	get circleDiameter() {
+		if (this.size === "large") {
+			return "28px";
+		} else if (this.size === "medium") {
+			return "20px";
+		} else if (this.size === "small") {
+			return "16px";
+		} else {
+			return "12px";
+		}
+	}
+
 	/**
 	 * compute width of fill in the track
 	 */
@@ -109,6 +124,41 @@ export class FProgressBar extends FRoot {
 
 	fill = "";
 
+	/**
+	 * Calculate angle of pseudo element
+	 */
+	get valueInAngle() {
+		let perValue = 0;
+		if (this.value) {
+			perValue = +this.value.replace(/%/g, "");
+		}
+		if (perValue > 50) {
+			return perValue * 3.6 - 180;
+		}
+		return perValue * 3.6;
+	}
+
+	/**
+	 * Calculate value in number by removing % character
+	 */
+	get valueInNumber() {
+		let perValue = 0;
+		if (this.value) {
+			perValue = +this.value.replace(/%/g, "");
+		}
+
+		return perValue;
+	}
+
+	/**
+	 * Calculate overall style to apply
+	 */
+	get circleProgressStyle() {
+		return `--f-progress-transform: rotate(${this.valueInAngle}deg);width:${
+			this.circleDiameter
+		};height:${this.circleDiameter};${this.fill ? `--f-circle-progress-fill: ${this.fill};` : ""}`;
+	}
+
 	render() {
 		/**
 		 * creating local fill variable out of state prop.
@@ -119,18 +169,32 @@ export class FProgressBar extends FRoot {
 		 * validate
 		 */
 		this.validateProperties();
-
-		return html`
-			<f-div
-				class="f-progress-bar"
-				.width=${this.computedWidth}
-				height=${this.computedHeight}
-				data-variant=${this.variant}
-			>
-				<f-div .width=${this.value} data-state=${this.state} class="f-progress-bar-fill"></f-div>
-				<f-div width="fill-container"></f-div>
-			</f-div>
-		`;
+		if (this.variant !== "circle") {
+			return html`
+				<f-div
+					class="f-progress-bar"
+					.width=${this.computedWidth}
+					height=${this.computedHeight}
+					data-variant=${this.variant}
+				>
+					<f-div .width=${this.value} data-state=${this.state} class="f-progress-bar-fill"></f-div>
+					<f-div width="fill-container"></f-div>
+				</f-div>
+			`;
+		}
+		const classes = {
+			["f-progress-bar-circle"]: true,
+			["less-than-eq-50"]: this.valueInNumber <= 50,
+			["grt-than-50"]: this.valueInNumber > 50
+		};
+		return keyed(
+			this.valueInNumber > 50 ? 1 : 2,
+			html`<div
+				class=${classMap(classes)}
+				data-state=${this.state}
+				style="${this.circleProgressStyle}"
+			></div>`
+		);
 	}
 	protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
 		super.updated(changedProperties);

packages/flow-log/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.0.2] - 2024-02-07
+
+### Improvements
+
+- `search-keyword` added to `f-log` element, to control search externally.
+
 ## [2.0.1] - 2023-12-18
 
 ### Patch Changes

packages/flow-log/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-log",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Code editor component for flow library",
   "module": "dist/flow-log.es.js",
   "main": "dist/flow-log.es.js",

packages/flow-log/src/components/f-log/f-log-search-and-filters.ts

@@ -38,7 +38,7 @@ export function clearFilter(this: FLog) {
  * It will highlight text present in logs with mark tag
  * @param searchText
  */
-export function highlightText(this: FLog, searchText: string): void {
+export function highlightText(this: FLog, searchText: string, scroll = true): void {
 	if (this.searchDebounceTimeout) {
 		clearTimeout(this.searchDebounceTimeout);
 	}
@@ -55,8 +55,10 @@ export function highlightText(this: FLog, searchText: string): void {
 				done: (occurrences: number) => {
 					this.searchOccurrences = occurrences;
 					const firstMark = this.shadowRoot?.querySelector("mark[data-markjs='true']");
-					firstMark?.scrollIntoView({ block: "start", behavior: "smooth" });
-					firstMark?.classList.add("active");
+					if (scroll) {
+						firstMark?.scrollIntoView({ block: "start", behavior: "smooth" });
+						firstMark?.classList.add("active");
+					}
 					this.currentMarkIndex = 0;
 					if (occurrences > 0 && this.searchInput) {
 						this.searchInput.suggestElement.suffix = `1 of ${occurrences}`;

packages/flow-log/src/components/f-log/f-log.ts

@@ -98,6 +98,9 @@ export class FLog extends FRoot {
 	@property({ type: Object, reflect: true, attribute: "highlight-keywords" })
 	highlightKeywords?: FLogHighlightKeywords;
 
+	@property({ type: String, reflect: true, attribute: "search-keyword" })
+	searchKeyword?: string;
+
 	/**
 	 * for vue2
 	 */
@@ -217,6 +220,9 @@ export class FLog extends FRoot {
 			if (this.requestIdleId) {
 				cancelIdleCallback(this.requestIdleId);
 			}
+			if (this.searchKeyword) {
+				this.highlightText(this.searchKeyword, false);
+			}
 		}
 	}
 	/**
@@ -287,6 +293,7 @@ export class FLog extends FRoot {
 					.selectedScope=${this.selectedLogLevel}
 					@input=${this.handleSearch}
 					variant="block"
+					.value=${this.searchKeyword}
 					.disableResult=${true}
 				></f-search>
 			</f-div>
@@ -353,6 +360,9 @@ export class FLog extends FRoot {
 				this.renderBatchedLogs(this.currentBatchId);
 			});
 		}
+		if (changedProperties.has("searchKeyword") && this.searchKeyword) {
+			this.highlightText(this.searchKeyword, false);
+		}
 
 		window.addEventListener("keydown", this.searchShortCutHhandler, { capture: true });
 	}

stories/flow-core/f-progress-bar.mdx

@@ -1,8 +1,5 @@
 import { Meta, Story, Canvas, ArgsTable } from "@storybook/blocks";
-import { html } from "lit-html";
-import fProgressBarAnatomy from "../svg/i-fprogress-bar-anatomy.js";
-import { unsafeSVG } from "lit-html/directives/unsafe-svg.js";
-import * as FProgressBarStories from "./f-progress-bar.stories";
+import * as FProgressBarStories from "./f-progress-bar.stories.ts";
 
 <Meta of={FProgressBarStories} />
 
@@ -87,6 +84,13 @@ Variants are visual representations of progress bar. A progress bar can be round
       <td />
     </tr>
 
+    <tr>
+      <td>circle</td>
+      <td>displays progress in circle</td>
+
+      <td />
+    </tr>
+
   </tbody>
 </table>