feat(design): allow individual button type imports (#3328)

Author: xelaint

apps/daffio/src/app/core/nav/header/header.component.ts

@@ -19,7 +19,10 @@ import {
 } from 'rxjs';
 
 import { DaffLogoModule } from '@daffodil/branding';
-import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import {
+  DaffButtonComponent,
+  DaffIconButtonComponent,
+} from '@daffodil/design/button';
 import { DaffRouterDataService } from '@daffodil/router';
 import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
 
@@ -42,7 +45,8 @@ import { DaffioNavLink } from '../link/type';
     DaffLogoModule,
     DaffThemeSwitchButtonModule,
     NgFor,
-    DAFF_BUTTON_COMPONENTS,
+    DaffButtonComponent,
+    DaffIconButtonComponent,
     FaIconComponent,
     AsyncPipe,
   ],

apps/daffio/src/app/docs/design/pages/overview/overview.component.ts

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
-import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DaffButtonComponent } from '@daffodil/design/button';
 import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero';
 
@@ -16,7 +16,7 @@ import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero';
   standalone: true,
   imports: [
     DAFF_CONTAINER_COMPONENTS,
-    DAFF_BUTTON_COMPONENTS,
+    DaffButtonComponent,
     DAFF_HERO_COMPONENTS,
     RouterLink,
   ],

apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.ts

@@ -18,7 +18,7 @@ import {
   DaffInputModule,
   DaffNativeSelectModule,
 } from '@daffodil/design';
-import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DaffButtonComponent } from '@daffodil/design/button';
 
 import { DemoGeographyAddressSummaryComponent } from '../../../../geography/components/address-summary/address-summary.component';
 import { DemoCheckoutAddressFormComponent } from '../../forms/address/components/address-form/address-form.component';
@@ -38,7 +38,7 @@ import { PaymentInfoFormFactory } from '../payment-info-form/factories/payment-i
     DaffInputModule,
     DaffNativeSelectModule,
     DemoCheckoutPaymentInfoFormComponent,
-    DAFF_BUTTON_COMPONENTS,
+    DaffButtonComponent,
     DaffCheckboxModule,
     DemoCheckoutAddressFormComponent,
     DemoGeographyAddressSummaryComponent,

apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DaffButtonComponent } from '@daffodil/design/button';
 import { DaffPersonalAddress } from '@daffodil/geography';
 
 import { DemoCheckoutAddressFormComponent } from '../../forms/address/components/address-form/address-form.component';
@@ -25,7 +25,7 @@ import {
   imports: [
     DemoCheckoutAddressFormComponent,
     ReactiveFormsModule,
-    DAFF_BUTTON_COMPONENTS,
+    DaffButtonComponent,
   ],
 })
 export class DemoCheckoutShippingAddressFormComponent implements OnInit {

apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.ts

@@ -8,7 +8,7 @@ import {
 import { ReactiveFormsModule } from '@angular/forms';
 
 import { DaffCartShippingRate } from '@daffodil/cart';
-import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DaffButtonComponent } from '@daffodil/design/button';
 
 import { DemoCheckoutAddressFormComponent } from '../../forms/address/components/address-form/address-form.component';
 import { DemoCheckoutShippingOptionsComponent } from '../shipping-options/components/shipping-options/shipping-options.component';
@@ -27,7 +27,7 @@ import {
     DemoCheckoutAddressFormComponent,
     DemoCheckoutShippingOptionsComponent,
     ReactiveFormsModule,
-    DAFF_BUTTON_COMPONENTS,
+    DaffButtonComponent,
   ],
 })
 export class DemoCheckoutShippingFormComponent implements OnInit {

libs/design/button/README.md

@@ -34,15 +34,15 @@ Native `<button>` or `<a>` elements are always used in order to provide an easy,
 ## Usage
 
 ### Within a standalone component
-To use button in a standalone component, import it directly into your custom component:
+To use button in a standalone component, import it directly into your custom component. Buttons can be imported individually or all together by using `DAFF_BUTTON_COMPONENTS`:
 
 ```ts
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
   standalone: true,
   imports: [
-    DAFF_BUTTON_COMPONENTS,
+    DaffButtonComponent,
   ],
 })
 export class CustomComponent {}

libs/design/button/examples/src/basic-button/basic-button.component.ts

@@ -8,7 +8,7 @@ import {
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
 
-import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DaffButtonComponent } from '@daffodil/design/button';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -24,7 +24,7 @@ import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DAFF_BUTTON_COMPONENTS,
+    DaffButtonComponent,
     FaIconComponent,
   ],
 })

libs/design/button/examples/src/flat-button/flat-button.component.ts

@@ -8,7 +8,7 @@ import {
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
 
-import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DaffFlatButtonComponent } from '@daffodil/design/button';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -24,7 +24,7 @@ import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DAFF_BUTTON_COMPONENTS,
+    DaffFlatButtonComponent,
     FaIconComponent,
   ],
 })

libs/design/button/examples/src/icon-button/icon-button.component.ts

@@ -5,7 +5,7 @@ import {
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 
-import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DaffIconButtonComponent } from '@daffodil/design/button';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -21,7 +21,7 @@ import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DAFF_BUTTON_COMPONENTS,
+    DaffIconButtonComponent,
     FaIconComponent,
   ],
 })

libs/design/button/examples/src/raised-button/raised-button.component.ts

@@ -8,7 +8,7 @@ import {
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
 
-import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DaffRaisedButtonComponent } from '@daffodil/design/button';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -24,7 +24,7 @@ import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DAFF_BUTTON_COMPONENTS,
+    DaffRaisedButtonComponent,
     FaIconComponent,
   ],
 })

libs/design/button/examples/src/stroked-button/stroked-button.component.ts

@@ -8,7 +8,7 @@ import {
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
 
-import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DaffStrokedButtonComponent } from '@daffodil/design/button';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -24,7 +24,7 @@ import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DAFF_BUTTON_COMPONENTS,
+    DaffStrokedButtonComponent,
     FaIconComponent,
   ],
 })

libs/design/button/examples/src/underline-button/underline-button.component.ts

@@ -8,7 +8,7 @@ import {
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
 
-import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DaffUnderlineButtonComponent } from '@daffodil/design/button';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -24,7 +24,7 @@ import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DAFF_BUTTON_COMPONENTS,
+    DaffUnderlineButtonComponent,
     FaIconComponent,
   ],
 })