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

Merge pull request #84 from NoRedInk/ink__fix-checkbox

Browse Source 
Ink  fix checkbox
This commit is contained in:
Hardy Jones 2018-06-27 20:02:41 -07:00 committed by GitHub
commit aac1a7c472
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
elm-package.json
View File

@ -12,11 +12,11 @@
"Nri.Ui.BannerAlert.V1",
"Nri.Ui.Button.V1",
"Nri.Ui.Button.V2",
"Nri.Ui.Colors.V1",
"Nri.Ui.Colors.Extra",
"Nri.Ui.Checkbox.V1",
"Nri.Ui.Checkbox.V2",
"Nri.Ui.Checkbox.V3",
"Nri.Ui.Colors.Extra",
"Nri.Ui.Colors.V1",
"Nri.Ui.Divider.V1",
"Nri.Ui.Dropdown.V1",
"Nri.Ui.Effects.V1",
@ -29,6 +29,7 @@
"Nri.Ui.Outline.V1",
"Nri.Ui.Page.V1",
"Nri.Ui.Palette.V1",
"Nri.Ui.PremiumCheckbox.V1",
"Nri.Ui.SegmentedControl.V1",
"Nri.Ui.SegmentedControl.V2",
"Nri.Ui.SegmentedControl.V3",

36
src/Nri/Ui/Checkbox/V3.elm
View File

@ -81,7 +81,7 @@ selectedToMaybe selected =
-}
view : Assets a -> Model msg -> Html.Html msg
view assets model =
buildCheckbox assets [] model <|
buildCheckbox assets model <|
Html.span [ Accessibility.Styled.Style.invisible ]
[ Html.text model.label ]
@ -90,20 +90,16 @@ view assets model =
-}
viewWithLabel : Assets a -> Model msg -> Html.Html msg
viewWithLabel assets model =
buildCheckbox assets [] model <|
buildCheckbox assets model <|
Html.span [] [ Html.text model.label ]
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
in
buildCheckbox : Assets a -> Model msg -> Html.Html msg -> Html.Html msg
buildCheckbox assets model labelContent =
viewCheckbox model <|
case model.theme of
Square ->
{ containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ])
{ containerClasses = toClassList [ "SquareClass" ]
, labelStyles =
squareLabelStyles model <|
case model.selected of
@ -120,7 +116,7 @@ buildCheckbox assets modifierClasses model labelContent =
}
Locked ->
{ containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ])
{ containerClasses = toClassList [ "Locked" ]
, labelStyles = lockLabelStyles model assets.checkboxLockOnInside_svg
, labelClasses = labelClass model.selected
, labelContent = labelContent
@ -212,22 +208,18 @@ labelClass : IsSelected -> Html.Styled.Attribute msg
labelClass isSelected =
case isSelected of
Selected ->
Attributes.classList
[ ( "checkbox-Label", True )
, ( "checkbox-Checked", True )
]
toClassList [ "Label", "Checked" ]
NotSelected ->
Attributes.classList
[ ( "checkbox-Label", True )
, ( "checkbox-Unchecked", True )
]
toClassList [ "Label", "Unchecked" ]
PartiallySelected ->
Attributes.classList
[ ( "checkbox-Label", True )
, ( "checkbox-Indeterminate", True )
]
toClassList [ "Label", "Indeterminate" ]
toClassList : List String -> Html.Styled.Attribute msg
toClassList =
List.map (\a -> ( "checkbox-V3__" ++ a, True )) >> Attributes.classList
viewCheckbox :

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

@ -78,7 +78,7 @@ premium assets config =
|| (not isLocked && config.contentPremiumLevel /= Free)
then
Html.div
[ Attributes.class "checkbox-PremiumClass"
[ Attributes.class "premium-checkbox-V1__PremiumClass"
, css
[ property "content" "''"
, display inlineBlock

18
tests/Spec/Nri/Ui/PremiumCheckbox/V1.elm
View File

@ -52,7 +52,7 @@ spec =
, contentPremiumLevel = Free
, showFlagWhenLocked = True
}
|> Query.has [ Selector.class "checkbox-Checked" ]
|> Query.has [ Selector.class "checkbox-V3__Checked" ]
, test "appears unselected when NotSelected is passed in" <|
\() ->
premiumView
@ -63,7 +63,7 @@ spec =
, contentPremiumLevel = Free
, showFlagWhenLocked = True
}
|> Query.has [ Selector.class "checkbox-Unchecked" ]
|> Query.has [ Selector.class "checkbox-V3__Unchecked" ]
, test "appears partially selected when PartiallySelected is passed in" <|
\() ->
premiumView
@ -74,7 +74,7 @@ spec =
, contentPremiumLevel = Free
, showFlagWhenLocked = True
}
|> Query.has [ Selector.class "checkbox-Indeterminate" ]
|> Query.has [ Selector.class "checkbox-V3__Indeterminate" ]
, test "appears locked when teacherPremiumLevel < contentPremiumLevel" <|
\() ->
premiumView
@ -85,7 +85,7 @@ spec =
, contentPremiumLevel = Premium
, showFlagWhenLocked = True
}
|> Query.has [ Selector.class "checkbox-LockOnInsideClass" ]
|> Query.has [ Selector.class "checkbox-V3__Locked" ]
, test "appears unlocked when teacherPremiumLevel >= contentPremiumLevel" <|
\() ->
premiumView
@ -96,7 +96,7 @@ spec =
, contentPremiumLevel = Premium
, showFlagWhenLocked = True
}
|> Query.hasNot [ Selector.class "checkbox-LockOnInsideClass" ]
|> Query.hasNot [ Selector.class "checkbox-V3__Locked" ]
, test "appears with P flag when teacherPremiumLevel >= contentPremiumLevel" <|
\() ->
premiumView
@ -107,7 +107,7 @@ spec =
, contentPremiumLevel = Premium
, showFlagWhenLocked = False
}
|> Query.has [ Selector.class "checkbox-PremiumClass" ]
|> Query.has [ Selector.class "premium-checkbox-V1__PremiumClass" ]
, test "does not appear with P flag when teacherPremiumLevel < contentPremiumLevel and showFlagWhenLocked = False" <|
\() ->
premiumView
@ -118,7 +118,7 @@ spec =
, contentPremiumLevel = Premium
, showFlagWhenLocked = False
}
|> Query.hasNot [ Selector.class "checkbox-PremiumClass" ]
|> Query.hasNot [ Selector.class "premium-checkbox-V1__PremiumClass" ]
, test "appears with P flag for Premium content when teacherPremiumLevel < contentPremiumLevel and showFlagWhenLocked = True" <|
\() ->
premiumView
@ -129,7 +129,7 @@ spec =
, contentPremiumLevel = Premium
, showFlagWhenLocked = True
}
|> Query.has [ Selector.class "checkbox-PremiumClass" ]
|> Query.has [ Selector.class "premium-checkbox-V1__PremiumClass" ]
, test "never shows P flag for nonPremium content" <|
\() ->
premiumView
@ -140,7 +140,7 @@ spec =
, contentPremiumLevel = Free
, showFlagWhenLocked = True
}
|> Query.hasNot [ Selector.class "checkbox-PremiumClass" ]
|> Query.hasNot [ Selector.class "premium-checkbox-V1__PremiumClass" ]
, test "is not disabled when disabled = False and the checkbox is unlocked" <|
\() ->
premiumView