From f2e9925b2ec293dbdf9968cad55517bb12c5aa1b Mon Sep 17 00:00:00 2001 From: Brooke Angel Date: Thu, 13 Dec 2018 12:59:35 -0800 Subject: [PATCH] demonstrate clipboard setup in styleguide-app --- package-lock.json | 38 ++++++++++++++++++++++++ package.json | 3 +- styleguide-app/Examples/Button.elm | 35 +++++++++++++++------- styleguide-app/assets/clipboard-setup.js | 4 +++ styleguide-app/manifest.js | 1 + 5 files changed, 70 insertions(+), 11 deletions(-) create mode 100644 styleguide-app/assets/clipboard-setup.js diff --git a/package-lock.json b/package-lock.json index 1a223984..0ec27a25 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 982d43cb..35caee53 100644 --- a/package.json +++ b/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" } } diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index 3442dd7e..763a5fd7 100644 --- a/styleguide-app/Examples/Button.elm +++ b/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,15 +220,17 @@ buttons assets messages model = } CopyToClipboard -> - Button.copyToClipboard - assets - { size = size - , style = style - , copyText = "wire up in your coffee file with clipboard.js" - , buttonLabel = model.label - , withIcon = model.icon /= Nothing - , width = model.width - } + div [ id "clipboard-container" ] + [ Button.copyToClipboard + assets + { size = size + , style = style + , copyText = "wire up in your coffee file with clipboard.js" + , buttonLabel = model.label + , withIcon = model.icon /= Nothing + , width = model.width + } + ] ) |> List.singleton |> td [ css [ verticalAlign middle ] ] diff --git a/styleguide-app/assets/clipboard-setup.js b/styleguide-app/assets/clipboard-setup.js new file mode 100644 index 00000000..73b52869 --- /dev/null +++ b/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"); diff --git a/styleguide-app/manifest.js b/styleguide-app/manifest.js index 0b553ee4..c7ed8727 100644 --- a/styleguide-app/manifest.js +++ b/styleguide-app/manifest.js @@ -1,2 +1,3 @@ require('../lib/index.js') require('./assets/generated_svgs.js') +require('./assets/clipboard-setup.js')