Modify branded-navbar and button to check for color-contrast

CenterForOpenScience · Aug 1, 2023 · 2f9330c · 2f9330c
1 parent e4c1f45
commit 2f9330c
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 4 deletions.
diff --git a/lib/app-components/addon/components/branded-navbar/component.ts b/lib/app-components/addon/components/branded-navbar/component.ts
@@ -11,6 +11,7 @@ import { tracked } from 'tracked-built-ins';
 
 import { serviceLinks } from 'ember-osf-web/const/service-links';
 import { layout, requiredAction } from 'ember-osf-web/decorators/component';
+import BrandModel from 'ember-osf-web/models/brand';
 import PreprintProviderModel from 'ember-osf-web/models/preprint-provider';
 import ProviderModel from 'ember-osf-web/models/provider';
 import Analytics from 'ember-osf-web/services/analytics';
@@ -53,6 +54,7 @@ export default class BrandedNavbar extends Component {
 
     @alias('theme.provider') provider!: ProviderModel;
     @alias('theme.provider.id') providerId!: string;
+    @alias('theme.provider.brand.primaryColor') brandPrimaryColor!: BrandModel;
 
     @computed('intl.locale', 'theme.{providerType,provider.providerTitle}', 'translateKey')
     get brandTitle(): string {
@@ -68,7 +70,7 @@ export default class BrandedNavbar extends Component {
 
     @action
     toggleSecondaryNavigation() {
-        this.toggleProperty('showNavLinks');
+        this.showNavLinks = !this.showNavLinks;
     }
 
     get isMobileOrTablet() {

diff --git a/lib/app-components/addon/components/branded-navbar/styles.scss b/lib/app-components/addon/components/branded-navbar/styles.scss
@@ -2,7 +2,6 @@
 
 .branded-nav-wrapper {
     .branded-nav {
-        background-color: var(--primary-color);
         z-index: 999;
     }
 
@@ -93,3 +92,25 @@
 
     }
 }
+
+// preprint-branded navbar uses brand relationship and not custom CSS
+// !importants needed to override the default styles set in app/styles/_components.scss
+// branded-navbar dark/light text only used for preprint providers, as collection providers currently use custom CSS
+.preprint-branded-navbar {
+    background-color: var(--primary-color) !important;
+    background-image: none !important;
+
+    &.light-text {
+        a,
+        :global(.secondary-nav-dropdown) {
+            color: $color-text-white !important;
+        }
+    }
+
+    &.dark-text {
+        a,
+        :global(.secondary-nav-dropdown) {
+            color: $color-text-black !important;
+        }
+    }
+}
diff --git a/lib/app-components/addon/components/branded-navbar/template.hbs b/lib/app-components/addon/components/branded-navbar/template.hbs
@@ -1,6 +1,8 @@
 <div local-class='branded-nav-wrapper'>
     <nav
-        local-class='branded-nav'
+        local-class='branded-nav
+        {{if (eq this.theme.providerType 'preprint') 'preprint-branded-navbar'}}
+        {{if (sufficient-contrast this.brandPrimaryColor '#fff') 'light-text' 'dark-text'}}'
         class='navbar navbar-inverse navbar-fixed-top'
         id='navbarScope'
     >

diff --git a/lib/osf-components/addon/components/button/component.ts b/lib/osf-components/addon/components/button/component.ts
@@ -1,4 +1,8 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+import Theme from 'ember-osf-web/services/theme';
+import PreprintProviderModel from 'ember-osf-web/models/preprint-provider';
 
 const layoutClasses = {
     small: 'SmallButton',
@@ -23,6 +27,8 @@ interface Args {
 }
 
 export default class Button extends Component<Args> {
+    @service theme!: Theme;
+
     get classList(): string {
         const classes = [];
         const { layout, type } = this.args;
@@ -41,4 +47,13 @@ export default class Button extends Component<Args> {
 
         return classes.join(' ');
     }
+
+    get primaryColor(): string {
+        if (!this.theme.provider) {
+            return '#337ab7'; // $color-osf-primary;
+        }
+        // Only preprint-providers will have brands that need to be checked for color contrast
+        const brand = (this.theme.provider as PreprintProviderModel).brand;
+        return brand ? brand.get('primaryColor') : '#337ab7';
+    }
 }
diff --git a/lib/osf-components/addon/components/button/styles.scss b/lib/osf-components/addon/components/button/styles.scss
@@ -47,6 +47,12 @@
     }
 }
 
+// This should only be used in preprint branding as we move away from using custom CSS
+// Please don't rely on this class for new brands
+.DarkText {
+    color: $color-text-black;
+}
+
 .SecondaryButton {
     background-color: $color-bg-white;
     border: 1px solid $color-border-gray-light;

diff --git a/lib/osf-components/addon/components/button/template.hbs b/lib/osf-components/addon/components/button/template.hbs
@@ -1,3 +1,6 @@
-<button type='button' local-class='Button {{this.classList}}' ...attributes>
+<button type='button' local-class='Button {{this.classList}}
+    {{if (sufficient-contrast this.primaryColor '#ffffff') '' 'DarkText'}}'
+    ...attributes
+>
     {{yield}}
 </button>