feat: Add UbAlertIconDirective to alert components

adrian-ub · Jul 29, 2024 · e7b5b25 · e7b5b25
1 parent cad7fa2
commit e7b5b25
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 10 deletions.
diff --git a/apps/www/src/registry/default/example/alert-demo.ts b/apps/www/src/registry/default/example/alert-demo.ts
@@ -6,6 +6,7 @@ import {
   UbAlertDirective,
   UbAlertTitleDirective,
   UbAlertDescriptionDirective,
+  UbAlertIconDirective,
 } from "@/registry/default/ui/alert.directive";
 
 @Component({
@@ -15,11 +16,12 @@ import {
     UbAlertDirective,
     UbAlertTitleDirective,
     UbAlertDescriptionDirective,
+    UbAlertIconDirective,
   ],
   viewProviders: [provideIcons({ lucideTerminal })],
   template: `
     <div ubAlert>
-      <ng-icon name="lucideTerminal" class="h-4 w-4" />
+      <ng-icon ubAlertIcon name="lucideTerminal" class="h-4 w-4" />
       <h5 ubAlertTitle>Heads up!</h5>
       <div ubAlertDescription>
         You can add components and dependencies to your app using the cli.

diff --git a/apps/www/src/registry/default/example/alert-destructive.ts b/apps/www/src/registry/default/example/alert-destructive.ts
@@ -6,6 +6,7 @@ import {
   UbAlertDirective,
   UbAlertTitleDirective,
   UbAlertDescriptionDirective,
+  UbAlertIconDirective,
 } from "@/registry/default/ui/alert.directive";
 
 @Component({
@@ -15,11 +16,12 @@ import {
     UbAlertDirective,
     UbAlertTitleDirective,
     UbAlertDescriptionDirective,
+    UbAlertIconDirective,
   ],
   viewProviders: [provideIcons({ lucideTerminal })],
   template: `
     <div ubAlert variant="destructive">
-      <ng-icon name="lucideTerminal" class="h-4 w-4" />
+      <ng-icon ubAlertIcon name="lucideTerminal" class="h-4 w-4" />
       <h5 ubAlertTitle>Heads up!</h5>
       <div ubAlertDescription>
         You can add components and dependencies to your app using the cli.

diff --git a/apps/www/src/registry/default/ui/alert.directive.ts b/apps/www/src/registry/default/ui/alert.directive.ts
@@ -5,13 +5,13 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border p-4 [&>[ubAlertIcon]~*]:pl-7 [&>[ubAlertIcon]+div]:translate-y-[-3px] [&>[ubAlertIcon]]:absolute [&>[ubAlertIcon]]:left-4 [&>[ubAlertIcon]]:top-4 [&>[ubAlertIcon]]:text-foreground",
   {
     variants: {
       variant: {
         default: "bg-background text-foreground",
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+          "border-destructive/50 text-destructive dark:border-destructive [&>[ubAlertIcon]]:text-destructive",
       },
     },
     defaultVariants: {
@@ -40,6 +40,12 @@ export class UbAlertDirective {
   );
 }
 
+@Directive({
+  standalone: true,
+  selector: "[ubAlertIcon]",
+})
+export class UbAlertIconDirective {}
+
 @Directive({
   selector: "h5[ubAlertTitle]",
   standalone: true,

diff --git a/apps/www/src/registry/new-york/example/alert-demo.ts b/apps/www/src/registry/new-york/example/alert-demo.ts
@@ -6,6 +6,7 @@ import {
   UbAlertDirective,
   UbAlertTitleDirective,
   UbAlertDescriptionDirective,
+  UbAlertIconDirective,
 } from "@/registry/new-york/ui/alert.directive";
 
 @Component({
@@ -15,11 +16,12 @@ import {
     UbAlertDirective,
     UbAlertTitleDirective,
     UbAlertDescriptionDirective,
+    UbAlertIconDirective,
   ],
   viewProviders: [provideIcons({ lucideRocket })],
   template: `
     <div ubAlert>
-      <ng-icon name="lucideRocket" class="h-4 w-4" />
+      <ng-icon ubAlertIcon name="lucideRocket" class="h-4 w-4" />
       <h5 ubAlertTitle>Heads up!</h5>
       <div ubAlertDescription>
         You can add components and dependencies to your app using the cli.

diff --git a/apps/www/src/registry/new-york/example/alert-destructive.ts b/apps/www/src/registry/new-york/example/alert-destructive.ts
@@ -1,11 +1,12 @@
 import { Component } from "@angular/core";
 import { NgIconComponent, provideIcons } from "@ng-icons/core";
-import { lucideTerminal } from "@ng-icons/lucide";
+import { lucideRocket } from "@ng-icons/lucide";
 
 import {
   UbAlertDirective,
   UbAlertTitleDirective,
   UbAlertDescriptionDirective,
+  UbAlertIconDirective,
 } from "@/registry/new-york/ui/alert.directive";
 
 @Component({
@@ -15,11 +16,12 @@ import {
     UbAlertDirective,
     UbAlertTitleDirective,
     UbAlertDescriptionDirective,
+    UbAlertIconDirective,
   ],
-  viewProviders: [provideIcons({ lucideTerminal })],
+  viewProviders: [provideIcons({ lucideRocket })],
   template: `
     <div ubAlert variant="destructive">
-      <ng-icon name="lucideTerminal" class="h-4 w-4" />
+      <ng-icon ubAlertIcon name="lucideRocket" class="h-4 w-4" />
       <h5 ubAlertTitle>Heads up!</h5>
       <div ubAlertDescription>
         You can add components and dependencies to your app using the cli.

diff --git a/apps/www/src/registry/new-york/ui/alert.directive.ts b/apps/www/src/registry/new-york/ui/alert.directive.ts
@@ -5,13 +5,13 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>[ubAlertIcon]+div]:translate-y-[-3px] [&>[ubAlertIcon]]:absolute [&>[ubAlertIcon]]:left-4 [&>[ubAlertIcon]]:top-4 [&>[ubAlertIcon]]:text-foreground [&>[ubAlertIcon]~*]:pl-7",
   {
     variants: {
       variant: {
         default: "bg-background text-foreground",
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+          "border-destructive/50 text-destructive dark:border-destructive [&>[ubAlertIcon]]:text-destructive",
       },
     },
     defaultVariants: {
@@ -40,6 +40,12 @@ export class UbAlertDirective {
   );
 }
 
+@Directive({
+  standalone: true,
+  selector: "[ubAlertIcon]",
+})
+export class UbAlertIconDirective {}
+
 @Directive({
   selector: "h5[ubAlertTitle]",
   standalone: true,