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

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

@@ -1,445 +0,0 @@
-@use "sass:color";
-@use './../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: inline-block;
-
-  button {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    border: none;
-    margin: 0;
-    padding: 0;
-    background: none;
-    color: inherit;
-    font: inherit;
-    cursor: pointer;
-    outline: none;
-  }
-
-  .frg-btn {
-    padding: .25rem 1rem;
-    min-height: 2.5rem;
-    line-height: 1;
-    margin: .5rem;
-    font-family: $base-font;
-    font-size: 1rem;
-    font-weight: 500;
-    border: 2px solid transparent;
-    box-shadow: 2px 2px 5px rgba($color-dark-soft, 0.4);
-    border-radius: 5px;
-    transition: all 0.15s ease-in-out;
-
-    &--small {
-      font-size: 0.875rem;
-      padding: 0 .75rem;
-      min-height: 2rem;
-      .frg-btn__icon-pill {
-        width: 1rem;
-        height: 1rem;
-        font-size: 0.5rem;
-      }
-    }
-
-    &--large {
-      font-size: 1.125rem;
-      padding: 0 1.25rem;
-      min-height: 3rem;
-      .frg-btn__icon-pill {
-        width: 1.8rem;
-        height: 1.8rem;
-        font-size: 1rem;
-      }
-    }
-
-    &--pill {
-      border-radius: 999px;
-      padding-left: 1.1rem;
-      padding-right: 1.1rem;
-    }
-
-    &:hover {
-      box-shadow: 0 1px 2px rgba($color-dark, 0.2);
-      transform: translateY(1px);
-      cursor: pointer;
-    }
-
-    &:focus-visible {
-      outline-offset: 5px;
-    }
-
-    &[disabled='true'] {
-      border-color: $color-disabled;
-      background-color: $color-disabled !important;
-      color: $color-dark-soft !important;
-      opacity: 0.6;
-      pointer-events: none;
-    }
-    
-    &__ghost {
-      box-shadow: none;
-      color: $color-dark;
-      background-color: transparent;
-    }
-
-    &__ghost:hover {
-      text-decoration: underline;
-      box-shadow: none;
-      cursor: pointer;
-    }
-
-    &__icon {
-      margin: 0;
-      padding: 0;
-      min-height: auto;
-      border: none;
-      box-shadow: none;
-      background-color: transparent;
-      color: $color-dark-neutral;
-
-      span {
-        transition: color 0.15s ease, transform 0.15s ease;
-        transform: scale(1);
-        display: inline-block;
-      }
-    }
-
-    &__icon:hover {
-      text-decoration: none;
-      box-shadow: none;
-      cursor: pointer;
-
-      span {
-        transform: scale(1.06);
-      }
-    }
-
-    &__icon-primary { color: $color-primary; }
-    &__icon-secondary { color: $color-secondary; }
-    &__icon-tertiary { color: $color-tertiary; }
-    &__icon-info { color: $color-info; }
-    &__icon-success { color: $color-success; }
-    &__icon-warning { color: $color-warning; }
-    &__icon-danger { color: $color-danger; }
-    &__icon-dark { color: $color-dark-neutral; }
-    &__icon-light { color: $color-light; }
-
-    &__icon-primary:hover { color: color.scale($color-primary, $lightness: -15%); }
-    &__icon-secondary:hover { color: color.scale($color-secondary, $lightness: -15%); }
-    &__icon-tertiary:hover { color: color.scale($color-tertiary, $lightness: -15%); }
-    &__icon-info:hover { color: color.scale($color-info, $lightness: -15%); }
-    &__icon-success:hover { color: color.scale($color-success, $lightness: -15%); }
-    &__icon-warning:hover { color: color.scale($color-warning, $lightness: -15%); }
-    &__icon-danger:hover { color: color.scale($color-danger, $lightness: -15%); }
-    &__icon-dark:hover { color: color.scale($color-dark-neutral, $lightness: 20%); }
-    &__icon-light:hover { color: color.scale($color-light, $lightness: -10%); }
-
-    &__icon-pill {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 1.5rem;
-      height: 1.5rem;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.2);
-      font-size: 0.75rem;
-      line-height: 1;
-      box-shadow: $box-shadow-sm;
-    }
-
-    &__icon-pill::before {
-      display: block;
-      line-height: 1;
-    }
-
-    &__primary {
-      color: $color-light;
-      background-color: $color-primary;
-    }
-
-    &__primary:hover {
-      color: $color-light;
-      background-color: $color-primary-dark;
-    }
-
-    &__primary:focus-visible,
-    &__outline-primary:focus-visible {
-      outline: 3px solid $color-primary;
-      box-shadow: none;
-    }
-
-    &__secondary {
-      color: $color-light;
-      background-color: $color-secondary;
-    }
-
-    &__secondary:hover {
-      color: $color-light;
-      background-color: $color-secondary-dark;
-    }
-
-    &__secondary:focus-visible,
-    &__outline-secondary:focus-visible {
-      outline: 3px solid $color-secondary;
-      box-shadow: none;
-    }
-
-    &__tertiary {
-      color: $color-light;
-      background-color: $color-tertiary;
-    }
-
-    &__tertiary:hover {
-      color: $color-light;
-      background-color: $color-tertiary-dark;
-    }
-
-    &__tertiary:focus-visible,
-    &__outline-tertiary:focus-visible {
-      outline: 3px solid $color-tertiary;
-      box-shadow: none;
-    }
-
-    &__neutral {
-      color: $color-neutral-text;
-      background-color: $color-neutral;
-    }
-
-    &__neutral:hover {
-      color: $color-neutral-text;
-      background-color: color.scale($color-neutral, $lightness: -4%);
-    }
-
-    &__neutral:focus-visible {
-      outline: 3px solid color.scale($color-neutral, $lightness: -10%);
-      box-shadow: none;
-    }
-
-    &__light {
-      color: $color-dark-soft;
-      background-color: $color-light;
-    }
-
-    &__light:hover {
-      color: $color-light;
-      background-color: $color-dark;
-    }
-
-    &__light:focus-visible,
-    &__outline-light:focus-visible {
-      outline: 3px solid $color-light;
-      box-shadow: none;
-    }
-
-    &__dark {
-      color: $color-light;
-      background-color: $color-dark;
-    }
-
-    &__dark:hover {
-      color: $color-dark;
-      background-color: $color-light;
-    }
-
-    &__dark:focus-visible,
-    &__outline-dark:focus-visible {
-      outline: 3px solid $color-dark;
-      box-shadow: none;
-    }
-
-    &__info {
-      color: $color-light;
-      background-color: $color-info;
-    }
-
-    &__info:hover {
-      color: $color-light;
-      background-color: color.scale($color-info, $lightness: -15%);
-    }
-
-    &__info:focus-visible,
-    &__outline-info:focus-visible {
-      outline: 3px solid $color-info;
-      box-shadow: none;
-    }
-
-
-    &__success {
-      color: $color-light;
-      background-color: $color-success;
-    }
-
-    &__success:hover {
-      color: $color-light;
-      background-color: color.scale($color-success, $lightness: -15%);
-    }
-
-    &__success:focus-visible,
-    &__outline-success:focus-visible {
-      outline: 3px solid $color-success;
-      box-shadow: none;
-    }
-
-    &__warning {
-      color: $color-light;
-      background-color: $color-warning;
-    }
-
-    &__warning:hover {
-      color: $color-light;
-      background-color: color.scale($color-warning, $lightness: -15%);
-    }
-
-    &__warning:focus-visible,
-    &__outline-warning:focus-visible {
-      outline: 3px solid $color-warning;
-      box-shadow: none;
-    }
-
-    &__danger {
-      color: $color-light;
-      background-color: $color-danger;
-    }
-
-    &__danger:hover {
-      color: $color-light;
-      background-color: color.scale($color-danger, $lightness: -15%);
-    }
-
-    &__danger:focus-visible,
-    &__outline-danger:focus-visible {
-      outline: 3px solid $color-danger;
-      box-shadow: none;
-    }
-
-    &__outline-primary {
-      color: $color-dark;
-      border: 2px solid $color-primary;
-      background-color: transparent;
-    }
-
-    &__outline-primary:hover {
-      color: $color-light;
-      background-color: $color-primary;
-    }
-
-    &__outline-secondary {
-      color: $color-dark;
-      border: 2px solid $color-secondary;
-      background-color: transparent;
-    }
-
-    &__outline-secondary:hover {
-      color: $color-light;
-      background-color: $color-secondary;
-    }
-
-    &__outline-tertiary {
-      color: $color-dark;
-      border: 2px solid $color-tertiary;
-      background-color: transparent;
-    }
-
-    &__outline-tertiary:hover {
-      color: $color-light;
-      background-color: $color-tertiary;
-    }
-
-     &__outline-light {
-      color: $color-light;
-      border: 2px solid $color-light;
-      background-color: transparent;
-    }
-
-    &__outline-light:hover {
-      color: $color-dark;
-      background-color: $color-light;
-    }
-
-    &__outline-dark {
-      color: $color-dark;
-      border: 2px solid $color-dark;
-      background-color: transparent;
-    }
-
-    &__outline-dark:hover {
-      color: $color-light;
-      background-color: $color-dark;
-    }
-
-     &__outline-info {
-      color: $color-dark;
-      border: 2px solid $color-info;
-      background-color: transparent;
-    }
-
-    &__outline-info:hover {
-      color: $color-light;
-      background-color: $color-info;
-    }
-
-    &__outline-success {
-      color: $color-dark;
-      border: 2px solid $color-success;
-      background-color: transparent;
-    }
-
-    &__outline-success:hover {
-      color: $color-light;
-      background-color: $color-success;
-    }
-
-    &__outline-warning {
-      color: $color-dark;
-      border: 2px solid $color-warning;
-      background-color: transparent;
-    }
-
-    &__outline-warning:hover {
-      color: $color-light;
-      background-color: $color-warning;
-    }
-
-    &__outline-danger {
-      color: $color-dark;
-      border: 2px solid $color-danger;
-      background-color: transparent;
-    }
-
-    &__outline-danger:hover {
-      color: $color-light;
-      background-color: $color-danger;
-    }
-
-    &__primary:active,
-    &__outline-primary:active {
-      background-color: color.scale($color-primary, $lightness: -20%);
-    }
-
-    &__secondary:active,
-    &__outline-secondary:active {
-      background-color: color.scale($color-secondary, $lightness: -20%);
-    }
-
-    &__tertiary:active,
-    &__outline-tertiary:active {
-      background-color: color.scale($color-tertiary, $lightness: -20%);
-    }
-
-    &__success:active,
-    &__outline-success:active {
-      background-color: color.scale($color-success, $lightness: -20%);
-    }
-
-    &__warning:active,
-    &__outline-warning:active {
-      background-color: color.scale($color-warning, $lightness: -20%);
-    }
-
-    &__danger:active,
-    &__outline-danger:active {
-      background-color: color.scale($color-danger, $lightness: -20%);
-    }
-  }
-}

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

@@ -1,99 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { RouterTestingModule } from '@angular/router/testing';
-import { ButtonComponent } from './button.component';
-
-describe('ButtonComponent', () => {
-  let fixture: ComponentFixture<ButtonComponent>;
-  let component: ButtonComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ButtonComponent, RouterTestingModule]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ButtonComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('renders text when provided', () => {
-    component.text = 'Click me';
-
-    fixture.detectChanges();
-
-    const textEl = fixture.debugElement.query(By.css('span'));
-    expect(textEl.nativeElement.textContent).toContain('Click me');
-  });
-
-  it('renders icon span when iconClass is provided', () => {
-    component.iconClass = 'fa fa-star';
-
-    fixture.detectChanges();
-
-    const iconEl = fixture.debugElement.query(By.css('span.fa'));
-    expect(iconEl).toBeTruthy();
-  });
-
-  it('applies aria-label when provided', () => {
-    component.ariaLabel = 'Icon action';
-    component.iconClass = 'fa fa-star';
-
-    fixture.detectChanges();
-
-    const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
-    expect(button.getAttribute('aria-label')).toBe('Icon action');
-  });
-
-  it('applies iconStyleType classes', () => {
-    component.iconClass = 'fa fa-star';
-    component.iconStyleType = 'primary';
-
-    fixture.detectChanges();
-
-    const iconEl = fixture.debugElement.query(By.css('span.fa'));
-    expect(iconEl.nativeElement.classList).toContain('frg-btn__icon-primary');
-  });
-
-  it('applies container classes based on icon position', () => {
-    component.iconPosition = 'top';
-
-    fixture.detectChanges();
-
-    const container = fixture.debugElement.query(By.css('button > div'));
-    expect(container.nativeElement.classList).toContain('flex-column-reverse');
-  });
-
-  it('emits clickEvent when clicked and not disabled', () => {
-    const emitSpy = spyOn(component.clickEvent, 'emit');
-
-    fixture.detectChanges();
-
-    const button = fixture.debugElement.query(By.css('button'));
-    button.nativeElement.click();
-
-    expect(emitSpy).toHaveBeenCalled();
-  });
-
-  it('does not emit clickEvent when disabled', () => {
-    const emitSpy = spyOn(component.clickEvent, 'emit');
-    component.disabled = true;
-
-    fixture.detectChanges();
-
-    const button = fixture.debugElement.query(By.css('button'));
-    button.nativeElement.click();
-
-    expect(emitSpy).not.toHaveBeenCalled();
-  });
-
-  it('sets type and disabled attributes', () => {
-    component.type = 'submit';
-    component.disabled = true;
-
-    fixture.detectChanges();
-
-    const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
-    expect(button.getAttribute('type')).toBe('submit');
-    expect(button.getAttribute('disabled')).toBe('true');
-  });
-});

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

@@ -1,143 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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';