From 994b058bb69ba1143ab7acf85202184ad698674c Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Jun 2018 18:14:47 -0700 Subject: [PATCH 01/64] Add new version of the checkbox --- elm-package.json | 1 + src/Nri/Ui/Checkbox/V3.elm | 633 +++++++++++++++++++++++++++ styleguide-app/Examples/TextArea.elm | 2 +- tests/Spec/Nri/Ui/Checkbox/V3.elm | 163 +++++++ 4 files changed, 798 insertions(+), 1 deletion(-) create mode 100644 src/Nri/Ui/Checkbox/V3.elm create mode 100644 tests/Spec/Nri/Ui/Checkbox/V3.elm diff --git a/elm-package.json b/elm-package.json index 74d0d1d2..79c3f0c6 100644 --- a/elm-package.json +++ b/elm-package.json @@ -16,6 +16,7 @@ "Nri.Ui.Colors.Extra", "Nri.Ui.Checkbox.V1", "Nri.Ui.Checkbox.V2", + "Nri.Ui.Checkbox.V3", "Nri.Ui.Divider.V1", "Nri.Ui.Dropdown.V1", "Nri.Ui.Effects.V1", diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm new file mode 100644 index 00000000..9d76c28c --- /dev/null +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -0,0 +1,633 @@ +module Nri.Ui.Checkbox.V3 + exposing + ( ColorTheme(..) + , IsSelected(..) + , Model + , PremiumConfig + , Theme(..) + , disabled + , keyframeCss + , premium + , styles + , view + , viewAttention + , viewWithLabel + ) + +{-| + +@docs Model, Theme, ColorTheme + +@docs view, viewWithLabel, viewAttention, disabled +@docs IsSelected +@docs keyframeCss, styles + + +## Premium + +@docs PremiumConfig, premium + +-} + +import Accessibility exposing (..) +import Accessibility.Aria exposing (controls) +import Accessibility.Style +import Accessibility.Widget as Widget +import Css exposing (..) +import Css.Foreign exposing (Snippet, children, descendants, everything, selector) +import Html +import Html.Attributes as Attributes +import Html.Events as Events exposing (defaultOptions) +import Json.Decode +import Json.Encode +import Nri.Ui.AssetPath exposing (Asset(..)) +import Nri.Ui.AssetPath.Css +import Nri.Ui.Colors.V1 as Colors +import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) +import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Html.Attributes.Extra as Attributes +import Nri.Ui.Html.Extra exposing (onEnter, onKeyUp) +import Nri.Ui.Styles.V1 + + +{-| + + - isChecked : Maybe Bool + - Just True == Checked (rendered checkmark) + - Just False == Not Checked (rendered blank) + - Nothing == Indeterminate (rendered dash) + +-} +type alias Model msg = + { identifier : String + , label : String + , setterMsg : Bool -> msg + , isChecked : Maybe Bool + , disabled : Bool + , theme : Theme + , noOpMsg : msg + } + + +customView : List CssClasses -> Bool -> Model msg -> Html msg +customView modifierClasses showLabels model = + let + containerClasses = + List.concat + [ [ Container ] + , modifierClasses + , case model.theme of + Square Gray -> + [ SquareClass, GrayClass ] + + Square Orange -> + [ SquareClass, OrangeClass ] + + Square Default -> + [ SquareClass ] + + Locked -> + [ LockedClass ] + + LockOnInside -> + [ LockOnInsideClass ] + + Unlockable -> + [ UnlockableClass ] + + Round -> + [ RoundClass ] + + Disabled -> + [ SquareClass, Opacified ] + + Premium -> + [ SquareClass, PremiumClass ] + ] + in + Html.span + [ styles.class 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.onWithOptions "click" + { defaultOptions | stopPropagation = True } + (Json.Decode.succeed "stop click propagation") + ] + [ checkbox model.identifier + model.isChecked + [ Widget.label model.label + , styles.class [ Checkbox ] + , Events.onCheck model.setterMsg + , Attributes.id model.identifier + , Attributes.disabled model.disabled + ] + , Html.label + [ Attributes.for model.identifier + , getLabelClass model.isChecked + , controls model.identifier + , Widget.disabled model.disabled + , Widget.checked model.isChecked + , if not model.disabled then + Attributes.tabindex 0 + else + Attributes.none + , if not model.disabled then + Nri.Ui.Html.Extra.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 model.isChecked |> Maybe.withDefault True) + else + Nothing + ) + else + Attributes.none + ] + [ span + (if showLabels then + [] + else + [ Accessibility.Style.invisible ] + ) + [ Html.text model.label ] + ] + ] + + +{-| Shows a checkbox (the label is only used for accessibility hints) +-} +view : Model msg -> Html msg +view model = + customView [] False model + + +{-| Shows a checkbox and its label text +-} +viewWithLabel : Model msg -> Html msg +viewWithLabel model = + customView [] True model + + +{-| Show a disabled checkbox. +-} +disabled : String -> String -> Html msg +disabled identifier labelText = + span + [ styles.class [ Container, SquareClass, Opacified ] + , Attributes.id <| identifier ++ "-container" + ] + [ checkbox identifier + (Just False) + [ Widget.label labelText + , styles.class [ Checkbox ] + , Attributes.id identifier + , Attributes.disabled True + ] + , label + [ Attributes.for identifier + , getLabelClass (Just False) + ] + [ Html.text labelText + ] + ] + + +{-| -} +type IsSelected + = Selected + | NotSelected + | PartiallySelected + + +{-| + + - `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 : IsSelected + , disabled : Bool + , teacherPremiumLevel : PremiumLevel + , contentPremiumLevel : PremiumLevel + , showFlagWhenLocked : Bool + , onChange : Bool -> msg + , onLockedClick : msg + , noOpMsg : msg + } + + +{-| A checkbox that should be used for premium content + +This checkbox is locked when the premium level of the content is greater than the premium level of the teacher + +-} +premium : PremiumConfig msg -> Html msg +premium config = + let + isLocked = + not <| + PremiumLevel.allowedFor + config.contentPremiumLevel + config.teacherPremiumLevel + + isChecked = + case config.selected of + Selected -> + Just True + + NotSelected -> + Just False + + PartiallySelected -> + Nothing + + modifierClasses = + List.concat + [ if config.showFlagWhenLocked && config.contentPremiumLevel /= Free then + [ PremiumClass ] + else + [] + , if config.disabled then + [ Opacified ] + else + [] + ] + + theme = + if isLocked then + LockOnInside + else if config.contentPremiumLevel /= Free then + Premium + else + Square Default + in + customView modifierClasses + True + { identifier = config.id + , label = config.label + , setterMsg = + if isLocked then + \_ -> config.onLockedClick + else + config.onChange + , isChecked = isChecked + , disabled = config.disabled + , theme = theme + , noOpMsg = config.noOpMsg + } + + +{-| -} +viewAttention : Model msg -> Html msg +viewAttention model = + customView [ WithPulsing ] False model + + +getLabelClass : Maybe Bool -> Html.Attribute msg +getLabelClass maybeChecked = + styles.class + [ Label + , case maybeChecked of + Just True -> + Checked + + Just False -> + Unchecked + + Nothing -> + Indeterminate + ] + + +indeterminateAttr : Html.Attribute msg +indeterminateAttr = + Attributes.property "indeterminate" (Json.Encode.bool True) + + +type CssClasses + = Container + | Checkbox + | Unchecked + | Checked + | Indeterminate + | SquareClass + | RoundClass + | GrayClass + | OrangeClass + | LockedClass + | LockOnInsideClass + | UnlockableClass + | Label + | WithPulsing + | Opacified + | PremiumClass + + +type CheckboxImage + = CheckboxUnchecked + | CheckboxChecked + | CheckboxCheckedPartially + | PremiumUnlocked + | PremiumFlag + | CheckWhite + | PremiumLocked + | PremiumKey + | CheckboxLockOnInside + + +{-| -} +type Theme + = Square ColorTheme + | Round + | Locked + | LockOnInside + | Unlockable + | Disabled + | Premium + + +{-| -} +type ColorTheme + = Default + | Gray + | Orange + + +mainSnippet : List Snippet +mainSnippet = + [ Css.Foreign.class Container + [ display block + , height inherit + , descendants + [ Css.Foreign.label + [ display inlineBlock + , verticalAlign middle + , minHeight (px 42) -- container height + , padding2 (px 13) zero + , fontSize (px 16) + , Fonts.baseFont + , color Colors.gray20 + , property "background-position" "left center" + , property "background-repeat" "no-repeat" + ] + , Css.Foreign.input [ display none ] + , selector ":disabled + label" + [ cursor auto + ] + ] + ] + , Css.Foreign.class Checkbox + [ cursor pointer ] + , Css.Foreign.class Label + [ cursor pointer + , outline none + ] + ] + + +square : Assets r -> List Snippet +square assets = + [ Css.Foreign.class SquareClass + [ children + [ Css.Foreign.label + [ paddingLeft (px (29 + 6)) -- checkbox width + padding + ] + , Css.Foreign.class Unchecked [ backgroundImage assets CheckboxUnchecked ] + , Css.Foreign.class Checked [ backgroundImage assets CheckboxChecked ] + , Css.Foreign.class Indeterminate [ backgroundImage assets CheckboxCheckedPartially ] + ] + ] + ] + + +gray : List Snippet +gray = + [ Css.Foreign.class GrayClass + [ children + [ Css.Foreign.label [ color Colors.gray45 ] ] + ] + ] + + +orange : Assets r -> List Snippet +orange assets = + [ Css.Foreign.class OrangeClass + [ children + [ Css.Foreign.label + [ color Colors.ochre + , displayFlex + , alignItems center + ] + , selector "label::after" + [ property "content" "''" + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage assets PremiumUnlocked + ] + ] + ] + ] + + +round : Assets r -> List Snippet +round assets = + [ Css.Foreign.class RoundClass + [ children + [ Css.Foreign.label + [ displayFlex + , alignItems center + , property "cursor" "pointer" + ] + , selector "label::before" + [ property "content" "''" + , width (px 24) + , height (px 24) + , marginRight (px 8) + , borderRadius (pct 100) + ] + , selector ".checkbox-Unchecked::before" + [ border3 (px 2) solid Colors.blue + , backgroundColor Colors.white + ] + , selector ".checkbox-Checked::before" + [ backgroundColor Colors.green + , border3 (px 2) solid Colors.green + , backgroundImage assets CheckWhite + , property "background-repeat" "no-repeat" + , property "background-position" "center center" + ] + , selector ":disabled + label" + [ property "cursor" "auto" + ] + ] + ] + , Css.Foreign.class WithPulsing + [ property "-webkit-animation" "pulsate 1s infinite" + , property "-moz-animation" "pulsate 1s infinite" + , property "animation" "pulsate 1s infinite" + ] + ] + + +locked : Assets r -> List Snippet +locked assets = + [ Css.Foreign.class LockedClass + [ descendants + [ Css.Foreign.label + [ paddingLeft (px (29 + 6)) -- checkbox width + padding + , backgroundImage assets PremiumLocked + , property "cursor" "auto" + ] + ] + ] + ] + + +lockOnInside : Assets r -> List Snippet +lockOnInside assets = + [ Css.Foreign.class LockOnInsideClass + [ descendants + [ Css.Foreign.label + [ paddingLeft (px 35) + , backgroundImage assets CheckboxLockOnInside + , backgroundSize (px 24) + , backgroundRepeat noRepeat + , property "cursor" "pointer" + ] + ] + ] + ] + + +unlockable : Assets r -> List Snippet +unlockable assets = + [ Css.Foreign.class UnlockableClass + [ descendants + [ Css.Foreign.label + [ paddingLeft (px (29 + 6)) -- checkbox width + padding + , backgroundImage assets PremiumKey + , property "cursor" "auto" + ] + ] + ] + ] + + +premiumStyles : Assets r -> List Snippet +premiumStyles assets = + [ Css.Foreign.class PremiumClass + [ children + [ Css.Foreign.label + [ displayFlex + , alignItems center + ] + , selector "label::after" + [ property "content" "''" + , display inlineBlock + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage assets PremiumFlag + , backgroundRepeat noRepeat + , backgroundPosition Css.center + ] + ] + ] + ] + + +opacified : List Snippet +opacified = + [ Css.Foreign.class Opacified + [ descendants [ everything [ opacity (num 0.4) ] ] ] + ] + + +backgroundImage : Assets r -> CheckboxImage -> Css.Style +backgroundImage assets checkboxImage = + property "background-image" (Nri.Ui.AssetPath.Css.url <| checkboxAssetPath assets checkboxImage) + + +checkboxAssetPath : Assets r -> CheckboxImage -> Asset +checkboxAssetPath assets checkboxImage = + case checkboxImage of + CheckboxUnchecked -> + assets.checkboxUnchecked_svg + + CheckboxChecked -> + assets.checkboxChecked_svg + + CheckboxCheckedPartially -> + assets.checkboxCheckedPartially_svg + + PremiumUnlocked -> + assets.iconPremiumUnlocked_png + + CheckWhite -> + assets.iconCheck_png + + PremiumLocked -> + assets.iconPremiumLocked_png + + CheckboxLockOnInside -> + assets.checkboxLockOnInside_svg + + PremiumKey -> + assets.iconPremiumKey_png + + PremiumFlag -> + assets.iconPremiumFlag_svg + + +{-| -} +keyframeCss : Nri.Ui.Styles.V1.Keyframe +keyframeCss = + Nri.Ui.Styles.V1.keyframes "pulsate" + [ ( "0%", "transform: scale(1, 1);" ) + , ( "50%", "transform: scale(1.2);" ) + , ( "100%", "transform: scale(1, 1);" ) + ] + + +{-| -} +styles : Nri.Ui.Styles.V1.StylesWithAssets Never CssClasses msg (Assets r) +styles = + (\assets -> + [ mainSnippet + , square assets + , gray + , orange assets + , round assets + , locked assets + , lockOnInside assets + , unlockable assets + , opacified + , premiumStyles assets + ] + |> List.concat + ) + |> Nri.Ui.Styles.V1.stylesWithAssets "checkbox-" + + +{-| The assets used in this module. +-} +type alias Assets r = + { r + | checkboxUnchecked_svg : Asset + , checkboxChecked_svg : Asset + , checkboxCheckedPartially_svg : Asset + , iconPremiumUnlocked_png : Asset + , iconCheck_png : Asset + , iconPremiumLocked_png : Asset + , checkboxLockOnInside_svg : Asset + , iconPremiumKey_png : Asset + , iconPremiumFlag_svg : Asset + } diff --git a/styleguide-app/Examples/TextArea.elm b/styleguide-app/Examples/TextArea.elm index 9ba3e5fa..30043692 100644 --- a/styleguide-app/Examples/TextArea.elm +++ b/styleguide-app/Examples/TextArea.elm @@ -10,7 +10,7 @@ import Dict exposing (Dict) import Html import Html.Styled import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) -import Nri.Ui.Checkbox.V2 as Checkbox +import Nri.Ui.Checkbox.V3 as Checkbox import Nri.Ui.Text.V2 as Text import Nri.Ui.TextArea.V3 as TextArea diff --git a/tests/Spec/Nri/Ui/Checkbox/V3.elm b/tests/Spec/Nri/Ui/Checkbox/V3.elm new file mode 100644 index 00000000..494af08e --- /dev/null +++ b/tests/Spec/Nri/Ui/Checkbox/V3.elm @@ -0,0 +1,163 @@ +module Spec.Nri.Ui.Checkbox.V3 exposing (spec) + +import Nri.Ui.Checkbox.V3 as Checkbox exposing (IsSelected(..)) +import Nri.Ui.Data.PremiumLevel exposing (PremiumLevel(..)) +import Test exposing (..) +import Test.Html.Query as Query +import Test.Html.Selector as Selector + + +premiumView config = + Checkbox.premium + { label = config.label + , id = "id" + , selected = config.selected + , disabled = config.disabled + , teacherPremiumLevel = config.teacherPremiumLevel + , contentPremiumLevel = config.contentPremiumLevel + , showFlagWhenLocked = config.showFlagWhenLocked + , onChange = \_ -> () + , onLockedClick = () + , noOpMsg = () + } + |> Query.fromHtml + + +spec : Test +spec = + describe "Nri.Ui.Checkbox.V1" + [ describe "premium" + [ test "displays the label" <| + \() -> + premiumView + { label = "i am label" + , selected = Selected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.has [ Selector.text "i am label" ] + , test "appears selected when Selected is passed in" <| + \() -> + premiumView + { label = "i am label" + , selected = Selected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.has [ Selector.class "checkbox-Checked" ] + , test "appears unselected when NotSelected is passed in" <| + \() -> + premiumView + { label = "i am label" + , selected = NotSelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.has [ Selector.class "checkbox-Unchecked" ] + , test "appears partially selected when PartiallySelected is passed in" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.has [ Selector.class "checkbox-Indeterminate" ] + , test "appears locked when teacherPremiumLevel < contentPremiumLevel" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Premium + , showFlagWhenLocked = True + } + |> Query.has [ Selector.class "checkbox-LockOnInsideClass" ] + , test "appears unlocked when teacherPremiumLevel >= contentPremiumLevel" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Premium + , contentPremiumLevel = Premium + , showFlagWhenLocked = True + } + |> Query.hasNot [ Selector.class "checkbox-LockOnInsideClass" ] + , test "appears with P flag when teacherPremiumLevel >= contentPremiumLevel" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Premium + , contentPremiumLevel = Premium + , showFlagWhenLocked = False + } + |> Query.has [ Selector.class "checkbox-PremiumClass" ] + , test "does not appear with P flag when teacherPremiumLevel < contentPremiumLevel and showFlagWhenLocked = False" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Premium + , showFlagWhenLocked = False + } + |> Query.hasNot [ Selector.class "checkbox-PremiumClass" ] + , test "appears with P flag for Premium content when teacherPremiumLevel < contentPremiumLevel and showFlagWhenLocked = True" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Premium + , showFlagWhenLocked = True + } + |> Query.has [ Selector.class "checkbox-PremiumClass" ] + , test "never shows P flag for nonPremium content" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.hasNot [ Selector.class "checkbox-PremiumClass" ] + , test "is not disabled when disabled = False and the checkbox is unlocked" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.has [ Selector.disabled False ] + , test "is disabled when disabled = True and the checkbox is unlocked" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = True + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.has [ Selector.disabled True ] + ] + ] From ee26d4d62b0105d5d5c6a79bd5ab1aff68360ebf Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Jun 2018 18:19:52 -0700 Subject: [PATCH 02/64] Reorder for my own understanding --- src/Nri/Ui/Checkbox/V3.elm | 274 ++++++++++++++++++------------------- 1 file changed, 137 insertions(+), 137 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 9d76c28c..2bd89f98 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -19,13 +19,12 @@ module Nri.Ui.Checkbox.V3 @docs Model, Theme, ColorTheme @docs view, viewWithLabel, viewAttention, disabled -@docs IsSelected @docs keyframeCss, styles ## Premium -@docs PremiumConfig, premium +@docs PremiumConfig, IsSelected, premium -} @@ -69,8 +68,142 @@ type alias Model msg = } -customView : List CssClasses -> Bool -> Model msg -> Html msg -customView modifierClasses showLabels model = +{-| Shows a checkbox (the label is only used for accessibility hints) +-} +view : Model msg -> Html msg +view model = + buildCheckbox [] False model + + +{-| Shows a checkbox and its label text +-} +viewWithLabel : Model msg -> Html msg +viewWithLabel model = + buildCheckbox [] True model + + +{-| Show a disabled checkbox. +-} +disabled : String -> String -> Html msg +disabled identifier labelText = + span + [ styles.class [ Container, SquareClass, Opacified ] + , Attributes.id <| identifier ++ "-container" + ] + [ checkbox identifier + (Just False) + [ Widget.label labelText + , styles.class [ Checkbox ] + , Attributes.id identifier + , Attributes.disabled True + ] + , label + [ Attributes.for identifier + , getLabelClass (Just False) + ] + [ Html.text labelText + ] + ] + + +{-| + + - `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 : IsSelected + , disabled : Bool + , teacherPremiumLevel : PremiumLevel + , contentPremiumLevel : PremiumLevel + , showFlagWhenLocked : Bool + , onChange : Bool -> msg + , onLockedClick : msg + , noOpMsg : msg + } + + +{-| This configurable is only used in the PremiumConfig. +-} +type IsSelected + = Selected + | NotSelected + | PartiallySelected + + +{-| A checkbox that should be used for premium content + +This checkbox is locked when the premium level of the content is greater than the premium level of the teacher + +-} +premium : PremiumConfig msg -> Html msg +premium config = + let + isLocked = + not <| + PremiumLevel.allowedFor + config.contentPremiumLevel + config.teacherPremiumLevel + + isChecked = + case config.selected of + Selected -> + Just True + + NotSelected -> + Just False + + PartiallySelected -> + Nothing + + modifierClasses = + List.concat + [ if config.showFlagWhenLocked && config.contentPremiumLevel /= Free then + [ PremiumClass ] + else + [] + , if config.disabled then + [ Opacified ] + else + [] + ] + + theme = + if isLocked then + LockOnInside + else if config.contentPremiumLevel /= Free then + Premium + else + Square Default + in + buildCheckbox modifierClasses + True + { identifier = config.id + , label = config.label + , setterMsg = + if isLocked then + \_ -> config.onLockedClick + else + config.onChange + , isChecked = isChecked + , disabled = config.disabled + , theme = theme + , noOpMsg = config.noOpMsg + } + + +{-| -} +viewAttention : Model msg -> Html msg +viewAttention model = + buildCheckbox [ WithPulsing ] False model + + +buildCheckbox : List CssClasses -> Bool -> Model msg -> Html msg +buildCheckbox modifierClasses showLabels model = let containerClasses = List.concat @@ -157,139 +290,6 @@ customView modifierClasses showLabels model = ] -{-| Shows a checkbox (the label is only used for accessibility hints) --} -view : Model msg -> Html msg -view model = - customView [] False model - - -{-| Shows a checkbox and its label text --} -viewWithLabel : Model msg -> Html msg -viewWithLabel model = - customView [] True model - - -{-| Show a disabled checkbox. --} -disabled : String -> String -> Html msg -disabled identifier labelText = - span - [ styles.class [ Container, SquareClass, Opacified ] - , Attributes.id <| identifier ++ "-container" - ] - [ checkbox identifier - (Just False) - [ Widget.label labelText - , styles.class [ Checkbox ] - , Attributes.id identifier - , Attributes.disabled True - ] - , label - [ Attributes.for identifier - , getLabelClass (Just False) - ] - [ Html.text labelText - ] - ] - - -{-| -} -type IsSelected - = Selected - | NotSelected - | PartiallySelected - - -{-| - - - `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 : IsSelected - , disabled : Bool - , teacherPremiumLevel : PremiumLevel - , contentPremiumLevel : PremiumLevel - , showFlagWhenLocked : Bool - , onChange : Bool -> msg - , onLockedClick : msg - , noOpMsg : msg - } - - -{-| A checkbox that should be used for premium content - -This checkbox is locked when the premium level of the content is greater than the premium level of the teacher - --} -premium : PremiumConfig msg -> Html msg -premium config = - let - isLocked = - not <| - PremiumLevel.allowedFor - config.contentPremiumLevel - config.teacherPremiumLevel - - isChecked = - case config.selected of - Selected -> - Just True - - NotSelected -> - Just False - - PartiallySelected -> - Nothing - - modifierClasses = - List.concat - [ if config.showFlagWhenLocked && config.contentPremiumLevel /= Free then - [ PremiumClass ] - else - [] - , if config.disabled then - [ Opacified ] - else - [] - ] - - theme = - if isLocked then - LockOnInside - else if config.contentPremiumLevel /= Free then - Premium - else - Square Default - in - customView modifierClasses - True - { identifier = config.id - , label = config.label - , setterMsg = - if isLocked then - \_ -> config.onLockedClick - else - config.onChange - , isChecked = isChecked - , disabled = config.disabled - , theme = theme - , noOpMsg = config.noOpMsg - } - - -{-| -} -viewAttention : Model msg -> Html msg -viewAttention model = - customView [ WithPulsing ] False model - - getLabelClass : Maybe Bool -> Html.Attribute msg getLabelClass maybeChecked = styles.class From 2a1eeb55221690ea8486d6d50ecf42e03fe18c4d Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Jun 2018 18:21:46 -0700 Subject: [PATCH 03/64] Alias Html as RootHtml --- src/Nri/Ui/Checkbox/V3.elm | 44 +++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 2bd89f98..e1763b8f 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -34,8 +34,8 @@ import Accessibility.Style import Accessibility.Widget as Widget import Css exposing (..) import Css.Foreign exposing (Snippet, children, descendants, everything, selector) -import Html -import Html.Attributes as Attributes +import Html as RootHtml +import Html.Attributes as RootAttributes import Html.Events as Events exposing (defaultOptions) import Json.Decode import Json.Encode @@ -44,7 +44,7 @@ import Nri.Ui.AssetPath.Css import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) import Nri.Ui.Fonts.V1 as Fonts -import Nri.Ui.Html.Attributes.Extra as Attributes +import Nri.Ui.Html.Attributes.Extra as RootAttributes import Nri.Ui.Html.Extra exposing (onEnter, onKeyUp) import Nri.Ui.Styles.V1 @@ -88,20 +88,20 @@ disabled : String -> String -> Html msg disabled identifier labelText = span [ styles.class [ Container, SquareClass, Opacified ] - , Attributes.id <| identifier ++ "-container" + , RootAttributes.id <| identifier ++ "-container" ] [ checkbox identifier (Just False) [ Widget.label labelText , styles.class [ Checkbox ] - , Attributes.id identifier - , Attributes.disabled True + , RootAttributes.id identifier + , RootAttributes.disabled True ] , label - [ Attributes.for identifier + [ RootAttributes.for identifier , getLabelClass (Just False) ] - [ Html.text labelText + [ RootHtml.text labelText ] ] @@ -238,12 +238,12 @@ buildCheckbox modifierClasses showLabels model = [ SquareClass, PremiumClass ] ] in - Html.span + RootHtml.span [ styles.class containerClasses - , Attributes.id <| model.identifier ++ "-container" + , RootAttributes.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) <| + RootAttributes.map (always model.noOpMsg) <| Events.onWithOptions "click" { defaultOptions | stopPropagation = True } (Json.Decode.succeed "stop click propagation") @@ -253,19 +253,19 @@ buildCheckbox modifierClasses showLabels model = [ Widget.label model.label , styles.class [ Checkbox ] , Events.onCheck model.setterMsg - , Attributes.id model.identifier - , Attributes.disabled model.disabled + , RootAttributes.id model.identifier + , RootAttributes.disabled model.disabled ] - , Html.label - [ Attributes.for model.identifier + , RootHtml.label + [ RootAttributes.for model.identifier , getLabelClass model.isChecked , controls model.identifier , Widget.disabled model.disabled , Widget.checked model.isChecked , if not model.disabled then - Attributes.tabindex 0 + RootAttributes.tabindex 0 else - Attributes.none + RootAttributes.none , if not model.disabled then Nri.Ui.Html.Extra.onKeyUp { defaultOptions | preventDefault = True } @@ -277,7 +277,7 @@ buildCheckbox modifierClasses showLabels model = Nothing ) else - Attributes.none + RootAttributes.none ] [ span (if showLabels then @@ -285,12 +285,12 @@ buildCheckbox modifierClasses showLabels model = else [ Accessibility.Style.invisible ] ) - [ Html.text model.label ] + [ RootHtml.text model.label ] ] ] -getLabelClass : Maybe Bool -> Html.Attribute msg +getLabelClass : Maybe Bool -> RootHtml.Attribute msg getLabelClass maybeChecked = styles.class [ Label @@ -306,9 +306,9 @@ getLabelClass maybeChecked = ] -indeterminateAttr : Html.Attribute msg +indeterminateAttr : RootHtml.Attribute msg indeterminateAttr = - Attributes.property "indeterminate" (Json.Encode.bool True) + RootAttributes.property "indeterminate" (Json.Encode.bool True) type CssClasses From b50f56644333cc1fde72dc08fe6af72147bdffc5 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 08:35:08 -0700 Subject: [PATCH 04/64] Pull out the styles from the stylesheet --- src/Nri/Ui/Checkbox/V3.elm | 324 +++++++++++++++++++++---------------- 1 file changed, 181 insertions(+), 143 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index e1763b8f..3a46337d 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -37,6 +37,7 @@ import Css.Foreign exposing (Snippet, children, descendants, everything, selecto import Html as RootHtml import Html.Attributes as RootAttributes import Html.Events as Events exposing (defaultOptions) +import Html.Styled.Attributes exposing (css) import Json.Decode import Json.Encode import Nri.Ui.AssetPath exposing (Asset(..)) @@ -360,194 +361,231 @@ type ColorTheme | Orange -mainSnippet : List Snippet -mainSnippet = - [ Css.Foreign.class Container - [ display block - , height inherit - , descendants - [ Css.Foreign.label - [ display inlineBlock - , verticalAlign middle - , minHeight (px 42) -- container height - , padding2 (px 13) zero - , fontSize (px 16) - , Fonts.baseFont - , color Colors.gray20 - , property "background-position" "left center" - , property "background-repeat" "no-repeat" - ] - , Css.Foreign.input [ display none ] - , selector ":disabled + label" - [ cursor auto - ] +containerStyles = + [ display block + , height inherit + , descendants + [ Css.Foreign.label + [ display inlineBlock + , verticalAlign middle + , minHeight (px 42) -- container height + , padding2 (px 13) zero + , fontSize (px 16) + , Fonts.baseFont + , color Colors.gray20 + , property "background-position" "left center" + , property "background-repeat" "no-repeat" + ] + , Css.Foreign.input [ display none ] + , selector ":disabled + label" + [ cursor auto ] ] - , Css.Foreign.class Checkbox - [ cursor pointer ] - , Css.Foreign.class Label - [ cursor pointer - , outline none + ] + + +checkboxStyles = + [ cursor pointer ] + + +labelStyles = + [ cursor pointer + , outline none + ] + + +squareStyles assets = + [ children + [ Css.Foreign.label + [ paddingLeft (px (29 + 6)) -- checkbox width + padding + ] + , Css.Foreign.class Unchecked [ backgroundImage assets CheckboxUnchecked ] + , Css.Foreign.class Checked [ backgroundImage assets CheckboxChecked ] + , Css.Foreign.class Indeterminate [ backgroundImage assets CheckboxCheckedPartially ] ] ] +grayStyles = + [ children [ Css.Foreign.label [ color Colors.gray45 ] ] ] + + +orangeStyles assets = + [ children + [ Css.Foreign.label + [ color Colors.ochre + , displayFlex + , alignItems center + ] + , selector "label::after" + [ property "content" "''" + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage assets PremiumUnlocked + ] + ] + ] + + +roundStyles assets = + [ children + [ Css.Foreign.label + [ displayFlex + , alignItems center + , property "cursor" "pointer" + ] + , selector "label::before" + [ property "content" "''" + , width (px 24) + , height (px 24) + , marginRight (px 8) + , borderRadius (pct 100) + ] + , selector ".checkbox-Unchecked::before" + [ border3 (px 2) solid Colors.blue + , backgroundColor Colors.white + ] + , selector ".checkbox-Checked::before" + [ backgroundColor Colors.green + , border3 (px 2) solid Colors.green + , backgroundImage assets CheckWhite + , property "background-repeat" "no-repeat" + , property "background-position" "center center" + ] + , selector ":disabled + label" + [ property "cursor" "auto" + ] + ] + ] + + +withPulsingStyles = + [ property "-webkit-animation" "pulsate 1s infinite" + , property "-moz-animation" "pulsate 1s infinite" + , property "animation" "pulsate 1s infinite" + ] + + +lockedStyles assets = + [ descendants + [ Css.Foreign.label + [ paddingLeft (px (29 + 6)) -- checkbox width + padding + , backgroundImage assets PremiumLocked + , property "cursor" "auto" + ] + ] + ] + + +lockOnInsideStyles assets = + [ descendants + [ Css.Foreign.label + [ paddingLeft (px 35) + , backgroundImage assets CheckboxLockOnInside + , backgroundSize (px 24) + , backgroundRepeat noRepeat + , property "cursor" "pointer" + ] + ] + ] + + +unlockableStyles assets = + [ descendants + [ Css.Foreign.label + [ paddingLeft (px (29 + 6)) -- checkbox width + padding + , backgroundImage assets PremiumKey + , property "cursor" "auto" + ] + ] + ] + + +premiumStyles assets = + [ children + [ Css.Foreign.label + [ displayFlex + , alignItems center + ] + , selector "label::after" + [ property "content" "''" + , display inlineBlock + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage assets PremiumFlag + , backgroundRepeat noRepeat + , backgroundPosition Css.center + ] + ] + ] + + +opacifiedStyles = + [ descendants [ everything [ opacity (num 0.4) ] ] ] + + +mainSnippet : List Snippet +mainSnippet = + [ Css.Foreign.class Container containerStyles + , Css.Foreign.class Checkbox checkboxStyles + , Css.Foreign.class Label labelStyles + ] + + square : Assets r -> List Snippet square assets = - [ Css.Foreign.class SquareClass - [ children - [ Css.Foreign.label - [ paddingLeft (px (29 + 6)) -- checkbox width + padding - ] - , Css.Foreign.class Unchecked [ backgroundImage assets CheckboxUnchecked ] - , Css.Foreign.class Checked [ backgroundImage assets CheckboxChecked ] - , Css.Foreign.class Indeterminate [ backgroundImage assets CheckboxCheckedPartially ] - ] - ] + [ Css.Foreign.class SquareClass (squareStyles assets) ] gray : List Snippet gray = - [ Css.Foreign.class GrayClass - [ children - [ Css.Foreign.label [ color Colors.gray45 ] ] - ] + [ Css.Foreign.class GrayClass grayStyles ] orange : Assets r -> List Snippet orange assets = - [ Css.Foreign.class OrangeClass - [ children - [ Css.Foreign.label - [ color Colors.ochre - , displayFlex - , alignItems center - ] - , selector "label::after" - [ property "content" "''" - , width (px 26) - , height (px 24) - , marginLeft (px 8) - , backgroundImage assets PremiumUnlocked - ] - ] - ] + [ Css.Foreign.class OrangeClass (orangeStyles assets) ] round : Assets r -> List Snippet round assets = - [ Css.Foreign.class RoundClass - [ children - [ Css.Foreign.label - [ displayFlex - , alignItems center - , property "cursor" "pointer" - ] - , selector "label::before" - [ property "content" "''" - , width (px 24) - , height (px 24) - , marginRight (px 8) - , borderRadius (pct 100) - ] - , selector ".checkbox-Unchecked::before" - [ border3 (px 2) solid Colors.blue - , backgroundColor Colors.white - ] - , selector ".checkbox-Checked::before" - [ backgroundColor Colors.green - , border3 (px 2) solid Colors.green - , backgroundImage assets CheckWhite - , property "background-repeat" "no-repeat" - , property "background-position" "center center" - ] - , selector ":disabled + label" - [ property "cursor" "auto" - ] - ] - ] - , Css.Foreign.class WithPulsing - [ property "-webkit-animation" "pulsate 1s infinite" - , property "-moz-animation" "pulsate 1s infinite" - , property "animation" "pulsate 1s infinite" - ] + [ Css.Foreign.class RoundClass (roundStyles assets) + , Css.Foreign.class WithPulsing withPulsingStyles ] locked : Assets r -> List Snippet locked assets = - [ Css.Foreign.class LockedClass - [ descendants - [ Css.Foreign.label - [ paddingLeft (px (29 + 6)) -- checkbox width + padding - , backgroundImage assets PremiumLocked - , property "cursor" "auto" - ] - ] - ] + [ Css.Foreign.class LockedClass (lockedStyles assets) ] lockOnInside : Assets r -> List Snippet lockOnInside assets = - [ Css.Foreign.class LockOnInsideClass - [ descendants - [ Css.Foreign.label - [ paddingLeft (px 35) - , backgroundImage assets CheckboxLockOnInside - , backgroundSize (px 24) - , backgroundRepeat noRepeat - , property "cursor" "pointer" - ] - ] - ] + [ Css.Foreign.class LockOnInsideClass (lockOnInsideStyles assets) ] unlockable : Assets r -> List Snippet unlockable assets = - [ Css.Foreign.class UnlockableClass - [ descendants - [ Css.Foreign.label - [ paddingLeft (px (29 + 6)) -- checkbox width + padding - , backgroundImage assets PremiumKey - , property "cursor" "auto" - ] - ] - ] + [ Css.Foreign.class UnlockableClass (unlockableStyles assets) ] -premiumStyles : Assets r -> List Snippet -premiumStyles assets = - [ Css.Foreign.class PremiumClass - [ children - [ Css.Foreign.label - [ displayFlex - , alignItems center - ] - , selector "label::after" - [ property "content" "''" - , display inlineBlock - , width (px 26) - , height (px 24) - , marginLeft (px 8) - , backgroundImage assets PremiumFlag - , backgroundRepeat noRepeat - , backgroundPosition Css.center - ] - ] - ] +premiumForeign : Assets r -> List Snippet +premiumForeign assets = + [ Css.Foreign.class PremiumClass (premiumStyles assets) ] opacified : List Snippet opacified = - [ Css.Foreign.class Opacified - [ descendants [ everything [ opacity (num 0.4) ] ] ] + [ Css.Foreign.class Opacified opacifiedStyles ] @@ -610,7 +648,7 @@ styles = , lockOnInside assets , unlockable assets , opacified - , premiumStyles assets + , premiumForeign assets ] |> List.concat ) From 6a7c6c2f02e0edaf04fc8c8629f9db6a9bf7f521 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 08:44:33 -0700 Subject: [PATCH 05/64] Pull out and begin converting the label to the new pattern --- src/Nri/Ui/Checkbox/V3.elm | 78 +++++++++++++++++++++----------------- 1 file changed, 44 insertions(+), 34 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 3a46337d..6378005d 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -28,15 +28,18 @@ module Nri.Ui.Checkbox.V3 -} -import Accessibility exposing (..) +import Accessibility exposing (checkbox, div, label, span, text) import Accessibility.Aria exposing (controls) import Accessibility.Style +import Accessibility.Styled as Html +import Accessibility.Styled.Style import Accessibility.Widget as Widget import Css exposing (..) import Css.Foreign exposing (Snippet, children, descendants, everything, selector) import Html as RootHtml import Html.Attributes as RootAttributes import Html.Events as Events exposing (defaultOptions) +import Html.Styled exposing (fromUnstyled, toUnstyled) import Html.Styled.Attributes exposing (css) import Json.Decode import Json.Encode @@ -71,21 +74,21 @@ type alias Model msg = {-| Shows a checkbox (the label is only used for accessibility hints) -} -view : Model msg -> Html msg +view : Model msg -> RootHtml.Html msg view model = buildCheckbox [] False model {-| Shows a checkbox and its label text -} -viewWithLabel : Model msg -> Html msg +viewWithLabel : Model msg -> RootHtml.Html msg viewWithLabel model = buildCheckbox [] True model {-| Show a disabled checkbox. -} -disabled : String -> String -> Html msg +disabled : String -> String -> RootHtml.Html msg disabled identifier labelText = span [ styles.class [ Container, SquareClass, Opacified ] @@ -141,7 +144,7 @@ type IsSelected This checkbox is locked when the premium level of the content is greater than the premium level of the teacher -} -premium : PremiumConfig msg -> Html msg +premium : PremiumConfig msg -> RootHtml.Html msg premium config = let isLocked = @@ -198,12 +201,12 @@ premium config = {-| -} -viewAttention : Model msg -> Html msg +viewAttention : Model msg -> RootHtml.Html msg viewAttention model = buildCheckbox [ WithPulsing ] False model -buildCheckbox : List CssClasses -> Bool -> Model msg -> Html msg +buildCheckbox : List CssClasses -> Bool -> Model msg -> RootHtml.Html msg buildCheckbox modifierClasses showLabels model = let containerClasses = @@ -257,37 +260,44 @@ buildCheckbox modifierClasses showLabels model = , RootAttributes.id model.identifier , RootAttributes.disabled model.disabled ] - , RootHtml.label - [ RootAttributes.for model.identifier - , getLabelClass model.isChecked - , controls model.identifier - , Widget.disabled model.disabled - , Widget.checked model.isChecked - , if not model.disabled then - RootAttributes.tabindex 0 - else - RootAttributes.none - , if not model.disabled then - Nri.Ui.Html.Extra.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 model.isChecked |> Maybe.withDefault True) - else - Nothing - ) - else - RootAttributes.none - ] - [ span + , viewLabel model <| + Html.span (if showLabels then [] else - [ Accessibility.Style.invisible ] + [ Accessibility.Styled.Style.invisible ] ) - [ RootHtml.text model.label ] - ] + [ Html.text model.label ] + ] + + +viewLabel : Model msg -> Html.Html msg -> RootHtml.Html msg +viewLabel model content = + RootHtml.label + [ RootAttributes.for model.identifier + , getLabelClass model.isChecked + , controls model.identifier + , Widget.disabled model.disabled + , Widget.checked model.isChecked + , if not model.disabled then + RootAttributes.tabindex 0 + else + RootAttributes.none + , if not model.disabled then + Nri.Ui.Html.Extra.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 model.isChecked |> Maybe.withDefault True) + else + Nothing + ) + else + RootAttributes.none + ] + [ content + |> Html.Styled.toUnstyled ] From 06651d829274b3c4529da7f0ca09fdca178b40e4 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 09:02:45 -0700 Subject: [PATCH 06/64] Add V2 of html extra attributes' --- src/Nri/Ui/Html/Attributes/V2.elm | 40 +++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/Nri/Ui/Html/Attributes/V2.elm diff --git a/src/Nri/Ui/Html/Attributes/V2.elm b/src/Nri/Ui/Html/Attributes/V2.elm new file mode 100644 index 00000000..1c2c9498 --- /dev/null +++ b/src/Nri/Ui/Html/Attributes/V2.elm @@ -0,0 +1,40 @@ +module Nri.Ui.Html.Attributes.V2 exposing (includeIf, none) + +{-| Extras for working with Html.Attributes. + +This is the new version of Nri.Ui.Html.Attributes.Extra. + +@docs none, includeIf + +-} + +import Html.Styled exposing (Attribute) +import Html.Styled.Attributes as Attributes +import Json.Encode as Encode + + +{-| Represents an attribute with no semantic meaning, useful for conditionals. + +This is implemented such that whenever Html.Attributes.Extra.none is encountered +by VirtualDom it will set a meaningless property on the element object itself to +null: + + domNode['Html.Attributes.Extra.none'] = null + +It's totally safe and lets us clean up conditional and maybe attributes + +-} +none : Attribute msg +none = + Attributes.property "Html.Attributes.Extra.none" Encode.null + + +{-| conditionally include an attribute. Useful for CSS classes generated with +`UniqueClass`! +-} +includeIf : Bool -> Attribute msg -> Attribute msg +includeIf cond attr = + if cond then + attr + else + none From fed092acea70808b348319f8345fe150e95298b0 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 09:07:35 -0700 Subject: [PATCH 07/64] Adds Html.Styled version of html extras --- src/Nri/Ui/Html/V2.elm | 143 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 src/Nri/Ui/Html/V2.elm diff --git a/src/Nri/Ui/Html/V2.elm b/src/Nri/Ui/Html/V2.elm new file mode 100644 index 00000000..e415bb5e --- /dev/null +++ b/src/Nri/Ui/Html/V2.elm @@ -0,0 +1,143 @@ +module Nri.Ui.Html.V2 exposing (..) + +{-| For all utils involving HTML. New version of Nri.Ui.Html.Extra. + +@docs role, noOpHref, noOpHrefUrl + +@docs onEsc, onEnter, onKeyUp, onEnterAndSpace + +@docs textFromList, oxfordifyWithHtml, nbsp + +-} + +import Char +import Html.Styled as Html exposing (Attribute, Html, span, text) +import Html.Styled.Attributes exposing (..) +import Html.Styled.Events exposing (..) +import Json.Decode + + +{-| Convenience for defining role attributes, e.g.
+-} +role : String -> Attribute msg +role = + attribute "role" + + +{-| -} +noOpHref : Attribute a +noOpHref = + href noOpHrefUrl + + +{-| This is a better choice for a no-op than "#" because "#" changes your +location bar. See for more details. +-} +noOpHrefUrl : String +noOpHrefUrl = + "javascript:void(0)" + + +{-| -} +onEsc : a -> a -> Attribute a +onEsc onEscAction onOtherKey = + on "keyup" + (Json.Decode.map + (\keyCode -> + if keyCode == 27 then + onEscAction + else + onOtherKey + ) + keyCode + ) + + +{-| -} +onEnter : a -> Attribute a +onEnter onEnterAction = + onKeyUp defaultOptions + (\keyCode -> + if keyCode == 13 then + Just onEnterAction + else + Nothing + ) + + +{-| "Buttons" should trigger on Enter and on Space. +-} +onEnterAndSpace : msg -> Attribute msg +onEnterAndSpace msg = + onKeyUp defaultOptions + (\keyCode -> + if keyCode == 13 || keyCode == 32 then + Just msg + else + Nothing + ) + + +{-| Convert a keycode into a message on keyup +-} +onKeyUp : Options -> (Int -> Maybe a) -> Attribute a +onKeyUp options toMaybeMsg = + onWithOptions "keyup" options <| + Json.Decode.andThen + (\keyCode -> + keyCode + |> toMaybeMsg + |> Maybe.map Json.Decode.succeed + |> Maybe.withDefault (Json.Decode.fail (toString keyCode)) + ) + keyCode + + +{-| Takes a list of strings, joins them with a space and returns it as a Html.text. +textFromList ["Hello", "World"] == text [ String.join " " ["Hello", "World" ] ] +-} +textFromList : List String -> Html msg +textFromList = + String.join " " >> text + + +{-| -} +oxfordifyWithHtml : String -> String -> List (Html msg) -> List (Html msg) +oxfordifyWithHtml pre post items = + let + textSpan string = + span [] [ text string ] + + final centrals = + [ textSpan pre ] ++ centrals ++ [ textSpan post ] + in + case items of + [] -> + [] + + [ single ] -> + final [ single ] + + [ first, second ] -> + final [ first, textSpan " and ", second ] + + many -> + let + beforeAnd = + List.take (List.length many - 1) many + + afterAnd = + List.drop (List.length many - 1) many + |> List.head + |> Maybe.withDefault (textSpan "") + in + final (List.intersperse (textSpan ", ") beforeAnd ++ [ textSpan ", and ", afterAnd ]) + + +{-| Workaround for `Html.text " "` not working in elm. +-} +nbsp : Html msg +nbsp = + Char.fromCode 160 + |> String.fromChar + |> Html.text From 3248a71007a1335f0bbc816d56c84a97d23d9c28 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 09:07:50 -0700 Subject: [PATCH 08/64] Convert the label helper (minus styles) --- src/Nri/Ui/Checkbox/V3.elm | 81 +++++++++++++++++++++++++++----------- 1 file changed, 57 insertions(+), 24 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 6378005d..f6d2405f 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -29,18 +29,20 @@ module Nri.Ui.Checkbox.V3 -} import Accessibility exposing (checkbox, div, label, span, text) -import Accessibility.Aria exposing (controls) +import Accessibility.Aria import Accessibility.Style import Accessibility.Styled as Html +import Accessibility.Styled.Aria as Aria import Accessibility.Styled.Style -import Accessibility.Widget as Widget +import Accessibility.Styled.Widget as Widget +import Accessibility.Widget import Css exposing (..) import Css.Foreign exposing (Snippet, children, descendants, everything, selector) import Html as RootHtml import Html.Attributes as RootAttributes import Html.Events as Events exposing (defaultOptions) import Html.Styled exposing (fromUnstyled, toUnstyled) -import Html.Styled.Attributes exposing (css) +import Html.Styled.Attributes as Attributes exposing (css) import Json.Decode import Json.Encode import Nri.Ui.AssetPath exposing (Asset(..)) @@ -49,7 +51,9 @@ import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Html.Attributes.Extra as RootAttributes +import Nri.Ui.Html.Attributes.V2 as ExtraAttributes import Nri.Ui.Html.Extra exposing (onEnter, onKeyUp) +import Nri.Ui.Html.V2 as HtmlExtra import Nri.Ui.Styles.V1 @@ -96,7 +100,7 @@ disabled identifier labelText = ] [ checkbox identifier (Just False) - [ Widget.label labelText + [ Accessibility.Widget.label labelText , styles.class [ Checkbox ] , RootAttributes.id identifier , RootAttributes.disabled True @@ -254,37 +258,38 @@ buildCheckbox modifierClasses showLabels model = ] [ checkbox model.identifier model.isChecked - [ Widget.label model.label + [ Accessibility.Widget.label model.label , styles.class [ Checkbox ] , Events.onCheck model.setterMsg , RootAttributes.id model.identifier , RootAttributes.disabled model.disabled ] - , viewLabel model <| - Html.span - (if showLabels then - [] - else - [ Accessibility.Styled.Style.invisible ] - ) - [ Html.text model.label ] + , Html.span + (if showLabels then + [] + else + [ Accessibility.Styled.Style.invisible ] + ) + [ Html.text model.label ] + |> viewLabel model + |> toUnstyled ] -viewLabel : Model msg -> Html.Html msg -> RootHtml.Html msg +viewLabel : Model msg -> Html.Html msg -> Html.Html msg viewLabel model content = - RootHtml.label - [ RootAttributes.for model.identifier - , getLabelClass model.isChecked - , controls model.identifier + Html.Styled.label + [ Attributes.for model.identifier + , Aria.controls model.identifier , Widget.disabled model.disabled , Widget.checked model.isChecked , if not model.disabled then - RootAttributes.tabindex 0 + Attributes.tabindex 0 else - RootAttributes.none + ExtraAttributes.none , if not model.disabled then - Nri.Ui.Html.Extra.onKeyUp + --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 @@ -294,10 +299,38 @@ viewLabel model content = Nothing ) else - RootAttributes.none + ExtraAttributes.none + , labelClass model.isChecked + , css + [ cursor pointer + , outline none + + --TODO These styles depend on the theme + --, case maybeChecked of + -- Just True -> + -- Checked + -- Just False -> + -- Unchecked + -- Nothing -> + -- Indeterminate + ] ] - [ content - |> Html.Styled.toUnstyled + [ content ] + + +labelClass : Maybe Bool -> Html.Attribute msg +labelClass maybeChecked = + Attributes.classList + [ ( "checkbox-Label", True ) + , case maybeChecked of + Just True -> + ( "checkbox-Checked", True ) + + Just False -> + ( "checkbox-Unchecked", True ) + + Nothing -> + ( "checkbox-Indeterminate", True ) ] From 6f7be4edc0be202a059977907a18ecb8089de33d Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 09:19:07 -0700 Subject: [PATCH 09/64] :art: move toward forking a little bit higher in advance of moving the styles --- src/Nri/Ui/Checkbox/V3.elm | 110 ++++++++++++++++++++++++------------- 1 file changed, 73 insertions(+), 37 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index f6d2405f..106f4713 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -264,20 +264,21 @@ buildCheckbox modifierClasses showLabels model = , RootAttributes.id model.identifier , RootAttributes.disabled model.disabled ] - , Html.span - (if showLabels then - [] - else - [ Accessibility.Styled.Style.invisible ] - ) - [ Html.text model.label ] - |> viewLabel model - |> toUnstyled + , if showLabels then + viewLabel model + (Html.span [] [ Html.text model.label ]) + (labelClassAndTheme model.isChecked) + |> toUnstyled + else + viewLabel model + (Html.span [ Accessibility.Styled.Style.invisible ] [ Html.text model.label ]) + (labelClassAndTheme model.isChecked) + |> toUnstyled ] -viewLabel : Model msg -> Html.Html msg -> Html.Html msg -viewLabel model content = +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 @@ -300,38 +301,73 @@ viewLabel model content = ) else ExtraAttributes.none - , labelClass model.isChecked - , css - [ cursor pointer - , outline none - - --TODO These styles depend on the theme - --, case maybeChecked of - -- Just True -> - -- Checked - -- Just False -> - -- Unchecked - -- Nothing -> - -- Indeterminate - ] + , class + , theme ] [ content ] -labelClass : Maybe Bool -> Html.Attribute msg -labelClass maybeChecked = - Attributes.classList - [ ( "checkbox-Label", True ) - , case maybeChecked of - Just True -> - ( "checkbox-Checked", True ) +labelClassAndTheme isChecked = + case isChecked of + Just True -> + ( Attributes.classList + [ ( "checkbox-Label", True ) + , ( "checkbox-Checked", True ) + ] + , css + [ cursor pointer + , outline none - Just False -> - ( "checkbox-Unchecked", True ) + --TODO These styles depend on the theme + --, case maybeChecked of + -- Just True -> + -- Checked + -- Just False -> + -- Unchecked + -- Nothing -> + -- Indeterminate + ] + ) - Nothing -> - ( "checkbox-Indeterminate", True ) - ] + Just False -> + ( Attributes.classList + [ ( "checkbox-Label", True ) + , ( "checkbox-Unchecked", True ) + ] + , css + [ cursor pointer + , outline none + + --TODO These styles depend on the theme + --, case maybeChecked of + -- Just True -> + -- Checked + -- Just False -> + -- Unchecked + -- Nothing -> + -- Indeterminate + ] + ) + + Nothing -> + ( Attributes.classList + [ ( "checkbox-Label", True ) + , ( "checkbox-Indeterminate", True ) + ] + , css + [ cursor pointer + , outline none + + --TODO These styles depend on the theme + --, case maybeChecked of + -- Just True -> + -- Checked + -- Just False -> + -- Unchecked + -- Nothing -> + -- Indeterminate + ] + ) getLabelClass : Maybe Bool -> RootHtml.Attribute msg From 9558de8b94f113867d700df080ee4242f317e3c0 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 09:33:14 -0700 Subject: [PATCH 10/64] buildCheckbox returns Html.Styled --- src/Nri/Ui/Checkbox/V3.elm | 81 ++++++++++++++++++++------------------ 1 file changed, 42 insertions(+), 39 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 106f4713..88769b6f 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -40,9 +40,10 @@ import Css exposing (..) import Css.Foreign exposing (Snippet, children, descendants, everything, selector) import Html as RootHtml import Html.Attributes as RootAttributes -import Html.Events as Events exposing (defaultOptions) +import Html.Events exposing (defaultOptions) import Html.Styled exposing (fromUnstyled, toUnstyled) import Html.Styled.Attributes as Attributes exposing (css) +import Html.Styled.Events as Events import Json.Decode import Json.Encode import Nri.Ui.AssetPath exposing (Asset(..)) @@ -171,11 +172,11 @@ premium config = modifierClasses = List.concat [ if config.showFlagWhenLocked && config.contentPremiumLevel /= Free then - [ PremiumClass ] + [ "PremiumClass" ] else [] , if config.disabled then - [ Opacified ] + [ "Opacified" ] else [] ] @@ -207,74 +208,76 @@ premium config = {-| -} viewAttention : Model msg -> RootHtml.Html msg viewAttention model = - buildCheckbox [ WithPulsing ] False model + buildCheckbox [ "WithPulsing" ] False model -buildCheckbox : List CssClasses -> Bool -> Model msg -> RootHtml.Html msg +buildCheckbox : List String -> Bool -> Model msg -> RootHtml.Html msg buildCheckbox modifierClasses showLabels model = let containerClasses = - List.concat - [ [ Container ] - , modifierClasses - , case model.theme of - Square Gray -> - [ SquareClass, GrayClass ] + List.map (\a -> ( "checkbox-" ++ a, True )) <| + List.concat + [ modifierClasses + , case model.theme of + Square Gray -> + [ "SquareClass", "GrayClass" ] - Square Orange -> - [ SquareClass, OrangeClass ] + Square Orange -> + [ "SquareClass", "OrangeClass" ] - Square Default -> - [ SquareClass ] + Square Default -> + [ "SquareClass" ] - Locked -> - [ LockedClass ] + Locked -> + [ "LockedClass" ] - LockOnInside -> - [ LockOnInsideClass ] + LockOnInside -> + [ "LockOnInsideClass" ] - Unlockable -> - [ UnlockableClass ] + Unlockable -> + [ "UnlockableClass" ] - Round -> - [ RoundClass ] + Round -> + [ "RoundClass" ] - Disabled -> - [ SquareClass, Opacified ] + Disabled -> + [ "SquareClass", "Opacified" ] - Premium -> - [ SquareClass, PremiumClass ] - ] + Premium -> + [ "SquareClass", "PremiumClass" ] + ] in - RootHtml.span - [ styles.class containerClasses - , RootAttributes.id <| model.identifier ++ "-container" + Html.Styled.span + [ css containerStyles + , Attributes.classList containerClasses + , Attributes.id <| model.identifier ++ "-container" , -- This is necessary to prevent event propagation. -- See https://github.com/elm-lang/html/issues/96 - RootAttributes.map (always model.noOpMsg) <| + Attributes.map (always model.noOpMsg) <| Events.onWithOptions "click" { defaultOptions | stopPropagation = True } (Json.Decode.succeed "stop click propagation") ] - [ checkbox model.identifier + [ Html.checkbox model.identifier model.isChecked - [ Accessibility.Widget.label model.label - , styles.class [ Checkbox ] + [ Widget.label model.label , Events.onCheck model.setterMsg - , RootAttributes.id model.identifier - , RootAttributes.disabled model.disabled + , Attributes.id model.identifier + , Attributes.disabled model.disabled + + --TODO these styles should change with the theme too + , css checkboxStyles ] , if showLabels then viewLabel model (Html.span [] [ Html.text model.label ]) (labelClassAndTheme model.isChecked) - |> toUnstyled else viewLabel model (Html.span [ Accessibility.Styled.Style.invisible ] [ Html.text model.label ]) (labelClassAndTheme model.isChecked) - |> toUnstyled ] + |> toUnstyled viewLabel : Model msg -> Html.Html msg -> ( Html.Attribute msg, Html.Attribute msg ) -> Html.Html msg From 0755e5cbb4464552656133dba3323a356e7d52cc Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 09:51:24 -0700 Subject: [PATCH 11/64] Return Html>styled from the helpers that use buildCheckbox --- src/Nri/Ui/Checkbox/V3.elm | 10 +++++----- tests/Spec/Nri/Ui/Checkbox/V3.elm | 2 ++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 88769b6f..7c0f59cd 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -79,14 +79,14 @@ type alias Model msg = {-| Shows a checkbox (the label is only used for accessibility hints) -} -view : Model msg -> RootHtml.Html msg +view : Model msg -> Html.Html msg view model = buildCheckbox [] False model {-| Shows a checkbox and its label text -} -viewWithLabel : Model msg -> RootHtml.Html msg +viewWithLabel : Model msg -> Html.Html msg viewWithLabel model = buildCheckbox [] True model @@ -149,7 +149,7 @@ type IsSelected This checkbox is locked when the premium level of the content is greater than the premium level of the teacher -} -premium : PremiumConfig msg -> RootHtml.Html msg +premium : PremiumConfig msg -> Html.Html msg premium config = let isLocked = @@ -206,12 +206,12 @@ premium config = {-| -} -viewAttention : Model msg -> RootHtml.Html msg +viewAttention : Model msg -> Html.Html msg viewAttention model = buildCheckbox [ "WithPulsing" ] False model -buildCheckbox : List String -> Bool -> Model msg -> RootHtml.Html msg +buildCheckbox : List String -> Bool -> Model msg -> Html.Html msg buildCheckbox modifierClasses showLabels model = let containerClasses = diff --git a/tests/Spec/Nri/Ui/Checkbox/V3.elm b/tests/Spec/Nri/Ui/Checkbox/V3.elm index 494af08e..af181d80 100644 --- a/tests/Spec/Nri/Ui/Checkbox/V3.elm +++ b/tests/Spec/Nri/Ui/Checkbox/V3.elm @@ -1,5 +1,6 @@ module Spec.Nri.Ui.Checkbox.V3 exposing (spec) +import Html.Styled import Nri.Ui.Checkbox.V3 as Checkbox exposing (IsSelected(..)) import Nri.Ui.Data.PremiumLevel exposing (PremiumLevel(..)) import Test exposing (..) @@ -20,6 +21,7 @@ premiumView config = , onLockedClick = () , noOpMsg = () } + |> Html.Styled.toUnstyled |> Query.fromHtml From 8751820df116ff5e039e6ea23097effd8d64973c Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 09:51:40 -0700 Subject: [PATCH 12/64] Introduce config for a new checkbox helper --- src/Nri/Ui/Checkbox/V3.elm | 38 ++++++++++++++++++++++---------------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 7c0f59cd..409e7da3 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -247,9 +247,25 @@ buildCheckbox modifierClasses showLabels model = [ "SquareClass", "PremiumClass" ] ] in + viewCheckbox model + { containerStyles = css containerStyles + , containerClasses = Attributes.classList containerClasses + , checkboxStyles = css checkboxStyles + , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) + , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelContent = + if showLabels then + Html.span [] [ Html.text model.label ] + else + Html.span [ Accessibility.Styled.Style.invisible ] + [ Html.text model.label ] + } + + +viewCheckbox model config = Html.Styled.span - [ css containerStyles - , Attributes.classList containerClasses + [ config.containerStyles + , config.containerClasses , Attributes.id <| model.identifier ++ "-container" , -- This is necessary to prevent event propagation. -- See https://github.com/elm-lang/html/issues/96 @@ -264,24 +280,14 @@ buildCheckbox modifierClasses showLabels model = , Events.onCheck model.setterMsg , Attributes.id model.identifier , Attributes.disabled model.disabled - - --TODO these styles should change with the theme too - , css checkboxStyles + , config.checkboxStyles ] - , if showLabels then - viewLabel model - (Html.span [] [ Html.text model.label ]) - (labelClassAndTheme model.isChecked) - else - viewLabel model - (Html.span [ Accessibility.Styled.Style.invisible ] [ Html.text model.label ]) - (labelClassAndTheme model.isChecked) + , viewLabel model config.labelContent config.labelClasses config.labelStyles ] - |> toUnstyled -viewLabel : Model msg -> Html.Html msg -> ( Html.Attribute msg, Html.Attribute msg ) -> Html.Html msg -viewLabel model content ( class, theme ) = +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 From b0820f52b43d0cd418a0fcbeea1e732ded9a3475 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 09:55:19 -0700 Subject: [PATCH 13/64] Fork at the theme level --- src/Nri/Ui/Checkbox/V3.elm | 126 +++++++++++++++++++++++++------------ 1 file changed, 86 insertions(+), 40 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 409e7da3..220f1010 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -214,52 +214,98 @@ viewAttention model = buildCheckbox : List String -> Bool -> Model msg -> Html.Html msg buildCheckbox modifierClasses showLabels model = let - containerClasses = - List.map (\a -> ( "checkbox-" ++ a, True )) <| - List.concat - [ modifierClasses - , case model.theme of - Square Gray -> - [ "SquareClass", "GrayClass" ] + toClassList = + List.map (\a -> ( "checkbox-" ++ a, True )) >> Attributes.classList - Square Orange -> - [ "SquareClass", "OrangeClass" ] - - Square Default -> - [ "SquareClass" ] - - Locked -> - [ "LockedClass" ] - - LockOnInside -> - [ "LockOnInsideClass" ] - - Unlockable -> - [ "UnlockableClass" ] - - Round -> - [ "RoundClass" ] - - Disabled -> - [ "SquareClass", "Opacified" ] - - Premium -> - [ "SquareClass", "PremiumClass" ] - ] - in - viewCheckbox model - { containerStyles = css containerStyles - , containerClasses = Attributes.classList containerClasses - , checkboxStyles = css checkboxStyles - , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) - , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) - , labelContent = + labelContent = if showLabels then Html.span [] [ Html.text model.label ] else Html.span [ Accessibility.Styled.Style.invisible ] [ Html.text model.label ] - } + in + viewCheckbox model <| + case model.theme of + Square Gray -> + { containerStyles = css containerStyles + , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "GrayClass" ]) + , checkboxStyles = css checkboxStyles + , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) + , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelContent = labelContent + } + + Square Orange -> + { containerStyles = css containerStyles + , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "OrangeClass" ]) + , checkboxStyles = css checkboxStyles + , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) + , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelContent = labelContent + } + + Square Default -> + { containerStyles = css containerStyles + , containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) + , checkboxStyles = css checkboxStyles + , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) + , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelContent = labelContent + } + + Locked -> + { containerStyles = css containerStyles + , containerClasses = toClassList (modifierClasses ++ [ "LockedClass" ]) + , checkboxStyles = css checkboxStyles + , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) + , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelContent = labelContent + } + + LockOnInside -> + { containerStyles = css containerStyles + , containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) + , checkboxStyles = css checkboxStyles + , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) + , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelContent = labelContent + } + + Unlockable -> + { containerStyles = css containerStyles + , containerClasses = toClassList (modifierClasses ++ [ "UnlockableClass" ]) + , checkboxStyles = css checkboxStyles + , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) + , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelContent = labelContent + } + + Round -> + { containerStyles = css containerStyles + , containerClasses = toClassList (modifierClasses ++ [ "RoundClass" ]) + , checkboxStyles = css checkboxStyles + , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) + , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelContent = labelContent + } + + Disabled -> + { containerStyles = css containerStyles + , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "Opacified" ]) + , checkboxStyles = css checkboxStyles + , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) + , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelContent = labelContent + } + + Premium -> + { containerStyles = css containerStyles + , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ]) + , checkboxStyles = css checkboxStyles + , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) + , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelContent = labelContent + } viewCheckbox model config = From 43b5ab74a3b801c466941427d6644460b9c35e5f Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 09:58:33 -0700 Subject: [PATCH 14/64] Pull the labelstyles inline --- src/Nri/Ui/Checkbox/V3.elm | 156 ++++++++++++++++++------------------- 1 file changed, 75 insertions(+), 81 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 220f1010..ce0165e0 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -230,8 +230,12 @@ buildCheckbox modifierClasses showLabels model = { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "GrayClass" ]) , checkboxStyles = css checkboxStyles - , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) - , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelStyles = + css + [ cursor pointer + , outline none + ] + , labelClasses = labelClass model.isChecked , labelContent = labelContent } @@ -239,8 +243,12 @@ buildCheckbox modifierClasses showLabels model = { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "OrangeClass" ]) , checkboxStyles = css checkboxStyles - , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) - , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelStyles = + css + [ cursor pointer + , outline none + ] + , labelClasses = labelClass model.isChecked , labelContent = labelContent } @@ -248,8 +256,12 @@ buildCheckbox modifierClasses showLabels model = { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) , checkboxStyles = css checkboxStyles - , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) - , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelStyles = + css + [ cursor pointer + , outline none + ] + , labelClasses = labelClass model.isChecked , labelContent = labelContent } @@ -257,8 +269,12 @@ buildCheckbox modifierClasses showLabels model = { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "LockedClass" ]) , checkboxStyles = css checkboxStyles - , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) - , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelStyles = + css + [ cursor pointer + , outline none + ] + , labelClasses = labelClass model.isChecked , labelContent = labelContent } @@ -266,8 +282,12 @@ buildCheckbox modifierClasses showLabels model = { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) , checkboxStyles = css checkboxStyles - , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) - , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelStyles = + css + [ cursor pointer + , outline none + ] + , labelClasses = labelClass model.isChecked , labelContent = labelContent } @@ -275,8 +295,12 @@ buildCheckbox modifierClasses showLabels model = { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "UnlockableClass" ]) , checkboxStyles = css checkboxStyles - , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) - , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelStyles = + css + [ cursor pointer + , outline none + ] + , labelClasses = labelClass model.isChecked , labelContent = labelContent } @@ -284,8 +308,12 @@ buildCheckbox modifierClasses showLabels model = { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "RoundClass" ]) , checkboxStyles = css checkboxStyles - , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) - , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelStyles = + css + [ cursor pointer + , outline none + ] + , labelClasses = labelClass model.isChecked , labelContent = labelContent } @@ -293,8 +321,12 @@ buildCheckbox modifierClasses showLabels model = { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "Opacified" ]) , checkboxStyles = css checkboxStyles - , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) - , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelStyles = + css + [ cursor pointer + , outline none + ] + , labelClasses = labelClass model.isChecked , labelContent = labelContent } @@ -302,12 +334,37 @@ buildCheckbox modifierClasses showLabels model = { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ]) , checkboxStyles = css checkboxStyles - , labelStyles = Tuple.first (labelClassAndTheme model.isChecked) - , labelClasses = Tuple.second (labelClassAndTheme model.isChecked) + , labelStyles = + css + [ cursor pointer + , outline none + ] + , labelClasses = labelClass model.isChecked , labelContent = labelContent } +labelClass isChecked = + case isChecked of + Just True -> + Attributes.classList + [ ( "checkbox-Label", True ) + , ( "checkbox-Checked", True ) + ] + + Just False -> + Attributes.classList + [ ( "checkbox-Label", True ) + , ( "checkbox-Unchecked", True ) + ] + + Nothing -> + Attributes.classList + [ ( "checkbox-Label", True ) + , ( "checkbox-Indeterminate", True ) + ] + + viewCheckbox model config = Html.Styled.span [ config.containerStyles @@ -362,69 +419,6 @@ viewLabel model content class theme = [ content ] -labelClassAndTheme isChecked = - case isChecked of - Just True -> - ( Attributes.classList - [ ( "checkbox-Label", True ) - , ( "checkbox-Checked", True ) - ] - , css - [ cursor pointer - , outline none - - --TODO These styles depend on the theme - --, case maybeChecked of - -- Just True -> - -- Checked - -- Just False -> - -- Unchecked - -- Nothing -> - -- Indeterminate - ] - ) - - Just False -> - ( Attributes.classList - [ ( "checkbox-Label", True ) - , ( "checkbox-Unchecked", True ) - ] - , css - [ cursor pointer - , outline none - - --TODO These styles depend on the theme - --, case maybeChecked of - -- Just True -> - -- Checked - -- Just False -> - -- Unchecked - -- Nothing -> - -- Indeterminate - ] - ) - - Nothing -> - ( Attributes.classList - [ ( "checkbox-Label", True ) - , ( "checkbox-Indeterminate", True ) - ] - , css - [ cursor pointer - , outline none - - --TODO These styles depend on the theme - --, case maybeChecked of - -- Just True -> - -- Checked - -- Just False -> - -- Unchecked - -- Nothing -> - -- Indeterminate - ] - ) - - getLabelClass : Maybe Bool -> RootHtml.Attribute msg getLabelClass maybeChecked = styles.class From 785bc0e9325abe37feefb5cfb11784343d1434f9 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 10:47:18 -0700 Subject: [PATCH 15/64] Fix mismatch in elm package dependencies --- tests/elm-package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/elm-package.json b/tests/elm-package.json index 89f854ac..d7bf9fcd 100644 --- a/tests/elm-package.json +++ b/tests/elm-package.json @@ -14,6 +14,7 @@ "elm-community/elm-test": "4.0.0 <= v < 5.0.0", "elm-lang/core": "5.1.1 <= v < 6.0.0", "elm-lang/html": "2.0.0 <= v < 3.0.0", + "elm-lang/svg": "2.0.0 <= v < 3.0.0", "pablohirafuji/elm-markdown": "2.0.4 <= v < 3.0.0", "rtfeldman/elm-css": "13.1.1 <= v < 14.0.0", "rtfeldman/elm-css-helpers": "2.1.0 <= v < 3.0.0", From f2531b0a2f2cd5dfb97d0cd394b951716f260761 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 10:54:38 -0700 Subject: [PATCH 16/64] Pull the assets up out of the sytesl --- src/Nri/Ui/Checkbox/V3.elm | 159 +++++++++++++----------------- tests/Spec/Nri/Ui/Checkbox/V3.elm | 16 ++- 2 files changed, 85 insertions(+), 90 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index ce0165e0..086a1480 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -29,8 +29,6 @@ module Nri.Ui.Checkbox.V3 -} import Accessibility exposing (checkbox, div, label, span, text) -import Accessibility.Aria -import Accessibility.Style import Accessibility.Styled as Html import Accessibility.Styled.Aria as Aria import Accessibility.Styled.Style @@ -53,7 +51,6 @@ import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Html.Attributes.Extra as RootAttributes import Nri.Ui.Html.Attributes.V2 as ExtraAttributes -import Nri.Ui.Html.Extra exposing (onEnter, onKeyUp) import Nri.Ui.Html.V2 as HtmlExtra import Nri.Ui.Styles.V1 @@ -79,16 +76,16 @@ type alias Model msg = {-| Shows a checkbox (the label is only used for accessibility hints) -} -view : Model msg -> Html.Html msg -view model = - buildCheckbox [] False model +view : Assets a -> Model msg -> Html.Html msg +view assets model = + buildCheckbox assets [] False model {-| Shows a checkbox and its label text -} -viewWithLabel : Model msg -> Html.Html msg -viewWithLabel model = - buildCheckbox [] True model +viewWithLabel : Assets a -> Model msg -> Html.Html msg +viewWithLabel assets model = + buildCheckbox assets [] True model {-| Show a disabled checkbox. @@ -149,8 +146,8 @@ type IsSelected This checkbox is locked when the premium level of the content is greater than the premium level of the teacher -} -premium : PremiumConfig msg -> Html.Html msg -premium config = +premium : Assets a -> PremiumConfig msg -> Html.Html msg +premium assets config = let isLocked = not <| @@ -189,7 +186,8 @@ premium config = else Square Default in - buildCheckbox modifierClasses + buildCheckbox assets + modifierClasses True { identifier = config.id , label = config.label @@ -206,13 +204,13 @@ premium config = {-| -} -viewAttention : Model msg -> Html.Html msg -viewAttention model = - buildCheckbox [ "WithPulsing" ] False model +viewAttention : Assets a -> Model msg -> Html.Html msg +viewAttention assets model = + buildCheckbox assets [ "WithPulsing" ] False model -buildCheckbox : List String -> Bool -> Model msg -> Html.Html msg -buildCheckbox modifierClasses showLabels model = +buildCheckbox : Assets a -> List String -> Bool -> Model msg -> Html.Html msg +buildCheckbox assets modifierClasses showLabels model = let toClassList = List.map (\a -> ( "checkbox-" ++ a, True )) >> Attributes.classList @@ -226,40 +224,38 @@ buildCheckbox modifierClasses showLabels model = in viewCheckbox model <| case model.theme of - Square Gray -> - { containerStyles = css containerStyles - , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "GrayClass" ]) - , checkboxStyles = css checkboxStyles - , labelStyles = - css - [ cursor pointer - , outline none - ] - , labelClasses = labelClass model.isChecked - , labelContent = labelContent - } + Square color -> + let + colorClass = + case color of + Gray -> + "GrayClass" - Square Orange -> - { containerStyles = css containerStyles - , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "OrangeClass" ]) - , checkboxStyles = css checkboxStyles - , labelStyles = - css - [ cursor pointer - , outline none - ] - , labelClasses = labelClass model.isChecked - , labelContent = labelContent - } + Orange -> + "OrangeClass" - Square Default -> + Default -> + "" + in { containerStyles = css containerStyles - , containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) - , checkboxStyles = css checkboxStyles + , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", colorClass ]) + , checkboxStyles = + css + [ cursor pointer ] , labelStyles = css [ cursor pointer , outline none + , paddingLeft (px (29 + 6)) -- checkbox width + padding + , case model.isChecked of + Just True -> + backgroundImage assets CheckboxChecked + + Just False -> + backgroundImage assets CheckboxUnchecked + + Nothing -> + backgroundImage assets CheckboxCheckedPartially ] , labelClasses = labelClass model.isChecked , labelContent = labelContent @@ -268,7 +264,9 @@ buildCheckbox modifierClasses showLabels model = Locked -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "LockedClass" ]) - , checkboxStyles = css checkboxStyles + , checkboxStyles = + css + [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -281,7 +279,9 @@ buildCheckbox modifierClasses showLabels model = LockOnInside -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) - , checkboxStyles = css checkboxStyles + , checkboxStyles = + css + [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -294,7 +294,9 @@ buildCheckbox modifierClasses showLabels model = Unlockable -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "UnlockableClass" ]) - , checkboxStyles = css checkboxStyles + , checkboxStyles = + css + [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -307,7 +309,9 @@ buildCheckbox modifierClasses showLabels model = Round -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "RoundClass" ]) - , checkboxStyles = css checkboxStyles + , checkboxStyles = + css + [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -320,7 +324,9 @@ buildCheckbox modifierClasses showLabels model = Disabled -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "Opacified" ]) - , checkboxStyles = css checkboxStyles + , checkboxStyles = + css + [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -333,7 +339,9 @@ buildCheckbox modifierClasses showLabels model = Premium -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ]) - , checkboxStyles = css checkboxStyles + , checkboxStyles = + css + [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -365,6 +373,17 @@ labelClass isChecked = ] +viewCheckbox : + Model msg + -> + { containerStyles : Html.Attribute msg + , containerClasses : Html.Attribute msg + , checkboxStyles : Html.Attribute msg + , labelStyles : Html.Attribute msg + , labelClasses : Html.Attribute msg + , labelContent : Html.Html msg + } + -> Html.Html msg viewCheckbox model config = Html.Styled.span [ config.containerStyles @@ -512,28 +531,6 @@ containerStyles = ] -checkboxStyles = - [ cursor pointer ] - - -labelStyles = - [ cursor pointer - , outline none - ] - - -squareStyles assets = - [ children - [ Css.Foreign.label - [ paddingLeft (px (29 + 6)) -- checkbox width + padding - ] - , Css.Foreign.class Unchecked [ backgroundImage assets CheckboxUnchecked ] - , Css.Foreign.class Checked [ backgroundImage assets CheckboxChecked ] - , Css.Foreign.class Indeterminate [ backgroundImage assets CheckboxCheckedPartially ] - ] - ] - - grayStyles = [ children [ Css.Foreign.label [ color Colors.gray45 ] ] ] @@ -654,20 +651,6 @@ opacifiedStyles = [ descendants [ everything [ opacity (num 0.4) ] ] ] -mainSnippet : List Snippet -mainSnippet = - [ Css.Foreign.class Container containerStyles - , Css.Foreign.class Checkbox checkboxStyles - , Css.Foreign.class Label labelStyles - ] - - -square : Assets r -> List Snippet -square assets = - [ Css.Foreign.class SquareClass (squareStyles assets) - ] - - gray : List Snippet gray = [ Css.Foreign.class GrayClass grayStyles @@ -767,9 +750,7 @@ keyframeCss = styles : Nri.Ui.Styles.V1.StylesWithAssets Never CssClasses msg (Assets r) styles = (\assets -> - [ mainSnippet - , square assets - , gray + [ gray , orange assets , round assets , locked assets diff --git a/tests/Spec/Nri/Ui/Checkbox/V3.elm b/tests/Spec/Nri/Ui/Checkbox/V3.elm index af181d80..50c868e9 100644 --- a/tests/Spec/Nri/Ui/Checkbox/V3.elm +++ b/tests/Spec/Nri/Ui/Checkbox/V3.elm @@ -1,6 +1,7 @@ module Spec.Nri.Ui.Checkbox.V3 exposing (spec) import Html.Styled +import Nri.Ui.AssetPath exposing (Asset(Asset)) import Nri.Ui.Checkbox.V3 as Checkbox exposing (IsSelected(..)) import Nri.Ui.Data.PremiumLevel exposing (PremiumLevel(..)) import Test exposing (..) @@ -9,7 +10,7 @@ import Test.Html.Selector as Selector premiumView config = - Checkbox.premium + Checkbox.premium assets { label = config.label , id = "id" , selected = config.selected @@ -163,3 +164,16 @@ spec = |> Query.has [ Selector.disabled True ] ] ] + + +assets = + { checkboxUnchecked_svg = Asset "checkboxUnchecked reference" + , checkboxChecked_svg = Asset "checkboxChecked reference" + , checkboxCheckedPartially_svg = Asset "checkboxCheckedPartially reference" + , iconPremiumUnlocked_png = Asset "iconPremiumUnlocked reference" + , iconCheck_png = Asset "iconCheck reference" + , iconPremiumLocked_png = Asset "iconPremiumLocked reference" + , checkboxLockOnInside_svg = Asset "checkboxLockOnInside reference" + , iconPremiumKey_png = Asset "iconPremiumKey reference" + , iconPremiumFlag_svg = Asset "iconPremiumFlag reference" + } From bef2006bc2be34262ab7520a8f2798d096e67059 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:01:27 -0700 Subject: [PATCH 17/64] Pull up the square color themes --- src/Nri/Ui/Checkbox/V3.elm | 78 ++++++++++++-------------------------- 1 file changed, 24 insertions(+), 54 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 086a1480..acd7a2f0 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -224,24 +224,10 @@ buildCheckbox assets modifierClasses showLabels model = in viewCheckbox model <| case model.theme of - Square color -> - let - colorClass = - case color of - Gray -> - "GrayClass" - - Orange -> - "OrangeClass" - - Default -> - "" - in + Square colorTheme -> { containerStyles = css containerStyles - , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", colorClass ]) - , checkboxStyles = - css - [ cursor pointer ] + , containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) + , checkboxStyles = css [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -256,6 +242,26 @@ buildCheckbox assets modifierClasses showLabels model = Nothing -> backgroundImage assets CheckboxCheckedPartially + , Css.batch <| + case colorTheme of + Gray -> + [ color Colors.gray45 ] + + Orange -> + [ color Colors.ochre + , displayFlex + , alignItems center + , Css.after + [ property "content" "''" + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage assets PremiumUnlocked + ] + ] + + Default -> + [] ] , labelClasses = labelClass model.isChecked , labelContent = labelContent @@ -531,28 +537,6 @@ containerStyles = ] -grayStyles = - [ children [ Css.Foreign.label [ color Colors.gray45 ] ] ] - - -orangeStyles assets = - [ children - [ Css.Foreign.label - [ color Colors.ochre - , displayFlex - , alignItems center - ] - , selector "label::after" - [ property "content" "''" - , width (px 26) - , height (px 24) - , marginLeft (px 8) - , backgroundImage assets PremiumUnlocked - ] - ] - ] - - roundStyles assets = [ children [ Css.Foreign.label @@ -651,18 +635,6 @@ opacifiedStyles = [ descendants [ everything [ opacity (num 0.4) ] ] ] -gray : List Snippet -gray = - [ Css.Foreign.class GrayClass grayStyles - ] - - -orange : Assets r -> List Snippet -orange assets = - [ Css.Foreign.class OrangeClass (orangeStyles assets) - ] - - round : Assets r -> List Snippet round assets = [ Css.Foreign.class RoundClass (roundStyles assets) @@ -750,9 +722,7 @@ keyframeCss = styles : Nri.Ui.Styles.V1.StylesWithAssets Never CssClasses msg (Assets r) styles = (\assets -> - [ gray - , orange assets - , round assets + [ round assets , locked assets , lockOnInside assets , unlockable assets From 8a1442c105809d592501efc127d724abcab1f5e7 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:13:47 -0700 Subject: [PATCH 18/64] Kill exported styles --- src/Nri/Ui/Checkbox/V3.elm | 188 +++++++++++++------------------------ 1 file changed, 67 insertions(+), 121 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index acd7a2f0..cdcc23bf 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -6,7 +6,6 @@ module Nri.Ui.Checkbox.V3 , PremiumConfig , Theme(..) , disabled - , keyframeCss , premium , styles , view @@ -19,7 +18,6 @@ module Nri.Ui.Checkbox.V3 @docs Model, Theme, ColorTheme @docs view, viewWithLabel, viewAttention, disabled -@docs keyframeCss, styles ## Premium @@ -251,7 +249,7 @@ buildCheckbox assets modifierClasses showLabels model = [ color Colors.ochre , displayFlex , alignItems center - , Css.after + , after [ property "content" "''" , width (px 26) , height (px 24) @@ -315,13 +313,56 @@ buildCheckbox assets modifierClasses showLabels model = Round -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "RoundClass" ]) - , checkboxStyles = - css - [ cursor pointer ] + , checkboxStyles = css [ cursor pointer ] , labelStyles = css - [ cursor pointer + [ if model.disabled then + cursor auto + else + cursor pointer , outline none + , displayFlex + , alignItems center + , before + [ property "content" "''" + , width (px 24) + , height (px 24) + , marginRight (px 8) + , borderRadius (pct 100) + ] + , Css.batch <| + case model.isChecked of + Just True -> + [ before + [ backgroundColor Colors.green + , border3 (px 2) solid Colors.green + , backgroundImage assets CheckWhite + , property "background-repeat" "no-repeat" + , property "background-position" "center center" + ] + ] + + Just False -> + [ before + [ border3 (px 2) solid Colors.blue + , backgroundColor Colors.white + ] + ] + + Nothing -> + -- it's kinda weird that we have round "checkboxes" + -- that can't be indeterminate that we nonetheless + -- model as Maybes. what can you do. + [] + , Css.batch <| + --WOW super brittle let's not do this, tessa + if modifierClasses == [ "WithPulsing" ] then + [ property "-webkit-animation" "pulsate 1s infinite" + , property "-moz-animation" "pulsate 1s infinite" + , property "animation" "pulsate 1s infinite" + ] + else + [] ] , labelClasses = labelClass model.isChecked , labelContent = labelContent @@ -537,45 +578,6 @@ containerStyles = ] -roundStyles assets = - [ children - [ Css.Foreign.label - [ displayFlex - , alignItems center - , property "cursor" "pointer" - ] - , selector "label::before" - [ property "content" "''" - , width (px 24) - , height (px 24) - , marginRight (px 8) - , borderRadius (pct 100) - ] - , selector ".checkbox-Unchecked::before" - [ border3 (px 2) solid Colors.blue - , backgroundColor Colors.white - ] - , selector ".checkbox-Checked::before" - [ backgroundColor Colors.green - , border3 (px 2) solid Colors.green - , backgroundImage assets CheckWhite - , property "background-repeat" "no-repeat" - , property "background-position" "center center" - ] - , selector ":disabled + label" - [ property "cursor" "auto" - ] - ] - ] - - -withPulsingStyles = - [ property "-webkit-animation" "pulsate 1s infinite" - , property "-moz-animation" "pulsate 1s infinite" - , property "animation" "pulsate 1s infinite" - ] - - lockedStyles assets = [ descendants [ Css.Foreign.label @@ -635,41 +637,27 @@ opacifiedStyles = [ descendants [ everything [ opacity (num 0.4) ] ] ] -round : Assets r -> List Snippet -round assets = - [ Css.Foreign.class RoundClass (roundStyles assets) - , Css.Foreign.class WithPulsing withPulsingStyles - ] +{-| -} +styles : Nri.Ui.Styles.V1.StylesWithAssets Never CssClasses msg (Assets r) +styles = + (\assets -> [] |> List.concat) + |> Nri.Ui.Styles.V1.stylesWithAssets "checkbox-" -locked : Assets r -> List Snippet -locked assets = - [ Css.Foreign.class LockedClass (lockedStyles assets) - ] - - -lockOnInside : Assets r -> List Snippet -lockOnInside assets = - [ Css.Foreign.class LockOnInsideClass (lockOnInsideStyles assets) - ] - - -unlockable : Assets r -> List Snippet -unlockable assets = - [ Css.Foreign.class UnlockableClass (unlockableStyles assets) - ] - - -premiumForeign : Assets r -> List Snippet -premiumForeign assets = - [ Css.Foreign.class PremiumClass (premiumStyles assets) - ] - - -opacified : List Snippet -opacified = - [ Css.Foreign.class Opacified opacifiedStyles - ] +{-| The assets used in this module. +-} +type alias Assets r = + { r + | checkboxUnchecked_svg : Asset + , checkboxChecked_svg : Asset + , checkboxCheckedPartially_svg : Asset + , iconPremiumUnlocked_png : Asset + , iconCheck_png : Asset + , iconPremiumLocked_png : Asset + , checkboxLockOnInside_svg : Asset + , iconPremiumKey_png : Asset + , iconPremiumFlag_svg : Asset + } backgroundImage : Assets r -> CheckboxImage -> Css.Style @@ -706,45 +694,3 @@ checkboxAssetPath assets checkboxImage = PremiumFlag -> assets.iconPremiumFlag_svg - - -{-| -} -keyframeCss : Nri.Ui.Styles.V1.Keyframe -keyframeCss = - Nri.Ui.Styles.V1.keyframes "pulsate" - [ ( "0%", "transform: scale(1, 1);" ) - , ( "50%", "transform: scale(1.2);" ) - , ( "100%", "transform: scale(1, 1);" ) - ] - - -{-| -} -styles : Nri.Ui.Styles.V1.StylesWithAssets Never CssClasses msg (Assets r) -styles = - (\assets -> - [ round assets - , locked assets - , lockOnInside assets - , unlockable assets - , opacified - , premiumForeign assets - ] - |> List.concat - ) - |> Nri.Ui.Styles.V1.stylesWithAssets "checkbox-" - - -{-| The assets used in this module. --} -type alias Assets r = - { r - | checkboxUnchecked_svg : Asset - , checkboxChecked_svg : Asset - , checkboxCheckedPartially_svg : Asset - , iconPremiumUnlocked_png : Asset - , iconCheck_png : Asset - , iconPremiumLocked_png : Asset - , checkboxLockOnInside_svg : Asset - , iconPremiumKey_png : Asset - , iconPremiumFlag_svg : Asset - } From aaf993a5bf8ab2b06b2997e850175d97267fba93 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:17:11 -0700 Subject: [PATCH 19/64] Pull up the invisible label behavior higher --- src/Nri/Ui/Checkbox/V3.elm | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index cdcc23bf..eceeaba8 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -76,14 +76,17 @@ type alias Model msg = -} view : Assets a -> Model msg -> Html.Html msg view assets model = - buildCheckbox assets [] False 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 [] True model + buildCheckbox assets [] model <| + Html.span [] [ Html.text model.label ] {-| Show a disabled checkbox. @@ -186,7 +189,6 @@ premium assets config = in buildCheckbox assets modifierClasses - True { identifier = config.id , label = config.label , setterMsg = @@ -199,26 +201,23 @@ premium assets config = , theme = theme , noOpMsg = config.noOpMsg } + <| + Html.span [] [ Html.text config.label ] {-| -} viewAttention : Assets a -> Model msg -> Html.Html msg viewAttention assets model = - buildCheckbox assets [ "WithPulsing" ] False model + buildCheckbox assets [ "WithPulsing" ] model <| + Html.span [ Accessibility.Styled.Style.invisible ] + [ Html.text model.label ] -buildCheckbox : Assets a -> List String -> Bool -> Model msg -> Html.Html msg -buildCheckbox assets modifierClasses showLabels model = +buildCheckbox : Assets a -> List String -> Model msg -> Html.Html msg -> Html.Html msg +buildCheckbox assets modifierClasses model labelContent = let toClassList = List.map (\a -> ( "checkbox-" ++ a, True )) >> Attributes.classList - - labelContent = - if showLabels then - Html.span [] [ Html.text model.label ] - else - Html.span [ Accessibility.Styled.Style.invisible ] - [ Html.text model.label ] in viewCheckbox model <| case model.theme of From e96f69a0254aa47df34b184d0737a90a122056ce Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:27:42 -0700 Subject: [PATCH 20/64] Use the named values for selection --- src/Nri/Ui/Checkbox/V3.elm | 113 ++++++++++++++++++------------------- 1 file changed, 56 insertions(+), 57 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index eceeaba8..a5679950 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -53,25 +53,43 @@ import Nri.Ui.Html.V2 as HtmlExtra import Nri.Ui.Styles.V1 -{-| - - - isChecked : Maybe Bool - - Just True == Checked (rendered checkmark) - - Just False == Not Checked (rendered blank) - - Nothing == Indeterminate (rendered dash) - --} +{-| -} type alias Model msg = { identifier : String , label : String , setterMsg : Bool -> msg - , isChecked : Maybe Bool + , 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 + + +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 @@ -106,7 +124,7 @@ disabled identifier labelText = ] , label [ RootAttributes.for identifier - , getLabelClass (Just False) + , getLabelClass NotSelected ] [ RootHtml.text labelText ] @@ -134,14 +152,6 @@ type alias PremiumConfig msg = } -{-| This configurable is only used in the PremiumConfig. --} -type IsSelected - = Selected - | NotSelected - | PartiallySelected - - {-| A checkbox that should be used for premium content This checkbox is locked when the premium level of the content is greater than the premium level of the teacher @@ -156,17 +166,6 @@ premium assets config = config.contentPremiumLevel config.teacherPremiumLevel - isChecked = - case config.selected of - Selected -> - Just True - - NotSelected -> - Just False - - PartiallySelected -> - Nothing - modifierClasses = List.concat [ if config.showFlagWhenLocked && config.contentPremiumLevel /= Free then @@ -196,7 +195,7 @@ premium assets config = \_ -> config.onLockedClick else config.onChange - , isChecked = isChecked + , selected = config.selected , disabled = config.disabled , theme = theme , noOpMsg = config.noOpMsg @@ -230,14 +229,14 @@ buildCheckbox assets modifierClasses model labelContent = [ cursor pointer , outline none , paddingLeft (px (29 + 6)) -- checkbox width + padding - , case model.isChecked of - Just True -> + , case model.selected of + Selected -> backgroundImage assets CheckboxChecked - Just False -> + NotSelected -> backgroundImage assets CheckboxUnchecked - Nothing -> + PartiallySelected -> backgroundImage assets CheckboxCheckedPartially , Css.batch <| case colorTheme of @@ -260,7 +259,7 @@ buildCheckbox assets modifierClasses model labelContent = Default -> [] ] - , labelClasses = labelClass model.isChecked + , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -275,7 +274,7 @@ buildCheckbox assets modifierClasses model labelContent = [ cursor pointer , outline none ] - , labelClasses = labelClass model.isChecked + , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -290,7 +289,7 @@ buildCheckbox assets modifierClasses model labelContent = [ cursor pointer , outline none ] - , labelClasses = labelClass model.isChecked + , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -305,7 +304,7 @@ buildCheckbox assets modifierClasses model labelContent = [ cursor pointer , outline none ] - , labelClasses = labelClass model.isChecked + , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -330,8 +329,8 @@ buildCheckbox assets modifierClasses model labelContent = , borderRadius (pct 100) ] , Css.batch <| - case model.isChecked of - Just True -> + case model.selected of + Selected -> [ before [ backgroundColor Colors.green , border3 (px 2) solid Colors.green @@ -341,14 +340,14 @@ buildCheckbox assets modifierClasses model labelContent = ] ] - Just False -> + NotSelected -> [ before [ border3 (px 2) solid Colors.blue , backgroundColor Colors.white ] ] - Nothing -> + PartiallySelected -> -- it's kinda weird that we have round "checkboxes" -- that can't be indeterminate that we nonetheless -- model as Maybes. what can you do. @@ -363,7 +362,7 @@ buildCheckbox assets modifierClasses model labelContent = else [] ] - , labelClasses = labelClass model.isChecked + , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -378,7 +377,7 @@ buildCheckbox assets modifierClasses model labelContent = [ cursor pointer , outline none ] - , labelClasses = labelClass model.isChecked + , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -393,26 +392,26 @@ buildCheckbox assets modifierClasses model labelContent = [ cursor pointer , outline none ] - , labelClasses = labelClass model.isChecked + , labelClasses = labelClass model.selected , labelContent = labelContent } -labelClass isChecked = - case isChecked of - Just True -> +labelClass isSelected = + case isSelected of + Selected -> Attributes.classList [ ( "checkbox-Label", True ) , ( "checkbox-Checked", True ) ] - Just False -> + NotSelected -> Attributes.classList [ ( "checkbox-Label", True ) , ( "checkbox-Unchecked", True ) ] - Nothing -> + PartiallySelected -> Attributes.classList [ ( "checkbox-Label", True ) , ( "checkbox-Indeterminate", True ) @@ -443,7 +442,7 @@ viewCheckbox model config = (Json.Decode.succeed "stop click propagation") ] [ Html.checkbox model.identifier - model.isChecked + (selectedToMaybe model.selected) [ Widget.label model.label , Events.onCheck model.setterMsg , Attributes.id model.identifier @@ -460,7 +459,7 @@ viewLabel model content class theme = [ Attributes.for model.identifier , Aria.controls model.identifier , Widget.disabled model.disabled - , Widget.checked model.isChecked + , Widget.checked (selectedToMaybe model.selected) , if not model.disabled then Attributes.tabindex 0 else @@ -472,7 +471,7 @@ viewLabel model content class theme = (\keyCode -> -- 32 is the space bar, 13 is enter if (keyCode == 32 || keyCode == 13) && not model.disabled then - Just <| model.setterMsg (Maybe.map not model.isChecked |> Maybe.withDefault True) + Just <| model.setterMsg (Maybe.map not (selectedToMaybe model.selected) |> Maybe.withDefault True) else Nothing ) @@ -484,18 +483,18 @@ viewLabel model content class theme = [ content ] -getLabelClass : Maybe Bool -> RootHtml.Attribute msg +getLabelClass : IsSelected -> RootHtml.Attribute msg getLabelClass maybeChecked = styles.class [ Label , case maybeChecked of - Just True -> + Selected -> Checked - Just False -> + NotSelected -> Unchecked - Nothing -> + PartiallySelected -> Indeterminate ] From 23abc65573538568ef6cf5eb7b57862df4970ccd Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:32:01 -0700 Subject: [PATCH 21/64] Making a call here -- we only use the pulsing for topic sentences, and that ui is probs going to change. long term this api should be nice and the pusling is not helping --- src/Nri/Ui/Checkbox/V3.elm | 21 +-------------------- 1 file changed, 1 insertion(+), 20 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index a5679950..1ee4a2a1 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -9,7 +9,6 @@ module Nri.Ui.Checkbox.V3 , premium , styles , view - , viewAttention , viewWithLabel ) @@ -17,7 +16,7 @@ module Nri.Ui.Checkbox.V3 @docs Model, Theme, ColorTheme -@docs view, viewWithLabel, viewAttention, disabled +@docs view, viewWithLabel, disabled ## Premium @@ -204,14 +203,6 @@ premium assets config = Html.span [] [ Html.text config.label ] -{-| -} -viewAttention : Assets a -> Model msg -> Html.Html msg -viewAttention assets model = - buildCheckbox assets [ "WithPulsing" ] model <| - Html.span [ Accessibility.Styled.Style.invisible ] - [ Html.text model.label ] - - buildCheckbox : Assets a -> List String -> Model msg -> Html.Html msg -> Html.Html msg buildCheckbox assets modifierClasses model labelContent = let @@ -352,15 +343,6 @@ buildCheckbox assets modifierClasses model labelContent = -- that can't be indeterminate that we nonetheless -- model as Maybes. what can you do. [] - , Css.batch <| - --WOW super brittle let's not do this, tessa - if modifierClasses == [ "WithPulsing" ] then - [ property "-webkit-animation" "pulsate 1s infinite" - , property "-moz-animation" "pulsate 1s infinite" - , property "animation" "pulsate 1s infinite" - ] - else - [] ] , labelClasses = labelClass model.selected , labelContent = labelContent @@ -518,7 +500,6 @@ type CssClasses | LockOnInsideClass | UnlockableClass | Label - | WithPulsing | Opacified | PremiumClass From 8739188cd96c25c4c3b44d8677bcd14d3a898f73 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:33:17 -0700 Subject: [PATCH 22/64] :art: remove reidrection -- if we want to use the indeterminate styles let's do that --- src/Nri/Ui/Checkbox/V3.elm | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 1ee4a2a1..56d52caf 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -123,7 +123,7 @@ disabled identifier labelText = ] , label [ RootAttributes.for identifier - , getLabelClass NotSelected + , styles.class [ Label, Indeterminate ] ] [ RootHtml.text labelText ] @@ -465,22 +465,6 @@ viewLabel model content class theme = [ content ] -getLabelClass : IsSelected -> RootHtml.Attribute msg -getLabelClass maybeChecked = - styles.class - [ Label - , case maybeChecked of - Selected -> - Checked - - NotSelected -> - Unchecked - - PartiallySelected -> - Indeterminate - ] - - indeterminateAttr : RootHtml.Attribute msg indeterminateAttr = RootAttributes.property "indeterminate" (Json.Encode.bool True) From fbfccc5c493aefa1e72985daff4071c0b53659ba Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:35:17 -0700 Subject: [PATCH 23/64] Kill checkbox styles (the checkbox is hidden anyway) --- src/Nri/Ui/Checkbox/V3.elm | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 56d52caf..bd63e785 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -214,7 +214,6 @@ buildCheckbox assets modifierClasses model labelContent = Square colorTheme -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) - , checkboxStyles = css [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -257,9 +256,6 @@ buildCheckbox assets modifierClasses model labelContent = Locked -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "LockedClass" ]) - , checkboxStyles = - css - [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -272,9 +268,6 @@ buildCheckbox assets modifierClasses model labelContent = LockOnInside -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) - , checkboxStyles = - css - [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -287,9 +280,6 @@ buildCheckbox assets modifierClasses model labelContent = Unlockable -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "UnlockableClass" ]) - , checkboxStyles = - css - [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -302,7 +292,6 @@ buildCheckbox assets modifierClasses model labelContent = Round -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "RoundClass" ]) - , checkboxStyles = css [ cursor pointer ] , labelStyles = css [ if model.disabled then @@ -351,9 +340,6 @@ buildCheckbox assets modifierClasses model labelContent = Disabled -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "Opacified" ]) - , checkboxStyles = - css - [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -366,9 +352,6 @@ buildCheckbox assets modifierClasses model labelContent = Premium -> { containerStyles = css containerStyles , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ]) - , checkboxStyles = - css - [ cursor pointer ] , labelStyles = css [ cursor pointer @@ -405,7 +388,6 @@ viewCheckbox : -> { containerStyles : Html.Attribute msg , containerClasses : Html.Attribute msg - , checkboxStyles : Html.Attribute msg , labelStyles : Html.Attribute msg , labelClasses : Html.Attribute msg , labelContent : Html.Html msg @@ -429,7 +411,6 @@ viewCheckbox model config = , Events.onCheck model.setterMsg , Attributes.id model.identifier , Attributes.disabled model.disabled - , config.checkboxStyles ] , viewLabel model config.labelContent config.labelClasses config.labelStyles ] From c20caf49807c8b3df226673f978ed5fa2d1f069b Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:36:41 -0700 Subject: [PATCH 24/64] Reorder for clarity --- src/Nri/Ui/Checkbox/V3.elm | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index bd63e785..cc86d4eb 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -469,18 +469,6 @@ type CssClasses | PremiumClass -type CheckboxImage - = CheckboxUnchecked - | CheckboxChecked - | CheckboxCheckedPartially - | PremiumUnlocked - | PremiumFlag - | CheckWhite - | PremiumLocked - | PremiumKey - | CheckboxLockOnInside - - {-| -} type Theme = Square ColorTheme @@ -588,6 +576,15 @@ styles = |> Nri.Ui.Styles.V1.stylesWithAssets "checkbox-" + +-- ICONS used instead of default browser implementations + + +backgroundImage : Assets r -> CheckboxImage -> Css.Style +backgroundImage assets checkboxImage = + property "background-image" (Nri.Ui.AssetPath.Css.url <| checkboxAssetPath assets checkboxImage) + + {-| The assets used in this module. -} type alias Assets r = @@ -604,9 +601,16 @@ type alias Assets r = } -backgroundImage : Assets r -> CheckboxImage -> Css.Style -backgroundImage assets checkboxImage = - property "background-image" (Nri.Ui.AssetPath.Css.url <| checkboxAssetPath assets checkboxImage) +type CheckboxImage + = CheckboxUnchecked + | CheckboxChecked + | CheckboxCheckedPartially + | PremiumUnlocked + | PremiumFlag + | CheckWhite + | PremiumLocked + | PremiumKey + | CheckboxLockOnInside checkboxAssetPath : Assets r -> CheckboxImage -> Asset From dcf3b07669288e05865baf4d164146d7ca52077f Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:41:17 -0700 Subject: [PATCH 25/64] Move the opacity styles inline --- src/Nri/Ui/Checkbox/V3.elm | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index cc86d4eb..e143fc8e 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -344,6 +344,7 @@ buildCheckbox assets modifierClasses model labelContent = css [ cursor pointer , outline none + , opacity (num 0.4) ] , labelClasses = labelClass model.selected , labelContent = labelContent @@ -565,10 +566,6 @@ premiumStyles assets = ] -opacifiedStyles = - [ descendants [ everything [ opacity (num 0.4) ] ] ] - - {-| -} styles : Nri.Ui.Styles.V1.StylesWithAssets Never CssClasses msg (Assets r) styles = From 2e20c183468c168e3da0d2a95ebd3aed369594b3 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:42:42 -0700 Subject: [PATCH 26/64] Inlineify the locked styles --- src/Nri/Ui/Checkbox/V3.elm | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index e143fc8e..2ac7179b 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -258,8 +258,9 @@ buildCheckbox assets modifierClasses model labelContent = , containerClasses = toClassList (modifierClasses ++ [ "LockedClass" ]) , labelStyles = css - [ cursor pointer - , outline none + [ outline none + , paddingLeft (px (29 + 6)) -- checkbox width + padding + , backgroundImage assets PremiumLocked ] , labelClasses = labelClass model.selected , labelContent = labelContent @@ -511,17 +512,6 @@ containerStyles = ] -lockedStyles assets = - [ descendants - [ Css.Foreign.label - [ paddingLeft (px (29 + 6)) -- checkbox width + padding - , backgroundImage assets PremiumLocked - , property "cursor" "auto" - ] - ] - ] - - lockOnInsideStyles assets = [ descendants [ Css.Foreign.label From dd10cd6b5b138d66e7833fd780a0f230d747ae46 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:43:50 -0700 Subject: [PATCH 27/64] Inlineify the lock on inside styles --- src/Nri/Ui/Checkbox/V3.elm | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 2ac7179b..b3b5382f 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -273,6 +273,10 @@ buildCheckbox assets modifierClasses model labelContent = css [ cursor pointer , outline none + , paddingLeft (px 35) + , backgroundImage assets CheckboxLockOnInside + , backgroundSize (px 24) + , backgroundRepeat noRepeat ] , labelClasses = labelClass model.selected , labelContent = labelContent @@ -512,19 +516,6 @@ containerStyles = ] -lockOnInsideStyles assets = - [ descendants - [ Css.Foreign.label - [ paddingLeft (px 35) - , backgroundImage assets CheckboxLockOnInside - , backgroundSize (px 24) - , backgroundRepeat noRepeat - , property "cursor" "pointer" - ] - ] - ] - - unlockableStyles assets = [ descendants [ Css.Foreign.label From 9704ad59cfd25c8df04dd9b96a2b15f5f4dc97ae Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:44:44 -0700 Subject: [PATCH 28/64] Inline unlockable styles --- src/Nri/Ui/Checkbox/V3.elm | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index b3b5382f..85045b68 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -287,8 +287,9 @@ buildCheckbox assets modifierClasses model labelContent = , containerClasses = toClassList (modifierClasses ++ [ "UnlockableClass" ]) , labelStyles = css - [ cursor pointer - , outline none + [ outline none + , paddingLeft (px (29 + 6)) -- checkbox width + padding + , backgroundImage assets PremiumKey ] , labelClasses = labelClass model.selected , labelContent = labelContent @@ -516,17 +517,6 @@ containerStyles = ] -unlockableStyles assets = - [ descendants - [ Css.Foreign.label - [ paddingLeft (px (29 + 6)) -- checkbox width + padding - , backgroundImage assets PremiumKey - , property "cursor" "auto" - ] - ] - ] - - premiumStyles assets = [ children [ Css.Foreign.label From 9a134edcd4a2af62fe7c50bc21e2abf0e9452b5e Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:45:52 -0700 Subject: [PATCH 29/64] Inlineify premium styles --- src/Nri/Ui/Checkbox/V3.elm | 32 ++++++++++++-------------------- 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 85045b68..c715ab66 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -363,6 +363,18 @@ buildCheckbox assets modifierClasses model labelContent = css [ cursor pointer , outline none + , displayFlex + , alignItems center + , after + [ property "content" "''" + , display inlineBlock + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage assets PremiumFlag + , backgroundRepeat noRepeat + , backgroundPosition Css.center + ] ] , labelClasses = labelClass model.selected , labelContent = labelContent @@ -517,26 +529,6 @@ containerStyles = ] -premiumStyles assets = - [ children - [ Css.Foreign.label - [ displayFlex - , alignItems center - ] - , selector "label::after" - [ property "content" "''" - , display inlineBlock - , width (px 26) - , height (px 24) - , marginLeft (px 8) - , backgroundImage assets PremiumFlag - , backgroundRepeat noRepeat - , backgroundPosition Css.center - ] - ] - ] - - {-| -} styles : Nri.Ui.Styles.V1.StylesWithAssets Never CssClasses msg (Assets r) styles = From 58908f0bd1c57eb6f57034213aceb020f42dba99 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:52:38 -0700 Subject: [PATCH 30/64] Avoid descendant selector styling --- src/Nri/Ui/Checkbox/V3.elm | 89 +++++++++++++++++++++++++------------- 1 file changed, 60 insertions(+), 29 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index c715ab66..30de22d4 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -216,9 +216,18 @@ buildCheckbox assets modifierClasses model labelContent = , containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) , labelStyles = css - [ cursor pointer + [ backgroundRepeat noRepeat + , color Colors.gray20 + , cursor pointer + , Fonts.baseFont + , fontSize (px 16) + , minHeight (px 42) -- container height , outline none + , padding2 (px 13) zero , paddingLeft (px (29 + 6)) -- checkbox width + padding + , property "background-position" "left center" + , verticalAlign middle + , display inlineBlock , case model.selected of Selected -> backgroundImage assets CheckboxChecked @@ -258,9 +267,18 @@ buildCheckbox assets modifierClasses model labelContent = , containerClasses = toClassList (modifierClasses ++ [ "LockedClass" ]) , labelStyles = css - [ outline none + [ backgroundImage assets PremiumLocked + , backgroundRepeat noRepeat + , color Colors.gray20 + , display inlineBlock + , Fonts.baseFont + , fontSize (px 16) + , minHeight (px 42) -- container height + , outline none + , padding2 (px 13) zero , paddingLeft (px (29 + 6)) -- checkbox width + padding - , backgroundImage assets PremiumLocked + , property "background-position" "left center" + , verticalAlign middle ] , labelClasses = labelClass model.selected , labelContent = labelContent @@ -271,12 +289,20 @@ buildCheckbox assets modifierClasses model labelContent = , containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) , labelStyles = css - [ cursor pointer - , outline none - , paddingLeft (px 35) - , backgroundImage assets CheckboxLockOnInside - , backgroundSize (px 24) + [ backgroundImage assets CheckboxLockOnInside , backgroundRepeat noRepeat + , backgroundSize (px 24) + , color Colors.gray20 + , cursor pointer + , Fonts.baseFont + , fontSize (px 16) + , minHeight (px 42) -- container height + , outline none + , padding2 (px 13) zero + , paddingLeft (px 35) + , property "background-position" "left center" + , verticalAlign middle + , display inlineBlock ] , labelClasses = labelClass model.selected , labelContent = labelContent @@ -287,9 +313,18 @@ buildCheckbox assets modifierClasses model labelContent = , containerClasses = toClassList (modifierClasses ++ [ "UnlockableClass" ]) , labelStyles = css - [ outline none + [ backgroundImage assets PremiumKey + , backgroundRepeat noRepeat + , color Colors.gray20 + , display inlineBlock + , Fonts.baseFont + , fontSize (px 16) + , minHeight (px 42) -- container height + , outline none + , padding2 (px 13) zero , paddingLeft (px (29 + 6)) -- checkbox width + padding - , backgroundImage assets PremiumKey + , property "background-position" "left center" + , verticalAlign middle ] , labelClasses = labelClass model.selected , labelContent = labelContent @@ -300,13 +335,20 @@ buildCheckbox assets modifierClasses model labelContent = , containerClasses = toClassList (modifierClasses ++ [ "RoundClass" ]) , labelStyles = css - [ if model.disabled then + [ alignItems center + , backgroundRepeat noRepeat + , color Colors.gray20 + , if model.disabled then cursor auto else cursor pointer - , outline none , displayFlex - , alignItems center + , Fonts.baseFont + , fontSize (px 16) + , minHeight (px 42) -- container height + , outline none + , padding2 (px 13) zero + , property "background-position" "left center" , before [ property "content" "''" , width (px 24) @@ -349,8 +391,8 @@ buildCheckbox assets modifierClasses model labelContent = , labelStyles = css [ cursor pointer - , outline none , opacity (num 0.4) + , outline none ] , labelClasses = labelClass model.selected , labelContent = labelContent @@ -361,10 +403,10 @@ buildCheckbox assets modifierClasses model labelContent = , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ]) , labelStyles = css - [ cursor pointer - , outline none + [ alignItems center + , cursor pointer , displayFlex - , alignItems center + , outline none , after [ property "content" "''" , display inlineBlock @@ -510,18 +552,7 @@ containerStyles = [ display block , height inherit , descendants - [ Css.Foreign.label - [ display inlineBlock - , verticalAlign middle - , minHeight (px 42) -- container height - , padding2 (px 13) zero - , fontSize (px 16) - , Fonts.baseFont - , color Colors.gray20 - , property "background-position" "left center" - , property "background-repeat" "no-repeat" - ] - , Css.Foreign.input [ display none ] + [ Css.Foreign.input [ display none ] , selector ":disabled + label" [ cursor auto ] From bd24852b1eb44ab0b354a49451fdc74acc61dcd0 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:54:00 -0700 Subject: [PATCH 31/64] Be sure to disable the cursor when the input is disabled --- src/Nri/Ui/Checkbox/V3.elm | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 30de22d4..d5cbe093 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -218,7 +218,10 @@ buildCheckbox assets modifierClasses model labelContent = css [ backgroundRepeat noRepeat , color Colors.gray20 - , cursor pointer + , if model.disabled then + cursor auto + else + cursor pointer , Fonts.baseFont , fontSize (px 16) , minHeight (px 42) -- container height @@ -293,7 +296,10 @@ buildCheckbox assets modifierClasses model labelContent = , backgroundRepeat noRepeat , backgroundSize (px 24) , color Colors.gray20 - , cursor pointer + , if model.disabled then + cursor auto + else + cursor pointer , Fonts.baseFont , fontSize (px 16) , minHeight (px 42) -- container height @@ -316,6 +322,10 @@ buildCheckbox assets modifierClasses model labelContent = [ backgroundImage assets PremiumKey , backgroundRepeat noRepeat , color Colors.gray20 + , if model.disabled then + cursor auto + else + cursor pointer , display inlineBlock , Fonts.baseFont , fontSize (px 16) @@ -553,9 +563,6 @@ containerStyles = , height inherit , descendants [ Css.Foreign.input [ display none ] - , selector ":disabled + label" - [ cursor auto - ] ] ] From de07e1d3c8fb2d44e49ed01915ca1f4a9485317b Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:55:11 -0700 Subject: [PATCH 32/64] Remove unnessary configuration --- src/Nri/Ui/Checkbox/V3.elm | 39 +++++++++++++------------------------- 1 file changed, 13 insertions(+), 26 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index d5cbe093..801f0fa0 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -212,8 +212,7 @@ buildCheckbox assets modifierClasses model labelContent = viewCheckbox model <| case model.theme of Square colorTheme -> - { containerStyles = css containerStyles - , containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) + { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) , labelStyles = css [ backgroundRepeat noRepeat @@ -266,8 +265,7 @@ buildCheckbox assets modifierClasses model labelContent = } Locked -> - { containerStyles = css containerStyles - , containerClasses = toClassList (modifierClasses ++ [ "LockedClass" ]) + { containerClasses = toClassList (modifierClasses ++ [ "LockedClass" ]) , labelStyles = css [ backgroundImage assets PremiumLocked @@ -288,8 +286,7 @@ buildCheckbox assets modifierClasses model labelContent = } LockOnInside -> - { containerStyles = css containerStyles - , containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) + { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) , labelStyles = css [ backgroundImage assets CheckboxLockOnInside @@ -315,8 +312,7 @@ buildCheckbox assets modifierClasses model labelContent = } Unlockable -> - { containerStyles = css containerStyles - , containerClasses = toClassList (modifierClasses ++ [ "UnlockableClass" ]) + { containerClasses = toClassList (modifierClasses ++ [ "UnlockableClass" ]) , labelStyles = css [ backgroundImage assets PremiumKey @@ -341,8 +337,7 @@ buildCheckbox assets modifierClasses model labelContent = } Round -> - { containerStyles = css containerStyles - , containerClasses = toClassList (modifierClasses ++ [ "RoundClass" ]) + { containerClasses = toClassList (modifierClasses ++ [ "RoundClass" ]) , labelStyles = css [ alignItems center @@ -396,8 +391,7 @@ buildCheckbox assets modifierClasses model labelContent = } Disabled -> - { containerStyles = css containerStyles - , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "Opacified" ]) + { containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "Opacified" ]) , labelStyles = css [ cursor pointer @@ -409,8 +403,7 @@ buildCheckbox assets modifierClasses model labelContent = } Premium -> - { containerStyles = css containerStyles - , containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ]) + { containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ]) , labelStyles = css [ alignItems center @@ -457,8 +450,7 @@ labelClass isSelected = viewCheckbox : Model msg -> - { containerStyles : Html.Attribute msg - , containerClasses : Html.Attribute msg + { containerClasses : Html.Attribute msg , labelStyles : Html.Attribute msg , labelClasses : Html.Attribute msg , labelContent : Html.Html msg @@ -466,7 +458,11 @@ viewCheckbox : -> Html.Html msg viewCheckbox model config = Html.Styled.span - [ config.containerStyles + [ css + [ display block + , height inherit + , descendants [ Css.Foreign.input [ display none ] ] + ] , config.containerClasses , Attributes.id <| model.identifier ++ "-container" , -- This is necessary to prevent event propagation. @@ -558,15 +554,6 @@ type ColorTheme | Orange -containerStyles = - [ display block - , height inherit - , descendants - [ Css.Foreign.input [ display none ] - ] - ] - - {-| -} styles : Nri.Ui.Styles.V1.StylesWithAssets Never CssClasses msg (Assets r) styles = From 78eb234ab2d80da9230b7dec19319aebe937d919 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 11:58:35 -0700 Subject: [PATCH 33/64] This checkbox is super specific. simplify the api --- src/Nri/Ui/Checkbox/V3.elm | 27 +-------------------------- 1 file changed, 1 insertion(+), 26 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 801f0fa0..609cae4c 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -5,7 +5,6 @@ module Nri.Ui.Checkbox.V3 , Model , PremiumConfig , Theme(..) - , disabled , premium , styles , view @@ -16,7 +15,7 @@ module Nri.Ui.Checkbox.V3 @docs Model, Theme, ColorTheme -@docs view, viewWithLabel, disabled +@docs view, viewWithLabel ## Premium @@ -106,30 +105,6 @@ viewWithLabel assets model = Html.span [] [ Html.text model.label ] -{-| Show a disabled checkbox. --} -disabled : String -> String -> RootHtml.Html msg -disabled identifier labelText = - span - [ styles.class [ Container, SquareClass, Opacified ] - , RootAttributes.id <| identifier ++ "-container" - ] - [ checkbox identifier - (Just False) - [ Accessibility.Widget.label labelText - , styles.class [ Checkbox ] - , RootAttributes.id identifier - , RootAttributes.disabled True - ] - , label - [ RootAttributes.for identifier - , styles.class [ Label, Indeterminate ] - ] - [ RootHtml.text labelText - ] - ] - - {-| - `onChange`: A message for when the user toggles the checkbox From 55da9bd11a929508610016b95b77cc5401c2021f Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 15 Jun 2018 12:00:15 -0700 Subject: [PATCH 34/64] :skull: kill stylesheet --- src/Nri/Ui/Checkbox/V3.elm | 36 ++++-------------------------------- 1 file changed, 4 insertions(+), 32 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 609cae4c..2dbe6940 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -6,30 +6,27 @@ module Nri.Ui.Checkbox.V3 , PremiumConfig , Theme(..) , premium - , styles , view , viewWithLabel ) {-| -@docs Model, Theme, ColorTheme +@docs Model, Theme, ColorTheme, IsSelected @docs view, viewWithLabel ## Premium -@docs PremiumConfig, IsSelected, premium +@docs PremiumConfig, premium -} -import Accessibility exposing (checkbox, div, label, span, text) import Accessibility.Styled as Html import Accessibility.Styled.Aria as Aria import Accessibility.Styled.Style import Accessibility.Styled.Widget as Widget -import Accessibility.Widget import Css exposing (..) import Css.Foreign exposing (Snippet, children, descendants, everything, selector) import Html as RootHtml @@ -45,10 +42,8 @@ import Nri.Ui.AssetPath.Css import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) import Nri.Ui.Fonts.V1 as Fonts -import Nri.Ui.Html.Attributes.Extra as RootAttributes import Nri.Ui.Html.Attributes.V2 as ExtraAttributes import Nri.Ui.Html.V2 as HtmlExtra -import Nri.Ui.Styles.V1 {-| -} @@ -76,6 +71,7 @@ type IsSelected | PartiallySelected +selectedToMaybe : IsSelected -> Maybe Bool selectedToMaybe selected = case selected of Selected -> @@ -401,6 +397,7 @@ buildCheckbox assets modifierClasses model labelContent = } +labelClass : IsSelected -> Html.Styled.Attribute msg labelClass isSelected = case isSelected of Selected -> @@ -493,24 +490,6 @@ indeterminateAttr = RootAttributes.property "indeterminate" (Json.Encode.bool True) -type CssClasses - = Container - | Checkbox - | Unchecked - | Checked - | Indeterminate - | SquareClass - | RoundClass - | GrayClass - | OrangeClass - | LockedClass - | LockOnInsideClass - | UnlockableClass - | Label - | Opacified - | PremiumClass - - {-| -} type Theme = Square ColorTheme @@ -529,13 +508,6 @@ type ColorTheme | Orange -{-| -} -styles : Nri.Ui.Styles.V1.StylesWithAssets Never CssClasses msg (Assets r) -styles = - (\assets -> [] |> List.concat) - |> Nri.Ui.Styles.V1.stylesWithAssets "checkbox-" - - -- ICONS used instead of default browser implementations From 1d740bf0e57a600b756ba26d2a46d14c166cfaf8 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 16:36:09 -0700 Subject: [PATCH 35/64] Fix compilation of the text area --- styleguide-app/Examples/TextArea.elm | 72 ++++++++++++++++++---------- 1 file changed, 48 insertions(+), 24 deletions(-) diff --git a/styleguide-app/Examples/TextArea.elm b/styleguide-app/Examples/TextArea.elm index 30043692..8ac34768 100644 --- a/styleguide-app/Examples/TextArea.elm +++ b/styleguide-app/Examples/TextArea.elm @@ -10,6 +10,7 @@ import Dict exposing (Dict) import Html import Html.Styled import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) +import Nri.Ui.AssetPath exposing (Asset(..)) import Nri.Ui.Checkbox.V3 as Checkbox import Nri.Ui.Text.V2 as Text import Nri.Ui.TextArea.V3 as TextArea @@ -27,9 +28,9 @@ type Msg {-| -} type alias State = { textValues : Dict Int String - , showLabel : Bool - , isInError : Bool - , autoResize : Bool + , showLabel : Checkbox.IsSelected + , isInError : Checkbox.IsSelected + , autoResize : Checkbox.IsSelected } @@ -42,77 +43,80 @@ example parentMessage state = [ Text.heading [ Html.Styled.text "Textarea controls" ] |> Html.Styled.toUnstyled , Html.div [] - [ Checkbox.viewWithLabel + [ Checkbox.viewWithLabel assets { identifier = "show-textarea-label" , label = "Show Label" , setterMsg = ToggleLabel - , isChecked = Just state.showLabel + , selected = state.showLabel , disabled = False , theme = Checkbox.Square Checkbox.Default , noOpMsg = NoOp } - , Checkbox.viewWithLabel + |> Html.Styled.toUnstyled + , Checkbox.viewWithLabel assets { identifier = "textarea-autoresize" , label = "Autoresize" , setterMsg = ToggleAutoResize - , isChecked = Just state.autoResize + , selected = state.autoResize , disabled = False , theme = Checkbox.Square Checkbox.Default , noOpMsg = NoOp } - , Checkbox.viewWithLabel + |> Html.Styled.toUnstyled + , Checkbox.viewWithLabel assets { identifier = "textarea-isInError" , label = "Show Error State" , setterMsg = ToggleErrorState - , isChecked = Just state.isInError + , selected = state.isInError , disabled = False , theme = Checkbox.Square Checkbox.Default , noOpMsg = NoOp } + |> Html.Styled.toUnstyled ] , TextArea.view { value = Maybe.withDefault "" <| Dict.get 1 state.textValues , autofocus = False , onInput = InputGiven 1 - , isInError = state.isInError + , isInError = state.isInError == Checkbox.Selected , label = "TextArea.view" , height = - if state.autoResize then + if state.autoResize == Checkbox.Selected then TextArea.AutoResize TextArea.SingleLine else TextArea.Fixed , placeholder = "Placeholder" - , showLabel = state.showLabel + , showLabel = state.showLabel == Checkbox.Selected } |> Html.Styled.toUnstyled , TextArea.writing { value = Maybe.withDefault "" <| Dict.get 2 state.textValues , autofocus = False , onInput = InputGiven 2 - , isInError = state.isInError + , isInError = state.isInError == Checkbox.Selected , label = "TextArea.writing" , height = - if state.autoResize then + if state.autoResize == Checkbox.Selected then TextArea.AutoResize TextArea.DefaultHeight else TextArea.Fixed , placeholder = "Placeholder" - , showLabel = state.showLabel + , showLabel = state.showLabel == Checkbox.Selected } |> Html.Styled.toUnstyled , TextArea.contentCreation { value = Maybe.withDefault "" <| Dict.get 3 state.textValues , autofocus = False , onInput = InputGiven 3 - , isInError = state.isInError + , isInError = state.isInError == Checkbox.Selected , label = "TextArea.contentCreation" , height = - if state.autoResize then + if state.autoResize == Checkbox.Selected then TextArea.AutoResize TextArea.DefaultHeight else TextArea.Fixed , placeholder = "Placeholder" - , showLabel = state.showLabel + , showLabel = state.showLabel == Checkbox.Selected } |> Html.Styled.toUnstyled ] @@ -124,15 +128,22 @@ example parentMessage state = init : State init = { textValues = Dict.empty - , showLabel = True - , isInError = False - , autoResize = False + , showLabel = Checkbox.Selected + , isInError = Checkbox.NotSelected + , autoResize = Checkbox.NotSelected } {-| -} update : Msg -> State -> ( State, Cmd Msg ) update msg state = + let + toggle bool = + if bool then + Checkbox.Selected + else + Checkbox.NotSelected + in case msg of InputGiven id newValue -> ( { state | textValues = Dict.insert id newValue state.textValues } @@ -140,17 +151,17 @@ update msg state = ) ToggleLabel bool -> - ( { state | showLabel = bool } + ( { state | showLabel = toggle bool } , Cmd.none ) ToggleErrorState bool -> - ( { state | isInError = bool } + ( { state | isInError = toggle bool } , Cmd.none ) ToggleAutoResize bool -> - ( { state | autoResize = bool } + ( { state | autoResize = toggle bool } , Cmd.none ) @@ -164,3 +175,16 @@ update msg state = type alias Id = Int + + +assets = + { checkboxUnchecked_svg = Asset "checkboxUnchecked_svg" + , checkboxChecked_svg = Asset "checkboxChecked_svg" + , checkboxCheckedPartially_svg = Asset "checkboxCheckedPartially_svg" + , iconPremiumUnlocked_png = Asset "iconPremiumUnlocked_png" + , iconCheck_png = Asset "iconCheck_png" + , iconPremiumLocked_png = Asset "iconPremiumLocked_png" + , checkboxLockOnInside_svg = Asset "checkboxLockOnInside_svg" + , iconPremiumKey_png = Asset "iconPremiumKey_png" + , iconPremiumFlag_svg = Asset "iconPremiumFlag_svg" + } From 0ad139b1487322c75b37892eb4815872bdc7791a Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 16:52:41 -0700 Subject: [PATCH 36/64] Move round 'checkbox' functionality out --- src/Nri/Ui/Checkbox/V3.elm | 60 ---------- src/Nri/Ui/Radio/V1.elm | 228 +++++++++++++++++++++++++++++++++++++ 2 files changed, 228 insertions(+), 60 deletions(-) create mode 100644 src/Nri/Ui/Radio/V1.elm diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 2dbe6940..da482fe6 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -307,60 +307,6 @@ buildCheckbox assets modifierClasses model labelContent = , labelContent = labelContent } - Round -> - { containerClasses = toClassList (modifierClasses ++ [ "RoundClass" ]) - , labelStyles = - css - [ alignItems center - , backgroundRepeat noRepeat - , color Colors.gray20 - , if model.disabled then - cursor auto - else - cursor pointer - , displayFlex - , Fonts.baseFont - , fontSize (px 16) - , minHeight (px 42) -- container height - , outline none - , padding2 (px 13) zero - , property "background-position" "left center" - , before - [ property "content" "''" - , width (px 24) - , height (px 24) - , marginRight (px 8) - , borderRadius (pct 100) - ] - , Css.batch <| - case model.selected of - Selected -> - [ before - [ backgroundColor Colors.green - , border3 (px 2) solid Colors.green - , backgroundImage assets CheckWhite - , property "background-repeat" "no-repeat" - , property "background-position" "center center" - ] - ] - - NotSelected -> - [ before - [ border3 (px 2) solid Colors.blue - , backgroundColor Colors.white - ] - ] - - PartiallySelected -> - -- it's kinda weird that we have round "checkboxes" - -- that can't be indeterminate that we nonetheless - -- model as Maybes. what can you do. - [] - ] - , labelClasses = labelClass model.selected - , labelContent = labelContent - } - Disabled -> { containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "Opacified" ]) , labelStyles = @@ -493,7 +439,6 @@ indeterminateAttr = {-| -} type Theme = Square ColorTheme - | Round | Locked | LockOnInside | Unlockable @@ -525,7 +470,6 @@ type alias Assets r = , checkboxChecked_svg : Asset , checkboxCheckedPartially_svg : Asset , iconPremiumUnlocked_png : Asset - , iconCheck_png : Asset , iconPremiumLocked_png : Asset , checkboxLockOnInside_svg : Asset , iconPremiumKey_png : Asset @@ -539,7 +483,6 @@ type CheckboxImage | CheckboxCheckedPartially | PremiumUnlocked | PremiumFlag - | CheckWhite | PremiumLocked | PremiumKey | CheckboxLockOnInside @@ -560,9 +503,6 @@ checkboxAssetPath assets checkboxImage = PremiumUnlocked -> assets.iconPremiumUnlocked_png - CheckWhite -> - assets.iconCheck_png - PremiumLocked -> assets.iconPremiumLocked_png diff --git a/src/Nri/Ui/Radio/V1.elm b/src/Nri/Ui/Radio/V1.elm new file mode 100644 index 00000000..6c21af52 --- /dev/null +++ b/src/Nri/Ui/Radio/V1.elm @@ -0,0 +1,228 @@ +module Nri.Ui.Radio.V3 + exposing + ( IsSelected(..) + , Model + , view + , viewWithLabel + ) + +{-| + +@docs Model, IsSelected + +@docs view, viewWithLabel + +-} + +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.Foreign exposing (Snippet, children, descendants, everything, selector) +import Html.Events exposing (defaultOptions) +import Html.Styled exposing (fromUnstyled, toUnstyled) +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.V2 as HtmlExtra + + +{-| -} +type alias Model msg = + { identifier : String + , label : String + , setterMsg : Bool -> msg + , selected : IsSelected + , disabled : Bool + , noOpMsg : msg + } + + +{-| + + = Selected -- Checked (rendered with a checkmark) + | NotSelected -- Not Checked (rendered blank) + +-} +type IsSelected + = Selected + | NotSelected + + +selectedToMaybe : IsSelected -> Maybe Bool +selectedToMaybe selected = + case selected of + Selected -> + Just True + + NotSelected -> + Just False + + +{-| Shows a checkbox (the label is only used for accessibility hints) +-} +view : Assets a -> Model msg -> Html.Html msg +view assets model = + buildRadio 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 = + buildRadio assets [] model <| + Html.span [] [ Html.text model.label ] + + +buildRadio : Assets a -> List String -> Model msg -> Html.Html msg -> Html.Html msg +buildRadio assets modifierClasses model labelContent = + let + toClassList = + List.map (\a -> ( "checkbox-" ++ a, True )) >> Attributes.classList + in + viewCheckbox model + { containerClasses = toClassList (modifierClasses ++ [ "RoundClass" ]) + , labelStyles = + css + [ alignItems center + , backgroundRepeat noRepeat + , color Colors.gray20 + , if model.disabled then + cursor auto + else + cursor pointer + , displayFlex + , Fonts.baseFont + , fontSize (px 16) + , minHeight (px 42) -- container height + , outline none + , padding2 (px 13) zero + , property "background-position" "left center" + , before + [ property "content" "''" + , width (px 24) + , height (px 24) + , marginRight (px 8) + , borderRadius (pct 100) + ] + , Css.batch <| + case model.selected of + Selected -> + [ before + [ backgroundColor Colors.green + , border3 (px 2) solid Colors.green + , property "background-image" + (Nri.Ui.AssetPath.Css.url assets.iconCheck_png) + , property "background-repeat" "no-repeat" + , property "background-position" "center center" + ] + ] + + NotSelected -> + [ before + [ border3 (px 2) solid Colors.blue + , backgroundColor Colors.white + ] + ] + ] + , labelClasses = labelClass model.selected + , labelContent = labelContent + } + + +labelClass : IsSelected -> Html.Styled.Attribute msg +labelClass isSelected = + case isSelected of + Selected -> + Attributes.classList + [ ( "checkbox-Label", True ) + , ( "checkbox-Checked", True ) + ] + + NotSelected -> + Attributes.classList + [ ( "checkbox-Label", True ) + , ( "checkbox-Unchecked", True ) + ] + + +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 = + Html.Styled.span + [ css + [ display block + , height inherit + , descendants [ Css.Foreign.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.onWithOptions "click" + { defaultOptions | stopPropagation = True } + (Json.Decode.succeed "stop click propagation") + ] + [ Html.checkbox model.identifier + (selectedToMaybe model.selected) + [ Widget.label model.label + , Events.onCheck model.setterMsg + , 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 + | iconCheck_png : Asset + } From 714b53037049d548df0e65e1d9ec8bc6c2aa4e77 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 16:59:31 -0700 Subject: [PATCH 37/64] Kill the orange color --- src/Nri/Ui/Checkbox/V3.elm | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index da482fe6..7da7a22e 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -215,19 +215,6 @@ buildCheckbox assets modifierClasses model labelContent = Gray -> [ color Colors.gray45 ] - Orange -> - [ color Colors.ochre - , displayFlex - , alignItems center - , after - [ property "content" "''" - , width (px 26) - , height (px 24) - , marginLeft (px 8) - , backgroundImage assets PremiumUnlocked - ] - ] - Default -> [] ] @@ -450,7 +437,6 @@ type Theme type ColorTheme = Default | Gray - | Orange @@ -481,7 +467,6 @@ type CheckboxImage = CheckboxUnchecked | CheckboxChecked | CheckboxCheckedPartially - | PremiumUnlocked | PremiumFlag | PremiumLocked | PremiumKey @@ -500,9 +485,6 @@ checkboxAssetPath assets checkboxImage = CheckboxCheckedPartially -> assets.checkboxCheckedPartially_svg - PremiumUnlocked -> - assets.iconPremiumUnlocked_png - PremiumLocked -> assets.iconPremiumLocked_png From 8c3c39a999408812c083ffa555d8fd597475d28c Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 17:01:37 -0700 Subject: [PATCH 38/64] fixup! Move round 'checkbox' functionality out --- src/Nri/Ui/Radio/V1.elm | 228 ---------------------------------------- 1 file changed, 228 deletions(-) delete mode 100644 src/Nri/Ui/Radio/V1.elm diff --git a/src/Nri/Ui/Radio/V1.elm b/src/Nri/Ui/Radio/V1.elm deleted file mode 100644 index 6c21af52..00000000 --- a/src/Nri/Ui/Radio/V1.elm +++ /dev/null @@ -1,228 +0,0 @@ -module Nri.Ui.Radio.V3 - exposing - ( IsSelected(..) - , Model - , view - , viewWithLabel - ) - -{-| - -@docs Model, IsSelected - -@docs view, viewWithLabel - --} - -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.Foreign exposing (Snippet, children, descendants, everything, selector) -import Html.Events exposing (defaultOptions) -import Html.Styled exposing (fromUnstyled, toUnstyled) -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.V2 as HtmlExtra - - -{-| -} -type alias Model msg = - { identifier : String - , label : String - , setterMsg : Bool -> msg - , selected : IsSelected - , disabled : Bool - , noOpMsg : msg - } - - -{-| - - = Selected -- Checked (rendered with a checkmark) - | NotSelected -- Not Checked (rendered blank) - --} -type IsSelected - = Selected - | NotSelected - - -selectedToMaybe : IsSelected -> Maybe Bool -selectedToMaybe selected = - case selected of - Selected -> - Just True - - NotSelected -> - Just False - - -{-| Shows a checkbox (the label is only used for accessibility hints) --} -view : Assets a -> Model msg -> Html.Html msg -view assets model = - buildRadio 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 = - buildRadio assets [] model <| - Html.span [] [ Html.text model.label ] - - -buildRadio : Assets a -> List String -> Model msg -> Html.Html msg -> Html.Html msg -buildRadio assets modifierClasses model labelContent = - let - toClassList = - List.map (\a -> ( "checkbox-" ++ a, True )) >> Attributes.classList - in - viewCheckbox model - { containerClasses = toClassList (modifierClasses ++ [ "RoundClass" ]) - , labelStyles = - css - [ alignItems center - , backgroundRepeat noRepeat - , color Colors.gray20 - , if model.disabled then - cursor auto - else - cursor pointer - , displayFlex - , Fonts.baseFont - , fontSize (px 16) - , minHeight (px 42) -- container height - , outline none - , padding2 (px 13) zero - , property "background-position" "left center" - , before - [ property "content" "''" - , width (px 24) - , height (px 24) - , marginRight (px 8) - , borderRadius (pct 100) - ] - , Css.batch <| - case model.selected of - Selected -> - [ before - [ backgroundColor Colors.green - , border3 (px 2) solid Colors.green - , property "background-image" - (Nri.Ui.AssetPath.Css.url assets.iconCheck_png) - , property "background-repeat" "no-repeat" - , property "background-position" "center center" - ] - ] - - NotSelected -> - [ before - [ border3 (px 2) solid Colors.blue - , backgroundColor Colors.white - ] - ] - ] - , labelClasses = labelClass model.selected - , labelContent = labelContent - } - - -labelClass : IsSelected -> Html.Styled.Attribute msg -labelClass isSelected = - case isSelected of - Selected -> - Attributes.classList - [ ( "checkbox-Label", True ) - , ( "checkbox-Checked", True ) - ] - - NotSelected -> - Attributes.classList - [ ( "checkbox-Label", True ) - , ( "checkbox-Unchecked", True ) - ] - - -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 = - Html.Styled.span - [ css - [ display block - , height inherit - , descendants [ Css.Foreign.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.onWithOptions "click" - { defaultOptions | stopPropagation = True } - (Json.Decode.succeed "stop click propagation") - ] - [ Html.checkbox model.identifier - (selectedToMaybe model.selected) - [ Widget.label model.label - , Events.onCheck model.setterMsg - , 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 - | iconCheck_png : Asset - } From 3f9a6669e72ab2a261a950b18481f5ccf61c2574 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 17:15:06 -0700 Subject: [PATCH 39/64] Show the premium icon as opacified when the checkbox is disabled --- src/Nri/Ui/Checkbox/V3.elm | 95 +++++++++++++++++++++----------------- 1 file changed, 53 insertions(+), 42 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 7da7a22e..1641aa66 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -142,10 +142,6 @@ premium assets config = [ "PremiumClass" ] else [] - , if config.disabled then - [ "Opacified" ] - else - [] ] theme = @@ -203,13 +199,13 @@ buildCheckbox assets modifierClasses model labelContent = , display inlineBlock , case model.selected of Selected -> - backgroundImage assets CheckboxChecked + backgroundImageDeprecated assets CheckboxChecked NotSelected -> - backgroundImage assets CheckboxUnchecked + backgroundImageDeprecated assets CheckboxUnchecked PartiallySelected -> - backgroundImage assets CheckboxCheckedPartially + backgroundImageDeprecated assets CheckboxCheckedPartially , Css.batch <| case colorTheme of Gray -> @@ -226,7 +222,7 @@ buildCheckbox assets modifierClasses model labelContent = { containerClasses = toClassList (modifierClasses ++ [ "LockedClass" ]) , labelStyles = css - [ backgroundImage assets PremiumLocked + [ backgroundImageDeprecated assets PremiumLocked , backgroundRepeat noRepeat , color Colors.gray20 , display inlineBlock @@ -247,7 +243,7 @@ buildCheckbox assets modifierClasses model labelContent = { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) , labelStyles = css - [ backgroundImage assets CheckboxLockOnInside + [ backgroundImageDeprecated assets CheckboxLockOnInside , backgroundRepeat noRepeat , backgroundSize (px 24) , color Colors.gray20 @@ -273,7 +269,7 @@ buildCheckbox assets modifierClasses model labelContent = { containerClasses = toClassList (modifierClasses ++ [ "UnlockableClass" ]) , labelStyles = css - [ backgroundImage assets PremiumKey + [ backgroundImageDeprecated assets PremiumKey , backgroundRepeat noRepeat , color Colors.gray20 , if model.disabled then @@ -294,37 +290,14 @@ buildCheckbox assets modifierClasses model labelContent = , labelContent = labelContent } - Disabled -> - { containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "Opacified" ]) - , labelStyles = - css - [ cursor pointer - , opacity (num 0.4) - , outline none - ] - , labelClasses = labelClass model.selected - , labelContent = labelContent - } - + --disabledStyles = + -- [ cursor pointer + -- , opacity (num 0.4) + -- , outline none + -- ] Premium -> { containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ]) - , labelStyles = - css - [ alignItems center - , cursor pointer - , displayFlex - , outline none - , after - [ property "content" "''" - , display inlineBlock - , width (px 26) - , height (px 24) - , marginLeft (px 8) - , backgroundImage assets PremiumFlag - , backgroundRepeat noRepeat - , backgroundPosition Css.center - ] - ] + , labelStyles = premiumLabelStyles assets.iconPremiumFlag_svg model , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -418,6 +391,45 @@ viewLabel model content class theme = [ content ] +premiumLabelStyles : + Asset + -> { a | disabled : Bool } + -> Html.Styled.Attribute msg +premiumLabelStyles image model = + let + baseStyles = + [ -- Positioning + alignItems center + , displayFlex + + -- Focus & Hover + , cursor pointer + , outline none + + -- Icon + , icon + ] + + icon = + after + [ property "content" "''" + , display inlineBlock + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage ((url << Nri.Ui.AssetPath.Css.url) image) + , backgroundRepeat noRepeat + , backgroundPosition Css.center + ] + in + css + (if model.disabled then + opacity (num 0.4) :: baseStyles + else + baseStyles + ) + + indeterminateAttr : RootHtml.Attribute msg indeterminateAttr = RootAttributes.property "indeterminate" (Json.Encode.bool True) @@ -429,7 +441,6 @@ type Theme | Locked | LockOnInside | Unlockable - | Disabled | Premium @@ -443,8 +454,8 @@ type ColorTheme -- ICONS used instead of default browser implementations -backgroundImage : Assets r -> CheckboxImage -> Css.Style -backgroundImage assets checkboxImage = +backgroundImageDeprecated : Assets r -> CheckboxImage -> Css.Style +backgroundImageDeprecated assets checkboxImage = property "background-image" (Nri.Ui.AssetPath.Css.url <| checkboxAssetPath assets checkboxImage) From 93b499916a736403c40c6844b69203a4ea4e5043 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 17:27:30 -0700 Subject: [PATCH 40/64] Add random checkmark image just to have a checkmark --- styleguide-app/Examples/TextArea.elm | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/styleguide-app/Examples/TextArea.elm b/styleguide-app/Examples/TextArea.elm index 8ac34768..b1184db5 100644 --- a/styleguide-app/Examples/TextArea.elm +++ b/styleguide-app/Examples/TextArea.elm @@ -179,10 +179,9 @@ type alias Id = assets = { checkboxUnchecked_svg = Asset "checkboxUnchecked_svg" - , checkboxChecked_svg = Asset "checkboxChecked_svg" + , checkboxChecked_svg = Asset "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAb1BMVEX///9DoEc2nDt1tXcoly601bU5nD1nr2o/n0Pw9vAzmzhAn0QxmjYumTMqmDAsmTK92r6UxJacyJ1YqFu52LvC3MOQwpIZlCGLwI3M4s2u0q+q0KueyaCkzKX1+fXq8+rh7uHW6NeDvIVztHVssW4Cx6cUAAACZUlEQVR4nO3Zi1LTYBRF4dOSQkqt4AURL6Di+z+jQWVsadJcen5z9pm1HiDZ3yQzSSZmRERERERERERERERERERERERERERERERElKj7uQeUbrVdzz2hbKuqrlMTV9VikZr4BExN/ANMTHwGpiX+AyYl7gJTEveBCYkvgemIh8BkxDZgKmI7sCEuH+ae5lMXcLF8nHuaT93As7mn+QRQPYDqAVQPoHoA1QOoHkD1AKoHUD2A6gFUD6B6ANUDqB5A9QCqB1A9gOoBVA+gegDVA6geQPUAqgfw/3Rd7MhRgLcXhY4cBHhTLc7LEIMA755mFCFGAhYhBgF+f57hTowGdCcGAX672jm1KzEI8GG7WZQhRgFebvZP70YMAlwvNy8HOBGjAOsDoBMxCPB+U7eNcCAGAa7bgQ7EIECzi/OOIScSwwBLEQMByxBDAUsQgwHNfjoTwwG9iQGBDXHpRwwJ9CQGBZo9OhHDAr2IgYFmZw7E0EAPYnDg6cTwwFOJAsDTiBJAsx+TiSLAhng5jSgDnEoUAk4jSgGnEMWA44lywLFEQaDZxxFESeAYoiiwIb4aRpQFDiUKA80+DCBKA4cQxYFmb3qI8sCGuD1GTAA8TkwBPEKs33U9MbWAZm+7iC3/xiWBR4hZgCOJikCzL1f9MmngCKIq0Ozr6+TAhjjkKioDBxG1gWaf+25UdWAvUR/YQ8wANPvU9aqdBXiEmAXYScwD7PjozQRsJeYCthCzAQ+I+YBm76vkwD1iTuAOMSvQ7LpKDvxLzAz8TcwNNLu5TQ40u5t7ABERERERERERERERERFN7hdTvSHAHrHcMgAAAABJRU5ErkJggg==" , checkboxCheckedPartially_svg = Asset "checkboxCheckedPartially_svg" , iconPremiumUnlocked_png = Asset "iconPremiumUnlocked_png" - , iconCheck_png = Asset "iconCheck_png" , iconPremiumLocked_png = Asset "iconPremiumLocked_png" , checkboxLockOnInside_svg = Asset "checkboxLockOnInside_svg" , iconPremiumKey_png = Asset "iconPremiumKey_png" From 8857c001f91058fe735f00a81be7a0e90066c8ba Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 17:33:28 -0700 Subject: [PATCH 41/64] :skull: I didn't find any uses of the Unlockable theme (used to be a key icon in the checkbox) in the monolith so killing this. if people need it, this is the commit to copy paste from --- src/Nri/Ui/Checkbox/V3.elm | 31 ------------------------------- 1 file changed, 31 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 1641aa66..4c53b9f5 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -265,31 +265,6 @@ buildCheckbox assets modifierClasses model labelContent = , labelContent = labelContent } - Unlockable -> - { containerClasses = toClassList (modifierClasses ++ [ "UnlockableClass" ]) - , labelStyles = - css - [ backgroundImageDeprecated assets PremiumKey - , backgroundRepeat noRepeat - , color Colors.gray20 - , if model.disabled then - cursor auto - else - cursor pointer - , display inlineBlock - , Fonts.baseFont - , fontSize (px 16) - , minHeight (px 42) -- container height - , outline none - , padding2 (px 13) zero - , paddingLeft (px (29 + 6)) -- checkbox width + padding - , property "background-position" "left center" - , verticalAlign middle - ] - , labelClasses = labelClass model.selected - , labelContent = labelContent - } - --disabledStyles = -- [ cursor pointer -- , opacity (num 0.4) @@ -440,7 +415,6 @@ type Theme = Square ColorTheme | Locked | LockOnInside - | Unlockable | Premium @@ -469,7 +443,6 @@ type alias Assets r = , iconPremiumUnlocked_png : Asset , iconPremiumLocked_png : Asset , checkboxLockOnInside_svg : Asset - , iconPremiumKey_png : Asset , iconPremiumFlag_svg : Asset } @@ -480,7 +453,6 @@ type CheckboxImage | CheckboxCheckedPartially | PremiumFlag | PremiumLocked - | PremiumKey | CheckboxLockOnInside @@ -502,8 +474,5 @@ checkboxAssetPath assets checkboxImage = CheckboxLockOnInside -> assets.checkboxLockOnInside_svg - PremiumKey -> - assets.iconPremiumKey_png - PremiumFlag -> assets.iconPremiumFlag_svg From 83575dd29a1a2a0731c45266c778767f70c61639 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 17:34:32 -0700 Subject: [PATCH 42/64] :skull: kill unecessary redirection --- src/Nri/Ui/Checkbox/V3.elm | 57 ++++++++------------------------------ 1 file changed, 11 insertions(+), 46 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 4c53b9f5..ddbee918 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -199,13 +199,13 @@ buildCheckbox assets modifierClasses model labelContent = , display inlineBlock , case model.selected of Selected -> - backgroundImageDeprecated assets CheckboxChecked + backgroundImage (assetPathUrl assets.checkboxChecked_svg) NotSelected -> - backgroundImageDeprecated assets CheckboxUnchecked + backgroundImage (assetPathUrl assets.checkboxUnchecked_svg) PartiallySelected -> - backgroundImageDeprecated assets CheckboxCheckedPartially + backgroundImage (assetPathUrl assets.checkboxCheckedPartially_svg) , Css.batch <| case colorTheme of Gray -> @@ -222,7 +222,7 @@ buildCheckbox assets modifierClasses model labelContent = { containerClasses = toClassList (modifierClasses ++ [ "LockedClass" ]) , labelStyles = css - [ backgroundImageDeprecated assets PremiumLocked + [ backgroundImage (assetPathUrl assets.iconPremiumLocked_png) , backgroundRepeat noRepeat , color Colors.gray20 , display inlineBlock @@ -243,7 +243,7 @@ buildCheckbox assets modifierClasses model labelContent = { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) , labelStyles = css - [ backgroundImageDeprecated assets CheckboxLockOnInside + [ backgroundImage (assetPathUrl assets.checkboxLockOnInside_svg) , backgroundRepeat noRepeat , backgroundSize (px 24) , color Colors.gray20 @@ -392,7 +392,7 @@ premiumLabelStyles image model = , width (px 26) , height (px 24) , marginLeft (px 8) - , backgroundImage ((url << Nri.Ui.AssetPath.Css.url) image) + , backgroundImage (assetPathUrl image) , backgroundRepeat noRepeat , backgroundPosition Css.center ] @@ -405,6 +405,11 @@ premiumLabelStyles image model = ) +assetPathUrl : Asset -> BackgroundImage {} +assetPathUrl = + url << Nri.Ui.AssetPath.Css.url + + indeterminateAttr : RootHtml.Attribute msg indeterminateAttr = RootAttributes.property "indeterminate" (Json.Encode.bool True) @@ -424,15 +429,6 @@ type ColorTheme | Gray - --- ICONS used instead of default browser implementations - - -backgroundImageDeprecated : Assets r -> CheckboxImage -> Css.Style -backgroundImageDeprecated assets checkboxImage = - property "background-image" (Nri.Ui.AssetPath.Css.url <| checkboxAssetPath assets checkboxImage) - - {-| The assets used in this module. -} type alias Assets r = @@ -445,34 +441,3 @@ type alias Assets r = , checkboxLockOnInside_svg : Asset , iconPremiumFlag_svg : Asset } - - -type CheckboxImage - = CheckboxUnchecked - | CheckboxChecked - | CheckboxCheckedPartially - | PremiumFlag - | PremiumLocked - | CheckboxLockOnInside - - -checkboxAssetPath : Assets r -> CheckboxImage -> Asset -checkboxAssetPath assets checkboxImage = - case checkboxImage of - CheckboxUnchecked -> - assets.checkboxUnchecked_svg - - CheckboxChecked -> - assets.checkboxChecked_svg - - CheckboxCheckedPartially -> - assets.checkboxCheckedPartially_svg - - PremiumLocked -> - assets.iconPremiumLocked_png - - CheckboxLockOnInside -> - assets.checkboxLockOnInside_svg - - PremiumFlag -> - assets.iconPremiumFlag_svg From d34e29f84fb6bc36a18db7d7a058f6bc12f22488 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 17:43:03 -0700 Subject: [PATCH 43/64] :skull: based on the styleguide and on the monolith, looks like we're also not really using the Locked theme, just locked on the inside --- src/Nri/Ui/Checkbox/V3.elm | 27 --------------------------- 1 file changed, 27 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index ddbee918..c9435043 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -218,27 +218,6 @@ buildCheckbox assets modifierClasses model labelContent = , labelContent = labelContent } - Locked -> - { containerClasses = toClassList (modifierClasses ++ [ "LockedClass" ]) - , labelStyles = - css - [ backgroundImage (assetPathUrl assets.iconPremiumLocked_png) - , backgroundRepeat noRepeat - , color Colors.gray20 - , display inlineBlock - , Fonts.baseFont - , fontSize (px 16) - , minHeight (px 42) -- container height - , outline none - , padding2 (px 13) zero - , paddingLeft (px (29 + 6)) -- checkbox width + padding - , property "background-position" "left center" - , verticalAlign middle - ] - , labelClasses = labelClass model.selected - , labelContent = labelContent - } - LockOnInside -> { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) , labelStyles = @@ -265,11 +244,6 @@ buildCheckbox assets modifierClasses model labelContent = , labelContent = labelContent } - --disabledStyles = - -- [ cursor pointer - -- , opacity (num 0.4) - -- , outline none - -- ] Premium -> { containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ]) , labelStyles = premiumLabelStyles assets.iconPremiumFlag_svg model @@ -418,7 +392,6 @@ indeterminateAttr = {-| -} type Theme = Square ColorTheme - | Locked | LockOnInside | Premium From 2c4169a3344eefbe9ddeefd7ef75d6d51051d26d Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 17:52:58 -0700 Subject: [PATCH 44/64] Extract the premium chekcbox functionality --- src/Nri/Ui/Checkbox/V3.elm | 77 ---------- src/Nri/Ui/PremiumCheckbox/V1.elm | 84 +++++++++++ tests/Spec/Nri/Ui/Checkbox/V3.elm | 153 +------------------ tests/Spec/Nri/Ui/PremiumCheckbox/V1.elm | 180 +++++++++++++++++++++++ 4 files changed, 265 insertions(+), 229 deletions(-) create mode 100644 src/Nri/Ui/PremiumCheckbox/V1.elm create mode 100644 tests/Spec/Nri/Ui/PremiumCheckbox/V1.elm diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index c9435043..13959998 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -3,9 +3,7 @@ module Nri.Ui.Checkbox.V3 ( ColorTheme(..) , IsSelected(..) , Model - , PremiumConfig , Theme(..) - , premium , view , viewWithLabel ) @@ -16,11 +14,6 @@ module Nri.Ui.Checkbox.V3 @docs view, viewWithLabel - -## Premium - -@docs PremiumConfig, premium - -} import Accessibility.Styled as Html @@ -40,7 +33,6 @@ import Json.Encode import Nri.Ui.AssetPath exposing (Asset(..)) import Nri.Ui.AssetPath.Css import Nri.Ui.Colors.V1 as Colors -import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Html.Attributes.V2 as ExtraAttributes import Nri.Ui.Html.V2 as HtmlExtra @@ -101,75 +93,6 @@ viewWithLabel assets model = Html.span [] [ Html.text model.label ] -{-| - - - `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 : IsSelected - , disabled : Bool - , teacherPremiumLevel : PremiumLevel - , contentPremiumLevel : PremiumLevel - , showFlagWhenLocked : Bool - , onChange : Bool -> msg - , onLockedClick : msg - , noOpMsg : msg - } - - -{-| A checkbox that should be used for premium content - -This checkbox is locked when the premium level of the content is greater than the premium level of the teacher - --} -premium : Assets a -> PremiumConfig msg -> Html.Html msg -premium assets config = - let - isLocked = - not <| - PremiumLevel.allowedFor - config.contentPremiumLevel - config.teacherPremiumLevel - - modifierClasses = - List.concat - [ if config.showFlagWhenLocked && config.contentPremiumLevel /= Free then - [ "PremiumClass" ] - else - [] - ] - - theme = - if isLocked then - LockOnInside - else if config.contentPremiumLevel /= Free then - Premium - else - Square Default - in - buildCheckbox assets - modifierClasses - { identifier = config.id - , label = config.label - , setterMsg = - if isLocked then - \_ -> config.onLockedClick - else - config.onChange - , selected = config.selected - , disabled = config.disabled - , theme = theme - , noOpMsg = config.noOpMsg - } - <| - Html.span [] [ Html.text config.label ] - - buildCheckbox : Assets a -> List String -> Model msg -> Html.Html msg -> Html.Html msg buildCheckbox assets modifierClasses model labelContent = let diff --git a/src/Nri/Ui/PremiumCheckbox/V1.elm b/src/Nri/Ui/PremiumCheckbox/V1.elm new file mode 100644 index 00000000..c3f61817 --- /dev/null +++ b/src/Nri/Ui/PremiumCheckbox/V1.elm @@ -0,0 +1,84 @@ +module Nri.Ui.PremiumCheckbox.V1 exposing (PremiumConfig, premium) + +{-| + +@docs PremiumConfig, premium + +-} + +import Accessibility.Styled as Html +import Nri.Ui.AssetPath exposing (Asset(..)) +import Nri.Ui.Checkbox.V3 as Checkbox +import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) + + +{-| + + - `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 + , teacherPremiumLevel : PremiumLevel + , contentPremiumLevel : PremiumLevel + , showFlagWhenLocked : Bool + , onChange : Bool -> msg + , onLockedClick : msg + , noOpMsg : msg + } + + +{-| A checkbox that should be used for premium content + +This checkbox is locked when the premium level of the content is greater than the premium level of the teacher + +-} +premium : Assets a -> PremiumConfig msg -> Html.Html msg +premium assets config = + let + isLocked = + not <| + PremiumLevel.allowedFor + config.contentPremiumLevel + config.teacherPremiumLevel + + theme = + if isLocked then + Checkbox.LockOnInside + else if config.contentPremiumLevel /= Free then + Checkbox.Premium + else + Checkbox.Square Checkbox.Default + in + Checkbox.viewWithLabel assets + { identifier = config.id + , label = config.label + , setterMsg = + if isLocked then + \_ -> config.onLockedClick + else + config.onChange + , selected = config.selected + , disabled = config.disabled + , theme = theme + , noOpMsg = config.noOpMsg + } + + +{-| The assets used in this module. +-} +type alias Assets r = + { r + | checkboxUnchecked_svg : Asset + , checkboxChecked_svg : Asset + , checkboxCheckedPartially_svg : Asset + , iconPremiumUnlocked_png : Asset + , iconPremiumLocked_png : Asset + , checkboxLockOnInside_svg : Asset + , iconPremiumFlag_svg : Asset + } diff --git a/tests/Spec/Nri/Ui/Checkbox/V3.elm b/tests/Spec/Nri/Ui/Checkbox/V3.elm index 50c868e9..7e43fcc2 100644 --- a/tests/Spec/Nri/Ui/Checkbox/V3.elm +++ b/tests/Spec/Nri/Ui/Checkbox/V3.elm @@ -9,161 +9,10 @@ import Test.Html.Query as Query import Test.Html.Selector as Selector -premiumView config = - Checkbox.premium assets - { label = config.label - , id = "id" - , selected = config.selected - , disabled = config.disabled - , teacherPremiumLevel = config.teacherPremiumLevel - , contentPremiumLevel = config.contentPremiumLevel - , showFlagWhenLocked = config.showFlagWhenLocked - , onChange = \_ -> () - , onLockedClick = () - , noOpMsg = () - } - |> Html.Styled.toUnstyled - |> Query.fromHtml - - spec : Test spec = describe "Nri.Ui.Checkbox.V1" - [ describe "premium" - [ test "displays the label" <| - \() -> - premiumView - { label = "i am label" - , selected = Selected - , disabled = False - , teacherPremiumLevel = Free - , contentPremiumLevel = Free - , showFlagWhenLocked = True - } - |> Query.has [ Selector.text "i am label" ] - , test "appears selected when Selected is passed in" <| - \() -> - premiumView - { label = "i am label" - , selected = Selected - , disabled = False - , teacherPremiumLevel = Free - , contentPremiumLevel = Free - , showFlagWhenLocked = True - } - |> Query.has [ Selector.class "checkbox-Checked" ] - , test "appears unselected when NotSelected is passed in" <| - \() -> - premiumView - { label = "i am label" - , selected = NotSelected - , disabled = False - , teacherPremiumLevel = Free - , contentPremiumLevel = Free - , showFlagWhenLocked = True - } - |> Query.has [ Selector.class "checkbox-Unchecked" ] - , test "appears partially selected when PartiallySelected is passed in" <| - \() -> - premiumView - { label = "i am label" - , selected = PartiallySelected - , disabled = False - , teacherPremiumLevel = Free - , contentPremiumLevel = Free - , showFlagWhenLocked = True - } - |> Query.has [ Selector.class "checkbox-Indeterminate" ] - , test "appears locked when teacherPremiumLevel < contentPremiumLevel" <| - \() -> - premiumView - { label = "i am label" - , selected = PartiallySelected - , disabled = False - , teacherPremiumLevel = Free - , contentPremiumLevel = Premium - , showFlagWhenLocked = True - } - |> Query.has [ Selector.class "checkbox-LockOnInsideClass" ] - , test "appears unlocked when teacherPremiumLevel >= contentPremiumLevel" <| - \() -> - premiumView - { label = "i am label" - , selected = PartiallySelected - , disabled = False - , teacherPremiumLevel = Premium - , contentPremiumLevel = Premium - , showFlagWhenLocked = True - } - |> Query.hasNot [ Selector.class "checkbox-LockOnInsideClass" ] - , test "appears with P flag when teacherPremiumLevel >= contentPremiumLevel" <| - \() -> - premiumView - { label = "i am label" - , selected = PartiallySelected - , disabled = False - , teacherPremiumLevel = Premium - , contentPremiumLevel = Premium - , showFlagWhenLocked = False - } - |> Query.has [ Selector.class "checkbox-PremiumClass" ] - , test "does not appear with P flag when teacherPremiumLevel < contentPremiumLevel and showFlagWhenLocked = False" <| - \() -> - premiumView - { label = "i am label" - , selected = PartiallySelected - , disabled = False - , teacherPremiumLevel = Free - , contentPremiumLevel = Premium - , showFlagWhenLocked = False - } - |> Query.hasNot [ Selector.class "checkbox-PremiumClass" ] - , test "appears with P flag for Premium content when teacherPremiumLevel < contentPremiumLevel and showFlagWhenLocked = True" <| - \() -> - premiumView - { label = "i am label" - , selected = PartiallySelected - , disabled = False - , teacherPremiumLevel = Free - , contentPremiumLevel = Premium - , showFlagWhenLocked = True - } - |> Query.has [ Selector.class "checkbox-PremiumClass" ] - , test "never shows P flag for nonPremium content" <| - \() -> - premiumView - { label = "i am label" - , selected = PartiallySelected - , disabled = False - , teacherPremiumLevel = Free - , contentPremiumLevel = Free - , showFlagWhenLocked = True - } - |> Query.hasNot [ Selector.class "checkbox-PremiumClass" ] - , test "is not disabled when disabled = False and the checkbox is unlocked" <| - \() -> - premiumView - { label = "i am label" - , selected = PartiallySelected - , disabled = False - , teacherPremiumLevel = Free - , contentPremiumLevel = Free - , showFlagWhenLocked = True - } - |> Query.has [ Selector.disabled False ] - , test "is disabled when disabled = True and the checkbox is unlocked" <| - \() -> - premiumView - { label = "i am label" - , selected = PartiallySelected - , disabled = True - , teacherPremiumLevel = Free - , contentPremiumLevel = Free - , showFlagWhenLocked = True - } - |> Query.has [ Selector.disabled True ] - ] - ] + [] assets = diff --git a/tests/Spec/Nri/Ui/PremiumCheckbox/V1.elm b/tests/Spec/Nri/Ui/PremiumCheckbox/V1.elm new file mode 100644 index 00000000..125ea403 --- /dev/null +++ b/tests/Spec/Nri/Ui/PremiumCheckbox/V1.elm @@ -0,0 +1,180 @@ +module Spec.Nri.Ui.PremiumCheckbox.V1 exposing (spec) + +import Html.Styled +import Nri.Ui.AssetPath exposing (Asset(Asset)) +import Nri.Ui.Checkbox.V3 exposing (IsSelected(..)) +import Nri.Ui.Data.PremiumLevel exposing (PremiumLevel(..)) +import Nri.Ui.PremiumCheckbox.V1 as PremiumCheckbox +import Test exposing (..) +import Test.Html.Query as Query +import Test.Html.Selector as Selector + + +premiumView config = + PremiumCheckbox.premium assets + { label = config.label + , id = "id" + , selected = config.selected + , disabled = config.disabled + , teacherPremiumLevel = config.teacherPremiumLevel + , contentPremiumLevel = config.contentPremiumLevel + , showFlagWhenLocked = config.showFlagWhenLocked + , onChange = \_ -> () + , onLockedClick = () + , noOpMsg = () + } + |> Html.Styled.toUnstyled + |> Query.fromHtml + + +spec : Test +spec = + describe "Nri.Ui.PremiumCheckbox.V1" + [ describe "premium" + [ test "displays the label" <| + \() -> + premiumView + { label = "i am label" + , selected = Selected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.has [ Selector.text "i am label" ] + , test "appears selected when Selected is passed in" <| + \() -> + premiumView + { label = "i am label" + , selected = Selected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.has [ Selector.class "checkbox-Checked" ] + , test "appears unselected when NotSelected is passed in" <| + \() -> + premiumView + { label = "i am label" + , selected = NotSelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.has [ Selector.class "checkbox-Unchecked" ] + , test "appears partially selected when PartiallySelected is passed in" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.has [ Selector.class "checkbox-Indeterminate" ] + , test "appears locked when teacherPremiumLevel < contentPremiumLevel" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Premium + , showFlagWhenLocked = True + } + |> Query.has [ Selector.class "checkbox-LockOnInsideClass" ] + , test "appears unlocked when teacherPremiumLevel >= contentPremiumLevel" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Premium + , contentPremiumLevel = Premium + , showFlagWhenLocked = True + } + |> Query.hasNot [ Selector.class "checkbox-LockOnInsideClass" ] + , test "appears with P flag when teacherPremiumLevel >= contentPremiumLevel" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Premium + , contentPremiumLevel = Premium + , showFlagWhenLocked = False + } + |> Query.has [ Selector.class "checkbox-PremiumClass" ] + , test "does not appear with P flag when teacherPremiumLevel < contentPremiumLevel and showFlagWhenLocked = False" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Premium + , showFlagWhenLocked = False + } + |> Query.hasNot [ Selector.class "checkbox-PremiumClass" ] + , test "appears with P flag for Premium content when teacherPremiumLevel < contentPremiumLevel and showFlagWhenLocked = True" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Premium + , showFlagWhenLocked = True + } + |> Query.has [ Selector.class "checkbox-PremiumClass" ] + , test "never shows P flag for nonPremium content" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.hasNot [ Selector.class "checkbox-PremiumClass" ] + , test "is not disabled when disabled = False and the checkbox is unlocked" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = False + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.has [ Selector.disabled False ] + , test "is disabled when disabled = True and the checkbox is unlocked" <| + \() -> + premiumView + { label = "i am label" + , selected = PartiallySelected + , disabled = True + , teacherPremiumLevel = Free + , contentPremiumLevel = Free + , showFlagWhenLocked = True + } + |> Query.has [ Selector.disabled True ] + ] + ] + + +assets = + { checkboxUnchecked_svg = Asset "checkboxUnchecked reference" + , checkboxChecked_svg = Asset "checkboxChecked reference" + , checkboxCheckedPartially_svg = Asset "checkboxCheckedPartially reference" + , iconPremiumUnlocked_png = Asset "iconPremiumUnlocked reference" + , iconCheck_png = Asset "iconCheck reference" + , iconPremiumLocked_png = Asset "iconPremiumLocked reference" + , checkboxLockOnInside_svg = Asset "checkboxLockOnInside reference" + , iconPremiumKey_png = Asset "iconPremiumKey reference" + , iconPremiumFlag_svg = Asset "iconPremiumFlag reference" + } From f918183bc66f2783c687d0f4d24ed89da1389c12 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 18:06:07 -0700 Subject: [PATCH 45/64] :skull: kill empty tests --- tests/Spec/Nri/Ui/Checkbox/V3.elm | 28 ---------------------------- 1 file changed, 28 deletions(-) delete mode 100644 tests/Spec/Nri/Ui/Checkbox/V3.elm diff --git a/tests/Spec/Nri/Ui/Checkbox/V3.elm b/tests/Spec/Nri/Ui/Checkbox/V3.elm deleted file mode 100644 index 7e43fcc2..00000000 --- a/tests/Spec/Nri/Ui/Checkbox/V3.elm +++ /dev/null @@ -1,28 +0,0 @@ -module Spec.Nri.Ui.Checkbox.V3 exposing (spec) - -import Html.Styled -import Nri.Ui.AssetPath exposing (Asset(Asset)) -import Nri.Ui.Checkbox.V3 as Checkbox exposing (IsSelected(..)) -import Nri.Ui.Data.PremiumLevel exposing (PremiumLevel(..)) -import Test exposing (..) -import Test.Html.Query as Query -import Test.Html.Selector as Selector - - -spec : Test -spec = - describe "Nri.Ui.Checkbox.V1" - [] - - -assets = - { checkboxUnchecked_svg = Asset "checkboxUnchecked reference" - , checkboxChecked_svg = Asset "checkboxChecked reference" - , checkboxCheckedPartially_svg = Asset "checkboxCheckedPartially reference" - , iconPremiumUnlocked_png = Asset "iconPremiumUnlocked reference" - , iconCheck_png = Asset "iconCheck reference" - , iconPremiumLocked_png = Asset "iconPremiumLocked reference" - , checkboxLockOnInside_svg = Asset "checkboxLockOnInside reference" - , iconPremiumKey_png = Asset "iconPremiumKey reference" - , iconPremiumFlag_svg = Asset "iconPremiumFlag reference" - } From 74b1ec9eebe525dc54d756cb0100dcf0f68e49d4 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 18:22:46 -0700 Subject: [PATCH 46/64] Keep the premium flag around --- src/Nri/Ui/Checkbox/V3.elm | 28 ++++++---------- src/Nri/Ui/PremiumCheckbox/V1.elm | 56 ++++++++++++++++++++++++------- 2 files changed, 54 insertions(+), 30 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 13959998..abeac932 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -122,13 +122,13 @@ buildCheckbox assets modifierClasses model labelContent = , display inlineBlock , case model.selected of Selected -> - backgroundImage (assetPathUrl assets.checkboxChecked_svg) + backgroundImage assets.checkboxChecked_svg NotSelected -> - backgroundImage (assetPathUrl assets.checkboxUnchecked_svg) + backgroundImage assets.checkboxUnchecked_svg PartiallySelected -> - backgroundImage (assetPathUrl assets.checkboxCheckedPartially_svg) + backgroundImage assets.checkboxCheckedPartially_svg , Css.batch <| case colorTheme of Gray -> @@ -145,7 +145,7 @@ buildCheckbox assets modifierClasses model labelContent = { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) , labelStyles = css - [ backgroundImage (assetPathUrl assets.checkboxLockOnInside_svg) + [ backgroundImage assets.checkboxLockOnInside_svg , backgroundRepeat noRepeat , backgroundSize (px 24) , color Colors.gray20 @@ -168,7 +168,7 @@ buildCheckbox assets modifierClasses model labelContent = } Premium -> - { containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ]) + { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) , labelStyles = premiumLabelStyles assets.iconPremiumFlag_svg model , labelClasses = labelClass model.selected , labelContent = labelContent @@ -289,7 +289,7 @@ premiumLabelStyles image model = , width (px 26) , height (px 24) , marginLeft (px 8) - , backgroundImage (assetPathUrl image) + , backgroundImage image , backgroundRepeat noRepeat , backgroundPosition Css.center ] @@ -302,16 +302,6 @@ premiumLabelStyles image model = ) -assetPathUrl : Asset -> BackgroundImage {} -assetPathUrl = - url << Nri.Ui.AssetPath.Css.url - - -indeterminateAttr : RootHtml.Attribute msg -indeterminateAttr = - RootAttributes.property "indeterminate" (Json.Encode.bool True) - - {-| -} type Theme = Square ColorTheme @@ -333,7 +323,11 @@ type alias Assets r = , checkboxChecked_svg : Asset , checkboxCheckedPartially_svg : Asset , iconPremiumUnlocked_png : Asset - , iconPremiumLocked_png : Asset , checkboxLockOnInside_svg : Asset , iconPremiumFlag_svg : Asset } + + +backgroundImage = + Nri.Ui.AssetPath.Css.url + >> property "background-image" diff --git a/src/Nri/Ui/PremiumCheckbox/V1.elm b/src/Nri/Ui/PremiumCheckbox/V1.elm index c3f61817..eaac9807 100644 --- a/src/Nri/Ui/PremiumCheckbox/V1.elm +++ b/src/Nri/Ui/PremiumCheckbox/V1.elm @@ -7,7 +7,10 @@ module Nri.Ui.PremiumCheckbox.V1 exposing (PremiumConfig, premium) -} 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.V3 as Checkbox import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) @@ -55,19 +58,41 @@ premium assets config = else Checkbox.Square Checkbox.Default in - Checkbox.viewWithLabel assets - { identifier = config.id - , label = config.label - , setterMsg = - if isLocked then - \_ -> config.onLockedClick - else - config.onChange - , selected = config.selected - , disabled = config.disabled - , theme = theme - , noOpMsg = config.noOpMsg - } + Html.span [] + [ Checkbox.viewWithLabel assets + { identifier = config.id + , label = config.label + , setterMsg = + if isLocked then + \_ -> config.onLockedClick + else + config.onChange + , selected = config.selected + , disabled = config.disabled + , theme = theme + , noOpMsg = config.noOpMsg + } + , if + (isLocked && config.showFlagWhenLocked) + || (not isLocked && config.contentPremiumLevel /= Free) + then + Html.div + [ Attributes.class "checkbox-PremiumClass" + , css + [ property "content" "''" + , display inlineBlock + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage assets.iconPremiumFlag_svg + , backgroundRepeat noRepeat + , backgroundPosition Css.center + ] + ] + [] + else + Html.text "" + ] {-| The assets used in this module. @@ -82,3 +107,8 @@ type alias Assets r = , checkboxLockOnInside_svg : Asset , iconPremiumFlag_svg : Asset } + + +backgroundImage = + Nri.Ui.AssetPath.Css.url + >> property "background-image" From a01eeb9df8e1d97d06e900ec4590b53e654bf99d Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 19 Jun 2018 18:25:15 -0700 Subject: [PATCH 47/64] :skull: clean up the assets required --- src/Nri/Ui/Checkbox/V3.elm | 4 +--- src/Nri/Ui/PremiumCheckbox/V1.elm | 2 -- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index abeac932..5e7d7e93 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -169,7 +169,7 @@ buildCheckbox assets modifierClasses model labelContent = Premium -> { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) - , labelStyles = premiumLabelStyles assets.iconPremiumFlag_svg model + , labelStyles = premiumLabelStyles assets.checkboxLockOnInside_svg model , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -322,9 +322,7 @@ type alias Assets r = | checkboxUnchecked_svg : Asset , checkboxChecked_svg : Asset , checkboxCheckedPartially_svg : Asset - , iconPremiumUnlocked_png : Asset , checkboxLockOnInside_svg : Asset - , iconPremiumFlag_svg : Asset } diff --git a/src/Nri/Ui/PremiumCheckbox/V1.elm b/src/Nri/Ui/PremiumCheckbox/V1.elm index eaac9807..32e80d07 100644 --- a/src/Nri/Ui/PremiumCheckbox/V1.elm +++ b/src/Nri/Ui/PremiumCheckbox/V1.elm @@ -102,8 +102,6 @@ type alias Assets r = | checkboxUnchecked_svg : Asset , checkboxChecked_svg : Asset , checkboxCheckedPartially_svg : Asset - , iconPremiumUnlocked_png : Asset - , iconPremiumLocked_png : Asset , checkboxLockOnInside_svg : Asset , iconPremiumFlag_svg : Asset } From 88b6020a9a9771925c5d8b9850458a95e6e12bf8 Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Wed, 20 Jun 2018 15:28:20 +0100 Subject: [PATCH 48/64] Handle some Elm compilation warnings --- src/Nri/Ui/Checkbox/V3.elm | 6 +-- src/Nri/Ui/PremiumCheckbox/V1.elm | 75 +++++++++++++++---------------- 2 files changed, 38 insertions(+), 43 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 5e7d7e93..91a3e69d 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -22,14 +22,11 @@ import Accessibility.Styled.Style import Accessibility.Styled.Widget as Widget import Css exposing (..) import Css.Foreign exposing (Snippet, children, descendants, everything, selector) -import Html as RootHtml -import Html.Attributes as RootAttributes import Html.Events exposing (defaultOptions) -import Html.Styled exposing (fromUnstyled, toUnstyled) +import Html.Styled import Html.Styled.Attributes as Attributes exposing (css) import Html.Styled.Events as Events import Json.Decode -import Json.Encode import Nri.Ui.AssetPath exposing (Asset(..)) import Nri.Ui.AssetPath.Css import Nri.Ui.Colors.V1 as Colors @@ -326,6 +323,7 @@ type alias Assets r = } +backgroundImage : Asset -> Style backgroundImage = Nri.Ui.AssetPath.Css.url >> property "background-image" diff --git a/src/Nri/Ui/PremiumCheckbox/V1.elm b/src/Nri/Ui/PremiumCheckbox/V1.elm index 32e80d07..de901205 100644 --- a/src/Nri/Ui/PremiumCheckbox/V1.elm +++ b/src/Nri/Ui/PremiumCheckbox/V1.elm @@ -1,9 +1,6 @@ module Nri.Ui.PremiumCheckbox.V1 exposing (PremiumConfig, premium) -{-| - -@docs PremiumConfig, premium - +{-| @docs PremiumConfig, premium -} import Accessibility.Styled as Html @@ -20,7 +17,6 @@ import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) - `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 @@ -58,41 +54,41 @@ premium assets config = else Checkbox.Square Checkbox.Default in - Html.span [] - [ Checkbox.viewWithLabel assets - { identifier = config.id - , label = config.label - , setterMsg = - if isLocked then - \_ -> config.onLockedClick - else - config.onChange - , selected = config.selected - , disabled = config.disabled - , theme = theme - , noOpMsg = config.noOpMsg - } - , if - (isLocked && config.showFlagWhenLocked) - || (not isLocked && config.contentPremiumLevel /= Free) - then - Html.div - [ Attributes.class "checkbox-PremiumClass" - , css - [ property "content" "''" - , display inlineBlock - , width (px 26) - , height (px 24) - , marginLeft (px 8) - , backgroundImage assets.iconPremiumFlag_svg - , backgroundRepeat noRepeat - , backgroundPosition Css.center + Html.span [] + [ Checkbox.viewWithLabel assets + { identifier = config.id + , label = config.label + , setterMsg = + if isLocked then + \_ -> config.onLockedClick + else + config.onChange + , selected = config.selected + , disabled = config.disabled + , theme = theme + , noOpMsg = config.noOpMsg + } + , if + (isLocked && config.showFlagWhenLocked) + || (not isLocked && config.contentPremiumLevel /= Free) + then + Html.div + [ Attributes.class "checkbox-PremiumClass" + , css + [ property "content" "''" + , display inlineBlock + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage assets.iconPremiumFlag_svg + , backgroundRepeat noRepeat + , backgroundPosition Css.center + ] ] - ] - [] - else - Html.text "" - ] + [] + else + Html.text "" + ] {-| The assets used in this module. @@ -107,6 +103,7 @@ type alias Assets r = } +backgroundImage : Asset -> Style backgroundImage = Nri.Ui.AssetPath.Css.url >> property "background-image" From 8fb23ec8e4a03fbef79a530cdda65c836e38c7ae Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Wed, 20 Jun 2018 16:06:11 +0100 Subject: [PATCH 49/64] Add styleguide section for checkboxes --- styleguide-app/Assets.elm | 22 ++- styleguide-app/Examples/Checkbox.elm | 214 +++++++++++++++++++++++++++ styleguide-app/NriModules.elm | 56 ++++--- 3 files changed, 264 insertions(+), 28 deletions(-) create mode 100644 styleguide-app/Examples/Checkbox.elm diff --git a/styleguide-app/Assets.elm b/styleguide-app/Assets.elm index 92e9acc5..562ad7b6 100644 --- a/styleguide-app/Assets.elm +++ b/styleguide-app/Assets.elm @@ -9,6 +9,10 @@ type alias Assets = , attention_svg : Asset , bulb : String , calendar : String + , checkboxCheckedPartially_svg : Asset + , checkboxChecked_svg : Asset + , checkboxLockOnInside_svg : Asset + , checkboxUnchecked_svg : Asset , checkmark : String , class : String , clever : String @@ -32,6 +36,7 @@ type alias Assets = , iconCalendar_svg : Asset , iconCheck_png : Asset , iconFlag_png : Asset + , iconPremiumFlag_svg : Asset , icons_arrowDownBlue_svg : Asset , icons_arrowRightBlue_svg : Asset , icons_clockRed_svg : Asset @@ -60,6 +65,8 @@ type alias Assets = , premiumLock_svg : Asset , preview : String , quiz : String + , rating : String + , revising : String , seemore : String , share : String , skip : String @@ -69,6 +76,7 @@ type alias Assets = , speedometer : String , squiggly_png : Asset , startingOffBadge_png : Asset + , submitting : String , teach_assignments_copyWhite_svg : Asset , twitterBlue_svg : Asset , unarchiveBlue2x_png : Asset @@ -76,9 +84,6 @@ type alias Assets = , writingcycle : String , x : String , xWhite_svg : Asset - , submitting : String - , rating : String - , revising : String } @@ -89,6 +94,10 @@ assets = , attention_svg = Asset "assets/images/attention.svg" , bulb = "icon-bulb" , calendar = "icon-calendar" + , checkboxCheckedPartially_svg = Asset "TODO: add asset path" + , checkboxChecked_svg = Asset "TODO: add asset path" + , checkboxLockOnInside_svg = Asset "TODO: add asset path" + , checkboxUnchecked_svg = Asset "TODO: add asset path" , checkmark = "icon-checkmark" , class = "icon-class" , clever = "icon-clever" @@ -112,6 +121,7 @@ assets = , iconCalendar_svg = Asset "assets/images/icon-calendar.svg" , iconCheck_png = Asset "assets/images/icon-check.png" , iconFlag_png = Asset "assets/images/icon-flag.png" + , iconPremiumFlag_svg = Asset "TODO: add asset path" , icons_arrowDownBlue_svg = Asset "assets/images/arrow-down-blue.svg" , icons_arrowRightBlue_svg = Asset "assets/images/arrow-right-blue.svg" , icons_clockRed_svg = Asset "assets/images/clock-red.svg" @@ -139,6 +149,8 @@ assets = , premiumLock_svg = Asset "assets/images/premium-lock.svg" , preview = "icon-preview" , quiz = "icon-quiz" + , rating = "icon-rating" + , revising = "icon-revising" , seemore = "icon-seemore" , share = "icon-share" , skip = "icon-skip" @@ -148,6 +160,7 @@ assets = , speedometer = "icon-speedometer" , squiggly_png = Asset "assets/images/squiggly.png" , startingOffBadge_png = Asset "assets/images/starting-off-badge.png" + , submitting = "icon-submitting" , teach_assignments_copyWhite_svg = Asset "assets/images/copy-white.svg" , twitterBlue_svg = Asset "assets/images/twitter-blue.svg" , unarchiveBlue2x_png = Asset "assets/images/unarchive-blue_2x.png" @@ -155,7 +168,4 @@ assets = , writingcycle = "icon-writingcycle" , x = "icon-x" , xWhite_svg = Asset "assets/images/x-white.svg" - , submitting = "icon-submitting" - , rating = "icon-rating" - , revising = "icon-revising" } diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm new file mode 100644 index 00000000..6b5df3ae --- /dev/null +++ b/styleguide-app/Examples/Checkbox.elm @@ -0,0 +1,214 @@ +module Examples.Checkbox exposing (Msg, State, example, init, update) + +{-| + +@docs Msg, State, example, init, update, + +-} + +import Assets exposing (assets) +import Debug.Control as Control exposing (Control) +import Html.Styled as Html exposing (..) +import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) +import Nri.Ui.Checkbox.V3 as Checkbox +import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) +import Nri.Ui.PremiumCheckbox.V1 as PremiumCheckbox +import Set exposing (Set) + + +{-| -} +type Msg + = ToggleCheck Id Bool + | SetPremiumControl (Control PremiumExampleConfig) + | NoOp + + +{-| -} +type alias State = + { isChecked : Set String + , premiumControl : Control PremiumExampleConfig + } + + +{-| -} +example : (Msg -> msg) -> State -> ModuleExample msg +example parentMessage state = + { filename = "Nri/Checkbox.elm" + , category = Inputs + , content = + [ viewInteractableCheckbox "styleguide-checkbox-interactable" state + , viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state + , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state + , viewEditingCheckbox "styleguide-checkbox-is-editing" state + , viewDisabledCheckbox "styleguide-checkbox-disabled" state + , h3 [] [ text "Premium Checkboxes" ] + , Control.view SetPremiumControl state.premiumControl + |> Html.fromUnstyled + , viewPremiumCheckboxes state + ] + |> List.map (Html.toUnstyled << Html.map parentMessage) + } + + +{-| -} +init : State +init = + { isChecked = Set.empty + , premiumControl = + Control.record PremiumExampleConfig + |> Control.field "disabled" (Control.bool False) + |> Control.field "teacherPremiumLevel" + (Control.choice + [ ( "Free", Control.value PremiumLevel.Free ) + , ( "Premium", Control.value PremiumLevel.Premium ) + , ( "Premium (with writing)", Control.value PremiumLevel.PremiumWithWriting ) + ] + ) + |> Control.field "showFlagWhenLocked" (Control.bool True) + } + + +{-| -} +update : Msg -> State -> ( State, Cmd Msg ) +update msg state = + case msg of + ToggleCheck id checked -> + let + isChecked = + if checked then + Set.insert id state.isChecked + else + Set.remove id state.isChecked + in + ( { state | isChecked = isChecked }, Cmd.none ) + + SetPremiumControl premiumControl -> + ( { state | premiumControl = premiumControl }, Cmd.none ) + + NoOp -> + ( state, Cmd.none ) + + + +-- INTERNAL + + +type alias PremiumExampleConfig = + { disabled : Bool + , teacherPremiumLevel : PremiumLevel + , showFlagWhenLocked : Bool + } + + +viewInteractableCheckbox : Id -> State -> Html Msg +viewInteractableCheckbox id state = + Checkbox.viewWithLabel + assets + { identifier = id + , label = "This is an interactable checkbox!" + , setterMsg = ToggleCheck id + , selected = isSelected id state + , disabled = False + , theme = Checkbox.Square Checkbox.Default + , noOpMsg = NoOp + } + + +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 + , selected = Checkbox.PartiallySelected + , disabled = True + , theme = Checkbox.Square Checkbox.Default + , noOpMsg = NoOp + } + + +viewLockedOnInsideCheckbox : Id -> State -> Html Msg +viewLockedOnInsideCheckbox id state = + Checkbox.viewWithLabel + assets + { identifier = id + , label = "I'm a locked Checkbox on the inside" + , setterMsg = ToggleCheck id + , selected = Checkbox.NotSelected + , disabled = True + , theme = Checkbox.LockOnInside + , noOpMsg = NoOp + } + + +viewEditingCheckbox : Id -> State -> Html Msg +viewEditingCheckbox id state = + Checkbox.viewWithLabel + assets + { identifier = id + , label = "This checkbox is for an editing state" + , setterMsg = ToggleCheck id + , selected = isSelected id state + , disabled = True + , theme = Checkbox.Square Checkbox.Gray + , noOpMsg = NoOp + } + + +viewDisabledCheckbox : Id -> State -> Html Msg +viewDisabledCheckbox id state = + Checkbox.viewWithLabel + assets + { identifier = id + , label = "Disabled theme" + , setterMsg = ToggleCheck id + , selected = isSelected id state + , disabled = False + , theme = Checkbox.Square Checkbox.Default + , noOpMsg = NoOp + } + + +viewPremiumCheckboxes : State -> Html Msg +viewPremiumCheckboxes state = + let + config = + Control.currentValue state.premiumControl + + checkbox label premiumLevel = + PremiumCheckbox.premium + assets + { label = label + , id = "premium-checkbox-" ++ label + , selected = + if Set.member label state.isChecked then + Checkbox.Selected + else + Checkbox.NotSelected + , disabled = config.disabled + , teacherPremiumLevel = config.teacherPremiumLevel + , contentPremiumLevel = premiumLevel + , showFlagWhenLocked = config.showFlagWhenLocked + , onChange = ToggleCheck label + , onLockedClick = NoOp + , noOpMsg = NoOp + } + in + Html.div [] + [ checkbox "Identify Adjectives 1 (Free)" PremiumLevel.Free + , checkbox "Identify Adjectives 2 (Premium)" PremiumLevel.Premium + , checkbox "Revising Wordy Phrases 1 (Writing)" PremiumLevel.PremiumWithWriting + ] + + +type alias Id = + String + + +isSelected : Id -> State -> Checkbox.IsSelected +isSelected id state = + if Set.member id state.isChecked then + Checkbox.Selected + else + Checkbox.NotSelected diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm index cab11730..d5010db2 100644 --- a/styleguide-app/NriModules.elm +++ b/styleguide-app/NriModules.elm @@ -3,6 +3,7 @@ module NriModules exposing (ModuleStates, Msg, init, nriThemedModules, styles, s import Assets exposing (assets) import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet) import Examples.Button +import Examples.Checkbox import Examples.Colors import Examples.Dropdown import Examples.Fonts @@ -31,6 +32,7 @@ import String.Extra type alias ModuleStates = { buttonExampleState : Examples.Button.State + , checkboxExampleState : Examples.Checkbox.State , dropdownState : Examples.Dropdown.State Examples.Dropdown.Value , segmentedControlState : Examples.SegmentedControl.State , selectState : Examples.Select.State Examples.Select.Value @@ -43,6 +45,7 @@ type alias ModuleStates = init : ModuleStates init = { buttonExampleState = Examples.Button.init assets + , checkboxExampleState = Examples.Checkbox.init , dropdownState = Examples.Dropdown.init , segmentedControlState = Examples.SegmentedControl.init , selectState = Examples.Select.init @@ -54,6 +57,7 @@ init = type Msg = ButtonExampleMsg Examples.Button.Msg + | CheckboxExampleMsg Examples.Checkbox.Msg | DropdownMsg Examples.Dropdown.Msg | SegmentedControlMsg Examples.SegmentedControl.Msg | SelectMsg Examples.Select.Msg @@ -72,70 +76,77 @@ update msg moduleStates = ( buttonExampleState, cmd ) = Examples.Button.update msg moduleStates.buttonExampleState in - ( { moduleStates | buttonExampleState = buttonExampleState } - , Cmd.map ButtonExampleMsg cmd - ) + ( { moduleStates | buttonExampleState = buttonExampleState } + , Cmd.map ButtonExampleMsg cmd + ) + + CheckboxExampleMsg msg -> + let + ( checkboxExampleState, cmd ) = + Examples.Checkbox.update msg moduleStates.checkboxExampleState + in + ( { moduleStates | checkboxExampleState = checkboxExampleState }, Cmd.map CheckboxExampleMsg cmd ) DropdownMsg msg -> let ( dropdownState, cmd ) = Examples.Dropdown.update msg moduleStates.dropdownState in - ( { moduleStates | dropdownState = dropdownState } - , Cmd.map DropdownMsg cmd - ) + ( { moduleStates | dropdownState = dropdownState } + , Cmd.map DropdownMsg cmd + ) SegmentedControlMsg msg -> let ( segmentedControlState, cmd ) = Examples.SegmentedControl.update msg moduleStates.segmentedControlState in - ( { moduleStates | segmentedControlState = segmentedControlState } - , Cmd.map SegmentedControlMsg cmd - ) + ( { moduleStates | segmentedControlState = segmentedControlState } + , Cmd.map SegmentedControlMsg cmd + ) SelectMsg msg -> let ( selectState, cmd ) = Examples.Select.update msg moduleStates.selectState in - ( { moduleStates | selectState = selectState } - , Cmd.map SelectMsg cmd - ) + ( { moduleStates | selectState = selectState } + , Cmd.map SelectMsg cmd + ) ShowItWorked group message -> let _ = Debug.log group message in - ( moduleStates, Cmd.none ) + ( moduleStates, Cmd.none ) TableExampleMsg msg -> let ( tableExampleState, cmd ) = Examples.Table.update msg moduleStates.tableExampleState in - ( { moduleStates | tableExampleState = tableExampleState } - , Cmd.map TableExampleMsg cmd - ) + ( { moduleStates | tableExampleState = tableExampleState } + , Cmd.map TableExampleMsg cmd + ) TextAreaExampleMsg msg -> let ( textAreaExampleState, cmd ) = TextAreaExample.update msg moduleStates.textAreaExampleState in - ( { moduleStates | textAreaExampleState = textAreaExampleState } - , Cmd.map TextAreaExampleMsg cmd - ) + ( { moduleStates | textAreaExampleState = textAreaExampleState } + , Cmd.map TextAreaExampleMsg cmd + ) TextInputExampleMsg msg -> let ( textInputExampleState, cmd ) = TextInputExample.update msg moduleStates.textInputExampleState in - ( { moduleStates | textInputExampleState = textInputExampleState } - , Cmd.map TextInputExampleMsg cmd - ) + ( { moduleStates | textInputExampleState = textInputExampleState } + , Cmd.map TextInputExampleMsg cmd + ) NoOp -> ( moduleStates, Cmd.none ) @@ -162,6 +173,7 @@ container width children = nriThemedModules : ModuleStates -> List (ModuleExample Msg) nriThemedModules model = [ Examples.Button.example assets (exampleMessages ButtonExampleMsg) model.buttonExampleState + , Examples.Checkbox.example CheckboxExampleMsg model.checkboxExampleState , Examples.Dropdown.example DropdownMsg model.dropdownState , Examples.Icon.example , Examples.Page.example NoOp From 257f9d0c06327abd33e12e2a2242bb7ea7310951 Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Wed, 20 Jun 2018 16:10:30 +0100 Subject: [PATCH 50/64] Add styleguide assets for checkboxes --- styleguide-app/Assets.elm | 8 ++++---- styleguide-app/assets/images/checkbox_checked.svg | 3 +++ .../assets/images/checkbox_checkedPartially.svg | 3 +++ styleguide-app/assets/images/checkbox_lock_on_inside.svg | 3 +++ styleguide-app/assets/images/checkbox_unchecked.svg | 3 +++ 5 files changed, 16 insertions(+), 4 deletions(-) create mode 100644 styleguide-app/assets/images/checkbox_checked.svg create mode 100644 styleguide-app/assets/images/checkbox_checkedPartially.svg create mode 100644 styleguide-app/assets/images/checkbox_lock_on_inside.svg create mode 100644 styleguide-app/assets/images/checkbox_unchecked.svg diff --git a/styleguide-app/Assets.elm b/styleguide-app/Assets.elm index 562ad7b6..19d2012c 100644 --- a/styleguide-app/Assets.elm +++ b/styleguide-app/Assets.elm @@ -94,10 +94,10 @@ assets = , attention_svg = Asset "assets/images/attention.svg" , bulb = "icon-bulb" , calendar = "icon-calendar" - , checkboxCheckedPartially_svg = Asset "TODO: add asset path" - , checkboxChecked_svg = Asset "TODO: add asset path" - , checkboxLockOnInside_svg = Asset "TODO: add asset path" - , checkboxUnchecked_svg = Asset "TODO: add asset path" + , checkboxCheckedPartially_svg = Asset "assets/images/checkbox_checkedPartially.svg" + , checkboxChecked_svg = Asset "assets/images/checkbox_checked.svg" + , checkboxLockOnInside_svg = Asset "assets/images/checkbox_lock_on_inside.svg" + , checkboxUnchecked_svg = Asset "assets/images/checkbox_unchecked.svg" , checkmark = "icon-checkmark" , class = "icon-class" , clever = "icon-clever" diff --git a/styleguide-app/assets/images/checkbox_checked.svg b/styleguide-app/assets/images/checkbox_checked.svg new file mode 100644 index 00000000..04df2e5c --- /dev/null +++ b/styleguide-app/assets/images/checkbox_checked.svg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:915d0521f5bc23c22b393b71da2cd18503077fed13bec61822ce2900b96b0813 +size 2051 diff --git a/styleguide-app/assets/images/checkbox_checkedPartially.svg b/styleguide-app/assets/images/checkbox_checkedPartially.svg new file mode 100644 index 00000000..e068ab33 --- /dev/null +++ b/styleguide-app/assets/images/checkbox_checkedPartially.svg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4e5ceec4a07abd78ea907ec309cae33f146360d908c834b75c1b0e5fb28f5838 +size 3002 diff --git a/styleguide-app/assets/images/checkbox_lock_on_inside.svg b/styleguide-app/assets/images/checkbox_lock_on_inside.svg new file mode 100644 index 00000000..aa39eade --- /dev/null +++ b/styleguide-app/assets/images/checkbox_lock_on_inside.svg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d45df2ba55c45815fd7df437ec023b49542c46428548d344480c253abf5b2062 +size 4341 diff --git a/styleguide-app/assets/images/checkbox_unchecked.svg b/styleguide-app/assets/images/checkbox_unchecked.svg new file mode 100644 index 00000000..58c15399 --- /dev/null +++ b/styleguide-app/assets/images/checkbox_unchecked.svg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2e10d667be9d7f32ef27714c59a1743796872127eb33870075b013458e6c58c8 +size 1282 From 44d78aa962ccddaad69435b076da57087104ba4e Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Wed, 20 Jun 2018 16:13:08 +0100 Subject: [PATCH 51/64] Remove checkbox example that no longer makes sense --- styleguide-app/Examples/Checkbox.elm | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index 6b5df3ae..acb942ec 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/styleguide-app/Examples/Checkbox.elm @@ -39,7 +39,6 @@ example parentMessage state = [ viewInteractableCheckbox "styleguide-checkbox-interactable" state , viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state - , viewEditingCheckbox "styleguide-checkbox-is-editing" state , viewDisabledCheckbox "styleguide-checkbox-disabled" state , h3 [] [ text "Premium Checkboxes" ] , Control.view SetPremiumControl state.premiumControl @@ -142,20 +141,6 @@ viewLockedOnInsideCheckbox id state = } -viewEditingCheckbox : Id -> State -> Html Msg -viewEditingCheckbox id state = - Checkbox.viewWithLabel - assets - { identifier = id - , label = "This checkbox is for an editing state" - , setterMsg = ToggleCheck id - , selected = isSelected id state - , disabled = True - , theme = Checkbox.Square Checkbox.Gray - , noOpMsg = NoOp - } - - viewDisabledCheckbox : Id -> State -> Html Msg viewDisabledCheckbox id state = Checkbox.viewWithLabel @@ -164,7 +149,7 @@ viewDisabledCheckbox id state = , label = "Disabled theme" , setterMsg = ToggleCheck id , selected = isSelected id state - , disabled = False + , disabled = True , theme = Checkbox.Square Checkbox.Default , noOpMsg = NoOp } From 1451f84913f3653c809ed620d9da146d17473822 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 10:20:41 -0700 Subject: [PATCH 52/64] Elm-format v 0.7.0-exp --- src/Nri/Ui/PremiumCheckbox/V1.elm | 74 ++++++++++++++++--------------- 1 file changed, 39 insertions(+), 35 deletions(-) diff --git a/src/Nri/Ui/PremiumCheckbox/V1.elm b/src/Nri/Ui/PremiumCheckbox/V1.elm index de901205..6158ee6b 100644 --- a/src/Nri/Ui/PremiumCheckbox/V1.elm +++ b/src/Nri/Ui/PremiumCheckbox/V1.elm @@ -1,6 +1,9 @@ module Nri.Ui.PremiumCheckbox.V1 exposing (PremiumConfig, premium) -{-| @docs PremiumConfig, premium +{-| + +@docs PremiumConfig, premium + -} import Accessibility.Styled as Html @@ -17,6 +20,7 @@ import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) - `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 @@ -54,41 +58,41 @@ premium assets config = else Checkbox.Square Checkbox.Default in - Html.span [] - [ Checkbox.viewWithLabel assets - { identifier = config.id - , label = config.label - , setterMsg = - if isLocked then - \_ -> config.onLockedClick - else - config.onChange - , selected = config.selected - , disabled = config.disabled - , theme = theme - , noOpMsg = config.noOpMsg - } - , if - (isLocked && config.showFlagWhenLocked) - || (not isLocked && config.contentPremiumLevel /= Free) - then - Html.div - [ Attributes.class "checkbox-PremiumClass" - , css - [ property "content" "''" - , display inlineBlock - , width (px 26) - , height (px 24) - , marginLeft (px 8) - , backgroundImage assets.iconPremiumFlag_svg - , backgroundRepeat noRepeat - , backgroundPosition Css.center - ] + Html.span [] + [ Checkbox.viewWithLabel assets + { identifier = config.id + , label = config.label + , setterMsg = + if isLocked then + \_ -> config.onLockedClick + else + config.onChange + , selected = config.selected + , disabled = config.disabled + , theme = theme + , noOpMsg = config.noOpMsg + } + , if + (isLocked && config.showFlagWhenLocked) + || (not isLocked && config.contentPremiumLevel /= Free) + then + Html.div + [ Attributes.class "checkbox-PremiumClass" + , css + [ property "content" "''" + , display inlineBlock + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage assets.iconPremiumFlag_svg + , backgroundRepeat noRepeat + , backgroundPosition Css.center ] - [] - else - Html.text "" - ] + ] + [] + else + Html.text "" + ] {-| The assets used in this module. From e74646e9b51c7f5cb99b27dae11ce03da7def91c Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 10:31:04 -0700 Subject: [PATCH 53/64] Remove minheight that messed up the text alignment --- src/Nri/Ui/Checkbox/V3.elm | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 91a3e69d..fb9a5238 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -110,7 +110,6 @@ buildCheckbox assets modifierClasses model labelContent = cursor pointer , Fonts.baseFont , fontSize (px 16) - , minHeight (px 42) -- container height , outline none , padding2 (px 13) zero , paddingLeft (px (29 + 6)) -- checkbox width + padding @@ -152,7 +151,6 @@ buildCheckbox assets modifierClasses model labelContent = cursor pointer , Fonts.baseFont , fontSize (px 16) - , minHeight (px 42) -- container height , outline none , padding2 (px 13) zero , paddingLeft (px 35) From 40391a3e43e914385b31d18d27410a4bcc76c8af Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 10:37:02 -0700 Subject: [PATCH 54/64] Add the premium flag (and put it in line with its checkbox) --- src/Nri/Ui/PremiumCheckbox/V1.elm | 9 +++++++-- styleguide-app/Assets.elm | 2 +- styleguide-app/assets/images/icon_premium_flag.svg | 3 +++ 3 files changed, 11 insertions(+), 3 deletions(-) create mode 100644 styleguide-app/assets/images/icon_premium_flag.svg diff --git a/src/Nri/Ui/PremiumCheckbox/V1.elm b/src/Nri/Ui/PremiumCheckbox/V1.elm index 6158ee6b..8ff3de08 100644 --- a/src/Nri/Ui/PremiumCheckbox/V1.elm +++ b/src/Nri/Ui/PremiumCheckbox/V1.elm @@ -58,7 +58,12 @@ premium assets config = else Checkbox.Square Checkbox.Default in - Html.span [] + Html.div + [ css + [ displayFlex + , alignItems center + ] + ] [ Checkbox.viewWithLabel assets { identifier = config.id , label = config.label @@ -86,7 +91,7 @@ premium assets config = , marginLeft (px 8) , backgroundImage assets.iconPremiumFlag_svg , backgroundRepeat noRepeat - , backgroundPosition Css.center + , backgroundPosition center ] ] [] diff --git a/styleguide-app/Assets.elm b/styleguide-app/Assets.elm index 19d2012c..f2418af9 100644 --- a/styleguide-app/Assets.elm +++ b/styleguide-app/Assets.elm @@ -121,7 +121,7 @@ assets = , iconCalendar_svg = Asset "assets/images/icon-calendar.svg" , iconCheck_png = Asset "assets/images/icon-check.png" , iconFlag_png = Asset "assets/images/icon-flag.png" - , iconPremiumFlag_svg = Asset "TODO: add asset path" + , iconPremiumFlag_svg = Asset "assets/images/icon_premium_flag.svg" , icons_arrowDownBlue_svg = Asset "assets/images/arrow-down-blue.svg" , icons_arrowRightBlue_svg = Asset "assets/images/arrow-right-blue.svg" , icons_clockRed_svg = Asset "assets/images/clock-red.svg" diff --git a/styleguide-app/assets/images/icon_premium_flag.svg b/styleguide-app/assets/images/icon_premium_flag.svg new file mode 100644 index 00000000..031e291b --- /dev/null +++ b/styleguide-app/assets/images/icon_premium_flag.svg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3bcb4a83ca4e7c4739748a81d5f56fbedf9d9925fe1db8e9fe2e4312c3fa21d2 +size 1069 From 26e8c67834c07f526c5bb89728e23a1a404ba7d7 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 10:45:54 -0700 Subject: [PATCH 55/64] :art: pull out the other label styles helpers --- src/Nri/Ui/Checkbox/V3.elm | 225 ++++++++++++++++++++----------------- 1 file changed, 121 insertions(+), 104 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index fb9a5238..c4b331a4 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -60,6 +60,19 @@ type IsSelected | PartiallySelected +{-| -} +type Theme + = Square ColorTheme + | LockOnInside + | Premium + + +{-| -} +type ColorTheme + = Default + | Gray + + selectedToMaybe : IsSelected -> Maybe Bool selectedToMaybe selected = case selected of @@ -100,64 +113,14 @@ buildCheckbox assets modifierClasses model labelContent = case model.theme of Square colorTheme -> { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) - , labelStyles = - css - [ backgroundRepeat noRepeat - , color Colors.gray20 - , if model.disabled then - cursor auto - else - cursor pointer - , Fonts.baseFont - , fontSize (px 16) - , outline none - , padding2 (px 13) zero - , paddingLeft (px (29 + 6)) -- checkbox width + padding - , property "background-position" "left center" - , verticalAlign middle - , display inlineBlock - , case model.selected of - Selected -> - backgroundImage assets.checkboxChecked_svg - - NotSelected -> - backgroundImage assets.checkboxUnchecked_svg - - PartiallySelected -> - backgroundImage assets.checkboxCheckedPartially_svg - , Css.batch <| - case colorTheme of - Gray -> - [ color Colors.gray45 ] - - Default -> - [] - ] + , labelStyles = squareLabelStyles assets model colorTheme , labelClasses = labelClass model.selected , labelContent = labelContent } LockOnInside -> { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) - , labelStyles = - css - [ backgroundImage assets.checkboxLockOnInside_svg - , backgroundRepeat noRepeat - , backgroundSize (px 24) - , color Colors.gray20 - , if model.disabled then - cursor auto - else - cursor pointer - , Fonts.baseFont - , fontSize (px 16) - , outline none - , padding2 (px 13) zero - , paddingLeft (px 35) - , property "background-position" "left center" - , verticalAlign middle - , display inlineBlock - ] + , labelStyles = lockLabelStyles assets.checkboxLockOnInside_svg model , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -170,6 +133,112 @@ buildCheckbox assets modifierClasses model labelContent = } +squareLabelStyles assets model colorTheme = + css + [ backgroundRepeat noRepeat + , color Colors.gray20 + , if model.disabled then + cursor auto + else + cursor pointer + , Fonts.baseFont + , fontSize (px 16) + , outline none + , padding2 (px 13) zero + , paddingLeft (px (29 + 6)) -- checkbox width + padding + , property "background-position" "left center" + , verticalAlign middle + , display inlineBlock + , case model.selected of + Selected -> + backgroundImage assets.checkboxChecked_svg + + NotSelected -> + backgroundImage assets.checkboxUnchecked_svg + + PartiallySelected -> + backgroundImage assets.checkboxCheckedPartially_svg + , Css.batch <| + case colorTheme of + Gray -> + [ color Colors.gray45 ] + + Default -> + [] + ] + + +lockLabelStyles image model = + let + baseStyles = + [ -- Positioning + display inlineBlock + , padding2 (px 13) zero + , paddingLeft (px 35) + , verticalAlign middle + + -- Text + , color Colors.gray20 + , Fonts.baseFont + , fontSize (px 16) + + -- Focus & Hover + , outline none + + -- Icon + , backgroundImage image + , backgroundRepeat noRepeat + , backgroundSize (px 24) + , property "background-position" "left center" + ] + in + css + (if model.disabled then + [ cursor auto ] ++ baseStyles + else + [ cursor pointer ] ++ baseStyles + ) + + +premiumLabelStyles : + Asset + -> { a | disabled : Bool } + -> Html.Styled.Attribute msg +premiumLabelStyles image model = + let + baseStyles = + [ -- Positioning + alignItems center + , displayFlex + + -- Focus & Hover + , cursor pointer + , outline none + + -- Icon + , icon + ] + + icon = + after + [ property "content" "''" + , display inlineBlock + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage image + , backgroundRepeat noRepeat + , backgroundPosition Css.center + ] + in + css + (if model.disabled then + opacity (num 0.4) :: baseStyles + else + baseStyles + ) + + labelClass : IsSelected -> Html.Styled.Attribute msg labelClass isSelected = case isSelected of @@ -258,58 +327,6 @@ viewLabel model content class theme = [ content ] -premiumLabelStyles : - Asset - -> { a | disabled : Bool } - -> Html.Styled.Attribute msg -premiumLabelStyles image model = - let - baseStyles = - [ -- Positioning - alignItems center - , displayFlex - - -- Focus & Hover - , cursor pointer - , outline none - - -- Icon - , icon - ] - - icon = - after - [ property "content" "''" - , display inlineBlock - , width (px 26) - , height (px 24) - , marginLeft (px 8) - , backgroundImage image - , backgroundRepeat noRepeat - , backgroundPosition Css.center - ] - in - css - (if model.disabled then - opacity (num 0.4) :: baseStyles - else - baseStyles - ) - - -{-| -} -type Theme - = Square ColorTheme - | LockOnInside - | Premium - - -{-| -} -type ColorTheme - = Default - | Gray - - {-| The assets used in this module. -} type alias Assets r = From 24f8d71c240fd2ce8054a4e9fd1cd394cd9e618e Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 10:47:55 -0700 Subject: [PATCH 56/64] :art: begin refactoring the square styles --- src/Nri/Ui/Checkbox/V3.elm | 73 ++++++++++++++++++++++---------------- 1 file changed, 42 insertions(+), 31 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index c4b331a4..dd81ab80 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -134,38 +134,49 @@ buildCheckbox assets modifierClasses model labelContent = squareLabelStyles assets model colorTheme = + let + baseStyles = + [ -- Postioning + display inlineBlock + , padding2 (px 13) zero + , paddingLeft (px (29 + 6)) -- checkbox width + padding + , verticalAlign middle + + -- Text + , color Colors.gray20 + , Fonts.baseFont + , fontSize (px 16) + , Css.batch <| + case colorTheme of + Gray -> + [ color Colors.gray45 ] + + Default -> + [] + + -- Focus & Hover + , outline none + + -- Icon + , backgroundRepeat noRepeat + , property "background-position" "left center" + , case model.selected of + Selected -> + backgroundImage assets.checkboxChecked_svg + + NotSelected -> + backgroundImage assets.checkboxUnchecked_svg + + PartiallySelected -> + backgroundImage assets.checkboxCheckedPartially_svg + ] + in css - [ backgroundRepeat noRepeat - , color Colors.gray20 - , if model.disabled then - cursor auto - else - cursor pointer - , Fonts.baseFont - , fontSize (px 16) - , outline none - , padding2 (px 13) zero - , paddingLeft (px (29 + 6)) -- checkbox width + padding - , property "background-position" "left center" - , verticalAlign middle - , display inlineBlock - , case model.selected of - Selected -> - backgroundImage assets.checkboxChecked_svg - - NotSelected -> - backgroundImage assets.checkboxUnchecked_svg - - PartiallySelected -> - backgroundImage assets.checkboxCheckedPartially_svg - , Css.batch <| - case colorTheme of - Gray -> - [ color Colors.gray45 ] - - Default -> - [] - ] + (if model.disabled then + [ cursor auto ] ++ baseStyles + else + [ cursor pointer ] ++ baseStyles + ) lockLabelStyles image model = From de58de8734dde0c625f11e4e6d16ad199e2ae4ca Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 10:48:46 -0700 Subject: [PATCH 57/64] :art: avoid overwriting themes --- src/Nri/Ui/Checkbox/V3.elm | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index dd81ab80..c4479e57 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -143,16 +143,16 @@ squareLabelStyles assets model colorTheme = , verticalAlign middle -- Text - , color Colors.gray20 , Fonts.baseFont , fontSize (px 16) , Css.batch <| + -- If this is the only difference, is it worth having a color theme at all?? case colorTheme of Gray -> [ color Colors.gray45 ] Default -> - [] + [ color Colors.gray20 ] -- Focus & Hover , outline none From 7c6466054911d06d948fc4e1b2acb0887e2d5d93 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 10:50:12 -0700 Subject: [PATCH 58/64] Opacify the disabled checkboxes --- src/Nri/Ui/Checkbox/V3.elm | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index c4479e57..1e546654 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -173,7 +173,7 @@ squareLabelStyles assets model colorTheme = in css (if model.disabled then - [ cursor auto ] ++ baseStyles + [ cursor auto, opacity (num 0.4) ] ++ baseStyles else [ cursor pointer ] ++ baseStyles ) @@ -205,7 +205,7 @@ lockLabelStyles image model = in css (if model.disabled then - [ cursor auto ] ++ baseStyles + [ cursor auto, opacity (num 0.4) ] ++ baseStyles else [ cursor pointer ] ++ baseStyles ) From 534fade431994c1cea4d53a8442e71250433dab6 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 10:52:02 -0700 Subject: [PATCH 59/64] Kill the color theme --- src/Nri/Ui/Checkbox/V3.elm | 27 ++++++--------------------- src/Nri/Ui/PremiumCheckbox/V1.elm | 2 +- styleguide-app/Examples/Checkbox.elm | 6 +++--- styleguide-app/Examples/TextArea.elm | 6 +++--- 4 files changed, 13 insertions(+), 28 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 1e546654..67ab1854 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -1,7 +1,6 @@ module Nri.Ui.Checkbox.V3 exposing - ( ColorTheme(..) - , IsSelected(..) + ( IsSelected(..) , Model , Theme(..) , view @@ -10,7 +9,7 @@ module Nri.Ui.Checkbox.V3 {-| -@docs Model, Theme, ColorTheme, IsSelected +@docs Model, Theme, IsSelected @docs view, viewWithLabel @@ -62,17 +61,11 @@ type IsSelected {-| -} type Theme - = Square ColorTheme + = Square | LockOnInside | Premium -{-| -} -type ColorTheme - = Default - | Gray - - selectedToMaybe : IsSelected -> Maybe Bool selectedToMaybe selected = case selected of @@ -111,9 +104,9 @@ buildCheckbox assets modifierClasses model labelContent = in viewCheckbox model <| case model.theme of - Square colorTheme -> + Square -> { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) - , labelStyles = squareLabelStyles assets model colorTheme + , labelStyles = squareLabelStyles assets model , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -133,7 +126,7 @@ buildCheckbox assets modifierClasses model labelContent = } -squareLabelStyles assets model colorTheme = +squareLabelStyles assets model = let baseStyles = [ -- Postioning @@ -145,14 +138,6 @@ squareLabelStyles assets model colorTheme = -- Text , Fonts.baseFont , fontSize (px 16) - , Css.batch <| - -- If this is the only difference, is it worth having a color theme at all?? - case colorTheme of - Gray -> - [ color Colors.gray45 ] - - Default -> - [ color Colors.gray20 ] -- Focus & Hover , outline none diff --git a/src/Nri/Ui/PremiumCheckbox/V1.elm b/src/Nri/Ui/PremiumCheckbox/V1.elm index 8ff3de08..84ed6f55 100644 --- a/src/Nri/Ui/PremiumCheckbox/V1.elm +++ b/src/Nri/Ui/PremiumCheckbox/V1.elm @@ -56,7 +56,7 @@ premium assets config = else if config.contentPremiumLevel /= Free then Checkbox.Premium else - Checkbox.Square Checkbox.Default + Checkbox.Square in Html.div [ css diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index acb942ec..82abb4b1 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/styleguide-app/Examples/Checkbox.elm @@ -108,7 +108,7 @@ viewInteractableCheckbox id state = , setterMsg = ToggleCheck id , selected = isSelected id state , disabled = False - , theme = Checkbox.Square Checkbox.Default + , theme = Checkbox.Square , noOpMsg = NoOp } @@ -122,7 +122,7 @@ viewIndeterminateCheckbox id state = , setterMsg = ToggleCheck id , selected = Checkbox.PartiallySelected , disabled = True - , theme = Checkbox.Square Checkbox.Default + , theme = Checkbox.Square , noOpMsg = NoOp } @@ -150,7 +150,7 @@ viewDisabledCheckbox id state = , setterMsg = ToggleCheck id , selected = isSelected id state , disabled = True - , theme = Checkbox.Square Checkbox.Default + , theme = Checkbox.Square , noOpMsg = NoOp } diff --git a/styleguide-app/Examples/TextArea.elm b/styleguide-app/Examples/TextArea.elm index b1184db5..58c20af5 100644 --- a/styleguide-app/Examples/TextArea.elm +++ b/styleguide-app/Examples/TextArea.elm @@ -49,7 +49,7 @@ example parentMessage state = , setterMsg = ToggleLabel , selected = state.showLabel , disabled = False - , theme = Checkbox.Square Checkbox.Default + , theme = Checkbox.Square , noOpMsg = NoOp } |> Html.Styled.toUnstyled @@ -59,7 +59,7 @@ example parentMessage state = , setterMsg = ToggleAutoResize , selected = state.autoResize , disabled = False - , theme = Checkbox.Square Checkbox.Default + , theme = Checkbox.Square , noOpMsg = NoOp } |> Html.Styled.toUnstyled @@ -69,7 +69,7 @@ example parentMessage state = , setterMsg = ToggleErrorState , selected = state.isInError , disabled = False - , theme = Checkbox.Square Checkbox.Default + , theme = Checkbox.Square , noOpMsg = NoOp } |> Html.Styled.toUnstyled From 20f5afb0ec1ca8a13f603d03ac5fcd1968eabb58 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 10:56:48 -0700 Subject: [PATCH 60/64] Remove premium theme -- this is mostly about the logic for when to show the flag off to the right, and now the PremiumCheckbox module handles that --- src/Nri/Ui/Checkbox/V3.elm | 47 ------------------------------- src/Nri/Ui/PremiumCheckbox/V1.elm | 14 ++++----- 2 files changed, 5 insertions(+), 56 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 67ab1854..6c84761e 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -63,7 +63,6 @@ type IsSelected type Theme = Square | LockOnInside - | Premium selectedToMaybe : IsSelected -> Maybe Bool @@ -118,13 +117,6 @@ buildCheckbox assets modifierClasses model labelContent = , labelContent = labelContent } - Premium -> - { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) - , labelStyles = premiumLabelStyles assets.checkboxLockOnInside_svg model - , labelClasses = labelClass model.selected - , labelContent = labelContent - } - squareLabelStyles assets model = let @@ -196,45 +188,6 @@ lockLabelStyles image model = ) -premiumLabelStyles : - Asset - -> { a | disabled : Bool } - -> Html.Styled.Attribute msg -premiumLabelStyles image model = - let - baseStyles = - [ -- Positioning - alignItems center - , displayFlex - - -- Focus & Hover - , cursor pointer - , outline none - - -- Icon - , icon - ] - - icon = - after - [ property "content" "''" - , display inlineBlock - , width (px 26) - , height (px 24) - , marginLeft (px 8) - , backgroundImage image - , backgroundRepeat noRepeat - , backgroundPosition Css.center - ] - in - css - (if model.disabled then - opacity (num 0.4) :: baseStyles - else - baseStyles - ) - - labelClass : IsSelected -> Html.Styled.Attribute msg labelClass isSelected = case isSelected of diff --git a/src/Nri/Ui/PremiumCheckbox/V1.elm b/src/Nri/Ui/PremiumCheckbox/V1.elm index 84ed6f55..83982593 100644 --- a/src/Nri/Ui/PremiumCheckbox/V1.elm +++ b/src/Nri/Ui/PremiumCheckbox/V1.elm @@ -49,14 +49,6 @@ premium assets config = PremiumLevel.allowedFor config.contentPremiumLevel config.teacherPremiumLevel - - theme = - if isLocked then - Checkbox.LockOnInside - else if config.contentPremiumLevel /= Free then - Checkbox.Premium - else - Checkbox.Square in Html.div [ css @@ -74,7 +66,11 @@ premium assets config = config.onChange , selected = config.selected , disabled = config.disabled - , theme = theme + , theme = + if isLocked then + Checkbox.LockOnInside + else + Checkbox.Square , noOpMsg = config.noOpMsg } , if From d72aaca7674906eaa0fc8dcb21203dde724581c2 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 12:48:49 -0700 Subject: [PATCH 61/64] Pass through the checkbox icon in --- src/Nri/Ui/Checkbox/V3.elm | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 6c84761e..220238f6 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -105,20 +105,31 @@ buildCheckbox assets modifierClasses model labelContent = case model.theme of Square -> { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) - , labelStyles = squareLabelStyles assets model + , 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 } LockOnInside -> { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) - , labelStyles = lockLabelStyles assets.checkboxLockOnInside_svg model + , labelStyles = lockLabelStyles model assets.checkboxLockOnInside_svg , labelClasses = labelClass model.selected , labelContent = labelContent } -squareLabelStyles assets model = +squareLabelStyles : { b | disabled : Bool } -> Asset -> Html.Styled.Attribute msg +squareLabelStyles model image = let baseStyles = [ -- Postioning @@ -137,15 +148,7 @@ squareLabelStyles assets model = -- Icon , backgroundRepeat noRepeat , property "background-position" "left center" - , case model.selected of - Selected -> - backgroundImage assets.checkboxChecked_svg - - NotSelected -> - backgroundImage assets.checkboxUnchecked_svg - - PartiallySelected -> - backgroundImage assets.checkboxCheckedPartially_svg + , backgroundImage image ] in css @@ -156,7 +159,8 @@ squareLabelStyles assets model = ) -lockLabelStyles image model = +lockLabelStyles : { b | disabled : Bool } -> Asset -> Html.Styled.Attribute msg +lockLabelStyles model image = let baseStyles = [ -- Positioning From 661251f4d84c62694a5a5736f4d6f51413d2f1bc Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 12:56:56 -0700 Subject: [PATCH 62/64] Add helpers for the shared styles --- src/Nri/Ui/Checkbox/V3.elm | 69 +++++++++++++++++++------------------- 1 file changed, 34 insertions(+), 35 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index 220238f6..bfd006c9 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -28,7 +28,6 @@ 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.V2 as HtmlExtra @@ -132,23 +131,10 @@ squareLabelStyles : { b | disabled : Bool } -> Asset -> Html.Styled.Attribute ms squareLabelStyles model image = let baseStyles = - [ -- Postioning - display inlineBlock - , padding2 (px 13) zero - , paddingLeft (px (29 + 6)) -- checkbox width + padding - , verticalAlign middle - - -- Text - , Fonts.baseFont - , fontSize (px 16) - - -- Focus & Hover + [ positioning + , textStyle , outline none - - -- Icon - , backgroundRepeat noRepeat - , property "background-position" "left center" - , backgroundImage image + , addIcon image ] in css @@ -163,25 +149,10 @@ lockLabelStyles : { b | disabled : Bool } -> Asset -> Html.Styled.Attribute msg lockLabelStyles model image = let baseStyles = - [ -- Positioning - display inlineBlock - , padding2 (px 13) zero - , paddingLeft (px 35) - , verticalAlign middle - - -- Text - , color Colors.gray20 - , Fonts.baseFont - , fontSize (px 16) - - -- Focus & Hover + [ positioning + , textStyle , outline none - - -- Icon - , backgroundImage image - , backgroundRepeat noRepeat - , backgroundSize (px 24) - , property "background-position" "left center" + , addIcon image ] in css @@ -192,6 +163,34 @@ lockLabelStyles model image = ) +positioning : Style +positioning = + batch + [ display inlineBlock + , padding2 (px 13) zero + , paddingLeft (px (29 + 6)) -- checkbox width + padding + , verticalAlign middle + ] + + +textStyle : Style +textStyle = + batch + [ Fonts.baseFont + , fontSize (px 16) + ] + + +addIcon : Asset -> Style +addIcon icon = + batch + [ backgroundImage icon + , backgroundRepeat noRepeat + , backgroundSize (px 24) + , property "background-position" "left center" + ] + + labelClass : IsSelected -> Html.Styled.Attribute msg labelClass isSelected = case isSelected of From 6095ad6a3b776d6f3a269736f34f49a2376f3a85 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 12:57:57 -0700 Subject: [PATCH 63/64] :art: condense padding styles --- src/Nri/Ui/Checkbox/V3.elm | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index bfd006c9..18c052ce 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -167,8 +167,7 @@ positioning : Style positioning = batch [ display inlineBlock - , padding2 (px 13) zero - , paddingLeft (px (29 + 6)) -- checkbox width + padding + , padding4 (px 13) zero (px 13) (px 35) , verticalAlign middle ] From 0a03d4d0e17153ea2c74c96cbed81d0ee10d0545 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jun 2018 13:15:33 -0700 Subject: [PATCH 64/64] elm-format 0.7.0-exp --- styleguide-app/NriModules.elm | 46 +++++++++++++++++------------------ 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm index d5010db2..29de79ae 100644 --- a/styleguide-app/NriModules.elm +++ b/styleguide-app/NriModules.elm @@ -76,77 +76,77 @@ update msg moduleStates = ( buttonExampleState, cmd ) = Examples.Button.update msg moduleStates.buttonExampleState in - ( { moduleStates | buttonExampleState = buttonExampleState } - , Cmd.map ButtonExampleMsg cmd - ) + ( { moduleStates | buttonExampleState = buttonExampleState } + , Cmd.map ButtonExampleMsg cmd + ) CheckboxExampleMsg msg -> let ( checkboxExampleState, cmd ) = Examples.Checkbox.update msg moduleStates.checkboxExampleState in - ( { moduleStates | checkboxExampleState = checkboxExampleState }, Cmd.map CheckboxExampleMsg cmd ) + ( { moduleStates | checkboxExampleState = checkboxExampleState }, Cmd.map CheckboxExampleMsg cmd ) DropdownMsg msg -> let ( dropdownState, cmd ) = Examples.Dropdown.update msg moduleStates.dropdownState in - ( { moduleStates | dropdownState = dropdownState } - , Cmd.map DropdownMsg cmd - ) + ( { moduleStates | dropdownState = dropdownState } + , Cmd.map DropdownMsg cmd + ) SegmentedControlMsg msg -> let ( segmentedControlState, cmd ) = Examples.SegmentedControl.update msg moduleStates.segmentedControlState in - ( { moduleStates | segmentedControlState = segmentedControlState } - , Cmd.map SegmentedControlMsg cmd - ) + ( { moduleStates | segmentedControlState = segmentedControlState } + , Cmd.map SegmentedControlMsg cmd + ) SelectMsg msg -> let ( selectState, cmd ) = Examples.Select.update msg moduleStates.selectState in - ( { moduleStates | selectState = selectState } - , Cmd.map SelectMsg cmd - ) + ( { moduleStates | selectState = selectState } + , Cmd.map SelectMsg cmd + ) ShowItWorked group message -> let _ = Debug.log group message in - ( moduleStates, Cmd.none ) + ( moduleStates, Cmd.none ) TableExampleMsg msg -> let ( tableExampleState, cmd ) = Examples.Table.update msg moduleStates.tableExampleState in - ( { moduleStates | tableExampleState = tableExampleState } - , Cmd.map TableExampleMsg cmd - ) + ( { moduleStates | tableExampleState = tableExampleState } + , Cmd.map TableExampleMsg cmd + ) TextAreaExampleMsg msg -> let ( textAreaExampleState, cmd ) = TextAreaExample.update msg moduleStates.textAreaExampleState in - ( { moduleStates | textAreaExampleState = textAreaExampleState } - , Cmd.map TextAreaExampleMsg cmd - ) + ( { moduleStates | textAreaExampleState = textAreaExampleState } + , Cmd.map TextAreaExampleMsg cmd + ) TextInputExampleMsg msg -> let ( textInputExampleState, cmd ) = TextInputExample.update msg moduleStates.textInputExampleState in - ( { moduleStates | textInputExampleState = textInputExampleState } - , Cmd.map TextInputExampleMsg cmd - ) + ( { moduleStates | textInputExampleState = textInputExampleState } + , Cmd.map TextInputExampleMsg cmd + ) NoOp -> ( moduleStates, Cmd.none )