demonstrate clipboard setup in styleguide-app

package-lock.json

@@ -778,6 +778,17 @@
         }
       }
     },
+    "clipboard": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
+      "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+      "dev": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -1056,6 +1067,12 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "dev": true
+    },
     "deps-sort": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/deps-sort/-/deps-sort-2.0.0.tgz",
@@ -2046,6 +2063,15 @@
         "is-glob": "^2.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "dev": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
@@ -3708,6 +3734,12 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "dev": true
+    },
     "set-value": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
@@ -4146,6 +4178,12 @@
         "process": "~0.11.0"
       }
     },
+    "tiny-emitter": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
+      "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==",
+      "dev": true
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",

package.json

@@ -28,6 +28,7 @@
     "browserify": "16.2.3",
     "elm": "0.19.0",
     "elm-format": "0.8.1",
-    "elm-test": "0.19.0-rev3"
+    "elm-test": "0.19.0-rev3",
+    "clipboard": "2.0.4"
   }
 }

styleguide-app/Examples/Button.elm

@@ -8,11 +8,12 @@ import Css exposing (middle, verticalAlign)
 import Debug.Control as Control exposing (Control)
 import Headings
 import Html.Styled exposing (..)
-import Html.Styled.Attributes exposing (css)
+import Html.Styled.Attributes exposing (css, id)
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample, ModuleMessages)
 import Nri.Ui.AssetPath exposing (Asset)
 import Nri.Ui.Button.V7 as Button
 import Nri.Ui.Icon.V4 as Icon
+import Nri.Ui.Text.V2 as Text
 
 
 {-| -}
@@ -121,9 +122,21 @@ viewButtonExamples assets messages (State control) =
     let
         model =
             Control.currentValue control
+
+        maybeExplanation =
+            if model.buttonType == CopyToClipboard then
+                div [ css [ Css.margin2 (Css.px 10) Css.zero ] ]
+                    [ Text.smallBody
+                        [ text "CopyToClipboard requires 'clipboard.js'. See assets/clipboard-setup.js for example configuration."
+                        ]
+                    ]
+
+            else
+                text ""
     in
     [ Control.view (State >> SetState >> messages.wrapper) control
         |> fromUnstyled
+    , maybeExplanation
     , buttons assets messages model
     , toggleButtons messages
     , Button.delete assets
@@ -207,7 +220,8 @@ buttons assets messages model =
                         }
 
                 CopyToClipboard ->
-                    Button.copyToClipboard
+                    div [ id "clipboard-container" ]
+                        [ Button.copyToClipboard
                             assets
                             { size = size
                             , style = style
@@ -216,6 +230,7 @@ buttons assets messages model =
                             , withIcon = model.icon /= Nothing
                             , width = model.width
                             }
+                        ]
             )
                 |> List.singleton
                 |> td [ css [ verticalAlign middle ] ]

styleguide-app/assets/clipboard-setup.js

@@ -0,0 +1,4 @@
+var ClipboardJS = require('clipboard')
+
+// Used to configure the copyToClipboard button
+clipboard = new ClipboardJS("#clipboard-container button");

styleguide-app/manifest.js

@@ -1,2 +1,3 @@
 require('../lib/index.js')
 require('./assets/generated_svgs.js')
+require('./assets/clipboard-setup.js')