@tacdaed/fragments 1.0.0-beta.3 → 1.0.0-beta.4

package/src/lib/components/button/button.component.ts

@@ -0,0 +1,143 @@
+import { NgClass } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+import { TButtonIconPosition, TButtonShape, TButtonSize, TButtonStyle, TButtonType } from './button.type';
+import { TBaseStyle } from '../../types/base.types';
+
+/**
+ * Button component for displaying a button with various styles and behaviors
+ */
+@Component({
+  selector: 'frg-button',
+  imports: [NgClass, RouterLink, RouterLinkActive],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.scss'
+})
+export class ButtonComponent {
+  /**
+   * Unique identifier for the button
+   */
+  @Input() id: string = '';
+  /**
+   * CSS classes applied to the button element
+   */
+  @Input() class: string = '';
+  /**
+   * CSS classes for the text span
+   */
+  @Input() textClass: string = '';
+  /**
+   * CSS classes for the icon element
+   */
+  @Input() iconClass: string = '';
+  /**
+   * Optional style token for icon color
+   */
+  @Input() iconStyleType: TBaseStyle | undefined = undefined;
+  /**
+   * Position of the icon relative to the text
+   * @see TButtonIconPosition
+   */
+  @Input() iconPosition: TButtonIconPosition = 'left';
+  /**
+   * Type of the button
+   * @see TButtonType
+   */
+  @Input() type: TButtonType = 'button';
+  /**
+   * Size of the button
+   * @see TButtonSize
+   */
+  @Input() size: TButtonSize = 'medium';
+  /**
+   * Router link for navigation
+   */
+  @Input() buttonRouterLink: string | (string | number)[] | null | undefined = null;
+  /**
+   * CSS classes applied when the button is active
+   */
+  @Input() buttonRouterLinkActive: string | string[] = '';
+  /**
+   * Determines whether the button is disabled
+   */
+  @Input() disabled: boolean | null = null;
+  /**
+   * Style type of the button
+   * @see TButtonStyle
+   */
+  @Input() styleType: TButtonStyle = 'primary';
+  /**
+   * Shape of the button.
+   * @see TButtonShape
+   */
+  @Input() shape: TButtonShape = 'default';
+  /**
+   * Text content of the button
+   */
+  @Input() text: string = '';
+  /**
+   * Accessible label for icon-only buttons
+   */
+  @Input() ariaLabel: string = '';
+  /**
+   * Emits when the button is clicked
+   */
+  @Output() clickEvent: EventEmitter<void> = new EventEmitter();
+
+  /**
+   * CSS classes applied to the container element based on its position
+   * @see TButtonStyle
+   */
+  public get containerNgClass() {
+    return {
+      'flex-column-reverse': this.iconPosition === 'top',
+      'flex-row-reverse': this.iconPosition === 'left',
+      'flex-row': this.iconPosition === 'right',
+      'flex-column': this.iconPosition === 'bottom'
+    };
+  }
+
+  /**
+   * CSS classes applied to the icon element based on its position
+   * @see TButtonIconPosition
+   */
+  public get iconNgClass() {
+    return {
+      'mb-2': this.iconPosition === 'top',
+      'me-2': this.iconPosition === 'left',
+      'ms-2': this.iconPosition === 'right',
+      'mt-2': this.iconPosition === 'bottom'
+    };
+  }
+
+  /**
+   * Combined classes for icon color + spacing
+   */
+  public get iconClassMap() {
+    const hasText = !!this.text;
+    return {
+      'frg-btn__icon-primary': this.iconStyleType === 'primary',
+      'frg-btn__icon-secondary': this.iconStyleType === 'secondary',
+      'frg-btn__icon-tertiary': this.iconStyleType === 'tertiary',
+      'frg-btn__icon-info': this.iconStyleType === 'info',
+      'frg-btn__icon-success': this.iconStyleType === 'success',
+      'frg-btn__icon-warning': this.iconStyleType === 'warning',
+      'frg-btn__icon-danger': this.iconStyleType === 'danger',
+      'frg-btn__icon-dark': this.iconStyleType === 'dark',
+      'frg-btn__icon-light': this.iconStyleType === 'light',
+      'frg-btn__icon-pill': this.shape === 'pill' && hasText,
+      ...(hasText ? this.iconNgClass : {})
+    };
+  }
+
+  /**
+   * Emits when the button is clicked
+   */
+  onClick(): void {
+    if(!this.disabled) {
+      this.clickEvent.emit();
+    }
+  }
+
+}

package/src/lib/components/button/button.type.ts

@@ -0,0 +1,7 @@
+import { TBasePosition, TBaseSize, TBaseStyle } from '../../types/base.types';
+
+export type TButtonType = 'button' | 'reset' | 'submit';
+export type TButtonStyle = TBaseStyle | 'ghost' | 'icon' | 'neutral';
+export type TButtonSize = TBaseSize;
+export type TButtonIconPosition = TBasePosition;
+export type TButtonShape = 'default' | 'pill';

package/src/lib/components/card/card.component.html

@@ -0,0 +1,44 @@
+@if (!isClosed) {
+  <div
+    class="frg-card"
+    [ngClass]="{
+      'frg-card__primary': styleType === 'primary',
+      'frg-card__secondary': styleType === 'secondary',
+      'frg-card__tertiary': styleType === 'tertiary',
+      'frg-card__dark': styleType === 'dark',
+      'frg-card__light': styleType === 'light',
+      'frg-card__success': styleType === 'success',
+      'frg-card__warning': styleType === 'warning',
+      'frg-card__danger': styleType === 'danger',
+      'frg-card__outline-primary': styleType === 'outline-primary',
+      'frg-card__outline-secondary': styleType === 'outline-secondary',
+      'frg-card__outline-tertiary': styleType === 'outline-tertiary',
+      'frg-card__outline-dark': styleType === 'outline-dark',
+      'frg-card__outline-light': styleType === 'outline-light',
+      'frg-card__outline-success': styleType === 'outline-success',
+      'frg-card__outline-warning': styleType === 'outline-warning',
+      'frg-card__outline-danger': styleType === 'outline-danger'
+    }"
+  >
+    @if(hasCloseCard) {
+      <button
+        type="button"
+        class="frg-card__close-btn"
+        (click)="onCloseCard()"
+        aria-label="Close"
+      >
+        &times;
+      </button>
+    }
+
+    <div class="frg-card__head">
+      <ng-content select="[frg-card-head]"></ng-content>
+    </div>
+    <div class="frg-card__body">
+      <ng-content select="[frg-card-body]"></ng-content>
+    </div>
+    <div class="frg-card__footer">
+      <ng-content select="[frg-card-footer]"></ng-content>
+    </div>
+  </div>
+}

package/src/lib/components/card/card.component.scss

@@ -0,0 +1,114 @@
+@use '../../../../assets/styles/scss/variables' as *;
+
+:host {
+  .frg-card {
+    position: relative;
+    margin-top: 0;
+    border-radius: 0.25rem;
+    padding: 20px 1.5rem;
+    box-shadow:
+      0 1px 3px 0 rgba(0, 0, 0, 0.1),
+      0 1px 2px -1px rgba(0, 0, 0, 0.1);
+    transition: all 0.15s ease-in-out;
+    color: $color-dark;
+    background-color: $color-light;
+    font-family: $base-font;
+
+    &__primary {
+      color: $color-light;
+      background-color: $color-primary;
+    }
+
+    &__secondary {
+      color: $color-light;
+      background-color: $color-secondary;
+    }
+
+    &__tertiary {
+      color: $color-light;
+      background-color: $color-tertiary;
+    }
+
+    &__danger {
+      color: $color-light;
+      background-color: $color-danger;
+    }
+
+    &__warning {
+      color: $color-light;
+      background-color: $color-warning;
+    }
+
+    &__success {
+      color: $color-light;
+      background-color: $color-success;
+    }
+
+    // Outline variants
+    &__outline-primary {
+      color: $color-dark;
+      background-color: $color-light;
+      border: 2px solid $color-primary;
+    }
+
+    &__outline-secondary {
+      color: $color-dark;
+      background-color: $color-light;
+      border: 2px solid $color-secondary;
+    }
+
+    &__outline-tertiary {
+      color: $color-dark;
+      background-color: $color-light;
+      border: 2px solid $color-tertiary;
+    }
+
+    &__outline-danger {
+      color: $color-dark;
+      background-color: $color-light;
+      border: 2px solid $color-danger;
+    }
+
+    &__outline-warning {
+      color: $color-dark;
+      background-color: $color-light;
+      border: 2px solid $color-warning;
+    }
+
+    &__outline-success {
+      color: $color-dark;
+      background-color: $color-light;
+      border: 2px solid $color-success;
+    }
+
+    &__head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &__close-btn {
+      position: absolute;
+      top: .5rem;
+      right: .5rem;
+      background: transparent;
+      border: none;
+      color: $color-dark-soft;
+      font-size: 1.5rem;
+      line-height: 1;
+      cursor: pointer;
+      padding: 0.25rem 0.5rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2;
+
+      &:hover,
+      &:focus {
+        color: $color-dark;
+        outline: none;
+      }
+    }
+  }
+}

package/src/lib/components/card/card.component.spec.ts

@@ -0,0 +1,65 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { CardComponent } from './card.component';
+
+@Component({
+  standalone: true,
+  imports: [CardComponent],
+  template: `
+    <frg-card [styleType]="styleType" [hasCloseCard]="hasCloseCard" (closeCard)="closed = true">
+      <div frg-card-head>Head</div>
+      <div frg-card-body>Body</div>
+      <div frg-card-footer>Footer</div>
+    </frg-card>
+  `
+})
+class TestHostComponent {
+  styleType: any = 'default';
+  hasCloseCard = false;
+  closed = false;
+}
+
+describe('CardComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+  });
+
+  it('renders projected head, body, and footer content', () => {
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('.frg-card__head'))?.nativeElement.textContent).toContain('Head');
+    expect(fixture.debugElement.query(By.css('.frg-card__body'))?.nativeElement.textContent).toContain('Body');
+    expect(fixture.debugElement.query(By.css('.frg-card__footer'))?.nativeElement.textContent).toContain('Footer');
+  });
+
+  it('applies style classes based on styleType', () => {
+    fixture.componentInstance.styleType = 'primary';
+
+    fixture.detectChanges();
+
+    const card = fixture.debugElement.query(By.css('.frg-card'));
+    expect(card.nativeElement.classList).toContain('frg-card__primary');
+  });
+
+  it('shows and triggers close behavior when enabled', () => {
+    fixture.componentInstance.hasCloseCard = true;
+
+    fixture.detectChanges();
+
+    const closeBtn = fixture.debugElement.query(By.css('.frg-card__close-btn'));
+    expect(closeBtn).toBeTruthy();
+
+    closeBtn.nativeElement.click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.closed).toBeTrue();
+    expect(fixture.debugElement.query(By.css('.frg-card'))).toBeNull();
+  });
+});

package/src/lib/components/card/card.component.ts

@@ -0,0 +1,21 @@
+import { NgClass } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TCardStyle } from './card.type';
+
+@Component({
+  selector: 'frg-card',
+  imports: [NgClass],
+  templateUrl: './card.component.html',
+  styleUrl: './card.component.scss'
+})
+export class CardComponent {
+  @Input() styleType: TCardStyle = 'default';
+  @Input() hasCloseCard: boolean = false;
+  @Output() closeCard = new EventEmitter<void>();
+  isClosed = false;
+
+  onCloseCard() {
+    this.closeCard.emit();
+    this.isClosed = true;
+  }
+}

package/src/lib/components/card/card.type.ts

@@ -0,0 +1,3 @@
+import { TBaseStyle } from '../../types/base.types';
+
+export type TCardStyle = TBaseStyle;

package/src/lib/components/code-block/code-block.component.html

@@ -0,0 +1,55 @@
+@if (config) {
+  <div #container class="code-block">
+    @if (header) {
+      <div class="code-block__header">
+        <span class="code-block__header__title">{{ title }}</span>
+        @if (showCopyButton) {
+          <button
+            type="button"
+            class="code-block__header__action"
+            (click)="copyToClipboard()"
+            [attr.aria-label]="copied ? copiedLabel : copyLabel"
+          >
+            <span class="code-block__header__action-content" [class.is-copied]="copied">
+              @if (copied) {
+                <span class="code-block__header__action-label">{{ copiedLabel }}</span>
+              } @else {
+                <span class="fa-regular fa-copy" aria-hidden="true"></span>
+              }
+            </span>
+          </button>
+        }
+      </div>
+    }
+
+    @if (body) {
+      <div class="code-block__body">
+        @switch (type) {
+          @case ('text') {
+            <pre
+              #codeElement
+              class="language-{{ language || 'typescript' }}"
+              [attr.data-line]="highlightLines"
+            >
+              <code [textContent]="content"></code>
+            </pre>
+          }
+          @case ('component') {
+            @if (component) {
+              <ng-template
+                addComponent
+                [component]="component"
+                [inputComponent]="inputs"
+              ></ng-template>
+            }
+          }
+        }
+      </div>
+    }
+    @if (config.footer?.text) {
+      <div class="code-block__footer">
+        {{ config.footer?.text }}
+      </div>
+    }
+  </div>
+}

package/src/lib/components/code-block/code-block.component.scss

@@ -0,0 +1,122 @@
+@use './../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: block;
+
+  .code-block {
+    display: inline-block;
+    position: relative;
+    background: $color-dark;
+    box-shadow: $box-shadow-sm;
+    border-radius: .25rem;
+    min-width: 0; // Prevent overflow
+    max-width: 100%;
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-radius: .25rem .25rem 0 0;
+      gap: 0.25rem;
+      width: 100%;
+      height: 1.5rem;
+      background: $color-dark-neutral;
+      box-shadow: $box-shadow-sm;
+
+      &__title {
+        font-size: 0.7rem;
+        padding: 0 0.5rem;
+        font-weight: 300;
+        color: $color-light;
+      }
+
+      &__action {
+        border: 0;
+        background: transparent;
+        color: $color-light;
+        font-size: 0.7rem;
+        font-weight: 400;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
+
+      &__action:hover,
+      &__action:focus-visible {
+        color: $color-light-soft;
+      }
+
+      &__action-content {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 1.25rem;
+        transition: transform 0.2s ease, opacity 0.2s ease;
+      }
+
+      &__action-content.is-copied {
+        animation: code-block-copy-pop 0.35s ease;
+      }
+
+      &__action-label {
+        letter-spacing: 0.02em;
+      }
+    }
+
+    &__body {
+      color: $color-light;
+      text-align: left;
+      font-size: 0.75rem;
+      padding: 0.5rem 1rem;
+      white-space: pre;
+    }
+
+    &__footer {
+      padding: 0.5rem 1rem;
+      font-size: 0.6rem;
+      color: $color-light-soft;
+      background: $color-dark-neutral;
+      border-radius: 0 0 .25rem .25rem;
+    }
+
+    pre[class*='language-'] {
+      padding: 0;
+      margin: 0;
+      background: none;
+      box-shadow: none;
+    }
+  }
+
+  @keyframes code-block-copy-pop {
+    0% {
+      transform: scale(0.85);
+      opacity: 0.6;
+    }
+    60% {
+      transform: scale(1.08);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+pre.hljs {
+  scrollbar-width: thin;
+  scrollbar-color: $color-light-soft transparent;
+}
+
+pre.hljs::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+pre.hljs::-webkit-scrollbar-thumb {
+  background-color: $color-light-soft;
+  border-radius: 6px;
+}
+
+pre.hljs::-webkit-scrollbar-button {
+  display: none;
+}

package/src/lib/components/code-block/code-block.component.spec.ts

@@ -0,0 +1,81 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import hljs from 'highlight.js';
+import { CodeBlockComponent } from './code-block.component';
+import { CodeBlockConfig } from './code-block.interface';
+
+describe('CodeBlockComponent', () => {
+  let fixture: ComponentFixture<CodeBlockComponent>;
+  let component: CodeBlockComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CodeBlockComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CodeBlockComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('renders the header title when provided', () => {
+    component.config = {
+      header: { title: 'Example' },
+      body: { type: 'text', content: 'const a = 1;' }
+    } as CodeBlockConfig;
+
+    fixture.detectChanges();
+
+    const title = fixture.debugElement.query(By.css('.code-block__header__title'));
+    expect(title.nativeElement.textContent).toContain('Example');
+  });
+
+  it('renders the footer text when provided', () => {
+    component.config = {
+      header: { title: 'Example' },
+      body: { type: 'text', content: 'const a = 1;' },
+      footer: { text: 'Footer text' }
+    } as CodeBlockConfig;
+
+    fixture.detectChanges();
+
+    const footer = fixture.debugElement.query(By.css('.code-block__footer'));
+    expect(footer.nativeElement.textContent).toContain('Footer text');
+  });
+
+  it('highlights code after view init for text body', () => {
+    const highlightSpy = spyOn(hljs, 'highlightElement').and.callThrough();
+
+    component.config = {
+      header: { title: 'Example' },
+      body: { type: 'text', content: 'const a = 1;', language: 'typescript' }
+    } as CodeBlockConfig;
+
+    fixture.detectChanges();
+
+    expect(highlightSpy).toHaveBeenCalled();
+  });
+
+  it('adds line numbers when configured', () => {
+    const highlightSpy = spyOn(hljs, 'highlightElement').and.callThrough();
+
+    component.config = {
+      header: { title: 'Example' },
+      body: { type: 'text', content: 'first\nsecond', hasNumberLine: true }
+    } as CodeBlockConfig;
+
+    fixture.detectChanges();
+
+    const pre = fixture.debugElement.query(By.css('pre')).nativeElement as HTMLElement;
+    expect(pre.textContent).toContain('1 | first');
+    expect(pre.textContent).toContain('2 | second');
+    expect(highlightSpy).toHaveBeenCalled();
+  });
+
+  it('does not render when config is undefined', () => {
+    component.config = undefined;
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('.code-block'))).toBeNull();
+  });
+});