docs: update theming colors for docs; update icon example (#3330)

SAP · Sep 17, 2020 · 52a3d4b · 52a3d4b
1 parent 3376bff
commit 52a3d4b
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 53 deletions.
diff --git a/apps/docs/src/app/core/component-docs/icon/examples/icon-example.component.html b/apps/docs/src/app/core/component-docs/icon/examples/icon-example.component.html
@@ -1,6 +1,6 @@
 <div class="grid">
     <div *ngFor="let icon of icons">
-        <fd-icon [size]="'l'" [glyph]="icon"></fd-icon>
+        <fd-icon style="font-size:2rem" [glyph]="icon"></fd-icon>
         <span>{{ icon }}</span>
     </div>
 </div>
diff --git a/apps/docs/src/app/core/component-docs/icon/examples/icon-example.component.ts b/apps/docs/src/app/core/component-docs/icon/examples/icon-example.component.ts
@@ -7,7 +7,6 @@ import { Component } from '@angular/core';
 })
 export class IconExampleComponent {
     icons: string[] = [
-        '',
         'accelerated',
         'accept',
         'accidental-leave',

diff --git a/apps/docs/src/app/core/component-docs/icon/icon-docs.component.html b/apps/docs/src/app/core/component-docs/icon/icon-docs.component.html
@@ -27,9 +27,3 @@
     <code>xl</code>, but <code>size</code> can accept any other string, for example <code>xxs</code>, which will be
     translated into class <code>sap-icon--xxs</code>.
 </description>
-
-<separator></separator>
-
-<playground [schema]="schema" [schemaInitialValues]="data" (onFormChanges)="onSchemaValues($event)">
-    <fd-icon [glyph]="data.properties.glyphs" [size]="data.modifier.block"> </fd-icon>
-</playground>
diff --git a/apps/docs/src/app/core/component-docs/icon/icon-docs.component.ts b/apps/docs/src/app/core/component-docs/icon/icon-docs.component.ts
@@ -1,43 +1,15 @@
 import { Component } from '@angular/core';
-import { Schema } from '../../../schema/models/schema.model';
-import { SchemaFactoryService } from '../../../schema/services/schema-factory/schema-factory.service';
 
 import * as iconSrc from '!raw-loader!./examples/icon-example.component.html';
 import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
 import * as iconTsCode from '!raw-loader!./examples/icon-example.component.ts';
 import * as iconScssCode from '!raw-loader!./examples/icon-example.component.scss';
-import { Icons } from '../../../documentation/utilities/icons';
 
 @Component({
     selector: 'app-icon',
     templateUrl: './icon-docs.component.html'
 })
 export class IconDocsComponent {
-    static schema: any = {
-        properties: {
-            properties: {
-                type: 'object',
-                properties: {
-                    glyphs: {
-                        type: 'string',
-                        enum: Icons
-                    }
-                }
-            },
-            modifier: {
-                type: 'object',
-                properties: {
-                    block: {
-                        type: 'string',
-                        enum: ['s', 'default', 'm', 'l', 'xl']
-                    }
-                }
-            }
-        },
-        type: 'object'
-    };
-
-    schema: Schema;
 
     data: any = {
         properties: {
@@ -58,12 +30,4 @@ export class IconDocsComponent {
             scssFileCode: iconScssCode
         }
     ];
-
-    constructor(private schemaFactory: SchemaFactoryService) {
-        this.schema = this.schemaFactory.getComponent('icon');
-    }
-
-    onSchemaValues(data): void {
-        this.data = data;
-    }
 }
diff --git a/apps/docs/src/app/core/component-docs/schemas.ts b/apps/docs/src/app/core/component-docs/schemas.ts
@@ -4,25 +4,20 @@ import { Schema } from '../../schema/models/schema.model';
 import { ButtonDocsComponent } from './button/button-docs.component';
 import { SegmentedButtonDocsComponent } from './segmented-button/segmented-button-docs.component';
 import { AlertDocsComponent } from './alert/alert-docs.component';
-import { IconDocsComponent } from './icon/icon-docs.component';
 import { InlineHelpDocsComponent } from './inline-help/inline-help-docs.component';
 import { InputGroupDocsComponent } from './input-group/input-group-docs.component';
 import { PaginationDocsComponent } from './pagination/pagination-docs.component';
-import { ListDocsComponent } from './list/list-docs.component';
 import { TabsDocsComponent } from './tabs/tabs-docs.component';
-import { TreeDocsComponent } from './tree/tree-docs.component';
 import { DialogDocsComponent } from './dialog/dialog-docs.component';
 import { MessageStripDocsComponent } from './message-strip/message-strip-docs.component';
 import { TableDocsComponent } from './table/table-docs.component';
-import { TileDocsComponent } from './tile/tile-docs.component';
 import { TimeDocsComponent } from './time/time-docs.component';
 import { SwitchDocsComponent } from './switch/switch-docs.component';
 
 export const COMPONENT_SCHEMAS: { [name: string]: Schema } = {
     button: ButtonDocsComponent.schema,
     segmentedButton: SegmentedButtonDocsComponent.schema,
     alert: AlertDocsComponent.schema,
-    icon: IconDocsComponent.schema,
     inlineHelp: InlineHelpDocsComponent.schema,
     inputGroup: InputGroupDocsComponent.schema,
     pagination: PaginationDocsComponent.schema,
@@ -31,7 +26,6 @@ export const COMPONENT_SCHEMAS: { [name: string]: Schema } = {
     tabs: TabsDocsComponent.schema,
     table: TableDocsComponent.schema,
     time: TimeDocsComponent.schema,
-    // tree: TreeDocsComponent.schema,
     switch: SwitchDocsComponent.schema,
     media: {
         properties: {

diff --git a/...ocs/src/app/documentation/core-helpers/component-example/component-example.component.scss b/...ocs/src/app/documentation/core-helpers/component-example/component-example.component.scss
@@ -17,6 +17,8 @@ rtl-switch {
 .docs-tile.docs-tile-example-background {
     background-color: #f7f7f7;
     background-color: var(--sapBackgroundColor, #f7f7f7);
+    color: #32363a;
+    color: var(--sapTextColor, #32363a);
 }
 
 span.fd-badge,

diff --git a/apps/docs/src/app/documentation/shared-core-modules.ts b/apps/docs/src/app/documentation/shared-core-modules.ts
@@ -5,7 +5,8 @@ import {
     SwitchModule,
     ButtonModule,
     MessageStripModule,
-    FormLabelModule
+    FormLabelModule,
+    LinkModule
 } from '@fundamental-ngx/core';
 
 export const sharedCoreModules = [
@@ -15,5 +16,6 @@ export const sharedCoreModules = [
     SwitchModule,
     ButtonModule,
     MessageStripModule,
-    FormLabelModule
+    FormLabelModule,
+    LinkModule
 ];
diff --git a/apps/docs/src/app/schema/containers/schema-group/schema-group.component.scss b/apps/docs/src/app/schema/containers/schema-group/schema-group.component.scss
@@ -3,7 +3,15 @@ $sub-header--margin-left: 20px;
 :host {
     display: block;
     padding: 20px;
-    border: 1px #eee solid;
+    border-width: 0.0625rem;
+    border-width: var(--sapElement_BorderWidth, 0.0625rem);
+    border-color: #89919a;
+    border-color: var(--sapField_BorderColor, #89919a);
+    border-style: solid;
+    border-radius: 0.25rem;
+    border-radius: var(--sapElement_BorderCornerRadius, 0.25rem);
+    background-color: #f7f7f7;
+    background-color: var(--sapBackgroundColor, #f7f7f7);
 }
 
 .form-group {
@@ -37,6 +45,8 @@ $sub-header--margin-left: 20px;
 .schema--sub-header {
     margin-left: $sub-header--margin-left;
     margin-bottom: 10px;
+    color: #32363a;
+    color: var(--sapTextColor, #32363a);
     :host + & {
         margin-top: 15px;
     }