стилизация компонента button

.gitignore

@@ -52,6 +52,6 @@ api-generator/typedoc.json
 # файлы в этим папках компилятся и должны создаваться при сборке
 src/assets/components/themes
 
-./storybook-static
-./debug-storybook.log
-./documentation.json
+/storybook-static
+/debug-storybook.log
+/documentation.json

angular.json

@@ -117,5 +117,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/components/button/button-extra.component.ts

@@ -0,0 +1,73 @@
+import { Component, Input } from '@angular/core';
+import { Button } from 'primeng/button';
+import { Badge } from 'primeng/badge';
+
+export type ExtraButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text' | 'link';
+export type ExtraButtonSeverity = 'success' | 'warning' | 'danger' | 'info' | null;
+export type ExtraButtonSize = 'small' | 'base' | 'large' | 'xlarge';
+export type ExtraButtonIconPos = 'prefix' | 'postfix' | null;
+
+@Component({
+  selector: 'extra-button',
+  standalone: true,
+  imports: [Button, Badge],
+  styleUrl: './button.component.scss',
+  template: `
+    <p-button
+      [label]="iconOnly ? '' : label"
+      [disabled]="disabled"
+      [loading]="loading"
+      [size]="primeSize"
+      [styleClass]="size === 'xlarge' ? 'p-button-xlg' : ''"
+      [rounded]="rounded"
+      [outlined]="variant === 'outlined'"
+      [text]="variant === 'text' || text"
+      [link]="variant === 'link'"
+      [icon]="icon"
+      [iconPos]="primeIconPos"
+      [severity]="primeSeverity"
+      [badge]="showBadge ? (badge || ' ') : null"
+      [badgeSeverity]="badgeSeverity"
+      [fluid]="fluid"
+      [ariaLabel]="ariaLabel"
+      [autofocus]="autofocus"
+      [tabindex]="tabindex"
+    ></p-button>
+  `
+})
+export class ExtraButtonComponent {
+  @Input() label = 'Button';
+  @Input() variant: ExtraButtonVariant = 'primary';
+  @Input() severity: ExtraButtonSeverity = null;
+  @Input() size: ExtraButtonSize = 'base';
+  @Input() rounded = false;
+  @Input() iconPos: ExtraButtonIconPos = null;
+  @Input() iconOnly = false;
+  @Input() icon = '';
+  @Input() disabled = false;
+  @Input() loading = false;
+  @Input() badge = '';
+  @Input() badgeSeverity: 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | null = null;
+  @Input() showBadge = false;
+  @Input() fluid = false;
+  @Input() ariaLabel: string | undefined = undefined;
+  @Input() autofocus = false;
+  @Input() tabindex: number | undefined = undefined;
+  @Input() text = false;
+
+  get primeSize(): 'small' | 'large' | undefined {
+    if (this.size === 'small') return 'small';
+    if (this.size === 'large') return 'large';
+    return undefined;
+  }
+
+  get primeIconPos(): 'left' | 'right' {
+    return this.iconPos === 'postfix' ? 'right' : 'left';
+  }
+
+  get primeSeverity(): string | null {
+    if (this.variant === 'secondary') return 'secondary';
+    if (this.severity === 'warning') return 'warn';
+    return this.severity;
+  }
+}

src/components/button/button.component.html

@@ -0,0 +1,3 @@
+<p-button [size]="innerSize" [styleClass]="size === 'xlarge' ? 'p-button-xlg' : ''" [text]="text">
+  <ng-content></ng-content>
+</p-button>

src/components/button/button.component.scss

@@ -0,0 +1,15 @@
+:host ::ng-deep {
+  .p-button {
+    position: relative;
+    overflow: visible;
+
+    .p-badge {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      transform: translate(50%, -50%);
+      transform-origin: 100% 0;
+      margin: 0;
+    }
+  }
+}

src/components/button/button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/components/button/button.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+import { Button } from 'primeng/button';
+
+/**
+ * как использовать
+ * ```
+ * <app-button size="xlarge">
+ *   <div>content</div> // это то, на что заменится <ng-content></ng-content> внутри компонента
+ *   </app-button>
+ *```
+ */
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  imports: [Button],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.scss'
+})
+export class ButtonComponent {
+  @Input() size!: 'small' | undefined | 'large' | 'xlarge';
+
+  @Input() text: boolean = false;
+
+  get innerSize(): 'small' | undefined | 'large' {
+    return (this.size === 'xlarge' || !this.size) ? undefined : (this.size as 'small' | 'large');
+  }
+}

src/prime-preset/map-tokens.ts

@@ -1,45 +1,15 @@
 import { Preset } from '@primeuix/themes/types';
+import type { ComponentsDesignTokens } from '@primeuix/themes/types';
 import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
 
-import primitive from './tokens/primitive-default.json';
-import semantic from './tokens/semantic-default.json';
-import components from './tokens/components-default.json';
-import themeLight from './tokens/theme-light.json';
-import themeDark from './tokens/theme-dark.json';
-import sizingBase from './tokens/sizing-base.json';
-import sizingSm from './tokens/sizing-sm.json';
-import sizingLg from './tokens/sizing-lg.json';
-import sizingXlg from './tokens/sizing-xlg.json';
-
-import button from './tokens/components/button.json';
+import primitive from './tokens/primitive';
+import semantic from './tokens/semantic';
+import components from './tokens/components';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
-  primitive,
-  semantic,
-  components: { ...components, ...button }
+  primitive: primitive as AuraBaseDesignTokens['primitive'],
+  semantic: semantic as unknown as AuraBaseDesignTokens['semantic'],
+  components: components as ComponentsDesignTokens
 };
 
-if (presetTokens?.semantic) {
-  presetTokens.semantic.colorScheme = {
-    light: themeLight,
-    dark: themeDark
-  };
-}
-
-presetTokens.semantic = { ...presetTokens.semantic, ...sizingBase };
-
-const semanticLink: Record<string, any> = presetTokens.semantic;
-
-function applySizing(semantic: Record<string, any>, sizing: Record<string, any>, sizeKey: 'sm' | 'lg' | 'xlg') {
-  Object.keys(sizing).forEach((key) => {
-    if (semantic[key]) {
-      semantic[key][sizeKey] = sizing[key]?.root ?? sizing[key];
-    }
-  });
-}
-
-applySizing(semanticLink, sizingSm, 'sm');
-applySizing(semanticLink, sizingLg, 'lg');
-applySizing(semanticLink, sizingXlg, 'xlg');
-
 export default presetTokens;