free icon package added

.storybook/preview.js

@@ -1,9 +1,18 @@
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
+  backgrounds: {
+    default: "flow-dark",
+    values: [
+      {
+        name: "flow-dark",
+        value: "#202A36",
+      },
+    ],
+  },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

packages/flow-core/figma/syncColors.js

@@ -9,9 +9,13 @@ const fs = require("fs");
 const rgbToHex = (r, g, b) =>
   "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 
+/**
+ * This will generate /src/shared/_color-tokens.scss file and it is consumed in `f-element.scss`
+ * @param {*} colorTokens Json object of theme and color variables
+ */
 function generateTokenScss(colorTokens) {
-  const tokenFileName = `${__dirname}/../src/shared/_tokens.scss`;
-
+  const tokenFileName = `${__dirname}/../src/shared/_color-tokens.scss`;
+  const defaultSelector = `,:root`;
   //   let scss = `@layer default,custom;
   // @layer default { `;
   let scss = `
@@ -27,7 +31,7 @@ function generateTokenScss(colorTokens) {
     const tokenEntries = Object.entries(tokens);
 
     scss += `
-	[flow-element][theme="${theme}"]{ `;
+	[flow-element][theme="${theme}"]${theme === "f-dark" ? defaultSelector : ""}{ `;
 
     for (let [variable, value] of tokenEntries) {
       variable = `color-${variable}`;

packages/flow-core/package.json

@@ -24,7 +24,9 @@
     "lit"
   ],
   "dependencies": {
-    "lit": "^2.2.4"
+    "lit": "^2.2.4",
+    "rxjs": "^7.5.6",
+    "axios": "^0.27.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.5.7",
@@ -37,7 +39,6 @@
     "@web/dev-server-esbuild": "^0.3.0",
     "@web/dev-server-rollup": "0.3.18",
     "@web/test-runner": "^0.13.30",
-    "axios": "^0.27.2",
     "esbuild-sass-plugin": "2.2.6",
     "eslint": "^8.17.0",
     "lit-html": "^2.2.5",

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

@@ -23,34 +23,80 @@ $sizes: (
   "medium": 36px,
   "large": 44px,
 );
+$horizontal-padding: (
+  "x-small": 0px 8px,
+  "small": 0px 12px,
+  "medium": 0px 16px,
+  "large": 0px 20px,
+);
+
+$font-sizes: (
+  "x-small": 10px,
+  "small": 12px,
+  "medium": 14px,
+  "large": 16px,
+);
 f-button {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0px 20px;
   font-weight: 600;
   text-transform: uppercase;
-  font-size: 14px;
   color: var(--color-surface-default);
 
+  /**
+  * Iterating over states with variants
+  **/
   @each $state, $color in $states {
     &[state="#{$state}"][variant="fill"] {
       background-color: $color;
-
+      border: 1px solid $color; // added to match width of outline variant
       &:hover {
         background-color: map.get($states-hover-colors, $state);
       }
     }
+
+    &[state="#{$state}"][variant="outline"] {
+      background-color: transparent;
+      border: 1px solid $color;
+      color: $color;
+      &:hover {
+        border: 1px solid map.get($states-hover-colors, $state);
+        color: $color;
+      }
+    }
+
+    &[state="#{$state}"][variant="transparent"] {
+      background-color: transparent;
+      border: 1px solid transparent;
+      color: $color;
+      &:hover {
+        border: 1px solid transparent;
+        color: $color;
+      }
+    }
   }
 
+  /**
+  * Iterating over sizes with padding, fontsize, height
+  **/
   @each $size, $value in $sizes {
     &[size="#{$size}"] {
       height: $value;
-
+      padding: map.get($horizontal-padding, $size);
+      font-size: map.get($font-sizes, $size);
       &[shape="round"] {
         border-radius: math.div($value, 2);
       }
     }
   }
+
+  &[shape="curved"] {
+    border-radius: 4px;
+  }
+
+  &[shape="block"] {
+    display: flex;
+  }
 }

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

@@ -0,0 +1,3 @@
+f-counter {
+  display: inline-flex;
+}

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

@@ -0,0 +1,46 @@
+import { html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import eleStyle from "./f-counter.scss";
+import { FElement } from "./../../shared/f-element";
+
+@customElement("f-counter")
+export class FCounter extends FElement {
+  /**
+   * css loaded from scss file
+   */
+  static styles = [unsafeCSS(eleStyle)];
+  /**
+   * @attribute A counter label denotes the numeric count of the entity associated with it
+   */
+  @property({ type: String })
+  label!: string;
+
+  /**
+   * @attribute The medium size is the default.
+   */
+  @property({ reflect: true, type: String })
+  size?: "large" | "medium" | "small" = "medium";
+
+  /**
+   * @attribute The state of a counter helps in indicating the degree of emphasis of the parent component. The counter component inherits the state from the parent component. By default it is subtle.
+   */
+  @property({ reflect: true, type: String })
+  state?: "primary" | "subtle" | "success" | "warning" | "danger" | "neutral" =
+    "subtle";
+
+  /**
+   * @attribute Loader icon replaces the content of the counter .
+   */
+  @property({ reflect: true, type: Boolean })
+  loading?: boolean = false;
+
+  /**
+   * @attribute The disabled attribute can be set to keep a user from clicking on the counter.
+   */
+  @property({ reflect: true, type: Boolean })
+  disabled?: boolean = false;
+
+  render() {
+    return html`${this.label}`;
+  }
+}

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

@@ -0,0 +1,13 @@
+f-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: var(--color-icon-default);
+    stroke: none;
+    *[fill^="white"] {
+      fill: var(--color-icon-default);
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import { html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import eleStyle from "./f-icon.scss";
+import { FElement } from "./../../shared/f-element";
+import { unsafeSVG } from "lit-html/directives/unsafe-svg.js";
+import iconPack from "./../../../../flow-icon-free/dist/types";
+
+@customElement("f-icon")
+export class FIcon extends FElement {
+  /**
+   * css loaded from scss file
+   */
+  static styles = [unsafeCSS(eleStyle)];
+
+  private _source!: string;
+
+  /**
+   * @attribute Source property defines what will be displayed on the icon. For icon variant It can take the icon name from a library , any inline SVG or any URL for the image. For emoji, it takes emoji as inline text.
+   */
+  @property({
+    type: String,
+  })
+  get source() {
+    return this._source;
+  }
+  set source(value) {
+    this._source = iconPack[value];
+  }
+
+  render() {
+    return html`${unsafeSVG(this.source)}`;
+  }
+}

packages/flow-core/src/modules/config/index.ts

@@ -0,0 +1,30 @@
+import { Subject } from "rxjs";
+import { getThemeStyle } from "./../../utils";
+
+/**
+ * TODO :include font-family, icons
+ */
+export type FlowCoreConfig = {
+  theme: "f-dark" | "f-light";
+  iconPack: string;
+};
+
+let config: FlowCoreConfig = {
+  theme: "f-dark",
+  iconPack: "@cldcvr/flow-icon-free",
+};
+
+export const CONFIG_SUBJECT = new Subject<FlowCoreConfig>();
+
+export const ConfigUtil = {
+  getConfig() {
+    return config;
+  },
+  setConfig(cfg: Partial<FlowCoreConfig>) {
+    config = { ...config, ...cfg };
+    CONFIG_SUBJECT.next(config);
+  },
+  getThemeStyles() {
+    return getThemeStyle(`[flow-element][theme="${config.theme}"]`);
+  },
+};