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

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

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

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

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

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

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

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

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

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

@@ -1,81 +0,0 @@
-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();
-  });
-});