FDS-648 Icon picker

.storybook/custom-icon-pack.ts

@@ -0,0 +1,5 @@
+const CUSTOM_ICON_PACK: Record<string, string> = {
+	apple: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>`
+};
+
+export default CUSTOM_ICON_PACK;

.storybook/preview.ts

@@ -3,6 +3,7 @@ import SystemIconPack from "@ollion/flow-system-icon/dist/types/icon-pack";
 import ProductIconPack from "@ollion/flow-product-icon/dist/types/icon-pack";
 import GcpIconPack from "@ollion/flow-gcp-icon/dist/types/icon-pack";
 import AwsIconPack from "@ollion/flow-aws-icon/dist/types/icon-pack";
+import CUSTOM_ICON_PACK from "./custom-icon-pack";
 
 import { ConfigUtil } from "@ollion/flow-core-config";
 import { changeRoute } from "./utils";
@@ -99,6 +100,8 @@ export const decorators = [
 				...AwsIconPack
 			}
 		});
+
+		ConfigUtil.setConfig({ iconPack: { ...ConfigUtil.getConfig().iconPack, ...CUSTOM_ICON_PACK } });
 		return html`
 			<div
 				style="background-color:var(--color-surface-default);color:var(--color-text-default);font-family:var(--flow-font);height:inherit;padding: 0px;"

docs/create-custom-icon-pack.md

@@ -0,0 +1,44 @@
+# Installing/Creating Custom Icon Pack
+
+- **Prerequisite**: Ensure that `@ollion/flow-core` is installed in your app. If not, you can visit [here](https://github.com/ollionorg/flow-core?tab=readme-ov-file#existing-project) for installation instructions.
+
+- **Step 1**: Create a TypeScript file (e.g., `custom-icon-pack.ts`) which exports a simple object with keys and SVG strings as shown below:
+
+```typescript
+const CUSTOM_ICON_PACK: Record<string, string> = {
+	apple: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>`
+};
+
+export default CUSTOM_ICON_PACK;
+```
+
+- **Step 2**: Import the icon pack in your main.ts or whichever is the startup file of your app:
+
+```typescript
+import CUSTOM_ICON_PACK from "./custom-icon-pack";
+```
+
+- **Step 3**: Register the icon pack in your app:
+
+```typescript
+import { ConfigUtil } from "@ollion/flow-core-config";
+ConfigUtil.setConfig({ iconPack: { ...ConfigUtil.getConfig().iconPack, ...CUSTOM_ICON_PACK } });
+```
+
+- **Step 4**: Use the icon in your HTML:
+
+```html
+<f-icon source="apple"></f-icon>
+```
+
+- **Final output**
+
+<img width="108" alt="Screenshot 2024-02-19 at 11 57 27 AM" src="https://github.com/ollionorg/flow-core/assets/67629551/7dfe5abd-c8b4-4b2f-ab19-4c480290500c">
+
+- **Note**: We can use url of image as well as an icon like below
+
+```html
+<f-icon
+	source="https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_google-1024.png"
+></f-icon>
+```

docs/create-icon-picker-categories.md

@@ -0,0 +1,48 @@
+# Creating Icon Picker Categories
+
+- **Prerequisite**: Ensure that `@ollion/flow-core` is installed in your app. If not, you can visit [here](https://github.com/ollionorg/flow-core?tab=readme-ov-file#existing-project) for installation instructions.
+
+- **Step 1**: Create a TypeScript file (e.g., `icon-picker-categories.ts`) which exports an object with catgeories and icons.
+
+```typescript
+import { FIconPickerCategories } from "@ollion/flow-core";
+const categories: FIconPickerCategories = [];
+
+categories.push({
+	name: "Apple",
+	/**
+	 * We can provide url as well like this
+	 * categoryIcon : new URL("https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_google-1024.png");
+	 */
+	categoryIcon: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>`,
+	icons: [
+		{
+			name: "apple-music",
+			/**
+			 * We can provide url as well like this
+			 * source : new URL("https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_google-1024.png");
+			 */
+			source: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.994 6.124a9.23 9.23 0 00-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043a5.022 5.022 0 00-1.877-.726 10.496 10.496 0 00-1.564-.15c-.04-.003-.083-.01-.124-.013H5.986c-.152.01-.303.017-.455.026-.747.043-1.49.123-2.193.4-1.336.53-2.3 1.452-2.865 2.78-.192.448-.292.925-.363 1.408-.056.392-.088.785-.1 1.18 0 .032-.007.062-.01.093v12.223c.01.14.017.283.027.424.05.815.154 1.624.497 2.373.65 1.42 1.738 2.353 3.234 2.801.42.127.856.187 1.293.228.555.053 1.11.06 1.667.06h11.03a12.5 12.5 0 001.57-.1c.822-.106 1.596-.35 2.295-.81a5.046 5.046 0 001.88-2.207c.186-.42.293-.87.37-1.324.113-.675.138-1.358.137-2.04-.002-3.8 0-7.595-.003-11.393zm-6.423 3.99v5.712c0 .417-.058.827-.244 1.206-.29.59-.76.962-1.388 1.14-.35.1-.706.157-1.07.173-.95.045-1.773-.6-1.943-1.536a1.88 1.88 0 011.038-2.022c.323-.16.67-.25 1.018-.324.378-.082.758-.153 1.134-.24.274-.063.457-.23.51-.516a.904.904 0 00.02-.193c0-1.815 0-3.63-.002-5.443a.725.725 0 00-.026-.185c-.04-.15-.15-.243-.304-.234-.16.01-.318.035-.475.066-.76.15-1.52.303-2.28.456l-2.325.47-1.374.278c-.016.003-.032.01-.048.013-.277.077-.377.203-.39.49-.002.042 0 .086 0 .13-.002 2.602 0 5.204-.003 7.805 0 .42-.047.836-.215 1.227-.278.64-.77 1.04-1.434 1.233-.35.1-.71.16-1.075.172-.96.036-1.755-.6-1.92-1.544-.14-.812.23-1.685 1.154-2.075.357-.15.73-.232 1.108-.31.287-.06.575-.116.86-.177.383-.083.583-.323.6-.714v-.15c0-2.96 0-5.922.002-8.882 0-.123.013-.25.042-.37.07-.285.273-.448.546-.518.255-.066.515-.112.774-.165.733-.15 1.466-.296 2.2-.444l2.27-.46c.67-.134 1.34-.27 2.01-.403.22-.043.442-.088.663-.106.31-.025.523.17.554.482.008.073.012.148.012.223.002 1.91.002 3.822 0 5.732z"/></svg>`,
+			keywords: "apple music"
+		}
+	]
+});
+
+export default categories;
+```
+
+- **Step 2**: Import the categories in your component file where you want to use it.
+
+```typescript
+import categories from "./icon-picker-categories";
+```
+
+- **Step 3** : Use above catgeories in your app. E.g. in you vue app you can use like below
+
+```html
+<f-icon-picker :categories.prop="categories"> </f-icon-picker>
+```
+
+- **Final Output** :
+
+<img width="500" alt="Screenshot 2024-02-19 at 12 07 07 PM" src="https://github.com/ollionorg/flow-core/assets/67629551/641669fa-449a-4b7c-a4bd-e9c541d119c5">

package.json

@@ -36,9 +36,9 @@
   ],
   "devDependencies": {
     "@changesets/cli": "^2.25.0",
+    "@faker-js/faker": "^8.3.1",
     "@ollion/custom-elements-manifest-to-types": "workspace:*",
     "@ollion/prettier-config": "^2.1.0",
-    "@faker-js/faker": "^8.3.1",
     "@storybook/addon-actions": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-links": "^7.5.3",
@@ -47,6 +47,7 @@
     "@storybook/blocks": "^7.5.3",
     "@storybook/web-components": "^7.5.3",
     "@storybook/web-components-vite": "^7.5.3",
+    "@types/d3": "7.4.3",
     "@types/eslint": "^8.4.3",
     "@types/jest": "29.5.5",
     "@types/prettier": "^3.0.0",
@@ -66,13 +67,13 @@
     "sass": "^1.52.3",
     "storybook": "^7.5.3",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11",
-    "@types/d3": "7.4.3"
+    "vite": "^4.4.11"
   },
   "dependencies": {
     "@ollion/flow-aws-icon": "latest",
     "@ollion/flow-code-editor": "workspace:*",
     "@ollion/flow-core": "workspace:*",
+    "@ollion/flow-dashboard": "workspace:*",
     "@ollion/flow-form-builder": "workspace:*",
     "@ollion/flow-gcp-icon": "latest",
     "@ollion/flow-lineage": "workspace:*",
@@ -81,10 +82,10 @@
     "@ollion/flow-product-icon": "1.14.0",
     "@ollion/flow-system-icon": "latest",
     "@ollion/flow-table": "workspace:*",
-    "@ollion/flow-dashboard": "workspace:*",
+    "d3": "^7.6.1",
     "jspdf": "^2.5.1",
     "lit": "^3.1.0",
-    "d3": "^7.6.1"
+    "simple-icons": "^11.4.0"
   },
   "loki": {
     "configurations": {

packages/flow-core/package.json

@@ -30,6 +30,7 @@
     "axios": "^0.27.2",
     "emoji-mart": "^5.5.2",
     "flatpickr": "^4.6.13",
+    "fuse.js": "^7.0.0",
     "lit": "^3.1.0",
     "lodash-es": "^4.17.21",
     "mark.js": "^8.11.1",

packages/flow-core/src/components/f-div/f-div-global.scss

@@ -204,6 +204,36 @@ f-div {
 					max-height: 48px;
 				}
 			}
+
+			// if selected state is notch-top, creating pseudo element to create notch
+			&[selected="notch-top"] {
+				&::after {
+					position: absolute;
+					top: 0;
+					border-bottom-left-radius: 4px;
+					border-bottom-right-radius: 4px;
+					left: 4px;
+					right: 4px;
+					max-width: 48px;
+					border-top: 4px solid var(--color-success-default);
+					content: "";
+				}
+			}
+			// if selected state is notch-bottom, creating pseudo element to create notch
+			&[selected="notch-bottom"] {
+				position: relative;
+				&::after {
+					position: absolute;
+					bottom: 0px;
+					border-top-right-radius: 4px;
+					border-top-left-radius: 4px;
+					right: 4px;
+					left: 4px;
+					max-width: 48px;
+					border-bottom: 4px solid var(--color-success-default);
+					content: "";
+				}
+			}
 		}
 	}
 

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

@@ -235,7 +235,14 @@ export class FDiv extends FRoot {
 	 * @attribute Sets the f-div to a selected state. Select between border, background, or notch based on your use case.
 	 */
 	@property({ reflect: true, type: String })
-	selected?: "none" | "background" | "border" | "notch-right" | "notch-left" = "none";
+	selected?:
+		| "none"
+		| "background"
+		| "border"
+		| "notch-right"
+		| "notch-left"
+		| "notch-top"
+		| "notch-bottom" = "none";
 
 	/**
 	 * @attribute Sticky property defines a f-div’s position based on the scroll position of the container

packages/flow-core/src/components/f-icon-button/f-icon-button.ts

@@ -6,7 +6,7 @@ import { FRoot } from "../../mixins/components/f-root/f-root";
 import { classMap } from "lit-html/directives/class-map.js";
 import { unsafeSVG } from "lit-html/directives/unsafe-svg.js";
 import loader from "../../mixins/svg/loader";
-import { FIcon } from "../f-icon/f-icon";
+import { FIcon, FIconSource } from "../f-icon/f-icon";
 import { FCounter } from "../f-counter/f-counter";
 import { validateHTMLColorName } from "validate-color";
 import { validateHTMLColor } from "validate-color";
@@ -55,18 +55,18 @@ export class FIconButton extends FRoot {
 	/**
 	 * @attribute Icon property defines what icon will be displayed on the icon. It can take the icon name from a library , any inline SVG or any URL for the image.
 	 */
-	@property({ type: String })
-	icon!: string;
+	@property({ type: [String, Object], reflect: true })
+	icon!: FIconSource;
 
 	/**
 	 * @attribute Variants are various representations of an icon button. For example an icon button can be round, curved or block.
 	 */
-	@property({ type: String })
+	@property({ type: String, reflect: true })
 	variant?: FIconButtonVariant = "round";
 	/**
 	 * @attribute Type of f-icon-button
 	 */
-	@property({ type: String })
+	@property({ type: String, reflect: true })
 	category?: FIconButtonType = "fill";
 
 	/**
@@ -78,7 +78,7 @@ export class FIconButton extends FRoot {
 	/**
 	 * @attribute Size of f-icon-button
 	 */
-	@property({ type: String })
+	@property({ type: String, reflect: true })
 	state?: FIconButtonState = "primary";
 
 	/**

packages/flow-core/src/components/f-icon-picker/_f-icon-picker-variables.scss

@@ -0,0 +1,30 @@
+$sizes: (
+	"medium": 36px,
+	"small": 28px
+);
+
+$state-colors: (
+	"primary": var(--color-primary-default),
+	"success": var(--color-success-default),
+	"warning": var(--color-warning-default),
+	"danger": var(--color-danger-default)
+);
+
+$variants: (
+	"curved": 4px,
+	"round": 22px,
+	"block": 0px
+);
+
+$categories: (
+	"fill": (
+		"background": var(--color-input-default),
+		"hover": var(--color-input-default-hover),
+		"border": 1px solid var(--color-input-default)
+	),
+	"outline": (
+		"background": transparent,
+		"hover": var(--color-surface-default-hover),
+		"border": 1px solid var(--color-border-default)
+	)
+);

packages/flow-core/src/components/f-icon-picker/f-icon-picker-global.scss

@@ -0,0 +1,18 @@
+@import "./../../mixins/scss/mixins";
+@import "./f-icon-picker-variables";
+
+f-icon-picker {
+	display: flex;
+	flex: 1 0 auto;
+	&[disabled] {
+		@include disabled();
+	}
+	&[state="default"] {
+		@include input-color("default");
+	}
+	@each $state, $color in $state-colors {
+		&[state="#{$state}"] {
+			@include input-color($state);
+		}
+	}
+}