From a49587a4961ea1789e3bd4c3173ce2197e0ecfa4 Mon Sep 17 00:00:00 2001
From: Eddie Liu <leddie24@gmail.com>
Date: Wed, 8 Feb 2017 12:33:50 -0800
Subject: [PATCH] Documentation updates for Get Started page and DatePicker
 (#288)

* Change Get Started page so CDN links are pulled from package json.  Fix DatePicker methods to show picker.set method from PickADate API

* Update sidebar active link to semibold
---
 gulp/modules/Config.js                             |  6 ++++++
 .../pages/Components/DatePicker/DatePicker.js      | 14 ++++++++++++--
 src/documentation/pages/GetStarted/GetStarted.hbs  |  4 +---
 src/documentation/sass/SideBar.scss                |  1 +
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/gulp/modules/Config.js b/gulp/modules/Config.js
index aaa73525..71de9e1b 100644
--- a/gulp/modules/Config.js
+++ b/gulp/modules/Config.js
@@ -188,6 +188,12 @@ var Config = function() {
           return code;
         },
 
+        cdnLinks: function(version) {
+          return `<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/${version}/css/fabric.min.css" />
+<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/${version}/css/fabric.components.min.css" />
+<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/${version}/js/fabric.min.js"></script>`;
+        },
+
         // Output code from a string
         codeBlock: function(code, language, theme) {
           var hbs = Plugins.handlebars.Handlebars;
diff --git a/src/documentation/pages/Components/DatePicker/DatePicker.js b/src/documentation/pages/Components/DatePicker/DatePicker.js
index e5e1ad5d..b4f595d7 100644
--- a/src/documentation/pages/Components/DatePicker/DatePicker.js
+++ b/src/documentation/pages/Components/DatePicker/DatePicker.js
@@ -11,14 +11,24 @@ var data = {
   ],
   methods: [
     {
-      name: "changeHighlightedDate(dateArr)",
+      name: "picker.set('select', dateArr);",
       parameters: [
         {
           name: "dateArr",
           type: "{Array} The new date in [YEAR, MONTH, DATE] format", 
         }
       ],
-      description: "Highlights a new date in the component"
+      description: "Selects a new date in the component. Must be used on component's picker property  (DatePicker.picker)."
+    },
+    {
+      name: "picker.set('highlight', dateArr);",
+      parameters: [
+        {
+          name: "dateArr",
+          type: "{Array} The new date in [YEAR, MONTH, DATE] format", 
+        }
+      ],
+      description: "Highlights a new date in the component. Must be used on component's picker property (DatePicker.picker)."
     }
   ],
   jsFile: "DatePickerExampleJS",
diff --git a/src/documentation/pages/GetStarted/GetStarted.hbs b/src/documentation/pages/GetStarted/GetStarted.hbs
index 26fa9965..5bdf7663 100644
--- a/src/documentation/pages/GetStarted/GetStarted.hbs
+++ b/src/documentation/pages/GetStarted/GetStarted.hbs
@@ -13,9 +13,7 @@
       <li>
         <p>The easiest way to get Fabric is by referencing the CDN. Include the following in the &lt;head&gt; of your page:</p>
         {{codeBlock 
-'<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css" />
-<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css" />
-<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>' 'html' 'isLightTheme'}}
+(cdnLinks packageData.version) 'html' 'isLightTheme'}}
         <p>To reference the latest version, just change the version number in the URL to your desired version. All versions of Fabric are on the CDN, and the latest version is {{packageData.version}}.</p>
       </li>
       <li>
diff --git a/src/documentation/sass/SideBar.scss b/src/documentation/sass/SideBar.scss
index ea091d2e..dcffb1ce 100644
--- a/src/documentation/sass/SideBar.scss
+++ b/src/documentation/sass/SideBar.scss
@@ -105,6 +105,7 @@ $nav-group-header-height: 40px;
     &:hover {
       > a:first-child {
         color: $ms-color-neutralPrimary;
+        font-weight: $ms-font-weight-semibold;
       }
 
       // Hide the line indicators on submenus