Merge pull request #15 from Financial-Times/feature/header__LicenseDr…

…opDown__header-nav https://trello.com/c/QJreU9fK/43-i-need-to-be-able-to-easily-switch-b…
Financial-Times · Mar 23, 2017 · 3982a86 · 3982a86
2 parents 6be1419 + 253867d
commit 3982a86
Show file tree

Hide file tree

Showing 13 changed files with 105 additions and 40 deletions.
diff --git a/bower.json b/bower.json
@@ -33,6 +33,7 @@
   "resolutions": {
     "o-forms": "~3.5.0",
     "n-notification": "~5.0.0",
+    "fticons": "~1.5.2",
     "o-icons": "~4.4.2",
     "o-viewport": "~2.2.0",
     "o-overlay": "~1.12.1"

diff --git a/main.js b/main.js
@@ -34,6 +34,13 @@ const initKmtHeader = () => {
               },
               cls: "kat-feedback__btn",
               last: true
+            },
+            {
+              label: "My Account",
+              attrs: {
+                href: "https://myaccount.ft.com/"
+              },
+              last: true
             }
           ],
           enableMobile: true

diff --git a/src/components/header-extra-actions/index.js b/src/components/header-extra-actions/index.js
@@ -36,7 +36,7 @@ class HeaderExtraActions extends Component {
       <nav className="o-header__drawer-menu o-header__drawer-menu--user" role="navigation" aria-label="User navigation">
         <ul className="o-header__drawer-menu-list">
           <li className="o-header__drawer-menu-item">
-            <span className="o-header__drawer-menu-link">
+            <span className="o-header__drawer-menu-link kmt-header__drawer-menu-link">
               <HeaderLicense mobile={this.props.mobile} />
             </span>
           </li>

diff --git a/src/components/header-extra-actions/style.scss b/src/components/header-extra-actions/style.scss
@@ -0,0 +1,3 @@
+.kmt-header__drawer-menu-link {
+  padding: 0;
+}
diff --git a/src/components/header-nav/index.js b/src/components/header-nav/index.js
@@ -31,7 +31,6 @@ class HeaderNav extends Component {
 
   render() {
     const { menu } = this.props;
-
     // if there are no items
     if (menu.items === undefined) {
       return null;
@@ -40,13 +39,24 @@ class HeaderNav extends Component {
     let liCls = "o-header-services__nav-item";
     let aCls = "o-header-services__nav-link";
 
+    const lastItems = [];
+    let allItems = menu.items.filter(item => {
+      if (item.last === true) {
+        lastItems.push(item);
+        return false;
+      }
+      return true;
+    });
+
+    allItems = allItems.concat(lastItems.reverse());
+
     // if not for the mobile version
     if (this.props.mobile !== true) {
       return (
         <nav className='o-header-services__primary-nav'>
           <div className='o-header-services__container'>
             <ul className='o-header-services__nav-list kmt-text--transform-none'>
-              {menu.items.map((item, index) => this.createItem(item, index, liCls, aCls))}
+              {allItems.map((item, index) => this.createItem(item, index, liCls, aCls))}
             </ul>
           </div>
         </nav>

diff --git a/src/components/header-nav/style.scss b/src/components/header-nav/style.scss
@@ -6,4 +6,7 @@
 
 .o-header-services__nav-item--last {
   float: right;
+  .o-header-services__nav-link {
+    font-weight: 400;
+  }
 }
diff --git a/src/components/license-dropdown/index.js b/src/components/license-dropdown/index.js
@@ -57,9 +57,9 @@ class LicenseDropdown extends Component {
 
   render() {
     const { licenseData } = this.props;
-
+    let licenseDataLength = licenseData.items.length;
     // if there are no licenses
-    if (licenseData.items.length === 0) {
+    if (licenseDataLength === 0) {
       return null;
     }
 
@@ -72,21 +72,31 @@ class LicenseDropdown extends Component {
     if (this.props.mobile === true) {
       wrapperCls += ` ${wrapperCls}--mobile`;
     }
+    let kmtHeaderLicenseLabel= "";
+    let className ="";
+    licenseDataLength > 1 ? kmtHeaderLicenseLabel = "kmt-header__license-label" : kmtHeaderLicenseLabel = "kmt-header__license-label--noIcon";
 
     return (
+
       <div className={wrapperCls} ref="theWrapper">
-        <div className="kmt-header__license-label" onClick={this.toggleDropdown}>
+        <div className={kmtHeaderLicenseLabel} onClick={this.toggleDropdown}>
           <span className="kmt-header__license-used">{licenseData.selected.label}</span>
         </div>
-        <div className={dropdownCls} style={this.props.mobile !== true ? licenseData.style : {}}>
-          <select className="o-forms__select kmt-forms__select" onChange={this.licenseChanged} defaultValue={licenseData.selected.licenceId}>
-            {
-              licenseData.items.map((item, index) => {
-                return <option value={item.licenceId} key={index}>{item.label} - {this.trimLicenseId(item.licenceId)}</option>;
-              })
-            }
-          </select>
-        </div>
+      {
+        (licenseDataLength > 1) ?
+          <div className={dropdownCls} style={this.props.mobile !== true ? licenseData.style : {}}>
+            <select size={licenseDataLength <= 4 ? licenseDataLength : 4} className="o-forms__select kmt-forms__select" onChange={this.licenseChanged} >
+              {
+                licenseData.items.map((item, index) => {
+                  licenseData.selected.licenceId === item.licenceId ? className = "kmt-forms-option--selected" : className = null;
+                  return <option value={item.licenceId} key={index} className={className}>{item.label} - {this.trimLicenseId(item.licenceId)}</option>;
+                })
+              }
+            </select>
+          </div>
+          :
+          null
+      }
       </div>
     );
   }

diff --git a/src/components/license-dropdown/style.scss b/src/components/license-dropdown/style.scss
@@ -15,16 +15,40 @@
 
             .kmt-forms__select {
               max-width: 100%;
+              background: none;
+            }
+
+            option {
+              padding: 12px 16px;
+            }
+
+            select,
+            option {
+              @include oTypographySans(s);
+              background-color: oColorsGetPaletteColor("pink-tint2");
+              color: oColorsGetPaletteColor("black");
+              border: 0;
+            }
+
+            .kmt-forms-option--selected {
+              background-color: oColorsGetPaletteColor("teal-1");
+              color: oColorsGetPaletteColor("white");
             }
           }
 
           &__license {
             &-label {
               color: oColorsGetPaletteColor("claret");
+              padding: 12px 16px;
               &::after {
                 @include oIconsGetIcon('arrow-up-down', oColorsGetPaletteColor('claret'), 12);
+                margin: 12px 16px;
               }
             }
+            &-label--noIcon {
+              padding: 12px 16px;
+              color: oColorsGetPaletteColor('claret');
+            }
 
 
           }
@@ -36,6 +60,7 @@
       position: relative;
       padding-right: 15px;
       color: oColorsGetPaletteColor("white");
+      font-weight: 400;
 
       // ignoring the nesting warning as it's not actually a nested class (it's BEM)
       // scss-lint:disable NestingDepth
@@ -55,13 +80,18 @@
         }
       }
 
+    }
 
+    &-label--noIcon {
+      position: relative;
+      font-weight: 400;
+      cursor: auto;
     }
 
     &-dropdown {
       display: none;
       margin-top: 1px;
-      padding: 20px;
+      padding: 19px 0 0;
       position: absolute;
       background-color: oColorsGetPaletteColor("warm-4");
       cursor: auto;
@@ -73,10 +103,29 @@
         display: block;
       }
 
+
+
       select,
       option {
         @include oTypographySans(s);
-        font-weight: inherit;
+        font-weight: 400;
+        font-size: 13px;
+        background-color: oColorsGetPaletteColor("warm-4");
+        color: oColorsGetPaletteColor("white");
+        border: 0;
+      }
+
+      select {
+        height: auto;
+        padding: 0;
+        overflow-y: auto;
+      }
+      option {
+        padding: 11px 20px;
+
+      }
+      .kmt-forms-option--selected {
+          background-color: oColorsGetPaletteColor("black");
       }
     }
   }

diff --git a/src/containers/header/index.js b/src/containers/header/index.js
@@ -53,7 +53,7 @@ class HeaderContainer extends Component {
     return (
       <header className='o-header-services o-header-services--b2b' data-o-component='o-header'>
         <HeaderTop {...headerTopProps} />
-        <HeaderNav menu={this.props.menu} />
+        <HeaderNav menu={this.props.menu}/>
         {this.props.feedbackIsExpanded === true
           ? <Overlay {...overlayProps}>
               <FeedbackForm dispatch={this.props.dispatch} isValid={this.props.feedbackIsValid} />

diff --git a/src/reducers/extra-actions.js b/src/reducers/extra-actions.js
@@ -1,32 +1,14 @@
 import { PropTypes } from 'react';
-import { getCookieUserDetails } from './../helpers/helpers';
-
-// get the user details from the cookies
-const cookieUserDetails = getCookieUserDetails();
-
 export const extraActionsTypes ={
   items: PropTypes.array
 };
-
 const initialState = {
   items: [
-    {
-      label: "Sign out",
-      href: "https://accounts.ft.com/logout"
-    }
+
   ]
 };
 
-let userLink = {};
-if (cookieUserDetails.username) {
-  userLink = {
-    label: cookieUserDetails.username,
-    href: "https://myaccount.ft.com/"
-  };
-}
-
-// add an extra item to the links
-const defaultState = Object.assign({}, initialState, {items : [userLink, ...initialState.items]});
+const defaultState = Object.assign({}, initialState, {items : [ ...initialState.items]});
 
 const extraActions = (state = defaultState, action = {}) => {
   return state;

diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -22,6 +22,5 @@ const KmtHeaderNs = combineReducers(mainReducers);
 
 // create a namespace for this app store
 const KmtHeaderApp = combineReducers(Object.assign({}, {KmtHeaderNs}));
-
 export { KmtHeaderNs };
 export default KmtHeaderApp;
diff --git a/src/reducers/license-dropdown.js b/src/reducers/license-dropdown.js
@@ -15,7 +15,7 @@ const cookieUserDetails = getCookieUserDetails();
 const initialState = {
   items: [],
   selected: {
-    licenceId: "",
+    licenseId: "",
     label: ""
   },
   show: false,

diff --git a/style/main.scss b/style/main.scss
@@ -63,3 +63,4 @@ body {
 @import '../src/components/feedback-form/style';
 @import '../src/components/overlay/style';
 @import '../src/components/header-top/style';
+@import '../src/components/header-extra-actions/style';