forked from AmadeusITGroup/otter
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add design token page on showcase app
- Loading branch information
Showing
23 changed files
with
1,181 additions
and
16 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
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,3 @@ | ||
| # DesignTokenComponent | ||
|
|
||
| the design-token page |
36 changes: 36 additions & 0 deletions
36
apps/showcase/src/app/design-token/design-token.component.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 |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { AsyncPipe } from '@angular/common'; | ||
| import { AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core'; | ||
| import { RouterLink } from '@angular/router'; | ||
| import { O3rComponent } from '@o3r/core'; | ||
| import { CopyTextPresComponent, DesignTokenPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components'; | ||
|
|
||
| @O3rComponent({ componentType: 'Page' }) | ||
| @Component({ | ||
| selector: 'o3r-design-token', | ||
| standalone: true, | ||
| imports: [ | ||
| AsyncPipe, | ||
| CopyTextPresComponent, | ||
| DesignTokenPresComponent, | ||
| RouterLink, | ||
| IN_PAGE_NAV_PRES_DIRECTIVES | ||
| ], | ||
| templateUrl: './design-token.template.html', | ||
| styleUrl: './design-token.style.scss', | ||
| encapsulation: ViewEncapsulation.None, | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class DesignTokenComponent implements AfterViewInit { | ||
| @ViewChildren(InPageNavLinkDirective) | ||
| private readonly inPageNavLinkDirectives!: QueryList<InPageNavLink>; | ||
| public links$ = this.inPageNavPresService.links$; | ||
|
|
||
| constructor( | ||
| private readonly inPageNavPresService: InPageNavPresService | ||
| ) { | ||
| } | ||
|
|
||
| public ngAfterViewInit() { | ||
| this.inPageNavPresService.initialize(this.inPageNavLinkDirectives); | ||
| } | ||
| } |
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,27 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { RouterModule } from '@angular/router'; | ||
|
|
||
| import { DesignTokenComponent } from './design-token.component'; | ||
|
|
||
| describe('DesignTokenComponent', () => { | ||
| let component: DesignTokenComponent; | ||
| let fixture: ComponentFixture<DesignTokenComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [ | ||
| DesignTokenComponent, | ||
| RouterModule.forRoot([]) | ||
| ] | ||
| }) | ||
| .compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(DesignTokenComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
Empty file.
54 changes: 54 additions & 0 deletions
54
apps/showcase/src/app/design-token/design-token.template.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <h1>Design Tokens</h1> | ||
| <div class="row"> | ||
| <div class="right-nav order-1 order-lg-2 col-12 col-lg-2 sticky-lg-top pt-5 pt-lg-0"> | ||
| <o3r-in-page-nav-pres | ||
| id="design-token-nav" | ||
| [links]="links$ | async" | ||
| > | ||
| </o3r-in-page-nav-pres> | ||
| </div> | ||
| <div class="order-2 order-lg-1 col-12 col-lg-10"> | ||
| <h2 id="design-token-description">Description</h2> | ||
| <div> | ||
| <p> | ||
| This module provides tools to generate css theme using <a href="https://design-tokens.github.io/community-group/format/" target="_blank" rel="noopener">design-tokens</a>. | ||
| <br/> | ||
| It can be used to manage the creation of your theme in a tool like <a href="https://www.figma.com/" target="_blank" rel="noopener">Figma</a> and directly integrate it inside your app. | ||
| </p> | ||
| </div> | ||
| <h2 id="design-token-examples">Examples</h2> | ||
| <div> | ||
| <p> | ||
| In the following example, we created 3 themes in Figma (Default, Dark and Horizon). | ||
| </p> | ||
| Then, we exported the JSON files inside the app : | ||
| <ul> | ||
| <li><a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/style/design-token.figma.json" target="_blank" rel="noopener">design-token.figma.json</a></li> | ||
| <li><a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/style/dark-theme/dark-theme.figma.json" target="_blank" rel="noopener">dark-theme.figma.json</a></li> | ||
| <li><a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/style/horizon-theme/horizon-theme.figma.json" target="_blank" rel="noopener">horizon-theme.figma.json</a></li> | ||
| </ul> | ||
| <p> | ||
| Finally, we included the <b>@o3r/design:generate-css</b> builder in the <a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/project.json" target="_blank" rel="noopener">build process</a> to generate the css based on these files. | ||
| </p> | ||
| <o3r-design-token-pres></o3r-design-token-pres> | ||
| <p> | ||
| Do not hesitate to run the application locally, if not installed yet, follow the <a routerLink="/run-app-locally">instructions</a>. | ||
| </p> | ||
| <a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/components/showcase/design" target="_blank" rel="noopener">Source code</a> | ||
| </div> | ||
| <h2 id="design-token-install">How to install</h2> | ||
| <o3r-copy-text-pres [wrap]="true" language="bash" text="ng add @o3r/design"></o3r-copy-text-pres> | ||
| <h2 id="configuration-add-config-later">How to add design-tokens to a component</h2> | ||
| <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g design-token-to-component --path='path/to/the/component/class/file'"></o3r-copy-text-pres> | ||
| <h2 id="design-token-install">How to extract design-tokens from Sass files</h2> | ||
| <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g extract-token --component-file-patterns='path/to/the/components/**/*.scss'"></o3r-copy-text-pres> | ||
| <h2 id="design-token-references">References</h2> | ||
| <div> | ||
| <ul> | ||
| <li> | ||
| <a href="https://docs.otter.digitalforairlines.com/additional-documentation/design/overview.html" target="_blank" rel="noopener">Documentation</a> | ||
| </li> | ||
| </ul> | ||
| </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 |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './design-token.component'; |
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,3 @@ | ||
| # DesignTokenPres | ||
|
|
||
|
|
53 changes: 53 additions & 0 deletions
53
apps/showcase/src/components/showcase/design-token/design-token-pres.component.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 |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { AsyncPipe } from '@angular/common'; | ||
| import { ChangeDetectionStrategy, Component, DestroyRef, inject, ViewEncapsulation } from '@angular/core'; | ||
| import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; | ||
| import { O3rComponent } from '@o3r/core'; | ||
| import { StyleLazyLoader, StyleLazyLoaderModule } from '@o3r/dynamic-content'; | ||
| import { DatePickerInputPresComponent } from '../../utilities'; | ||
|
|
||
| @O3rComponent({ componentType: 'Component' }) | ||
| @Component({ | ||
| selector: 'o3r-design-token-pres', | ||
| standalone: true, | ||
| imports: [ | ||
| AsyncPipe, | ||
| DatePickerInputPresComponent, | ||
| FormsModule, | ||
| ReactiveFormsModule, | ||
| StyleLazyLoaderModule | ||
| ], | ||
| templateUrl: './design-token-pres.template.html', | ||
| styleUrl: './design-token-pres.style.scss', | ||
| encapsulation: ViewEncapsulation.None, | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class DesignTokenPresComponent { | ||
|
|
||
| /** | ||
| * Form group | ||
| */ | ||
| public form: FormGroup<{ theme: FormControl<string | null> }>; | ||
|
|
||
| constructor(fb: FormBuilder, styleLoader: StyleLazyLoader) { | ||
| this.form = fb.group({ | ||
| theme: new FormControl<string | null>('') | ||
| }); | ||
|
|
||
| let style: HTMLElement | null = null; | ||
| const cleanUpStyle = () => { | ||
| if (style?.parentNode) { | ||
| style.parentNode.removeChild(style); | ||
| style = null; | ||
| } | ||
| }; | ||
| this.form.valueChanges.subscribe((value) => { | ||
| cleanUpStyle(); | ||
| if (value.theme === 'dark') { | ||
| style = styleLoader.loadStyleFromURL({href: 'dark-theme.css'}); | ||
| } else if (value.theme === 'horizon') { | ||
| style = styleLoader.loadStyleFromURL({href: 'horizon-theme.css'}); | ||
| } | ||
| }); | ||
| inject(DestroyRef).onDestroy(cleanUpStyle); | ||
| } | ||
| } |
23 changes: 23 additions & 0 deletions
23
apps/showcase/src/components/showcase/design-token/design-token-pres.spec.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 |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { DesignTokenPresComponent } from './design-token-pres.component'; | ||
|
|
||
| describe('DesignTokenPresComponent', () => { | ||
| let component: DesignTokenPresComponent; | ||
| let fixture: ComponentFixture<DesignTokenPresComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [DesignTokenPresComponent] | ||
| }) | ||
| .compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(DesignTokenPresComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
3 changes: 3 additions & 0 deletions
3
apps/showcase/src/components/showcase/design-token/design-token-pres.style.scss
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,3 @@ | ||
| o3r-design-token-pres { | ||
| // Your component custom SCSS | ||
| } |
21 changes: 21 additions & 0 deletions
21
apps/showcase/src/components/showcase/design-token/design-token-pres.template.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <div class="card my-3"> | ||
| <div class="row g-0"> | ||
| <div class="col-8 container p-3"> | ||
| <div class="card-body d-flex flex-column h-100"> | ||
| <h3 class="row card-text mt-auto ms-1 h5">Select a theme</h3> | ||
| <form class="row g-2" [formGroup]="form"> | ||
| <div class="col-12 col-xl-6"> | ||
| <div class="input-group"> | ||
| <label class="input-group-text w-50" for="theme">Theme</label> | ||
| <select class="form-select" id="theme" formControlName="theme"> | ||
| <option selected value> Default </option> | ||
| <option value="dark"> Dark </option> | ||
| <option value="horizon"> Horizon </option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </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 |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './design-token-pres.component'; | ||
|
|
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.