docs(core): added feed input example (#10273)

* docs(core): added image --------- Co-authored-by: deno <[email protected]>
SAP · Aug 19, 2023 · 9b4c1a5 · 9b4c1a5
1 parent 10de142
commit 9b4c1a5
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 1 deletion.
diff --git a/...examples/feed-input-circle-avatar-example/feed-input-circle-avatar-example.component.html b/...examples/feed-input-circle-avatar-example/feed-input-circle-avatar-example.component.html
@@ -0,0 +1,16 @@
+<fd-feed-input aria-label="Feed input">
+    <fd-avatar
+        fdFeedInputAvatar
+        image="http://picsum.photos/id/1018/400"
+        [circle]="true"
+        size="s"
+        role="img"
+        aria-label="John Doe"
+        label="Jane Doe"
+        title="John Doe"
+    ></fd-avatar>
+
+    <textarea fd-form-control fdFeedInputTextarea placeholder="Post something here"></textarea>
+
+    <button fdFeedInputButton aria-label="Send" title="Send"></button>
+</fd-feed-input>
diff --git a/...t/examples/feed-input-circle-avatar-example/feed-input-circle-avatar-example.component.ts b/...t/examples/feed-input-circle-avatar-example/feed-input-circle-avatar-example.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-feed-input-circle-avatar-example',
+    templateUrl: './feed-input-circle-avatar-example.component.html'
+})
+export class FeedInputCircleAvatarExampleComponent {}
diff --git a/libs/docs/core/feed-input/feed-input-docs.component.html b/libs/docs/core/feed-input/feed-input-docs.component.html
@@ -38,3 +38,11 @@
     <fd-feed-input-grow-example></fd-feed-input-grow-example>
 </component-example>
 <code-example [exampleFiles]="feedInputMaxHeight"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="disabled" componentName="feed-input"> Circle Avatar </fd-docs-section-title>
+<component-example>
+    <fd-feed-input-circle-avatar-example></fd-feed-input-circle-avatar-example>
+</component-example>
+<code-example [exampleFiles]="feedInputCircleAvatar"></code-example>
diff --git a/libs/docs/core/feed-input/feed-input-docs.component.ts b/libs/docs/core/feed-input/feed-input-docs.component.ts
@@ -7,6 +7,7 @@ const feedInputPlaceholderH = 'feed-input-placeholder-example/feed-input-placeho
 const feedInputNoAvatarH = 'feed-input-no-avatar-example/feed-input-no-avatar-example.component.html';
 const feedInputDisabledH = 'feed-input-disabled-example/feed-input-disabled-example.component.html';
 const feedInputMaxHeightH = 'feed-input-grow-example/feed-input-grow-example.component.html';
+const feedInputCircleAvatarH = 'feed-input-circle-avatar-example/feed-input-circle-avatar-example.component.html';
 
 @Component({
     selector: 'app-feed-input',
@@ -52,4 +53,11 @@ export class FeedInputDocsComponent {
             fileName: 'feed-input-max-height-example'
         }
     ];
+    feedInputCircleAvatar: ExampleFile[] = [
+        {
+            language: 'html',
+            code: getAssetFromModuleAssets(feedInputCircleAvatarH),
+            fileName: 'feed-input-circle-avatar-example'
+        }
+    ];
 }
diff --git a/libs/docs/core/feed-input/feed-input-docs.module.ts b/libs/docs/core/feed-input/feed-input-docs.module.ts
@@ -12,6 +12,7 @@ import { FeedInputGrowExampleComponent } from './examples/feed-input-grow-exampl
 import { FeedInputModule } from '@fundamental-ngx/core/feed-input';
 import { AvatarModule } from '@fundamental-ngx/core/avatar';
 import { FormControlModule } from '@fundamental-ngx/core/form';
+import { FeedInputCircleAvatarExampleComponent } from './examples/feed-input-circle-avatar-example/feed-input-circle-avatar-example.component';
 
 const routes: Routes = [
     {
@@ -40,7 +41,8 @@ const routes: Routes = [
         FeedInputPlaceholderExampleComponent,
         FeedInputNoAvatarExampleComponent,
         FeedInputDisabledExampleComponent,
-        FeedInputGrowExampleComponent
+        FeedInputGrowExampleComponent,
+        FeedInputCircleAvatarExampleComponent
     ],
     providers: [currentComponentProvider('feed-input')]
 })