feat(angular-test-app): add rounded tabs example (#123)

siemens · Nov 7, 2022 · 6a63afe · 6a63afe
1 parent f413e0e
commit 6a63afe
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 15 deletions.
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -62,6 +62,7 @@ import { SpinnerLarge } from 'src/preview-examples/spinner-large';
 import { SplitButton } from 'src/preview-examples/split-button';
 import { SplitButtonIcons } from 'src/preview-examples/split-button-icons';
 import { Tabs } from 'src/preview-examples/tabs';
+import { TabsRounded } from 'src/preview-examples/tabs-rounded';
 import { Textarea } from 'src/preview-examples/textarea';
 import { TextareaDisabled } from 'src/preview-examples/textarea-disabled';
 import { TextareaReadonly } from 'src/preview-examples/textarea-readonly';
@@ -239,6 +240,7 @@ const routes: Routes = [
       { path: 'split-button-icons', component: SplitButtonIcons },
       { path: 'split-button', component: SplitButton },
       { path: 'tabs', component: Tabs },
+      { path: 'tabs-rounded', component: TabsRounded },
       { path: 'textarea', component: Textarea },
       { path: 'textarea-disabled', component: TextareaDisabled },
       { path: 'textarea-readonly', component: TextareaReadonly },

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -70,6 +70,7 @@ import { SpinnerLarge } from 'src/preview-examples/spinner-large';
 import { SplitButton } from 'src/preview-examples/split-button';
 import { SplitButtonIcons } from 'src/preview-examples/split-button-icons';
 import { Tabs } from 'src/preview-examples/tabs';
+import { TabsRounded } from 'src/preview-examples/tabs-rounded';
 import { Textarea } from 'src/preview-examples/textarea';
 import { TextareaDisabled } from 'src/preview-examples/textarea-disabled';
 import { TextareaReadonly } from 'src/preview-examples/textarea-readonly';
@@ -167,6 +168,7 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     Workflow,
     WorkflowVertical,
     MapNavigation,
+    TabsRounded,
   ],
   imports: [
     BrowserModule,

diff --git a/packages/angular-test-app/src/preview-examples/tabs-rounded.ts b/packages/angular-test-app/src/preview-examples/tabs-rounded.ts
@@ -0,0 +1,42 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tabs-rounded',
+  styles: [
+    `
+      :host {
+        .example {
+          display: block;
+          position: relative;
+          width: 100%;
+        }
+      }
+    `,
+  ],
+  template: `
+    <div class="example">
+      <ix-tabs rounded>
+        <ix-tab-item><ix-icon name="success"></ix-icon></ix-tab-item>
+        <ix-tab-item counter="200"><ix-icon name="tree"></ix-icon></ix-tab-item>
+        <ix-tab-item><ix-icon name="maintenance"></ix-icon></ix-tab-item>
+        <ix-tab-item disabled counter="24">
+          <ix-icon name="sound-loud"></ix-icon>
+        </ix-tab-item>
+        <ix-tab-item><ix-icon name="hierarchy"></ix-icon></ix-tab-item>
+        <ix-tab-item disabled
+          ><ix-icon name="calendar-settings"></ix-icon
+        ></ix-tab-item>
+      </ix-tabs>
+    </div>
+  `,
+})
+export class TabsRounded {}
diff --git a/packages/documentation/docs/auto-generated/previews/angular/tabs-rounded.md b/packages/documentation/docs/auto-generated/previews/angular/tabs-rounded.md
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2022 Siemens AG
 SPDX-License-Identifier: MIT
 -->
 
-<!-- Auto generated! Please edit here: siemens-ix/packages/angular-test-app/src/preview-examples/tabs.ts -->
+<!-- Auto generated! Please edit here: packages/angular-test-app/src/preview-examples/tabs-rounded.ts -->
 ```typescript
 /*
  * SPDX-FileCopyrightText: 2022 Siemens AG
@@ -18,17 +18,34 @@ SPDX-License-Identifier: MIT
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-tabs',
+  selector: 'app-tabs-rounded',
+  styles: [
+    `
+      :host {
+        .example {
+          display: block;
+          position: relative;
+          width: 100%;
+        }
+      }
+    `,
+  ],
   template: `
-    <ix-tabs rounded>
-      <ix-tab-item><ix-icon name='success'></ix-icon></ix-tab-item>
-      <ix-tab-item counter='200'><ix-icon name='tree'></ix-icon></ix-tab-item>
-      <ix-tab-item><ix-icon name='maintenance'></ix-icon></ix-tab-item>
-      <ix-tab-item disabled counter='24'><ix-icon name='sound-loud'></ix-icon></ix-tab-item>
-      <ix-tab-item ><ix-icon name='hierarchy'></ix-icon></ix-tab-item>
-      <ix-tab-item disabled><ix-icon name='calendar-settings'></ix-icon></ix-tab-item>
-    </ix-tabs>
+    <div class="example">
+      <ix-tabs rounded>
+        <ix-tab-item><ix-icon name="success"></ix-icon></ix-tab-item>
+        <ix-tab-item counter="200"><ix-icon name="tree"></ix-icon></ix-tab-item>
+        <ix-tab-item><ix-icon name="maintenance"></ix-icon></ix-tab-item>
+        <ix-tab-item disabled counter="24">
+          <ix-icon name="sound-loud"></ix-icon>
+        </ix-tab-item>
+        <ix-tab-item><ix-icon name="hierarchy"></ix-icon></ix-tab-item>
+        <ix-tab-item disabled
+          ><ix-icon name="calendar-settings"></ix-icon
+        ></ix-tab-item>
+      </ix-tabs>
+    </div>
   `,
 })
-export class Tabs {}
+export class TabsRounded {}
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/tabs-rounded.md b/packages/documentation/docs/auto-generated/previews/web-component/tabs-rounded.md
@@ -8,9 +8,9 @@ SPDX-License-Identifier: MIT
 ```html
 <ix-tabs rounded>
   <ix-tab-item><ix-icon name="success"></ix-icon></ix-tab-item>
-  <ix-tab-item counter="{200}"><ix-icon name="tree"></ix-icon></ix-tab-item>
+  <ix-tab-item counter="200"><ix-icon name="tree"></ix-icon></ix-tab-item>
   <ix-tab-item><ix-icon name="maintenance"></ix-icon></ix-tab-item>
-  <ix-tab-item disabled counter="{24}"
+  <ix-tab-item disabled counter="24"
     ><ix-icon name="sound-loud"></ix-icon
   ></ix-tab-item>
   <ix-tab-item><ix-icon name="hierarchy"></ix-icon></ix-tab-item>

diff --git a/packages/html-test-app/src/preview-examples/tabs-rounded.html b/packages/html-test-app/src/preview-examples/tabs-rounded.html
@@ -15,9 +15,9 @@
     <!-- Preview code -->
     <ix-tabs rounded>
       <ix-tab-item><ix-icon name="success"></ix-icon></ix-tab-item>
-      <ix-tab-item counter="{200}"><ix-icon name="tree"></ix-icon></ix-tab-item>
+      <ix-tab-item counter="200"><ix-icon name="tree"></ix-icon></ix-tab-item>
       <ix-tab-item><ix-icon name="maintenance"></ix-icon></ix-tab-item>
-      <ix-tab-item disabled counter="{24}"
+      <ix-tab-item disabled counter="24"
         ><ix-icon name="sound-loud"></ix-icon
       ></ix-tab-item>
       <ix-tab-item><ix-icon name="hierarchy"></ix-icon></ix-tab-item>