mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-09-21 12:19:03 +03:00
Merge remote-tracking branch 'origin/master' into zamboni/add-button-v7
This commit is contained in:
commit
0fb768cfde
3
.gitignore
vendored
3
.gitignore
vendored
@ -231,3 +231,6 @@ tags
|
|||||||
|
|
||||||
# End of https://www.gitignore.io/api/osx,elm,vim,node,macos,linux,emacs,sublimetext
|
# End of https://www.gitignore.io/api/osx,elm,vim,node,macos,linux,emacs,sublimetext
|
||||||
dist.js
|
dist.js
|
||||||
|
|
||||||
|
# generated documentation file from Elm
|
||||||
|
documentation.json
|
||||||
|
14
Makefile
14
Makefile
@ -1,10 +1,8 @@
|
|||||||
NPM_PREFIX=$(realpath .)/node_modules
|
|
||||||
PATH:="${NPM_PREFIX}/.bin:${PATH}"
|
|
||||||
SHELL:=env PATH=${PATH} /bin/sh
|
SHELL:=env PATH=${PATH} /bin/sh
|
||||||
|
|
||||||
.PHONY: test
|
.PHONY: test
|
||||||
test: node_modules
|
test: node_modules
|
||||||
elm-test
|
npx elm-test
|
||||||
|
|
||||||
.PHONY: checks
|
.PHONY: checks
|
||||||
checks:
|
checks:
|
||||||
@ -12,11 +10,11 @@ checks:
|
|||||||
|
|
||||||
.PHONY: diff
|
.PHONY: diff
|
||||||
diff: node_modules
|
diff: node_modules
|
||||||
if (elm diff | tee /dev/stderr | grep -q MAJOR); then echo "MAJOR changes are not allowed!"; exit 1; fi
|
if (npx elm diff | tee /dev/stderr | grep -q MAJOR); then echo "MAJOR changes are not allowed!"; exit 1; fi
|
||||||
|
|
||||||
.PHONY: format
|
.PHONY: format
|
||||||
format: node_modules
|
format: node_modules
|
||||||
elm-format --validate src && elm-format --validate --elm-version=0.19 tests styleguide-app
|
npx elm-format --validate src && npx elm-format --validate --elm-version=0.19 tests styleguide-app
|
||||||
|
|
||||||
.PHONY: clean
|
.PHONY: clean
|
||||||
clean:
|
clean:
|
||||||
@ -25,16 +23,16 @@ clean:
|
|||||||
.PHONY: styleguide-app
|
.PHONY: styleguide-app
|
||||||
styleguide-app: styleguide-app/elm.js
|
styleguide-app: styleguide-app/elm.js
|
||||||
@echo "Visit http://localhost:8000/index.html to see the styleguide app in your browser"
|
@echo "Visit http://localhost:8000/index.html to see the styleguide app in your browser"
|
||||||
cd styleguide-app && elm reactor
|
cd styleguide-app && npx elm reactor
|
||||||
|
|
||||||
documentation.json: node_modules
|
documentation.json: node_modules
|
||||||
elm make --docs $@
|
npx elm make --docs $@
|
||||||
|
|
||||||
styleguide-app/bundle.js: lib/index.js node_modules
|
styleguide-app/bundle.js: lib/index.js node_modules
|
||||||
npx browserify --entry styleguide-app/manifest.js --outfile styleguide-app/bundle.js
|
npx browserify --entry styleguide-app/manifest.js --outfile styleguide-app/bundle.js
|
||||||
|
|
||||||
styleguide-app/elm.js: styleguide-app/bundle.js $(shell find src styleguide-app -type f -name '*.elm')
|
styleguide-app/elm.js: styleguide-app/bundle.js $(shell find src styleguide-app -type f -name '*.elm')
|
||||||
cd styleguide-app; elm make Main.elm --output=$(@F)
|
cd styleguide-app; npx elm make Main.elm --output=$(@F)
|
||||||
|
|
||||||
# plumbing
|
# plumbing
|
||||||
|
|
||||||
|
19
README.md
19
README.md
@ -4,10 +4,7 @@ UI widgets we use.
|
|||||||
|
|
||||||
## Dual publishing notes
|
## Dual publishing notes
|
||||||
|
|
||||||
This package is published for both 0.18 and 0.19! The 0.18 source code is in src-0.18. While
|
All internal consumers of this repository have been upgrade to Elm 0.19, so we will not be continuing to update the Elm 0.18 source.
|
||||||
we still have codebases that utilize either version we'll need to make updates to any version
|
|
||||||
after 6.0.0 in both src and src-0.18. Eventually, everything will be updated to 0.19 at which
|
|
||||||
point we will delete src-0.18 and stop publishing for Elm 0.18.
|
|
||||||
|
|
||||||
## Versioning policy
|
## Versioning policy
|
||||||
|
|
||||||
@ -76,13 +73,19 @@ You can run this locally to catch errors before you push!
|
|||||||
|
|
||||||
Once your PR is merged, you can publish `master` as a new version:
|
Once your PR is merged, you can publish `master` as a new version:
|
||||||
|
|
||||||
Run the following to bump && publish the version in `elm-packages.json`:
|
Run the following to bump && publish the version in `elm.json`:
|
||||||
|
|
||||||
|
```
|
||||||
|
elm bump
|
||||||
|
```
|
||||||
|
|
||||||
|
Commit and push your changes in a PR. Once it's approved and merged,
|
||||||
|
then:
|
||||||
|
|
||||||
```
|
```
|
||||||
elm-package bump
|
|
||||||
git tag -a 5.10.0 -m "release version 5.10.0"
|
git tag -a 5.10.0 -m "release version 5.10.0"
|
||||||
git push origin master --tags
|
git push origin 5.10.0
|
||||||
elm-package publish
|
elm publish
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also add a tag in https://github.com/NoRedInk/noredink-ui/releases/new if you want to add more detail.
|
You can also add a tag in https://github.com/NoRedInk/noredink-ui/releases/new if you want to add more detail.
|
||||||
|
126
elm.json
126
elm.json
@ -1,64 +1,66 @@
|
|||||||
{
|
{
|
||||||
"type": "package",
|
"type": "package",
|
||||||
"name": "NoRedInk/noredink-ui",
|
"name": "NoRedInk/noredink-ui",
|
||||||
"summary": "UI Widgets we use at NRI",
|
"summary": "UI Widgets we use at NRI",
|
||||||
"license": "BSD-3-Clause",
|
"license": "BSD-3-Clause",
|
||||||
"version": "6.1.6",
|
"version": "6.2.0",
|
||||||
"exposed-modules": [
|
"exposed-modules": [
|
||||||
"Nri.Ui.Alert.V2",
|
"Nri.Ui.Alert.V2",
|
||||||
"Nri.Ui.AssetPath",
|
"Nri.Ui.AssetPath",
|
||||||
"Nri.Ui.BannerAlert.V2",
|
"Nri.Ui.BannerAlert.V2",
|
||||||
"Nri.Ui.Button.V3",
|
"Nri.Ui.Button.V3",
|
||||||
"Nri.Ui.Button.V4",
|
"Nri.Ui.Button.V4",
|
||||||
"Nri.Ui.Button.V5",
|
"Nri.Ui.Button.V5",
|
||||||
"Nri.Ui.Button.V6",
|
"Nri.Ui.Button.V6",
|
||||||
"Nri.Ui.Button.V7",
|
"Nri.Ui.Button.V7",
|
||||||
"Nri.Ui.Checkbox.V3",
|
"Nri.Ui.Checkbox.V3",
|
||||||
"Nri.Ui.Colors.Extra",
|
"Nri.Ui.Checkbox.V4",
|
||||||
"Nri.Ui.Colors.V1",
|
"Nri.Ui.Colors.Extra",
|
||||||
"Nri.Ui.DisclosureIndicator.V1",
|
"Nri.Ui.Colors.V1",
|
||||||
"Nri.Ui.Divider.V2",
|
"Nri.Ui.DisclosureIndicator.V1",
|
||||||
"Nri.Ui.Dropdown.V2",
|
"Nri.Ui.Divider.V2",
|
||||||
"Nri.Ui.Effects.V1",
|
"Nri.Ui.Dropdown.V2",
|
||||||
"Nri.Ui.Fonts.V1",
|
"Nri.Ui.Effects.V1",
|
||||||
"Nri.Ui.Html.Attributes.V2",
|
"Nri.Ui.Fonts.V1",
|
||||||
"Nri.Ui.Html.V3",
|
"Nri.Ui.Html.Attributes.V2",
|
||||||
"Nri.Ui.Icon.V3",
|
"Nri.Ui.Html.V3",
|
||||||
"Nri.Ui.Icon.V4",
|
"Nri.Ui.Icon.V3",
|
||||||
"Nri.Ui.InputStyles.V2",
|
"Nri.Ui.Icon.V4",
|
||||||
"Nri.Ui.Modal.V2",
|
"Nri.Ui.InputStyles.V2",
|
||||||
"Nri.Ui.Modal.V3",
|
"Nri.Ui.Modal.V2",
|
||||||
"Nri.Ui.Outline.V2",
|
"Nri.Ui.Modal.V3",
|
||||||
"Nri.Ui.Page.V2",
|
"Nri.Ui.Outline.V2",
|
||||||
"Nri.Ui.Palette.V1",
|
"Nri.Ui.Page.V2",
|
||||||
"Nri.Ui.PremiumCheckbox.V1",
|
"Nri.Ui.Palette.V1",
|
||||||
"Nri.Ui.PremiumCheckbox.V2",
|
"Nri.Ui.PremiumCheckbox.V1",
|
||||||
"Nri.Ui.SegmentedControl.V6",
|
"Nri.Ui.PremiumCheckbox.V2",
|
||||||
"Nri.Ui.Select.V5",
|
"Nri.Ui.PremiumCheckbox.V3",
|
||||||
"Nri.Ui.Table.V3",
|
"Nri.Ui.SegmentedControl.V6",
|
||||||
"Nri.Ui.Table.V4",
|
"Nri.Ui.Select.V5",
|
||||||
"Nri.Ui.Tabs.V3",
|
"Nri.Ui.Table.V3",
|
||||||
"Nri.Ui.Text.V2",
|
"Nri.Ui.Table.V4",
|
||||||
"Nri.Ui.Text.Writing.V1",
|
"Nri.Ui.Tabs.V3",
|
||||||
"Nri.Ui.TextArea.V3",
|
"Nri.Ui.Text.V2",
|
||||||
"Nri.Ui.TextInput.V3",
|
"Nri.Ui.Text.Writing.V1",
|
||||||
"Nri.Ui"
|
"Nri.Ui.TextArea.V3",
|
||||||
],
|
"Nri.Ui.TextInput.V3",
|
||||||
"elm-version": "0.19.0 <= v < 0.20.0",
|
"Nri.Ui"
|
||||||
"dependencies": {
|
],
|
||||||
"avh4/elm-color": "1.0.0 <= v < 2.0.0",
|
"elm-version": "0.19.0 <= v < 0.20.0",
|
||||||
"elm/core": "1.0.0 <= v < 2.0.0",
|
"dependencies": {
|
||||||
"elm/html": "1.0.0 <= v < 2.0.0",
|
"avh4/elm-color": "1.0.0 <= v < 2.0.0",
|
||||||
"elm/json": "1.0.0 <= v < 2.0.0",
|
"elm/core": "1.0.0 <= v < 2.0.0",
|
||||||
"elm/regex": "1.0.0 <= v < 2.0.0",
|
"elm/html": "1.0.0 <= v < 2.0.0",
|
||||||
"elm/svg": "1.0.1 <= v < 2.0.0",
|
"elm/json": "1.0.0 <= v < 2.0.0",
|
||||||
"lukewestby/accessible-html-with-css-temp-19": "1.0.0 <= v < 2.0.0",
|
"elm/regex": "1.0.0 <= v < 2.0.0",
|
||||||
"pablohirafuji/elm-markdown": "2.0.5 <= v < 3.0.0",
|
"elm/svg": "1.0.1 <= v < 2.0.0",
|
||||||
"rtfeldman/elm-css": "16.0.0 <= v < 17.0.0",
|
"lukewestby/accessible-html-with-css-temp-19": "1.0.0 <= v < 2.0.0",
|
||||||
"tesk9/accessible-html": "4.0.0 <= v < 5.0.0",
|
"pablohirafuji/elm-markdown": "2.0.5 <= v < 3.0.0",
|
||||||
"wernerdegroot/listzipper": "3.1.1 <= v < 4.0.0"
|
"rtfeldman/elm-css": "16.0.0 <= v < 17.0.0",
|
||||||
},
|
"tesk9/accessible-html": "4.0.0 <= v < 5.0.0",
|
||||||
"test-dependencies": {
|
"wernerdegroot/listzipper": "3.1.1 <= v < 4.0.0"
|
||||||
"elm-explorations/test": "1.2.0 <= v < 2.0.0"
|
},
|
||||||
}
|
"test-dependencies": {
|
||||||
|
"elm-explorations/test": "1.2.0 <= v < 2.0.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
38
package-lock.json
generated
38
package-lock.json
generated
@ -568,7 +568,7 @@
|
|||||||
},
|
},
|
||||||
"browserify-aes": {
|
"browserify-aes": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
|
||||||
"integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
|
"integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -605,7 +605,7 @@
|
|||||||
},
|
},
|
||||||
"browserify-rsa": {
|
"browserify-rsa": {
|
||||||
"version": "4.0.1",
|
"version": "4.0.1",
|
||||||
"resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
|
||||||
"integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
|
"integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -882,7 +882,7 @@
|
|||||||
},
|
},
|
||||||
"convert-source-map": {
|
"convert-source-map": {
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"resolved": "http://registry.npmjs.org/convert-source-map/-/convert-source-map-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.1.3.tgz",
|
||||||
"integrity": "sha1-SCnId+n+SbMWHzvzZziI4gRpmGA=",
|
"integrity": "sha1-SCnId+n+SbMWHzvzZziI4gRpmGA=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
@ -910,7 +910,7 @@
|
|||||||
},
|
},
|
||||||
"create-hash": {
|
"create-hash": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
|
||||||
"integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
|
"integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -923,7 +923,7 @@
|
|||||||
},
|
},
|
||||||
"create-hmac": {
|
"create-hmac": {
|
||||||
"version": "1.1.7",
|
"version": "1.1.7",
|
||||||
"resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
|
"resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
|
||||||
"integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
|
"integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -1108,7 +1108,7 @@
|
|||||||
},
|
},
|
||||||
"diffie-hellman": {
|
"diffie-hellman": {
|
||||||
"version": "5.0.3",
|
"version": "5.0.3",
|
||||||
"resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
|
||||||
"integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
|
"integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -1278,7 +1278,7 @@
|
|||||||
},
|
},
|
||||||
"expand-range": {
|
"expand-range": {
|
||||||
"version": "1.8.2",
|
"version": "1.8.2",
|
||||||
"resolved": "http://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
|
"resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
|
||||||
"integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
|
"integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -1437,7 +1437,7 @@
|
|||||||
},
|
},
|
||||||
"fs-extra": {
|
"fs-extra": {
|
||||||
"version": "0.30.0",
|
"version": "0.30.0",
|
||||||
"resolved": "http://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz",
|
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz",
|
||||||
"integrity": "sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=",
|
"integrity": "sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -2451,7 +2451,7 @@
|
|||||||
},
|
},
|
||||||
"jsonfile": {
|
"jsonfile": {
|
||||||
"version": "2.4.0",
|
"version": "2.4.0",
|
||||||
"resolved": "http://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
|
||||||
"integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
|
"integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -2712,7 +2712,7 @@
|
|||||||
},
|
},
|
||||||
"mkdirp": {
|
"mkdirp": {
|
||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
|
||||||
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
|
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -2932,7 +2932,7 @@
|
|||||||
},
|
},
|
||||||
"os-tmpdir": {
|
"os-tmpdir": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
|
||||||
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
|
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
@ -2959,7 +2959,7 @@
|
|||||||
},
|
},
|
||||||
"parse-asn1": {
|
"parse-asn1": {
|
||||||
"version": "5.1.1",
|
"version": "5.1.1",
|
||||||
"resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
|
||||||
"integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
|
"integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -3069,7 +3069,7 @@
|
|||||||
},
|
},
|
||||||
"public-encrypt": {
|
"public-encrypt": {
|
||||||
"version": "4.0.2",
|
"version": "4.0.2",
|
||||||
"resolved": "http://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
|
||||||
"integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==",
|
"integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -3721,7 +3721,7 @@
|
|||||||
},
|
},
|
||||||
"safe-regex": {
|
"safe-regex": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
|
||||||
"integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
|
"integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -3771,7 +3771,7 @@
|
|||||||
},
|
},
|
||||||
"sha.js": {
|
"sha.js": {
|
||||||
"version": "2.4.11",
|
"version": "2.4.11",
|
||||||
"resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
|
"resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
|
||||||
"integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
|
"integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -3781,7 +3781,7 @@
|
|||||||
},
|
},
|
||||||
"shasum": {
|
"shasum": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "http://registry.npmjs.org/shasum/-/shasum-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/shasum/-/shasum-1.0.2.tgz",
|
||||||
"integrity": "sha1-5wEjENj0F/TetXEhUOVni4euVl8=",
|
"integrity": "sha1-5wEjENj0F/TetXEhUOVni4euVl8=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -4147,7 +4147,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"rimraf": {
|
"rimraf": {
|
||||||
"version": "2.2.8",
|
"version": "2.2.8",
|
||||||
"resolved": "http://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
|
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
|
||||||
"integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=",
|
"integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=",
|
||||||
"dev": true
|
"dev": true
|
||||||
}
|
}
|
||||||
@ -4155,7 +4155,7 @@
|
|||||||
},
|
},
|
||||||
"through": {
|
"through": {
|
||||||
"version": "2.3.8",
|
"version": "2.3.8",
|
||||||
"resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
||||||
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
|
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
@ -4545,7 +4545,7 @@
|
|||||||
},
|
},
|
||||||
"xmlbuilder": {
|
"xmlbuilder": {
|
||||||
"version": "8.2.2",
|
"version": "8.2.2",
|
||||||
"resolved": "http://registry.npmjs.org/xmlbuilder/-/xmlbuilder-8.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-8.2.2.tgz",
|
||||||
"integrity": "sha1-aSSGc0ELS6QuGmE2VR0pIjNap3M=",
|
"integrity": "sha1-aSSGc0ELS6QuGmE2VR0pIjNap3M=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
19
shell.nix
Normal file
19
shell.nix
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
with import (builtins.fetchTarball rec {
|
||||||
|
# grab a hash from here: https://nixos.org/channels/
|
||||||
|
name = "nixpkgs-darwin-18.09pre153253.7e88992a8c7";
|
||||||
|
url = "https://github.com/nixos/nixpkgs/archive/7e88992a8c7b2de0bcb89182d8686b27bd93e46a.tar.gz";
|
||||||
|
# Hash obtained using `nix-prefetch-url --unpack <url>`
|
||||||
|
sha256 = "1f6lf4addczi81hchqbzjlhrsmkrj575dmdjdhyl0jkm7ypy2lgk";
|
||||||
|
}) {};
|
||||||
|
|
||||||
|
stdenv.mkDerivation {
|
||||||
|
name = "noredink-ui";
|
||||||
|
buildInputs = [
|
||||||
|
# base dependencies
|
||||||
|
git
|
||||||
|
gnumake
|
||||||
|
|
||||||
|
# node dependencies
|
||||||
|
nodePackages.npm
|
||||||
|
];
|
||||||
|
}
|
332
src/Nri/Ui/Checkbox/V4.elm
Normal file
332
src/Nri/Ui/Checkbox/V4.elm
Normal file
@ -0,0 +1,332 @@
|
|||||||
|
module Nri.Ui.Checkbox.V4 exposing
|
||||||
|
( Model, Theme(..), IsSelected(..)
|
||||||
|
, view, viewWithLabel, Assets
|
||||||
|
, selectedFromBool
|
||||||
|
)
|
||||||
|
|
||||||
|
{-|
|
||||||
|
|
||||||
|
@docs Model, Theme, IsSelected
|
||||||
|
|
||||||
|
@docs view, viewWithLabel, Assets
|
||||||
|
|
||||||
|
@docs selectedFromBool
|
||||||
|
|
||||||
|
-}
|
||||||
|
|
||||||
|
import Accessibility.Styled as Html
|
||||||
|
import Accessibility.Styled.Aria as Aria
|
||||||
|
import Accessibility.Styled.Style
|
||||||
|
import Accessibility.Styled.Widget as Widget
|
||||||
|
import Css exposing (..)
|
||||||
|
import Css.Global exposing (Snippet, children, descendants, everything, selector)
|
||||||
|
import Html.Events
|
||||||
|
import Html.Styled
|
||||||
|
import Html.Styled.Attributes as Attributes exposing (css)
|
||||||
|
import Html.Styled.Events as Events
|
||||||
|
import Json.Decode
|
||||||
|
import Nri.Ui.AssetPath exposing (Asset(..))
|
||||||
|
import Nri.Ui.AssetPath.Css
|
||||||
|
import Nri.Ui.Colors.V1 as Colors
|
||||||
|
import Nri.Ui.Fonts.V1 as Fonts
|
||||||
|
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
|
||||||
|
import Nri.Ui.Html.V3 as HtmlExtra exposing (defaultOptions)
|
||||||
|
|
||||||
|
|
||||||
|
{-| -}
|
||||||
|
type alias Model msg =
|
||||||
|
{ identifier : String
|
||||||
|
, label : String
|
||||||
|
, setterMsg : Bool -> msg
|
||||||
|
, selected : IsSelected
|
||||||
|
, disabled : Bool
|
||||||
|
, theme : Theme
|
||||||
|
, noOpMsg : msg
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
{-|
|
||||||
|
|
||||||
|
= Selected -- Checked (rendered with a checkmark)
|
||||||
|
| NotSelected -- Not Checked (rendered blank)
|
||||||
|
| PartiallySelected -- Indeterminate (rendered dash)
|
||||||
|
|
||||||
|
-}
|
||||||
|
type IsSelected
|
||||||
|
= Selected
|
||||||
|
| NotSelected
|
||||||
|
| PartiallySelected
|
||||||
|
|
||||||
|
|
||||||
|
{-| -}
|
||||||
|
type Theme
|
||||||
|
= Square
|
||||||
|
| Locked
|
||||||
|
|
||||||
|
|
||||||
|
{-| If your selectedness is always selected or not selected,
|
||||||
|
you will likely store that state as a `Bool` in your model.
|
||||||
|
`selectedFromBool` lets you easily convert that into an `IsSelected` value
|
||||||
|
for use with `Nri.Ui.Checkbox`.
|
||||||
|
-}
|
||||||
|
selectedFromBool : Bool -> IsSelected
|
||||||
|
selectedFromBool isSelected =
|
||||||
|
case isSelected of
|
||||||
|
True ->
|
||||||
|
Selected
|
||||||
|
|
||||||
|
False ->
|
||||||
|
NotSelected
|
||||||
|
|
||||||
|
|
||||||
|
selectedToMaybe : IsSelected -> Maybe Bool
|
||||||
|
selectedToMaybe selected =
|
||||||
|
case selected of
|
||||||
|
Selected ->
|
||||||
|
Just True
|
||||||
|
|
||||||
|
NotSelected ->
|
||||||
|
Just False
|
||||||
|
|
||||||
|
PartiallySelected ->
|
||||||
|
Nothing
|
||||||
|
|
||||||
|
|
||||||
|
{-| Shows a checkbox (the label is only used for accessibility hints)
|
||||||
|
-}
|
||||||
|
view : Assets a -> Model msg -> Html.Html msg
|
||||||
|
view assets model =
|
||||||
|
buildCheckbox assets model <|
|
||||||
|
Html.span Accessibility.Styled.Style.invisible
|
||||||
|
[ Html.text model.label ]
|
||||||
|
|
||||||
|
|
||||||
|
{-| Shows a checkbox and its label text
|
||||||
|
-}
|
||||||
|
viewWithLabel : Assets a -> Model msg -> Html.Html msg
|
||||||
|
viewWithLabel assets model =
|
||||||
|
buildCheckbox assets model <|
|
||||||
|
Html.span [] [ Html.text model.label ]
|
||||||
|
|
||||||
|
|
||||||
|
buildCheckbox : Assets a -> Model msg -> Html.Html msg -> Html.Html msg
|
||||||
|
buildCheckbox assets model labelContent =
|
||||||
|
viewCheckbox model <|
|
||||||
|
case model.theme of
|
||||||
|
Square ->
|
||||||
|
{ containerClasses = toClassList [ "SquareClass" ]
|
||||||
|
, labelStyles =
|
||||||
|
squareLabelStyles model <|
|
||||||
|
case model.selected of
|
||||||
|
Selected ->
|
||||||
|
assets.checkboxChecked_svg
|
||||||
|
|
||||||
|
NotSelected ->
|
||||||
|
assets.checkboxUnchecked_svg
|
||||||
|
|
||||||
|
PartiallySelected ->
|
||||||
|
assets.checkboxCheckedPartially_svg
|
||||||
|
, labelClasses = labelClass model.selected
|
||||||
|
, labelContent = labelContent
|
||||||
|
}
|
||||||
|
|
||||||
|
Locked ->
|
||||||
|
{ containerClasses = toClassList [ "Locked" ]
|
||||||
|
, labelStyles = lockLabelStyles model assets.checkboxLockOnInside_svg
|
||||||
|
, labelClasses = labelClass model.selected
|
||||||
|
, labelContent = labelContent
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
squareLabelStyles : { b | disabled : Bool } -> Asset -> Html.Styled.Attribute msg
|
||||||
|
squareLabelStyles model image =
|
||||||
|
let
|
||||||
|
baseStyles =
|
||||||
|
[ positioning
|
||||||
|
, textStyle
|
||||||
|
, outline none
|
||||||
|
, addIcon image
|
||||||
|
]
|
||||||
|
in
|
||||||
|
css
|
||||||
|
(baseStyles
|
||||||
|
++ (if model.disabled then
|
||||||
|
[ cursor auto, checkboxImageSelector [ opacity (num 0.4) ] ]
|
||||||
|
|
||||||
|
else
|
||||||
|
[ cursor pointer ]
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
lockLabelStyles : { b | disabled : Bool } -> Asset -> Html.Styled.Attribute msg
|
||||||
|
lockLabelStyles model image =
|
||||||
|
let
|
||||||
|
baseStyles =
|
||||||
|
[ positioning
|
||||||
|
, textStyle
|
||||||
|
, outline none
|
||||||
|
, addIcon image
|
||||||
|
]
|
||||||
|
in
|
||||||
|
css
|
||||||
|
(baseStyles
|
||||||
|
++ (if model.disabled then
|
||||||
|
[ cursor auto
|
||||||
|
, checkboxImageSelector [ opacity (num 0.4) ]
|
||||||
|
]
|
||||||
|
|
||||||
|
else
|
||||||
|
[ cursor pointer ]
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
positioning : Style
|
||||||
|
positioning =
|
||||||
|
batch
|
||||||
|
[ display inlineBlock
|
||||||
|
, padding4 (px 13) zero (px 13) (px 35)
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
textStyle : Style
|
||||||
|
textStyle =
|
||||||
|
batch
|
||||||
|
[ Fonts.baseFont
|
||||||
|
, fontSize (px 16)
|
||||||
|
, fontWeight (int 600)
|
||||||
|
, color Colors.navy
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
addIcon : Asset -> Style
|
||||||
|
addIcon icon =
|
||||||
|
batch
|
||||||
|
[ position relative
|
||||||
|
, checkboxImageSelector
|
||||||
|
[ backgroundImage icon
|
||||||
|
, backgroundRepeat noRepeat
|
||||||
|
, backgroundSize (px 24)
|
||||||
|
, property "content" "''"
|
||||||
|
, position absolute
|
||||||
|
, left zero
|
||||||
|
, top (px 10)
|
||||||
|
, width (px 24)
|
||||||
|
, height (px 24)
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
checkboxImageSelector : List Style -> Style
|
||||||
|
checkboxImageSelector =
|
||||||
|
before
|
||||||
|
|
||||||
|
|
||||||
|
labelClass : IsSelected -> Html.Styled.Attribute msg
|
||||||
|
labelClass isSelected =
|
||||||
|
case isSelected of
|
||||||
|
Selected ->
|
||||||
|
toClassList [ "Label", "Checked" ]
|
||||||
|
|
||||||
|
NotSelected ->
|
||||||
|
toClassList [ "Label", "Unchecked" ]
|
||||||
|
|
||||||
|
PartiallySelected ->
|
||||||
|
toClassList [ "Label", "Indeterminate" ]
|
||||||
|
|
||||||
|
|
||||||
|
toClassList : List String -> Html.Styled.Attribute msg
|
||||||
|
toClassList =
|
||||||
|
List.map (\a -> ( "checkbox-V3__" ++ a, True )) >> Attributes.classList
|
||||||
|
|
||||||
|
|
||||||
|
viewCheckbox :
|
||||||
|
Model msg
|
||||||
|
->
|
||||||
|
{ containerClasses : Html.Attribute msg
|
||||||
|
, labelStyles : Html.Attribute msg
|
||||||
|
, labelClasses : Html.Attribute msg
|
||||||
|
, labelContent : Html.Html msg
|
||||||
|
}
|
||||||
|
-> Html.Html msg
|
||||||
|
viewCheckbox model config =
|
||||||
|
let
|
||||||
|
toggledValue =
|
||||||
|
selectedToMaybe model.selected
|
||||||
|
|> Maybe.withDefault False
|
||||||
|
|> not
|
||||||
|
in
|
||||||
|
Html.Styled.span
|
||||||
|
[ css
|
||||||
|
[ display block
|
||||||
|
, height inherit
|
||||||
|
, descendants [ Css.Global.input [ display none ] ]
|
||||||
|
]
|
||||||
|
, config.containerClasses
|
||||||
|
, Attributes.id <| model.identifier ++ "-container"
|
||||||
|
, -- This is necessary to prevent event propagation.
|
||||||
|
-- See https://github.com/elm-lang/html/issues/96
|
||||||
|
Attributes.map (always model.noOpMsg) <|
|
||||||
|
Events.stopPropagationOn "click"
|
||||||
|
(Json.Decode.succeed ( "stop click propagation", True ))
|
||||||
|
]
|
||||||
|
[ Html.checkbox model.identifier
|
||||||
|
(selectedToMaybe model.selected)
|
||||||
|
[ Widget.label model.label
|
||||||
|
, Events.onCheck (\_ -> model.setterMsg toggledValue)
|
||||||
|
, Attributes.id model.identifier
|
||||||
|
, Attributes.disabled model.disabled
|
||||||
|
]
|
||||||
|
, viewLabel model config.labelContent config.labelClasses config.labelStyles
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
viewLabel : Model msg -> Html.Html msg -> Html.Attribute msg -> Html.Attribute msg -> Html.Html msg
|
||||||
|
viewLabel model content class theme =
|
||||||
|
Html.Styled.label
|
||||||
|
[ Attributes.for model.identifier
|
||||||
|
, Aria.controls model.identifier
|
||||||
|
, Widget.disabled model.disabled
|
||||||
|
, Widget.checked (selectedToMaybe model.selected)
|
||||||
|
, if not model.disabled then
|
||||||
|
Attributes.tabindex 0
|
||||||
|
|
||||||
|
else
|
||||||
|
ExtraAttributes.none
|
||||||
|
, if not model.disabled then
|
||||||
|
--TODO: the accessibility keyboard module might make this a tad more readable.
|
||||||
|
HtmlExtra.onKeyUp
|
||||||
|
{ defaultOptions | preventDefault = True }
|
||||||
|
(\keyCode ->
|
||||||
|
-- 32 is the space bar, 13 is enter
|
||||||
|
if (keyCode == 32 || keyCode == 13) && not model.disabled then
|
||||||
|
Just <| model.setterMsg (Maybe.map not (selectedToMaybe model.selected) |> Maybe.withDefault True)
|
||||||
|
|
||||||
|
else
|
||||||
|
Nothing
|
||||||
|
)
|
||||||
|
|
||||||
|
else
|
||||||
|
ExtraAttributes.none
|
||||||
|
, class
|
||||||
|
, theme
|
||||||
|
]
|
||||||
|
[ content ]
|
||||||
|
|
||||||
|
|
||||||
|
{-| The assets used in this module.
|
||||||
|
-}
|
||||||
|
type alias Assets r =
|
||||||
|
{ r
|
||||||
|
| checkboxUnchecked_svg : Asset
|
||||||
|
, checkboxChecked_svg : Asset
|
||||||
|
, checkboxCheckedPartially_svg : Asset
|
||||||
|
, checkboxLockOnInside_svg : Asset
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
backgroundImage : Asset -> Style
|
||||||
|
backgroundImage =
|
||||||
|
Nri.Ui.AssetPath.Css.url
|
||||||
|
>> property "background-image"
|
@ -184,13 +184,13 @@ input theme isInError =
|
|||||||
{-| -}
|
{-| -}
|
||||||
inputPaddingVertical : Px
|
inputPaddingVertical : Px
|
||||||
inputPaddingVertical =
|
inputPaddingVertical =
|
||||||
px 8
|
px 12
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
{-| -}
|
||||||
inputLineHeight : Px
|
inputLineHeight : Px
|
||||||
inputLineHeight =
|
inputLineHeight =
|
||||||
px 20
|
px 21
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
{-| -}
|
||||||
|
@ -202,7 +202,7 @@ viewContent : ModalType -> Html msg -> Html msg
|
|||||||
viewContent modalType content =
|
viewContent modalType content =
|
||||||
Nri.Ui.styled div
|
Nri.Ui.styled div
|
||||||
"modal-content"
|
"modal-content"
|
||||||
[ Css.overflowY Css.scroll
|
[ Css.overflowY Css.auto
|
||||||
, Css.padding2 (Css.px 30) (Css.px 45)
|
, Css.padding2 (Css.px 30) (Css.px 45)
|
||||||
, Css.width (Css.pct 100)
|
, Css.width (Css.pct 100)
|
||||||
, Css.minHeight (Css.px 150)
|
, Css.minHeight (Css.px 150)
|
||||||
|
119
src/Nri/Ui/PremiumCheckbox/V3.elm
Normal file
119
src/Nri/Ui/PremiumCheckbox/V3.elm
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
module Nri.Ui.PremiumCheckbox.V3 exposing (PremiumConfig, premium, Pennant(..))
|
||||||
|
|
||||||
|
{-|
|
||||||
|
|
||||||
|
@docs PremiumConfig, premium, Pennant
|
||||||
|
|
||||||
|
-}
|
||||||
|
|
||||||
|
import Accessibility.Styled as Html
|
||||||
|
import Css exposing (..)
|
||||||
|
import Html.Styled.Attributes as Attributes exposing (css)
|
||||||
|
import Nri.Ui.AssetPath exposing (Asset(..))
|
||||||
|
import Nri.Ui.AssetPath.Css
|
||||||
|
import Nri.Ui.Checkbox.V4 as Checkbox
|
||||||
|
|
||||||
|
|
||||||
|
{-|
|
||||||
|
|
||||||
|
- `onChange`: A message for when the user toggles the checkbox
|
||||||
|
- `onLockedClick`: A message for when the user clicks a checkbox they don't have PremiumLevel for.
|
||||||
|
If you get this message, you should show an `Nri.Ui.Premium.Model.view`
|
||||||
|
|
||||||
|
-}
|
||||||
|
type alias PremiumConfig msg =
|
||||||
|
{ label : String
|
||||||
|
, id : String
|
||||||
|
, selected : Checkbox.IsSelected
|
||||||
|
, disabled : Bool
|
||||||
|
, isLocked : Bool
|
||||||
|
, pennant : Maybe Pennant
|
||||||
|
, onChange : Bool -> msg
|
||||||
|
, onLockedClick : msg
|
||||||
|
, noOpMsg : msg
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
{-| Premium is the yellow "P" pennant
|
||||||
|
PremiumWithWriting is the yellow "P+" pennant
|
||||||
|
-}
|
||||||
|
type Pennant
|
||||||
|
= Premium
|
||||||
|
| PremiumWithWriting
|
||||||
|
|
||||||
|
|
||||||
|
{-| A checkbox that should be used for premium content
|
||||||
|
-}
|
||||||
|
premium : Assets a -> PremiumConfig msg -> Html.Html msg
|
||||||
|
premium assets config =
|
||||||
|
Html.div
|
||||||
|
[ css
|
||||||
|
[ displayFlex
|
||||||
|
, alignItems center
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[ Checkbox.viewWithLabel assets
|
||||||
|
{ identifier = config.id
|
||||||
|
, label = config.label
|
||||||
|
, setterMsg =
|
||||||
|
if config.isLocked then
|
||||||
|
\_ -> config.onLockedClick
|
||||||
|
|
||||||
|
else
|
||||||
|
config.onChange
|
||||||
|
, selected = config.selected
|
||||||
|
, disabled = config.disabled
|
||||||
|
, theme =
|
||||||
|
if config.isLocked then
|
||||||
|
Checkbox.Locked
|
||||||
|
|
||||||
|
else
|
||||||
|
Checkbox.Square
|
||||||
|
, noOpMsg = config.noOpMsg
|
||||||
|
}
|
||||||
|
, case config.pennant of
|
||||||
|
Just pennant ->
|
||||||
|
Html.div
|
||||||
|
[ Attributes.class "premium-checkbox-V1__PremiumClass"
|
||||||
|
, css
|
||||||
|
[ property "content" "''"
|
||||||
|
, display inlineBlock
|
||||||
|
, width (px 26)
|
||||||
|
, height (px 24)
|
||||||
|
, marginLeft (px 8)
|
||||||
|
, backgroundImage
|
||||||
|
(case pennant of
|
||||||
|
Premium ->
|
||||||
|
assets.iconPremiumFlag_svg
|
||||||
|
|
||||||
|
PremiumWithWriting ->
|
||||||
|
assets.iconPremiumWithWritingFlag_svg
|
||||||
|
)
|
||||||
|
, backgroundRepeat noRepeat
|
||||||
|
, backgroundPosition center
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[]
|
||||||
|
|
||||||
|
Nothing ->
|
||||||
|
Html.text ""
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
{-| The assets used in this module.
|
||||||
|
-}
|
||||||
|
type alias Assets r =
|
||||||
|
{ r
|
||||||
|
| checkboxUnchecked_svg : Asset
|
||||||
|
, checkboxChecked_svg : Asset
|
||||||
|
, checkboxCheckedPartially_svg : Asset
|
||||||
|
, checkboxLockOnInside_svg : Asset
|
||||||
|
, iconPremiumFlag_svg : Asset
|
||||||
|
, iconPremiumWithWritingFlag_svg : Asset
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
backgroundImage : Asset -> Style
|
||||||
|
backgroundImage =
|
||||||
|
Nri.Ui.AssetPath.Css.url
|
||||||
|
>> property "background-image"
|
@ -9,9 +9,9 @@ module Examples.Checkbox exposing (Msg, State, example, init, update)
|
|||||||
import Assets exposing (assets)
|
import Assets exposing (assets)
|
||||||
import Html.Styled as Html exposing (..)
|
import Html.Styled as Html exposing (..)
|
||||||
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
|
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
|
||||||
import Nri.Ui.Checkbox.V3 as Checkbox
|
import Nri.Ui.Checkbox.V4 as Checkbox
|
||||||
import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..))
|
import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..))
|
||||||
import Nri.Ui.PremiumCheckbox.V2 as PremiumCheckbox
|
import Nri.Ui.PremiumCheckbox.V3 as PremiumCheckbox
|
||||||
import Set exposing (Set)
|
import Set exposing (Set)
|
||||||
|
|
||||||
|
|
||||||
|
@ -6,6 +6,7 @@ module Examples.TextArea exposing (Msg, State, example, init, update)
|
|||||||
|
|
||||||
-}
|
-}
|
||||||
|
|
||||||
|
import Assets exposing (assets)
|
||||||
import Dict exposing (Dict)
|
import Dict exposing (Dict)
|
||||||
import Html.Styled as Html
|
import Html.Styled as Html
|
||||||
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
|
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
|
||||||
@ -171,16 +172,3 @@ update msg state =
|
|||||||
|
|
||||||
type alias Id =
|
type alias Id =
|
||||||
Int
|
Int
|
||||||
|
|
||||||
|
|
||||||
assets : { iconPremiumFlag_svg : Asset, iconPremiumKey_png : Asset, iconPremiumLocked_png : Asset, iconPremiumUnlocked_png : Asset, checkboxCheckedPartially_svg : Asset, checkboxChecked_svg : Asset, checkboxLockOnInside_svg : Asset, checkboxUnchecked_svg : Asset }
|
|
||||||
assets =
|
|
||||||
{ checkboxUnchecked_svg = Asset "checkboxUnchecked_svg"
|
|
||||||
, checkboxChecked_svg = Asset "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAb1BMVEX///9DoEc2nDt1tXcoly601bU5nD1nr2o/n0Pw9vAzmzhAn0QxmjYumTMqmDAsmTK92r6UxJacyJ1YqFu52LvC3MOQwpIZlCGLwI3M4s2u0q+q0KueyaCkzKX1+fXq8+rh7uHW6NeDvIVztHVssW4Cx6cUAAACZUlEQVR4nO3Zi1LTYBRF4dOSQkqt4AURL6Di+z+jQWVsadJcen5z9pm1HiDZ3yQzSSZmRERERERERERERERERERERERERERERERElKj7uQeUbrVdzz2hbKuqrlMTV9VikZr4BExN/ANMTHwGpiX+AyYl7gJTEveBCYkvgemIh8BkxDZgKmI7sCEuH+ae5lMXcLF8nHuaT93As7mn+QRQPYDqAVQPoHoA1QOoHkD1AKoHUD2A6gFUD6B6ANUDqB5A9QCqB1A9gOoBVA+gegDVA6geQPUAqgfw/3Rd7MhRgLcXhY4cBHhTLc7LEIMA755mFCFGAhYhBgF+f57hTowGdCcGAX672jm1KzEI8GG7WZQhRgFebvZP70YMAlwvNy8HOBGjAOsDoBMxCPB+U7eNcCAGAa7bgQ7EIECzi/OOIScSwwBLEQMByxBDAUsQgwHNfjoTwwG9iQGBDXHpRwwJ9CQGBZo9OhHDAr2IgYFmZw7E0EAPYnDg6cTwwFOJAsDTiBJAsx+TiSLAhng5jSgDnEoUAk4jSgGnEMWA44lywLFEQaDZxxFESeAYoiiwIb4aRpQFDiUKA80+DCBKA4cQxYFmb3qI8sCGuD1GTAA8TkwBPEKs33U9MbWAZm+7iC3/xiWBR4hZgCOJikCzL1f9MmngCKIq0Ozr6+TAhjjkKioDBxG1gWaf+25UdWAvUR/YQ8wANPvU9aqdBXiEmAXYScwD7PjozQRsJeYCthCzAQ+I+YBm76vkwD1iTuAOMSvQ7LpKDvxLzAz8TcwNNLu5TQ40u5t7ABERERERERERERERERFN7hdTvSHAHrHcMgAAAABJRU5ErkJggg=="
|
|
||||||
, checkboxCheckedPartially_svg = Asset "checkboxCheckedPartially_svg"
|
|
||||||
, iconPremiumUnlocked_png = Asset "iconPremiumUnlocked_png"
|
|
||||||
, iconPremiumLocked_png = Asset "iconPremiumLocked_png"
|
|
||||||
, checkboxLockOnInside_svg = Asset "checkboxLockOnInside_svg"
|
|
||||||
, iconPremiumKey_png = Asset "iconPremiumKey_png"
|
|
||||||
, iconPremiumFlag_svg = Asset "iconPremiumFlag_svg"
|
|
||||||
}
|
|
||||||
|
21
tests/Spec/Nri/Ui/Checkbox/V4.elm
Normal file
21
tests/Spec/Nri/Ui/Checkbox/V4.elm
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
module Spec.Nri.Ui.Checkbox.V4 exposing (all)
|
||||||
|
|
||||||
|
import Expect exposing (Expectation)
|
||||||
|
import Nri.Ui.Checkbox.V4 as Checkbox
|
||||||
|
import Test exposing (..)
|
||||||
|
|
||||||
|
|
||||||
|
all : Test
|
||||||
|
all =
|
||||||
|
describe "Nri.Ui.Checkbox.V3"
|
||||||
|
[ describe "selectedFromBool"
|
||||||
|
[ test "it handles Selected" <|
|
||||||
|
\() ->
|
||||||
|
Checkbox.selectedFromBool True
|
||||||
|
|> Expect.equal Checkbox.Selected
|
||||||
|
, test "it handles NotSelected" <|
|
||||||
|
\() ->
|
||||||
|
Checkbox.selectedFromBool False
|
||||||
|
|> Expect.equal Checkbox.NotSelected
|
||||||
|
]
|
||||||
|
]
|
141
tests/Spec/Nri/Ui/PremiumCheckbox/V3.elm
Normal file
141
tests/Spec/Nri/Ui/PremiumCheckbox/V3.elm
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
module Spec.Nri.Ui.PremiumCheckbox.V3 exposing (spec)
|
||||||
|
|
||||||
|
import Html.Attributes
|
||||||
|
import Html.Styled
|
||||||
|
import Nri.Ui.AssetPath exposing (Asset(..))
|
||||||
|
import Nri.Ui.Checkbox.V4 exposing (IsSelected(..))
|
||||||
|
import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..))
|
||||||
|
import Nri.Ui.PremiumCheckbox.V3 as PremiumCheckbox
|
||||||
|
import Test exposing (..)
|
||||||
|
import Test.Html.Query as Query
|
||||||
|
import Test.Html.Selector as Selector
|
||||||
|
|
||||||
|
|
||||||
|
premiumView config =
|
||||||
|
PremiumCheckbox.premium assets
|
||||||
|
{ label = "i am label"
|
||||||
|
, id = "id"
|
||||||
|
, selected = config.selected
|
||||||
|
, disabled = config.disabled
|
||||||
|
, isLocked = config.isLocked
|
||||||
|
, pennant = config.pennant
|
||||||
|
, onChange = \_ -> ()
|
||||||
|
, onLockedClick = ()
|
||||||
|
, noOpMsg = ()
|
||||||
|
}
|
||||||
|
|> Html.Styled.toUnstyled
|
||||||
|
|> Query.fromHtml
|
||||||
|
|
||||||
|
|
||||||
|
spec : Test
|
||||||
|
spec =
|
||||||
|
describe "Nri.Ui.PremiumCheckbox.V2"
|
||||||
|
[ describe "premium"
|
||||||
|
[ test "displays the label" <|
|
||||||
|
\() ->
|
||||||
|
premiumView
|
||||||
|
{ selected = Selected
|
||||||
|
, disabled = False
|
||||||
|
, isLocked = False
|
||||||
|
, pennant = Nothing
|
||||||
|
}
|
||||||
|
|> Query.has [ Selector.text "i am label" ]
|
||||||
|
, test "appears selected when Selected is passed in" <|
|
||||||
|
\() ->
|
||||||
|
premiumView
|
||||||
|
{ selected = Selected
|
||||||
|
, disabled = False
|
||||||
|
, isLocked = False
|
||||||
|
, pennant = Nothing
|
||||||
|
}
|
||||||
|
|> Query.has [ Selector.class "checkbox-V3__Checked" ]
|
||||||
|
, test "appears unselected when NotSelected is passed in" <|
|
||||||
|
\() ->
|
||||||
|
premiumView
|
||||||
|
{ selected = NotSelected
|
||||||
|
, disabled = False
|
||||||
|
, isLocked = False
|
||||||
|
, pennant = Nothing
|
||||||
|
}
|
||||||
|
|> Query.has [ Selector.class "checkbox-V3__Unchecked" ]
|
||||||
|
, test "appears partially selected when PartiallySelected is passed in" <|
|
||||||
|
\() ->
|
||||||
|
premiumView
|
||||||
|
{ selected = PartiallySelected
|
||||||
|
, disabled = False
|
||||||
|
, isLocked = False
|
||||||
|
, pennant = Nothing
|
||||||
|
}
|
||||||
|
|> Query.has [ Selector.class "checkbox-V3__Indeterminate" ]
|
||||||
|
, test "appears locked when isLocked = True" <|
|
||||||
|
\() ->
|
||||||
|
premiumView
|
||||||
|
{ selected = Selected
|
||||||
|
, disabled = False
|
||||||
|
, isLocked = True
|
||||||
|
, pennant = Nothing
|
||||||
|
}
|
||||||
|
|> Query.has [ Selector.class "checkbox-V3__Locked" ]
|
||||||
|
, test "appears unlocked when isLocked = False" <|
|
||||||
|
\() ->
|
||||||
|
premiumView
|
||||||
|
{ selected = Selected
|
||||||
|
, disabled = False
|
||||||
|
, isLocked = False
|
||||||
|
, pennant = Nothing
|
||||||
|
}
|
||||||
|
|> Query.hasNot [ Selector.class "checkbox-V3__Locked" ]
|
||||||
|
, test "appears with P flag when Premium pennant is passed in" <|
|
||||||
|
\() ->
|
||||||
|
premiumView
|
||||||
|
{ selected = Selected
|
||||||
|
, disabled = False
|
||||||
|
, isLocked = False
|
||||||
|
, pennant = Just PremiumCheckbox.Premium
|
||||||
|
}
|
||||||
|
|> Query.find [ Selector.tag "style" ]
|
||||||
|
|> Query.has [ Selector.text "iconPremiumFlag reference" ]
|
||||||
|
, test "appears with P+ flag when Premium pennant is passed in" <|
|
||||||
|
\() ->
|
||||||
|
premiumView
|
||||||
|
{ selected = Selected
|
||||||
|
, disabled = False
|
||||||
|
, isLocked = False
|
||||||
|
, pennant = Just PremiumCheckbox.PremiumWithWriting
|
||||||
|
}
|
||||||
|
|> Query.find [ Selector.tag "style" ]
|
||||||
|
|> Query.has [ Selector.text "iconPremiumWritingFlag reference" ]
|
||||||
|
, test "is not disabled when disabled = False" <|
|
||||||
|
\() ->
|
||||||
|
premiumView
|
||||||
|
{ selected = Selected
|
||||||
|
, disabled = False
|
||||||
|
, isLocked = False
|
||||||
|
, pennant = Nothing
|
||||||
|
}
|
||||||
|
|> Query.has [ Selector.disabled False ]
|
||||||
|
, test "is disabled when disabled = True" <|
|
||||||
|
\() ->
|
||||||
|
premiumView
|
||||||
|
{ selected = Selected
|
||||||
|
, disabled = True
|
||||||
|
, isLocked = False
|
||||||
|
, pennant = Nothing
|
||||||
|
}
|
||||||
|
|> Query.has [ Selector.disabled True ]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
assets =
|
||||||
|
{ checkboxUnchecked_svg = Asset "checkboxUnchecked reference"
|
||||||
|
, checkboxChecked_svg = Asset "checkboxChecked reference"
|
||||||
|
, checkboxCheckedPartially_svg = Asset "checkboxCheckedPartially reference"
|
||||||
|
, iconPremiumUnlocked_png = Asset "iconPremiumUnlocked reference"
|
||||||
|
, iconCheck_png = Asset "iconCheck reference"
|
||||||
|
, iconPremiumLocked_png = Asset "iconPremiumLocked reference"
|
||||||
|
, checkboxLockOnInside_svg = Asset "checkboxLockOnInside reference"
|
||||||
|
, iconPremiumKey_png = Asset "iconPremiumKey reference"
|
||||||
|
, iconPremiumFlag_svg = Asset "iconPremiumFlag reference"
|
||||||
|
, iconPremiumWithWritingFlag_svg = Asset "iconPremiumWritingFlag reference"
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user