From a75b5186f2405c934ddfe438bd577f8e8cf44ab7 Mon Sep 17 00:00:00 2001
From: Lauren Budorick <lauren@mapbox.com>
Date: Tue, 17 Apr 2018 11:02:51 -0700
Subject: [PATCH] Add documentation for property-types to style spec.

---
 docs/pages/style-spec.js          | 42 +++++++++++++++++++++++++++++++
 src/style-spec/reference/v8.json  | 26 +++++++++++++++++++
 test/unit/style-spec/spec.test.js |  5 ++--
 3 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/docs/pages/style-spec.js b/docs/pages/style-spec.js
index e667ee6b79a..482ecf1cd0d 100644
--- a/docs/pages/style-spec.js
+++ b/docs/pages/style-spec.js
@@ -207,6 +207,29 @@ const navigation = [
             }
         ]
     },
+    {
+        "title": "Property types",
+        "subnav": [
+            {
+                "title": "Data-driven"
+            },
+            {
+                "title": "Cross-faded"
+            },
+            {
+                "title": "Cross-faded data-driven"
+            },
+            {
+                "title": "Color ramp"
+            },
+            {
+                "title": "Data-constant"
+            },
+            {
+                "title": "Constant"
+            }
+        ]
+    },
     {
         "title": "Other",
         "subnav": [
@@ -368,6 +391,9 @@ class Item extends React.Component {
 
                     {this.props.transition &&
                     <em className='quiet'><span className='icon opacity inline quiet' />Transitionable. </em>}
+
+                    <em className='quiet'>
+                        Should be represented by a <a href={'#property-types-' + this.props['property-type']}>{this.props['property-type']}</a> property. </em>
                 </div>
 
                 {this.props.doc &&
@@ -1399,6 +1425,22 @@ export default class extends React.Component {
                             </div>
                         </div>
 
+                        <div className='pad2 prose'>
+                            <a id='property-types' className='anchor'/>
+                            <h2><a href='#property-types' title='link to property types'>Property types</a></h2>
+                            <div className='keyline-all fill-white'>
+                                {Object.keys(ref['property-type']).map((propType, i) => {
+                                    const propTypeDoc = ref['property-type'][propType].doc;
+                                    return (
+                                        <div className='pad2 keyline-bottom' key={i}>
+                                            <a id={'property-types-' + propType} className='anchor'/>
+                                            <h3 className='space-bottom1'><a href={'#property-types-' + propType} title={'link to ' + propType}>{propType}</a></h3>
+                                            <p>{propTypeDoc}</p>
+                                        </div>);
+                                })}
+                            </div>
+                        </div>
+
                         <div className='pad2 prose'>
                             <a id='other' className='anchor'/>
                             <h2><a href='#other' title='link to other'>Other</a></h2>
diff --git a/src/style-spec/reference/v8.json b/src/style-spec/reference/v8.json
index 442a88ea3eb..57164e58d80 100644
--- a/src/style-spec/reference/v8.json
+++ b/src/style-spec/reference/v8.json
@@ -4994,5 +4994,31 @@
       "units": "milliseconds",
       "doc": "Length of time before a transition begins."
     }
+  },
+  "property-type": {
+    "data-driven": {
+      "type": "property-type",
+      "doc": "Property is interpolable and can be represented using a property expression."
+    },
+    "cross-faded": {
+      "type": "property-type",
+      "doc": "Property is non-interpolable; rather, its values will be cross-faded to smoothly transition between integer zooms."
+    },
+    "cross-faded-data-driven": {
+      "type": "property-type",
+      "doc": "Property is non-interpolable; rather, its values will be cross-faded to smoothly transition between integer zooms. It can be represented using a property expression."
+    },
+    "color-ramp": {
+      "type": "property-type",
+      "doc": "Property should be specified using a color ramp from which the output color can be sampled based on a property calculation."
+    },
+    "data-constant": {
+      "type": "property-type",
+      "doc": "Property is interpolable but cannot be represented using a property expression."
+    },
+    "constant": {
+      "type": "property-type",
+      "doc": "Property is constant across all zoom levels and property values."
+    }
   }
 }
diff --git a/test/unit/style-spec/spec.test.js b/test/unit/style-spec/spec.test.js
index b37bba7c0f9..2607aac0f53 100644
--- a/test/unit/style-spec/spec.test.js
+++ b/test/unit/style-spec/spec.test.js
@@ -32,7 +32,8 @@ function validSchema(k, t, obj, ref, version, kind) {
         'text-justify-enum',
         'text-anchor-enum',
         'text-transform-enum',
-        'visibility-enum'
+        'visibility-enum',
+        'property-type'
     ]);
     const keys = [
         'default',
@@ -124,7 +125,7 @@ function validSchema(k, t, obj, ref, version, kind) {
             }
         } else if (obj.expression !== undefined) {
             const expression = obj.expression;
-            t.equal(true, ['data-driven', 'cross-faded-data-driven', 'cross-faded', 'color-ramp', 'data-constant'].indexOf(obj['property-type']) >= 0, `${k}.expression: property-type: ${obj['property-type']}`);
+            t.ok(ref['property-type'][obj['property-type']], `${k}.expression: property-type: ${obj['property-type']}`);
             t.equal('boolean', typeof expression.interpolated, `${k}.expression.interpolated.required (boolean)`);
             t.equal(true, Array.isArray(expression.parameters), `${k}.expression.parameters array`);
             if (obj['property-type'] !== 'color-ramp') t.equal(true, expression.parameters.every(k => k === 'zoom' || k === 'feature'));