From 306e41451424012b6a24d0535b6b8278c7e98d1e Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 3 Apr 2019 17:11:41 -0700 Subject: [PATCH 01/29] Adds new version of Checkbox Turns out that the Checkbox is tightly-tied to the premium checkbox version --- src/Nri/Ui/Checkbox/V5.elm | 332 +++++++++++++++++++++++++++ src/Nri/Ui/PremiumCheckbox/V4.elm | 119 ++++++++++ styleguide-app/Examples/Checkbox.elm | 6 +- 3 files changed, 454 insertions(+), 3 deletions(-) create mode 100644 src/Nri/Ui/Checkbox/V5.elm create mode 100644 src/Nri/Ui/PremiumCheckbox/V4.elm diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm new file mode 100644 index 00000000..cf3844f4 --- /dev/null +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -0,0 +1,332 @@ +module Nri.Ui.Checkbox.V5 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 (calc (pct 50) minus (px 12)) + , 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" diff --git a/src/Nri/Ui/PremiumCheckbox/V4.elm b/src/Nri/Ui/PremiumCheckbox/V4.elm new file mode 100644 index 00000000..bd84a739 --- /dev/null +++ b/src/Nri/Ui/PremiumCheckbox/V4.elm @@ -0,0 +1,119 @@ +module Nri.Ui.PremiumCheckbox.V4 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.V5 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" diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index 8327d005..9d149f26 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/styleguide-app/Examples/Checkbox.elm @@ -11,9 +11,9 @@ import Css import Html.Styled as Html exposing (..) import Html.Styled.Attributes exposing (css) import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) -import Nri.Ui.Checkbox.V4 as Checkbox +import Nri.Ui.Checkbox.V5 as Checkbox import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) -import Nri.Ui.PremiumCheckbox.V3 as PremiumCheckbox +import Nri.Ui.PremiumCheckbox.V4 as PremiumCheckbox import Set exposing (Set) @@ -32,7 +32,7 @@ type alias State = {-| -} example : (Msg -> msg) -> State -> ModuleExample msg example parentMessage state = - { filename = "Nri/Checkbox.elm" + { filename = "Nri.Ui.Checkbox.V5.elm" , category = Inputs , content = [ viewInteractableCheckbox "styleguide-checkbox-interactable" state From 1d51b1c659d938c372fdb26e75091d8507a842dc Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 3 Apr 2019 17:17:36 -0700 Subject: [PATCH 02/29] :skull: remove noOpMsg --- src/Nri/Ui/Checkbox/V5.elm | 13 +++++++------ src/Nri/Ui/PremiumCheckbox/V4.elm | 2 -- styleguide-app/Examples/Checkbox.elm | 9 --------- 3 files changed, 7 insertions(+), 17 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index cf3844f4..83cde02f 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -6,6 +6,11 @@ module Nri.Ui.Checkbox.V5 exposing {-| + +# Changes from V5: + + - Removes `noOpMsg` from Model + @docs Model, Theme, IsSelected @docs view, viewWithLabel, Assets @@ -41,7 +46,6 @@ type alias Model msg = , selected : IsSelected , disabled : Bool , theme : Theme - , noOpMsg : msg } @@ -265,11 +269,8 @@ viewCheckbox model config = ] , 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 )) + , Events.stopPropagationOn "click" + (Json.Decode.fail "stop click propagation") ] [ Html.checkbox model.identifier (selectedToMaybe model.selected) diff --git a/src/Nri/Ui/PremiumCheckbox/V4.elm b/src/Nri/Ui/PremiumCheckbox/V4.elm index bd84a739..02e7be4b 100644 --- a/src/Nri/Ui/PremiumCheckbox/V4.elm +++ b/src/Nri/Ui/PremiumCheckbox/V4.elm @@ -30,7 +30,6 @@ type alias PremiumConfig msg = , pennant : Maybe Pennant , onChange : Bool -> msg , onLockedClick : msg - , noOpMsg : msg } @@ -69,7 +68,6 @@ premium assets config = else Checkbox.Square - , noOpMsg = config.noOpMsg } , case config.pennant of Just pennant -> diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index 9d149f26..95b2346e 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/styleguide-app/Examples/Checkbox.elm @@ -94,7 +94,6 @@ viewInteractableCheckbox id state = , selected = isSelected id state , disabled = False , theme = Checkbox.Square - , noOpMsg = NoOp } @@ -108,7 +107,6 @@ viewIndeterminateCheckbox id state = , selected = Checkbox.PartiallySelected , disabled = True , theme = Checkbox.Square - , noOpMsg = NoOp } @@ -122,7 +120,6 @@ viewLockedOnInsideCheckbox id state = , selected = Checkbox.NotSelected , disabled = True , theme = Checkbox.Locked - , noOpMsg = NoOp } @@ -136,7 +133,6 @@ viewDisabledCheckbox id state = , selected = isSelected id state , disabled = True , theme = Checkbox.Square - , noOpMsg = NoOp } @@ -153,7 +149,6 @@ viewMultilineCheckboxes = , selected = Checkbox.NotSelected , disabled = False , theme = Checkbox.Square - , noOpMsg = NoOp } , Checkbox.viewWithLabel assets @@ -163,7 +158,6 @@ viewMultilineCheckboxes = , selected = Checkbox.PartiallySelected , disabled = True , theme = Checkbox.Square - , noOpMsg = NoOp } , Checkbox.viewWithLabel assets @@ -173,7 +167,6 @@ viewMultilineCheckboxes = , selected = Checkbox.NotSelected , disabled = True , theme = Checkbox.Locked - , noOpMsg = NoOp } , Checkbox.viewWithLabel assets @@ -183,7 +176,6 @@ viewMultilineCheckboxes = , selected = Checkbox.NotSelected , disabled = True , theme = Checkbox.Square - , noOpMsg = NoOp } ] @@ -207,7 +199,6 @@ viewPremiumCheckboxes state = , pennant = config.pennant , onChange = ToggleCheck config.label , onLockedClick = NoOp - , noOpMsg = NoOp } in Html.div [] From 59d0c82157b904c480648d0c6e13b7c7390a52a8 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 3 Apr 2019 17:39:46 -0700 Subject: [PATCH 03/29] Adds elm svg icons --- src/Nri/Ui/Checkbox/V5.elm | 346 +++++++++++++++++++++++++++++++++++++ 1 file changed, 346 insertions(+) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 83cde02f..3e541aae 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -36,6 +36,8 @@ 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) +import Svg +import Svg.Attributes {-| -} @@ -331,3 +333,347 @@ backgroundImage : Asset -> Style backgroundImage = Nri.Ui.AssetPath.Css.url >> property "background-image" + + +checkboxUnchecked : Html.Html msg +checkboxUnchecked = + Svg.svg + [ Svg.Attributes.width "27px" + , Svg.Attributes.height "27px" + , Svg.Attributes.viewBox "0 0 27 27" + ] + [ Svg.defs [] + [ Svg.rect + [ Svg.Attributes.id "path-1" + , Svg.Attributes.x "0" + , Svg.Attributes.y "0" + , Svg.Attributes.width "27" + , Svg.Attributes.height "27" + , Svg.Attributes.rx "4" + ] + [] + , Svg.filter + [ Svg.Attributes.x "-3.7%" + , Svg.Attributes.y "-3.7%" + , Svg.Attributes.width "107.4%" + , Svg.Attributes.height "107.4%" + , Svg.Attributes.filterUnits "objectBoundingBox" + , Svg.Attributes.id "filter-2" + ] + [ Svg.feOffset + [ Svg.Attributes.dx "0" + , Svg.Attributes.dy "2" + , Svg.Attributes.in_ "SourceAlpha" + , Svg.Attributes.result "shadowOffsetInner1" + ] + [] + , Svg.feComposite + [ Svg.Attributes.in_ "shadowOffsetInner1" + , Svg.Attributes.in2 "SourceAlpha" + , Svg.Attributes.operator "arithmetic" + , Svg.Attributes.k2 "-1" + , Svg.Attributes.k3 "1" + , Svg.Attributes.result "shadowInnerInner1" + ] + [] + , Svg.feColorMatrix + [ Svg.Attributes.values "0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0.1 0" + , Svg.Attributes.in_ "shadowInnerInner1" + ] + [] + ] + ] + , Svg.g + [ Svg.Attributes.id "Page-1" + , Svg.Attributes.stroke "none" + , Svg.Attributes.strokeWidth "1" + , Svg.Attributes.fill "none" + , Svg.Attributes.fillRule "evenodd" + ] + [ Svg.g + [ Svg.Attributes.id "checkbox_unchecked" + ] + [ Svg.use [ Svg.Attributes.fill "#EBEBEB", Svg.Attributes.fillRule "evenodd" ] [] + , Svg.use + [ Svg.Attributes.fill "black" + , Svg.Attributes.fillOpacity "1" + , Svg.Attributes.filter "url(#filter-2)" + ] + [] + ] + ] + ] + |> Html.Styled.fromUnstyled + + +checkboxChecked : Html.Html msg +checkboxChecked = + Svg.svg + [ Svg.Attributes.width "27px" + , Svg.Attributes.height "27px" + , Svg.Attributes.viewBox "0 0 27 27" + ] + [ Svg.defs [] + [ Svg.rect + [ Svg.Attributes.id "path-1" + , Svg.Attributes.x "0" + , Svg.Attributes.y "0" + , Svg.Attributes.width "27" + , Svg.Attributes.height "27" + , Svg.Attributes.rx "4" + ] + [] + , Svg.filter + [ Svg.Attributes.x "-3.7%" + , Svg.Attributes.y "-3.7%" + , Svg.Attributes.width "107.4%" + , Svg.Attributes.height "107.4%" + , Svg.Attributes.filterUnits "objectBoundingBox" + , Svg.Attributes.id "filter-2" + ] + [ Svg.feOffset + [ Svg.Attributes.dx "0" + , Svg.Attributes.dy "2" + , Svg.Attributes.in_ "SourceAlpha" + , Svg.Attributes.result "shadowOffsetInner1" + ] + [] + , Svg.feComposite + [ Svg.Attributes.in_ "shadowOffsetInner1" + , Svg.Attributes.in2 "SourceAlpha" + , Svg.Attributes.operator "arithmetic" + , Svg.Attributes.k2 "-1" + , Svg.Attributes.k3 "1" + , Svg.Attributes.result "shadowInnerInner1" + ] + [] + , Svg.feColorMatrix + [ Svg.Attributes.values "0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0.1 0" + , Svg.Attributes.in_ "shadowInnerInner1" + ] + [] + ] + ] + , Svg.g + [ Svg.Attributes.id "Page-1" + , Svg.Attributes.stroke "none" + , Svg.Attributes.strokeWidth "1" + , Svg.Attributes.fill "none" + , Svg.Attributes.fillRule "evenodd" + ] + [ Svg.g + [ Svg.Attributes.id "checkbox_checked" + ] + [ Svg.g [] + [ Svg.use + [ Svg.Attributes.fill "#D4F0FF" + , Svg.Attributes.fillRule "evenodd" + ] + [] + , Svg.use + [ Svg.Attributes.fill "black" + , Svg.Attributes.fillOpacity "1" + , Svg.Attributes.filter "url(#filter-2)" + ] + [] + ] + , Svg.g + [ Svg.Attributes.id "icon/check-blue" + , Svg.Attributes.transform "translate(3.600000, 3.600000)" + , Svg.Attributes.fill "#146AFF" + ] + [ Svg.path + [ Svg.Attributes.d "M7.04980639,17.8647896 C6.57427586,17.8647896 6.11539815,17.6816086 5.77123987,17.3513276 L0.571859358,12.3786105 C-0.167340825,11.672716 -0.193245212,10.5014676 0.513574487,9.7631926 C1.21761872,9.02491757 2.38979222,8.99808803 3.12899241,9.70490773 L6.96746745,13.3750043 L16.7917062,2.73292703 C17.4855737,1.98077465 18.6558969,1.93451682 19.4061989,2.62745917 C20.1574262,3.32132667 20.2046091,4.49164987 19.5116668,5.24195193 L8.4097867,17.2689887 C8.07210452,17.6344256 7.60397524,17.8481368 7.10716611,17.8638644 C7.08866297,17.8647896 7.06923468,17.8647896 7.04980639,17.8647896" + ] + [] + ] + ] + ] + ] + |> Html.Styled.fromUnstyled + + +checkboxCheckedPartially : Html.Html msg +checkboxCheckedPartially = + Svg.svg + [ Svg.Attributes.width "27px" + , Svg.Attributes.height "27px" + , Svg.Attributes.viewBox "0 0 27 27" + ] + [ Svg.defs [] + [ Svg.rect + [ Svg.Attributes.id "path-1" + , Svg.Attributes.x "0" + , Svg.Attributes.y "0" + , Svg.Attributes.width "27" + , Svg.Attributes.height "27" + , Svg.Attributes.rx "4" + ] + [] + , Svg.filter + [ Svg.Attributes.x "-3.7%" + , Svg.Attributes.y "-3.7%" + , Svg.Attributes.width "107.4%" + , Svg.Attributes.height "107.4%" + , Svg.Attributes.filterUnits "objectBoundingBox" + , Svg.Attributes.id "filter-2" + ] + [ Svg.feOffset + [ Svg.Attributes.dx "0" + , Svg.Attributes.dy "2" + , Svg.Attributes.in_ "SourceAlpha" + , Svg.Attributes.result "shadowOffsetInner1" + ] + [] + , Svg.feComposite + [ Svg.Attributes.in_ "shadowOffsetInner1" + , Svg.Attributes.in2 "SourceAlpha" + , Svg.Attributes.operator "arithmetic" + , Svg.Attributes.k2 "-1" + , Svg.Attributes.k3 "1" + , Svg.Attributes.result "shadowInnerInner1" + ] + [] + , Svg.feColorMatrix [ Svg.Attributes.values "0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0.1 0", Svg.Attributes.in_ "shadowInnerInner1" ] [] + ] + ] + , Svg.g + [ Svg.Attributes.id "Page-1" + , Svg.Attributes.stroke "none" + , Svg.Attributes.strokeWidth "1" + , Svg.Attributes.fill "none" + , Svg.Attributes.fillRule "evenodd" + ] + [ Svg.g + [ Svg.Attributes.id "checkbox_checkedPartially" + ] + [ Svg.g + [ Svg.Attributes.id "checkbox_checked" + ] + [ Svg.use + [ Svg.Attributes.fill "#EBEBEB" + , Svg.Attributes.fillRule "evenodd" + ] + [] + , Svg.use + [ Svg.Attributes.fill "black" + , Svg.Attributes.fillOpacity "1" + , Svg.Attributes.filter "url(#filter-2)" + ] + [] + ] + , Svg.path + [ Svg.Attributes.d "M22.2879231,10.8937777 C22.4823276,11.0881822 22.5430781,11.3676344 22.4701764,11.7321429 C22.1785697,13.2630784 21.6196651,14.4294879 20.793446,15.2314064 C19.9672268,16.033325 18.9830688,16.4342783 17.8409423,16.4342783 C16.9175209,16.4342783 16.073089,16.3006272 15.3076213,16.033321 C14.5421536,15.7660148 13.612671,15.3772116 12.5191457,14.8668998 C11.668626,14.4537903 10.9821454,14.1500378 10.4596833,13.9556333 C9.93722115,13.7612288 9.40869184,13.664028 8.87407945,13.664028 C7.53754849,13.664028 6.68704155,14.3201333 6.32253311,15.6323637 C6.27393198,15.8267682 6.17065614,15.9907946 6.01270248,16.1244477 C5.85474882,16.2581008 5.66642228,16.3249263 5.44771721,16.3249263 C5.20471159,16.3249263 4.9860098,16.2277255 4.7916053,16.033321 C4.59720079,15.8389165 4.5,15.6202147 4.5,15.3772091 C4.5,14.6238916 4.71262674,13.8705855 5.13788659,13.117268 C5.56314644,12.3639506 6.1342011,11.7503706 6.85106771,11.2765096 C7.56793431,10.8026486 8.32731551,10.5657217 9.12923409,10.5657217 C10.076956,10.5657217 10.933538,10.6993728 11.6990058,10.966679 C12.4644735,11.2339852 13.3939561,11.6227884 14.4874814,12.1331002 C15.3380011,12.5462097 16.0244817,12.8499622 16.5469438,13.0443667 C17.0694059,13.2387712 17.5979352,13.335972 18.1325476,13.335972 C18.8129634,13.335972 19.2868173,13.2266211 19.5541234,13.0079161 C19.8214296,12.789211 20.1008819,12.4004078 20.3924887,11.8414949 C20.4653904,11.6470904 20.5747413,11.4162385 20.7205446,11.1489323 C20.9149491,10.7844239 21.2065515,10.6021724 21.5953605,10.6021724 C21.8626667,10.6021724 22.0935186,10.6993732 22.2879231,10.8937777 Z" + , Svg.Attributes.id "~" + , Svg.Attributes.fill "#146AFF" + ] + [] + ] + ] + ] + |> Html.Styled.fromUnstyled + + +checkboxLockOnInside : Html.Html msg +checkboxLockOnInside = + Svg.svg + [ Svg.Attributes.width "27px" + , Svg.Attributes.height "27px" + , Svg.Attributes.viewBox "0 0 27 27" + ] + [ Svg.defs [] + [ Svg.rect + [ Svg.Attributes.id "path-1" + , Svg.Attributes.x "0" + , Svg.Attributes.y "0" + , Svg.Attributes.width "27" + , Svg.Attributes.height "27" + , Svg.Attributes.rx "4" + ] + [] + , Svg.filter + [ Svg.Attributes.x "-3.7%" + , Svg.Attributes.y "-3.7%" + , Svg.Attributes.width "107.4%" + , Svg.Attributes.height "107.4%" + , Svg.Attributes.filterUnits "objectBoundingBox" + , Svg.Attributes.id "filter-2" + ] + [ Svg.feOffset + [ Svg.Attributes.dx "0" + , Svg.Attributes.dy "2" + , Svg.Attributes.in_ "SourceAlpha" + , Svg.Attributes.result "shadowOffsetInner1" + ] + [] + , Svg.feComposite + [ Svg.Attributes.in_ "shadowOffsetInner1" + , Svg.Attributes.in2 "SourceAlpha" + , Svg.Attributes.operator "arithmetic" + , Svg.Attributes.k2 "-1" + , Svg.Attributes.k3 "1" + , Svg.Attributes.result "shadowInnerInner1" + ] + [] + , Svg.feColorMatrix + [ Svg.Attributes.values "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" + , Svg.Attributes.in_ "shadowInnerInner1" + ] + [] + ] + ] + , Svg.g + [ Svg.Attributes.id "Page-1" + , Svg.Attributes.stroke "none" + , Svg.Attributes.strokeWidth "1" + , Svg.Attributes.fill "none" + , Svg.Attributes.fillRule "evenodd" + ] + [ Svg.g + [ Svg.Attributes.id "checkbox_lock_on_inside" + ] + [ Svg.g + [ Svg.Attributes.id "checkbox_checked" + ] + [ Svg.use + [ Svg.Attributes.fill "#EBEBEB" + , Svg.Attributes.fillRule "evenodd" + ] + [] + , Svg.use + [ Svg.Attributes.fill "black" + , Svg.Attributes.fillOpacity "1" + , Svg.Attributes.filter "url(#filter-2)" + ] + [] + ] + , Svg.g + [ Svg.Attributes.id "icon/premium-lock-shadow" + , Svg.Attributes.transform "translate(4.050000, 4.050000)" + ] + [ Svg.g + [ Svg.Attributes.id "icon_premium_locked" + , Svg.Attributes.transform "translate(3.040000, 0.271429)" + ] + [ Svg.path + [ Svg.Attributes.d "M10.8889406,8.4420254 L10.8889406,5.41406583 C10.8889406,2.93752663 8.90203465,0.922857143 6.46010875,0.922857143 C4.01774785,0.922857143 2.03105941,2.93752663 2.03105941,5.41406583 L2.03105941,8.4420254 L1.39812057,8.4420254 C0.626196192,8.4420254 0,9.0763794 0,9.85917577 L0,17.0399925 C0,17.8227889 0.626196192,18.4571429 1.39812057,18.4571429 L11.5223144,18.4571429 C12.2942388,18.4571429 12.92,17.8227889 12.92,17.0399925 L12.92,9.85939634 C12.92,9.07659997 12.2942388,8.4420254 11.5223144,8.4420254 L10.8889406,8.4420254 Z M6.8875056,13.8949112 L6.8875056,15.5789491 C6.8875056,15.8187066 6.69588391,16.0128066 6.46010875,16.0128066 C6.22389859,16.0128066 6.0322769,15.8187066 6.0322769,15.5789491 L6.0322769,13.8949112 C5.54876383,13.7173539 5.20271376,13.2490877 5.20271376,12.6972262 C5.20271376,11.9933932 5.76561607,11.4221217 6.46010875,11.4221217 C7.15394892,11.4221217 7.71772125,11.9933932 7.71772125,12.6972262 C7.71772125,13.2497494 7.37101867,13.7180156 6.8875056,13.8949112 L6.8875056,13.8949112 Z M9.21176142,8.4420254 L3.70823858,8.4420254 L3.70823858,5.41406583 C3.70823858,3.87538241 4.94279558,2.62343759 6.46010875,2.62343759 C7.97720442,2.62343759 9.21176142,3.87538241 9.21176142,5.41406583 L9.21176142,8.4420254 L9.21176142,8.4420254 Z" + , Svg.Attributes.id "icon_premium_locked-copy" + , Svg.Attributes.fill "#E68900" + ] + [] + , Svg.rect + [ Svg.Attributes.id "Rectangle-9" + , Svg.Attributes.fill "#FFFFFF" + , Svg.Attributes.x "0.922857143" + , Svg.Attributes.y "10.1514286" + , Svg.Attributes.width "10.1514286" + , Svg.Attributes.height "5.53714286" + ] + [] + , Svg.path [ Svg.Attributes.d "M10.8889406,7.51916826 L10.8889406,4.49120869 C10.8889406,2.01466949 8.90203465,0 6.46010875,0 C4.01774785,0 2.03105941,2.01466949 2.03105941,4.49120869 L2.03105941,7.51916826 L1.39812057,7.51916826 C0.626196192,7.51916826 0,8.15352226 0,8.93631863 L0,16.1171353 C0,16.8999317 0.626196192,17.5342857 1.39812057,17.5342857 L11.5223144,17.5342857 C12.2942388,17.5342857 12.92,16.8999317 12.92,16.1171353 L12.92,8.9365392 C12.92,8.15374283 12.2942388,7.51916826 11.5223144,7.51916826 L10.8889406,7.51916826 Z M6.8875056,12.9720541 L6.8875056,14.6560919 C6.8875056,14.8958495 6.69588391,15.0899495 6.46010875,15.0899495 C6.22389859,15.0899495 6.0322769,14.8958495 6.0322769,14.6560919 L6.0322769,12.9720541 C5.54876383,12.7944967 5.20271376,12.3262305 5.20271376,11.774369 C5.20271376,11.0705361 5.76561607,10.4992645 6.46010875,10.4992645 C7.15394892,10.4992645 7.71772125,11.0705361 7.71772125,11.774369 C7.71772125,12.3268922 7.37101867,12.7951584 6.8875056,12.9720541 L6.8875056,12.9720541 Z M9.21176142,7.51916826 L3.70823858,7.51916826 L3.70823858,4.49120869 C3.70823858,2.95252527 4.94279558,1.70058044 6.46010875,1.70058044 C7.97720442,1.70058044 9.21176142,2.95252527 9.21176142,4.49120869 L9.21176142,7.51916826 L9.21176142,7.51916826 Z", Svg.Attributes.fill "#FEC900" ] [] + ] + ] + ] + ] + ] + |> Html.Styled.fromUnstyled From 0122cb33a4f23d0b9140782d386fc2fb4e3a8f3d Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 3 Apr 2019 17:49:09 -0700 Subject: [PATCH 04/29] Begin removing Asset dependency --- src/Nri/Ui/Checkbox/V5.elm | 37 +++++++++++++++++++++++-------------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 3e541aae..43ba25d0 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -125,13 +125,13 @@ buildCheckbox assets model labelContent = squareLabelStyles model <| case model.selected of Selected -> - assets.checkboxChecked_svg + checkboxChecked NotSelected -> - assets.checkboxUnchecked_svg + checkboxUnchecked PartiallySelected -> - assets.checkboxCheckedPartially_svg + checkboxCheckedPartially , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -144,7 +144,7 @@ buildCheckbox assets model labelContent = } -squareLabelStyles : { b | disabled : Bool } -> Asset -> Html.Styled.Attribute msg +squareLabelStyles : { b | disabled : Bool } -> Icon -> Html.Styled.Attribute msg squareLabelStyles model image = let baseStyles = @@ -165,7 +165,7 @@ squareLabelStyles model image = ) -lockLabelStyles : { b | disabled : Bool } -> Asset -> Html.Styled.Attribute msg +lockLabelStyles : { b | disabled : Bool } -> Icon -> Html.Styled.Attribute msg lockLabelStyles model image = let baseStyles = @@ -206,7 +206,7 @@ textStyle = ] -addIcon : Asset -> Style +addIcon : Icon -> Style addIcon icon = batch [ position relative @@ -329,13 +329,18 @@ type alias Assets r = } -backgroundImage : Asset -> Style -backgroundImage = - Nri.Ui.AssetPath.Css.url - >> property "background-image" +backgroundImage : Icon -> Style +backgroundImage (Icon icon) = + -- Nri.Ui.AssetPath.Css.url + -- >> property "background-image" + property "background-image" "url(todo)" -checkboxUnchecked : Html.Html msg +type Icon + = Icon (Html.Html Never) + + +checkboxUnchecked : Icon checkboxUnchecked = Svg.svg [ Svg.Attributes.width "27px" @@ -404,9 +409,10 @@ checkboxUnchecked = ] ] |> Html.Styled.fromUnstyled + |> Icon -checkboxChecked : Html.Html msg +checkboxChecked : Icon checkboxChecked = Svg.svg [ Svg.Attributes.width "27px" @@ -491,9 +497,10 @@ checkboxChecked = ] ] |> Html.Styled.fromUnstyled + |> Icon -checkboxCheckedPartially : Html.Html msg +checkboxCheckedPartially : Icon checkboxCheckedPartially = Svg.svg [ Svg.Attributes.width "27px" @@ -572,9 +579,10 @@ checkboxCheckedPartially = ] ] |> Html.Styled.fromUnstyled + |> Icon -checkboxLockOnInside : Html.Html msg +checkboxLockOnInside : Icon checkboxLockOnInside = Svg.svg [ Svg.Attributes.width "27px" @@ -677,3 +685,4 @@ checkboxLockOnInside = ] ] |> Html.Styled.fromUnstyled + |> Icon From fc355d991dae1e4191c4872d4d572daa3be27d0e Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 3 Apr 2019 17:51:47 -0700 Subject: [PATCH 05/29] :skull: remove first set of assets Note: not displaying backgrounds --- src/Nri/Ui/Checkbox/V5.elm | 34 +++++++++------------------- src/Nri/Ui/PremiumCheckbox/V4.elm | 2 +- styleguide-app/Examples/Checkbox.elm | 8 ------- 3 files changed, 12 insertions(+), 32 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 43ba25d0..0d31c55b 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -1,6 +1,6 @@ module Nri.Ui.Checkbox.V5 exposing ( Model, Theme(..), IsSelected(..) - , view, viewWithLabel, Assets + , view, viewWithLabel , selectedFromBool ) @@ -10,6 +10,7 @@ module Nri.Ui.Checkbox.V5 exposing # Changes from V5: - Removes `noOpMsg` from Model + - Removes dependency on external assets @docs Model, Theme, IsSelected @@ -30,8 +31,6 @@ 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 @@ -100,23 +99,23 @@ selectedToMaybe selected = {-| 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 <| +view : Model msg -> Html.Html msg +view model = + buildCheckbox 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 <| +viewWithLabel : Model msg -> Html.Html msg +viewWithLabel model = + buildCheckbox model <| Html.span [] [ Html.text model.label ] -buildCheckbox : Assets a -> Model msg -> Html.Html msg -> Html.Html msg -buildCheckbox assets model labelContent = +buildCheckbox : Model msg -> Html.Html msg -> Html.Html msg +buildCheckbox model labelContent = viewCheckbox model <| case model.theme of Square -> @@ -138,7 +137,7 @@ buildCheckbox assets model labelContent = Locked -> { containerClasses = toClassList [ "Locked" ] - , labelStyles = lockLabelStyles model assets.checkboxLockOnInside_svg + , labelStyles = lockLabelStyles model checkboxLockOnInside , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -318,17 +317,6 @@ viewLabel model content 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 : Icon -> Style backgroundImage (Icon icon) = -- Nri.Ui.AssetPath.Css.url diff --git a/src/Nri/Ui/PremiumCheckbox/V4.elm b/src/Nri/Ui/PremiumCheckbox/V4.elm index 02e7be4b..a2cbc698 100644 --- a/src/Nri/Ui/PremiumCheckbox/V4.elm +++ b/src/Nri/Ui/PremiumCheckbox/V4.elm @@ -51,7 +51,7 @@ premium assets config = , alignItems center ] ] - [ Checkbox.viewWithLabel assets + [ Checkbox.viewWithLabel { identifier = config.id , label = config.label , setterMsg = diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index 95b2346e..e4d257f7 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/styleguide-app/Examples/Checkbox.elm @@ -87,7 +87,6 @@ type alias PremiumExampleConfig = viewInteractableCheckbox : Id -> State -> Html Msg viewInteractableCheckbox id state = Checkbox.viewWithLabel - assets { identifier = id , label = "This is an interactable checkbox!" , setterMsg = ToggleCheck id @@ -100,7 +99,6 @@ viewInteractableCheckbox id state = viewIndeterminateCheckbox : Id -> State -> Html Msg viewIndeterminateCheckbox id state = Checkbox.viewWithLabel - assets { identifier = id , label = "This Checkbox is set in an indeterminate state" , setterMsg = ToggleCheck id @@ -113,7 +111,6 @@ viewIndeterminateCheckbox id state = viewLockedOnInsideCheckbox : Id -> State -> Html Msg viewLockedOnInsideCheckbox id state = Checkbox.viewWithLabel - assets { identifier = id , label = "I'm a locked Checkbox" , setterMsg = ToggleCheck id @@ -126,7 +123,6 @@ viewLockedOnInsideCheckbox id state = viewDisabledCheckbox : Id -> State -> Html Msg viewDisabledCheckbox id state = Checkbox.viewWithLabel - assets { identifier = id , label = "Disabled theme" , setterMsg = ToggleCheck id @@ -142,7 +138,6 @@ viewMultilineCheckboxes = [ css [ Css.width (Css.px 500) ] ] [ Html.h3 [] [ Html.text "Multiline Text in Checkboxes" ] , Checkbox.viewWithLabel - assets { identifier = "fake" , label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos." , setterMsg = ToggleCheck "fake" @@ -151,7 +146,6 @@ viewMultilineCheckboxes = , theme = Checkbox.Square } , Checkbox.viewWithLabel - assets { identifier = "fake" , label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos." , setterMsg = ToggleCheck "fake" @@ -160,7 +154,6 @@ viewMultilineCheckboxes = , theme = Checkbox.Square } , Checkbox.viewWithLabel - assets { identifier = "fake" , label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos." , setterMsg = ToggleCheck "fake" @@ -169,7 +162,6 @@ viewMultilineCheckboxes = , theme = Checkbox.Locked } , Checkbox.viewWithLabel - assets { identifier = "fake" , label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos." , setterMsg = ToggleCheck "fake" From 5eff08304a2f6f2868a5c3a1aa12a8a522069608 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 10:37:42 -0700 Subject: [PATCH 06/29] Pass through a list of styles rather than html attribute --- src/Nri/Ui/Checkbox/V5.elm | 115 +++++++++++++++++++------------------ 1 file changed, 59 insertions(+), 56 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 0d31c55b..c8ca1c5f 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -119,9 +119,8 @@ buildCheckbox model labelContent = viewCheckbox model <| case model.theme of Square -> - { containerClasses = toClassList [ "SquareClass" ] - , labelStyles = - squareLabelStyles model <| + let + squareIcon = case model.selected of Selected -> checkboxChecked @@ -131,60 +130,71 @@ buildCheckbox model labelContent = PartiallySelected -> checkboxCheckedPartially + in + { containerClasses = toClassList [ "SquareClass" ] + , labelStyles = + if model.disabled then + disabledSquareLabel squareIcon + + else + enabledSquareLabel squareIcon , labelClasses = labelClass model.selected , labelContent = labelContent } Locked -> { containerClasses = toClassList [ "Locked" ] - , labelStyles = lockLabelStyles model checkboxLockOnInside + , labelStyles = + if model.disabled then + disabledLockStyles checkboxLockOnInside + + else + enabledLockLabelStyles checkboxLockOnInside , labelClasses = labelClass model.selected , labelContent = labelContent } -squareLabelStyles : { b | disabled : Bool } -> Icon -> 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 ] - ) - ) +disabledSquareLabel : Icon -> List Style +disabledSquareLabel image = + [ positioning + , textStyle + , outline none + , iconStyle image + , cursor auto + , checkboxImageSelector [ opacity (num 0.4) ] + ] -lockLabelStyles : { b | disabled : Bool } -> Icon -> 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) ] - ] +enabledSquareLabel : Icon -> List Style +enabledSquareLabel image = + [ positioning + , textStyle + , outline none + , iconStyle image + , cursor pointer + ] - else - [ cursor pointer ] - ) - ) + +disabledLockStyles : Icon -> List Style +disabledLockStyles image = + [ positioning + , textStyle + , outline none + , iconStyle image + , cursor auto + , checkboxImageSelector [ opacity (num 0.4) ] + ] + + +enabledLockLabelStyles : Icon -> List Style +enabledLockLabelStyles image = + [ positioning + , textStyle + , outline none + , iconStyle image + , cursor pointer + ] positioning : Style @@ -205,12 +215,12 @@ textStyle = ] -addIcon : Icon -> Style -addIcon icon = +iconStyle : Icon -> Style +iconStyle icon = batch [ position relative , checkboxImageSelector - [ backgroundImage icon + [ property "background-image" "url(todo)" , backgroundRepeat noRepeat , backgroundSize (px 24) , property "content" "''" @@ -250,7 +260,7 @@ viewCheckbox : Model msg -> { containerClasses : Html.Attribute msg - , labelStyles : Html.Attribute msg + , labelStyles : List Style , labelClasses : Html.Attribute msg , labelContent : Html.Html msg } @@ -284,7 +294,7 @@ viewCheckbox model config = ] -viewLabel : Model msg -> Html.Html msg -> Html.Attribute msg -> Html.Attribute msg -> Html.Html msg +viewLabel : Model msg -> Html.Html msg -> Html.Attribute msg -> List Style -> Html.Html msg viewLabel model content class theme = Html.Styled.label [ Attributes.for model.identifier @@ -312,18 +322,11 @@ viewLabel model content class theme = else ExtraAttributes.none , class - , theme + , css theme ] [ content ] -backgroundImage : Icon -> Style -backgroundImage (Icon icon) = - -- Nri.Ui.AssetPath.Css.url - -- >> property "background-image" - property "background-image" "url(todo)" - - type Icon = Icon (Html.Html Never) From e6a474a3d6b11d28ebcddb2df31f095c46ce585c Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 10:40:08 -0700 Subject: [PATCH 07/29] :art: explore internal api -- what bits of the model are we actually using --- src/Nri/Ui/Checkbox/V5.elm | 56 ++++++++++++++++++++++++-------------- 1 file changed, 36 insertions(+), 20 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index c8ca1c5f..78e2ee4a 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -119,39 +119,38 @@ buildCheckbox model labelContent = viewCheckbox model <| case model.theme of Square -> - let - squareIcon = - case model.selected of - Selected -> - checkboxChecked - - NotSelected -> - checkboxUnchecked - - PartiallySelected -> - checkboxCheckedPartially - in { containerClasses = toClassList [ "SquareClass" ] , labelStyles = if model.disabled then - disabledSquareLabel squareIcon + disabledSquareLabel else - enabledSquareLabel squareIcon + enabledSquareLabel , labelClasses = labelClass model.selected , labelContent = labelContent + , icon = + case model.selected of + Selected -> + checkboxChecked + + NotSelected -> + checkboxUnchecked + + PartiallySelected -> + checkboxCheckedPartially } Locked -> { containerClasses = toClassList [ "Locked" ] , labelStyles = if model.disabled then - disabledLockStyles checkboxLockOnInside + disabledLockStyles else - enabledLockLabelStyles checkboxLockOnInside + enabledLockLabelStyles , labelClasses = labelClass model.selected , labelContent = labelContent + , icon = checkboxLockOnInside } @@ -257,12 +256,19 @@ toClassList = viewCheckbox : - Model msg + { a + | identifier : String + , label : String + , setterMsg : Bool -> msg + , selected : IsSelected + , disabled : Bool + } -> { containerClasses : Html.Attribute msg - , labelStyles : List Style + , labelStyles : Icon -> List Style , labelClasses : Html.Attribute msg , labelContent : Html.Html msg + , icon : Icon } -> Html.Html msg viewCheckbox model config = @@ -290,11 +296,21 @@ viewCheckbox model config = , Attributes.id model.identifier , Attributes.disabled model.disabled ] - , viewLabel model config.labelContent config.labelClasses config.labelStyles + , viewLabel model config.labelContent config.labelClasses (config.labelStyles config.icon) ] -viewLabel : Model msg -> Html.Html msg -> Html.Attribute msg -> List Style -> Html.Html msg +viewLabel : + { a + | identifier : String + , setterMsg : Bool -> msg + , selected : IsSelected + , disabled : Bool + } + -> Html.Html msg + -> Html.Attribute msg + -> List Style + -> Html.Html msg viewLabel model content class theme = Html.Styled.label [ Attributes.for model.identifier From 360aca8be8592d4bd90df73d4cc67b5ec8412828 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 10:47:38 -0700 Subject: [PATCH 08/29] Adds enabled- and disabled- specific label views --- src/Nri/Ui/Checkbox/V5.elm | 56 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 78e2ee4a..e5510011 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -343,6 +343,62 @@ viewLabel model content class theme = [ content ] +viewEnabledLabel : + { a + | identifier : String + , setterMsg : Bool -> msg + , selected : IsSelected + , disabled : Bool + } + -> Html.Html msg + -> Html.Attribute msg + -> List Style + -> Html.Html msg +viewEnabledLabel model content class theme = + Html.Styled.label + [ Attributes.for model.identifier + , Aria.controls model.identifier + , Widget.disabled model.disabled + , Widget.checked (selectedToMaybe model.selected) + , Attributes.tabindex 0 + , HtmlExtra.onKeyUp + { defaultOptions | preventDefault = True } + (\keyCode -> + -- 32 is the space bar, 13 is enter + if keyCode == 32 || keyCode == 13 then + selectedToMaybe model.selected + |> Maybe.map not + |> Maybe.withDefault True + |> model.setterMsg + |> Just + + else + Nothing + ) + , class + , css theme + ] + [ content ] + + +viewDisabledLabel : + { a | identifier : String, selected : IsSelected } + -> Html.Html msg + -> Html.Attribute msg + -> List Style + -> Html.Html msg +viewDisabledLabel model content class theme = + Html.Styled.label + [ Attributes.for model.identifier + , Aria.controls model.identifier + , Widget.disabled True + , Widget.checked (selectedToMaybe model.selected) + , class + , css theme + ] + [ content ] + + type Icon = Icon (Html.Html Never) From 5002e727ce2854f47222622c86e79d422e77423b Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 10:53:57 -0700 Subject: [PATCH 09/29] Separate out the enabled and disabled icon views --- src/Nri/Ui/Checkbox/V5.elm | 38 ++++++++++++++++++++++++++++++++++---- 1 file changed, 34 insertions(+), 4 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index e5510011..f04b75cf 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -353,8 +353,9 @@ viewEnabledLabel : -> Html.Html msg -> Html.Attribute msg -> List Style + -> Icon -> Html.Html msg -viewEnabledLabel model content class theme = +viewEnabledLabel model content class theme icon = Html.Styled.label [ Attributes.for model.identifier , Aria.controls model.identifier @@ -378,7 +379,17 @@ viewEnabledLabel model content class theme = , class , css theme ] - [ content ] + [ viewEnabledIcon icon + , content + ] + + +viewEnabledIcon : Icon -> Html.Html msg +viewEnabledIcon icon = + viewIcon + [ cursor pointer + ] + icon viewDisabledLabel : @@ -386,8 +397,9 @@ viewDisabledLabel : -> Html.Html msg -> Html.Attribute msg -> List Style + -> Icon -> Html.Html msg -viewDisabledLabel model content class theme = +viewDisabledLabel model content class theme icon = Html.Styled.label [ Attributes.for model.identifier , Aria.controls model.identifier @@ -396,7 +408,25 @@ viewDisabledLabel model content class theme = , class , css theme ] - [ content ] + [ viewDisabledIcon icon + , content + ] + + +viewDisabledIcon : Icon -> Html.Html msg +viewDisabledIcon icon = + viewIcon + [ cursor auto + , checkboxImageSelector [ opacity (num 0.4) ] + ] + icon + + +viewIcon : List Style -> Icon -> Html.Html msg +viewIcon styles (Icon icon) = + Html.div [ css styles ] + [ Html.map never icon + ] type Icon From 2ac25c25fab5dac535e1638377c95df9a7e6629d Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 10:58:04 -0700 Subject: [PATCH 10/29] Add the label styles in directly --- src/Nri/Ui/Checkbox/V5.elm | 53 +++++++++++++++----------------------- 1 file changed, 21 insertions(+), 32 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index f04b75cf..539ed63d 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -348,18 +348,16 @@ viewEnabledLabel : | identifier : String , setterMsg : Bool -> msg , selected : IsSelected - , disabled : Bool } -> Html.Html msg -> Html.Attribute msg - -> List Style -> Icon -> Html.Html msg -viewEnabledLabel model content class theme icon = +viewEnabledLabel model content class icon = Html.Styled.label [ Attributes.for model.identifier , Aria.controls model.identifier - , Widget.disabled model.disabled + , Widget.disabled False , Widget.checked (selectedToMaybe model.selected) , Attributes.tabindex 0 , HtmlExtra.onKeyUp @@ -377,56 +375,47 @@ viewEnabledLabel model content class theme icon = Nothing ) , class - , css theme + , css + [ positioning + , textStyle + , outline none + , cursor pointer + ] ] - [ viewEnabledIcon icon + [ viewIcon icon , content ] -viewEnabledIcon : Icon -> Html.Html msg -viewEnabledIcon icon = - viewIcon - [ cursor pointer - ] - icon - - viewDisabledLabel : { a | identifier : String, selected : IsSelected } -> Html.Html msg -> Html.Attribute msg - -> List Style -> Icon -> Html.Html msg -viewDisabledLabel model content class theme icon = +viewDisabledLabel model content class icon = Html.Styled.label [ Attributes.for model.identifier , Aria.controls model.identifier , Widget.disabled True , Widget.checked (selectedToMaybe model.selected) , class - , css theme + , css + [ positioning + , textStyle + , outline none + , cursor auto + , checkboxImageSelector [ opacity (num 0.4) ] + ] ] - [ viewDisabledIcon icon + [ viewIcon icon , content ] -viewDisabledIcon : Icon -> Html.Html msg -viewDisabledIcon icon = - viewIcon - [ cursor auto - , checkboxImageSelector [ opacity (num 0.4) ] - ] - icon - - -viewIcon : List Style -> Icon -> Html.Html msg -viewIcon styles (Icon icon) = - Html.div [ css styles ] - [ Html.map never icon - ] +viewIcon : Icon -> Html.Html msg +viewIcon (Icon icon) = + Html.map never icon type Icon From 4f1913420b61eeeb79b37adb58cff4a2192190be Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 10:59:23 -0700 Subject: [PATCH 11/29] Don't prematurely get the label class --- src/Nri/Ui/Checkbox/V5.elm | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 539ed63d..7a926090 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -126,7 +126,6 @@ buildCheckbox model labelContent = else enabledSquareLabel - , labelClasses = labelClass model.selected , labelContent = labelContent , icon = case model.selected of @@ -148,7 +147,6 @@ buildCheckbox model labelContent = else enabledLockLabelStyles - , labelClasses = labelClass model.selected , labelContent = labelContent , icon = checkboxLockOnInside } @@ -266,7 +264,6 @@ viewCheckbox : -> { containerClasses : Html.Attribute msg , labelStyles : Icon -> List Style - , labelClasses : Html.Attribute msg , labelContent : Html.Html msg , icon : Icon } @@ -296,7 +293,7 @@ viewCheckbox model config = , Attributes.id model.identifier , Attributes.disabled model.disabled ] - , viewLabel model config.labelContent config.labelClasses (config.labelStyles config.icon) + , viewLabel model config.labelContent (labelClass model.selected) (config.labelStyles config.icon) ] From 4b31fcaeeb6039f413a48a5ed1541a80c4564df3 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 11:08:23 -0700 Subject: [PATCH 12/29] Pull out onCheck helper --- src/Nri/Ui/Checkbox/V5.elm | 47 ++++++++++++++++++++++++++++++++++---- 1 file changed, 42 insertions(+), 5 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 7a926090..7448346e 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -340,6 +340,39 @@ viewLabel model content class theme = [ content ] +viewSquareCheckbox : + { a + | identifier : String + , label : String + , setterMsg : Bool -> msg + , selected : IsSelected + , disabled : Bool + } + -> + { labelStyles : Icon -> List Style + , labelContent : Html.Html msg + , icon : Icon + } + -> Html.Html msg +viewSquareCheckbox model config = + Html.Styled.span + [ css [ display block, height inherit ] + , Attributes.id (model.identifier ++ "-container") + , Events.stopPropagationOn "click" (Json.Decode.fail "stop click propagation") + ] + [ Html.checkbox model.identifier + (selectedToMaybe model.selected) + ([ Widget.label model.label + , Events.onCheck (\_ -> onCheck model) + , Attributes.id model.identifier + , Attributes.disabled model.disabled + ] + ++ Accessibility.Styled.Style.invisible + ) + , viewLabel model config.labelContent (labelClass model.selected) (config.labelStyles config.icon) + ] + + viewEnabledLabel : { a | identifier : String @@ -362,11 +395,7 @@ viewEnabledLabel model content class icon = (\keyCode -> -- 32 is the space bar, 13 is enter if keyCode == 32 || keyCode == 13 then - selectedToMaybe model.selected - |> Maybe.map not - |> Maybe.withDefault True - |> model.setterMsg - |> Just + Just (onCheck model) else Nothing @@ -384,6 +413,14 @@ viewEnabledLabel model content class icon = ] +onCheck : { a | setterMsg : Bool -> msg, selected : IsSelected } -> msg +onCheck model = + selectedToMaybe model.selected + |> Maybe.withDefault False + |> not + |> model.setterMsg + + viewDisabledLabel : { a | identifier : String, selected : IsSelected } -> Html.Html msg From 8016f9a8ec0ed9c834f673567af2f90f0568c920 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 11:19:33 -0700 Subject: [PATCH 13/29] Use the square view --- src/Nri/Ui/Checkbox/V5.elm | 99 +++++++++++++++++++------------------- 1 file changed, 49 insertions(+), 50 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 7448346e..9adca202 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -101,9 +101,11 @@ selectedToMaybe selected = -} view : Model msg -> Html.Html msg view model = - buildCheckbox model <| - Html.span Accessibility.Styled.Style.invisible - [ Html.text model.label ] + buildCheckbox model + (\label -> + Html.span Accessibility.Styled.Style.invisible + [ Html.text label ] + ) {-| Shows a checkbox and its label text @@ -111,35 +113,17 @@ view model = viewWithLabel : Model msg -> Html.Html msg viewWithLabel model = buildCheckbox model <| - Html.span [] [ Html.text model.label ] + \label -> Html.span [] [ Html.text label ] -buildCheckbox : Model msg -> Html.Html msg -> Html.Html msg -buildCheckbox model labelContent = - viewCheckbox model <| - case model.theme of - Square -> - { containerClasses = toClassList [ "SquareClass" ] - , labelStyles = - if model.disabled then - disabledSquareLabel +buildCheckbox : Model msg -> (String -> Html.Html msg) -> Html.Html msg +buildCheckbox model labelView = + case model.theme of + Square -> + viewSquareCheckbox model viewLabelContent - else - enabledSquareLabel - , labelContent = labelContent - , icon = - case model.selected of - Selected -> - checkboxChecked - - NotSelected -> - checkboxUnchecked - - PartiallySelected -> - checkboxCheckedPartially - } - - Locked -> + Locked -> + viewCheckbox model <| { containerClasses = toClassList [ "Locked" ] , labelStyles = if model.disabled then @@ -147,7 +131,7 @@ buildCheckbox model labelContent = else enabledLockLabelStyles - , labelContent = labelContent + , labelContent = labelView model.label , icon = checkboxLockOnInside } @@ -348,13 +332,21 @@ viewSquareCheckbox : , selected : IsSelected , disabled : Bool } - -> - { labelStyles : Icon -> List Style - , labelContent : Html.Html msg - , icon : Icon - } + -> (String -> Html.Html msg) -> Html.Html msg -viewSquareCheckbox model config = +viewSquareCheckbox model labelView = + let + icon = + case model.selected of + Selected -> + checkboxChecked + + NotSelected -> + checkboxUnchecked + + PartiallySelected -> + checkboxCheckedPartially + in Html.Styled.span [ css [ display block, height inherit ] , Attributes.id (model.identifier ++ "-container") @@ -362,14 +354,17 @@ viewSquareCheckbox model config = ] [ Html.checkbox model.identifier (selectedToMaybe model.selected) - ([ Widget.label model.label - , Events.onCheck (\_ -> onCheck model) + ([ Events.onCheck (\_ -> onCheck model) , Attributes.id model.identifier , Attributes.disabled model.disabled ] ++ Accessibility.Styled.Style.invisible ) - , viewLabel model config.labelContent (labelClass model.selected) (config.labelStyles config.icon) + , if model.disabled then + viewDisabledLabel model labelView icon + + else + viewEnabledLabel model labelView icon ] @@ -378,12 +373,12 @@ viewEnabledLabel : | identifier : String , setterMsg : Bool -> msg , selected : IsSelected + , label : String } - -> Html.Html msg - -> Html.Attribute msg + -> (String -> Html.Html msg) -> Icon -> Html.Html msg -viewEnabledLabel model content class icon = +viewEnabledLabel model labelView icon = Html.Styled.label [ Attributes.for model.identifier , Aria.controls model.identifier @@ -400,7 +395,7 @@ viewEnabledLabel model content class icon = else Nothing ) - , class + , labelClass model.selected , css [ positioning , textStyle @@ -409,7 +404,7 @@ viewEnabledLabel model content class icon = ] ] [ viewIcon icon - , content + , labelView model.label ] @@ -422,18 +417,17 @@ onCheck model = viewDisabledLabel : - { a | identifier : String, selected : IsSelected } - -> Html.Html msg - -> Html.Attribute msg + { a | identifier : String, selected : IsSelected, label : String } + -> (String -> Html.Html msg) -> Icon -> Html.Html msg -viewDisabledLabel model content class icon = +viewDisabledLabel model labelView icon = Html.Styled.label [ Attributes.for model.identifier , Aria.controls model.identifier , Widget.disabled True , Widget.checked (selectedToMaybe model.selected) - , class + , labelClass model.selected , css [ positioning , textStyle @@ -443,10 +437,15 @@ viewDisabledLabel model content class icon = ] ] [ viewIcon icon - , content + , labelView model.label ] +viewLabelContent : String -> Html.Html msg +viewLabelContent label = + Html.span [] [ Html.text label ] + + viewIcon : Icon -> Html.Html msg viewIcon (Icon icon) = Html.map never icon From 9a511b3359d5b571cf900c5b8ddc05bd04a4bb25 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 11:23:17 -0700 Subject: [PATCH 14/29] :skull: remove old checkbox implementation --- src/Nri/Ui/Checkbox/V5.elm | 131 ++++++++++--------------------------- 1 file changed, 33 insertions(+), 98 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 9adca202..38b42321 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -123,17 +123,7 @@ buildCheckbox model labelView = viewSquareCheckbox model viewLabelContent Locked -> - viewCheckbox model <| - { containerClasses = toClassList [ "Locked" ] - , labelStyles = - if model.disabled then - disabledLockStyles - - else - enabledLockLabelStyles - , labelContent = labelView model.label - , icon = checkboxLockOnInside - } + viewLockedCheckbox model viewLabelContent disabledSquareLabel : Icon -> List Style @@ -237,93 +227,6 @@ toClassList = List.map (\a -> ( "checkbox-V3__" ++ a, True )) >> Attributes.classList -viewCheckbox : - { a - | identifier : String - , label : String - , setterMsg : Bool -> msg - , selected : IsSelected - , disabled : Bool - } - -> - { containerClasses : Html.Attribute msg - , labelStyles : Icon -> List Style - , labelContent : Html.Html msg - , icon : Icon - } - -> 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" - , Events.stopPropagationOn "click" - (Json.Decode.fail "stop click propagation") - ] - [ 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 (labelClass model.selected) (config.labelStyles config.icon) - ] - - -viewLabel : - { a - | identifier : String - , setterMsg : Bool -> msg - , selected : IsSelected - , disabled : Bool - } - -> Html.Html msg - -> Html.Attribute msg - -> List Style - -> 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 - , css theme - ] - [ content ] - - viewSquareCheckbox : { a | identifier : String @@ -368,6 +271,38 @@ viewSquareCheckbox model labelView = ] +viewLockedCheckbox : + { a + | identifier : String + , label : String + , setterMsg : Bool -> msg + , selected : IsSelected + , disabled : Bool + } + -> (String -> Html.Html msg) + -> Html.Html msg +viewLockedCheckbox model labelView = + Html.Styled.span + [ css [ display block, height inherit ] + , Attributes.id (model.identifier ++ "-container") + , Events.stopPropagationOn "click" (Json.Decode.fail "stop click propagation") + ] + [ Html.checkbox model.identifier + (selectedToMaybe model.selected) + ([ Events.onCheck (\_ -> onCheck model) + , Attributes.id model.identifier + , Attributes.disabled model.disabled + ] + ++ Accessibility.Styled.Style.invisible + ) + , if model.disabled then + viewDisabledLabel model labelView checkboxLockOnInside + + else + viewEnabledLabel model labelView checkboxLockOnInside + ] + + viewEnabledLabel : { a | identifier : String From 2c80f889c1c63833bd4101e9b34bad9059c06653 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 11:23:50 -0700 Subject: [PATCH 15/29] :skull: kill dead code --- src/Nri/Ui/Checkbox/V5.elm | 42 -------------------------------------- 1 file changed, 42 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 38b42321..988c9782 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -126,48 +126,6 @@ buildCheckbox model labelView = viewLockedCheckbox model viewLabelContent -disabledSquareLabel : Icon -> List Style -disabledSquareLabel image = - [ positioning - , textStyle - , outline none - , iconStyle image - , cursor auto - , checkboxImageSelector [ opacity (num 0.4) ] - ] - - -enabledSquareLabel : Icon -> List Style -enabledSquareLabel image = - [ positioning - , textStyle - , outline none - , iconStyle image - , cursor pointer - ] - - -disabledLockStyles : Icon -> List Style -disabledLockStyles image = - [ positioning - , textStyle - , outline none - , iconStyle image - , cursor auto - , checkboxImageSelector [ opacity (num 0.4) ] - ] - - -enabledLockLabelStyles : Icon -> List Style -enabledLockLabelStyles image = - [ positioning - , textStyle - , outline none - , iconStyle image - , cursor pointer - ] - - positioning : Style positioning = batch From 2bea5d355060e5946404d7ff8dac3941550e01ec Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 11:28:07 -0700 Subject: [PATCH 16/29] move the icon styles inline --- src/Nri/Ui/Checkbox/V5.elm | 45 ++++++++++++++------------------------ 1 file changed, 16 insertions(+), 29 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 988c9782..08826a2d 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -144,29 +144,6 @@ textStyle = ] -iconStyle : Icon -> Style -iconStyle icon = - batch - [ position relative - , checkboxImageSelector - [ property "background-image" "url(todo)" - , backgroundRepeat noRepeat - , backgroundSize (px 24) - , property "content" "''" - , position absolute - , left zero - , top (calc (pct 50) minus (px 12)) - , width (px 24) - , height (px 24) - ] - ] - - -checkboxImageSelector : List Style -> Style -checkboxImageSelector = - before - - labelClass : IsSelected -> Html.Styled.Attribute msg labelClass isSelected = case isSelected of @@ -296,7 +273,7 @@ viewEnabledLabel model labelView icon = , cursor pointer ] ] - [ viewIcon icon + [ viewIcon [] icon , labelView model.label ] @@ -326,10 +303,9 @@ viewDisabledLabel model labelView icon = , textStyle , outline none , cursor auto - , checkboxImageSelector [ opacity (num 0.4) ] ] ] - [ viewIcon icon + [ viewIcon [ opacity (num 0.4) ] icon , labelView model.label ] @@ -339,9 +315,20 @@ viewLabelContent label = Html.span [] [ Html.text label ] -viewIcon : Icon -> Html.Html msg -viewIcon (Icon icon) = - Html.map never icon +viewIcon : List Style -> Icon -> Html.Html msg +viewIcon styles (Icon icon) = + Html.div + [ css + [ position relative + , left zero + , top (calc (pct 50) minus (px 12)) + , width (px 24) + , height (px 24) + , Css.batch styles + ] + ] + [ Html.map never icon + ] type Icon From 5d71a9d7398f4f5df808938054824a830058d211 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 11:28:54 -0700 Subject: [PATCH 17/29] Fix bad label reference --- src/Nri/Ui/Checkbox/V5.elm | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 08826a2d..dfb10724 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -120,10 +120,10 @@ buildCheckbox : Model msg -> (String -> Html.Html msg) -> Html.Html msg buildCheckbox model labelView = case model.theme of Square -> - viewSquareCheckbox model viewLabelContent + viewSquareCheckbox model labelView Locked -> - viewLockedCheckbox model viewLabelContent + viewLockedCheckbox model labelView positioning : Style @@ -310,11 +310,6 @@ viewDisabledLabel model labelView icon = ] -viewLabelContent : String -> Html.Html msg -viewLabelContent label = - Html.span [] [ Html.text label ] - - viewIcon : List Style -> Icon -> Html.Html msg viewIcon styles (Icon icon) = Html.div From 187e50bb8418e4cc41e5b87f1953d1ac193f30e4 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 11:31:33 -0700 Subject: [PATCH 18/29] Go back to display none for now inputs are kinda funky as far as how the styles work. the usual clip trick wont' do it --- src/Nri/Ui/Checkbox/V5.elm | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index dfb10724..af503dde 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -186,18 +186,16 @@ viewSquareCheckbox model labelView = checkboxCheckedPartially in Html.Styled.span - [ css [ display block, height inherit ] + [ css [ display block, height inherit, descendants [ Css.Global.input [ display none ] ] ] , Attributes.id (model.identifier ++ "-container") , Events.stopPropagationOn "click" (Json.Decode.fail "stop click propagation") ] [ Html.checkbox model.identifier (selectedToMaybe model.selected) - ([ Events.onCheck (\_ -> onCheck model) - , Attributes.id model.identifier - , Attributes.disabled model.disabled - ] - ++ Accessibility.Styled.Style.invisible - ) + [ Events.onCheck (\_ -> onCheck model) + , Attributes.id model.identifier + , Attributes.disabled model.disabled + ] , if model.disabled then viewDisabledLabel model labelView icon @@ -218,18 +216,16 @@ viewLockedCheckbox : -> Html.Html msg viewLockedCheckbox model labelView = Html.Styled.span - [ css [ display block, height inherit ] + [ css [ display block, height inherit, descendants [ Css.Global.input [ display none ] ] ] , Attributes.id (model.identifier ++ "-container") , Events.stopPropagationOn "click" (Json.Decode.fail "stop click propagation") ] [ Html.checkbox model.identifier (selectedToMaybe model.selected) - ([ Events.onCheck (\_ -> onCheck model) - , Attributes.id model.identifier - , Attributes.disabled model.disabled - ] - ++ Accessibility.Styled.Style.invisible - ) + [ Events.onCheck (\_ -> onCheck model) + , Attributes.id model.identifier + , Attributes.disabled model.disabled + ] , if model.disabled then viewDisabledLabel model labelView checkboxLockOnInside From 28396866adb7d585578915d1c084088aad618625 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 11:33:42 -0700 Subject: [PATCH 19/29] Pull out checkbox container view --- src/Nri/Ui/Checkbox/V5.elm | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index af503dde..9419655c 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -185,11 +185,7 @@ viewSquareCheckbox model labelView = PartiallySelected -> checkboxCheckedPartially in - Html.Styled.span - [ css [ display block, height inherit, descendants [ Css.Global.input [ display none ] ] ] - , Attributes.id (model.identifier ++ "-container") - , Events.stopPropagationOn "click" (Json.Decode.fail "stop click propagation") - ] + checkboxContainer model [ Html.checkbox model.identifier (selectedToMaybe model.selected) [ Events.onCheck (\_ -> onCheck model) @@ -215,11 +211,7 @@ viewLockedCheckbox : -> (String -> Html.Html msg) -> Html.Html msg viewLockedCheckbox model labelView = - Html.Styled.span - [ css [ display block, height inherit, descendants [ Css.Global.input [ display none ] ] ] - , Attributes.id (model.identifier ++ "-container") - , Events.stopPropagationOn "click" (Json.Decode.fail "stop click propagation") - ] + checkboxContainer model [ Html.checkbox model.identifier (selectedToMaybe model.selected) [ Events.onCheck (\_ -> onCheck model) @@ -234,6 +226,19 @@ viewLockedCheckbox model labelView = ] +checkboxContainer : { a | identifier : String } -> List (Html.Html msg) -> Html.Html msg +checkboxContainer model = + Html.Styled.span + [ css + [ display block + , height inherit + , descendants [ Css.Global.input [ display none ] ] + ] + , Attributes.id (model.identifier ++ "-container") + , Events.stopPropagationOn "click" (Json.Decode.fail "stop click propagation") + ] + + viewEnabledLabel : { a | identifier : String From ef219d72595ccf4d076aa584e76782f0226d04c2 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 11:35:54 -0700 Subject: [PATCH 20/29] :art: pull out checkbox helper --- src/Nri/Ui/Checkbox/V5.elm | 53 +++++++++++++++----------------------- 1 file changed, 21 insertions(+), 32 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 9419655c..dcf163a7 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -162,16 +162,7 @@ toClassList = List.map (\a -> ( "checkbox-V3__" ++ a, True )) >> Attributes.classList -viewSquareCheckbox : - { a - | identifier : String - , label : String - , setterMsg : Bool -> msg - , selected : IsSelected - , disabled : Bool - } - -> (String -> Html.Html msg) - -> Html.Html msg +viewSquareCheckbox : Model msg -> (String -> Html.Html msg) -> Html.Html msg viewSquareCheckbox model labelView = let icon = @@ -186,12 +177,7 @@ viewSquareCheckbox model labelView = checkboxCheckedPartially in checkboxContainer model - [ Html.checkbox model.identifier - (selectedToMaybe model.selected) - [ Events.onCheck (\_ -> onCheck model) - , Attributes.id model.identifier - , Attributes.disabled model.disabled - ] + [ viewCheckbox model , if model.disabled then viewDisabledLabel model labelView icon @@ -200,24 +186,10 @@ viewSquareCheckbox model labelView = ] -viewLockedCheckbox : - { a - | identifier : String - , label : String - , setterMsg : Bool -> msg - , selected : IsSelected - , disabled : Bool - } - -> (String -> Html.Html msg) - -> Html.Html msg +viewLockedCheckbox : Model msg -> (String -> Html.Html msg) -> Html.Html msg viewLockedCheckbox model labelView = checkboxContainer model - [ Html.checkbox model.identifier - (selectedToMaybe model.selected) - [ Events.onCheck (\_ -> onCheck model) - , Attributes.id model.identifier - , Attributes.disabled model.disabled - ] + [ viewCheckbox model , if model.disabled then viewDisabledLabel model labelView checkboxLockOnInside @@ -239,6 +211,23 @@ checkboxContainer model = ] +viewCheckbox : + { a + | identifier : String + , setterMsg : Bool -> msg + , selected : IsSelected + , disabled : Bool + } + -> Html.Html msg +viewCheckbox model = + Html.checkbox model.identifier + (selectedToMaybe model.selected) + [ Events.onCheck (\_ -> onCheck model) + , Attributes.id model.identifier + , Attributes.disabled model.disabled + ] + + viewEnabledLabel : { a | identifier : String From 4faffae6db2610b9614b044797b32ad071f2481c Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 11:38:34 -0700 Subject: [PATCH 21/29] Reorganize the file a bit --- src/Nri/Ui/Checkbox/V5.elm | 72 +++++++++++++++++++------------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index dcf163a7..8dab38c4 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -126,42 +126,6 @@ buildCheckbox model labelView = viewLockedCheckbox model labelView -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 - ] - - -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 - - viewSquareCheckbox : Model msg -> (String -> Html.Html msg) -> Html.Html msg viewSquareCheckbox model labelView = let @@ -300,6 +264,42 @@ viewDisabledLabel model labelView icon = ] +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-V5__" ++ a, True )) >> Attributes.classList + + +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 + ] + + viewIcon : List Style -> Icon -> Html.Html msg viewIcon styles (Icon icon) = Html.div From fcbebfaa3255b539c8b0701ea76e04c74d1772c1 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 11:41:26 -0700 Subject: [PATCH 22/29] Remove helpers --- src/Nri/Ui/Checkbox/V5.elm | 57 +++++++++++++++----------------------- 1 file changed, 22 insertions(+), 35 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 8dab38c4..04cb17a9 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -118,47 +118,34 @@ viewWithLabel model = buildCheckbox : Model msg -> (String -> Html.Html msg) -> Html.Html msg buildCheckbox model labelView = - case model.theme of - Square -> - viewSquareCheckbox model labelView - - Locked -> - viewLockedCheckbox model labelView - - -viewSquareCheckbox : Model msg -> (String -> Html.Html msg) -> Html.Html msg -viewSquareCheckbox model labelView = - let - icon = - case model.selected of - Selected -> - checkboxChecked - - NotSelected -> - checkboxUnchecked - - PartiallySelected -> - checkboxCheckedPartially - in checkboxContainer model [ viewCheckbox model - , if model.disabled then - viewDisabledLabel model labelView icon + , case model.theme of + Square -> + let + icon = + case model.selected of + Selected -> + checkboxChecked - else - viewEnabledLabel model labelView icon - ] + NotSelected -> + checkboxUnchecked + PartiallySelected -> + checkboxCheckedPartially + in + if model.disabled then + viewDisabledLabel model labelView icon -viewLockedCheckbox : Model msg -> (String -> Html.Html msg) -> Html.Html msg -viewLockedCheckbox model labelView = - checkboxContainer model - [ viewCheckbox model - , if model.disabled then - viewDisabledLabel model labelView checkboxLockOnInside + else + viewEnabledLabel model labelView icon - else - viewEnabledLabel model labelView checkboxLockOnInside + Locked -> + if model.disabled then + viewDisabledLabel model labelView checkboxLockOnInside + + else + viewEnabledLabel model labelView checkboxLockOnInside ] From a2c183e0bb424e2b6767ab24a1c04c0c0d60c2cd Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 11:42:49 -0700 Subject: [PATCH 23/29] Fix the positioning of the icon --- src/Nri/Ui/Checkbox/V5.elm | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 04cb17a9..dd77e30d 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -274,6 +274,7 @@ positioning = batch [ display inlineBlock , padding4 (px 13) zero (px 13) (px 35) + , position relative ] @@ -291,7 +292,7 @@ viewIcon : List Style -> Icon -> Html.Html msg viewIcon styles (Icon icon) = Html.div [ css - [ position relative + [ position absolute , left zero , top (calc (pct 50) minus (px 12)) , width (px 24) From 6dd9629d6ee763276ec6f8818c9b54cf96461d8a Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 12:06:57 -0700 Subject: [PATCH 24/29] Fix missing xlinkhrefs --- src/Nri/Ui/Checkbox/V5.elm | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index dd77e30d..d0ed312d 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -366,11 +366,17 @@ checkboxUnchecked = [ Svg.g [ Svg.Attributes.id "checkbox_unchecked" ] - [ Svg.use [ Svg.Attributes.fill "#EBEBEB", Svg.Attributes.fillRule "evenodd" ] [] + [ Svg.use + [ Svg.Attributes.fill "#EBEBEB" + , Svg.Attributes.fillRule "evenodd" + , Svg.Attributes.xlinkHref "#path-1" + ] + [] , Svg.use [ Svg.Attributes.fill "black" , Svg.Attributes.fillOpacity "1" , Svg.Attributes.filter "url(#filter-2)" + , Svg.Attributes.xlinkHref "#path-1" ] [] ] @@ -442,12 +448,14 @@ checkboxChecked = [ Svg.use [ Svg.Attributes.fill "#D4F0FF" , Svg.Attributes.fillRule "evenodd" + , Svg.Attributes.xlinkHref "#path-1" ] [] , Svg.use [ Svg.Attributes.fill "black" , Svg.Attributes.fillOpacity "1" , Svg.Attributes.filter "url(#filter-2)" + , Svg.Attributes.xlinkHref "#path-1" ] [] ] @@ -528,12 +536,14 @@ checkboxCheckedPartially = [ Svg.use [ Svg.Attributes.fill "#EBEBEB" , Svg.Attributes.fillRule "evenodd" + , Svg.Attributes.xlinkHref "#path-1" ] [] , Svg.use [ Svg.Attributes.fill "black" , Svg.Attributes.fillOpacity "1" , Svg.Attributes.filter "url(#filter-2)" + , Svg.Attributes.xlinkHref "#path-1" ] [] ] @@ -614,12 +624,14 @@ checkboxLockOnInside = [ Svg.use [ Svg.Attributes.fill "#EBEBEB" , Svg.Attributes.fillRule "evenodd" + , Svg.Attributes.xlinkHref "#path-1" ] [] , Svg.use [ Svg.Attributes.fill "black" , Svg.Attributes.fillOpacity "1" , Svg.Attributes.filter "url(#filter-2)" + , Svg.Attributes.xlinkHref "#path-1" ] [] ] From da01ad5caa2a856584a3ee99b2ef85d48f581c04 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 12:11:34 -0700 Subject: [PATCH 25/29] :bowtie: adjust vertical alignment a scootch --- src/Nri/Ui/Checkbox/V5.elm | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index d0ed312d..154b606c 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -294,7 +294,7 @@ viewIcon styles (Icon icon) = [ css [ position absolute , left zero - , top (calc (pct 50) minus (px 12)) + , top (calc (pct 50) minus (px 14)) , width (px 24) , height (px 24) , Css.batch styles From 252fee9b00f5d58fde363a9c5162a64939cab451 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 12:13:10 -0700 Subject: [PATCH 26/29] :skull: remove asset requirements for premium checkbox v4 --- src/Nri/Ui/PremiumCheckbox/V4.elm | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/Nri/Ui/PremiumCheckbox/V4.elm b/src/Nri/Ui/PremiumCheckbox/V4.elm index a2cbc698..94122057 100644 --- a/src/Nri/Ui/PremiumCheckbox/V4.elm +++ b/src/Nri/Ui/PremiumCheckbox/V4.elm @@ -102,11 +102,7 @@ premium assets config = -} type alias Assets r = { r - | checkboxUnchecked_svg : Asset - , checkboxChecked_svg : Asset - , checkboxCheckedPartially_svg : Asset - , checkboxLockOnInside_svg : Asset - , iconPremiumFlag_svg : Asset + | iconPremiumFlag_svg : Asset , iconPremiumWithWritingFlag_svg : Asset } From ae3034e69c249d86670f3e88a8bc50c3bac6d087 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 12:14:52 -0700 Subject: [PATCH 27/29] :skull: remove unused imports --- src/Nri/Ui/Checkbox/V5.elm | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 154b606c..be643471 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -25,7 +25,7 @@ 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 Css.Global import Html.Events import Html.Styled import Html.Styled.Attributes as Attributes exposing (css) @@ -33,7 +33,6 @@ import Html.Styled.Events as Events import Json.Decode 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) import Svg import Svg.Attributes @@ -155,7 +154,7 @@ checkboxContainer model = [ css [ display block , height inherit - , descendants [ Css.Global.input [ display none ] ] + , Css.Global.descendants [ Css.Global.input [ display none ] ] ] , Attributes.id (model.identifier ++ "-container") , Events.stopPropagationOn "click" (Json.Decode.fail "stop click propagation") From a0e279641ec21a52dccfc761963d1a7bf81c0613 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 12:22:07 -0700 Subject: [PATCH 28/29] Expose the new modules --- elm.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/elm.json b/elm.json index 91fd344b..0ef74e5d 100644 --- a/elm.json +++ b/elm.json @@ -18,6 +18,7 @@ "Nri.Ui.Button.V8", "Nri.Ui.Checkbox.V3", "Nri.Ui.Checkbox.V4", + "Nri.Ui.Checkbox.V5", "Nri.Ui.Colors.Extra", "Nri.Ui.Colors.V1", "Nri.Ui.DisclosureIndicator.V1", @@ -38,6 +39,7 @@ "Nri.Ui.PremiumCheckbox.V1", "Nri.Ui.PremiumCheckbox.V2", "Nri.Ui.PremiumCheckbox.V3", + "Nri.Ui.PremiumCheckbox.V4", "Nri.Ui.SegmentedControl.V6", "Nri.Ui.Select.V5", "Nri.Ui.Svg.V1", From b68176f08dcfecbca82e39cdc199518a1274f414 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 4 Apr 2019 13:51:32 -0700 Subject: [PATCH 29/29] Fix docs --- src/Nri/Ui/Checkbox/V5.elm | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index be643471..8a11808b 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/src/Nri/Ui/Checkbox/V5.elm @@ -14,7 +14,7 @@ module Nri.Ui.Checkbox.V5 exposing @docs Model, Theme, IsSelected -@docs view, viewWithLabel, Assets +@docs view, viewWithLabel @docs selectedFromBool