Merge branch 'master' into recurse-styleguide-sources

elm-package.json

@@ -1,5 +1,5 @@
 {
-    "version": "4.12.0",
+    "version": "4.13.0",
     "summary": "UI Widgets we use at NRI",
     "repository": "https://github.com/NoRedInk/noredink-ui.git",
     "license": "BSD3",
@@ -34,6 +34,7 @@
         "Nri.Ui.Select.V2",
         "Nri.Ui.Styles.V1",
         "Nri.Ui.Table.V1",
+        "Nri.Ui.Table.V2",
         "Nri.Ui.Tabs.V1",
         "Nri.Ui.Text.Writing.V1",
         "Nri.Ui.Text.V1",

src/Nri/Ui/Table/V2.elm

@@ -0,0 +1,290 @@
+module Nri.Ui.Table.V2
+    exposing
+        ( Column
+        , custom
+        , keyframeStyles
+        , keyframes
+        , string
+        , view
+        , viewLoading
+        , viewLoadingWithoutHeader
+        , viewWithoutHeader
+        )
+
+{-| Upgrading from V1:
+
+  - All the `width` fields in column configurations now take an elm-css length
+    value rather than an Integer. Change `width = 100` to `width = px 100` to get
+    the same widths as before.
+  - Tables now by default take the full width of the container they are placed in.
+    If this is not what you want, wrap the table in an element with a fixed width.
+  - The table module now makes use of `Html.Styled` and no longer exposes a
+    separate `styles` value.
+    Check out the [elm-css](http://package.elm-lang.org/packages/rtfeldman/elm-css/14.0.0/Html-Styled)
+    documentation on Html.Styled to see how to work with it.
+  - The default cell padding has been removed and content is not vertically
+    centered in its cell. If you need to overwrite this, wrap your cells in
+    elements providing custom styling to the cell.
+
+@docs Column, custom, string
+
+@docs view, viewWithoutHeader
+
+@docs viewLoading, viewLoadingWithoutHeader
+
+@docs keyframes, keyframeStyles
+
+-}
+
+import Css exposing (..)
+import Html.Styled as Html exposing (..)
+import Html.Styled.Attributes exposing (css)
+import Nri.Ui.Colors.V1 exposing (..)
+import Nri.Ui.Fonts.V1 exposing (baseFont)
+import Nri.Ui.Styles.V1
+
+
+{-| Closed representation of how to render the header and cells of a column
+in the table
+-}
+type Column data msg
+    = Column (Html msg) (data -> Html msg) Style
+
+
+{-| A column that renders some aspect of a value as text
+-}
+string :
+    { header : String
+    , value : data -> String
+    , width : LengthOrAuto compatible
+    }
+    -> Column data msg
+string { header, value, width } =
+    Column (Html.text header) (value >> Html.text) (Css.width width)
+
+
+{-| A column that renders however you want it to
+-}
+custom :
+    { header : Html msg
+    , view : data -> Html msg
+    , width : LengthOrAuto compatible
+    }
+    -> Column data msg
+custom { header, view, width } =
+    Column header view (Css.width width)
+
+
+
+-- VIEW
+
+
+{-| Displays a table of data without a header row
+-}
+viewWithoutHeader : List (Column data msg) -> List data -> Html msg
+viewWithoutHeader columns data =
+    table [] <|
+        List.map (viewRow columns) data
+
+
+{-| Displays a table of data based on the provided column definitions
+-}
+view : List (Column data msg) -> List data -> Html msg
+view columns data =
+    tableWithHeader [] columns <|
+        List.map (viewRow columns) data
+
+
+viewHeaders : List (Column data msg) -> Html msg
+viewHeaders columns =
+    tr
+        [ css headersStyles ]
+        (List.map viewRowHeader columns)
+
+
+viewRowHeader : Column data msg -> Html msg
+viewRowHeader (Column header _ width) =
+    th
+        [ css (width :: headerStyles)
+        ]
+        [ header ]
+
+
+viewRow : List (Column data msg) -> data -> Html msg
+viewRow columns data =
+    tr
+        [ css rowStyles ]
+        (List.map (viewColumn data) columns)
+
+
+viewColumn : data -> Column data msg -> Html msg
+viewColumn data (Column _ renderer width) =
+    td
+        [ css (width :: cellStyles)
+        ]
+        [ renderer data ]
+
+
+
+-- VIEW LOADING
+
+
+{-| Display a table with the given columns but instead of data, show blocked
+out text with an interesting animation. This view lets the user know that
+data is on its way and what it will look like when it arrives.
+-}
+viewLoading : List (Column data msg) -> Html msg
+viewLoading columns =
+    tableWithHeader loadingTableStyles columns <|
+        List.map (viewLoadingRow columns) (List.range 0 8)
+
+
+{-| Display the loading table without a header row
+-}
+viewLoadingWithoutHeader : List (Column data msg) -> Html msg
+viewLoadingWithoutHeader columns =
+    table loadingTableStyles <|
+        List.map (viewLoadingRow columns) (List.range 0 8)
+
+
+viewLoadingRow : List (Column data msg) -> Int -> Html msg
+viewLoadingRow columns index =
+    tr
+        [ css rowStyles ]
+        (List.indexedMap (viewLoadingColumn index) columns)
+
+
+viewLoadingColumn : Int -> Int -> Column data msg -> Html msg
+viewLoadingColumn rowIndex colIndex (Column _ _ width) =
+    td
+        [ css (stylesLoadingColumn rowIndex colIndex width ++ cellStyles ++ loadingCellStyles)
+        ]
+        [ span [ css loadingContentStyles ] [] ]
+
+
+stylesLoadingColumn : Int -> Int -> Style -> List Style
+stylesLoadingColumn rowIndex colIndex width =
+    [ width
+    , property "animation-delay" (toString (toFloat (rowIndex + colIndex) * 0.1) ++ "s")
+    ]
+
+
+
+-- HELP
+
+
+table : List Style -> List (Html msg) -> Html msg
+table styles =
+    Html.table [ css (styles ++ tableStyles) ]
+
+
+tableWithHeader : List Style -> List (Column data msg) -> List (Html msg) -> Html msg
+tableWithHeader styles columns rows =
+    table styles (viewHeaders columns :: rows)
+
+
+
+-- STYLES
+
+
+headersStyles : List Style
+headersStyles =
+    [ borderBottom3 (px 3) solid gray75
+    , height (px 45)
+    , fontSize (px 15)
+    ]
+
+
+headerStyles : List Style
+headerStyles =
+    [ padding4 (px 15) (px 12) (px 11) (px 12)
+    , textAlign left
+    , fontWeight bold
+    ]
+
+
+rowStyles : List Style
+rowStyles =
+    [ height (px 45)
+    , fontSize (px 14)
+    , color gray45
+    , pseudoClass "nth-child(odd)"
+        [ backgroundColor gray96 ]
+    ]
+
+
+cellStyles : List Style
+cellStyles =
+    [ verticalAlign middle
+    ]
+
+
+loadingContentStyles : List Style
+loadingContentStyles =
+    [ width (pct 100)
+    , display inlineBlock
+    , height (Css.em 1)
+    , borderRadius (Css.em 1)
+    , backgroundColor gray75
+    ]
+
+
+loadingCellStyles : List Style
+loadingCellStyles =
+    [ batch flashAnimation
+    , padding2 (px 14) (px 10)
+    ]
+
+
+loadingTableStyles : List Style
+loadingTableStyles =
+    fadeInAnimation
+
+
+tableStyles : List Style
+tableStyles =
+    [ borderCollapse collapse
+    , baseFont
+    , Css.width (Css.pct 100)
+    ]
+
+
+{-| -}
+keyframes : List Nri.Ui.Styles.V1.Keyframe
+keyframes =
+    [ Nri.Ui.Styles.V1.keyframes "Nri-Ui-Table-V2-flash"
+        [ ( "0%", "opacity: 0.6" )
+        , ( "50%", "opacity: 0.2" )
+        , ( "100%", "opacity: 0.6" )
+        ]
+    , Nri.Ui.Styles.V1.keyframes "Nri-Ui-Table-V2-fadein"
+        [ ( "from", "opacity: 0" )
+        , ( "to", "opacity: 1" )
+        ]
+    ]
+
+
+{-| -}
+keyframeStyles : Html msg
+keyframeStyles =
+    Html.node "style"
+        []
+        (List.map (Html.text << Nri.Ui.Styles.V1.toString) keyframes)
+
+
+flashAnimation : List Css.Style
+flashAnimation =
+    [ property "-webkit-animation" "Nri-Ui-Table-V2-flash 2s infinite"
+    , property "-moz-animation" "Nri-Ui-Table-V2-flash 2s infinite"
+    , property "animation" "Nri-Ui-Table-V2-flash 2s infinite"
+    , opacity (num 0.6)
+    ]
+
+
+fadeInAnimation : List Css.Style
+fadeInAnimation =
+    [ property "-webkit-animation" "Nri-Ui-Table-V2-fadein 0.4s 0.2s forwards"
+    , property "-moz-animation" "Nri-Ui-Table-V2-fadein 0.4s 0.2s forwards"
+    , property "animation" "Nri-Ui-Table-V2-fadein 0.4s 0.2s forwards"
+    , opacity (num 0)
+    ]

styleguide-app/Examples/Table.elm

@@ -4,10 +4,12 @@ module Examples.Table exposing (Msg, State, example, init, update)
    @docs Msg, State, example, init, update
 -}
 
+import Css exposing (..)
 import Html
+import Html.Styled
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
 import Nri.Ui.Button.V2 as Button
-import Nri.Ui.Table.V1 as Table
+import Nri.Ui.Table.V2 as Table
 
 
 {-| -}
@@ -31,16 +33,18 @@ example parentMessage state =
                 [ Table.string
                     { header = "First Name"
                     , value = .firstName
-                    , width = 125
+                    , width = calc (pct 50) minus (px 125)
                     }
                 , Table.string
                     { header = "Last Name"
                     , value = .lastName
-                    , width = 125
+                    , width = calc (pct 50) minus (px 125)
                     }
                 , Table.custom
-                    { header = Html.text "Actions"
-                    , width = 150
+                    { header =
+                        Html.text "Actions"
+                            |> Html.Styled.fromUnstyled
+                    , width = px 250
                     , view =
                         \_ ->
                             Button.button
@@ -53,6 +57,7 @@ example parentMessage state =
                                 , state = Button.Enabled
                                 , icon = Nothing
                                 }
+                                |> Html.Styled.fromUnstyled
                     }
                 ]
 
@@ -64,15 +69,19 @@ example parentMessage state =
                 , { firstName = "First5", lastName = "Last5" }
                 ]
         in
-        [ Table.keyframeStyles
+        [ Html.Styled.toUnstyled Table.keyframeStyles
         , Html.h4 [] [ Html.text "With header" ]
         , Table.view columns data
+            |> Html.Styled.toUnstyled
         , Html.h4 [] [ Html.text "Without header" ]
         , Table.viewWithoutHeader columns data
+            |> Html.Styled.toUnstyled
         , Html.h4 [] [ Html.text "Loading" ]
         , Table.viewLoading columns
+            |> Html.Styled.toUnstyled
         , Html.h4 [] [ Html.text "Loading without header" ]
         , Table.viewLoadingWithoutHeader columns
+            |> Html.Styled.toUnstyled
         ]
             |> List.map (Html.map parentMessage)
     }

styleguide-app/NriModules.elm

@@ -22,7 +22,6 @@ import Nri.Ui.Dropdown.V1
 import Nri.Ui.Icon.V2
 import Nri.Ui.SegmentedControl.V5
 import Nri.Ui.Select.V2
-import Nri.Ui.Table.V1 as Table
 import Nri.Ui.Text.V1 as Text
 import Nri.Ui.TextArea.V1 as TextArea
 import String.Extra
@@ -190,7 +189,6 @@ styles =
         , (Nri.Ui.Icon.V2.styles |> .css) ()
         , (Nri.Ui.SegmentedControl.V5.styles |> .css) ()
         , (Nri.Ui.Select.V2.styles |> .css) ()
-        , (Table.styles |> .css) ()
         , (Text.styles |> .css) ()
         , (TextArea.styles |> .css) assets
         ]