mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-27 13:02:42 +03:00
🎨 fold all the styleguide TEA components into one module
This commit is contained in:
Tessa Kelly
parent
21c0e639e8
commit
f4a37acf76
@ -1,13 +1,20 @@
|
||||
module Main exposing (init, main)
|
||||
|
||||
import Browser
|
||||
import Browser exposing (Document, UrlRequest(..))
|
||||
import Browser.Navigation exposing (Key)
|
||||
import Model exposing (..)
|
||||
import NriModules as NriModules
|
||||
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 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 (ModuleStates, nriThemedModules)
|
||||
import Routes as Routes exposing (Route(..))
|
||||
import Update exposing (Msg(..), subscriptions, update)
|
||||
import Url exposing (Url)
|
||||
import View exposing (view)
|
||||
|
||||
|
||||
main : Program () Model Msg
|
||||
@ -22,6 +29,14 @@ main =
|
||||
}
|
||||
|
||||
|
||||
type alias Model =
|
||||
{ -- Global UI
|
||||
route : Route
|
||||
, moduleStates : ModuleStates
|
||||
, navigationKey : Key
|
||||
}
|
||||
|
||||
|
||||
init : () -> Url -> Key -> ( Model, Cmd Msg )
|
||||
init () url key =
|
||||
( { route = Routes.fromLocation url
|
||||
@ -30,3 +45,188 @@ init () url key =
|
||||
}
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
|
||||
type Msg
|
||||
= UpdateModuleStates NriModules.Msg
|
||||
| OnUrlRequest Browser.UrlRequest
|
||||
| OnUrlChange Url
|
||||
| NoOp
|
||||
|
||||
|
||||
update : Msg -> Model -> ( Model, Cmd Msg )
|
||||
update action model =
|
||||
case action of
|
||||
UpdateModuleStates msg ->
|
||||
let
|
||||
( moduleStates, cmd ) =
|
||||
NriModules.update msg model.moduleStates
|
||||
in
|
||||
( { model | moduleStates = moduleStates }
|
||||
, Cmd.map UpdateModuleStates cmd
|
||||
)
|
||||
|
||||
OnUrlRequest request ->
|
||||
case request of
|
||||
Internal loc ->
|
||||
( model, Browser.Navigation.pushUrl model.navigationKey (Url.toString loc) )
|
||||
|
||||
External loc ->
|
||||
( model, Browser.Navigation.load loc )
|
||||
|
||||
OnUrlChange route ->
|
||||
( { model | route = Routes.fromLocation route }, Cmd.none )
|
||||
|
||||
NoOp ->
|
||||
( model, Cmd.none )
|
||||
|
||||
|
||||
subscriptions : Model -> Sub Msg
|
||||
subscriptions model =
|
||||
Sub.map UpdateModuleStates (NriModules.subscriptions model.moduleStates)
|
||||
|
||||
|
||||
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 ]
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
module Model exposing (Model)
|
||||
|
||||
import Browser.Navigation exposing (Key)
|
||||
import NriModules exposing (ModuleStates)
|
||||
import Routes exposing (Route)
|
||||
|
||||
|
||||
type alias Model =
|
||||
{ -- Global UI
|
||||
route : Route
|
||||
, moduleStates : ModuleStates
|
||||
, navigationKey : Key
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
module Update exposing (Msg(..), subscriptions, update)
|
||||
|
||||
import Browser exposing (UrlRequest(..))
|
||||
import Browser.Navigation
|
||||
import Model exposing (..)
|
||||
import NriModules as NriModules
|
||||
import Routes
|
||||
import Url exposing (Url)
|
||||
|
||||
|
||||
type Msg
|
||||
= UpdateModuleStates NriModules.Msg
|
||||
| OnUrlRequest Browser.UrlRequest
|
||||
| OnUrlChange Url
|
||||
| NoOp
|
||||
|
||||
|
||||
update : Msg -> Model -> ( Model, Cmd Msg )
|
||||
update action model =
|
||||
case action of
|
||||
UpdateModuleStates msg ->
|
||||
let
|
||||
( moduleStates, cmd ) =
|
||||
NriModules.update msg model.moduleStates
|
||||
in
|
||||
( { model | moduleStates = moduleStates }
|
||||
, Cmd.map UpdateModuleStates cmd
|
||||
)
|
||||
|
||||
OnUrlRequest request ->
|
||||
case request of
|
||||
Internal loc ->
|
||||
( model, Browser.Navigation.pushUrl model.navigationKey (Url.toString loc) )
|
||||
|
||||
External loc ->
|
||||
( model, Browser.Navigation.load loc )
|
||||
|
||||
OnUrlChange route ->
|
||||
( { model | route = Routes.fromLocation route }, Cmd.none )
|
||||
|
||||
NoOp ->
|
||||
( model, Cmd.none )
|
||||
|
||||
|
||||
subscriptions : Model -> Sub Msg
|
||||
subscriptions model =
|
||||
Sub.map UpdateModuleStates (NriModules.subscriptions model.moduleStates)
|
||||
@ -1,163 +0,0 @@
|
||||
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 ]
|
||||
Loading…
Reference in New Issue
Block a user