-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: update button component and base layout
- Update button component to include new styles and options - Update base layout to fix flexbox alignment issue
- Loading branch information
1 parent
463674f
commit be0f060
Showing
13 changed files
with
193 additions
and
25 deletions.
There are no files selected for viewing
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
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 +1,17 @@ | ||
| <p>about works!</p> | ||
| <div class="flex flex-col flex-1 justify-center"> | ||
| <div class="container max-w-3xl space-y-10"> | ||
| <h1 | ||
| class="md:text-6xl text-5xl leading-[3rem] font-bold dark:text-white text-black" | ||
| > | ||
| Hey, I'm Valery Melou | ||
| </h1> | ||
| <h2 class="text-2xl leading-10"> | ||
| I'm a web developer from Yaounde, Cameroon.<br /> | ||
| I build beautiful, interactive and accessible experiences for the web and | ||
| the mobile. | ||
| </h2> | ||
| <div> | ||
| <a href="/work" ui-flat-button color="accent" large>Check my work</a> | ||
| </div> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,12 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { ButtonComponent } from '@valerymelou/shared/ui'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-about', | ||
| standalone: true, | ||
| imports: [CommonModule], | ||
| imports: [CommonModule, ButtonComponent], | ||
| templateUrl: './about.component.html', | ||
| styles: ':host {display: flex; flex-direction: column; flex: 1;}', | ||
| }) | ||
| export class AboutComponent {} |
2 changes: 1 addition & 1 deletion
2
libs/shared/layout/src/lib/base-layout/base-layout.component.html
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| export * from './lib/button/button.component'; | ||
|
|
||
| export * from './lib/menu/menu.component'; | ||
|
|
||
| export * from './lib/menu/menu-trigger-for.directive'; |
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 |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <ng-content></ng-content> |
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 |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| import { ButtonComponent } from './button.component'; | ||
|
|
||
| @Component({ | ||
| template: ` | ||
| <button ui-flat-button>Test</button> | ||
| <button ui-flat-button full>Test</button> | ||
| <button ui-flat-button large>Test</button> | ||
| <button ui-flat-button disabled>Test</button> | ||
| `, | ||
| selector: 'ui-button-test', | ||
| }) | ||
| class ButtonTestComponent {} | ||
|
|
||
| describe('ButtonComponent', () => { | ||
| let component: ButtonTestComponent; | ||
| let fixture: ComponentFixture<ButtonTestComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [ButtonTestComponent], | ||
| imports: [ButtonComponent], | ||
| }).compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(ButtonTestComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
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 |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import { | ||
| AfterViewInit, | ||
| Component, | ||
| ElementRef, | ||
| HostBinding, | ||
| Input, | ||
| booleanAttribute, | ||
| } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
|
|
||
| /** | ||
| * List of attributes that can be used to add ButtonComponent instances on | ||
| * host attributes to style different variants. | ||
| */ | ||
| const BUTTON_HOST_ATTRIBUTES: string[] = ['ui-flat-button']; | ||
|
|
||
| /** | ||
| * Classes that can be added on host attribute per variant and per host attribute. | ||
| */ | ||
| const BUTTON_STYLE_CLASSES: { [name: string]: { [name: string]: string } } = { | ||
| 'ui-flat-button': { | ||
| default: | ||
| 'bg-white text-black disabled:text-black disabled:text-opacity-50 disabled:bg-white disabled:bg-opacity-50 disabled:cursor-default', | ||
| accent: | ||
| 'bg-accent-base text-white disabled:text-white disabled:text-opacity-50 disabled:bg-accent-base disabled:bg-opacity-50 disabled:cursor-default', | ||
| }, | ||
| }; | ||
|
|
||
| /** | ||
| * Button component. | ||
| * Provides a standard button with different variants. | ||
| */ | ||
| @Component({ | ||
| selector: 'button[ui-flat-button], a[ui-flat-button]', | ||
| standalone: true, | ||
| imports: [CommonModule], | ||
| templateUrl: './button.component.html', | ||
| }) | ||
| export class ButtonComponent implements AfterViewInit { | ||
| @Input() color: 'default' | 'primary' | 'accent' | 'secondary' = 'default'; | ||
| @Input({ transform: booleanAttribute }) disabled = false; | ||
| @Input({ transform: booleanAttribute }) large = false; | ||
| @Input({ transform: booleanAttribute }) full = false; | ||
| @HostBinding('attr.disabled') get valid() { | ||
| return this.disabled ? 'disabled' : null; | ||
| } | ||
|
|
||
| constructor(private _elementRef: ElementRef<HTMLElement>) { | ||
| // Button base classes: | ||
| this.getHostElement().classList.add( | ||
| 'inline-flex', | ||
| 'items-center', | ||
| 'justify-center', | ||
| 'leading-8', | ||
| 'rounded-full', | ||
| 'transition-all', | ||
| 'duration-300', | ||
| 'font-semibold' | ||
| ); | ||
| } | ||
|
|
||
| ngAfterViewInit(): void { | ||
| // Add classes for button variant: | ||
| BUTTON_HOST_ATTRIBUTES.forEach((hostAttribute) => { | ||
| if (this.hasHostAttributes(hostAttribute)) { | ||
| this.addToClassList(BUTTON_STYLE_CLASSES[hostAttribute][this.color]); | ||
| } | ||
| }); | ||
|
|
||
| // Add classes for button size: | ||
| if (this.large) { | ||
| this.addToClassList('px-8 py-4 text-lg'); | ||
| } else { | ||
| this.addToClassList('px-4 py-3 text-sm leading-[18px]'); | ||
| } | ||
|
|
||
| // Add classes for button width: | ||
| if (this.full) { | ||
| this.addToClassList('w-full'); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Returns the host element. | ||
| * @returns The host element. | ||
| */ | ||
| private getHostElement(): HTMLElement { | ||
| return this._elementRef.nativeElement; | ||
| } | ||
|
|
||
| /** | ||
| * Checks if the host element has one of the given attributes. | ||
| * @param attributes | ||
| * @returns boolean | ||
| */ | ||
| private hasHostAttributes(...attributes: string[]): boolean { | ||
| return attributes.some((attribute) => | ||
| this.getHostElement().hasAttribute(attribute) | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Adds the given classes to the host element. | ||
| * @param className | ||
| */ | ||
| private addToClassList(className: string): void { | ||
| const classes = className.split(' '); | ||
| this.getHostElement().classList.add(...classes); | ||
| } | ||
| } |