-
Notifications
You must be signed in to change notification settings - Fork 174
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: accordion trigger is now a directive (#64)
* fix: accordion is now a directive * fix: moving with tab changes the activeitem of the keymanager * fix(accordion): accordion.component change to directive The accordion does not neet to be a component * fix(accordion): accordion.item change to directive * refactor(accordion): change transition to grid fr transition * docs(accordion): adjust examples to directives * docs: adjust to directives * fix: remove console logs * test(accordion): adjust e2e tests to directives * fix(icon): make icon take host classes into account * feat(accordion): iterate on benni's accordion changes * fix: prevents keys on all accordion triggers * fix: typo * test: add test for brn-accordion-directive Co-authored-by: robingotz <[email protected]> BREAKING CHANGE: accordion trigger is now a directive & accordion icon is replaced with hlm-icon + directive
- Loading branch information
1 parent
0af36ab
commit 4138dec
Showing
23 changed files
with
654 additions
and
511 deletions.
There are no files selected for viewing
201 changes: 95 additions & 106 deletions
201
apps/app/src/app/pages/(components)/components/(accordion)/accordion.preview.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,157 +1,146 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { | ||
| BrnAccordionComponent, | ||
| BrnAccordionContentComponent, | ||
| BrnAccordionItemComponent, | ||
| BrnAccordionTriggerComponent, | ||
| BrnAccordionDirective, | ||
| BrnAccordionItemDirective, | ||
| BrnAccordionTriggerDirective, | ||
| } from '@spartan-ng/ui-accordion-brain'; | ||
| import { | ||
| HlmAccordionContentDirective, | ||
| HlmAccordionDirective, | ||
| HlmAccordionIconComponent, | ||
| HlmAccordionIconDirective, | ||
| HlmAccordionItemDirective, | ||
| HlmAccordionTriggerDirective, | ||
| } from '@spartan-ng/ui-accordion-helm'; | ||
| import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; | ||
|
|
||
| @Component({ | ||
| selector: 'spartan-accordion-preview', | ||
| standalone: true, | ||
| imports: [ | ||
| BrnAccordionComponent, | ||
| BrnAccordionDirective, | ||
| BrnAccordionContentComponent, | ||
| BrnAccordionItemComponent, | ||
| BrnAccordionTriggerComponent, | ||
| BrnAccordionItemDirective, | ||
| BrnAccordionTriggerDirective, | ||
| HlmAccordionDirective, | ||
| HlmAccordionItemDirective, | ||
| HlmAccordionTriggerDirective, | ||
| HlmAccordionContentDirective, | ||
| HlmAccordionIconComponent, | ||
| HlmAccordionIconDirective, | ||
| HlmIconComponent, | ||
| ], | ||
| template: ` | ||
| <brn-accordion hlm> | ||
| <brn-accordion-item hlm> | ||
| <brn-accordion-trigger hlm> | ||
| <span>Is it accessible?</span> | ||
| <hlm-accordion-icon /> | ||
| </brn-accordion-trigger> | ||
| <div hlmAccordion> | ||
| <div hlmAccordionItem> | ||
| <button hlmAccordionTrigger> | ||
| Is it accessible? | ||
| <hlm-icon hlmAccIcon /> | ||
| </button> | ||
| <brn-accordion-content hlm>Yes. It adheres to the WAI-ARIA design pattern.</brn-accordion-content> | ||
| </brn-accordion-item> | ||
| </div> | ||
| <brn-accordion-item hlm> | ||
| <brn-accordion-trigger hlm> | ||
| <span>Is it styled</span> | ||
| <hlm-accordion-icon /> | ||
| </brn-accordion-trigger> | ||
| <div hlmAccordionItem> | ||
| <button hlmAccordionTrigger> | ||
| Is it styled? | ||
| <hlm-icon hlmAccIcon /> | ||
| </button> | ||
| <brn-accordion-content hlm> | ||
| Yes. It comes with default styles that match the other components' aesthetics. | ||
| </brn-accordion-content> | ||
| </brn-accordion-item> | ||
| </div> | ||
| <brn-accordion-item hlm> | ||
| <brn-accordion-trigger hlm> | ||
| <span>Is it animated?</span> | ||
| <hlm-accordion-icon /> | ||
| </brn-accordion-trigger> | ||
| <div hlmAccordionItem> | ||
| <button hlmAccordionTrigger> | ||
| Is it animated? | ||
| <hlm-icon hlmAccIcon /> | ||
| </button> | ||
| <brn-accordion-content hlm> | ||
| Yes. It's animated by default, but you can disable it if you prefer. | ||
| </brn-accordion-content> | ||
| </brn-accordion-item> | ||
| </brn-accordion> | ||
| </div> | ||
| </div> | ||
| `, | ||
| }) | ||
| export class AccordionPreviewComponent {} | ||
|
|
||
| export const codeString = ` | ||
| import { Component } from '@angular/core'; | ||
| export const codeImports = ` | ||
| import { | ||
| BrnAccordionComponent, | ||
| BrnAccordionContentComponent, | ||
| BrnAccordionItemComponent, | ||
| BrnAccordionTriggerComponent, | ||
| BrnAccordionDirective, | ||
| BrnAccordionItemDirective, | ||
| BrnAccordionTriggerDirective, | ||
| } from '@spartan-ng/ui-accordion-brain'; | ||
| import { | ||
| HlmAccordionContentDirective, | ||
| HlmAccordionDirective, | ||
| HlmAccordionIconComponent, | ||
| HlmAccordionIconDirective, | ||
| HlmAccordionItemDirective, | ||
| HlmAccordionTriggerDirective, | ||
| } from '@spartan-ng/ui-accordion-helm'; | ||
| import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; | ||
| `; | ||
|
|
||
| @Component({ | ||
| selector: 'spartan-accordion-preview', | ||
| standalone: true, | ||
| imports: [ | ||
| BrnAccordionComponent, | ||
| BrnAccordionContentComponent, | ||
| BrnAccordionItemComponent, | ||
| BrnAccordionTriggerComponent, | ||
| HlmAccordionDirective, | ||
| HlmAccordionItemDirective, | ||
| HlmAccordionTriggerDirective, | ||
| HlmAccordionContentDirective, | ||
| HlmAccordionIconComponent, | ||
| ], | ||
| template: \` | ||
| <brn-accordion hlm> | ||
| <brn-accordion-item hlm> | ||
| <brn-accordion-trigger hlm> | ||
| <span>Is it accessible?</span> | ||
| <hlm-accordion-icon /> | ||
| </brn-accordion-trigger> | ||
| <brn-accordion-content hlm> Yes. It adheres to the WAI-ARIA design pattern.</brn-accordion-content> | ||
| </brn-accordion-item> | ||
| export const codeString = | ||
| "import { Component } from '@angular/core';" + | ||
| codeImports + | ||
| ` | ||
| @Component({ | ||
| selector: 'spartan-accordion-preview', | ||
| standalone: true, | ||
| imports: [ | ||
| BrnAccordionDirective, | ||
| BrnAccordionContentComponent, | ||
| BrnAccordionItemDirective, | ||
| BrnAccordionTriggerDirective, | ||
| HlmAccordionDirective, | ||
| HlmAccordionItemDirective, | ||
| HlmAccordionTriggerDirective, | ||
| HlmAccordionContentDirective, | ||
| HlmAccordionIconDirective, | ||
| HlmIconComponent, | ||
| ], | ||
| template: \` | ||
| <div hlmAccordion> | ||
| <div hlmAccordionItem> | ||
| <button hlmAccordionTrigger> | ||
| Is it accessible? | ||
| <hlm-icon hlmAccIcon /> | ||
| </button> | ||
| <brn-accordion-content hlm>Yes. It adheres to the WAI-ARIA design pattern.</brn-accordion-content> | ||
| </div> | ||
| <brn-accordion-item hlm> | ||
| <brn-accordion-trigger hlm> | ||
| <span>Is it styled</span> | ||
| <hlm-accordion-icon /> | ||
| </brn-accordion-trigger> | ||
| <brn-accordion-content hlm> | ||
| Yes. It comes with default styles that match the other components' aesthetics. | ||
| </brn-accordion-content> | ||
| </brn-accordion-item> | ||
| <div hlmAccordionItem> | ||
| <button hlmAccordionTrigger> | ||
| Is it styled? | ||
| <hlm-icon hlmAccIcon /> | ||
| </button> | ||
| <brn-accordion-content hlm> | ||
| Yes. It comes with default styles that match the other components' aesthetics. | ||
| </brn-accordion-content> | ||
| </div> | ||
| <brn-accordion-item hlm> | ||
| <brn-accordion-trigger hlm> | ||
| <span>Is it animated?</span> | ||
| <hlm-accordion-icon /> | ||
| </brn-accordion-trigger> | ||
| <brn-accordion-content hlm> | ||
| Yes. It's animated by default, but you can disable it if you prefer. | ||
| </brn-accordion-content> | ||
| </brn-accordion-item> | ||
| </brn-accordion> | ||
| \`, | ||
| <div hlmAccordionItem> | ||
| <button hlmAccordionTrigger> | ||
| Is it animated? | ||
| <hlm-icon hlmAccIcon /> | ||
| </button> | ||
| <brn-accordion-content hlm> | ||
| Yes. It's animated by default, but you can disable it if you prefer. | ||
| </brn-accordion-content> | ||
| </div> | ||
| </div> | ||
| \`, | ||
| }) | ||
| export class AccordionPreviewComponent {} | ||
| `; | ||
|
|
||
| export const codeImports = ` | ||
| import { | ||
| BrnAccordionComponent, | ||
| BrnAccordionContentComponent, | ||
| BrnAccordionItemComponent, | ||
| BrnAccordionTriggerComponent, | ||
| } from '@spartan-ng/ui-accordion-brain'; | ||
| import { | ||
| HlmAccordionContentDirective, | ||
| HlmAccordionDirective, | ||
| HlmAccordionIconComponent, | ||
| HlmAccordionItemDirective, | ||
| HlmAccordionTriggerDirective, | ||
| } from '@spartan-ng/ui-accordion-helm'; | ||
| `; | ||
| export class AccordionPreviewComponent {}`; | ||
|
|
||
| export const codeSkeleton = ` | ||
| <brn-accordion hlm> | ||
| <brn-accordion-item hlm> | ||
| <brn-accordion-trigger hlm> | ||
| <span>Is it accessible?</span> | ||
| <hlm-accordion-icon /> | ||
| </brn-accordion-trigger> | ||
| <brn-accordion-content hlm> | ||
| Yes. It adheres to the WAI-ARIA design pattern. | ||
| </brn-accordion-content> | ||
| </brn-accordion-item> | ||
| </brn-accordion> | ||
| <div hlmAccordion> | ||
| <div hlmAccordionItem> | ||
| <button hlmAccordionTrigger> | ||
| Is it accessible? | ||
| <hlm-icon hlmAccIcon /> | ||
| </button> | ||
| <brn-accordion-content hlm>Yes. It adheres to the WAI-ARIA design pattern.</brn-accordion-content> | ||
| </div> | ||
| </div> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.