noredink-ui/styleguide-app/View.elm

module View exposing (view)

import Browser exposing (Document)
import Css exposing (..)
import Html as RootHtml
import Html.Attributes
import Html.Styled as Html exposing (Html, img)
import Html.Styled.Attributes as Attributes exposing (..)
import Model exposing (..)
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample, categoryForDisplay, categoryForId)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Css.VendorPrefixed as VendorPrefixed
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Heading.V2 as Heading
import NriModules as NriModules exposing (nriThemedModules)
import Routes as Routes exposing (Route)
import Update exposing (..)


view : Model -> Document Msg
view model =
    { title = "Style Guide"
    , body = [ view_ model |> Html.toUnstyled ]
    }


view_ : Model -> Html Msg
view_ model =
    Html.styled Html.div
        [ displayFlex
        , alignItems flexStart
        , minHeight (vh 100)
        ]
        []
        [ navigation model.route
        , Html.styled Html.main_
            [ flexGrow (int 1) ]
            []
            (case model.route of
                Routes.Doodad doodad ->
                    [ Html.styled Html.section
                        [ sectionStyles ]
                        []
                        [ Heading.h2 [] [ Html.text ("Viewing " ++ doodad ++ " doodad only") ]
                        , nriThemedModules model.moduleStates
                            |> List.filter (\m -> m.name == doodad)
                            |> List.map (ModuleExample.view False)
                            |> Html.div []
                            |> Html.map UpdateModuleStates
                        ]
                    ]

                Routes.Category category ->
                    [ Html.styled Html.section
                        [ sectionStyles ]
                        []
                        [ Heading.h2 [] [ Html.text (categoryForDisplay category) ]
                        , nriThemedModules model.moduleStates
                            |> List.filter (\doodad -> category == doodad.category)
                            |> List.map (ModuleExample.view True)
                            |> Html.div [ id (categoryForId category) ]
                            |> Html.map UpdateModuleStates
                        ]
                    ]

                Routes.All ->
                    [ Html.styled Html.section
                        [ sectionStyles ]
                        []
                        [ Heading.h2 [] [ Html.text "All" ]
                        , nriThemedModules model.moduleStates
                            |> List.map (ModuleExample.view True)
                            |> Html.div []
                            |> Html.map UpdateModuleStates
                        ]
                    ]
            )
        ]


navigation : Route -> Html Msg
navigation route =
    let
        isActive category =
            case route of
                Routes.Category routeCategory ->
                    category == routeCategory

                _ ->
                    False

        categoryLink active hash displayName =
            Html.styled Html.a
                [ backgroundColor transparent
                , borderStyle none
                , textDecoration none
                , if active then
                    color Colors.navy

                  else
                    color Colors.azure
                , Fonts.baseFont
                ]
                [ Attributes.href hash ]
                [ Html.text displayName ]

        navLink category =
            categoryLink (isActive category)
                ("#category/" ++ Debug.toString category)
                (categoryForDisplay category)

        toNavLi element =
            Html.li
                [ css
                    [ margin2 (px 10) zero
                    , listStyle none
                    , textDecoration none
                    ]
                ]
                [ element ]
    in
    Html.styled Html.nav
        [ flexBasis (px 200)
        , backgroundColor Colors.gray96
        , marginRight (px 40)
        , padding (px 25)
        , VendorPrefixed.value "position" "sticky"
        , top (px 150)
        , flexShrink zero
        ]
        [ id "categories"
        , attribute "aria-label" "Main Navigation"
        ]
        [ Heading.h4 [] [ Html.text "Categories" ]
        , (categoryLink (route == Routes.All) "#" "All"
            :: List.map
                navLink
                [ Animations
                , Buttons
                , Colors
                , Icons
                , Inputs
                , Layout
                , Modals
                , Pages
                , Tables
                , Text
                , Widgets
                , Messaging
                ]
          )
            |> List.map toNavLi
            |> Html.styled Html.ul
                [ margin4 zero zero (px 40) zero
                , padding zero
                ]
                []
        ]


sectionStyles : Css.Style
sectionStyles =
    Css.batch [ margin2 (px 40) zero ]