Add Missing Demos

libs/documentation/src/lib/components/rich-text/demos/basic/basic-rich-text.component.html

@@ -19,6 +19,6 @@
   <code>valueChanges</code> allows developers to get updates as users change value of the rich text editor.
 </p>
 
-<sds-rich-text [formControl]="fc"></sds-rich-text>
+<sds-rich-text [formControl]="fc" [maxHeight]="10"></sds-rich-text>
 
 <p>Rich Text Editor Value: {{ fc.value }}</p>

libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-introduction/rich-text-editor-introduction.component.html

@@ -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>

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 {}

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 {}

libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-max-height/rich-text-editor-max-height.component.html

@@ -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>

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('<p>this is a test</p>');
+}

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 {}

libs/documentation/src/lib/storybook/rich-text-editor/rich-text-editor-min-height/rich-text-editor-min-height.component.html

@@ -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>

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('<p>this is a test</p>');
+}

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 {}

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: '<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'];

libs/documentation/src/lib/storybook/side-navigation/side-navigation-links/side-navigation-links.component.html

@@ -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>

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<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);
+      });
+  }
+}

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 {}

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: `<sds-side-navigation-links></sds-side-navigation-links>`,
+  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'];