NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-25 14:42:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into tessa/remove-deprecated-styles

Browse Source
This commit is contained in:
Brooke 2019-08-14 10:56:37 -07:00 committed by GitHub
commit 8d433258c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 70 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -19,7 +19,7 @@ checks:
.PHONY: diff .PHONY: diff
diff: node_modules diff: node_modules
if (npx 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 MAJORLYDISABLEDFORABIT); then echo "MAJOR changes are not allowed!"; exit 1; fi
.PHONY: format .PHONY: format
format: node_modules format: node_modules

2
elm.json
View File

@ -85,7 +85,6 @@
], ],
"elm-version": "0.19.0 <= v < 0.20.0", "elm-version": "0.19.0 <= v < 0.20.0",
"dependencies": { "dependencies": {
"avh4/elm-color": "1.0.0 <= v < 2.0.0",
"elm/browser": "1.0.1 <= v < 2.0.0", "elm/browser": "1.0.1 <= v < 2.0.0",
"elm/core": "1.0.0 <= v < 2.0.0", "elm/core": "1.0.0 <= v < 2.0.0",
"elm/html": "1.0.0 <= v < 2.0.0", "elm/html": "1.0.0 <= v < 2.0.0",
@ -97,6 +96,7 @@
"tesk9/accessible-html": "4.0.0 <= v < 5.0.0", "tesk9/accessible-html": "4.0.0 <= v < 5.0.0",
"tesk9/accessible-html-with-css": "2.1.1 <= v < 3.0.0", "tesk9/accessible-html-with-css": "2.1.1 <= v < 3.0.0",
"tesk9/modal": "5.0.1 <= v < 6.0.0", "tesk9/modal": "5.0.1 <= v < 6.0.0",
"tesk9/palette": "2.0.0 <= v < 3.0.0",
"wernerdegroot/listzipper": "3.1.1 <= v < 4.0.0" "wernerdegroot/listzipper": "3.1.1 <= v < 4.0.0"
}, },
"test-dependencies": { "test-dependencies": {

82
package-lock.json generated
View File

@ -813,8 +813,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -835,14 +834,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -857,20 +854,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -987,8 +981,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -1000,7 +993,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -1015,7 +1007,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -1023,14 +1014,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -1049,7 +1038,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -1130,8 +1118,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -1143,7 +1130,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -1229,8 +1215,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -1266,7 +1251,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -1286,7 +1270,6 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -1330,14 +1313,12 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
} }
} }
} }
@ -2241,8 +2222,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -2263,14 +2243,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -2285,20 +2263,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -2415,8 +2390,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -2428,7 +2402,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -2443,7 +2416,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -2451,14 +2423,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -2477,7 +2447,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -2558,8 +2527,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -2571,7 +2539,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -2657,8 +2624,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.1", "version": "5.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -2694,7 +2660,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -2714,7 +2679,6 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -2758,14 +2722,12 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.2", "version": "3.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
} }
} }
}, },

2
script/format-axe-report.sh
View File

@ -14,7 +14,7 @@ jq -r -f script/axe-report.jq "$JSON_FILE"
# expect. This failure reminds us to come back and ratchet down the number of # expect. This failure reminds us to come back and ratchet down the number of
# failures to the correct value. # failures to the correct value.
NUM_ERRORS="$(jq '.violations | map(.nodes | length) | add' "$JSON_FILE")" NUM_ERRORS="$(jq '.violations | map(.nodes | length) | add' "$JSON_FILE")"
TARGET_ERRORS=161 TARGET_ERRORS=98
if test "$NUM_ERRORS" -ne "$TARGET_ERRORS"; then if test "$NUM_ERRORS" -ne "$TARGET_ERRORS"; then
echo "got $NUM_ERRORS errors, but expected $TARGET_ERRORS." echo "got $NUM_ERRORS errors, but expected $TARGET_ERRORS."
echo echo

38
src/Nri/Ui/Colors/Extra.elm
View File

@ -1,28 +1,40 @@
module Nri.Ui.Colors.Extra exposing (toCoreColor, withAlpha) module Nri.Ui.Colors.Extra exposing
( toCssColor, fromCssColor
, withAlpha
)
{-| Helpers for working with colors. {-| Helpers for working with colors.
# Conversions # Conversions
@docs toCoreColor, withAlpha @docs toCssColor, fromCssColor
@docs withAlpha
-} -}
import Color import Color
import Css exposing (..) import Css
{-| Convert a Css.Color into a Color.Color {-| -}
toCoreColor (Css.hex "#FFFFFF") -- "RGBA 255 255 255 1 : Color.Color" fromCssColor : Css.Color -> Color.Color
-} fromCssColor color =
toCoreColor : Css.Color -> Color.Color Color.fromRGB
toCoreColor cssColor = ( toFloat color.red
Color.rgba , toFloat color.green
(toFloat cssColor.red / 255) , toFloat color.blue
(toFloat cssColor.green / 255) )
(toFloat cssColor.blue / 255)
cssColor.alpha
{-| -}
toCssColor : Color.Color -> Css.Color
toCssColor color =
let
( red, green, blue ) =
Color.toRGB color
in
Css.rgb (round red) (round green) (round blue)
{-| Add an alpha property to a Css.Color {-| Add an alpha property to a Css.Color

2
src/Nri/Ui/Modal/V5.elm
View File

@ -200,7 +200,7 @@ viewTitle color { visibleTitle, title } =
toCssString : Css.Color -> String toCssString : Css.Color -> String
toCssString = toCssString =
Color.toCssString << Nri.Ui.Colors.Extra.toCoreColor Nri.Ui.Colors.Extra.fromCssColor >> Color.toRGBString
{-| -} {-| -}

15
src/Nri/Ui/Modal/V6.elm
View File

@ -84,6 +84,7 @@ import Accessibility.Styled as Html exposing (..)
import Accessibility.Styled.Style import Accessibility.Styled.Style
import Accessibility.Styled.Widget as Widget import Accessibility.Styled.Widget as Widget
import Color import Color
import Color.Transparent
import Css import Css
import Css.Global import Css.Global
import Html as Root import Html as Root
@ -205,7 +206,10 @@ view { overlayColor, titleColor } config model =
toOverlayColor : Css.Color -> String toOverlayColor : Css.Color -> String
toOverlayColor color = toOverlayColor color =
toCssString (Nri.Ui.Colors.Extra.withAlpha 0.9 color) color
|> Nri.Ui.Colors.Extra.fromCssColor
|> Color.Transparent.fromColor (Color.Transparent.customOpacity 0.9)
|> Color.Transparent.toRGBAString
modalStyles : List (Root.Attribute Never) modalStyles : List (Root.Attribute Never)
@ -214,7 +218,7 @@ modalStyles =
, style "max-height" "calc(100vh - 100px)" , style "max-height" "calc(100vh - 100px)"
, style "padding" "40px 0 40px 0" , style "padding" "40px 0 40px 0"
, style "margin" "75px auto" , style "margin" "75px auto"
, style "background-color" (toCssString Colors.white) , style "background-color" ((Color.toRGBString << Nri.Ui.Colors.Extra.fromCssColor) Colors.white)
, style "border-radius" "20px" , style "border-radius" "20px"
, style "box-shadow" "0 1px 10px 0 rgba(0, 0, 0, 0.35)" , style "box-shadow" "0 1px 10px 0 rgba(0, 0, 0, 0.35)"
, style "position" "relative" -- required for closeButtonContainer , style "position" "relative" -- required for closeButtonContainer
@ -231,7 +235,7 @@ viewTitle color { visibleTitle, title } =
, style "margin" "0 49px" , style "margin" "0 49px"
, style "font-size" "20px" , style "font-size" "20px"
, style "text-align" "center" , style "text-align" "center"
, style "color" (toCssString color) , style "color" ((Color.toRGBString << Nri.Ui.Colors.Extra.fromCssColor) color)
] ]
else else
@ -239,11 +243,6 @@ viewTitle color { visibleTitle, title } =
) )
toCssString : Css.Color -> String
toCssString =
Color.toCssString << Nri.Ui.Colors.Extra.toCoreColor
{-| -} {-| -}
viewContent : List (Html msg) -> Html msg viewContent : List (Html msg) -> Html msg
viewContent = viewContent =

4
src/Nri/Ui/SlideModal/V2.elm
View File

@ -385,8 +385,8 @@ dot type_ =
] ]
animateBackgroundColor color = animateBackgroundColor color =
Nri.Ui.Colors.Extra.toCoreColor color Nri.Ui.Colors.Extra.fromCssColor color
|> Color.toCssString |> Color.toRGBString
|> Css.Animations.property "background-color" |> Css.Animations.property "background-color"
in in
case type_ of case type_ of

2
src/Nri/Ui/SortableTable/V1.elm
View File

@ -359,4 +359,4 @@ sortArrow direction active =
toCssString : Css.Color -> String toCssString : Css.Color -> String
toCssString = toCssString =
Color.toCssString << Nri.Ui.Colors.Extra.toCoreColor Color.toRGBString << Nri.Ui.Colors.Extra.fromCssColor

2
src/Nri/Ui/SortableTable/V2.elm
View File

@ -365,4 +365,4 @@ sortArrow direction active =
toCssString : Css.Color -> String toCssString : Css.Color -> String
toCssString = toCssString =
Color.toCssString << Nri.Ui.Colors.Extra.toCoreColor Color.toRGBString << Nri.Ui.Colors.Extra.fromCssColor

8
styleguide-app/Examples/Colors.elm
View File

@ -6,10 +6,12 @@ module Examples.Colors exposing (example)
-} -}
import Color exposing (highContrast)
import Css import Css
import Html.Styled as Html import Html.Styled as Html
import Html.Styled.Attributes as Attributes exposing (css) import Html.Styled.Attributes as Attributes exposing (css)
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.Colors.Extra
import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Colors.V1 as Colors
@ -103,8 +105,10 @@ viewColor ( name, color, description ) =
-- Colors -- Colors
, Css.backgroundColor color , Css.backgroundColor color
, Css.color Colors.gray20 , Nri.Ui.Colors.Extra.fromCssColor color
, Css.textShadow4 Css.zero Css.zero (Css.px 6) Colors.white |> highContrast
|> Nri.Ui.Colors.Extra.toCssColor
|> Css.color
] ]
] ]
[ Html.div [ Html.div

4
styleguide-app/elm.json
View File

@ -7,7 +7,6 @@
"elm-version": "0.19.0", "elm-version": "0.19.0",
"dependencies": { "dependencies": {
"direct": { "direct": {
"avh4/elm-color": "1.0.0",
"avh4/elm-debug-controls": "2.0.0", "avh4/elm-debug-controls": "2.0.0",
"elm/browser": "1.0.1", "elm/browser": "1.0.1",
"elm/core": "1.0.2", "elm/core": "1.0.2",
@ -23,6 +22,7 @@
"tesk9/accessible-html": "4.0.0", "tesk9/accessible-html": "4.0.0",
"tesk9/accessible-html-with-css": "2.1.1", "tesk9/accessible-html-with-css": "2.1.1",
"tesk9/modal": "5.0.1", "tesk9/modal": "5.0.1",
"tesk9/palette": "2.0.0",
"wernerdegroot/listzipper": "3.2.0" "wernerdegroot/listzipper": "3.2.0"
}, },
"indirect": { "indirect": {
@ -39,4 +39,4 @@
"direct": {}, "direct": {},
"indirect": {} "indirect": {}
} }
} }