mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-24 14:13:20 +03:00
demonstrate clipboard setup in styleguide-app
This commit is contained in:
Brooke Angel
parent
9195eeabed
commit
f2e9925b2e
38
package-lock.json
generated
38
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 ] ]
|
||||
|
||||
4
styleguide-app/assets/clipboard-setup.js
Normal file
4
styleguide-app/assets/clipboard-setup.js
Normal file
@ -0,0 +1,4 @@
|
||||
var ClipboardJS = require('clipboard')
|
||||
|
||||
// Used to configure the copyToClipboard button
|
||||
clipboard = new ClipboardJS("#clipboard-container button");
|
||||
@ -1,2 +1,3 @@
|
||||
require('../lib/index.js')
|
||||
require('./assets/generated_svgs.js')
|
||||
require('./assets/clipboard-setup.js')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user