refactor(badge): update variants and their corresponding styles (#249)

docs/dev/components/elements-config.json

@@ -36,8 +36,9 @@
   "tap-badge": {
     "propertyDefaultValues": {
       "value": "درخواست",
-      "variant": "info",
-      "priority": "low"
+      "color": "info",
+      "priority": "low",
+      "variant": "pill"
     },
     "slotKnobs": {}
   },
@@ -107,8 +108,8 @@
         "Icon Button": "<tap-icon-button slot=\"default\" title=\"Icon Button\" size=\"medium\"><tap-icon-default></tap-icon-default></tap-icon-button>"
       },
       "badge": {
-        "Pill Badge": "<tap-badge slot=\"badge\" value=\"‍۱۰\" variant=\"info\"></tap-badge>",
-        "Dot Badge": "<tap-badge slot=\"badge\" type=\"dot\" variant=\"info\"></tap-badge>"
+        "Pill Badge": "<tap-badge slot=\"badge\" variant=\"numeral\" value=\"‍۱۰\" color=\"info\"></tap-badge>",
+        "Dot Badge": "<tap-badge slot=\"badge\" variant=\"dot\" color=\"info\"></tap-badge>"
       }
     }
   },

packages/web-components/src/badge-wrapper/badge-wrapper.style.ts

@@ -1,16 +1,86 @@
 import { css } from "lit";
 
 export default css`
-  .wrapper {
+  .root.left .badge {
+    transform: translate(-50%, -50%);
+  }
+
+  .root.right .badge {
+    transform: translate(50%, -50%);
+  }
+
+  .root.rectangle.top .badge {
+    top: 0;
+  }
+
+  .root.rectangle.middle .badge {
+    top: 50%;
+  }
+
+  .root.rectangle.left .badge {
+    left: 0;
+  }
+
+  .root.rectangle.right .badge {
+    right: 0;
+  }
+
+  .root.circle.top .badge {
+    top: 14.5%;
+  }
+
+  .root.circle.middle .badge {
+    top: 50%;
+  }
+
+  .root.circle:not(.middle).left .badge {
+    left: 14.5%;
+  }
+
+  .root.circle:not(.middle).right .badge {
+    right: 14.5%;
+  }
+
+  .root.pill.top .badge {
+    top: 6px;
+  }
+
+  .root.pill.middle .badge {
+    top: 50%;
+  }
+
+  .root.pill:not(.middle).left .badge {
+    left: 6px;
+  }
+
+  .root.pill:not(.middle).right .badge {
+    right: 6px;
+  }
+
+  .root.pill.middle.left .badge {
+    left: 0;
+  }
+
+  .root.pill.middle.right .badge {
+    right: 0;
+  }
+
+  .root {
     position: relative;
+
     display: inline-flex;
+    flex-shrink: 0;
+
+    vertical-align: middle;
+
+    z-index: 2;
   }
 
   .badge {
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
     position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(-50%, -30%);
   }
 `;

packages/web-components/src/badge-wrapper/badge-wrapper.ts

@@ -1,19 +1,39 @@
 import { html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { Slots } from "./constants";
 
 export class BadgeWrapper extends LitElement {
+  @property({ type: String, attribute: "anchor-shape" })
+  public anchorShape: "rectangle" | "circle" | "pill" = "rectangle";
+
+  @property({ type: String, attribute: "badge-side" })
+  public badgeSide: "left" | "right" = "right";
+
+  @property({ type: String, attribute: "badge-alignment" })
+  public badgeAlignment: "top" | "middle" = "top";
+
   protected override render() {
+    const rootClasses = classMap({
+      root: true,
+      [this.anchorShape]: true,
+      [this.badgeAlignment]: true,
+      [this.badgeSide]: true,
+    });
+
     return html`
-      <span
-        class="wrapper"
-        part="wrapper"
+      <div
+        class=${rootClasses}
+        part="root"
       >
         <slot></slot>
-        <slot
-          class="badge"
-          name="badge"
-          part="badge"
-        ></slot>
-      </span>
+        <div
+          class=${Slots.BADGE}
+          part=${Slots.BADGE}
+        >
+          <slot name=${Slots.BADGE}></slot>
+        </div>
+      </div>
     `;
   }
 }

packages/web-components/src/badge-wrapper/constants.ts

@@ -0,0 +1,4 @@
+export const Slots = {
+  DEFAULT: "",
+  BADGE: "badge",
+};

packages/web-components/src/badge-wrapper/index.ts

@@ -2,14 +2,17 @@ import { customElement } from "lit/decorators.js";
 import { BadgeWrapper } from "./badge-wrapper";
 import styles from "./badge-wrapper.style";
 
+export { Slots } from "./constants";
+
 /**
- * @summary A wrapper component to position a badge relative to its content.
+ * @summary A wrapper component to position a badge relative to an anchor.
  *
- * @slot - The default slot for the main content.
- * @slot badge - The slot for the badge to be positioned.
+ * @prop {"rectangle" | "circle" | "pill"} [anchor-shape="rectangle"] - The shape of the anchor.
+ * @prop {"left" | "right"} [badge-side="right"] - The horizontal placement of the badge.
+ * @prop {"top" | "middle"} [badge-alignment="alignment"] - The vertical alignment of the badge.
  *
- * @csspart [wrapper] - The container that wraps the main content and the badge.
- * @csspart [badge] - The container that positions the badge.
+ * @slot - The default slot for the anchor element.
+ * @slot badge - The slot for the badge to be positioned.
  */
 @customElement("tap-badge-wrapper")
 export class TapBadgeWrapper extends BadgeWrapper {