Merge branch 'master' into feature/validation_tooltips

.travis.yml

@@ -1,12 +1,16 @@
 language: node_js
 node_js:
 - '6.9'
+cache:
+  directories:
+    - node_modules
 services:
   - docker
 branches:
   only:
   - master
   - /^v\d+\.\d+(\.\d+)?(-\S*)?$/
+install: "npm i && npm update"
 before_deploy:
   - npm run build
 env:

docs/version-detection.md

@@ -20,8 +20,8 @@ Some distinct identifiers to Swagger-UI 3.X:
 
 If you've determined this is the version you have, to find the exact version:
 - Open your browser's web console (changes between browsers)
-- Type `versions` in the console and execute the call.
+- Type `JSON.stringify(versions)` in the console and execute the call.
-- You might need to expand the result, until you get a string similar to `swaggerUi : Object { version: "3.1.6", gitRevision: "g786cd47", gitDirty: true, … }`.
+- The result should look similar to `swaggerUi : Object { version: "3.1.6", gitRevision: "g786cd47", gitDirty: true, … }`.
 - The version taken from that example would be `3.1.6`.
 
 Note: This functionality was added in 3.0.8. If you're unable to execute it, you're likely to use an older version, and in that case the first step would be to upgrade.

package.json

@@ -56,12 +56,12 @@
     "memoizee": "0.4.1",
     "promise-worker": "^1.1.1",
     "prop-types": "^15.5.10",
-    "react": "^15.4.0",
+    "react": "^15.6.2",
     "react-addons-perf": "^15.4.0",
     "react-addons-shallow-compare": "0.14.8",
-    "react-addons-test-utils": "^15.4.0",
+    "react-addons-test-utils": "^15.6.2",
     "react-collapse": "2.3.1",
-    "react-dom": "^15.4.0",
+    "react-dom": "^15.6.2",
     "react-height": "^2.0.0",
     "react-hot-loader": "1.3.1",
     "react-immutable-proptypes": "2.1.0",
@@ -84,6 +84,7 @@
     "whatwg-fetch": "0.11.1",
     "worker-loader": "^0.7.1",
     "xml": "1.0.1",
+    "xml-but-prettier": "^1.0.1",
     "yaml-js": "0.2.0"
   },
   "devDependencies": {

src/core/components/array-model.jsx

@@ -24,6 +24,7 @@ export default class ArrayModel extends Component {
     const Markdown = getComponent("Markdown")
     const ModelCollapse = getComponent("ModelCollapse")
     const Model = getComponent("Model")
+    const Property = getComponent("Property")
 
     const titleEl = title &&
       <span className="model-title">
@@ -39,9 +40,7 @@ export default class ArrayModel extends Component {
       <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
         [
           {
-            properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
+            properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
-              <br />{ key }: { String(v) }</span>)
-              : null
           }
           {
             !description ? null :

src/core/components/primitive-model.jsx

@@ -28,6 +28,7 @@ export default class Primitive extends Component {
     let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
     const Markdown = getComponent("Markdown")
     const EnumModel = getComponent("EnumModel")
+    const Property = getComponent("Property")
 
     return <span className="model">
       <span className="prop">
@@ -35,9 +36,7 @@ export default class Primitive extends Component {
         <span className="prop-type">{ type }</span>
         { format && <span className="prop-format">(${format})</span>}
         {
-          properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
+          properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
-            <br />{ key }: { String(v) }</span>)
-            : null
         }
         {
           !description ? null :

src/core/components/property.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export const Property = ({ propKey, propVal, propStyle }) => {
+    return (
+        <span style={ propStyle }>
+          <br />{ propKey }: { String(propVal) }</span>
+    )
+}
+Property.propTypes = {
+  propKey: PropTypes.string,
+  propVal: PropTypes.any,
+  propStyle: PropTypes.object
+}
+
+export default Property

src/core/components/response-body.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { formatXml } from "core/utils"
+import formatXml from "xml-but-prettier"
 import lowerCase from "lodash/lowerCase"
 
 export default class ResponseBody extends React.Component {
@@ -31,7 +31,10 @@ export default class ResponseBody extends React.Component {
 
       // XML
     } else if (/xml/i.test(contentType)) {
-      body = formatXml(content)
+      body = formatXml(content, {
+        textNodesOnSameLine: true,
+        indentor: "  "
+      })
       bodyEl = <HighlightCode value={ body } />
 
       // HTML or Plain Text

src/core/index.js

@@ -58,13 +58,12 @@ module.exports = function SwaggerUI(opts) {
     plugins: [
     ],
 
+    // Initial state
+    initialState: { },
+
     // Inline Plugin
     fn: { },
     components: { },
-    state: { },
-
-    // Override some core configs... at your own risk
-    store: { },
   }
 
   let queryConfig = parseSearch()
@@ -74,12 +73,12 @@ module.exports = function SwaggerUI(opts) {
 
   const constructorConfig = deepExtend({}, defaults, opts, queryConfig)
 
-  const storeConfigs = deepExtend({}, constructorConfig.store, {
+  const storeConfigs = {
     system: {
       configs: constructorConfig.configs
     },
     plugins: constructorConfig.presets,
-    state: {
+    state: deepExtend({
       layout: {
         layout: constructorConfig.layout,
         filter: constructorConfig.filter
@@ -88,8 +87,8 @@ module.exports = function SwaggerUI(opts) {
         spec: "",
         url: constructorConfig.url
       }
-    }
+    }, constructorConfig.initialState)
-  })
+  }
 
   let inlinePlugin = ()=> {
     return {

src/core/plugins/oas3/components/http-auth.jsx

@@ -108,9 +108,6 @@ export default class HttpAuth extends React.Component {
             <Row>
               <Markdown source={ schema.get("description") } />
             </Row>
-            <Row>
-              <p>In: <code>{ schema.get("in") }</code></p>
-            </Row>
             <Row>
               <label>Value:</label>
               {

src/core/plugins/oas3/spec-extensions/wrap-selectors.js

@@ -48,6 +48,10 @@ export const definitions = onlyOAS3(createSelector(
   spec => spec.getIn(["components", "schemas"]) || Map()
 ))
 
+export const hasHost = onlyOAS3((state) => {
+  return spec(state).hasIn(["servers", 0])
+})
+
 export const securityDefinitions = onlyOAS3(createSelector(
   spec,
   spec => spec.getIn(["components", "securitySchemes"]) || null

src/core/presets/base.js

@@ -10,6 +10,7 @@ import auth from "core/plugins/auth"
 import util from "core/plugins/util"
 import SplitPaneModePlugin from "core/plugins/split-pane-mode"
 import downloadUrlPlugin from "core/plugins/download-url"
+import configsPlugin from "plugins/configs"
 import deepLinkingPlugin from "core/plugins/deep-linking"
 
 import App from "core/components/app"
@@ -52,6 +53,7 @@ import EnumModel from "core/components/enum-model"
 import ObjectModel from "core/components/object-model"
 import ArrayModel from "core/components/array-model"
 import PrimitiveModel from "core/components/primitive-model"
+import Property from "core/components/property"
 import TryItOutButton from "core/components/try-it-out-button"
 import VersionStamp from "core/components/version-stamp"
 
@@ -106,6 +108,7 @@ export default function() {
       ObjectModel,
       ArrayModel,
       PrimitiveModel,
+      Property,
       TryItOutButton,
       Markdown,
       BaseLayout,
@@ -122,6 +125,7 @@ export default function() {
   }
 
   return [
+    configsPlugin,
     util,
     logs,
     view,

src/core/utils.js

@@ -155,83 +155,6 @@ export function getList(iterable, keys) {
   return Im.List.isList(val) ? val : Im.List()
 }
 
-// Adapted from http://stackoverflow.com/a/2893259/454004
-// Note: directly ported from CoffeeScript
-export function formatXml (xml) {
-  var contexp, fn, formatted, indent, l, lastType, len, lines, ln, reg, transitions, wsexp
-  reg = /(>)(<)(\/*)/g
-  wsexp = /[ ]*(.*)[ ]+\n/g
-  contexp = /(<.+>)(.+\n)/g
-  xml = xml.replace(/\r\n/g, "\n").replace(reg, "$1\n$2$3").replace(wsexp, "$1\n").replace(contexp, "$1\n$2")
-  formatted = ""
-  lines = xml.split("\n")
-  indent = 0
-  lastType = "other"
-  transitions = {
-    "single->single": 0,
-    "single->closing": -1,
-    "single->opening": 0,
-    "single->other": 0,
-    "closing->single": 0,
-    "closing->closing": -1,
-    "closing->opening": 0,
-    "closing->other": 0,
-    "opening->single": 1,
-    "opening->closing": 0,
-    "opening->opening": 1,
-    "opening->other": 1,
-    "other->single": 0,
-    "other->closing": -1,
-    "other->opening": 0,
-    "other->other": 0
-  }
-  fn = function(ln) {
-    var fromTo, key, padding, type, types, value
-    types = {
-      single: Boolean(ln.match(/<.+\/>/)),
-      closing: Boolean(ln.match(/<\/.+>/)),
-      opening: Boolean(ln.match(/<[^!?].*>/))
-    }
-    type = ((function() {
-      var results
-      results = []
-      for (key in types) {
-        value = types[key]
-        if (value) {
-          results.push(key)
-        }
-      }
-      return results
-    })())[0]
-    type = type === void 0 ? "other" : type
-    fromTo = lastType + "->" + type
-    lastType = type
-    padding = ""
-    indent += transitions[fromTo]
-    padding = ((function() {
-      /* eslint-disable no-unused-vars */
-      var m, ref1, results, j
-      results = []
-      for (j = m = 0, ref1 = indent; 0 <= ref1 ? m < ref1 : m > ref1; j = 0 <= ref1 ? ++m : --m) {
-        results.push("  ")
-      }
-      /* eslint-enable no-unused-vars */
-      return results
-    })()).join("")
-    if (fromTo === "opening->closing") {
-      formatted = formatted.substr(0, formatted.length - 1) + ln + "\n"
-    } else {
-      formatted += padding + ln + "\n"
-    }
-  }
-  for (l = 0, len = lines.length; l < len; l++) {
-    ln = lines[l]
-    fn(ln)
-  }
-  return formatted
-}
-
-
 /**
  * Adapted from http://github.com/asvd/microlight
  * @copyright 2016 asvd <heliosframework@gmail.com>
@@ -536,6 +459,13 @@ export const validateMinLength = (val, min) => {
   }
 }
 
+export const validatePattern = (val, rxPattern) => {
+  var patt = new RegExp(rxPattern)
+  if (!patt.test(val)) {
+      return "Value must follow pattern " + rxPattern
+  }
+}
+
 // validation of parameters before execute
 export const validateParam = (param, isXml, isOAS3 = false) => {
   let errors = []
@@ -549,6 +479,8 @@ export const validateParam = (param, isXml, isOAS3 = false) => {
   let format = paramDetails.get("format")
   let maxLength = paramDetails.get("maxLength")
   let minLength = paramDetails.get("minLength")
+  let pattern = paramDetails.get("pattern")
+  
 
   /*
     If the parameter is required OR the parameter has a value (meaning optional, but filled in)
@@ -556,14 +488,24 @@ export const validateParam = (param, isXml, isOAS3 = false) => {
     Only bother validating the parameter if the type was specified.
   */
   if ( type && (required || value) ) {
-    // These checks should evaluate to true if the parameter's value is valid
+    // These checks should evaluate to true if there is a parameter
-    let stringCheck = type === "string" && value && !validateString(value)
+    let stringCheck = type === "string" && value
     let arrayCheck = type === "array" && Array.isArray(value) && value.length
     let listCheck = type === "array" && Im.List.isList(value) && value.count()
     let fileCheck = type === "file" && value instanceof win.File
-    let booleanCheck = type === "boolean" && !validateBoolean(value)
+    let booleanCheck = type === "boolean" && (value || value === false)
-    let numberCheck = type === "number" && !validateNumber(value) // validateNumber returns undefined if the value is a number
+    let numberCheck = type === "number" && value
-    let integerCheck = type === "integer" && !validateInteger(value) // validateInteger returns undefined if the value is an integer
+    let integerCheck = type === "integer" && value
+
+    if ( required && !(stringCheck || arrayCheck || listCheck || fileCheck || booleanCheck || numberCheck || integerCheck) ) {
+      errors.push("Required field is not provided")
+      return errors
+    }
+
+    if (pattern) {
+      let err = validatePattern(value, pattern)
+      if (err) errors.push(err)
+    }
     
     if (maxLength || maxLength === 0) {
       let err = validateMaxLength(value, maxLength)
@@ -575,11 +517,6 @@ export const validateParam = (param, isXml, isOAS3 = false) => {
       if (err) errors.push(err)
     }
 
-    if ( required && !(stringCheck || arrayCheck || listCheck || fileCheck || booleanCheck || numberCheck || integerCheck) ) {
-      errors.push("Required field is not provided")
-      return errors
-    }
-
     if (maximum || maximum === 0) {
       let err = validateMaximum(value, maximum)
       if (err) errors.push(err)

src/plugins/configs/actions.js

@@ -0,0 +1,20 @@
+export const UPDATE_CONFIGS = "configs_update"
+export const TOGGLE_CONFIGS = "configs_toggle"
+
+// Update the configs, with a merge ( not deep )
+export function update(configName, configValue) {
+  return {
+    type: UPDATE_CONFIGS,
+    payload: {
+      [configName]: configValue
+    },
+  }
+}
+
+// Toggle's the config, by name
+export function toggle(configName) {
+  return {
+    type: TOGGLE_CONFIGS,
+    payload: configName,
+  }
+}

src/plugins/configs/index.js

@@ -1,56 +1,66 @@
 import YAML from "js-yaml"
 import yamlConfig from "../../../swagger-config.yaml"
+import * as actions from "./actions"
+import * as selectors from "./selectors"
+import reducers from "./reducers"
 
 const parseYamlConfig = (yaml, system) => {
-    try {
+  try {
-        return YAML.safeLoad(yaml)
+    return YAML.safeLoad(yaml)
-    } catch(e) {
+  } catch(e) {
-        if (system) {
+    if (system) {
-            system.errActions.newThrownErr( new Error(e) )
+      system.errActions.newThrownErr( new Error(e) )
-        }
-        return {}
     }
+    return {}
+  }
 }
 
 
-export default function configPlugin (toolbox) {
+const specActions = {
-    let { fn } = toolbox
+  downloadConfig: (url) => ({fn}) => {
-
+    let {fetch} = fn
-    const actions = {
+    return fetch(url)
-        downloadConfig: (url) => () => {
+  },
-            let {fetch} = fn
-            return fetch(url)
-        },
-
-        getConfigByUrl: (configUrl, cb)=> ({ specActions }) => {
-            if (configUrl) {
-                return specActions.downloadConfig(configUrl).then(next, next)
-            }
-
-            function next(res) {
-                if (res instanceof Error || res.status >= 400) {
-                    specActions.updateLoadingStatus("failedConfig")
-                    specActions.updateLoadingStatus("failedConfig")
-                    specActions.updateUrl("")
-                    console.error(res.statusText + " " + configUrl)
-                    cb(null)
-                } else {
-                    cb(parseYamlConfig(res.text))
-                }
-            }
-        }
 
+  getConfigByUrl: (configUrl, cb)=> ({ specActions }) => {
+    if (configUrl) {
+      return specActions.downloadConfig(configUrl).then(next, next)
     }
 
-    const selectors = {
+    function next(res) {
-        getLocalConfig: () => {
+      if (res instanceof Error || res.status >= 400) {
-            return parseYamlConfig(yamlConfig)
+        specActions.updateLoadingStatus("failedConfig")
-        }
+        specActions.updateLoadingStatus("failedConfig")
-    }
+        specActions.updateUrl("")
-
+        console.error(res.statusText + " " + configUrl)
-    return {
+        cb(null)
-        statePlugins: {
+      } else {
-            spec: { actions, selectors }
+        cb(parseYamlConfig(res.text))
-        }
+      }
     }
+  }
+}
+
+const specSelectors = {
+  getLocalConfig: () => {
+    return parseYamlConfig(yamlConfig)
+  }
+}
+
+
+export default function configsPlugin() {
+
+  return {
+    statePlugins: {
+      spec: {
+        actions: specActions,
+        selectors: specSelectors,
+      },
+      configs: {
+        reducers,
+        actions,
+        selectors,
+      }
+    }
+  }
 }

src/plugins/configs/reducers.js

@@ -0,0 +1,20 @@
+import { fromJS } from "immutable"
+
+import {
+	UPDATE_CONFIGS,
+	TOGGLE_CONFIGS,
+} from "./actions"
+
+export default {
+
+  [UPDATE_CONFIGS]: (state, action) => {
+    return state.merge(fromJS(action.payload))
+  },
+
+  [TOGGLE_CONFIGS]: (state, action) => {
+    const configName = action.payload
+    const oriVal = state.get(configName)
+    return state.set(configName, !oriVal)
+  },
+
+}

src/plugins/configs/selectors.js

@@ -0,0 +1,4 @@
+// Just get the config value ( it can possibly be an immutable object)
+export const get = (state, path) => {
+  return state.getIn(Array.isArray(path) ? path : [path])
+}

src/style/_authorize.scss

@@ -25,7 +25,7 @@
     margin: 0 0 10px 0;
     padding: 10px 20px;
 
-    border-bottom: 1px solid #ebebeb;
+    border-bottom: 1px solid $auth-container-border-color;
 
     &:last-of-type
     {

src/style/_buttons.scss

@@ -7,10 +7,10 @@
 
     transition: all .3s;
 
-    border: 2px solid #888;
+    border: 2px solid $btn-border-color;
     border-radius: 4px;
     background: transparent;
-    box-shadow: 0 1px 2px rgba(#000,.1);
+    box-shadow: 0 1px 2px rgba($btn-box-shadow-color,.1);
 
     @include text_headline();
 
@@ -29,14 +29,14 @@
 
     &:hover
     {
-        box-shadow: 0 0 5px rgba(#000,.3);
+        box-shadow: 0 0 5px rgba($btn-box-shadow-color,.3);
     }
 
     &.cancel
     {
-        border-color: #ff6060;
+        border-color: $btn-cancel-border-color;
-
+        background-color: $btn-cancel-background-color;
-        @include text_headline(#ff6060);
+        @include text_headline($btn-cancel-font-color);
     }
 
     &.authorize
@@ -45,9 +45,9 @@
 
         display: inline;
 
-        color: $_color-post;
+        color: $btn-authorize-font-color;
-        border-color: $_color-post;
+        border-color: $btn-authorize-border-color;
-
+        background-color: $btn-authorize-background-color;
 
         span
         {
@@ -58,16 +58,17 @@
 
         svg
         {
-            fill: $_color-post;
+            fill: $btn-authorize-svg-fill-color;
         }
     }
 
     &.execute
     {
         animation: swagger-ui-pulse 2s infinite;
-
+        will-change: transform;
-        color: #fff;
+        background-color: $btn-execute-background-color;
-        border-color: #4990e2;
+        color: $btn-execute-font-color;
+        border-color: $btn-execute-border-color;
     }
 }
 
@@ -76,21 +77,19 @@
 {
     0%
     {
-        color: #fff;
+        color: $btn-execute-font-color;
-        background: #4990e2;
+        background: $btn-execute-background-color-alt;
-        box-shadow: 0 0 0 0 rgba(#4990e2, .8);
+        box-shadow: 0 0 0 0 rgba($btn-execute-background-color-alt, .8);
     }
     70%
     {
-        //color: #4990e2;
+        box-shadow: 0 0 0 5px rgba($btn-execute-background-color-alt, 0);
-        //background: transparent;
-        box-shadow: 0 0 0 5px rgba(#4990e2, 0);
     }
     100%
     {
-        color: #fff;
+        color: $btn-execute-font-color;
-        background: #4990e2;
+        background: $btn-execute-background-color-alt;
-        box-shadow: 0 0 0 0 rgba(#4990e2, 0);
+        box-shadow: 0 0 0 0 rgba($btn-execute-background-color-alt, 0);
     }
 }
 
@@ -155,7 +154,7 @@
     {
         svg
         {
-            fill: #444;
+            fill: $expand-methods-svg-fill-color-hover;
         }
     }
 
@@ -163,7 +162,7 @@
     {
         transition: all .3s;
 
-        fill: #777;
+        fill: $expand-methods-svg-fill-color;
     }
 }
 

src/style/_errors.scss

@@ -27,7 +27,7 @@
 
         small
         {
-          color: #666;
+          color: $errors-wrapper-errors-small-font-color;
         }
     }
 

src/style/_form.scss

@@ -5,11 +5,11 @@ select
 
     padding: 5px 40px 5px 10px;
 
-    border: 2px solid #41444e;
+    border: 2px solid $form-select-border-color;
     border-radius: 4px;
-    background: #f7f7f7 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+ICAgIDxwYXRoIGQ9Ik0xMy40MTggNy44NTljLjI3MS0uMjY4LjcwOS0uMjY4Ljk3OCAwIC4yNy4yNjguMjcyLjcwMSAwIC45NjlsLTMuOTA4IDMuODNjLS4yNy4yNjgtLjcwNy4yNjgtLjk3OSAwbC0zLjkwOC0zLjgzYy0uMjctLjI2Ny0uMjctLjcwMSAwLS45NjkuMjcxLS4yNjguNzA5LS4yNjguOTc4IDBMMTAgMTFsMy40MTgtMy4xNDF6Ii8+PC9zdmc+) right 10px center no-repeat;
+    background: $form-select-background-color url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+ICAgIDxwYXRoIGQ9Ik0xMy40MTggNy44NTljLjI3MS0uMjY4LjcwOS0uMjY4Ljk3OCAwIC4yNy4yNjguMjcyLjcwMSAwIC45NjlsLTMuOTA4IDMuODNjLS4yNy4yNjgtLjcwNy4yNjgtLjk3OSAwbC0zLjkwOC0zLjgzYy0uMjctLjI2Ny0uMjctLjcwMSAwLS45NjkuMjcxLS4yNjguNzA5LS4yNjguOTc4IDBMMTAgMTFsMy40MTgtMy4xNDF6Ii8+PC9zdmc+) right 10px center no-repeat;
     background-size: 20px;
-    box-shadow: 0 1px 2px 0 rgba(0,0,0,.25);
+    box-shadow: 0 1px 2px 0 rgba($form-select-box-shadow-color, .25);
 
     @include text_headline();
     appearance: none;
@@ -19,7 +19,7 @@ select
         margin: 5px 0;
         padding: 5px;
 
-        background: #f7f7f7;
+        background: $form-select-background-color;
     }
 
     &.invalid {
@@ -57,9 +57,9 @@ input[type=file]
     margin: 5px 0;
     padding: 8px 10px;
 
-    border: 1px solid #d9d9d9;
+    border: 1px solid $form-input-border-color;
     border-radius: 4px;
-    background: #fff;
+    background: $form-input-background-color;
     @media (max-width: 768px) {
       max-width: 175px;
     }
@@ -110,13 +110,13 @@ textarea
     border: none;
     border-radius: 4px;
     outline: none;
-    background: rgba(#fff,.8);
+    background: rgba($form-textarea-background-color,.8);
 
     @include text_code();
 
     &:focus
     {
-        border: 2px solid $_color-get;
+        border: 2px solid $form-textarea-focus-border-color;
     }
 
     &.curl
@@ -130,9 +130,9 @@ textarea
         resize: none;
 
         border-radius: 4px;
-        background: #41444e;
+        background: $form-textarea-curl-background-color;
 
-        @include text_code(#fff);
+        @include text_code($form-textarea-curl-font-color);
     }
 }
 
@@ -143,7 +143,7 @@ textarea
 
     transition: opacity .5s;
 
-    color: #333;
+    color: $form-checkbox-label-font-color;
 
     label
     {
@@ -179,8 +179,8 @@ textarea
             cursor: pointer;
 
             border-radius: 1px;
-            background: #e8e8e8;
+            background: $form-checkbox-background-color;
-            box-shadow: 0 0 0 2px #e8e8e8;
+            box-shadow: 0 0 0 2px $form-checkbox-box-shadow-color;
 
             flex: none;
 
@@ -192,7 +192,7 @@ textarea
 
         &:checked + label > .item
         {
-            background: #e8e8e8 url(data:image/svg+xml,%0A%3Csvg%20width%3D%2210px%22%20height%3D%228px%22%20viewBox%3D%223%207%2010%208%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Rectangle-34%22%20stroke%3D%22none%22%20fill%3D%22%2341474E%22%20fill-rule%3D%22evenodd%22%20points%3D%226.33333333%2015%203%2011.6666667%204.33333333%2010.3333333%206.33333333%2012.3333333%2011.6666667%207%2013%208.33333333%22%3E%3C/polygon%3E%0A%3C/svg%3E) center center no-repeat;
+            background: $form-checkbox-background-color url(data:image/svg+xml,%0A%3Csvg%20width%3D%2210px%22%20height%3D%228px%22%20viewBox%3D%223%207%2010%208%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Rectangle-34%22%20stroke%3D%22none%22%20fill%3D%22%2341474E%22%20fill-rule%3D%22evenodd%22%20points%3D%226.33333333%2015%203%2011.6666667%204.33333333%2010.3333333%206.33333333%2012.3333333%2011.6666667%207%2013%208.33333333%22%3E%3C/polygon%3E%0A%3C/svg%3E) center center no-repeat;
         }
     }
 }

src/style/_information.scss

@@ -30,9 +30,9 @@
         padding: 3px 5px;
 
         border-radius: 4px;
-        background: rgba(#000,.05);
+        background: rgba($info-code-background-color,.05);
 
-        @include text_code(#9012fe);
+        @include text_code($info-code-font-color);
     }
 
     a
@@ -41,11 +41,11 @@
 
         transition: all .4s;
 
-        @include text_body(#4990e2);
+        @include text_body($info-link-font-color);
 
         &:hover
         {
-            color: darken(#4990e2, 15%);
+            color: darken($info-link-font-color-hover, 15%);
         }
     }
     > div
@@ -86,13 +86,13 @@
             vertical-align: super;
 
             border-radius: 57px;
-            background: #7d8492;
+            background: $info-title-small-background-color;
 
             pre
             {
                 margin: 0;
 
-                @include text_headline(#fff);
+                @include text_headline($info-title-small-pre-font-color);
             }
         }
     }

src/style/_layout.scss

@@ -34,11 +34,11 @@
     cursor: pointer;
     transition: all .2s;
 
-    border-bottom: 1px solid rgba(#3b4151, .3);
+    border-bottom: 1px solid rgba($opblock-tag-border-bottom-color, .3);
 
     &:hover
     {
-        background: rgba(#000,.02);
+        background: rgba($opblock-tag-background-color-hover,.02);
     }
 }
 
@@ -127,9 +127,9 @@
 {
     margin: 0 0 15px 0;
 
-    border: 1px solid #000;
+    border: 1px solid $opblock-border-color;
     border-radius: 4px;
-    box-shadow: 0 0 3px rgba(#000,.19);
+    box-shadow: 0 0 3px rgba($opblock-box-shadow-color,.19);
 
     .tab-header
     {
@@ -168,7 +168,7 @@
                             content: '';
                             transform: translateX(-50%);
 
-                            background: #888;
+                            background: $opblock-tab-header-tab-item-active-h4-span-after-background-color;
                         }
                     }
                 }
@@ -181,7 +181,7 @@
     {
         .opblock-summary
         {
-            border-bottom: 1px solid #000;
+            border-bottom: 1px solid $opblock-isopen-summary-border-bottom-color;
         }
     }
 
@@ -194,8 +194,8 @@
 
         min-height: 50px;
 
-        background: rgba(#fff,.8);
+        background: rgba($opblock-isopen-section-header-background-color,.8);
-        box-shadow: 0 1px 2px rgba(#000,.1);
+        box-shadow: 0 1px 2px rgba($opblock-isopen-section-header-box-shadow-color,.1);
 
         label
         {
@@ -239,10 +239,10 @@
         text-align: center;
 
         border-radius: 3px;
-        background: #000;
+        background: $opblock-summary-method-background-color;
-        text-shadow: 0 1px 0 rgba(#000,.1);
+        text-shadow: 0 1px 0 rgba($opblock-summary-method-text-shadow-color,.1);
 
-        @include text_headline(#fff);
+        @include text_headline($opblock-summary-method-font-color);
     }
 
     .opblock-summary-path,
@@ -377,7 +377,7 @@
         margin: 20px 0;
         padding: 10px 10px;
 
-        border: 2px solid #d8dde7;
+        border: 2px solid $operational-filter-input-border-color;
     }
 }
 
@@ -420,7 +420,7 @@
 
                 content: '';
 
-                background: rgba(#000,.2);
+                background: rgba($tab-list-item-first-background-color,.2);
             }
         }
 
@@ -525,7 +525,7 @@
     {
         font-size: 11px;
 
-        @include text_code(#999);
+        @include text_code($response-col-status-undocumented-font-color);
     }
 }
 
@@ -541,7 +541,7 @@
     {
         font-size: 11px;
 
-        @include text_code(#999);
+        @include text_code($response-col-links-font-color);
     }
 }
 
@@ -558,9 +558,9 @@
         padding: 10px;
 
         border-radius: 4px;
-        background: #41444e;
+        background: $response-col-description-inner-markdown-background-color;
 
-        @include text_code(#fff);
+        @include text_code($response-col-description-inner-markdown-font-color);
 
         p
         {
@@ -569,10 +569,10 @@
 
         a
         {
-            @include text_code(#89bf04);
+            @include text_code($response-col-description-inner-markdown-link-font-color);
             text-decoration: underline;
             &:hover {
-                color: #81b10c;
+                color: $response-col-description-inner-markdown-link-font-color-hover;
             }
         }
     }
@@ -593,13 +593,13 @@
     hyphens: auto;
 
     border-radius: 4px;
-    background: #41444e;
+    background: $opblock-body-background-color;
 
     overflow-wrap: break-word;
-    @include text_code(#fff);
+    @include text_code($opblock-body-font-color);
     span
     {
-        color: #fff !important;
+        color: $opblock-body-font-color !important;
     }
 
     .headerline
@@ -613,8 +613,8 @@
     margin: 0 0 20px 0;
     padding: 30px 0;
 
-    background: #fff;
+    background: $scheme-container-background-color;
-    box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
+    box-shadow: 0 1px 2px 0 rgba($scheme-container-box-shadow-color,.15);
 
     .schemes
     {
@@ -648,14 +648,14 @@
     margin: 0 0 20px 0;
     padding: 30px 0;
 
-    background: #fff;
+    background: $server-container-background-color;
-    box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
+    box-shadow: 0 1px 2px 0 rgba($server-container-box-shadow-color,.15);
 
     .computed-url {
       margin: 2em 0;
 
       code {
-        color: grey;
+        color: $server-container-computed-url-code-font-color;
         display: inline-block;
         padding: 4px;
         font-size: 16px;
@@ -755,8 +755,8 @@
             animation: rotation 1s infinite linear, opacity .5s;
 
             opacity: 1;
-            border: 2px solid rgba(#555, .1);
+            border: 2px solid rgba($loading-container-before-border-color, .1);
-            border-top-color: rgba(#000, .6);
+            border-top-color: rgba($loading-container-before-border-top-color, .6);
             border-radius: 100%;
 
             backface-visibility: hidden;
@@ -777,11 +777,11 @@
 
   &.controls-accept-header {
     select {
-      border-color: green;
+      border-color: $response-content-type-controls-accept-header-select-border-color;
     }
 
     small {
-      color: green;
+      color: $response-content-type-controls-accept-header-small-font-color;
       font-size: .7em;
     }
   }

src/style/_modal.scss

@@ -15,7 +15,7 @@
         bottom: 0;
         left: 0;
 
-        background: rgba(#000,.8);
+        background: rgba($dialog-ux-backdrop-background-color,.8);
     }
 
     .modal-ux
@@ -31,10 +31,10 @@
 
         transform: translate(-50%,-50%);
 
-        border: 1px solid #ebebeb;
+        border: 1px solid $dialog-ux-modal-border-color;
         border-radius: 4px;
-        background: #fff;
+        background: $dialog-ux-modal-background-color;
-        box-shadow: 0 10px 30px 0 rgba(0,0,0,.20);
+        box-shadow: 0 10px 30px 0 rgba($dialog-ux-modal-box-shadow-color,.20);
     }
 
     .modal-ux-content
@@ -50,7 +50,7 @@
 
             margin: 0 0 5px 0;
 
-            color: #41444e;
+            color: $dialog-ux-modal-content-font-color;
 
             @include text_body();
         }
@@ -72,7 +72,7 @@
 
         padding: 12px 0;
 
-        border-bottom: 1px solid #ebebeb;
+        border-bottom: 1px solid $dialog-ux-modal-header-border-bottom-color;
 
         align-items: center;
 

src/style/_models.scss

@@ -6,7 +6,7 @@
     .deprecated
     {
       span, td {
-        color: #aaa !important;
+        color: $model-deprecated-font-color !important;
       }
     }
 
@@ -82,9 +82,9 @@
 
         white-space: nowrap;
 
-        color: #ebebeb;
+        color: $model-hint-font-color;
         border-radius: 4px;
-        background: rgba(#000,.7);
+        background: rgba($model-hint-background-color,.7);
     }
 
     p {
@@ -97,7 +97,7 @@ section.models
 {
     margin: 30px 0;
 
-    border: 1px solid rgba(#3b4151, .3);
+    border: 1px solid rgba($section-models-border-color, .3);
     border-radius: 4px;
 
     &.is-open
@@ -106,7 +106,7 @@ section.models
         h4
         {
             margin: 0 0 5px 0;
-            border-bottom: 1px solid rgba(#3b4151, .3);
+            border-bottom: 1px solid rgba($section-models-isopen-h4-border-bottom-color, .3);
         }
     }
     h4
@@ -121,7 +121,7 @@ section.models
         cursor: pointer;
         transition: all .2s;
 
-        @include text_headline(#777);
+        @include text_headline($section-models-h4-font-color);
         align-items: center;
 
         svg
@@ -136,7 +136,7 @@ section.models
 
         &:hover
         {
-            background: rgba(#000,.02);
+            background: rgba($section-models-h4-background-color-hover,.02);
         }
     }
 
@@ -146,7 +146,7 @@ section.models
 
         margin: 0 0 10px 0;
 
-        @include text_headline(#777);
+        @include text_headline($section-models-h5-font-color);
     }
 
     .model-jump-to-path
@@ -162,11 +162,11 @@ section.models
         transition: all .5s;
 
         border-radius: 4px;
-        background: rgba(#000,.05);
+        background: rgba($section-models-model-container-background-color,.05);
 
         &:hover
         {
-            background: rgba(#000,.07);
+            background: rgba($section-models-model-container-background-color,.07);
         }
 
         &:first-of-type
@@ -192,7 +192,7 @@ section.models
     padding: 10px;
 
     border-radius: 4px;
-    background: rgba(#000,.1);
+    background: rgba($section-models-model-box-background-color,.1);
 
     .model-jump-to-path
     {
@@ -211,7 +211,7 @@ section.models
 {
     font-size: 16px;
 
-    @include text_headline(#555);
+    @include text_headline($section-models-model-title-font-color);
 }
 
 .model-deprecated-warning
@@ -243,7 +243,7 @@ span
 
 .prop-type
 {
-    color: #55a;
+    color: $prop-type-font-color;
 }
 
 .prop-enum
@@ -252,5 +252,5 @@ span
 }
 .prop-format
 {
-    color: #999;
+    color: $prop-format-font-color;
 }

src/style/_table.scss

@@ -74,7 +74,7 @@ table
 
                 text-align: left;
 
-                border-bottom: 1px solid rgba(#3b4151, .2);
+                border-bottom: 1px solid rgba($table-thead-td-border-bottom-color, .2);
 
                 @include text_body();
             }
@@ -126,7 +126,7 @@ table
 
             content: 'required';
 
-            color: rgba(#f00, .6);
+            color: rgba($table-parameter-name-required-font-color, .6);
         }
     }
 }
@@ -136,7 +136,7 @@ table
     font-size: 12px;
     font-style: italic;
 
-    @include text_code(#888);
+    @include text_code($table-parameter-in-font-color);
 }
 
 .parameter__deprecated
@@ -144,7 +144,7 @@ table
     font-size: 12px;
     font-style: italic;
 
-    @include text_code(#f00);
+    @include text_code($table-parameter-deprecated-font-color);
 }
 
 

src/style/_topbar.scss

@@ -2,7 +2,7 @@
 {
     padding: 8px 0;
 
-    background-color: #89bf04;
+    background-color: $topbar-background-color;
     .topbar-wrapper
     {
         display: flex;
@@ -21,7 +21,7 @@
 
         text-decoration: none;
 
-        @include text_headline(#fff);
+        @include text_headline($topbar-link-font-color);
 
         span
         {
@@ -41,7 +41,7 @@
             width: 100%;
             margin: 0;
 
-            border: 2px solid #547f00;
+            border: 2px solid $topbar-download-url-wrapper-element-border-color;
             border-radius: 4px 0 0 4px;
             outline: none;
         }
@@ -71,7 +71,7 @@
 
                 width: 100%;
 
-                border: 2px solid #547f00;
+                border: 2px solid $topbar-download-url-wrapper-element-border-color;
                 outline: none;
                 box-shadow: none;
             }
@@ -87,9 +87,9 @@
 
             border: none;
             border-radius: 0 4px 4px 0;
-            background: #547f00;
+            background: $topbar-download-url-button-background-color;
 
-            @include text_headline(#fff);
+            @include text_headline($topbar-download-url-button-font-color);
         }
     }
 }

src/style/_type.scss

@@ -1,11 +1,11 @@
-@mixin text_body($color: #3b4151)
+@mixin text_body($color: $text-body-default-font-color)
 {
     font-family: 'Open Sans', sans-serif;
 
     color: $color;
 }
 
-@mixin text_code($color: #3b4151)
+@mixin text_code($color: $text-code-default-font-color)
 {
     font-family: 'Source Code Pro', monospace;
     font-weight: 600;
@@ -13,7 +13,7 @@
     color: $color;
 }
 
-@mixin text_headline($color: #3b4151)
+@mixin text_headline($color: $text-headline-default-font-color)
 {
     font-family: 'Titillium Web', sans-serif;
 

src/style/_variables.scss

@@ -0,0 +1,218 @@
+
+$gray-base: #000 !default;
+$white: #fff !default;
+$gray-50: #ebebeb !default;
+$gray-100: #d8dde7 !default;
+$gray-200: lighten($gray-base, 62.75%) !default; // #aaa
+$gray-300: lighten($gray-base, 56.5%) !default; // #999
+$gray-400: lighten($gray-base, 50%) !default; // #888
+$gray-500: lighten($gray-base, 43.75%) !default; // #777
+$gray-600: lighten($gray-base, 37.5%) !default; // #666
+$gray-650: lighten($gray-base, 33.3%) !default; // ##555555
+$gray-700: lighten($gray-base, 31.25%) !default; // #555
+$gray-800: lighten($gray-base, 25%) !default; // #444
+$gray-900: lighten($gray-base, 18.75%) !default; // #333
+
+$gray-custom-1: #41444e !default;
+$gray-custom-2: #3b4151 !default;
+
+$color-primary: #89bf04 !default;
+$color-secondary: #9012fe !default;
+$color-info: #4990e2 !default;
+$color-warning: #ff6060 !default;
+$color-danger: #f00 !default;
+
+$_color-post: #49cc90 !default;
+$_color-get: #61affe !default;
+$_color-put: #fca130 !default;
+$_color-delete: #f93e3e !default;
+$_color-head: #9012fe !default;
+$_color-patch: #50e3c2 !default;
+$_color-disabled: #ebebeb !default;
+$_color-options: #0d5aa7 !default;
+
+$color-green: #008000 !default;
+
+$color-primary-hover: #81b10c !default;
+
+// Authorize
+
+$auth-container-border-color: $gray-50 !default;
+
+// Buttons
+
+$btn-background-color: transparent !default;
+$btn-border-color: $gray-400 !default;
+$btn-font-color: inherit !default;
+$btn-box-shadow-color: $gray-base !default;
+
+$btn-authorize-background-color: transparent !default;
+$btn-authorize-border-color: $_color-post !default;
+$btn-authorize-font-color: $_color-post !default;
+$btn-authorize-svg-fill-color: $_color-post !default;
+
+$btn-cancel-background-color: transparent !default;
+$btn-cancel-border-color: $color-warning !default;
+$btn-cancel-font-color: $color-warning !default;
+
+$btn-execute-background-color: transparent !default;
+$btn-execute-border-color: $color-info !default;
+$btn-execute-font-color: $white !default;
+$btn-execute-background-color-alt: $color-info !default;
+
+$expand-methods-svg-fill-color: $gray-500 !default;
+$expand-methods-svg-fill-color-hover: $gray-800 !default;
+
+// Errors
+
+$errors-wrapper-background-color: $_color-delete !default;
+$errors-wrapper-border-color: $_color-delete !default;
+
+$errors-wrapper-errors-small-font-color: $gray-600 !default;
+
+// Form
+
+$form-select-background-color: #f7f7f7 !default;
+$form-select-border-color: $gray-custom-1 !default;
+$form-select-box-shadow-color: $gray-base !default;
+
+$form-input-border-color: #d9d9d9 !default;
+$form-input-background-color: $white !default;
+
+$form-textarea-background-color: $white !default;
+$form-textarea-focus-border-color: $_color-get !default;
+
+$form-textarea-curl-background-color: $gray-custom-1 !default;
+$form-textarea-curl-font-color: $white !default;
+
+$form-checkbox-label-font-color: $gray-900 !default;
+$form-checkbox-background-color: #e8e8e8 !default;
+$form-checkbox-box-shadow-color: #e8e8e8 !default;
+
+// Information
+
+$info-code-background-color: $gray-base !default;
+$info-code-font-color: $_color-head !default;
+
+$info-link-font-color: $color-info !default;
+$info-link-font-color-hover: $info-link-font-color !default;
+
+$info-title-small-background-color: #7d8492 !default;
+
+$info-title-small-pre-font-color: $white !default;
+
+// Layout
+
+$opblock-border-color: $gray-base !default;
+$opblock-box-shadow-color: $gray-base !default;
+
+$opblock-tag-border-bottom-color: $gray-custom-2 !default;
+$opblock-tag-background-color-hover: $gray-base !default;
+
+$opblock-tab-header-tab-item-active-h4-span-after-background-color: $gray-400 !default;
+
+$opblock-isopen-summary-border-bottom-color: $gray-base !default;
+
+$opblock-isopen-section-header-background-color: $white !default;
+$opblock-isopen-section-header-box-shadow-color: $gray-base !default;
+
+$opblock-summary-method-background-color: $gray-base !default;
+$opblock-summary-method-font-color: $white !default;
+$opblock-summary-method-text-shadow-color: $gray-base !default;
+
+$operational-filter-input-border-color: #d8dde7 !default;
+
+$tab-list-item-first-background-color: $gray-base !default;
+
+$response-col-status-undocumented-font-color: $gray-300 !default;
+
+$response-col-links-font-color: $gray-300 !default;
+
+$response-col-description-inner-markdown-font-color: $white !default;
+$response-col-description-inner-markdown-background-color: $gray-custom-1 !default;
+
+$response-col-description-inner-markdown-link-font-color: $color-primary !default;
+$response-col-description-inner-markdown-link-font-color-hover: $color-primary-hover !default;
+
+$opblock-body-background-color: $gray-custom-1 !default;
+$opblock-body-font-color: $white !default;
+
+$scheme-container-background-color: $white !default;
+$scheme-container-box-shadow-color: $gray-base !default;
+
+$server-container-background-color: $white !default;
+$server-container-box-shadow-color: $gray-base !default;
+
+$server-container-computed-url-code-font-color: $gray-400 !default;
+
+$loading-container-before-border-color: $gray-650 !default;
+$loading-container-before-border-top-color: $gray-base !default;
+
+$response-content-type-controls-accept-header-select-border-color: $color-green !default;
+$response-content-type-controls-accept-header-small-font-color: $color-green !default;
+
+// Modal
+
+$dialog-ux-backdrop-background-color: $gray-base !default;
+
+
+$dialog-ux-modal-background-color: $white !default;
+$dialog-ux-modal-border-color: $gray-50 !default;
+$dialog-ux-modal-box-shadow-color: $gray-base !default;
+
+$dialog-ux-modal-content-font-color: $gray-custom-1 !default;
+
+$dialog-ux-modal-header-border-bottom-color: $gray-50 !default;
+
+// Models
+
+$model-deprecated-font-color: $gray-200 !default;
+
+$model-hint-font-color: $gray-50 !default;
+$model-hint-background-color: $gray-base !default;
+
+$section-models-border-color: $gray-custom-2 !default;
+
+$section-models-isopen-h4-border-bottom-color: $section-models-border-color !default;
+
+$section-models-h4-font-color: $gray-500 !default;
+$section-models-h4-background-color-hover: $gray-base !default;
+
+$section-models-h5-font-color: $gray-500 !default;
+
+$section-models-model-container-background-color: $gray-base !default;
+
+$section-models-model-box-background-color: $gray-base !default;
+
+$section-models-model-title-font-color: $gray-700 !default;
+
+$prop-type-font-color: #55a !default;
+
+$prop-format-font-color: $gray-300 !default;
+
+// Tables
+
+$table-thead-td-border-bottom-color: $gray-custom-2 !default;
+
+$table-parameter-name-required-font-color: $color-danger !default;
+
+$table-parameter-in-font-color: $gray-400 !default;
+
+$table-parameter-deprecated-font-color: $color-danger !default;
+
+// Topbar
+
+$topbar-background-color: $color-primary !default;
+
+$topbar-link-font-color: $white !default;
+
+$topbar-download-url-wrapper-element-border-color: #547f00 !default;
+
+$topbar-download-url-button-background-color: #547f00 !default;
+$topbar-download-url-button-font-color: $white !default;
+
+// Type
+
+$text-body-default-font-color: $gray-custom-2 !default;
+$text-code-default-font-color: $gray-custom-2 !default;
+$text-headline-default-font-color: $gray-custom-2 !default;

test/core/utils.js

@@ -3,6 +3,7 @@ import expect from "expect"
 import { fromJS, OrderedMap } from "immutable"
 import {
   mapToList,
+  validatePattern,
   validateMinLength,
   validateMaxLength,
   validateDateTime,
@@ -216,9 +217,9 @@ describe("utils", function() {
       expect(validateFile(1)).toEqual(errorMessage)
       expect(validateFile("string")).toEqual(errorMessage)
     })
-   })
+  })
 
-   describe("validateDateTime", function() {
+  describe("validateDateTime", function() {
     let errorMessage = "Value must be a DateTime"
 
     it("doesn't return for valid dates", function() {
@@ -229,7 +230,7 @@ describe("utils", function() {
       expect(validateDateTime(null)).toEqual(errorMessage)
       expect(validateDateTime("string")).toEqual(errorMessage)
     })
-   })
+  })
 
   describe("validateGuid", function() {
     let errorMessage = "Value must be a Guid"
@@ -243,9 +244,9 @@ describe("utils", function() {
       expect(validateGuid(1)).toEqual(errorMessage)
       expect(validateGuid("string")).toEqual(errorMessage)
     })
-   })
+  })
 
-   describe("validateMaxLength", function() {
+  describe("validateMaxLength", function() {
     let errorMessage = "Value must be less than MaxLength"
 
     it("doesn't return for valid guid", function() {
@@ -258,9 +259,9 @@ describe("utils", function() {
       expect(validateMaxLength("abc", 1)).toEqual(errorMessage)
       expect(validateMaxLength("abc", 2)).toEqual(errorMessage)
     })
-   })
+  })
 
-   describe("validateMinLength", function() {
+  describe("validateMinLength", function() {
     let errorMessage = "Value must be greater than MinLength"
 
     it("doesn't return for valid guid", function() {
@@ -272,7 +273,29 @@ describe("utils", function() {
       expect(validateMinLength("abc", 5)).toEqual(errorMessage)
       expect(validateMinLength("abc", 8)).toEqual(errorMessage)
     })
-   })
+  })
+
+  describe("validatePattern", function() {
+    let rxPattern = "^(red|blue)"
+    let errorMessage = "Value must follow pattern " + rxPattern
+
+    it("doesn't return for a match", function() {
+      expect(validatePattern("red", rxPattern)).toBeFalsy()
+      expect(validatePattern("blue", rxPattern)).toBeFalsy()
+    })
+
+    it("returns a message for invalid pattern", function() {
+      expect(validatePattern("pink", rxPattern)).toEqual(errorMessage)
+      expect(validatePattern("123", rxPattern)).toEqual(errorMessage)
+    })
+
+    it("fails gracefully when an invalid regex value is passed", function() {
+      expect(() => validatePattern("aValue", "---")).toNotThrow()
+      expect(() => validatePattern("aValue", 1234)).toNotThrow()
+      expect(() => validatePattern("aValue", null)).toNotThrow()
+      expect(() => validatePattern("aValue", [])).toNotThrow()
+    })
+  })
 
   describe("validateParam", function() {
     let param = null
@@ -525,7 +548,7 @@ describe("utils", function() {
         type: "boolean",
         value: "test string"
       }
-      assertValidateParam(param, ["Required field is not provided"])
+      assertValidateParam(param, ["Value must be a boolean"])
 
       // valid boolean value
       param = {
@@ -585,7 +608,7 @@ describe("utils", function() {
         type: "number",
         value: "test"
       }
-      assertValidateParam(param, ["Required field is not provided"])
+      assertValidateParam(param, ["Value must be a number"])
 
       // invalid number, undefined value
       param = {
@@ -667,7 +690,7 @@ describe("utils", function() {
         type: "integer",
         value: "test"
       }
-      assertValidateParam(param, ["Required field is not provided"])
+      assertValidateParam(param, ["Value must be an integer"])
 
       // invalid integer, undefined value
       param = {
@@ -925,4 +948,5 @@ sbG8iKTs8L3NjcmlwdD4=`)
       expect(sanitizeUrl({})).toEqual("")
     })
   })
+
 })