menu language: disabled link styles

src/components.d.ts

@@ -572,6 +572,7 @@ export namespace Components {
   interface HyMenuLanguageItem {
     abbr: string;
     isActive: boolean;
+    isDisabled: boolean;
     isMobile: boolean;
     label: string;
     langCode: string;
@@ -1866,6 +1867,7 @@ declare namespace LocalJSX {
   interface HyMenuLanguageItem {
     abbr?: string;
     isActive?: boolean;
+    isDisabled?: boolean;
     isMobile?: boolean;
     label?: string;
     langCode?: string;

src/components/navigation/menu-language-item/menu-language-item.scss

@@ -18,7 +18,6 @@ a {
     @include font-size(14px, 20px);
     @include font-weight($semibold);
     color: var(--brand-main-light);
-    font-weight: 700;
     letter-spacing: -0.5px;
     padding: 8px 12px;
     text-transform: none;
@@ -28,6 +27,7 @@ a {
       color: var(--brand-main);
     }
   }
+
   @include breakpoint($xlarge) {
     @include font-size(16px, 20px);
     letter-spacing: -0.53px;
@@ -46,14 +46,25 @@ a {
 
     .hy-menu-language-item__label {
       color: var(--grayscale-black);
-      font-weight: 700;
       border-bottom: 2px solid var(--additional-orange);
+
       @include breakpoint($wide) {
         border: none;
       }
     }
   }
 
+  &.is-disabled {
+    @include breakpoint($wide) {
+      color: var(--link-disabled);
+
+      &:hover {
+        background-color: transparent;
+        color: var(--link-disabled);
+      }
+    }
+  }
+
   &:not(.is-mobile) {
     margin: 0;
   }

src/components/navigation/menu-language-item/menu-language-item.tsx

@@ -8,6 +8,7 @@ import {Component, h, Prop, Host} from '@stencil/core';
 export class SiteLanguage {
   @Prop() abbr: string;
   @Prop() isActive: boolean = false;
+  @Prop() isDisabled: boolean = false;
   @Prop() isMobile: boolean = false;
   @Prop() label: string;
   @Prop() langCode: string;
@@ -18,6 +19,7 @@ export class SiteLanguage {
       <Host
         class={{
           'is-active': this.isActive,
+          'is-disabled': this.isDisabled,
           'hy-menu-language-item': true,
         }}
       >
@@ -25,6 +27,7 @@ export class SiteLanguage {
           href={this.url}
           class={{
             'is-active': this.isActive,
+            'is-disabled': this.isDisabled,
             'is-mobile': this.isMobile,
           }}
         >

src/components/navigation/menu-language-item/readme.md

@@ -4,14 +4,15 @@
 
 ## Properties
 
-| Property   | Attribute   | Description | Type      | Default     |
-| ---------- | ----------- | ----------- | --------- | ----------- |
-| `abbr`     | `abbr`      |             | `string`  | `undefined` |
-| `isActive` | `is-active` |             | `boolean` | `false`     |
-| `isMobile` | `is-mobile` |             | `boolean` | `false`     |
-| `label`    | `label`     |             | `string`  | `undefined` |
-| `langCode` | `lang-code` |             | `string`  | `undefined` |
-| `url`      | `url`       |             | `string`  | `undefined` |
+| Property     | Attribute     | Description | Type      | Default     |
+| ------------ | ------------- | ----------- | --------- | ----------- |
+| `abbr`       | `abbr`        |             | `string`  | `undefined` |
+| `isActive`   | `is-active`   |             | `boolean` | `false`     |
+| `isDisabled` | `is-disabled` |             | `boolean` | `false`     |
+| `isMobile`   | `is-mobile`   |             | `boolean` | `false`     |
+| `label`      | `label`       |             | `string`  | `undefined` |
+| `langCode`   | `lang-code`   |             | `string`  | `undefined` |
+| `url`        | `url`         |             | `string`  | `undefined` |
 
 ## Dependencies
 

src/components/navigation/menu-language/menu-language.tsx

@@ -6,6 +6,7 @@ export interface MenuLanguage {
   abbr: string;
   label: string;
   isActive?: boolean;
+  isDisabled?: boolean;
 }
 
 import {Component, h, Prop, Host, Watch, Element, Listen, State, Event, EventEmitter} from '@stencil/core';
@@ -101,6 +102,7 @@ export class MenuLanguage {
               label={item.label}
               abbr={item.abbr}
               is-active={item.isActive}
+              is-disabled={item.isDisabled}
               is-mobile={this.isMobile}
             />
           );
@@ -144,6 +146,7 @@ export class MenuLanguage {
                 label={item.label}
                 abbr={item.abbr}
                 is-active={item.isActive}
+                is-disabled={item.isDisabled}
                 is-mobile={this.isMobile}
               />
             );

src/global/_colors.scss

@@ -5,6 +5,7 @@
   --brand-main-dark: #003146;
   --brand-main-nearly-black: #000222;
   --link-blue: #0479a5;
+  --link-disabled: #767676;
   --grayscale-white: #fff;
   --grayscale-light: #f8f8f8;
   --grayscale-medium: #d2d2d2;