Website: Update dev.office.com header

apps/fabric-website/src/components/DONavigation/DONavigation.scss

@@ -29,6 +29,12 @@ $od-Navigation-columnPadding: 30px;
     background-color: $ms-color-black;
     vertical-align: top;
 
+    .ms-Icon {
+      height: auto;
+      position: relative;
+      top: -4px;
+    }
+
     &.is-open {
       .od-Navigation-link {
         background-color: $ms-color-neutralPrimaryAlt;
@@ -67,7 +73,7 @@ $od-Navigation-columnPadding: 30px;
 
     @media (min-width: $od-Header-bannerWidth) {
       position: fixed;
-      top: 50px;
+      top: $od-Header-height;
       left: 0;
       height: 404px;
     }

apps/fabric-website/src/components/DONavigation/DONavigation.tsx

@@ -94,7 +94,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
               <div className='od-Navigation-subMenuItems'>
                 <div className='ms-Grid'>
                   <div className='ms-Grid-row'>
-                    <div className='ms-Grid-col ms-u-xl3 ms-sm12 od-Navigation-menuFirstColumn'>
+                    <div className='ms-Grid-col ms-xl3 ms-sm12 od-Navigation-menuFirstColumn'>
                       { this._getLinks(links.exploreLinks.firstMenuColumn) }
                     </div>
                     <div className='ms-Grid-col ms-xl3 ms-sm12  od-Navigation-menuSecondColumn'>

apps/fabric-website/src/data/DONavigationLinkData.json

@@ -1,107 +1,119 @@
 {
   "exploreLinks": {
-    "firstMenuColumn":  [
+    "firstMenuColumn": [
       {
         "label": "Why Office?",
-        "href": "http://dev.office.com/opportunity"
+        "href": "https://dev.office.com/opportunity"
       },
       {
         "label": "Office UI Fabric",
-        "href": "http://dev.office.com/fabric"
+        "href": "https://dev.office.com/fabric"
       },
       {
         "label": "Microsoft Graph",
-        "href": "http://graph.microsoft.io/"
+        "href": "https://developer.microsoft.com/graph"
       },
       {
         "label": "Better with Office",
-        "href": "http://betterwith.office.com/"
+        "href": "https://betterwith.office.com/"
+      },
+      {
+        "label": "Go To Market",
+        "href": "https://dev.office.com/go-to-market"
+      },
+      {
+        "label": "Industry Verticals",
+        "href": "https://dev.office.com/industry-verticals"
+      },
+      {
+        "label": "Business Platform",
+        "href": "https://businessplatform.microsoft.com/"
       }
     ],
     "secondMenuColumn": [
       {
         "label": "Word",
-        "href": "http://dev.office.com/word",
+        "href": "https://dev.office.com/word",
         "icon": {
           "iconClass": "word",
           "bgColor": "blue"
         }
       },
       {
         "label": "Excel",
-        "href": "http://dev.office.com/excel",
+        "href": "https://dev.office.com/excel",
         "icon": {
           "iconClass": "excel",
           "bgColor": "green"
         }
       },
       {
         "label": "PowerPoint",
-        "href": "http://dev.office.com/powerpoint",
+        "href": "https://dev.office.com/powerpoint",
         "icon": {
           "iconClass": "powerpoint",
           "bgColor": "orangeLight"
         }
       },
       {
         "label": "Outlook",
-        "href": "http://dev.outlook.com/",
+        "href": "https://dev.outlook.com/",
         "icon": {
           "iconClass": "outlook",
           "bgColor": "blue"
         }
       },
       {
         "label": "OneDrive",
-        "href": "http://dev.onedrive.com/",
+        "href": "https://dev.onedrive.com/",
         "icon": {
           "iconClass": "onedrive",
           "bgColor": "blue"
         }
       },
       {
         "label": "OneNote",
-        "href": "http://dev.onenote.com/",
+        "href": "https://dev.onenote.com/",
         "icon": {
           "iconClass": "onenote",
           "bgColor": "magenta"
         }
       },
       {
         "label": "SharePoint",
-        "href": "https://msdn.microsoft.com/en-us/library/office/dn833469.aspx",
+        "href": "https://dev.office.com/sharepoint",
         "icon": {
           "iconClass": "sharepoint",
           "bgColor": "blueLight"
         }
       },
       {
         "label": "Skype",
-        "href": "http://dev.office.com/skype",
+        "href": "https://dev.office.com/skype",
         "icon": {
           "iconClass": "skype",
           "bgColor": "blueLight"
         }
       },
       {
         "label": "Access",
-        "href": "https://msdn.microsoft.com/en-us/library/office/dn605890.aspx",
+        "href": "https://msdn.microsoft.com/en-us/library/office/fp179695.aspx",
         "icon": {
           "iconClass": "access",
           "bgColor": "redDark"
         }
       },
       {
         "label": "Project",
-        "href": "https://msdn.microsoft.com/en-us/library/office/ms512767.aspx",
+        "href": "https://dev.office.com/project",
         "icon": {
           "iconClass": "project",
           "bgColor": "teal"
         }
       },
       {
         "label": "Yammer",
-        "href": "http://dev.yammer.com/",
+        "href": "https://dev.yammer.com/",
         "icon": {
           "iconClass": "yammer",
           "bgColor": "blue"
@@ -112,64 +124,64 @@
         "href": "https://dev.office.com/microsoft-teams",
         "icon": {
           "iconClass": "microsoftTeams",
-          "bgColor": ""
+          "bgColor": "blue"
         }
       }
     ],
     "thirdMenuColumn": [
       {
         "label": "Android",
-        "href": "http://dev.office.com/android",
+        "href": "https://dev.office.com/android",
         "icon": {
           "iconClass": "android"
         }
       },
       {
         "label": "ASP .NET",
-        "href": "http://dev.office.com/asp-dot-net",
+        "href": "https://dev.office.com/asp-dot-net",
         "icon": {
           "iconClass": "aspnet"
         }
       },
       {
         "label": "iOS",
-        "href": "http://dev.office.com/ios",
+        "href": "https://dev.office.com/ios",
         "icon": {
           "iconClass": "ios",
           "bgColor": ""
         }
       },
       {
         "label": "JavaScript",
-        "href": "http://dev.office.com/js",
+        "href": "https://dev.office.com/js",
         "icon": {
           "iconClass": "javascript"
         }
       },
       {
         "label": "Node.js",
-        "href": "http://dev.office.com/node",
+        "href": "https://dev.office.com/node",
         "icon": {
           "iconClass": "node"
         }
       },
       {
         "label": "PHP (coming soon)",
-        "href": "https://graph.microsoft.io/getting-started",
+        "href": "https://developer.microsoft.com/graph/quick-start",
         "icon": {
           "iconClass": "php"
         }
       },
       {
         "label": "Python (coming soon)",
-        "href": "https://graph.microsoft.io/getting-started",
+        "href": "https://developer.microsoft.com/graph/quick-start",
         "icon": {
           "iconClass": "python"
         }
       },
       {
         "label": "Ruby (coming soon)",
-        "href": "https://graph.microsoft.io/getting-started",
+        "href": "https://developer.microsoft.com/graph/quick-start",
         "icon": {
           "iconClass": "ruby"
         }

apps/fabric-website/src/root.tsx

@@ -134,4 +134,4 @@ function addCSSToHeader(fileName) {
   linkEl.href = fileName
   headEl.appendChild(linkEl)
 }
-addCSSToHeader('https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/5.1.0/css/fabric.min.css')
+addCSSToHeader('https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/7.1.0/css/fabric.min.css')

common/changes/@uifabric/fabric-website/miwhea-website-update-header_2017-06-09-19-15.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website",
+      "comment": "Fix issues with dev.office.com header",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website",
+  "email": "[email protected]"
+}