FLOW-959 FLOW-960 FLOW-961 state attribute on f-popover and sort even…

…t added in f-table-schema (#185)

* FLOW-959 FLOW-960 state attribute added in f-popover + f-text anchor tag cursor fixed

* FLOW-959 FLOW-961 sort event added in f-table-schema

packages/flow-core/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 # Change Log
 
+## [2.2.1] - 2023-11-08
+
+### Improvements
+
+- `f-popover` : state attribute introduced with `transparent` option.
+
+### Bug Fixes
+
+- `f-text` : `<a>` tag is not displaying cursor pointer.
+
 ## [2.2.0] - 2023-10-30
 
 ### Features

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-core",
-  "version": "2.2.0",
+  "version": "2.2.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-popover/f-popover-global.scss

@@ -20,6 +20,33 @@ $sizes: (
 	)
 );
 
+$states: (
+	"transparent": (
+		"background": transparent
+	),
+	"subtle": (
+		"background": var(--color-surface-subtle)
+	),
+	"default": (
+		"background": var(--color-surface-tertiary)
+	),
+	"secondary": (
+		"background": var(--color-surface-secondary)
+	),
+	"success": (
+		"background": var(--color-success-surface)
+	),
+	"primary": (
+		"background": var(--color-primary-surface)
+	),
+	"warning": (
+		"background": var(--color-warning-surface)
+	),
+	"danger": (
+		"background": var(--color-danger-surface)
+	)
+);
+
 f-popover {
 	@include base();
 	position: fixed;
@@ -30,6 +57,14 @@ f-popover {
 	border-radius: 4px;
 	overflow: auto;
 	z-index: 202;
+	@each $state, $value in $states {
+		&[state^="#{$state}"] {
+			// include mixin for inheritance rules
+			@include inheirt-parent($state);
+
+			background-color: map.get($value, "background");
+		}
+	}
 	&[shadow]:not([overlay]) {
 		box-shadow: var(--flow-box-shadow);
 	}

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

@@ -27,7 +27,19 @@ describe("f-popover", () => {
 		expect(descendant.dataset["transparent"]).to.equal("true");
 	});
 	it("should render with default size ", async () => {
-		const el = await fixture(html` <f-popover open>Test</f-popover> `);
+		const el = await fixture<FPopover>(html` <f-popover open>Test</f-popover> `);
 		expect(el.getAttribute("size")).to.equal("medium");
+		expect(el.offsetWidth).to.equal(432);
+	});
+	it("should render with default state ", async () => {
+		const el = await fixture(html` <f-popover open>Test</f-popover> `);
+		expect(el.getAttribute("state")).to.equal("default");
+	});
+	it("should render with correct size ", async () => {
+		const el = await fixture<FPopover>(html` <f-popover size="large" open>Test</f-popover> `);
+		expect(el.offsetWidth).to.equal(864);
+		el.size = "small";
+		await el.updateComplete;
+		expect(el.offsetWidth).to.equal(320);
 	});
 });

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

@@ -15,6 +15,16 @@ import { flowElement } from "./../../utils";
 import { injectCss } from "@cldcvr/flow-core-config";
 injectCss("f-popover", globalStyle);
 
+export type FPopoverState =
+	| "subtle"
+	| "default"
+	| "secondary"
+	| "success"
+	| "warning"
+	| "danger"
+	| "primary"
+	| "transparent";
+
 // export type FPopoverVariant = "relative" | "absolute";
 export type FPopoverPlacement =
 	| "top"
@@ -115,6 +125,12 @@ export class FPopover extends FRoot {
 	@property({ type: Boolean, reflect: true, attribute: "close-on-escape" })
 	closeOnEscape?: boolean = true;
 
+	/**
+	 * @attribute state property defines the background color of a f-div. It can take only surface colors defined in the library.
+	 */
+	@property({ reflect: true, type: String })
+	state?: FPopoverState = "default";
+
 	/**
 	 * @attribute query selector of target
 	 */

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

@@ -67,6 +67,7 @@ f-text {
 	> a {
 		color: var(--color-primary-default);
 		text-decoration: none;
+		cursor: pointer;
 	}
 }
 

packages/flow-table/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.0.6] - 2023-11-08
+
+### Improvements
+
+- `f-table-schema` : `@sort` event emitted when clicked on sort icon in header cell.
+
 ## [2.0.5] - 2023-11-01
 
 ### Bug Fixes

packages/flow-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-table",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Table component for flow library",
   "module": "dist/flow-table.es.js",
   "main": "dist/flow-table.cjs.js",

packages/flow-table/src/components/f-table-schema/f-table-schema.ts

@@ -447,6 +447,18 @@ export class FTableSchema extends FRoot {
 			this.sortBy = columnKey;
 			this.sortOrder = "asc";
 		}
+		/**
+		 * emitting sort event with latest sortBy and sortOrder value
+		 */
+		const sortEvent = new CustomEvent("sort", {
+			detail: {
+				sortBy: this.sortBy,
+				sortOrder: this.sortOrder
+			},
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(sortEvent);
 	}
 
 	getSortIcon(columnKey: string) {

stories/flow-core/f-popover.stories.ts

@@ -3,7 +3,7 @@ import fPopoverAnatomy from "../svg/i-fpopover-anatomy.js";
 import { unsafeSVG } from "lit-html/directives/unsafe-svg.js";
 import { useState } from "@storybook/preview-api";
 import { createRef, ref } from "lit/directives/ref.js";
-import { FPopover, FPopoverPlacement, FPopoverSize } from "@cldcvr/flow-core";
+import { FPopover, FPopoverPlacement, FPopoverSize, FPopoverState } from "@cldcvr/flow-core";
 
 export default {
 	title: "@cldcvr/flow-core/f-popover",
@@ -20,6 +20,7 @@ export type PopOverStoryArgs = {
 	overlay: boolean;
 	size: FPopoverSize;
 	placement: FPopoverPlacement;
+	state: FPopoverState;
 	shadow: boolean;
 	["auto-height"]: boolean;
 	["close-on-escape"]: boolean;
@@ -41,14 +42,15 @@ export const Playground = {
 				.open=${args.open}
 				.overlay=${args.overlay}
 				.size=${args.size}
+				.state=${args.state}
 				.placement=${args.placement}
 				.shadow=${args.shadow}
 				@overlay-click=${handlePopover}
 				target="#popoverTarget"
 				?auto-height=${args["auto-height"]}
 				?close-on-escape=${args["close-on-escape"]}
 			>
-				<f-div state="tertiary" direction="column" gap="small" padding="medium">
+				<f-div direction="column" gap="small" padding="medium">
 					<f-text>
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet enim ut mi
 						egestas, non efficitur odio varius. Phasellus accumsan pellentesque ex vehicula
@@ -75,7 +77,19 @@ export const Playground = {
 			control: "select",
 			options: ["stretch", "large", "medium", "small"]
 		},
-
+		state: {
+			control: "select",
+			options: [
+				"subtle",
+				"default",
+				"secondary",
+				"success",
+				"warning",
+				"danger",
+				"primary",
+				"transparent"
+			]
+		},
 		placement: {
 			control: "select",
 
@@ -122,6 +136,7 @@ export const Playground = {
 		overlay: true,
 		shadow: false,
 		size: "small",
+		state: "default",
 		placement: "auto",
 		["auto-height"]: false,
 		["close-on-escape"]: true
@@ -428,6 +443,131 @@ export const Size = {
 	}
 };
 
+export const State = {
+	render: () => {
+		const [dummySizeArray, setDummySizeArray] = useState([
+			{
+				target: "#default",
+				open: false,
+				state: "default",
+				title: `state="default"`,
+				size: "medium",
+				placement: "auto"
+			},
+			{
+				target: "#subtle",
+				open: false,
+				state: "subtle",
+				title: `state="subtle"`,
+				size: "medium",
+				placement: "auto"
+			},
+			{
+				target: "#secondary",
+				open: false,
+				state: "secondary",
+				title: `state="secondary"`,
+				size: "medium",
+				placement: "auto"
+			},
+			{
+				target: "#success",
+				open: false,
+				state: "success",
+				title: `state="success"`,
+				size: "medium",
+				placement: "auto"
+			},
+			{
+				target: "#warning",
+				open: false,
+				state: "warning",
+				title: `state="warning"`,
+				size: "medium",
+				placement: "auto"
+			},
+			{
+				target: "#danger",
+				open: false,
+				state: "danger",
+				title: `state="danger"`,
+				size: "medium",
+				placement: "auto"
+			},
+			{
+				target: "#primary",
+				open: false,
+				state: "primary",
+				title: `state="primary"`,
+				size: "medium",
+				placement: "auto"
+			},
+			{
+				target: "#transparent",
+				open: false,
+				state: "transparent",
+				title: `state="transparent"`,
+				size: "medium",
+				placement: "auto"
+			}
+		]);
+
+		const handlePopover = (_item: unknown, index: number) => {
+			const array = [...dummySizeArray];
+			array[index].open = !dummySizeArray[index].open;
+			setDummySizeArray(array);
+		};
+
+		return html` <f-div height="hug-content" direction="column" gap="large">
+			${dummySizeArray.map((item, index) => {
+				return html`
+					<f-popover
+						?open=${item.open}
+						.overlay=${true}
+						.size=${item.size}
+						.state=${item.state}
+						.target=${item.target}
+						placement=${item.placement}
+						@overlay-click=${() => handlePopover(item, index)}
+					>
+						<f-div padding="large">
+							<f-text>
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet enim ut
+								mi egestas, non efficitur odio varius. Phasellus accumsan pellentesque ex vehicula
+								tristique.
+							</f-text>
+							<f-text>
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet enim ut
+								mi egestas, non efficitur odio varius. Phasellus accumsan pellentesque ex vehicula
+								tristique.
+							</f-text>
+						</f-div>
+					</f-popover>
+					<f-div
+						id=${item.target?.substring(1)}
+						state="primary"
+						padding="large"
+						variant="curved"
+						width="hug-content"
+						clickable
+						@click=${() => handlePopover(item, index)}
+					>
+						<f-text size="large">${item.title}</f-text>
+					</f-div>
+				`;
+			})}
+		</f-div>`;
+	},
+
+	name: "state",
+
+	parameters: {
+		docs: {
+			inlineStories: false,
+			iframeHeight: 300
+		}
+	}
+};
 export const Flags = {
 	render: () => {
 		const [openFlag, setOpenFlag] = useState(false);