mc706 / elm-clarity-ui

Elm Package for Wrapping VM-Ware's Clarity UI

elm-clarity-ui

Elm Package for Wrapping VM-Ware's Clarity UI.

Getting Started

• Add mc706/elm-clarity-ui to your elm-package.json

module Main exposing (..)

import ClarityUI.CDN as CDN
import ClarityUI.Layout as Layout
import ClarityUI.Header as Header exposing (HeaderColor(..))
import ClarityUI.Subnav as Subnav
import ClarityUI.Sidenav as Sidenav exposing (NavItem(Link, Group))


view : Model -> Html Msg
view model =
    div []
        [ CDN.styles
        , CDN.icons
        , ClarityUI.Layout.layout
            { alerts = [ viewAlerts model ]
            , header = viewHeader model
            , subnav = [ viewSubnav model ]
            , sidenav = [ viewSidenav model ]
            , main = [ mainContent model ]
            }
        , CDN.iconsJS
        , CDN.iconsCEP
        ]


viewAlerts : Model -> Html Msg
viewAlerts model =
    div [] []


viewHeader : Model -> Html Msg
viewHeader model =
    Header.header
        HC6
        { branding = { icon = "vm-bug", title = "Elm Clarity UI" }
        , nav = []
        , search = []
        , actions = []
        }


viewSubnav : Model -> Html Msg
viewSubnav model =
    ClarityUI.Subnav.subnav
        [ { link = "#", text = "Example1" }
        , { link = "#", text = "Example2" }
        , { link = "#", text = "Example3" }
        , { link = "#", text = "Example4" }
        ]


mainContent : Model -> Html Msg
mainContent model =
    div [] []


viewSidenav : Model -> Html Msg
viewSidenav model =
    ClarityUI.Sidenav.sidenav
        [ Link { link = "#", text = "Nav Element 1" }
        , Link { link = "#", text = "Nav Element 2" }
        , Group
            { id = "tab1"
            , label = "Collapsible Nav Element"
            , collapsible = True
            , navList =
                [ { link = "#", text = "Link 1" }
                , { link = "#", text = "Link 2" }
                ]
            }
        , Group
            { id = "tab2"
            , label = "Default Nav Element"
            , collapsible = False
            , navList =
                [ { link = "#", text = "Link 1" }
                , { link = "#", text = "Link 2" }
                , { link = "#", text = "Link 3" }
                , { link = "#", text = "Link 4" }
                , { link = "#", text = "Link 5" }
                , { link = "#", text = "Link 6" }
                ]
            }
        ]

Inspiration

Heavily influenced by elm-bootstrap and elm-mdl.

elm-clarity-ui's Issues

CDN

Impelement Clarity UI CDN the same as elm bootstrap

Cards

Implement Clarity UI Cards

Icon

Implement Clarity UI Icons

Lists

Implement Clarity UI Lists

Tooltips

Implement Clarity UI Tooltips

Progress Bars

Implement Clarity UI Progress Bars

Radio Buttons

Implement Clarity UI Radio Buttons

Include Build and Deploy Instructions

Differentiate between dev with elm reactor and deploying using webpack

Checkboxes

Implement Clarity UI Checkboxes

Tables

Implement Clarity UI Tables

Update Layout to Accept Empty Sections

Update Layout Module to accept empty components

Input Fields

Import Clarity UI Input Fields

Select Boxes

Implement Clarity UI Select Boxes

Spinners

Implement Clarity UI Spinners

Update Example Site

Buildout Example Site to show use of all of the pieces

Button Groups

Implement Clarity UI Button Groups

Buttons

Implement Clarity UI Buttons

Sidenav

Implement Clarity UI Sidenav

Tabs

Implement Clarity UI Tabs

Badges

Implement Clarity UI Badges

Header

Implement Clarity UI Header

Alerts

Implement Clarity UI Alerts

Dropdowns

Implement Clarity UI Dropdowns

Implement Responsive Layout

Implement the angular style responsive layout in elm

Modals

Implement Clarity UI Modals

Subnav

Implement Clarity UI Subnav

Layout

Implement Clarity UI Application Layout

Toggle Switches

Implement Clarity UI Toggle Switches

Color Pallete

Implement Clarity UI Color Pallete

Grid

Copy Over Elm Bootstrap Grid

Labels

Implement Clarity UI Labels