List the named logos in the frontend (#1794)

Fix #1787

frontend/components/markup-modal.js

@@ -4,7 +4,7 @@ import Modal from 'react-modal';
 import ClickToSelect from '@mapbox/react-click-to-select';
 import resolveBadgeUrl from '../lib/badge-url';
 import generateAllMarkup from '../lib/generate-image-markup';
-import { advertisedStyles } from '../../lib/supported-features';
+import { advertisedStyles } from '../../supported-features.json';
 
 export default class MarkupModal extends React.Component {
   static propTypes = {

frontend/components/usage.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import StaticBadgeMaker from './static-badge-maker';
 import DynamicBadgeMaker from './dynamic-badge-maker';
 import { staticBadgeUrl } from '../lib/badge-url';
-import { advertisedStyles } from '../../lib/supported-features';
+import { advertisedStyles, logos } from '../../supported-features.json';
 
 export default class Usage extends React.PureComponent {
   static propTypes = {
@@ -66,7 +66,15 @@ export default class Usage extends React.PureComponent {
     );
   }
 
-  render () {
+  static renderNamedLogos() {
+    const renderLogo = logo => <span className="nowrap">{logo}</span>;
+    const [first, ...rest] = logos;
+    return [renderLogo(first)].concat(
+      rest.reduce((result, logo) => result.concat([', ', renderLogo(logo)]), [])
+    );
+  }
+
+  render() {
     const { baseUri } = this.props;
     return (
       <section>
@@ -142,7 +150,7 @@ export default class Usage extends React.PureComponent {
         <p>
           Here are a few other parameters you can use: (connecting several with "&" is possible)
         </p>
-        <table>
+        <table className="usage">
           <tbody>
             <tr>
               <td>
@@ -161,8 +169,7 @@ export default class Usage extends React.PureComponent {
                 <code>?logo=appveyor</code>
               </td>
               <td>
-                Insert one of the {}
-                <a href="https://github.com/badges/shields/tree/gh-pages/logo">named logos</a>
+                Insert one of the named logos ({this.constructor.renderNamedLogos()})
               </td>
             </tr>
             <tr>