1
1
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-27 07:32:03 +03:00
noredink-ui/styleguide-app/Examples/Checkbox.elm

245 lines
7.2 KiB
Elm
Raw Normal View History

2020-03-31 22:43:32 +03:00
module Examples.Checkbox exposing (Msg, State, example)
2018-06-20 18:06:11 +03:00
{-|
2020-03-31 22:43:32 +03:00
@docs Msg, State, example
2018-06-20 18:06:11 +03:00
-}
import Category exposing (Category(..))
import Css
2020-03-31 23:20:03 +03:00
import Example exposing (Example)
2018-06-20 18:06:11 +03:00
import Html.Styled as Html exposing (..)
import Html.Styled.Attributes exposing (css)
import KeyboardSupport exposing (Direction(..), Key(..))
import Nri.Ui.Checkbox.V5 as Checkbox
2018-06-20 18:06:11 +03:00
import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..))
2019-07-18 00:31:56 +03:00
import Nri.Ui.PremiumCheckbox.V6 as PremiumCheckbox
2018-06-20 18:06:11 +03:00
import Set exposing (Set)
{-| -}
type Msg
= ToggleCheck Id Bool
| NoOp
{-| -}
type alias State =
{ isChecked : Set String
}
{-| -}
2020-03-31 23:20:03 +03:00
example : Example State Msg
2020-03-31 22:43:32 +03:00
example =
2020-09-09 21:43:10 +03:00
{ name = "Checkbox"
, version = 5
2020-03-31 22:43:32 +03:00
, state = init
, update = update
2020-03-31 22:48:26 +03:00
, subscriptions = \_ -> Sub.none
2021-11-05 21:19:08 +03:00
, preview = []
2020-03-31 22:43:32 +03:00
, view =
\state ->
[ viewInteractableCheckbox "styleguide-checkbox-interactable" state
, viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state
, viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state
, viewDisabledCheckbox "styleguide-checkbox-disabled" state
2020-11-16 15:46:43 +03:00
, viewMultilineCheckboxes state
2020-03-31 22:43:32 +03:00
, h3 [] [ text "Premium Checkboxes" ]
, viewPremiumCheckboxes state
]
, categories = [ Inputs ]
2020-11-14 01:53:01 +03:00
, keyboardSupport =
2020-11-16 22:38:04 +03:00
[ { keys = [ Space ]
2020-11-14 01:53:01 +03:00
, result = "Select or deselect the checkbox (may cause page scroll)"
}
]
2018-06-20 18:06:11 +03:00
}
{-| -}
init : State
init =
{ isChecked = Set.empty
}
{-| -}
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
2018-09-26 17:02:10 +03:00
2018-06-20 18:06:11 +03:00
else
Set.remove id state.isChecked
in
( { state | isChecked = isChecked }, Cmd.none )
NoOp ->
( state, Cmd.none )
-- INTERNAL
viewInteractableCheckbox : Id -> State -> Html Msg
viewInteractableCheckbox id state =
Checkbox.viewWithLabel
{ identifier = id
, label = "This is an interactable checkbox!"
, setterMsg = ToggleCheck id
, selected = isSelected id state
, disabled = False
2018-06-20 20:52:02 +03:00
, theme = Checkbox.Square
2018-06-20 18:06:11 +03:00
}
viewIndeterminateCheckbox : Id -> State -> Html Msg
viewIndeterminateCheckbox id state =
Checkbox.viewWithLabel
{ identifier = id
, label = "This Checkbox is set in an indeterminate state"
, setterMsg = ToggleCheck id
, selected = Checkbox.PartiallySelected
, disabled = True
2018-06-20 20:52:02 +03:00
, theme = Checkbox.Square
2018-06-20 18:06:11 +03:00
}
viewLockedOnInsideCheckbox : Id -> State -> Html Msg
viewLockedOnInsideCheckbox id state =
Checkbox.viewWithLabel
{ identifier = id
2018-06-26 19:36:43 +03:00
, label = "I'm a locked Checkbox"
2018-06-20 18:06:11 +03:00
, setterMsg = ToggleCheck id
, selected = Checkbox.NotSelected
, disabled = True
2018-06-26 19:36:43 +03:00
, theme = Checkbox.Locked
2018-06-20 18:06:11 +03:00
}
viewDisabledCheckbox : Id -> State -> Html Msg
viewDisabledCheckbox id state =
Checkbox.viewWithLabel
{ identifier = id
, label = "Disabled theme"
, setterMsg = ToggleCheck id
, selected = isSelected id state
, disabled = True
2018-06-20 20:52:02 +03:00
, theme = Checkbox.Square
2018-06-20 18:06:11 +03:00
}
2019-02-12 00:38:37 +03:00
2020-11-16 15:46:43 +03:00
viewMultilineCheckboxes : State -> Html Msg
viewMultilineCheckboxes state =
Html.section
[ css [ Css.width (Css.px 500) ] ]
[ Html.h3 [] [ Html.text "Multiline Text in Checkboxes" ]
2020-11-16 15:46:43 +03:00
, let
id =
"styleguide-checkbox-multiline"
in
Checkbox.viewWithLabel
{ identifier = id
, label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos."
2020-11-16 15:46:43 +03:00
, setterMsg = ToggleCheck id
, selected = isSelected id state
, disabled = False
, theme = Checkbox.Square
}
, Checkbox.viewWithLabel
2019-11-15 19:44:11 +03:00
{ identifier = "fake-partially-selected"
, label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos."
, setterMsg = ToggleCheck "fake"
, selected = Checkbox.PartiallySelected
, disabled = True
, theme = Checkbox.Square
}
, Checkbox.viewWithLabel
2019-11-15 19:44:11 +03:00
{ identifier = "fake-not-selected-locked"
, label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos."
, setterMsg = ToggleCheck "fake"
, selected = Checkbox.NotSelected
, disabled = True
, theme = Checkbox.Locked
}
, Checkbox.viewWithLabel
2019-11-15 19:44:11 +03:00
{ identifier = "fake-not-selected-square"
, label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos."
, setterMsg = ToggleCheck "fake"
, selected = Checkbox.NotSelected
, disabled = True
, theme = Checkbox.Square
}
]
2018-06-20 18:06:11 +03:00
viewPremiumCheckboxes : State -> Html Msg
viewPremiumCheckboxes state =
Html.div []
[ PremiumCheckbox.view
{ label = "Identify Adjectives 1 (Premium)"
, id = "premium-checkbox-identify-adjectives-premium"
, selected =
if Set.member "premium-1" state.isChecked then
Checkbox.Selected
else
Checkbox.NotSelected
2019-06-04 03:14:21 +03:00
, disabled = False
, isLocked = False
2019-07-18 00:31:56 +03:00
, isPremium = True
, onChange = ToggleCheck "premium-1"
, onLockedClick = NoOp
2019-06-04 03:14:21 +03:00
}
, PremiumCheckbox.view
2019-07-18 00:31:56 +03:00
{ label = "Identify Adjectives 2 (Free)"
, id = "premium-checkbox-identify-adjectives-free"
, selected =
if Set.member "premium-2" state.isChecked then
Checkbox.Selected
else
Checkbox.NotSelected
2019-06-04 03:14:21 +03:00
, disabled = False
2019-07-18 00:31:56 +03:00
, isLocked = False
, isPremium = False
, onChange = ToggleCheck "premium-2"
, onLockedClick = NoOp
2019-06-04 03:14:21 +03:00
}
, PremiumCheckbox.view
{ label = "Revising Wordy Phrases 3 (Premium, Disabled)"
, id = "premium-checkbox-premium-disabled"
, selected =
if Set.member "premium-3" state.isChecked then
Checkbox.Selected
else
Checkbox.NotSelected
2019-06-04 03:14:21 +03:00
, disabled = True
, isLocked = True
2019-07-18 00:31:56 +03:00
, isPremium = True
, onChange = ToggleCheck "premium-3"
, onLockedClick = NoOp
2019-06-04 03:14:21 +03:00
}
2018-06-20 18:06:11 +03:00
]
type alias Id =
String
isSelected : Id -> State -> Checkbox.IsSelected
isSelected id state =
if Set.member id state.isChecked then
Checkbox.Selected
2018-09-26 17:02:10 +03:00
2018-06-20 18:06:11 +03:00
else
Checkbox.NotSelected