noredink-ui/styleguide-app/ModuleExample.elm
Luke Westby c1ff19f0d0
Add Html.Styled versions for everything (#139)
* make html.styled versions of remaining widgets

* upgrade all the examples

* change license name
2018-10-23 09:55:30 -07:00

192 lines
3.5 KiB
Elm

module ModuleExample exposing
( Category(..)
, ModuleExample
, ModuleMessages
, categoryForDisplay
, categoryFromString
, view
)
import Css exposing (..)
import Html.Styled as Html exposing (Html, img)
import Html.Styled.Attributes as Attributes
import Nri.Ui.Colors.V1 exposing (..)
type alias ModuleExample msg =
{ filename : String
, content : List (Html msg)
, category : Category
}
{-| -}
type alias ModuleMessages moduleMsg parentMsg =
{ noOp : parentMsg
, showItWorked : String -> parentMsg
, wrapper : moduleMsg -> parentMsg
}
type Category
= Layout
| Inputs
| Buttons
| Icons
| Behaviors
| Messaging
| Modals
| Writing
| NotesToDeveloper
| Colors
| Text
| TextWriting
| Fonts
| DynamicSymbols
| Pages
| QuestionTypes
{-| Used for route changes
-}
categoryFromString : String -> Result String Category
categoryFromString string =
case string of
"Layout" ->
Ok Layout
"Inputs" ->
Ok Inputs
"Behaviors" ->
Ok Behaviors
"Buttons" ->
Ok Buttons
"Icons" ->
Ok Icons
"Messaging" ->
Ok Messaging
"Modals" ->
Ok Modals
"Writing" ->
Ok Writing
"NotesToDeveloper" ->
Ok NotesToDeveloper
"Colors" ->
Ok Colors
"Text" ->
Ok Text
"TextWriting" ->
Ok TextWriting
"Fonts" ->
Ok Fonts
"DynamicSymbols" ->
Ok DynamicSymbols
"Pages" ->
Ok Pages
"QuestionTypes" ->
Ok QuestionTypes
_ ->
Err "Invalid String"
categoryForDisplay : Category -> String
categoryForDisplay category =
case category of
Layout ->
"Layout"
Inputs ->
"Inputs"
Behaviors ->
"Behaviors"
Buttons ->
"Buttons"
Icons ->
"Icons"
Messaging ->
"Messaging"
Modals ->
"Modals"
Writing ->
"Writing"
NotesToDeveloper ->
"NotesToDeveloper"
Colors ->
"Colors"
Text ->
"Text"
TextWriting ->
"TextWriting"
Fonts ->
"Fonts"
DynamicSymbols ->
"Dynamic Symbols"
Pages ->
"Pages"
QuestionTypes ->
"Question types / Quiz UI"
view : Bool -> ModuleExample msg -> Html msg
view showFocusLink { filename, content } =
Html.div
[]
[ Html.styled Html.div
[ display block
, backgroundColor glacier
, padding (px 20)
, marginTop (px 20)
]
[]
[ Html.styled Html.h2
[ color gray20
, fontFamilies [ qt "Source Code Pro", "Consolas", "Courier", "monospace" ]
, fontSize (px 20)
]
[]
[ Html.text filename
, Html.text " "
, if showFocusLink then
Html.a
[ Attributes.href <| "#doodad/" ++ filename ]
[ Html.text "(see only this)" ]
else
Html.text ""
]
]
, Html.styled Html.div
[ padding2 (px 20) zero ]
[]
content
]