[UI] Add expandable sections (loic-sharma#377)

Author: loic-sharma

src/BaGet.UI/package-lock.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "bootstrap": "3.3.7",
     "copy-text-to-clipboard": "^2.1.1",
-    "office-ui-fabric-react": "^6.163.0",
+    "office-ui-fabric-react": "^6.208.1",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-markdown": "^4.2.2",

src/BaGet.UI/package.json

@@ -59,3 +59,18 @@
 .search-container .form-control {
   border-radius: 0;
 }
+
+.link-button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  text-decoration: underline;
+  display: inline;
+  margin: 0;
+  padding: 0;
+}
+
+.link-button:hover,
+.link-button:focus {
+  text-decoration: none;
+}

src/BaGet.UI/src/App.css

@@ -73,30 +73,22 @@ class Dependencies extends React.Component<IDependenciesProps> {
   public render() {
     if (this.props.dependencyGroups.length === 0) {
       return (
-        <div>
-          <h3>Dependencies</h3>
-
-          <div>This package has no dependencies.</div>
-        </div>
+        <div>This package has no dependencies.</div>
       );
     }
 
     return (
-        <div>
-          <h3>Dependencies</h3>
-
-          <div className="dependency-groups">
-            {this.props.dependencyGroups.map(group => (
-              <div key={group.targetFramework}>
-                <h4>
-                  <span>{group.targetFramework}</span>
-                </h4>
-
-                <PackageDependencies dependencies={group.dependencies} />
-              </div>
-            ))}
+      <div className="dependency-groups">
+        {this.props.dependencyGroups.map(group => (
+          <div key={group.targetFramework}>
+            <h4>
+              <span>{group.targetFramework}</span>
+            </h4>
+
+            <PackageDependencies dependencies={group.dependencies} />
           </div>
-        </div>
+        ))}
+      </div>
     );
   }
 }

src/BaGet.UI/src/DisplayPackage/Dependencies.tsx

@@ -43,28 +43,18 @@ class Dependents extends React.Component<IDependentsProps, IDependentsState> {
   public render() {
     if (!this.state.data) {
       return (
-        <div>
-          <h3>Dependents</h3>
-
-          <div>...</div>
-        </div>
+        <div>...</div>
       );
     }
 
     if (this.state.totalHits === 0) {
       return (
-        <div>
-          <h3>Dependents</h3>
-
-          <div>No packages depend on {this.props.packageId}.</div>
-        </div>
+        <div>No packages depend on {this.props.packageId}.</div>
       );
     }
 
     return (
         <div>
-          <h3>Dependents</h3>
-
           <p>{this.state.totalHits} {this.state.totalHits === 1 ? 'package depends' : 'packages depend' } on {this.props.packageId}:</p>
           <div>
             <ul>

src/BaGet.UI/src/DisplayPackage/Dependents.tsx

@@ -23,3 +23,14 @@
 .package-details-info .ms-Icon-ul li {
   margin-bottom: 15px;
 }
+
+.display-package .expandable-section h2 button {
+  text-decoration: none;
+}
+
+.display-package .expandable-section h2 .ms-Icon {
+  font-size: 0.6em;
+  position: relative;
+  top: -2px;
+  margin-right: 5px;
+}