1
1
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-17 10:41:35 +03:00
noredink-ui/styleguide-app/View.elm

158 lines
4.7 KiB
Elm
Raw Normal View History

2018-02-13 00:32:38 +03:00
module View exposing (view)
import Browser exposing (Document)
2018-02-13 00:32:38 +03:00
import Css exposing (..)
import Headings
2019-03-28 20:23:37 +03:00
import Html as RootHtml
import Html.Attributes
import Html.Styled as Html exposing (Html, img)
import Html.Styled.Attributes as Attributes exposing (..)
2018-02-13 00:32:38 +03:00
import Model exposing (..)
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample, categoryForDisplay)
2018-03-17 03:16:16 +03:00
import Nri.Ui.Colors.V1 as Colors
2018-02-13 00:32:38 +03:00
import Nri.Ui.Css.VendorPrefixed as VendorPrefixed
2018-03-17 03:15:03 +03:00
import Nri.Ui.Fonts.V1 as Fonts
2018-02-13 00:32:38 +03:00
import NriModules as NriModules exposing (nriThemedModules)
import Routes as Routes exposing (Route)
import Update exposing (..)
view : Model -> Document Msg
2018-02-13 00:32:38 +03:00
view model =
2019-03-28 20:23:37 +03:00
{ title = "Style Guide"
2019-04-01 21:05:15 +03:00
, body = [ view_ model |> Html.toUnstyled ]
2019-03-28 20:23:37 +03:00
}
view_ : Model -> Html Msg
view_ model =
Html.styled Html.div
[ displayFlex
, alignItems flexStart
]
[]
[ navigation model.route
, Html.styled Html.div
[ flexGrow (int 1) ]
[]
(case model.route of
Routes.Doodad doodad ->
[ Headings.h2
[ Html.a [ Attributes.href "#" ] [ Html.text "(see all)" ] ]
, nriThemedModules model.moduleStates
2019-05-03 19:56:43 +03:00
|> List.filter (\m -> m.name == doodad)
|> List.map (ModuleExample.view True)
|> Html.div []
|> Html.map UpdateModuleStates
]
Routes.Category category ->
[ Html.styled Html.section
[ sectionStyles ]
[]
2019-05-03 19:48:32 +03:00
[ Headings.h2 [ Html.text (categoryForDisplay category) ]
2018-02-13 00:32:38 +03:00
, nriThemedModules model.moduleStates
|> List.filter (\doodad -> category == doodad.category)
2018-02-13 00:32:38 +03:00
|> List.map (ModuleExample.view True)
|> Html.div []
|> Html.map UpdateModuleStates
]
]
2018-02-13 00:32:38 +03:00
Routes.All ->
[ Html.styled Html.section
[ sectionStyles ]
[]
[ Headings.h2 [ Html.text "All" ]
, nriThemedModules model.moduleStates
|> List.map (ModuleExample.view True)
|> Html.div []
|> Html.map UpdateModuleStates
2018-02-13 00:32:38 +03:00
]
]
)
2018-02-13 00:32:38 +03:00
]
navigation : Route -> Html Msg
navigation route =
let
isActive category =
case route of
Routes.Category routeCategory ->
category == routeCategory
_ ->
False
2019-05-03 19:45:43 +03:00
categoryLink active hash displayName =
2019-05-03 19:39:59 +03:00
Html.styled Html.a
[ backgroundColor transparent
, borderStyle none
, textDecoration none
2019-05-03 19:45:43 +03:00
, if active then
2019-05-03 19:39:59 +03:00
color Colors.navy
else
color Colors.azure
2019-05-03 19:48:32 +03:00
, Fonts.baseFont
2019-05-03 19:39:59 +03:00
]
2019-05-03 19:45:43 +03:00
[ Attributes.href hash ]
[ Html.text displayName ]
navLink category =
categoryLink (isActive category)
("#category/" ++ Debug.toString category)
(categoryForDisplay category)
2019-05-03 19:39:59 +03:00
toNavLi element =
Html.li
[ css
[ margin2 (px 10) zero
, listStyle none
, textDecoration none
2018-02-13 00:32:38 +03:00
]
]
2019-05-03 19:39:59 +03:00
[ element ]
2018-02-13 00:32:38 +03:00
in
Html.styled Html.div
2019-05-03 19:39:59 +03:00
[ flexBasis (px 200)
, backgroundColor Colors.gray92
, marginRight (px 40)
, padding (px 25)
, VendorPrefixed.value "position" "sticky"
, top (px 150)
, flexShrink zero
]
[]
[ Headings.h4
2018-02-13 00:32:38 +03:00
[ Html.text "Categories" ]
2019-05-03 19:45:43 +03:00
, (categoryLink (route == Routes.All) "#" "All"
2019-05-03 19:39:59 +03:00
:: List.map
navLink
[ Messaging
, Animations
, Buttons
, Colors
, Pages
, Icons
, Inputs
, Modals
, Tables
, Text
, Widgets
]
2019-05-03 19:39:59 +03:00
)
|> List.map toNavLi
|> Html.styled Html.ul
[ margin4 zero zero (px 40) zero
, padding zero
2018-02-13 00:32:38 +03:00
]
2019-05-03 19:39:59 +03:00
[]
2018-02-13 00:32:38 +03:00
]
sectionStyles : Css.Style
sectionStyles =
Css.batch [ margin2 (px 40) zero ]