FLOW-448 comments and file name changes

packages/flow-core/package.json

@@ -12,7 +12,7 @@
     "meta-build": "./meta-build.sh",
     "build": "vite build --emptyOutDir && tsc -emitDeclarationOnly",
     "build:watch": "concurrently --kill-others \"vite build --emptyOutDir --watch\" \"tsc --watch\"",
-    "sync-colors": "FIGMA_TOKEN=206330-1bbeb796-39d3-408e-ab7a-b6c8551111a5 FILE_KEY=v59oSoU65b7yfW0hGfYqUj node ./figma/syncColors.js",
+    "sync-colors": "FIGMA_TOKEN=206330-1bbeb796-39d3-408e-ab7a-b6c8551111a5 FILE_KEY=v59oSoU65b7yfW0hGfYqUj node ./figma/sync-colors.js",
     "sync-md-file": "FIGMA_TOKEN=206330-1bbeb796-39d3-408e-ab7a-b6c8551111a5 FILE_KEY=v59oSoU65b7yfW0hGfYqUj node ./figma/syncMdFile.js",
     "lint:eslint": "eslint 'src/**/*.ts' './custom-elements.vue.ts'",
     "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" && wca analyze src --format vscode --outFile html.html-data.json",

packages/flow-core/src/components/f-button/f-button.scss

@@ -2,6 +2,9 @@
 @use "sass:math";
 @import "./../../mixins/scss/mixins";
 
+/**
+$states map created to hold values of different states
+**/
 $states: (
   "primary": (
     "background": var(--color-primary-default),
@@ -30,6 +33,7 @@ $states: (
   ),
 );
 
+// $sizes will all values related to different sizes
 $sizes: (
   "x-small": (
     "height": 20px,
@@ -60,12 +64,16 @@ $sizes: (
     "loaderSize": 24px,
   ),
 );
-
+/**
+:host selects the host element. 
+in this case it is `f-button`
+**/
 :host {
   height: fit-content;
   display: inline-flex;
   flex: 0 0 auto;
   vertical-align: top;
+  // inner element used to apply all styles
   .f-button {
     @include base();
     cursor: pointer;
@@ -79,6 +87,7 @@ $sizes: (
     vertical-align: top;
     width: fit-content;
 
+    // class to appply shimmer . This class is applied through javascript please check f-button.ts
     &.hasShimmer {
       @include shimmer-self();
     }
@@ -92,10 +101,12 @@ $sizes: (
             $color,
             "background"
           ); // added to match width of outline category
+        // hover changes background
         &:hover {
           background-color: map.get($color, "hover");
           border: 1px solid map.get($color, "hover");
         }
+        // if loading attribute specified then change background, border, color and svg
         &[loading] {
           background-color: map.get($color, "loading");
           border: 1px solid map.get($color, "loading");
@@ -106,6 +117,7 @@ $sizes: (
         }
       }
 
+      // outline category states styles, where backgrounds are transparent
       &[state="#{$state}"][category="outline"] {
         background-color: transparent;
         border: 1px solid map.get($color, "background");
@@ -123,7 +135,7 @@ $sizes: (
           }
         }
       }
-
+      //transparent category with transparent background and border
       &[state="#{$state}"][category="transparent"] {
         background-color: transparent;
         border: 1px solid transparent;
@@ -172,6 +184,7 @@ $sizes: (
       }
     }
 
+    // if variant is curved then apply 4px border radius
     &[variant="curved"] {
       border-radius: 4px;
     }
@@ -181,11 +194,11 @@ $sizes: (
       flex: 1 1 auto;
       width: 100%;
     }
-
+    // disabled button will use `disabled()` mixins
     &[disabled] {
       @include disabled();
     }
-
+    // loading use `rotate` mixins
     &[loading] {
       @include rotate("svg");
       pointer-events: none;
@@ -203,6 +216,7 @@ $sizes: (
   }
 }
 
+// applies styles to only f-button element.
 f-button {
   &[variant="block"] {
     display: flex;

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

@@ -1,12 +1,16 @@
 import { html, fixture, expect } from "@open-wc/testing";
 import IconPack from "@cldcvr/flow-system-icon/dist/types/icon-pack";
 
+// import flow-core elements
 import "@cldcvr/flow-core";
 
 import { FButton, FIcon, ConfigUtil, FCounter } from "@cldcvr/flow-core";
+// importing `loadingSVG` to cross check
 import loadingSVG from "./../../mixins/svg/loader";
 
+// setting icon pack for testing icon related test cases
 ConfigUtil.setConfig({ iconPack: IconPack });
+
 describe("f-button", () => {
   it("is defined", () => {
     const el = document.createElement("f-button");

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

@@ -109,13 +109,26 @@ export class FButton extends FElement {
   }
 
   render() {
+    /**
+     * checks if host element's `:before` has shimmer by accessing  computedstyles
+     */
     const hasShimmer =
       (getComputedStyle(this, "::before") as any)["animation-name"] ===
       "shimmer";
+
+    /**
+     * if hasShimmer true then add class
+     */
     if (hasShimmer) {
       this.classList.add("hasShimmer");
     }
+    /**
+     * validate properties before render
+     */
     this.validateProperties();
+    /**
+     * classes to apply on icon , based on category
+     */
     const iconClasses = {
       "fill-button-surface": this.category === "fill",
     };
@@ -174,6 +187,10 @@ export class FButton extends FElement {
         ${unsafeSVG(loader)}${this.label}
       </button>`;
     }
+
+    /**
+     * Final html to render
+     */
     return html`<button
       class=${classMap({ "f-button": true, hasShimmer })}
       category=${this.category}
@@ -189,7 +206,7 @@ export class FButton extends FElement {
 }
 
 /**
- * ts to know and define element
+ * Required for typescript
  */
 declare global {
   interface HTMLElementTagNameMap {

packages/flow-core/src/components/f-counter/f-counter.scss

@@ -1,7 +1,11 @@
 @use "sass:math";
 @use "sass:map";
+// common mixins imported from this file
 @import "./../../mixins/scss/mixins";
 
+/**
+$sizes map will hold all possible values
+**/
 $sizes: (
   "small": (
     "height": 12px,
@@ -22,7 +26,9 @@ $sizes: (
     "padding": 0px 8px,
   ),
 );
-
+/**
+$states map will hold all possible values of different states
+**/
 $states: (
   "primary": (
     "label": var(--color-surface-default),
@@ -50,25 +56,32 @@ $states: (
     "border": var(--color-neutral-subtle),
   ),
 );
-
+/**
+:host selects the host element. 
+in this case it is `f-counter`
+**/
 :host {
   display: inline-flex;
   vertical-align: top;
-
+  // inner element to apply styles on
   div.f-counter {
+    // edge if it is used in `f-button` component
     &.fill-button-surface[state] {
       background-color: var(--color-surface-default);
       color: var(--color-text-default);
     }
+    // used in `f-icon-button` for special case
     &.absolute-counter {
       position: absolute;
     }
+    // Important :  always include base mixins
     @include base();
     display: inline-flex;
     justify-content: center;
     align-items: center;
     font-weight: bold;
 
+    // iterating over sizes and creating size specific css
     @each $size, $value in $sizes {
       &[size="#{$size}"] {
         height: map.get($value, "height");
@@ -79,7 +92,7 @@ $states: (
         svg {
           height: map.get($value, "height") - 8px;
         }
-
+        // used in `f-icon-button` for special case
         &.absolute-counter {
           transform: translateX(-50%) translateY(10%);
           &.packed-large {
@@ -104,7 +117,7 @@ $states: (
         }
       }
     }
-
+    // iterating over states and creating state specific css
     @each $state, $value in $states {
       &[state="#{$state}"] {
         --color: #{map.get($value, "label")};
@@ -122,11 +135,11 @@ $states: (
         }
       }
     }
-
+    // including disabled mixins
     &[disabled] {
       @include disabled();
     }
-
+    // including ratate mixins
     &[loading] {
       @include rotate("svg");
     }

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

@@ -1,11 +1,13 @@
 import { html, fixture, expect } from "@open-wc/testing";
+// importing `loadingSVG` to cross check
 import loadingSVG from "./../../mixins/svg/loader";
-
+// import flow-core elements
 import "@cldcvr/flow-core";
 
 import { FCounter } from "@cldcvr/flow-core";
 
 describe("f-counter", () => {
+  // check if component is defined
   it("is defined", () => {
     const el = document.createElement("f-counter");
     expect(el).instanceOf(FCounter);
@@ -48,13 +50,17 @@ describe("f-counter", () => {
   });
 
   it("label for Billions", async () => {
-    const el = await fixture(html` <f-counter label="13404000000"></f-counter> `);
+    const el = await fixture(
+      html` <f-counter label="13404000000"></f-counter> `
+    );
     const descendant = el.shadowRoot!.querySelector(".f-counter")!;
     expect(descendant.textContent?.trim()).to.equal("13B");
   });
 
   it("label for Trillions", async () => {
-    const el = await fixture(html` <f-counter label="16500040000000"></f-counter> `);
+    const el = await fixture(
+      html` <f-counter label="16500040000000"></f-counter> `
+    );
     const descendant = el.shadowRoot!.querySelector(".f-counter")!;
     expect(descendant.textContent?.trim()).to.equal("17T");
   });
@@ -77,7 +83,9 @@ describe("f-counter", () => {
     try {
       await fixture(html` <f-counter></f-counter>`);
     } catch (e) {
-      expect((e as Error).message).to.equal("f-counter : label is mandatory field");
+      expect((e as Error).message).to.equal(
+        "f-counter : label is mandatory field"
+      );
     }
   });
 });

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

@@ -52,6 +52,7 @@ export class FCounter extends FElement {
       throw new Error("f-counter : label is mandatory field");
     }
   }
+  // this will abbreviate long labels to short
   get computedLabel() {
     if (this.label < 10) {
       return `0${this.label}`;
@@ -89,14 +90,20 @@ export class FCounter extends FElement {
     return fixedNumber;
   }
   render() {
+    // validate props/attributes and throws errors if required
     this.validateProperties();
+    // classes to apply on inner element
     const classes: Record<string, boolean> = {
       "f-counter": true,
     };
+    // merging host classes
     this.classList.forEach((cl) => {
       classes[cl] = true;
     });
 
+    /**
+     * Final html to render
+     */
     return html`<div
       class=${classMap(classes)}
       size=${this.size}
@@ -108,6 +115,9 @@ export class FCounter extends FElement {
     </div>`;
   }
 }
+/**
+ * Required for typescript
+ */
 declare global {
   interface HTMLElementTagNameMap {
     "f-counter": FCounter;