From 1135e7c5485dbac41ddd1d442d36b289d7348fbc Mon Sep 17 00:00:00 2001
From: Tara O'Kelly <taraokelly.dev@gmail.com>
Date: Thu, 6 Jun 2019 08:40:33 +0100
Subject: [PATCH] Swagger ui redesign/custom dropdown (via #5381)

* improvement: OAS3 $ref friendly-name regex in model.jsx (via #5334)

* improvement: relax schema description styling so Markdown can be effective (via #5340)

* improvement: add `isShown` check to <ModelCollapse />'s prop `expanded` logic (via #5331)

* Add and apply default button classes, styling

* Update buttons to use custom component

* Fix breaking unit tests

* Replace button transition, replace EOF new-line

* Apply custom sui-btn-wrapper class

* Add span wrapper for button-text (allows us to apply em padding / margins on button element)

* security: CVE-2018-20834 (via #5368)

* bump minimum `bundlesize` version

* bump `node-sass`

* bump webpack + webpack-dev-server; update lockfile

* release: v3.22.2

* Abstract default classnames to Button component

* Use classnames lib where applicable

* Fix unit tests

* Tidy up, remove unused classnames

* eliminate `auth` class

* eliminate `authorize` class

* move `.sui-btn--authorize` to buttons stylesheet

* Remove duplicate import after merge

* Dropdown component set up

* Dropdown id & custom class props

* Dropdown disabled prop

* Basic DropDownItem, Updated Dropdown child classnames to not inherit modifer

* Layout-utils restucture

* Dropdown Basic controls

* Dropdown Labels

* Moved Dropdown to LayoutUtils

* Dropdowm relocation cleanup

* Dropdowm relocation cleanup P2

* Dropdown refs rough draft

* Dropdown movement controls

* Dropdown select option functionality

* Dropdown default selected value and default placeholder

* Add temporary dropdown icon - to be replaced by fontawesome

* Move clickhandler to li element

* Wrap dropdown text in span

* Update alter-hue mixin to accept custom degree

* Update dropdown styling

* Apply custom Dropdown to "schemes"

* Dropdown onChange

* Removed Dropdown labels

* Dropdown classname improvements

* IE/Edge specific keyboard event keys

* Removed onKeyPress

* Dropdown classname improvements

* Dropdown move item focus function

* Dropdown move item focus function update

* Replaced xclass with classnames

* Dropdown styling

* Dropdown seperate children function

* Dropdown icon

* Dropdown error handling - no children

* Dropdown no options available msg
---
 src/core/components/layout-utils.jsx          | 272 ---------------
 src/core/components/layout-utils/button.jsx   |  31 ++
 src/core/components/layout-utils/col.jsx      |  69 ++++
 src/core/components/layout-utils/collapse.jsx |  43 +++
 .../components/layout-utils/container.jsx     |  24 ++
 .../components/layout-utils/drop-down.jsx     | 316 ++++++++++++++++++
 src/core/components/layout-utils/icon.jsx     |  13 +
 src/core/components/layout-utils/index.js     |  12 +
 src/core/components/layout-utils/input.jsx    |   5 +
 src/core/components/layout-utils/link.jsx     |  15 +
 .../components/layout-utils/no-margin.jsx     |  10 +
 src/core/components/layout-utils/row.jsx      |  15 +
 src/core/components/layout-utils/select.jsx   |  70 ++++
 src/core/components/layout-utils/textarea.jsx |   5 +
 src/core/components/schemes.jsx               |  16 +-
 src/style/_dropdown.scss                      |  89 +++++
 src/style/_mixins.scss                        |   6 +-
 src/style/main.scss                           |   1 +
 18 files changed, 730 insertions(+), 282 deletions(-)
 delete mode 100644 src/core/components/layout-utils.jsx
 create mode 100644 src/core/components/layout-utils/button.jsx
 create mode 100644 src/core/components/layout-utils/col.jsx
 create mode 100644 src/core/components/layout-utils/collapse.jsx
 create mode 100644 src/core/components/layout-utils/container.jsx
 create mode 100644 src/core/components/layout-utils/drop-down.jsx
 create mode 100644 src/core/components/layout-utils/icon.jsx
 create mode 100644 src/core/components/layout-utils/index.js
 create mode 100644 src/core/components/layout-utils/input.jsx
 create mode 100644 src/core/components/layout-utils/link.jsx
 create mode 100644 src/core/components/layout-utils/no-margin.jsx
 create mode 100644 src/core/components/layout-utils/row.jsx
 create mode 100644 src/core/components/layout-utils/select.jsx
 create mode 100644 src/core/components/layout-utils/textarea.jsx
 create mode 100644 src/style/_dropdown.scss

diff --git a/src/core/components/layout-utils.jsx b/src/core/components/layout-utils.jsx
deleted file mode 100644
index 6879d83ed25..00000000000
--- a/src/core/components/layout-utils.jsx
+++ /dev/null
@@ -1,272 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-
-function xclass(...args) {
-  return args.filter(a => !!a).join(" ").trim()
-}
-
-export class Container extends React.Component {
-  render() {
-    let { fullscreen, full, ...rest } = this.props
-    // Normal element
-
-    if(fullscreen)
-      return <section {...rest}/>
-
-    let containerClass = "swagger-container" + (full ? "-full" : "")
-    return (
-      <section {...rest} className={xclass(rest.className, containerClass)}/>
-    )
-  }
-}
-
-Container.propTypes = {
-  fullscreen: PropTypes.bool,
-  full: PropTypes.bool,
-  className: PropTypes.string
-}
-
-const DEVICES = {
-  "mobile": "",
-  "tablet": "-tablet",
-  "desktop": "-desktop",
-  "large": "-hd"
-}
-
-export class Col extends React.Component {
-
-  render() {
-    const {
-      hide,
-      keepContents,
-      /* we don't want these in the `rest` object that passes to the final component,
-         since React now complains. So we extract them */
-      /* eslint-disable no-unused-vars */
-      mobile,
-      tablet,
-      desktop,
-      large,
-      /* eslint-enable no-unused-vars */
-      ...rest
-    } = this.props
-
-    if(hide && !keepContents)
-      return <span/>
-
-    let classesAr = []
-
-    for (let device in DEVICES) {
-      if (!DEVICES.hasOwnProperty(device)) {
-        continue
-      }
-      let deviceClass = DEVICES[device]
-      if(device in this.props) {
-        let val = this.props[device]
-
-        if(val < 1) {
-          classesAr.push("none" + deviceClass)
-          continue
-        }
-
-        classesAr.push("block" + deviceClass)
-        classesAr.push("col-" + val + deviceClass)
-      }
-    }
-
-    let classes = xclass(rest.className, ...classesAr)
-
-    return (
-      <section {...rest} style={{display: hide ? "none": null}} className={classes}/>
-    )
-  }
-
-}
-
-Col.propTypes = {
-  hide: PropTypes.bool,
-  keepContents: PropTypes.bool,
-  mobile: PropTypes.number,
-  tablet: PropTypes.number,
-  desktop: PropTypes.number,
-  large: PropTypes.number,
-  className: PropTypes.string
-}
-
-export class Row extends React.Component {
-
-  render() {
-    return <div {...this.props} className={xclass(this.props.className, "wrapper")} />
-  }
-
-}
-
-Row.propTypes = {
-  className: PropTypes.string
-}
-
-export class Button extends React.Component {
-
-  static propTypes = {
-    className: PropTypes.string,
-    unstyled: PropTypes.bool,
-    mod: PropTypes.string
-  }
-
-  static defaultProps = {
-    className: "",
-    unstyled: false,
-    mod: "primary"
-  }
-
-  defaultClasses = ({ unstyled, mod }) => !unstyled ? `sui-btn sui-btn--${mod}` : ""
-
-  render() {
-    const { unstyled, mod, className, ...props } = this.props
-    
-    return (
-      <button
-        {...props}
-        className={xclass(className, this.defaultClasses({ unstyled, mod }))}    
-      />
-    )
-  }
-}
-
-export const Icon = ({ icon, className, ...props }) => (
-  <span {...props} className={`${className} icon icon-${icon}`}/>
-)
-
-Icon.propTypes = {
-  icon: PropTypes.string.isRequired,
-  className: PropTypes.string,
-}
-
-
-export const TextArea = (props) => <textarea {...props} />
-
-export const Input = (props) => <input {...props} />
-
-export class Select extends React.Component {
-  static propTypes = {
-    allowedValues: PropTypes.array,
-    value: PropTypes.any,
-    onChange: PropTypes.func,
-    multiple: PropTypes.bool,
-    allowEmptyValue: PropTypes.bool,
-    className: PropTypes.string
-  }
-
-  static defaultProps = {
-    multiple: false,
-    allowEmptyValue: true
-  }
-
-  constructor(props, context) {
-    super(props, context)
-
-    let value
-
-    if (props.value) {
-      value = props.value
-    } else {
-      value = props.multiple ? [""] : ""
-    }
-
-    this.state = { value: value }
-  }
-
-  onChange = (e) => {
-    let { onChange, multiple } = this.props
-    let options = [].slice.call(e.target.options)
-    let value
-
-
-    if (multiple) {
-      value = options.filter(function (option) {
-          return option.selected
-        })
-        .map(function (option){
-          return option.value
-        })
-    } else {
-      value = e.target.value
-    }
-
-    this.setState({value: value})
-
-    onChange && onChange(value)
-  }
-
-  render(){
-    let { allowedValues, multiple, allowEmptyValue } = this.props
-    let value = this.state.value.toJS ? this.state.value.toJS() : this.state.value
-
-    return (
-      <select className={this.props.className} multiple={ multiple } value={ value } onChange={ this.onChange } >
-        { allowEmptyValue ? <option value="">--</option> : null }
-        {
-          allowedValues.map(function (item, key) {
-            return <option key={ key } value={ String(item) }>{ String(item) }</option>
-          })
-        }
-      </select>
-    )
-  }
-}
-
-export class Link extends React.Component {
-
-  render() {
-    return <a {...this.props} rel="noopener noreferrer" className={xclass(this.props.className, "link")}/>
-  }
-
-}
-
-Link.propTypes = {
-  className: PropTypes.string
-}
-
-const NoMargin = ({children}) => <div style={{height: "auto", border: "none", margin: 0, padding: 0}}> {children} </div>
-
-NoMargin.propTypes = {
-  children: PropTypes.node
-}
-
-export class Collapse extends React.Component {
-
-  static propTypes = {
-    isOpened: PropTypes.bool,
-    children: PropTypes.node.isRequired,
-    animated: PropTypes.bool
-  }
-
-  static defaultProps = {
-    isOpened: false,
-    animated: false
-  }
-
-  renderNotAnimated() {
-    if(!this.props.isOpened)
-      return <noscript/>
-    return (
-      <NoMargin>
-        {this.props.children}
-      </NoMargin>
-    )
-  }
-
-  render() {
-    let { animated, isOpened, children } = this.props
-
-    if(!animated)
-      return this.renderNotAnimated()
-
-    children = isOpened ? children : null
-    return (
-      <NoMargin>
-        {children}
-      </NoMargin>
-    )
-  }
-
-}
diff --git a/src/core/components/layout-utils/button.jsx b/src/core/components/layout-utils/button.jsx
new file mode 100644
index 00000000000..fc0f7b958be
--- /dev/null
+++ b/src/core/components/layout-utils/button.jsx
@@ -0,0 +1,31 @@
+import React from "react"
+import PropTypes from "prop-types"
+import cx from "classnames"
+
+export default class Button extends React.Component {
+
+  static propTypes = {
+    className: PropTypes.string,
+    unstyled: PropTypes.bool,
+    mod: PropTypes.string
+  }
+
+  static defaultProps = {
+    className: "",
+    unstyled: false,
+    mod: "primary"
+  }
+
+  defaultClasses = ({ unstyled, mod }) => !unstyled ? `sui-btn sui-btn--${mod}` : ""
+
+  render() {
+    const { unstyled, mod, className, ...props } = this.props
+
+    return (
+      <button
+        {...props}
+        className={cx(className, this.defaultClasses({ unstyled, mod }))}
+      />
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/core/components/layout-utils/col.jsx b/src/core/components/layout-utils/col.jsx
new file mode 100644
index 00000000000..6bc4e2c9079
--- /dev/null
+++ b/src/core/components/layout-utils/col.jsx
@@ -0,0 +1,69 @@
+import React from "react"
+import PropTypes from "prop-types"
+import cx from "classnames"
+
+const DEVICES = {
+  "mobile": "",
+  "tablet": "-tablet",
+  "desktop": "-desktop",
+  "large": "-hd"
+}
+
+export default class Col extends React.Component {
+
+  render() {
+    const {
+      hide,
+      keepContents,
+      /* we don't want these in the `rest` object that passes to the final component,
+         since React now complains. So we extract them */
+      /* eslint-disable no-unused-vars */
+      mobile,
+      tablet,
+      desktop,
+      large,
+      /* eslint-enable no-unused-vars */
+      ...rest
+    } = this.props
+
+    if(hide && !keepContents)
+      return <span/>
+
+    let classesAr = []
+
+    for (let device in DEVICES) {
+      if (!DEVICES.hasOwnProperty(device)) {
+        continue
+      }
+      let deviceClass = DEVICES[device]
+      if(device in this.props) {
+        let val = this.props[device]
+
+        if(val < 1) {
+          classesAr.push("none" + deviceClass)
+          continue
+        }
+
+        classesAr.push("block" + deviceClass)
+        classesAr.push("col-" + val + deviceClass)
+      }
+    }
+
+    let classes = cx(rest.className, classesAr.join(" "))
+
+    return (
+      <section {...rest} style={{display: hide ? "none": null}} className={classes}/>
+    )
+  }
+
+}
+
+Col.propTypes = {
+  hide: PropTypes.bool,
+  keepContents: PropTypes.bool,
+  mobile: PropTypes.number,
+  tablet: PropTypes.number,
+  desktop: PropTypes.number,
+  large: PropTypes.number,
+  className: PropTypes.string
+}
diff --git a/src/core/components/layout-utils/collapse.jsx b/src/core/components/layout-utils/collapse.jsx
new file mode 100644
index 00000000000..2b707cec532
--- /dev/null
+++ b/src/core/components/layout-utils/collapse.jsx
@@ -0,0 +1,43 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { NoMargin } from "components/layout-utils"
+
+export default class Collapse extends React.Component {
+
+  static propTypes = {
+    isOpened: PropTypes.bool,
+    children: PropTypes.node.isRequired,
+    animated: PropTypes.bool
+  }
+
+  static defaultProps = {
+    isOpened: false,
+    animated: false
+  }
+
+  renderNotAnimated() {
+    if(!this.props.isOpened)
+      return <noscript/>
+    return (
+      <NoMargin>
+        {this.props.children}
+      </NoMargin>
+    )
+  }
+
+  render() {
+    let { animated, isOpened, children } = this.props
+
+    if(!animated)
+      return this.renderNotAnimated()
+
+    children = isOpened ? children : null
+    return (
+      <NoMargin>
+        {children}
+      </NoMargin>
+    )
+  }
+
+}
+
diff --git a/src/core/components/layout-utils/container.jsx b/src/core/components/layout-utils/container.jsx
new file mode 100644
index 00000000000..5d540ee5e73
--- /dev/null
+++ b/src/core/components/layout-utils/container.jsx
@@ -0,0 +1,24 @@
+import React from "react"
+import PropTypes from "prop-types"
+import cx from "classnames"
+
+export default class Container extends React.Component {
+  render() {
+    let { fullscreen, full, ...rest } = this.props
+    // Normal element
+
+    if(fullscreen)
+      return <section {...rest}/>
+
+    let containerClass = "swagger-container" + (full ? "-full" : "")
+    return (
+      <section {...rest} className={cx(rest.className, containerClass)}/>
+    )
+  }
+}
+
+Container.propTypes = {
+  fullscreen: PropTypes.bool,
+  full: PropTypes.bool,
+  className: PropTypes.string
+}
\ No newline at end of file
diff --git a/src/core/components/layout-utils/drop-down.jsx b/src/core/components/layout-utils/drop-down.jsx
new file mode 100644
index 00000000000..167e70f68c8
--- /dev/null
+++ b/src/core/components/layout-utils/drop-down.jsx
@@ -0,0 +1,316 @@
+import React, { Component, PureComponent } from "react"
+import PropTypes from "prop-types"
+import cx from "classnames"
+
+import { Icon } from "components/layout-utils"
+
+
+export default class DropDown extends PureComponent {
+
+  static propTypes = {
+    id: PropTypes.string,
+    value: PropTypes.string,
+    placeholder: PropTypes.string,
+    mod: PropTypes.string,
+    disabled: PropTypes.bool,
+    onChange: PropTypes.func,
+    children: PropTypes.node.isRequired
+  }
+
+  static defaultProps = {
+    placeholder: "Select"
+  }
+
+  constructor(props) {
+    super(props)
+
+    let selectedKey = null
+    this.setButtonRef = (instance) => this.buttonRef = instance
+    this.childCount = Math.max(0, React.Children.count(this.props.children) - 1)
+    this.childRefCollection = {}
+    this.setChildRefCollection = {}
+
+    React.Children.forEach(this.props.children, (child, i) => {
+      if(child.props.value === props.value) {
+        selectedKey = i
+      }
+      this.setChildRefCollection[i] = (instance) => { 
+        return this.childRefCollection[i] = instance
+      }
+    })
+
+    this.state = {
+      expanded: false,
+      activeKey: null,
+      selectedKey
+    }
+  }
+
+  componentDidMount() {
+    document.addEventListener("click", this.onClickDoc, true)
+  }
+
+  componentDidUpdate() {
+    const { activeKey, expanded } = this.state
+
+    if(expanded && this.childCount) {
+      return this.setFocusChild(activeKey)
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("click", this.onClickDoc, true)
+  }
+
+  setChildRef = (key, originalRef) => {
+    return ((...args) => {
+      this.setChildRefCollection[key](args[0])
+
+      if (originalRef) {
+        originalRef.apply(null, args)
+      }
+    })
+  }
+
+  setFocus = () => this.buttonRef.focus()
+
+  setFocusChild = (key) => this.childRefCollection[key].setFocus()
+
+  openDropdown = () => this.setState((state) => {
+    const activeKey = state.selectedKey || 0
+
+    return { 
+      expanded: true,
+      activeKey 
+    }  
+  })
+
+  closeDropdown = (key) => {
+    const hasSelected = key || key === 0 
+
+    if(hasSelected && this.props.onChange) {
+      this.props.onChange(this.childRefCollection[key].getValue())
+    }
+
+    this.setState((state) => { 
+      const selectedKey = hasSelected
+        ? key
+        : state.selectedKey
+
+      return { 
+        expanded: false,
+        selectedKey
+      }
+    })
+    this.setFocus()
+  }
+
+  moveItemFocus = (key) => this.setState({ activeKey: key })
+
+  onClickDoc = (e) => {
+    const clickedChild = Object.values(this.childRefCollection).find((ref) => 
+      ref.listItemRef.contains(e.target)
+    )
+
+    if (!this.buttonRef.contains(e.target) && !clickedChild) {
+        this.setState({
+          expanded: false
+        })
+    }
+  }
+
+  onClick = () => {
+    const { expanded } = this.state
+
+    if(expanded) {
+      return this.closeDropdown()
+    }
+    this.openDropdown()
+  }
+
+  onClickChild = (key) => this.closeDropdown(key)
+
+  onKeyPress = (e) => {
+    e.preventDefault()
+
+    switch (e.key)
+    {
+      case "Up":
+      case "ArrowUp":
+        this.openDropdown()
+        break
+      case "Down":
+      case "ArrowDown":
+        this.openDropdown()
+        break
+      case "Enter":
+      case " ":
+        this.openDropdown()
+        break
+      case "Esc":
+      case "Escape":
+        this.closeDropdown()
+        break
+    }
+  }
+
+  onKeyPressChild = (e, key) => {
+    e.preventDefault()
+
+    const { activeKey } = this.state
+
+    switch (e.key)
+    {
+      case "Up":
+      case "ArrowUp":
+        this.moveItemFocus(activeKey === 0
+          ? activeKey
+          : activeKey - 1)
+        break
+      case "Down":
+      case "ArrowDown":
+        this.moveItemFocus(activeKey === this.childCount
+          ? activeKey
+          : activeKey + 1)
+          break
+      case "Enter":
+      case " ":
+        this.closeDropdown(key)
+        break
+      case "Esc":
+      case "Escape":
+        this.closeDropdown()
+        break
+      case "Home":
+        this.moveItemFocus(0)
+        break
+      case "End":
+        this.moveItemFocus(this.childCount)
+        break
+    }
+  }
+
+  buttonContent = () => { 
+    const { selectedKey } = this.state
+    const { placeholder } = this.props
+
+    return this.childRefCollection[selectedKey]
+      ? this.childRefCollection[selectedKey].getContent()
+      : placeholder
+  }
+
+  children = () => React.Children.map(this.props.children, (child, i) => {
+    const ref = this.setChildRef(i, child.ref)
+
+    return React.cloneElement(child, {
+      ref,
+      optionKey: i,
+      onKeyPress: this.onKeyPressChild,
+      onSelect: this.onClickChild
+    })
+  })
+
+  noChildrenItem = () => <DropDownItem mod="disabled">No options available</DropDownItem>
+  
+  render() {
+    const { id, disabled, mod } = this.props
+    const { expanded } = this.state
+    const className = "sui-dropdown"
+    const buttonIcon = expanded ? "angle-up-light" : "angle-down-light"
+
+    return (
+      <div
+        id={id}
+        className={cx(className, { 
+          [`${className}--expanded`] : expanded,
+          [`${className}--${mod}`] : mod 
+        })}
+      >
+        <button
+          className={`${className}__button`}
+          aria-haspopup={"listbox"}
+          aria-expanded={expanded}
+          aria-disabled={disabled}
+          onClick={this.onClick}
+          onKeyDown={this.onKeyPress}
+          ref={this.setButtonRef}
+          disabled={disabled}
+        >
+          <span>{this.buttonContent()}</span>
+          <Icon icon={buttonIcon}/>
+        </button>
+        <ul
+          className={`${className}__menu`}
+          role="listbox"
+          tabIndex="-1"
+        >
+        {this.children() || this.noChildrenItem()} 
+        </ul>
+      </div>
+			)
+  }
+}
+
+
+export class DropDownItem extends Component {
+
+  static propTypes = {
+    id: PropTypes.string,
+    mod: PropTypes.string,
+    value: PropTypes.string,
+    optionKey: PropTypes.any,
+    onSelect: PropTypes.func,
+    onKeyPress: PropTypes.func,
+    children: PropTypes.node.isRequired
+  }
+
+  constructor() {
+    super()
+    this.setRef = (instance) => this.listItemRef = instance
+  }
+
+  setFocus = () => this.listItemRef.focus()
+
+  getContent = () => this.props.children
+
+  getValue = () => this.props.value
+
+  onClick = () => {
+    const { onSelect, optionKey } = this.props
+    
+    if(onSelect) { 
+      onSelect(optionKey)
+    }
+  }
+
+  onKeyPress = (e) => {
+    const { onKeyPress, optionKey } = this.props
+    
+    if(onKeyPress) { 
+      onKeyPress(e, optionKey)
+    }
+  }
+    
+  render () {
+    const { children, id, mod } = this.props
+    const className = "sui-dropdown__menu__item"
+    
+    return (
+      <li
+        id={id}
+        role="option"
+        className={cx(className, {
+          [`${className}--${mod}`] : mod
+        })}
+        ref={this.setRef}
+        tabIndex="0"
+        onClick={this.onClick}
+        onKeyDown={this.onKeyPress}
+      >
+        <div>
+          {children}
+        </div>
+      </li>
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/core/components/layout-utils/icon.jsx b/src/core/components/layout-utils/icon.jsx
new file mode 100644
index 00000000000..83fd80b9fd1
--- /dev/null
+++ b/src/core/components/layout-utils/icon.jsx
@@ -0,0 +1,13 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const Icon = ({ icon, className, ...props }) => (
+  <span {...props} className={`${className} icon icon-${icon}`}/>
+)
+
+Icon.propTypes = {
+  icon: PropTypes.string.isRequired,
+  className: PropTypes.string,
+}
+
+export default Icon
\ No newline at end of file
diff --git a/src/core/components/layout-utils/index.js b/src/core/components/layout-utils/index.js
new file mode 100644
index 00000000000..118941f6d6b
--- /dev/null
+++ b/src/core/components/layout-utils/index.js
@@ -0,0 +1,12 @@
+export { default as Button } from "./button"
+export { default as Col } from "./col"
+export { default as Collapse } from "./collapse"
+export { default as Container } from "./container"
+export { default as DropDown, DropDownItem } from "./drop-down"
+export { default as Input } from "./input"
+export { default as Link } from "./link"
+export { default as NoMargin } from "./no-margin"
+export { default as Row } from "./row"
+export { default as Select } from "./select"
+export { default as TextArea } from "./textarea"
+export { default as Icon } from "./icon"
diff --git a/src/core/components/layout-utils/input.jsx b/src/core/components/layout-utils/input.jsx
new file mode 100644
index 00000000000..ceda62f82b3
--- /dev/null
+++ b/src/core/components/layout-utils/input.jsx
@@ -0,0 +1,5 @@
+import React from "react"
+
+const Input = (props) => <input {...props} />
+
+export default Input
\ No newline at end of file
diff --git a/src/core/components/layout-utils/link.jsx b/src/core/components/layout-utils/link.jsx
new file mode 100644
index 00000000000..92099ce5ac1
--- /dev/null
+++ b/src/core/components/layout-utils/link.jsx
@@ -0,0 +1,15 @@
+import React from "react"
+import PropTypes from "prop-types"
+import cx from "classnames"
+
+export default class Link extends React.Component {
+
+  render() {
+    return <a {...this.props} rel="noopener noreferrer" className={cx(this.props.className, "link")}/>
+  }
+  
+}
+
+Link.propTypes = {
+  className: PropTypes.string
+}
\ No newline at end of file
diff --git a/src/core/components/layout-utils/no-margin.jsx b/src/core/components/layout-utils/no-margin.jsx
new file mode 100644
index 00000000000..dfb8b254382
--- /dev/null
+++ b/src/core/components/layout-utils/no-margin.jsx
@@ -0,0 +1,10 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const NoMargin = ({children}) => <div style={{height: "auto", border: "none", margin: 0, padding: 0}}> {children} </div>
+
+NoMargin.propTypes = {
+  children: PropTypes.node
+}
+
+export default NoMargin
\ No newline at end of file
diff --git a/src/core/components/layout-utils/row.jsx b/src/core/components/layout-utils/row.jsx
new file mode 100644
index 00000000000..ddedc0ab686
--- /dev/null
+++ b/src/core/components/layout-utils/row.jsx
@@ -0,0 +1,15 @@
+import React from "react"
+import PropTypes from "prop-types"
+import cx from "classnames"
+
+export default class Row extends React.Component {
+
+  render() {
+    return <div {...this.props} className={cx(this.props.className, "wrapper")} />
+  }
+
+}
+
+Row.propTypes = {
+  className: PropTypes.string
+}
\ No newline at end of file
diff --git a/src/core/components/layout-utils/select.jsx b/src/core/components/layout-utils/select.jsx
new file mode 100644
index 00000000000..c91ddf43fdc
--- /dev/null
+++ b/src/core/components/layout-utils/select.jsx
@@ -0,0 +1,70 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class Select extends React.Component {
+  static propTypes = {
+    allowedValues: PropTypes.array,
+    value: PropTypes.any,
+    onChange: PropTypes.func,
+    multiple: PropTypes.bool,
+    allowEmptyValue: PropTypes.bool,
+    className: PropTypes.string
+  }
+
+  static defaultProps = {
+    multiple: false,
+    allowEmptyValue: true
+  }
+
+  constructor(props, context) {
+    super(props, context)
+
+    let value
+
+    if (props.value) {
+      value = props.value
+    } else {
+      value = props.multiple ? [""] : ""
+    }
+
+    this.state = { value: value }
+  }
+
+  onChange = (e) => {
+    let { onChange, multiple } = this.props
+    let options = [].slice.call(e.target.options)
+    let value
+
+
+    if (multiple) {
+      value = options.filter(function (option) {
+          return option.selected
+        })
+        .map(function (option){
+          return option.value
+        })
+    } else {
+      value = e.target.value
+    }
+
+    this.setState({value: value})
+
+    onChange && onChange(value)
+  }
+
+  render(){
+    let { allowedValues, multiple, allowEmptyValue } = this.props
+    let value = this.state.value.toJS ? this.state.value.toJS() : this.state.value
+
+    return (
+      <select className={this.props.className} multiple={ multiple } value={ value } onChange={ this.onChange } >
+        { allowEmptyValue ? <option value="">--</option> : null }
+        {
+          allowedValues.map(function (item, key) {
+            return <option key={ key } value={ String(item) }>{ String(item) }</option>
+          })
+        }
+      </select>
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/core/components/layout-utils/textarea.jsx b/src/core/components/layout-utils/textarea.jsx
new file mode 100644
index 00000000000..8f7995d9953
--- /dev/null
+++ b/src/core/components/layout-utils/textarea.jsx
@@ -0,0 +1,5 @@
+import React from "react"
+
+const TextArea = (props) => <textarea {...props} />
+
+export default TextArea
\ No newline at end of file
diff --git a/src/core/components/schemes.jsx b/src/core/components/schemes.jsx
index 554c7d6ecee..a0ee7b90b4e 100644
--- a/src/core/components/schemes.jsx
+++ b/src/core/components/schemes.jsx
@@ -1,5 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
+import { DropDown, DropDownItem } from "components/layout-utils"
+
 
 export default class Schemes extends React.Component {
 
@@ -8,7 +10,7 @@ export default class Schemes extends React.Component {
     schemes: PropTypes.object.isRequired,
     currentScheme: PropTypes.string.isRequired,
     path: PropTypes.string,
-    method: PropTypes.string,
+    method: PropTypes.string
   }
 
   componentWillMount() {
@@ -26,8 +28,8 @@ export default class Schemes extends React.Component {
     }
   }
 
-  onChange =( e ) => {
-    this.setScheme( e.target.value )
+  onChange = ( value ) => {
+    this.setScheme( value )
   }
 
   setScheme = ( value ) => {
@@ -42,11 +44,11 @@ export default class Schemes extends React.Component {
     return (
       <label htmlFor="schemes">
         <span className="schemes-title">Schemes</span>
-        <select onChange={ this.onChange } value={currentScheme}>
+        <DropDown displayLable={true} label="Schemes" mod="schemes" onChange={ this.onChange } value={currentScheme}>
           { schemes.valueSeq().map(
-            ( scheme ) => <option value={ scheme } key={ scheme }>{ scheme }</option>
-          ).toArray()}
-        </select>
+            ( scheme ) => <DropDownItem value={ scheme } key={ scheme }>{ scheme }</DropDownItem>
+          )}
+        </DropDown>
       </label>
     )
   }
diff --git a/src/style/_dropdown.scss b/src/style/_dropdown.scss
new file mode 100644
index 00000000000..dac4b68243f
--- /dev/null
+++ b/src/style/_dropdown.scss
@@ -0,0 +1,89 @@
+.sui-dropdown {
+	background: $color-white;
+	position: relative;
+	display: inline-block;
+	min-width: 11em;
+
+	&__button {
+		height: 3em;
+		border-radius: .4em;
+		border: 1px solid $color-bright-silver;
+		background: inherit;
+		padding: 0 .5em 0 1.5em;
+		display: flex;
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
+	
+		span {
+			@include medium_text($size: $md-text-font-size);
+
+			&:first-of-type {
+				margin-right: .5em;
+			}
+		}
+	}
+
+	&__menu {
+		display: none;
+	}
+}
+
+.sui-dropdown--expanded {
+
+	.sui-dropdown__menu {
+		background: inherit;
+		position: absolute;
+		display: block;
+		list-style: none;
+		width: fit-content;
+		min-width: 100%;
+		padding: 0;
+		margin: .1em 0;
+
+		&__item {
+			margin: 0;
+			padding: 0 1.5em;
+			width: max-content;
+			min-width: 100%;
+			height: 3em;
+			display: flex;
+			align-items: center;
+			border: 1px solid $color-bright-silver;
+			border-top: none;
+			cursor: pointer;
+
+			div {
+				@include medium_text($size: $md-text-font-size);
+			}
+
+			&:not(.sui-dropdown__menu__item--disabled) {
+
+				&:hover, &:focus {
+					background: alter-hue($color-white, 5%);
+				}
+			}
+
+			&:focus {
+				outline: none;
+			}
+
+			&:first-child {
+				border-top-left-radius: 4px;
+				border-top-right-radius: 4px;
+				border-top: 1px solid $color-bright-silver;
+			}
+
+			&:last-child {
+				border-bottom-left-radius: 4px;
+				border-bottom-right-radius: 4px;
+			}
+		}
+	}
+}
+
+.sui-dropdown--schemes {
+	* {
+		text-transform: uppercase;
+	}
+}
diff --git a/src/style/_mixins.scss b/src/style/_mixins.scss
index 6dee791e7f4..3fc49d2afe1 100644
--- a/src/style/_mixins.scss
+++ b/src/style/_mixins.scss
@@ -126,11 +126,11 @@ $browser-context: 16;
     @return $pixels / $context * 1em;
 }
 
-@function alter-hue($color) {
+@function alter-hue($color, $degree: 10%) {
     @if (lightness($color) > 50) {
-      @return darken($color, 10%);
+      @return darken($color, $degree);
     } @else {
-      @return lighten($color, 10%);
+      @return lighten($color, $degree);
     }
   }
 
diff --git a/src/style/main.scss b/src/style/main.scss
index 84c5ca75eed..00b5901dbac 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -10,6 +10,7 @@ section.swagger-ui
     @import 'type';
     @import 'layout';
     @import 'buttons';
+    @import 'dropdown';
     @import 'form';
     @import 'modal';
     @import 'models';