feat(badge): add top/right/bottom/left positions to component (#20)

projects/kit/src/components/badge/badge.component.scss

@@ -1,36 +1,70 @@
 :root {
-  --zen-badge-position: -5px;
+  --zen-badge-offset: unset;
+  --zen-badge-offset-x: unset;
+  --zen-badge-offset-y: unset;
 }
 
 zen-badge,
 [zenBadge] {
   display: inline-flex;
   position: relative;
 
-  [topRight],
   [topLeft],
+  [top],
+  [topRight],
+  [right],
   [bottomRight],
-  [bottomLeft] {
+  [bottom],
+  [bottomLeft],
+  [left] {
     position: absolute;
   }
 
+  [topLeft] {
+    top: var(--zen-badge-offset-y, calc(var(--zen-badge-offset, 0px) * -1));
+    left: var(--zen-badge-offset-x, calc(var(--zen-badge-offset, 0px) * -1));
+    transform: translateY(-50%) translateX(-50%);
+  }
+
+  [top] {
+    top: var(--zen-badge-offset-y, calc(var(--zen-badge-offset, 0px) * -1));
+    left: 50%;
+    transform: translateY(-50%) translateX(-50%);
+  }
+
   [topRight] {
-    top: var(--zen-badge-position);
-    right: var(--zen-badge-position);
+    top: var(--zen-badge-offset-y, calc(var(--zen-badge-offset, 0px) * -1));
+    right: var(--zen-badge-offset-x, calc(var(--zen-badge-offset, 0px) * -1));
+    transform: translateY(-50%) translateX(50%);
   }
 
-  [topLeft] {
-    top: var(--zen-badge-position);
-    left: var(--zen-badge-position);
+  [right] {
+    right: var(--zen-badge-offset-x, calc(var(--zen-badge-offset, 0px) * -1));
+    top: 50%;
+    transform: translateY(-50%) translateX(50%);
   }
 
   [bottomRight] {
-    bottom: var(--zen-badge-position);
-    right: var(--zen-badge-position);
+    bottom: var(--zen-badge-offset-y, calc(var(--zen-badge-offset, 0px) * -1));
+    right: var(--zen-badge-offset-x, calc(var(--zen-badge-offset, 0px) * -1));
+    transform: translateY(50%) translateX(50%);
+  }
+
+  [bottom] {
+    bottom: var(--zen-badge-offset-y, calc(var(--zen-badge-offset, 0px) * -1));
+    left: 50%;
+    transform: translateY(50%) translateX(-50%);
   }
 
   [bottomLeft] {
-    bottom: var(--zen-badge-position);
-    left: var(--zen-badge-position);
+    bottom: var(--zen-badge-offset-y, calc(var(--zen-badge-offset, 0px) * -1));
+    left: var(--zen-badge-offset-x, calc(var(--zen-badge-offset, 0px) * -1));
+    transform: translateY(50%) translateX(-50%);
+  }
+
+  [left] {
+    left: var(--zen-badge-offset-x, calc(var(--zen-badge-offset, 0px) * -1));
+    top: 50%;
+    transform: translateY(-50%) translateX(-50%);
   }
 }

projects/kit/src/components/badge/badge.component.ts

@@ -8,10 +8,14 @@ import {
   selector: 'zen-badge,[zenBadge]',
   standalone: true,
   template: `
-    <ng-content select="[topRight]" />
     <ng-content select="[topLeft]" />
-    <ng-content select="[bottomRight]" />
+    <ng-content select="[top]" />
+    <ng-content select="[topRight]" />
+    <ng-content select="[left]" />
+    <ng-content select="[right]" />
     <ng-content select="[bottomLeft]" />
+    <ng-content select="[bottom]" />
+    <ng-content select="[bottomRight]" />
     <ng-content />
   `,
   styleUrl: './badge.component.scss',

src/app/pages/badge/badge.component.html

@@ -14,10 +14,13 @@
 <br />
 <br />
 
-<button zenBadge>
-  <div topLeft>1</div>
-  <div topRight>2</div>
-  <div bottomLeft>3</div>
-  <div bottomRight>4</div>
-  A VERY, VERY, VERY... LONG TEXT IN BUTTON
-</button>
+<div class="square" zenBadge>
+  <b class="upper-case" topLeft>top-Left</b>
+  <b class="upper-case" top>top</b>
+  <b class="upper-case" topRight>top-Right</b>
+  <b class="upper-case" left>left</b>
+  <b class="upper-case" right>right</b>
+  <b class="upper-case" bottomLeft>bottom-Left</b>
+  <b class="upper-case" bottom>bottom</b>
+  <b class="upper-case" bottomRight>bottom-Right</b>
+</div>

src/app/pages/badge/badge.component.scss

@@ -0,0 +1,22 @@
+zen-badge,
+.square {
+  margin-inline: 4rem;
+}
+
+zen-badge img {
+  border-radius: 8px;
+}
+
+.square {
+  $size: 256px;
+
+  height: $size;
+  width: $size;
+  background-color: #ececec;
+  border: 1px solid #e4e3e3;
+  border-radius: 16px;
+}
+
+.upper-case {
+  text-transform: uppercase;
+}

src/app/pages/badge/badge.component.ts

@@ -1,12 +1,13 @@
+import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ZenBadgeComponent } from '@ng-zen/kit/components';
-import { NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'app-badge',
   standalone: true,
   imports: [ZenBadgeComponent, NgOptimizedImage],
   templateUrl: './badge.component.html',
+  styleUrl: 'badge.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BadgeComponent {}