-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1383 from GSA/1382-add-missing-demos
Add Missing Demos
- Loading branch information
Showing
17 changed files
with
300 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
20 changes: 20 additions & 0 deletions
20
...ch-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.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,20 @@ | ||
<b>Inputs</b> | ||
<p> | ||
<code>minHeight:</code>number <i>(Optional)</i> - Minimum height in rems that the editor can be. If text entered by | ||
the user expands beyond the bottom of the editor, the editor will expand to display all text. This value is expected | ||
to be an positive integer. The minimum value is 4 which will provide enough room for a single paragraph line to | ||
appear. The maximum value is 31 which is large enough to allow for 10 lines of h1 text. | ||
</p> | ||
|
||
<p> | ||
<code>maxHeight:</code>number <i>(Optional)</i> - Maximum height in rems that the editor can be. If text entered by | ||
the user expands beyond the bottom of the editor, the editor will not expand further and a scrolling within the editor | ||
will be enabled. This value is expected to be an positive integer. The minimum value is 4 which will provide enough | ||
room for a single paragraph line to appear. The maximum value is 31 which is large enough to allow for 10 lines of h1 | ||
text. | ||
</p> | ||
|
||
<p> | ||
The rich text editor component can be passed a formControl for use in reactive forms. Subscribing to | ||
<code>valueChanges</code> allows developers to get updates as users change value of the rich text editor. | ||
</p> |
7 changes: 7 additions & 0 deletions
7
...rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.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: 'sds-rich-text-editor-introduction', | ||
templateUrl: './rich-text-editor-introduction.component.html', | ||
}) | ||
export class RichTextEditorIntroductionComponent {} |
11 changes: 11 additions & 0 deletions
11
...ok/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.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,11 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
import { RichTextEditorIntroductionComponent } from './rich-text-editor-introduction.component'; | ||
|
||
@NgModule({ | ||
imports: [CommonModule], | ||
declarations: [RichTextEditorIntroductionComponent], | ||
exports: [RichTextEditorIntroductionComponent], | ||
bootstrap: [RichTextEditorIntroductionComponent], | ||
}) | ||
export class RichTextEditorIntroductionModule {} |
5 changes: 5 additions & 0 deletions
5
...k/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.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,5 @@ | ||
<div style="padding-top: 5rem;"> | ||
<sds-rich-text [formControl]="fc" [maxHeight]="6"></sds-rich-text> | ||
|
||
<p>Rich Text Editor Value: {{ fc.value }}</p> | ||
</div> |
11 changes: 11 additions & 0 deletions
11
...ook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.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,11 @@ | ||
import { Component } from '@angular/core'; | ||
import { UntypedFormControl } from '@angular/forms'; | ||
|
||
@Component({ | ||
selector: 'sds-rich-text-editor-max-height', | ||
templateUrl: './rich-text-editor-max-height.component.html', | ||
}) | ||
export class RichTextEditorMaxHeightComponent { | ||
public data = ''; | ||
fc: UntypedFormControl = new UntypedFormControl('<p>this is a test</p>'); | ||
} |
13 changes: 13 additions & 0 deletions
13
...rybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.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,13 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
import { RichTextEditorMaxHeightComponent } from './rich-text-editor-max-height.component'; | ||
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; | ||
import { SdsRichTextModule } from '@gsa-sam/components'; | ||
|
||
@NgModule({ | ||
imports: [CommonModule, SdsRichTextModule, FormsModule, ReactiveFormsModule], | ||
declarations: [RichTextEditorMaxHeightComponent], | ||
bootstrap: [RichTextEditorMaxHeightComponent], | ||
exports: [RichTextEditorMaxHeightComponent], | ||
}) | ||
export class RichTextEditorMaxHeightModule {} |
5 changes: 5 additions & 0 deletions
5
...k/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.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,5 @@ | ||
<div style="padding-top: 5rem;"> | ||
<sds-rich-text [formControl]="fc" [minHeight]="10"></sds-rich-text> | ||
|
||
<p>Rich Text Editor Value: {{ fc.value }}</p> | ||
</div> |
11 changes: 11 additions & 0 deletions
11
...ook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.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,11 @@ | ||
import { Component } from '@angular/core'; | ||
import { UntypedFormControl } from '@angular/forms'; | ||
|
||
@Component({ | ||
selector: 'sds-rich-text-editor-min-height', | ||
templateUrl: './rich-text-editor-min-height.component.html', | ||
}) | ||
export class RichTextEditorMinHeightComponent { | ||
public data = ''; | ||
fc: UntypedFormControl = new UntypedFormControl('<p>this is a test</p>'); | ||
} |
13 changes: 13 additions & 0 deletions
13
...rybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.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,13 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
import { RichTextEditorMinHeightComponent } from './rich-text-editor-min-height.component'; | ||
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; | ||
import { SdsRichTextModule } from '@gsa-sam/components'; | ||
|
||
@NgModule({ | ||
imports: [CommonModule, SdsRichTextModule, FormsModule, ReactiveFormsModule], | ||
declarations: [RichTextEditorMinHeightComponent], | ||
exports: [RichTextEditorMinHeightComponent], | ||
bootstrap: [RichTextEditorMinHeightComponent], | ||
}) | ||
export class RichTextEditorMinHeightModule {} |
76 changes: 76 additions & 0 deletions
76
libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor.stories.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,76 @@ | ||
import { CommonModule } from '@angular/common'; | ||
import { moduleMetadata, Meta, Story } from '@storybook/angular'; | ||
import { generateConfig, generateStackblitzLink } from 'libs/documentation/src/sandbox/sandbox-utils'; | ||
import { RichTextEditorMinHeightModule } from './rich-text-editor-min-height/rich-text-editor-min-height.module'; | ||
import { RichTextEditorMaxHeightModule } from './rich-text-editor-max-height/rich-text-editor-max-height.module'; | ||
import { RichTextEditorIntroductionModule } from './rich-text-editor-introduction/rich-text-editor-introduction.module'; | ||
|
||
export default { | ||
title: 'Components/Rich-Text-Editor', | ||
decorators: [ | ||
moduleMetadata({ | ||
imports: [ | ||
CommonModule, | ||
RichTextEditorMinHeightModule, | ||
RichTextEditorMaxHeightModule, | ||
RichTextEditorIntroductionModule, | ||
], | ||
}), | ||
], | ||
} as Meta; | ||
|
||
export const Introduction: Story = (args) => ({ | ||
template: '<sds-rich-text-editor-introduction></sds-rich-text-editor-introduction>', | ||
props: args, | ||
}); | ||
Introduction.parameters = { | ||
options: { showPanel: false }, | ||
controls: { | ||
disable: true, | ||
hideNoControlsWarning: true, | ||
}, | ||
actions: { disable: true }, | ||
preview: { disable: true }, | ||
}; | ||
|
||
export const MinHeight: Story = (args) => ({ | ||
template: `<sds-rich-text-editor-min-height></sds-rich-text-editor-min-height>`, | ||
props: { | ||
...args, | ||
}, | ||
}); | ||
MinHeight.parameters = { | ||
controls: { | ||
disable: true, | ||
hideNoControlsWarning: true, | ||
}, | ||
actions: { disable: true }, | ||
preview: generateConfig( | ||
'storybook/rich-text-editor/rich-text-editor-min-height', | ||
'RichTextEditorMinHeightModule', | ||
'sds-rich-text-editor-min-height' | ||
), | ||
stackblitzLink: generateStackblitzLink('rich-text-editor', 'min-height'), | ||
}; | ||
|
||
export const MaxHeight: Story = (args) => ({ | ||
template: `<sds-rich-text-editor-max-height></sds-rich-text-editor-max-height>`, | ||
props: { | ||
...args, | ||
}, | ||
}); | ||
MaxHeight.parameters = { | ||
controls: { | ||
disable: true, | ||
hideNoControlsWarning: true, | ||
}, | ||
actions: { disable: true }, | ||
preview: generateConfig( | ||
'storybook/rich-text-editor/rich-text-editor-max-height', | ||
'RichTextEditorMaxHeightModule', | ||
'sds-rich-text-editor-max-height' | ||
), | ||
stackblitzLink: generateStackblitzLink('rich-text-editor', 'max-height'), | ||
}; | ||
|
||
export const __namedExportsOrder = ['Introduction', 'MaxHeight', 'MinHeight']; |
17 changes: 17 additions & 0 deletions
17
.../lib/storybook/side-navigation/side-navigation-links/side-navigation-links.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,17 @@ | ||
<div class="desktop:grid-col-4 tablet-lg:grid-col-12 mobile-lg:grid-col-12 margin-bottom-3"> | ||
<sds-side-toolbar | ||
[responsiveButtonText]="'Links'" | ||
[responsiveDialogOptions]="responsiveDialogOptions" | ||
[dialogTitleText]="'Navigation Links'" | ||
[backButtonAria]="'Close Navigation Links'" | ||
(responsiveDialog)="onSidenavDialogOpen($event)" | ||
> | ||
<ng-template #toolbarContent> | ||
<sds-side-navigation | ||
#sideNavigation | ||
[model]="navigationModel" | ||
(linkEvent)="onSideNavItemClicked($event)" | ||
></sds-side-navigation> | ||
</ng-template> | ||
</sds-side-toolbar> | ||
</div> |
55 changes: 55 additions & 0 deletions
55
...rc/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.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,55 @@ | ||
import { AfterViewInit, Component, TemplateRef, ViewChild } from '@angular/core'; | ||
import { SdsSideNavigationComponent, SdsDialogConfig, SideNavigationModel, SdsDialogRef } from '@gsa-sam/components'; | ||
import { navigationConfig } from '../side-navigation-filters/side-navigation-filters.config'; | ||
|
||
@Component({ | ||
selector: 'sds-side-navigation-links', | ||
templateUrl: './side-navigation-links.component.html', | ||
}) | ||
export class SideNavigationLinksComponent implements AfterViewInit { | ||
@ViewChild('sideNavigation') sideNavigation: SdsSideNavigationComponent; | ||
|
||
responsiveDialogOptions: SdsDialogConfig = { | ||
ariaLabel: 'Navigation Links', | ||
}; | ||
|
||
public navigationModel: SideNavigationModel = navigationConfig; | ||
|
||
/** | ||
* Pre-select first sidenav item if sidenav is defined during initialization phase. | ||
* We do AfterViewInit rather than OnInit because non-static view child references | ||
* are not defined until AfterViewInit | ||
* On mobile view, due to sds-side-toolbar, the sidenav does not exist until user | ||
* opens the sidenav through modal. See onSidenavDialogOpen for listening for the | ||
* modal to popup and pre-selecting a sidenav link | ||
*/ | ||
ngAfterViewInit() { | ||
if (!this.sideNavigation) return; | ||
this.sideNavigation.select(navigationConfig.navigationLinks[0].id); | ||
} | ||
|
||
onSideNavItemClicked($event) { | ||
this.sideNavigation.select($event.id); | ||
} | ||
|
||
/** | ||
* Execute event after user clicks to open sidenav dialog in mobile view | ||
* On mobile view, sidenav will only be defined after user chooses to open the dialog. | ||
* We listen for that dialog open event, | ||
* @param $event | ||
*/ | ||
onSidenavDialogOpen($event: SdsDialogRef<TemplateRef<any>>) { | ||
/** | ||
* We need to wait for dialog to finish opening before we can reference components | ||
* inside the dialog | ||
* */ | ||
|
||
$event | ||
.afterOpened() | ||
.toPromise() | ||
.then(() => { | ||
// Once the sidenav is completely initialized, select the first item | ||
this.sideNavigation.select(navigationConfig.navigationLinks[0].id); | ||
}); | ||
} | ||
} |
12 changes: 12 additions & 0 deletions
12
...n/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.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,12 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
import { SideNavigationLinksComponent } from './side-navigation-links.component'; | ||
import { SdsSideNavigationModule, SdsSideToolbarModule } from '@gsa-sam/components'; | ||
|
||
@NgModule({ | ||
imports: [CommonModule, SdsSideNavigationModule, SdsSideToolbarModule], | ||
declarations: [SideNavigationLinksComponent], | ||
bootstrap: [SideNavigationLinksComponent], | ||
exports: [SideNavigationLinksComponent], | ||
}) | ||
export class SideNavigationLinksModule {} |
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.