SONARCLOUD-335 Make SC about page language section clearer

7 files changed, 273 insertions, 394 deletions

diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx
index 82b49377be8..716e5d19def 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx
@@ -24,10 +24,13 @@ import LoginButtons from './components/LoginButtons';
 import Pricing from './components/Pricing';
 import SQPageContainer from './components/SQPageContainer';
 import StartUsing from './components/StartUsing';
+import { LANGUAGES } from './utils';
 import { isLoggedIn } from '../../../helpers/users';
 import { getBaseUrl } from '../../../helpers/urls';
 import './style.css';
 
+const NB_LANGUAGE_PER_ROW = 8;
+
 export default function SQHome() {
   return (
     <SQPageContainer>
@@ -143,161 +146,27 @@ function Features() {
 }
 
 function Languages() {
+  const languagesPerRow = [];
+  for (let i = 0; i < LANGUAGES.length / NB_LANGUAGE_PER_ROW; i++) {
+    languagesPerRow[i] = LANGUAGES.slice(i * NB_LANGUAGE_PER_ROW, (i + 1) * NB_LANGUAGE_PER_ROW);
+  }
+
   return (
     <div className="sc-languages">
-      <h3 className="sc-feature-title">On 21 programming languages</h3>
-      <ul className="sc-languages-list">
-        <li>
-          <img
-            alt="Java"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/java.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img
-            alt="JavaScript"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/js.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img
-            alt="TypeScript"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/ts.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img
-            alt="C#"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/c-sharp.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img
-            alt="C++"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/c-plus.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img alt="Go" height="60" src={`${getBaseUrl()}/images/languages/go.svg`} width="60" />
-        </li>
-        <li>
-          <img
-            alt="Python"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/python.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img alt="PHP" height="60" src={`${getBaseUrl()}/images/languages/php.svg`} width="60" />
-        </li>
-      </ul>
-      <ul className="sc-languages-list">
-        <li>
-          <img alt="VB" height="60" src={`${getBaseUrl()}/images/languages/vb.svg`} width="60" />
-        </li>
-        <li>
-          <img
-            alt="Kotlin"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/kotlin.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img
-            alt="Flex"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/flex.png`}
-            width="85"
-          />
-        </li>
-        <li>
-          <img alt="CSS" height="60" src={`${getBaseUrl()}/images/languages/css.svg`} width="60" />
-        </li>
-        <li>
-          <img
-            alt="HTML"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/html5.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img
-            alt="Ruby"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/ruby.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img
-            alt="Scala"
-            height="57"
-            src={`${getBaseUrl()}/images/languages/scala.svg`}
-            width="57"
-          />
-        </li>
-        <li>
-          <img
-            alt="Swift"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/swift.svg`}
-            width="60"
-          />
-        </li>
-      </ul>
-      <ul className="sc-languages-list">
-        <li>
-          <img alt="Apex" src={`${getBaseUrl()}/images/languages/apex.svg`} width="54" />
-        </li>
-        <li>
-          <img
-            alt="Objective-C"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/obj-c.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img
-            alt="T-SQL"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/tsql.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img
-            alt="PL/SQL"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/plsql.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img
-            alt="ABAP"
-            height="60"
-            src={`${getBaseUrl()}/images/languages/abap.svg`}
-            width="60"
-          />
-        </li>
-        <li>
-          <img alt="XML" height="60" src={`${getBaseUrl()}/images/languages/xml.svg`} width="60" />
-        </li>
-      </ul>
+      <h3 className="sc-feature-title">On {LANGUAGES.length} programming languages</h3>
+      {languagesPerRow.map((languagesRow, idx) => (
+        <ul className="sc-languages-list" key={idx}>
+          {languagesRow.map(language => (
+            <li key={language.name}>
+              <img
+                alt={language.name}
+                src={`${getBaseUrl()}/images/languages/${language.file}`}
+                width={language.width}
+              />
+            </li>
+          ))}
+        </ul>
+      ))}
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/Home-test.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/Home-test.tsx
index f3c573ba054..ce5282fe00e 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/Home-test.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/Home-test.tsx
@@ -22,36 +22,36 @@ import { shallow } from 'enzyme';
 import Home from '../Home';
 import { waitAndUpdate } from '../../../../helpers/testUtils';
 
-jest.mock('../utils', () => ({
-  requestHomepageData: jest.fn(() =>
-    Promise.resolve({
-      publicProjects: 236,
-      publicLoc: 12345,
-      pullRequests: 123456,
-      rules: 1234,
-      featuredProjects: [
-        {
-          key: 'sonarsource-jfrog.simple-js-php-project',
-          avatarUrl: null,
-          organizationKey: 'sonarsource-jfrog',
-          organizationName: 'SonarSource & JFrog',
-          name: 'Simple JS & PHP project',
-          bugs: 0,
-          codeSmells: 7,
-          coverage: 9.7,
-          duplications: 56.2,
-          gateStatus: 'OK',
-          languages: ['js', 'php'],
-          maintainabilityRating: 1,
-          ncloc: 123456,
-          reliabilityRating: 1,
-          securityRating: 1,
-          vulnerabilities: 654321
-        }
-      ]
-    })
-  )
-}));
+jest.mock('../utils', () => {
+  const utils = require.requireActual('../utils');
+  utils.requestHomepageData = jest.fn().mockResolvedValue({
+    publicProjects: 236,
+    publicLoc: 12345,
+    pullRequests: 123456,
+    rules: 1234,
+    featuredProjects: [
+      {
+        key: 'sonarsource-jfrog.simple-js-php-project',
+        avatarUrl: null,
+        organizationKey: 'sonarsource-jfrog',
+        organizationName: 'SonarSource & JFrog',
+        name: 'Simple JS & PHP project',
+        bugs: 0,
+        codeSmells: 7,
+        coverage: 9.7,
+        duplications: 56.2,
+        gateStatus: 'OK',
+        languages: ['js', 'php'],
+        maintainabilityRating: 1,
+        ncloc: 123456,
+        reliabilityRating: 1,
+        securityRating: 1,
+        vulnerabilities: 654321
+      }
+    ]
+  });
+  return utils;
+});
 
 it('should render', async () => {
   const wrapper = shallow(<Home />);
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/__snapshots__/Home-test.tsx.snap b/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/__snapshots__/Home-test.tsx.snap
index 185ff31316b..f505b8de7c1 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/__snapshots__/Home-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/__snapshots__/Home-test.tsx.snap
@@ -399,159 +399,124 @@ exports[`should render 6`] = `
       className="sc-section sc-columns"
     >
       <div
-        className="sc-column-min"
+        className="sc-column-full"
       >
         <h3
-          className="big-spacer-bottom"
+          className="sc-big-spacer-bottom"
         >
-          SonarCloud
-          <br />
-          speaks your
-          <br />
-          language
+          SonarCloud speaks your language
         </h3>
+        <ul
+          className="sc-languages-list"
+          style={
+            Object {
+              "height": undefined,
+            }
+          }
+        >
+          <li
+            key="Java"
+          >
+            <img
+              alt="Java"
+              src="/images/languages/java.svg"
+              width={65}
+            />
+          </li>
+          <li
+            key="JavaScript"
+          >
+            <img
+              alt="JavaScript"
+              src="/images/languages/js.svg"
+              width={60}
+            />
+          </li>
+          <li
+            key="TypeScript"
+          >
+            <img
+              alt="TypeScript"
+              src="/images/languages/ts.svg"
+              width={100}
+            />
+          </li>
+          <li
+            key="C#"
+          >
+            <img
+              alt="C#"
+              src="/images/languages/csharp.svg"
+              width={60}
+            />
+          </li>
+          <li
+            key="Python"
+          >
+            <img
+              alt="Python"
+              src="/images/languages/python.svg"
+              width={65}
+            />
+          </li>
+          <li
+            key="C++"
+          >
+            <img
+              alt="C++"
+              src="/images/languages/c-c-plus-plus.svg"
+              width={53}
+            />
+          </li>
+          <li
+            key="Go"
+          >
+            <img
+              alt="Go"
+              src="/images/languages/go.svg"
+              width={91}
+            />
+          </li>
+          <li
+            key="Kotlin"
+          >
+            <img
+              alt="Kotlin"
+              src="/images/languages/kotlin.svg"
+              width={42}
+            />
+          </li>
+          <li
+            key="Ruby"
+          >
+            <img
+              alt="Ruby"
+              src="/images/languages/ruby.svg"
+              width={43}
+            />
+          </li>
+          <li
+            key="ABAP"
+          >
+            <img
+              alt="ABAP"
+              src="/images/languages/abap.svg"
+              width={62}
+            />
+          </li>
+        </ul>
         <a
+          className="bt bt-large bt-nav bt-orange2"
           href="#"
           onClick={[Function]}
         >
-          See all supported languages
+          See All Languages
+          <ChevronDownIcon
+            className="little-spacer-left"
+            size={20}
+          />
         </a>
       </div>
-      <ul
-        className="sc-languages-list"
-        style={
-          Object {
-            "height": undefined,
-          }
-        }
-      >
-        <li
-          key="Java"
-        >
-          <img
-            alt="Java"
-            src="/images/languages/java.svg"
-            style={
-              Object {
-                "width": "65px",
-              }
-            }
-          />
-        </li>
-        <li
-          key="JavaScript"
-        >
-          <img
-            alt="JavaScript"
-            src="/images/languages/js.svg"
-            style={
-              Object {
-                "width": "60px",
-              }
-            }
-          />
-        </li>
-        <li
-          key="TypeScript"
-        >
-          <img
-            alt="TypeScript"
-            src="/images/languages/ts.svg"
-            style={
-              Object {
-                "width": "100px",
-              }
-            }
-          />
-        </li>
-        <li
-          key="C#"
-        >
-          <img
-            alt="C#"
-            src="/images/languages/csharp.svg"
-            style={
-              Object {
-                "width": "60px",
-              }
-            }
-          />
-        </li>
-        <li
-          key="Python"
-        >
-          <img
-            alt="Python"
-            src="/images/languages/python.svg"
-            style={
-              Object {
-                "width": "65px",
-              }
-            }
-          />
-        </li>
-        <li
-          key="C++"
-        >
-          <img
-            alt="C++"
-            src="/images/languages/c-c-plus-plus.svg"
-            style={
-              Object {
-                "width": "53px",
-              }
-            }
-          />
-        </li>
-        <li
-          key="Go"
-        >
-          <img
-            alt="Go"
-            src="/images/languages/go.svg"
-            style={
-              Object {
-                "width": "91px",
-              }
-            }
-          />
-        </li>
-        <li
-          key="Kotlin"
-        >
-          <img
-            alt="Kotlin"
-            src="/images/languages/kotlin.svg"
-            style={
-              Object {
-                "width": "42px",
-              }
-            }
-          />
-        </li>
-        <li
-          key="Ruby"
-        >
-          <img
-            alt="Ruby"
-            src="/images/languages/ruby.svg"
-            style={
-              Object {
-                "width": "43px",
-              }
-            }
-          />
-        </li>
-        <li>
-          <a
-            className="show-more"
-            href="#"
-            onClick={[Function]}
-          >
-            …
-          </a>
-        </li>
-      </ul>
     </div>
   </div>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Languages.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Languages.tsx
index 625e058e7b4..b49be18b376 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Languages.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Languages.tsx
@@ -18,38 +18,15 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { LANGUAGES } from '../utils';
 import { getBaseUrl } from '../../../../helpers/urls';
+import ChevronDownIcon from '../../../../components/icons-components/ChevronDownIcon';
 
 interface State {
   height?: number;
   open: boolean;
 }
 
-const LANGUAGES = [
-  { name: 'Java', file: 'java.svg', width: 65 },
-  { name: 'JavaScript', file: 'js.svg', width: 60 },
-  { name: 'TypeScript', file: 'ts.svg', width: 100 },
-  { name: 'C#', file: 'csharp.svg', width: 60 },
-  { name: 'Python', file: 'python.svg', width: 65 },
-  { name: 'C++', file: 'c-c-plus-plus.svg', width: 53 },
-  { name: 'Go', file: 'go.svg', width: 91 },
-  { name: 'Kotlin', file: 'kotlin.svg', width: 42 },
-  { name: 'Ruby', file: 'ruby.svg', width: 43 },
-  { name: 'ABAP', file: 'abap.svg', width: 62 },
-  { name: 'Apex', file: 'apex.svg', width: 62 },
-  { name: 'Flex', file: 'flex.png', width: 85 },
-  { name: 'CSS', file: 'css.svg', width: 40 },
-  { name: 'HTML', file: 'html5.svg', width: 40 },
-  { name: 'Objective-C', file: 'obj-c.svg', width: 63 },
-  { name: 'PHP', file: 'php.svg', width: 57 },
-  { name: 'Scala', file: 'scala.svg', width: 29 },
-  { name: 'Swift', file: 'swift.svg', width: 64 },
-  { name: 'T-SQL', file: 't-sql.svg', width: 53 },
-  { name: 'PL/SQL', file: 'pl-sql.svg', width: 65 },
-  { name: 'VB', file: 'vb.svg', width: 55 },
-  { name: 'XML', file: 'xml.svg', width: 67 }
-];
-
 export class Languages extends React.PureComponent<{}, State> {
   container?: HTMLElement | null;
   state: State = { open: false };
@@ -68,47 +45,38 @@ export class Languages extends React.PureComponent<{}, State> {
 
   render() {
     const { open } = this.state;
-    const languages = open ? LANGUAGES : LANGUAGES.slice(0, 9);
+    const languages = open ? LANGUAGES : LANGUAGES.slice(0, 10);
 
     return (
       <div className="position-relative">
         <div className="sc-languages-container clearfix">
           <div className="sc-section sc-columns">
-            <div className="sc-column-min">
-              <h3 className="big-spacer-bottom">
-                SonarCloud
-                <br />
-                speaks your
-                <br />
-                language
-              </h3>
+            <div className="sc-column-full">
+              <h3 className="sc-big-spacer-bottom">SonarCloud speaks your language</h3>
+              <ul
+                className="sc-languages-list"
+                ref={node => (this.container = node)}
+                style={{ height: this.state.height }}>
+                {languages.map(language => (
+                  <li key={language.name}>
+                    <img
+                      alt={language.name}
+                      src={`${getBaseUrl()}/images/languages/${language.file}`}
+                      width={language.width}
+                    />
+                  </li>
+                ))}
+              </ul>
               {!open && (
-                <a href="#" onClick={this.handleOpenClick}>
-                  See all supported languages
+                <a
+                  className="bt bt-large bt-nav bt-orange2"
+                  href="#"
+                  onClick={this.handleOpenClick}>
+                  See All Languages
+                  <ChevronDownIcon className="little-spacer-left" size={20} />
                 </a>
               )}
             </div>
-            <ul
-              className="sc-languages-list"
-              ref={node => (this.container = node)}
-              style={{ height: this.state.height }}>
-              {languages.map(language => (
-                <li key={language.name}>
-                  <img
-                    alt={language.name}
-                    src={`${getBaseUrl()}/images/languages/${language.file}`}
-                    style={{ width: language.width + 'px' }}
-                  />
-                </li>
-              ))}
-              {!open && (
-                <li>
-                  <a className="show-more" href="#" onClick={this.handleOpenClick}>
-                    …
-                  </a>
-                </li>
-              )}
-            </ul>
           </div>
         </div>
       </div>
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css b/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css
index 3e45bc879c2..2d318c2ebde 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css
@@ -129,11 +129,6 @@
   width: 50%;
 }
 
-.sc-column-min {
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
 .sc-column-full {
   flex-grow: 1;
   text-align: center;
@@ -274,23 +269,23 @@
 }
 
 .sc-languages-container .sc-section {
-  margin-bottom: 30px;
+  margin-bottom: 60px;
 }
 
 .sc-languages-list {
   display: flex;
   flex-wrap: wrap;
-  margin-left: 120px;
+  width: 800px;
+  margin: auto;
   transition: height 0.3s ease;
-  margin-bottom: 10px;
 }
 
 .sc-languages-list > li {
   display: inline-block;
   text-align: center;
-  margin: 0 0 45px 0;
+  margin-bottom: 45px;
   line-height: 60px;
-  width: 140px;
+  width: 160px;
 }
 
 .sc-languages-list > li img {
@@ -449,3 +444,58 @@ table.loc-price td {
 table.loc-price tr td:first-child {
   font-weight: 700;
 }
+
+.sc-page .bt {
+  display: inline-block;
+  border-radius: 3px;
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s ease;
+  margin-right: 4px;
+}
+
+.sc-page .bt-nav {
+  color: var(--sonarcloudBlack500);
+  border: none;
+  background: transparent;
+  padding: 5px 8px;
+}
+
+.sc-page .bt-nav:hover {
+  color: var(--sonarcloudBlack600);
+}
+
+.sc-page .bt-large {
+  height: 48px;
+  padding: 0 16px;
+  font-size: 18px;
+}
+
+.sc-page .bt-nav.bt-large {
+  height: 24px;
+}
+
+.sc-page .bt-orange2 {
+  border: 1px solid var(--sonarcloudOrange500);
+  background-color: transparent;
+  color: var(--sonarcloudOrange500);
+}
+
+.sc-page .bt-orange2:hover,
+.sc-page .bt-orange2:focus {
+  border: 1px solid var(--sonarcloudOrange600);
+  background-color: var(--sonarcloudOrange600);
+}
+
+.sc-page .bt-nav.bt-orange2 {
+  border: none;
+  color: var(--sonarcloudOrange500);
+}
+
+.sc-page .bt-nav.bt-orange2:hover,
+.sc-page .bt-nav.bt-orange2:focus {
+  border: none;
+  background-color: transparent;
+  color: var(--sonarcloudOrange600);
+}
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/style.css b/server/sonar-web/src/main/js/apps/about/sonarcloud/style.css
index e3bacbcd081..4477252e4e0 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/style.css
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/style.css
@@ -317,7 +317,9 @@
 }
 
 .sc-languages-list > li {
-  margin: 11px 26px;
+  text-align: center;
+  margin: 5px 8px;
+  width: 100px;
 }
 
 .sc-integrations {
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/utils.ts b/server/sonar-web/src/main/js/apps/about/sonarcloud/utils.ts
index 10c48cbaa50..19e9ee19ccd 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/utils.ts
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/utils.ts
@@ -48,3 +48,28 @@ export interface HomepageData {
 export function requestHomepageData(): Promise<HomepageData> {
   return fetch('/json/homepage.json').then(response => response.json());
 }
+
+export const LANGUAGES = [
+  { name: 'Java', file: 'java.svg', width: 65 },
+  { name: 'JavaScript', file: 'js.svg', width: 60 },
+  { name: 'TypeScript', file: 'ts.svg', width: 100 },
+  { name: 'C#', file: 'csharp.svg', width: 60 },
+  { name: 'Python', file: 'python.svg', width: 65 },
+  { name: 'C++', file: 'c-c-plus-plus.svg', width: 53 },
+  { name: 'Go', file: 'go.svg', width: 91 },
+  { name: 'Kotlin', file: 'kotlin.svg', width: 42 },
+  { name: 'Ruby', file: 'ruby.svg', width: 43 },
+  { name: 'ABAP', file: 'abap.svg', width: 62 },
+  { name: 'Apex', file: 'apex.svg', width: 62 },
+  { name: 'Flex', file: 'flex.png', width: 85 },
+  { name: 'CSS', file: 'css.svg', width: 40 },
+  { name: 'HTML', file: 'html5.svg', width: 40 },
+  { name: 'Objective-C', file: 'obj-c.svg', width: 63 },
+  { name: 'PHP', file: 'php.svg', width: 57 },
+  { name: 'Scala', file: 'scala.svg', width: 29 },
+  { name: 'Swift', file: 'swift.svg', width: 64 },
+  { name: 'T-SQL', file: 't-sql.svg', width: 53 },
+  { name: 'PL/SQL', file: 'pl-sql.svg', width: 65 },
+  { name: 'VB', file: 'vb.svg', width: 55 },
+  { name: 'XML', file: 'xml.svg', width: 67 }
+];