diff --git a/styleguide-app/Examples/IconExamples.elm b/styleguide-app/Examples/IconExamples.elm index 8b2541e4..047e9144 100644 --- a/styleguide-app/Examples/IconExamples.elm +++ b/styleguide-app/Examples/IconExamples.elm @@ -1,15 +1,29 @@ -module Examples.IconExamples exposing (preview, view, viewWithCustomStyles) +module Examples.IconExamples exposing + ( preview + , viewSettings + , view, viewWithCustomStyles + ) + +{-| + +@docs preview +@docs viewSettings +@docs view, viewWithCustomStyles + +-} import Css import Css.Global import Html.Styled as Html exposing (Html) import Html.Styled.Attributes exposing (css) +import Nri.Ui.Checkbox.V5 as Checkbox import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Svg.V1 as Svg import Nri.Ui.Text.V6 as Text +{-| -} preview : List Svg.Svg -> List (Html msg) preview icons = [ Html.div @@ -27,6 +41,19 @@ preview icons = ] +{-| -} +viewSettings : (Bool -> msg) -> Bool -> Html msg +viewSettings toggle showIconName = + Checkbox.viewWithLabel + { identifier = "show-icon-name-checkbox" + , label = "Show names" + , setterMsg = toggle + , selected = Checkbox.selectedFromBool showIconName + , disabled = False + , theme = Checkbox.Square + } + + {-| -} view : Bool -> String -> List ( String, Svg.Svg ) -> Html msg view showIconName headerText icons = diff --git a/styleguide-app/Examples/UiIcon.elm b/styleguide-app/Examples/UiIcon.elm index 6caf9ed2..301d4ea4 100644 --- a/styleguide-app/Examples/UiIcon.elm +++ b/styleguide-app/Examples/UiIcon.elm @@ -12,16 +12,6 @@ import Examples.IconExamples as IconExamples import Nri.Ui.UiIcon.V1 as UiIcon -{-| -} -type alias State = - { showIconName : Bool } - - -{-| -} -type alias Msg = - () - - {-| -} example : Example State Msg example = @@ -30,7 +20,7 @@ example = , categories = List.singleton Icons , keyboardSupport = [] , state = { showIconName = False } - , update = \_ state -> ( state, Cmd.none ) + , update = update , subscriptions = \_ -> Sub.none , preview = IconExamples.preview @@ -53,7 +43,8 @@ example = viewExampleSection = IconExamples.view showIconName in - [ viewExampleSection "Interface" + [ IconExamples.viewSettings UpdateSettings showIconName + , viewExampleSection "Interface" [ ( "seeMore", UiIcon.seeMore ) , ( "openClose", UiIcon.openClose ) , ( "download", UiIcon.download ) @@ -185,3 +176,22 @@ example = ] ] } + + +{-| -} +type alias State = + { showIconName : Bool } + + +{-| -} +type Msg + = UpdateSettings Bool + + +update : Msg -> State -> ( State, Cmd Msg ) +update msg state = + case msg of + UpdateSettings showIconName -> + ( { state | showIconName = showIconName } + , Cmd.none + )