-
-
-
- The public toggleHeaderBrandingEnabled(): void method can
- be used to enable/disable header branding.
-
-
-
+
+
+ Enable Header Branding
+
+
+
+ The public toggleHeaderBrandingEnabled(): void method can
+ be used to enable/disable header branding.
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+ Override Accessibility Color
+
+
+
+ The overrideMenuColor() method can
+ be used to override the accessibility check that is performed on the header.
+ You can specify light, dark
+ or leave it undefined to allow the accessibility check.
+ This feature is only activated if headerBrandingEnabled is enabled.
+
+
+
+
+
+
+
+
+ Note: to see this example take affect, toggle the "Enable Header Branding" above to true.
+
+
+
+
+
+
+
+
+
-
-
-
+
+
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts
index 892e2050e..e7854a39e 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts
@@ -8,8 +8,14 @@ import { FormControl } from '@angular/forms';
})
export class ConfigurationDocsComponent implements OnInit {
pageTitle: string = 'Configuration';
- inputControl: FormControl;
+ inputControl: FormControl = new FormControl(false);
toggleControl: FormControl = new FormControl(false);
+ colorControl: FormControl = new FormControl('');
+ colorOptions: any = [
+ { label: 'Default', value: undefined },
+ { label: 'Light', value: 'light' },
+ { label: 'Dark', value: 'dark' }
+ ];
updateColorExample: string = `
updateColor(): void {
@@ -45,6 +51,30 @@ export class ConfigurationDocsComponent implements OnInit {
}
`;
+ colorEx: string = `
+ colorControl: FormControl = new FormControl('');
+ colorOptions: any = [
+ { label: 'Default', value: undefined },
+ { label: 'Light', value: 'light' },
+ { label: 'Dark', value: 'dark' }
+ ];
+
+ constructor(private goConfigService: GoConfigService) { }
+
+ this.colorControl.valueChanges.subscribe(value => {
+ this.goConfigService.overrideMenuColor(value);
+ });
+ `;
+
+ colorEx_html: string = `
+
+
+ `;
+
constructor(private goConfigService: GoConfigService) { }
ngOnInit(): void {
@@ -52,6 +82,10 @@ export class ConfigurationDocsComponent implements OnInit {
this.toggleControl.valueChanges.subscribe(() => {
this.goConfigService.toggleHeaderBrandingEnabled();
});
+
+ this.colorControl.valueChanges.subscribe((value: ('light' | 'dark')) => {
+ this.goConfigService.overrideMenuColor(value);
+ });
}
updateColor(): void {
diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts
index 0106e741d..25059b030 100644
--- a/projects/go-tester/src/app/app.component.ts
+++ b/projects/go-tester/src/app/app.component.ts
@@ -27,12 +27,14 @@ export class AppComponent implements OnInit {
{ routeIcon: 'dashboard', routeTitle: 'Tests', description: 'Test Routes', subRoutes: [
{ route: 'test-page-1', routeTitle: 'Test 1', description: 'Test Route 1' },
{ route: 'test-page-2', routeTitle: 'Test 2' },
- { route: 'test-page-3', routeTitle: 'Test 3', description: 'Forms' }
+ { routeTitle: 'Test 3', description: 'Forms', subRoutes: [
+ { route: 'test-page-3', routeTitle: 'test 4' }
+ ]}
]},
{ routeIcon: 'explore', routeTitle: 'Second Test', route: 'test-page-4', description: 'Test Route 4' },
{
routeIcon: 'search',
- routeTitle: 'External Link (New Tab)',
+ routeTitle: 'External Link (In a New Tab)',
description: 'Test external link opening in new tab',
route: 'https://www.google.com/',
isExternalLink: true
@@ -71,6 +73,7 @@ export class AppComponent implements OnInit {
ngOnInit(): void {
this.goConfigService.setBrandColor('#8A4EDE');
+ this.goConfigService.overrideMenuColor('light');
this.toggleControl.valueChanges.subscribe(() => {
this.goConfigService.toggleHeaderBrandingEnabled();