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

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

@@ -1,382 +0,0 @@
-@use "sass:color";
-@use "sass:list";
-@use './../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: block;
-  font-family: $base-font;
-}
-
-.frg-accordion {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  background: transparent;
-
-  &.is-animated {
-    .frg-accordion__panel-wrapper {
-      transition: grid-template-rows 0.22s ease, opacity 0.22s ease;
-    }
-
-    .frg-accordion__panel {
-      transition: padding 0.22s ease, opacity 0.22s ease;
-    }
-  }
-
-  &__item {
-    position: relative;
-    background: transparent;
-    overflow: hidden;
-    border-bottom: 1px solid $frg-accordion-border-color;
-    transition:
-      background-color 0.2s ease,
-      box-shadow 0.2s ease;
-
-    &.is-expanded {
-      background: $frg-accordion-header-background-color;
-    }
-
-    &.is-disabled {
-      opacity: 0.65;
-      cursor: not-allowed;
-      background: color.scale($color-light, $lightness: -1%);
-      border-bottom-color: $frg-accordion-border-color;
-
-      & .frg-accordion__header {
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &__header {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border: none;
-    gap: 1rem;
-    padding: 0.9rem 1rem;
-    background: transparent;
-    color: $color-dark;
-    cursor: pointer;
-    text-align: left;
-    transition: color 0.2s ease, background-color 0.2s ease;
-
-    &:hover {
-      color: $color-dark-neutral;
-      background-color: color.scale($color-light, $lightness: -25%);
-    }
-
-    &:focus-visible {
-      outline: none;
-      box-shadow: inset 0 -2px 0 $color-primary;
-    }
-
-    .frg-accordion__header-content {
-      display: flex;
-      align-items: center;
-      gap: 0.85rem;
-      flex: 1 1 auto;
-      min-width: 0;
-    }
-
-    .frg-accordion__icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 2.5rem;
-      height: 2.5rem;
-      border-radius: 0.65rem;
-      background-color: color.scale($color-light, $lightness: -4%);
-      color: $color-dark;
-      flex-shrink: 0;
-    }
-
-    .frg-accordion__icon-shape {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-size: $font-size-lg;
-      line-height: 1;
-      width: 100%;
-      height: 100%;
-    }
-
-    .frg-accordion__heading {
-      display: flex;
-      flex-direction: column;
-      gap: 0.15rem;
-      min-width: 0;
-    }
-
-    .frg-accordion__title {
-      font-size: $font-size-md;
-      font-weight: 600;
-      line-height: 1.3;
-    }
-
-    .frg-accordion__subtitle {
-      font-size: $font-size-sm;
-      color: $color-dark-soft;
-      line-height: 1.2;
-    }
-
-    .frg-accordion__chevron {
-      width: 1.5rem;
-      height: 1.5rem;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      transition: transform 0.16s ease;
-
-      &.is-custom {
-        width: auto;
-        height: auto;
-      }
-    }
-
-    .frg-accordion__chevron-icon {
-      display: inline-block;
-      width: 0.5rem;
-      height: 0.5rem;
-      border-right: 2px solid $color-dark-neutral;
-      border-bottom: 2px solid $color-dark-neutral;
-      transform: rotate(45deg);
-      transition: transform 0.16s ease, color 0.2s ease, border-color 0.2s ease;
-    }
-
-    .frg-accordion__chevron.is-custom .frg-accordion__chevron-icon {
-      display: none;
-    }
-  }
-
-  &__item.is-expanded {
-    .frg-accordion__chevron-icon {
-      transform: rotate(225deg);
-    }
-
-    .frg-accordion__chevron.is-custom {
-      transform: rotate(180deg);
-    }
-  }
-
-  &__panel-wrapper {
-    display: grid;
-    grid-template-rows: 0fr;
-    opacity: 0;
-    overflow: hidden;
-    background-color: $color-light;
-
-    &.is-open {
-      grid-template-rows: 1fr;
-      opacity: 1;
-    }
-  }
-
-  &__panel {
-    padding: 0 1rem;
-    color: $color-dark-neutral;
-    outline: none;
-    line-height: 1.5;
-    overflow: hidden;
-    opacity: 0;
-
-    &.is-open {
-      padding: 0.9rem 1rem 1rem;
-      opacity: 1;
-    }
-
-    &:focus-visible {
-      outline: 2px solid $color-primary;
-      outline-offset: 2px;
-    }
-  }
-}
-
-.frg-accordion__item[data-size='medium'] {
-  .frg-accordion__header {
-    padding: 0.75rem 0.9rem;
-    gap: 0.85rem;
-  }
-
-  .frg-accordion__icon {
-    width: 2.25rem;
-    height: 2.25rem;
-  }
-
-  .frg-accordion__title {
-    font-size: $font-size-sm;
-  }
-
-  .frg-accordion__subtitle {
-    font-size: $font-size-xs;
-  }
-
-  .frg-accordion__chevron {
-    width: 1.35rem;
-    height: 1.35rem;
-  }
-
-  .frg-accordion__panel {
-    padding: 0 0.9rem;
-
-    &.is-open {
-      padding: 0.75rem 0.9rem 0.9rem;
-    }
-  }
-}
-
-.frg-accordion__item[data-size='small'] {
-  .frg-accordion__header {
-    padding: 0.6rem 0.75rem;
-    gap: 0.65rem;
-  }
-
-  .frg-accordion__icon {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 0.5rem;
-  }
-
-  .frg-accordion__title {
-    font-size: $font-size-xs;
-  }
-
-  .frg-accordion__subtitle {
-    font-size: $font-size-2xs;
-  }
-
-  .frg-accordion__chevron {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
-  .frg-accordion__chevron-icon {
-    width: 0.45rem;
-    height: 0.45rem;
-  }
-
-  .frg-accordion__panel {
-    padding: 0 0.75rem;
-
-    &.is-open {
-      padding: 0.6rem 0.75rem 0.75rem;
-    }
-  }
-}
-
-$accordion-colors: (
-  'primary': $color-primary,
-  'secondary': $color-secondary,
-  'tertiary': $color-tertiary,
-  'info': $color-info,
-  'success': $color-success,
-  'warning': $color-warning,
-  'danger': $color-danger,
-  'dark': $color-dark,
-  'light': $color-light,
-  'outline-primary': $color-primary,
-  'outline-secondary': $color-secondary,
-  'outline-tertiary': $color-tertiary,
-  'outline-info': $color-info,
-  'outline-success': $color-success,
-  'outline-warning': $color-warning,
-  'outline-danger': $color-danger,
-  'outline-dark': $color-dark,
-  'outline-light': $color-light-soft,
-  'default': $color-dark-neutral
-);
-
-@each $variant, $tone in $accordion-colors {
-  .frg-accordion__item[data-style="#{$variant}"] {
-    $solid-variants: ('primary', 'secondary', 'tertiary', 'dark', 'light');
-    $outline-variants: (
-      'outline-primary',
-      'outline-secondary',
-      'outline-tertiary',
-      'outline-info',
-      'outline-success',
-      'outline-warning',
-      'outline-danger',
-      'outline-dark',
-      'outline-light'
-    );
-
-    @if list.index($outline-variants, $variant) {
-      border-bottom-color: color.scale($tone, $lightness: -5%);
-
-      .frg-accordion__panel-wrapper {
-        border-top-color: color.scale($tone, $lightness: -5%);
-      }
-    }
-
-    .frg-accordion__header {
-      @if list.index($solid-variants, $variant) {
-        $header-tone: if($variant == 'dark', color.scale($tone, $lightness: 10%), $tone);
-        background-color: $header-tone;
-        color: if($variant == 'light', $color-dark, $color-light);
-
-        &:hover {
-          background-color: color.scale($header-tone, $lightness: if($variant == 'light', -6%, -4%));
-        }
-
-        .frg-accordion__subtitle {
-          color: if(
-            $variant == 'light',
-            color.scale($color-dark-soft, $lightness: -10%),
-            color.scale($color-light, $lightness: -8%)
-          );
-        }
-
-        .frg-accordion__icon {
-          background-color: color.scale($header-tone, $lightness: if($variant == 'light', 8%, -8%));
-          color: if($variant == 'light', $color-dark, $color-light);
-        }
-      } @else {
-        color: if($variant == 'light', $color-dark, color.scale($tone, $lightness: -5%));
-        &:hover {
-          background-color: color.scale($tone, $lightness: 90%);
-        }
-      }
-    }
-
-    .frg-accordion__chevron-icon {
-      @if list.index($solid-variants, $variant) {
-        border-color: if($variant == 'light', $color-dark, $color-light);
-      } @else {
-        border-color: if($variant == 'light', $color-dark-soft, color.scale($tone, $lightness: -5%));
-      }
-    }
-
-    &.is-expanded {
-      box-shadow: none;
-    }
-
-    &.is-disabled {
-      border-bottom-color: $frg-accordion-border-color;
-
-      .frg-accordion__panel-wrapper {
-        border-top-color: $frg-accordion-border-color;
-      }
-
-      .frg-accordion__header {
-        background-color: $color-light;
-        color: $color-dark;
-
-        .frg-accordion__subtitle {
-          color: $color-dark-soft;
-        }
-
-        .frg-accordion__icon {
-          background-color: color.scale($color-light, $lightness: -6%);
-          color: $color-dark-soft;
-        }
-      }
-
-      .frg-accordion__chevron-icon {
-        border-color: $color-dark-soft;
-      }
-    }
-  }
-}

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

@@ -1,147 +0,0 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { AccordionComponent } from './accordion.component';
-import { AccordionItem } from './accordion.type';
-
-@Component({
-  standalone: true,
-  imports: [AccordionComponent],
-  template: `
-    <frg-accordion
-      [items]="items"
-      [multi]="multi"
-      [expandedIds]="expandedIds"
-      [toggleOnHeaderClick]="toggleOnHeaderClick">
-    </frg-accordion>
-  `
-})
-class TestHostComponent {
-  items: AccordionItem[] = [];
-  multi = false;
-  expandedIds: string[] = [];
-  toggleOnHeaderClick = true;
-}
-
-describe('AccordionComponent', () => {
-  let fixture: ComponentFixture<TestHostComponent>;
-
-  const getAccordion = () =>
-    fixture.debugElement.query(By.directive(AccordionComponent)).componentInstance as AccordionComponent;
-
-  const getHeaderButtons = () =>
-    fixture.debugElement.queryAll(By.css('.frg-accordion__header'));
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TestHostComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestHostComponent);
-  });
-
-  it('renders titles and subtitles', () => {
-    fixture.componentInstance.items = [
-      { id: 'a1', title: 'First', subtitle: 'Alpha', content: 'Content A' },
-      { id: 'a2', title: 'Second', content: 'Content B' }
-    ];
-
-    fixture.detectChanges();
-
-    const titles = fixture.debugElement.queryAll(By.css('.frg-accordion__title'));
-    const subtitles = fixture.debugElement.queryAll(By.css('.frg-accordion__subtitle'));
-
-    expect(titles.length).toBe(2);
-    expect(titles[0].nativeElement.textContent).toContain('First');
-    expect(titles[1].nativeElement.textContent).toContain('Second');
-    expect(subtitles.length).toBe(1);
-    expect(subtitles[0].nativeElement.textContent).toContain('Alpha');
-  });
-
-  it('toggles an item on click and emits events', () => {
-    fixture.componentInstance.items = [
-      { id: 'a1', title: 'First', content: 'Content A' },
-      { id: 'a2', title: 'Second', content: 'Content B' }
-    ];
-
-    fixture.detectChanges();
-
-    const accordion = getAccordion();
-    const emitSpy = spyOn(accordion.expandedIdsChange, 'emit');
-    const toggledSpy = spyOn(accordion.toggled, 'emit');
-
-    getHeaderButtons()[0].nativeElement.click();
-    fixture.detectChanges();
-
-    expect(emitSpy).toHaveBeenCalledWith(['a1']);
-    expect(toggledSpy).toHaveBeenCalled();
-    expect(accordion.isExpanded('a1')).toBeTrue();
-  });
-
-  it('does not toggle when the item is disabled', () => {
-    fixture.componentInstance.items = [
-      { id: 'a1', title: 'First', content: 'Content A', disabled: true }
-    ];
-
-    fixture.detectChanges();
-
-    const accordion = getAccordion();
-    const emitSpy = spyOn(accordion.expandedIdsChange, 'emit');
-
-    getHeaderButtons()[0].nativeElement.click();
-    fixture.detectChanges();
-
-    expect(emitSpy).not.toHaveBeenCalled();
-    expect(accordion.isExpanded('a1')).toBeFalse();
-  });
-
-  it('supports multi-expand mode', () => {
-    fixture.componentInstance.items = [
-      { id: 'a1', title: 'First', content: 'Content A' },
-      { id: 'a2', title: 'Second', content: 'Content B' }
-    ];
-    fixture.componentInstance.multi = true;
-
-    fixture.detectChanges();
-
-    const accordion = getAccordion();
-    getHeaderButtons()[0].nativeElement.click();
-    getHeaderButtons()[1].nativeElement.click();
-    fixture.detectChanges();
-
-    expect(accordion.isExpanded('a1')).toBeTrue();
-    expect(accordion.isExpanded('a2')).toBeTrue();
-    expect(accordion.expandedIds.length).toBe(2);
-  });
-
-  it('ignores header clicks when toggleOnHeaderClick is false', () => {
-    fixture.componentInstance.items = [
-      { id: 'a1', title: 'First', content: 'Content A' }
-    ];
-    fixture.componentInstance.toggleOnHeaderClick = false;
-
-    fixture.detectChanges();
-
-    const accordion = getAccordion();
-    getHeaderButtons()[0].nativeElement.click();
-    fixture.detectChanges();
-
-    expect(accordion.isExpanded('a1')).toBeFalse();
-  });
-
-  it('toggles on Enter key press', () => {
-    fixture.componentInstance.items = [
-      { id: 'a1', title: 'First', content: 'Content A' }
-    ];
-
-    fixture.detectChanges();
-
-    const accordion = getAccordion();
-    const header = getHeaderButtons()[0].nativeElement as HTMLButtonElement;
-
-    header.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-    fixture.detectChanges();
-
-    expect(accordion.isExpanded('a1')).toBeTrue();
-  });
-});