From 15a013ca613530f5b29811185d6a5cea2e2f3e87 Mon Sep 17 00:00:00 2001 From: Cameron Wolf Date: Mon, 8 Jan 2024 09:04:08 -0500 Subject: [PATCH 1/2] Add Missing Demos --- .../basic/basic-rich-text.component.html | 2 +- ...ch-text-editor-introduction.component.html | 20 +++++ ...rich-text-editor-introduction.component.ts | 7 ++ .../rich-text-editor-introduction.module.ts | 11 +++ ...rich-text-editor-max-height.component.html | 5 ++ .../rich-text-editor-max-height.component.ts | 11 +++ .../rich-text-editor-max-height.module.ts | 13 ++++ ...rich-text-editor-min-height.component.html | 5 ++ .../rich-text-editor-min-height.component.ts | 11 +++ .../rich-text-editor-min-height.module.ts | 13 ++++ .../rich-text-editor.stories.ts | 76 +++++++++++++++++++ .../side-navigation-links.component.html | 17 +++++ .../side-navigation-links.component.ts | 55 ++++++++++++++ .../side-navigation-links.module.ts | 12 +++ .../side-navigation.stories.ts | 42 +++++++++- 15 files changed, 295 insertions(+), 5 deletions(-) create mode 100644 libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.component.html create mode 100644 libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.component.ts create mode 100644 libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.module.ts create mode 100644 libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.component.html create mode 100644 libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.component.ts create mode 100644 libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.module.ts create mode 100644 libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.component.html create mode 100644 libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.component.ts create mode 100644 libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.module.ts create mode 100644 libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor.stories.ts create mode 100644 libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.component.html create mode 100644 libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.component.ts create mode 100644 libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.module.ts diff --git a/libs/documentation/src/lib/components/rich-text/demos/basic/basic-rich-text.component.html b/libs/documentation/src/lib/components/rich-text/demos/basic/basic-rich-text.component.html index 46749c45cc..fcc0db75f2 100644 --- a/libs/documentation/src/lib/components/rich-text/demos/basic/basic-rich-text.component.html +++ b/libs/documentation/src/lib/components/rich-text/demos/basic/basic-rich-text.component.html @@ -19,6 +19,6 @@ valueChanges allows developers to get updates as users change value of the rich text editor.

- +

Rich Text Editor Value: {{ fc.value }}

diff --git a/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.component.html b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.component.html new file mode 100644 index 0000000000..55dd46147c --- /dev/null +++ b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.component.html @@ -0,0 +1,20 @@ +Inputs +

+ minHeight:number (Optional) - 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. +

+ +

+ maxHeight:number (Optional) - 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. +

+ +

+ The rich text editor component can be passed a formControl for use in reactive forms. Subscribing to + valueChanges allows developers to get updates as users change value of the rich text editor. +

diff --git a/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.component.ts b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.component.ts new file mode 100644 index 0000000000..8d424b0a69 --- /dev/null +++ b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.component.ts @@ -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 {} diff --git a/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.module.ts b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.module.ts new file mode 100644 index 0000000000..4ced1885e1 --- /dev/null +++ b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.module.ts @@ -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 {} diff --git a/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.component.html b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.component.html new file mode 100644 index 0000000000..ba2cd05612 --- /dev/null +++ b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.component.html @@ -0,0 +1,5 @@ +
+ + +

Rich Text Editor Value: {{ fc.value }}

+
diff --git a/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.component.ts b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.component.ts new file mode 100644 index 0000000000..1be06d38b3 --- /dev/null +++ b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.component.ts @@ -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('

this is a test

'); +} diff --git a/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.module.ts b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.module.ts new file mode 100644 index 0000000000..6774666464 --- /dev/null +++ b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.module.ts @@ -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 {} diff --git a/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.component.html b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.component.html new file mode 100644 index 0000000000..0920004d19 --- /dev/null +++ b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.component.html @@ -0,0 +1,5 @@ +
+ + +

Rich Text Editor Value: {{ fc.value }}

+
diff --git a/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.component.ts b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.component.ts new file mode 100644 index 0000000000..bb93d57e76 --- /dev/null +++ b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.component.ts @@ -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('

this is a test

'); +} diff --git a/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.module.ts b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.module.ts new file mode 100644 index 0000000000..3644d7bb8c --- /dev/null +++ b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.module.ts @@ -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 {} diff --git a/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor.stories.ts b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor.stories.ts new file mode 100644 index 0000000000..34fc189490 --- /dev/null +++ b/libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor.stories.ts @@ -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: '', + props: args, +}); +Introduction.parameters = { + options: { showPanel: false }, + controls: { + disable: true, + hideNoControlsWarning: true, + }, + actions: { disable: true }, + preview: { disable: true }, +}; + +export const MinHeight: Story = (args) => ({ + template: ``, + 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: ``, + 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']; diff --git a/libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.component.html b/libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.component.html new file mode 100644 index 0000000000..5031bbfbb8 --- /dev/null +++ b/libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.component.html @@ -0,0 +1,17 @@ +
+ + + + + +
diff --git a/libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.component.ts b/libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.component.ts new file mode 100644 index 0000000000..c1fed336ab --- /dev/null +++ b/libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.component.ts @@ -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>) { + /** + * 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); + }); + } +} diff --git a/libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.module.ts b/libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.module.ts new file mode 100644 index 0000000000..af03211274 --- /dev/null +++ b/libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.module.ts @@ -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 {} diff --git a/libs/documentation/src/lib/storybook/side-navigation/side-navigation.stories.ts b/libs/documentation/src/lib/storybook/side-navigation/side-navigation.stories.ts index 719537f946..3627d9d625 100644 --- a/libs/documentation/src/lib/storybook/side-navigation/side-navigation.stories.ts +++ b/libs/documentation/src/lib/storybook/side-navigation/side-navigation.stories.ts @@ -10,12 +10,19 @@ import { RouterTestingModule } from '@angular/router/testing'; import { NavigationMode } from '@gsa-sam/components'; import { SideNavigationIntroductionModule } from './side-navigation-introduction/side-navigation-introduction.module'; import { SideNavigationFiltersModule } from './side-navigation-filters/side-navigation-filters.module'; +import { SideNavigationLinksModule } from './side-navigation-links/side-navigation-links.module'; export default { title: 'Components/Side Navigation', decorators: [ moduleMetadata({ - imports: [CommonModule, NoopAnimationsModule, SideNavigationIntroductionModule, SideNavigationFiltersModule], + imports: [ + CommonModule, + NoopAnimationsModule, + SideNavigationIntroductionModule, + SideNavigationFiltersModule, + SideNavigationLinksModule, + ], }), ], argTypes: {}, @@ -52,7 +59,7 @@ Filters.parameters = { preview: generateConfig( 'storybook/side-navigation/side-navigation-filters', 'SideNavigationFiltersModule', - 'side-navigation-filters', + 'sds-side-navigation-filters', [ createCodePreviewTabData( 'storybook/side-navigation/side-navigation-filters/side-navigation-filters.config.ts', @@ -61,7 +68,34 @@ Filters.parameters = { ), ] ), - stackblitzLink: generateStackblitzLink('sds-side-navigation', 'filters'), + stackblitzLink: generateStackblitzLink('side-navigation', 'filters'), }; -export const __namedExportsOrder = ['Introduction', 'Filters']; +export const Links: Story = (args) => ({ + template: ``, + props: { + ...args, + }, +}); +Links.parameters = { + controls: { + disable: true, + hideNoControlsWarning: true, + }, + actions: { disable: true }, + preview: generateConfig( + 'storybook/side-navigation/side-navigation-links', + 'SideNavigationLinkssModule', + 'sds-side-navigation-links', + [ + createCodePreviewTabData( + 'storybook/side-navigation/side-navigation-filters/side-navigation-filters.config.ts', + 'ts', + false + ), + ] + ), + stackblitzLink: generateStackblitzLink('side-navigation', 'links'), +}; + +export const __namedExportsOrder = ['Introduction', 'Filters', 'Links']; From d493dbd61c793adc4e67625d50cab54d5fb7e142 Mon Sep 17 00:00:00 2001 From: Cameron Wolf Date: Tue, 9 Jan 2024 08:29:54 -0500 Subject: [PATCH 2/2] Update sam-styles version --- package-lock.json | 14 ++++---------- package.json | 2 +- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9f11cba20d..1fcaf1f7ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "@gsa-sam/ngx-uswds-icons": "^16.0.0", "@gsa-sam/sam-formly": "^16.0.8", "@gsa-sam/sam-material-extensions": "^16.0.8", - "@gsa-sam/sam-styles": "^3.0.15", + "@gsa-sam/sam-styles": "^3.0.18", "@ngx-formly/core": "^6.2.1", "@ngx-formly/schematics": "^6.2.1", "@types/qs": "^6.9.5", @@ -6277,9 +6277,9 @@ } }, "node_modules/@gsa-sam/sam-styles": { - "version": "3.0.16", - "resolved": "https://registry.npmjs.org/@gsa-sam/sam-styles/-/sam-styles-3.0.16.tgz", - "integrity": "sha512-uGlsvXVmHQqHz+3hVgqvneE83/bYRtJuemGVekAicMOfB2+J/LEqDvnl6+Hmgs1ApOPp/SxvQMHECt40H2XG9Q==", + "version": "3.0.18", + "resolved": "https://registry.npmjs.org/@gsa-sam/sam-styles/-/sam-styles-3.0.18.tgz", + "integrity": "sha512-NsTeVIS9H1Ba0ph03By6WRPV3jLf1WjUjLDlw8B5L23Iw1FYJ8Jo0hub+aE183sH7KDd9qS8y6sqIm0NEZwJhQ==", "dependencies": { "@uswds/uswds": "^3.3.0", "bootstrap-icons": "^1.10.3", @@ -28495,7 +28495,6 @@ }, "node_modules/npm/node_modules/lodash._baseindexof": { "version": "3.1.0", - "extraneous": true, "inBundle": true, "license": "MIT" }, @@ -28511,19 +28510,16 @@ }, "node_modules/npm/node_modules/lodash._bindcallback": { "version": "3.0.1", - "extraneous": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/lodash._cacheindexof": { "version": "3.0.2", - "extraneous": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/lodash._createcache": { "version": "3.1.2", - "extraneous": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -28538,7 +28534,6 @@ }, "node_modules/npm/node_modules/lodash._getnative": { "version": "3.9.1", - "extraneous": true, "inBundle": true, "license": "MIT" }, @@ -28556,7 +28551,6 @@ }, "node_modules/npm/node_modules/lodash.restparam": { "version": "3.6.1", - "extraneous": true, "inBundle": true, "license": "MIT" }, diff --git a/package.json b/package.json index ebe24576ad..b3d5aac0e2 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "@gsa-sam/ngx-uswds-icons": "^16.0.0", "@gsa-sam/sam-formly": "^16.0.8", "@gsa-sam/sam-material-extensions": "^16.0.8", - "@gsa-sam/sam-styles": "^3.0.15", + "@gsa-sam/sam-styles": "^3.0.18", "@ngx-formly/core": "^6.2.1", "@ngx-formly/schematics": "^6.2.1", "@types/qs": "^6.9.5",