Merge branch 'development'

developer/components/badge.md

@@ -0,0 +1,38 @@
+# Badge
+
+## Import
+
+```javascript
+import { Badge } from "/imports/plugins/core/ui/client/components";
+```
+
+## Usage Example
+
+```javascript
+import React, { Component } from "react";
+import { Badge } from "/imports/plugins/core/ui/client/components";
+
+class MyReactComponent extends Component
+  return (
+    <Badge
+      badgeSize="large"
+      className="single class, or array of classes"
+      i18nKeyLabel="some.key"
+      label="My Button"
+      status="success"    
+    />
+  )
+};
+
+export default MyReactComponent;
+```
+
+## Props
+
+Property             | Type                      | Description
+-------------------- | ------------------------- | ---------------------------
+badgeSize            | String                    | Badge size. Defaults to small. `small | large`
+className            | String, Object            | "class-name", or { "class-name": true }
+i18nKeyLabel         | String                    | i18n key for badge label (shows in badge)
+label                | String                    | Button label
+status               | String                    | Sets badge state with a string. `primary | success | info | warning | danger | link | cta | default`

developer/components/clickToCopy.md

@@ -0,0 +1,38 @@
+# ClickToCopy
+
+## Import
+
+```javascript
+import { ClickToCopy } from "/imports/plugins/core/ui/client/components";
+```
+
+## Usage Example
+
+```javascript
+import React, { Component } from "react";
+import { ClickToCopy } from "/imports/plugins/core/ui/client/components";
+
+class MyReactComponent extends Component
+  return (
+    <ClickToCopy
+      copyToClipboard="string to copy to clipboard"
+      displayText="text to display to user"
+      i18nKeyTooltip="some.key"
+      tooltip="placeholder tooltip text"
+      tooltipPosition="bottom center"
+    />
+  )
+};
+
+export default MyReactComponent;
+```
+
+## Props
+
+Property             | Type                      | Description
+-------------------- | ------------------------- | ---------------------------
+copyToClipboard      | String                    | String to copy to clipboard on click (i.e. URL for Order)
+displayText          | String                    | Text displayed to user (e.g. Order ID #)
+i18nKeyTooltip       | String                    | i18n key for tooltip
+tooltip              | String, Object, Component | Tooltip
+tooltipPosition      | String                    | Tooltip position. Default `bottom center`

developer/components/dropDownMenu.md

@@ -55,10 +55,13 @@ export default MyReactComponent;
 
 ## Props
 
-Property      | Type                    | Description
-------------- | ----------------------- | ----------------------------------------------------------------------
-buttonElement | React Node              | Custom button element (optional) Default is a button with a down arrow
-attachment    | String                  | default value: `"top"`
-children      | Node                    | Menu items, preferably `MenuItem`
-onChange      | Function                | Dropdown menu change. `(event, value, menuItem) => {}`
-value         | String, Boolean, Number | A String, Boolean, or Number value
+Property        | Type                    | Description
+--------------- | ----------------------- | ----------------------------------------------------------------------
+attachment      | String                  | default value: `"top"`
+buttonElement   | React Node              | Custom button element (optional) Default is a button with a down arrow
+children        | Node                    | Menu items, preferably `MenuItem`
+className       | String, Object          | Custom class names can be a string, or object `{"class-name": true}`
+menuStyle       | Object                  | Style object to custom style your menu
+onChange        | Function                | Dropdown menu change. `(event, value, menuItem) => {}`
+value           | String, Boolean, Number | A String, Boolean, or Number value
+targetAttachment| String                  | default value: `"top left"`

developer/components/menu.md

@@ -59,7 +59,9 @@ Property   | Type                    | Description
 ---------- | ----------------------- | ----------------------------------------------
 attachment | String                  | default value: `"top"`
 children   | Node                    | Menu items, preferably `MenuItem`
+className  | String, Object          | Custom class names can be a string, or object `{"class-name": true}`
 onChange   | Function                | Input change. `(event, value, menuItem) => {}`
+style      | Object                  | Custom style for menu
 value      | String, Boolean, Number | A `String`, `Boolean`, or `Number` value
 
 # Menu Item Props
@@ -74,6 +76,7 @@ eventAction          | String         | Adds `data-event-action="yourAction"` at
 i18nKeyLabel         | String         | Key for i18n translation for label
 i18nKeySelectedLabel | String         | Key for i18n translation for selected label (implementation required)
 icon                 | String         | Name of [font awesome](https://fortawesome.github.io/Font-Awesome/) icon
+iconStyle            | Object         | Custom style for icons displayed 
 label                | String         | Label for menu item
 onClick              | Function       | On menu item click. `(event, value, menuItem) => {}`
 selectionLabel       | String         | Selected label for menu button (implementation required)

developer/installation.md

@@ -1,5 +1,7 @@
 # Installation
 
+[![Installation Video](/assets/guide-installation-video-screenshot.png)](https://www.youtube.com/watch?v=PkFDX8NWskY)
+
 Review and install the [Reaction requirements.](https://docs.reactioncommerce.com/reaction-docs/development/requirements).
 
 To install and run Reaction locally in development mode:
@@ -26,7 +28,9 @@ reaction
 reaction run
 ```
 
-_The initial admin user for the site is auto generated, and displayed in your console (or see: env variables section to default these)_ ![](/assets/guide-installation-default-user.png)
+_The initial admin user for the site is auto generated, and displayed in your console (or see: env variables section to default these)_
+
+![](/assets/guide-installation-default-user.png)
 
 Sample data is loaded on a new installation from `private/data`. This can take some time depending on your system.
 

redoc.json

@@ -478,6 +478,9 @@
   }, {
     "label": "Alerts",
     "docPath": "developer/components/alerts.md"
+  }, {
+    "label": "Badge",
+    "docPath": "developer/components/badge.md"
   }, {
     "label": "Button",
     "docPath": "developer/components/button.md"
@@ -487,6 +490,9 @@
   }, {
     "label": "Checkbox",
     "docPath": "developer/components/checkbox.md"
+  }, {
+    "label": "Click To Copy",
+    "docPath": "developer/components/clickToCopy.md"
   }, {
     "label": "Divider",
     "docPath": "developer/components/divider.md"