-
Notifications
You must be signed in to change notification settings - Fork 125
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: list with byline migration (#3678)
* start on list byline * finish byline docs * some pr comments * move byline list docs to separate section * fix tests * remove unused imports * pr comments
- Loading branch information
1 parent
e08c747
commit 18038cd
Showing
29 changed files
with
696 additions
and
1 deletion.
There are no files selected for viewing
25 changes: 25 additions & 0 deletions
25
...ine/examples/list-byline-borderless-example/list-byline-borderless-example.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <ul fd-list [byline]="true" [noBorder]="true"> | ||
| <li fd-list-item> | ||
| <span fd-list-thumbnail><fd-icon glyph="activate"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>Title</div> | ||
| <div fd-list-byline>Byline Text</div> | ||
| </div> | ||
| </li> | ||
| <li fd-list-item> | ||
| <span fd-list-thumbnail><fd-icon glyph="employee"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>List item with no byline</div> | ||
| </div> | ||
| </li> | ||
| <li fd-list-item> | ||
| <span fd-list-thumbnail><fd-icon glyph="calendar"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>List Item With Two-Column Byline</div> | ||
| <div fd-list-byline [twoCol]="true"> | ||
| <div fd-list-byline-left>First text item in Byline (Standard text item)</div> | ||
| <div fd-list-byline-right>Second text item in Byline (Can be semantic (Status) or not)</div> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| </ul> |
7 changes: 7 additions & 0 deletions
7
...yline/examples/list-byline-borderless-example/list-byline-borderless-example.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,7 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'fd-list-byline-borderless-example', | ||
| templateUrl: './list-byline-borderless-example.component.html' | ||
| }) | ||
| export class ListBylineBorderlessExampleComponent {} |
70 changes: 70 additions & 0 deletions
70
...ine/examples/list-byline-navigation-example/list-byline-navigation-example.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| <ul fd-list [byline]="true"> | ||
| <li fd-list-item> | ||
| <a fd-list-link> | ||
| <span fd-list-thumbnail><fd-icon glyph="activate"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>Title</div> | ||
| <div fd-list-byline>Byline Text</div> | ||
| </div> | ||
| </a> | ||
| </li> | ||
| <li fd-list-item> | ||
| <a fd-list-link> | ||
| <span fd-list-thumbnail><fd-icon glyph="employee"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>List item with no byline</div> | ||
| </div> | ||
| </a> | ||
| </li> | ||
| <li fd-list-item> | ||
| <a fd-list-link> | ||
| <span fd-list-thumbnail><fd-icon glyph="calendar"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>List Item With Two-Column Byline</div> | ||
| <div fd-list-byline [twoCol]="true"> | ||
| <div fd-list-byline-left>First text item in Byline (Standard text item)</div> | ||
| <div fd-list-byline-right>Second text item in Byline (Can be semantic (Status) or not)</div> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <h4>Navigation Indicator</h4> | ||
|
|
||
| <description> | ||
| If only a subset of the list items are navigable you should indicate those by displaying a navigation arrow. This is | ||
| achieved by applying the <code>[navigationIndicator]</code> input to the ul element. Also you will need to add the | ||
| <code>[navigationIndicator]</code> and <code>[navigated]</code> inputs to any navigable <code>fd-list-link</code> | ||
| directives. Do not show arrows if all items are navigable. In this case use a byline list with navigation. | ||
| </description> | ||
|
|
||
| <ul fd-list [byline]="true" [navigationIndicator]="true"> | ||
| <li fd-list-item> | ||
| <a fd-list-link> | ||
| <span fd-list-thumbnail><fd-icon glyph="activate"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>Title</div> | ||
| <div fd-list-byline>Byline Text</div> | ||
| </div> | ||
| </a> | ||
| </li> | ||
| <li fd-list-item> | ||
| <a fd-list-link [navigationIndicator]="true" [navigated]="true"> | ||
| <span fd-list-thumbnail><fd-icon glyph="employee"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>List item with no byline</div> | ||
| </div> | ||
| </a> | ||
| </li> | ||
| <li fd-list-item> | ||
| <span fd-list-thumbnail><fd-icon glyph="calendar"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>List Item With Two-Column Byline</div> | ||
| <div fd-list-byline [twoCol]="true"> | ||
| <div fd-list-byline-left>First text item in Byline (Standard text item)</div> | ||
| <div fd-list-byline-right>Second text item in Byline (Can be semantic (Status) or not)</div> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| </ul> |
7 changes: 7 additions & 0 deletions
7
...yline/examples/list-byline-navigation-example/list-byline-navigation-example.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,7 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'fd-list-byline-navigation-example', | ||
| templateUrl: './list-byline-navigation-example.component.html' | ||
| }) | ||
| export class ListBylineNavigationExampleComponent {} |
41 changes: 41 additions & 0 deletions
41
...yline/examples/list-byline-selection-example/list-byline-selection-example.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <h4>With Checkboxes</h4> | ||
|
|
||
| <ul fd-list [byline]="true" [selection]="true"> | ||
| <li fd-list-item *ngFor="let item of bylineSelectionItems" [selected]="item.selected"> | ||
| <fd-checkbox [(ngModel)]="item.selected"></fd-checkbox> | ||
| <span fd-list-thumbnail><fd-icon [glyph]="item.glyph"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>{{ item.title }}</div> | ||
| <div fd-list-byline>{{ item.byline }}</div> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <h4>With Radio Buttons</h4> | ||
|
|
||
| <ul fd-list [byline]="true" [selection]="true"> | ||
| <li fd-list-item [selected]="selectionValue === 'radio1'"> | ||
| <fd-radio-button name="radio1" id="radio1" value="radio1" [(ngModel)]="selectionValue"></fd-radio-button> | ||
| <span fd-list-thumbnail><fd-icon glyph="calendar"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>Title 1</div> | ||
| <div fd-list-byline>Byline 1</div> | ||
| </div> | ||
| </li> | ||
| <li fd-list-item [selected]="selectionValue === 'radio2'"> | ||
| <fd-radio-button name="radio1" id="radio2" value="radio2" [(ngModel)]="selectionValue"></fd-radio-button> | ||
| <span fd-list-thumbnail><fd-icon glyph="activate"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>Title 2</div> | ||
| <div fd-list-byline>Byline 2</div> | ||
| </div> | ||
| </li> | ||
| <li fd-list-item [selected]="selectionValue === 'radio3'"> | ||
| <fd-radio-button name="radio1" id="radio3" value="radio3" [(ngModel)]="selectionValue"></fd-radio-button> | ||
| <span fd-list-thumbnail><fd-icon glyph="employee"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>Title 3</div> | ||
| <div fd-list-byline>Byline 3</div> | ||
| </div> | ||
| </li> | ||
| </ul> |
31 changes: 31 additions & 0 deletions
31
...-byline/examples/list-byline-selection-example/list-byline-selection-example.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,31 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'fd-list-byline-selection-example', | ||
| templateUrl: './list-byline-selection-example.component.html' | ||
| }) | ||
| export class ListBylineSelectionExampleComponent { | ||
| selectionValue: string = null; | ||
| selectionValueTwo: string = null; | ||
|
|
||
| bylineSelectionItems = [ | ||
| { | ||
| selected: true, | ||
| title: 'List item 1', | ||
| byline: 'Byline text for item 1', | ||
| glyph: 'calendar' | ||
| }, | ||
| { | ||
| selected: false, | ||
| title: 'List item 2', | ||
| byline: 'Byline text for item 2', | ||
| glyph: 'activate' | ||
| }, | ||
| { | ||
| selected: false, | ||
| title: 'List item 3', | ||
| byline: 'Byline text for item 3', | ||
| glyph: 'employee' | ||
| } | ||
| ]; | ||
| } |
66 changes: 66 additions & 0 deletions
66
...-byline/examples/list-byline-standard-example/list-byline-standard-example.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <h4>Standard Size</h4> | ||
| <ul fd-list [byline]="true"> | ||
| <li fd-list-item> | ||
| <span fd-list-thumbnail><fd-icon glyph="activate"></fd-icon></span> | ||
| <!-- for byline, fd-list-content is mandatory --> | ||
| <div fd-list-content> | ||
| <div fd-list-title>Title</div> | ||
| <div fd-list-byline>Byline Text</div> | ||
| </div> | ||
| </li> | ||
| <li fd-list-item> | ||
| <span fd-list-thumbnail><fd-icon glyph="employee"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>List item with no byline</div> | ||
| </div> | ||
| </li> | ||
| <li fd-list-item> | ||
| <span fd-list-thumbnail><fd-icon glyph="calendar"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>List Item With Two-Column Byline</div> | ||
| <div fd-list-byline [twoCol]="true"> | ||
| <div fd-list-byline-left>First text item in Byline (Standard text item)</div> | ||
| <div fd-list-byline-right>Second text item in Byline (Can be semantic (Status) or not)</div> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| <li fd-list-item> | ||
| <div fd-list-content> | ||
| <div fd-list-title>Text-Only List Item</div> | ||
| <div fd-list-byline>Byline Text (description)</div> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <h4>Compact</h4> | ||
| <ul fd-list [byline]="true" [compact]="true"> | ||
| <li fd-list-item> | ||
| <span fd-list-thumbnail><fd-icon glyph="activate"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>Title</div> | ||
| <div fd-list-byline>Byline Text</div> | ||
| </div> | ||
| </li> | ||
| <li fd-list-item> | ||
| <span fd-list-thumbnail><fd-icon glyph="employee"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>List item with no byline</div> | ||
| </div> | ||
| </li> | ||
| <li fd-list-item> | ||
| <span fd-list-thumbnail><fd-icon glyph="calendar"></fd-icon></span> | ||
| <div fd-list-content> | ||
| <div fd-list-title>List Item With Two-Column Byline</div> | ||
| <div fd-list-byline [twoCol]="true"> | ||
| <div fd-list-byline-left>First text item in Byline (Standard text item)</div> | ||
| <div fd-list-byline-right>Second text item in Byline (Can be semantic (Status) or not)</div> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| <li fd-list-item> | ||
| <div fd-list-content> | ||
| <div fd-list-title>Text-Only List Item</div> | ||
| <div fd-list-byline>Byline Text (description)</div> | ||
| </div> | ||
| </li> | ||
| </ul> |
7 changes: 7 additions & 0 deletions
7
...st-byline/examples/list-byline-standard-example/list-byline-standard-example.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,7 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'fd-list-byline-standard-example', | ||
| templateUrl: './list-byline-standard-example.component.html' | ||
| }) | ||
| export class ListBylineStandardExampleComponent {} |
37 changes: 37 additions & 0 deletions
37
apps/docs/src/app/core/component-docs/list-byline/list-byline-docs.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <fd-docs-section-title id="list-byline" componentName="list"> | ||
| List with Byline | ||
| </fd-docs-section-title> | ||
| <component-example> | ||
| <fd-list-byline-standard-example></fd-list-byline-standard-example> | ||
| </component-example> | ||
| <code-example [exampleFiles]="listByline"></code-example> | ||
|
|
||
| <fd-docs-section-title id="list-byline-navigation" componentName="list"> | ||
| List with Byline Navigation | ||
| </fd-docs-section-title> | ||
| <description> | ||
| Byline lists can have navigation links as well, simply by adding the <code>fd-list-link</code> directive to an | ||
| anchor element which wraps the byline thumbnail and content directives. | ||
| </description> | ||
| <component-example> | ||
| <fd-list-byline-navigation-example></fd-list-byline-navigation-example> | ||
| </component-example> | ||
| <code-example [exampleFiles]="listBylineNavigation"></code-example> | ||
|
|
||
| <fd-docs-section-title id="list-byline-borderless" componentName="list"> | ||
| Borderless List with Byline | ||
| </fd-docs-section-title> | ||
| <description> The border may be removed with the <code>[noBorder]</code> input. </description> | ||
| <component-example> | ||
| <fd-list-byline-borderless-example></fd-list-byline-borderless-example> | ||
| </component-example> | ||
| <code-example [exampleFiles]="listBylineBorderless"></code-example> | ||
|
|
||
| <fd-docs-section-title id="list-byline-selection" componentName="list"> | ||
| List Selection with Byline | ||
| </fd-docs-section-title> | ||
| <description> Add the <code>[selection]</code> input for a list with selection. </description> | ||
| <component-example> | ||
| <fd-list-byline-selection-example></fd-list-byline-selection-example> | ||
| </component-example> | ||
| <code-example [exampleFiles]="listBylineSelection"></code-example> |
52 changes: 52 additions & 0 deletions
52
apps/docs/src/app/core/component-docs/list-byline/list-byline-docs.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,52 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| import * as bylineSrcHtml from '!raw-loader!./examples/list-byline-standard-example/list-byline-standard-example.component.html'; | ||
| import * as bylineNavigationSrcHtml from '!raw-loader!./examples/list-byline-navigation-example/list-byline-navigation-example.component.html'; | ||
| import * as bylineBorderlessSrcHtml from '!raw-loader!./examples/list-byline-borderless-example/list-byline-borderless-example.component.html'; | ||
| import * as bylineSelectionSrcHtml from '!raw-loader!./examples/list-byline-selection-example/list-byline-selection-example.component.html'; | ||
| import * as bylineSelectionSrcTs from '!raw-loader!./examples/list-byline-selection-example/list-byline-selection-example.component.ts'; | ||
| import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-list-byline', | ||
| templateUrl: './list-byline-docs.component.html' | ||
| }) | ||
| export class ListBylineDocsComponent { | ||
| listByline: ExampleFile[] = [ | ||
| { | ||
| language: 'html', | ||
| code: bylineSrcHtml, | ||
| fileName: 'list-byline-standard-example' | ||
| } | ||
| ]; | ||
|
|
||
| listBylineNavigation: ExampleFile[] = [ | ||
| { | ||
| language: 'html', | ||
| code: bylineNavigationSrcHtml, | ||
| fileName: 'list-byline-navigation-example' | ||
| } | ||
| ]; | ||
|
|
||
| listBylineBorderless: ExampleFile[] = [ | ||
| { | ||
| language: 'html', | ||
| code: bylineBorderlessSrcHtml, | ||
| fileName: 'list-byline-borderless-example' | ||
| } | ||
| ]; | ||
|
|
||
| listBylineSelection: ExampleFile[] = [ | ||
| { | ||
| language: 'html', | ||
| code: bylineSelectionSrcHtml, | ||
| fileName: 'list-byline-selection-example' | ||
| }, | ||
| { | ||
| language: 'typescript', | ||
| code: bylineSelectionSrcTs, | ||
| fileName: 'list-byline-selection-example', | ||
| component: 'ListBylineSelectionExampleComponent' | ||
| } | ||
| ]; | ||
| } |
46 changes: 46 additions & 0 deletions
46
apps/docs/src/app/core/component-docs/list-byline/list-byline-docs.module.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,46 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { RouterModule, Routes } from '@angular/router'; | ||
| import { ApiComponent } from '../../../documentation/core-helpers/api/api.component'; | ||
| import { API_FILES } from '../../api-files'; | ||
| import { ListBylineHeaderComponent } from './list-byline-header/list-byline-header.component'; | ||
| import { ListBylineDocsComponent } from './list-byline-docs.component'; | ||
| import { CheckboxModule, LinkModule, ListModule, RadioModule } from '@fundamental-ngx/core'; | ||
| import { SharedDocumentationPageModule } from '../../../documentation/shared-documentation-page.module'; | ||
| import { SharedDocumentationModule } from '../../../documentation/shared-documentation.module'; | ||
| import { ListBylineSelectionExampleComponent } from './examples/list-byline-selection-example/list-byline-selection-example.component'; | ||
| import { ListBylineBorderlessExampleComponent } from './examples/list-byline-borderless-example/list-byline-borderless-example.component'; | ||
| import { ListBylineNavigationExampleComponent } from './examples/list-byline-navigation-example/list-byline-navigation-example.component'; | ||
| import { ListBylineStandardExampleComponent } from './examples/list-byline-standard-example/list-byline-standard-example.component'; | ||
|
|
||
| const routes: Routes = [ | ||
| { | ||
| path: '', | ||
| component: ListBylineHeaderComponent, | ||
| children: [ | ||
| { path: '', component: ListBylineDocsComponent }, | ||
| { path: 'api', component: ApiComponent, data: { content: API_FILES.list } } | ||
| ] | ||
| } | ||
| ]; | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| RouterModule.forChild(routes), | ||
| SharedDocumentationPageModule, | ||
| ListModule, | ||
| LinkModule, | ||
| CheckboxModule, | ||
| RadioModule, | ||
| SharedDocumentationModule | ||
| ], | ||
| exports: [RouterModule], | ||
| declarations: [ | ||
| ListBylineDocsComponent, | ||
| ListBylineHeaderComponent, | ||
| ListBylineSelectionExampleComponent, | ||
| ListBylineBorderlessExampleComponent, | ||
| ListBylineNavigationExampleComponent, | ||
| ListBylineStandardExampleComponent | ||
| ] | ||
| }) | ||
| export class ListDocsModule {} |
Oops, something went wrong.