Fix style picker in markup modal (#1331)

- Restore correct list of styles to markup modal
- DRY lists of styles

Fix #1330

frontend/components/markup-modal.js

@@ -4,6 +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';
 
 export default class MarkupModal extends React.Component {
   static propTypes = {
@@ -44,22 +45,26 @@ export default class MarkupModal extends React.Component {
     });
   }
 
+  generateCompleteBadgeUrl() {
+    const { baseUri } = this.props;
+    const { badgeUri, style } = this.state;
+
+    return resolveBadgeUrl(
+      badgeUri,
+      baseUri || window.location.href,
+      // Default style doesn't need to be specified.
+      style === 'flat' ? undefined : { style });
+  }
+
   generateMarkup() {
     if (! this.isOpen) {
       return {};
     }
 
-    const { baseUri } = this.props;
     const { title } = this.props.example;
-    const { badgeUri, link, style } = this.state;
-
-    const withStyle = resolveBadgeUrl(
-      badgeUri,
-      baseUri || window.location.href,
-      // Default style doesn't need to be specified.
-      style === 'flat' ? undefined : { style });
-
-    return generateAllMarkup(withStyle.href, link, title);
+    const { link } = this.state;
+    const completeBadgeUrl = this.generateCompleteBadgeUrl();
+    return generateAllMarkup(completeBadgeUrl, link, title);
   }
 
   renderDocumentation() {
@@ -79,6 +84,8 @@ export default class MarkupModal extends React.Component {
   render() {
     const { markdown, reStructuredText, asciiDoc } = this.generateMarkup();
 
+    const completeBadgeUrl = this.isOpen ? this.generateCompleteBadgeUrl() : undefined;
+
     return (
       <Modal
         isOpen={this.isOpen}
@@ -86,7 +93,7 @@ export default class MarkupModal extends React.Component {
         contentLabel="Example Modal">
         <form action="">
           <p>
-            <img className="badge-img" src={this.state.badgeUri} />
+            <img className="badge-img" src={completeBadgeUrl} />
           </p>
           <p>
             <label>
@@ -112,9 +119,11 @@ export default class MarkupModal extends React.Component {
               <select
                 value={this.state.style}
                 onChange={event => { this.setState({ style: event.target.value }); }}>
-                <option value="plastic">plastic</option>
-                <option value="flat">flat</option>
-                <option value="flat-square">flat-square</option>
+                {
+                  advertisedStyles.map(style => (
+                    <option key={style} value={style}>{style}</option>
+                  ))
+                }
               </select>
             </label>
           </p>

frontend/components/usage.js

@@ -3,6 +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';
 
 export default class Usage extends React.PureComponent {
   static propTypes = {
@@ -39,17 +40,10 @@ export default class Usage extends React.PureComponent {
 
   renderStyleExamples () {
     const { baseUri, longCache } = this.props;
-    const styles = [
-      'plastic',
-      'flat',
-      'flat-square',
-      'for-the-badge',
-      'social',
-    ];
     return (
       <table className="badge-img">
         <tbody>
-          { styles.map((style, i) => {
+          { advertisedStyles.map((style, i) => {
             const badgeUri = staticBadgeUrl(
               baseUri,
               'style',