noredink-ui/styleguide-app/Examples/Container.elm

182 lines
5.6 KiB
Elm
Raw Normal View History

2021-10-13 20:44:03 +03:00
module Examples.Container exposing (Msg, State, example)
{-|
@docs Msg, State, example
-}
import Category exposing (Category(..))
2022-03-22 03:12:15 +03:00
import CommonControls
2021-10-13 20:44:03 +03:00
import Css
2021-10-22 01:36:55 +03:00
import Debug.Control as Control exposing (Control)
2021-10-22 03:20:29 +03:00
import Debug.Control.Extra as ControlExtra
2022-03-22 03:12:15 +03:00
import Debug.Control.View as ControlView
2021-10-13 20:44:03 +03:00
import Example exposing (Example)
import Html.Styled as Html exposing (Html)
2021-10-13 20:44:03 +03:00
import Html.Styled.Attributes exposing (css)
2021-10-21 22:17:48 +03:00
import Nri.Ui.Container.V2 as Container
2021-10-13 20:44:03 +03:00
import Nri.Ui.Heading.V2 as Heading
{-| -}
example : Example State Msg
example =
{ name = "Container"
2021-10-22 00:47:50 +03:00
, version = 2
2021-10-13 20:44:03 +03:00
, categories = [ Layout ]
, keyboardSupport = []
, state = init
, update = update
, subscriptions = \_ -> Sub.none
2021-11-05 22:35:01 +03:00
, preview =
[ Container.view []
, Container.view
[ Container.invalid
, Container.css [ Css.marginTop (Css.px 8) ]
]
, Container.view
[ Container.disabled
, Container.css [ Css.marginTop (Css.px 8) ]
]
]
2021-10-13 20:44:03 +03:00
, view =
\state ->
2021-10-22 01:36:55 +03:00
let
attributes =
2022-03-22 03:12:15 +03:00
List.map Tuple.second (Control.currentValue state.control)
2021-10-22 01:36:55 +03:00
in
2022-03-22 03:12:15 +03:00
[ ControlView.view
{ update = UpdateControl
, settings = state.control
, toExampleCode =
\settings ->
let
stringAttributes =
List.map Tuple.first settings
in
[ { sectionName = "Default Container"
, code = viewExampleCode stringAttributes
}
, { sectionName = "Gray Container"
, code = viewExampleCode ("Container.gray" :: stringAttributes)
}
, { sectionName = "Pillow Container"
, code = viewExampleCode ("Container.pillow" :: stringAttributes)
}
, { sectionName = "Buttony Container"
, code = viewExampleCode ("Container.buttony" :: stringAttributes)
}
, { sectionName = "Disabled Container"
, code = viewExampleCode ("Container.disabled" :: stringAttributes)
}
, { sectionName = "Invalid Container"
, code = viewExampleCode ("Container.invalid" :: stringAttributes)
}
]
}
, viewExample
{ name = "Default Container"
, description = "Your go-to container."
}
(Container.default :: attributes)
, viewExample
{ name = "Gray Container"
, description = "A container that doesnt draw too much attention to itself."
}
(Container.gray :: attributes)
, viewExample
{ name = "Pillow Container"
, description = "When you want something big and soft."
}
(Container.pillow :: attributes)
, viewExample
{ name = "Buttony Container"
, description = "Used for clickable button card things."
}
(Container.buttony :: attributes)
, viewExample
{ name = "Disabled Container"
, description = "Used to indicate content is locked/inaccessible"
}
(Container.disabled :: attributes)
, viewExample
{ name = "Invalid Container"
, description = "Used to indicate content is invalid"
}
(Container.invalid :: attributes)
2021-10-13 20:44:03 +03:00
]
}
viewExample : { name : String, description : String } -> List (Container.Attribute msg) -> Html msg
viewExample { name, description } attributes =
Html.section
[ css
[ Css.marginTop (Css.px 20)
]
]
[ Heading.h3 [] [ Html.text name ]
, Html.text description
, Container.view attributes
]
2022-03-22 03:12:15 +03:00
viewExampleCode : List String -> String
viewExampleCode attributes =
"Container.view\n [ "
++ String.join "\n , " attributes
++ "\n ]"
2021-10-22 01:36:55 +03:00
{-| -}
type alias State =
2022-03-22 03:12:15 +03:00
{ control : Control (List ( String, Container.Attribute Msg ))
2021-10-22 01:36:55 +03:00
}
2021-10-13 20:44:03 +03:00
{-| -}
init : State
init =
2021-10-22 01:36:55 +03:00
{ control =
2021-10-22 03:20:29 +03:00
ControlExtra.list
2021-10-22 03:27:29 +03:00
|> ControlExtra.optionalListItem "paddingPx" controlPaddingPx
2022-03-22 03:12:15 +03:00
|> CommonControls.css { moduleName = "Container", use = Container.css }
2021-10-22 03:20:29 +03:00
|> ControlExtra.listItem "content" controlContent
2021-10-22 01:36:55 +03:00
}
2021-10-13 20:44:03 +03:00
2022-03-22 03:12:15 +03:00
controlPaddingPx : Control ( String, Container.Attribute msg )
2021-10-22 03:27:29 +03:00
controlPaddingPx =
2022-03-22 03:12:15 +03:00
Control.map
(\val ->
( "Container.paddingPx " ++ String.fromFloat val
, Container.paddingPx val
)
2021-10-22 03:27:29 +03:00
)
2022-03-22 03:12:15 +03:00
(ControlExtra.float 20)
2022-03-22 03:12:15 +03:00
controlContent : Control ( String, Container.Attribute msg )
2021-10-22 01:36:55 +03:00
controlContent =
2022-03-22 03:12:15 +03:00
CommonControls.content
{ moduleName = "Container"
, plaintext = Container.plaintext
, markdown = Just Container.markdown
, html = Container.html
, httpError = Nothing
}
2021-10-13 20:44:03 +03:00
{-| -}
2021-10-22 01:36:55 +03:00
type Msg
2022-03-22 03:12:15 +03:00
= UpdateControl (Control (List ( String, Container.Attribute Msg )))
2021-10-13 20:44:03 +03:00
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
2021-10-22 01:36:55 +03:00
case msg of
UpdateControl newControl ->
( { state | control = newControl }, Cmd.none )