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

Author: taraokelly

src/core/components/layout-utils.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 }))}
+      />
+    )
+  }
+}

src/core/components/layout-utils/button.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
+}