Merge pull request #896 from NoRedInk/tessalex/loading-preview

Tessalex/loading preview

src/Nri/Ui/SortableTable/V2.elm

@@ -5,7 +5,10 @@ module Nri.Ui.SortableTable.V2 exposing
     , invariantSort, simpleSort, combineSorters
     )
 
-{-|
+{-| TODO for next major version:
+
+  - make sure the "sort" feature is fully accessible
+  - use Nri.Ui.UiIcon.V1 sortArrow and Nri.Ui.UiIcon.V1 sortArrowDown icons for the sort indicators
 
 @docs Column, Config, Sorter, State
 @docs init, initDescending

src/Nri/Ui/UiIcon/V1.elm

@@ -1,5 +1,5 @@
 module Nri.Ui.UiIcon.V1 exposing
-    ( seeMore, openClose, download, sort, gear, flipper, sortArrow
+    ( seeMore, openClose, download, sort, gear, flipper
     , archive, unarchive
     , playInCircle, pauseInCircle, stopInCircle, skip
     , share, preview, copyToClipboard, gift
@@ -12,7 +12,7 @@ module Nri.Ui.UiIcon.V1 exposing
     , missingDocument, document, documents, newspaper, openBook, openBooks
     , edit, pen, highlighter
     , speechBalloon, mail
-    , arrowTop, arrowRight, arrowDown, arrowLeft, arrowPointingRight, arrowPointingRightThick
+    , arrowTop, arrowRight, arrowDown, arrowLeft, arrowPointingRight, arrowPointingRightThick, sortArrow, sortArrowDown
     , checkmark, checkmarkInCircle, x
     , attention, exclamation
     , flag, star, starFilled, starOutline
@@ -29,7 +29,7 @@ module Nri.Ui.UiIcon.V1 exposing
 
 {-| How to add new icons: <https://paper.dropbox.com/doc/How-to-create-a-new-SVG-icon-for-use-in-Elm--Ay9uhSLfGUAix0ERIiJ0Dm8dAg-8WNqtARdr4EgjmYEHPeYD>
 
-@docs seeMore, openClose, download, sort, gear, flipper, sortArrow
+@docs seeMore, openClose, download, sort, gear, flipper
 @docs archive, unarchive
 @docs playInCircle, pauseInCircle, stopInCircle, skip
 @docs share, preview, copyToClipboard, gift
@@ -42,7 +42,7 @@ module Nri.Ui.UiIcon.V1 exposing
 @docs missingDocument, document, documents, newspaper, openBook, openBooks
 @docs edit, pen, highlighter
 @docs speechBalloon, mail
-@docs arrowTop, arrowRight, arrowDown, arrowLeft, arrowPointingRight, arrowPointingRightThick
+@docs arrowTop, arrowRight, arrowDown, arrowLeft, arrowPointingRight, arrowPointingRightThick, sortArrow, sortArrowDown
 @docs checkmark, checkmarkInCircle, x
 @docs attention, exclamation
 @docs flag, star, starFilled, starOutline
@@ -641,16 +641,30 @@ arrowPointingRight =
         |> Nri.Ui.Svg.V1.fromHtml
 
 
-{-| -}
+sortArrow_ : List (Svg.Attribute msg) -> Svg.Svg msg
-sortArrow : Nri.Ui.Svg.V1.Svg
+sortArrow_ transforms =
-sortArrow =
     Svg.svg
-        [ Attributes.width "100%"
+        ([ Attributes.width "100%"
          , Attributes.height "100%"
          , Attributes.fill "currentcolor"
          , Attributes.viewBox "0 0 8 6"
          ]
+            ++ transforms
+        )
         [ Svg.polygon [ Attributes.points "0 6 4 0 8 6 0 6" ] [] ]
+
+
+{-| -}
+sortArrow : Nri.Ui.Svg.V1.Svg
+sortArrow =
+    sortArrow_ []
+        |> Nri.Ui.Svg.V1.fromHtml
+
+
+{-| -}
+sortArrowDown : Nri.Ui.Svg.V1.Svg
+sortArrowDown =
+    sortArrow_ [ Attributes.transform "rotate(180)" ]
         |> Nri.Ui.Svg.V1.fromHtml
 
 

styleguide-app/Examples/Loading.elm

@@ -91,7 +91,14 @@ example =
     , state = init
     , update = update
     , subscriptions = subscriptions
-    , preview = []
+    , preview =
+        [ Loading.spinningDots
+            |> Svg.withCss
+                [ Css.property "animation-name" "none" |> Css.important
+                , Css.alignSelf Css.center
+                ]
+            |> Svg.toHtml
+        ]
     , view =
         \ellieLinkConfig { showLoadingFadeIn, showLoading, showSpinners } ->
             [ if showLoading then

styleguide-app/Examples/SortableTable.elm

@@ -7,10 +7,16 @@ module Examples.SortableTable exposing (Msg, State, example)
 -}
 
 import Category exposing (Category(..))
+import Css exposing (..)
 import Example exposing (Example)
-import Html.Styled as Html
+import Html.Styled as Html exposing (..)
+import Html.Styled.Attributes exposing (css)
+import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.SortableTable.V2 as SortableTable
+import Nri.Ui.Svg.V1 as Svg exposing (Svg)
+import Nri.Ui.Table.V5 as Table
+import Nri.Ui.UiIcon.V1 as UiIcon
 
 
 type Column
@@ -39,7 +45,59 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        let
+            header name =
+                div
+                    [ css
+                        [ Css.displayFlex
+                        , Css.justifyContent Css.spaceBetween
+                        , Css.alignItems Css.center
+                        ]
+                    ]
+                    [ text name
+                    , div
+                        [ css
+                            [ Css.displayFlex
+                            , Css.flexDirection Css.column
+                            , Css.marginTop (Css.px -4)
+                            ]
+                        ]
+                        [ renderPreviewArrow UiIcon.sortArrow
+                        , renderPreviewArrow UiIcon.sortArrowDown
+                        ]
+                    ]
+
+            renderPreviewArrow : Svg -> Html msg
+            renderPreviewArrow arrow =
+                arrow
+                    |> Svg.withColor Colors.gray75
+                    |> Svg.withWidth (Css.px 12)
+                    |> Svg.withHeight (Css.px 12)
+                    |> Svg.toHtml
+        in
+        [ Table.view
+            [ Table.custom
+                { header = header "X"
+                , view = .x >> Html.text
+                , width = px 50
+                , cellStyles = always []
+                }
+            , Table.custom
+                { header = header "Y"
+                , view = .y >> Html.text
+                , width = px 50
+                , cellStyles = always []
+                }
+            ]
+            [ { x = "Row 1 X"
+              , y = "Row 1 Y"
+              }
+            , { x = "Row 2 X"
+              , y = "Row 2 Y"
+              }
+            ]
+        ]
     , view =
         \ellieLinkConfig { sortState } ->
             let

styleguide-app/Examples/TextArea.elm

@@ -7,11 +7,15 @@ module Examples.TextArea exposing (Msg, State, example)
 -}
 
 import Category exposing (Category(..))
+import Css
 import Dict exposing (Dict)
 import Example exposing (Example)
 import Html.Styled as Html
+import Html.Styled.Attributes as Attributes exposing (css)
 import Nri.Ui.Checkbox.V5 as Checkbox
+import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.InputStyles.V3 as InputStyles exposing (Theme(..))
 import Nri.Ui.TextArea.V4 as TextArea
 
 
@@ -42,7 +46,29 @@ example =
     , subscriptions = \_ -> Sub.none
     , categories = [ Inputs ]
     , keyboardSupport = []
-    , preview = []
+    , preview =
+        [ Html.div [ css [ Css.position Css.relative ] ]
+            [ Html.textarea
+                [ css
+                    [ InputStyles.input Standard False
+                    , Css.minHeight (Css.px 100)
+                    , Css.maxWidth (Css.px 140)
+                    , Css.backgroundColor Colors.white |> Css.important
+                    , Css.cursor Css.pointer |> Css.important
+                    , Css.resize Css.none
+                    ]
+                , Attributes.class "override-sass-styles"
+                , Attributes.disabled True
+                , Attributes.id "preview-textarea"
+                ]
+                []
+            , Html.label
+                [ css [ InputStyles.label Standard False ]
+                , Attributes.for "preview-textarea"
+                ]
+                [ Html.text "Label" ]
+            ]
+        ]
     , view =
         \ellieLinkConfig state ->
             [ Heading.h1 [] [ Html.text "Textarea controls" ]

styleguide-app/Examples/UiIcon.elm

@@ -60,7 +60,6 @@ example =
                 , ( "download", UiIcon.download )
                 , ( "sort", UiIcon.sort )
                 , ( "gear", UiIcon.gear )
-                , ( "sortArrow", UiIcon.sortArrow )
                 ]
             , viewExampleSection "Archive & Unarchive"
                 [ ( "archive", UiIcon.archive )
@@ -128,6 +127,8 @@ example =
                 , ( "arrowLeft", UiIcon.arrowLeft )
                 , ( "arrowPointingRight", UiIcon.arrowPointingRight )
                 , ( "arrowPointingRightThick", UiIcon.arrowPointingRightThick )
+                , ( "sortArrow", UiIcon.sortArrow )
+                , ( "sortArrowDown", UiIcon.sortArrowDown )
                 ]
             , viewExampleSection "Sticky things"
                 [ ( "checkmark", UiIcon.checkmark )