From 1647b2f358c38ff485d52636528cd76443a697d3 Mon Sep 17 00:00:00 2001
From: Hardy Jones <hardy@noredink.com>
Date: Wed, 18 Apr 2018 07:58:19 -0700
Subject: [PATCH] Make selects expand to the full width of parent

There are places where we need the select to be as wide as possible.
Since it seems like a sensible default to have all the selects expand,
we take that approach.

If we find out that this is harder, we can release use the old version.
---
 src/Nri/Ui/Select/V2.elm           | 111 +++++++++++++++++++++++++++++
 styleguide-app/Examples/Select.elm |   6 +-
 styleguide-app/NriModules.elm      |   4 +-
 3 files changed, 116 insertions(+), 5 deletions(-)
 create mode 100644 src/Nri/Ui/Select/V2.elm

diff --git a/src/Nri/Ui/Select/V2.elm b/src/Nri/Ui/Select/V2.elm
new file mode 100644
index 00000000..5c6f7d09
--- /dev/null
+++ b/src/Nri/Ui/Select/V2.elm
@@ -0,0 +1,111 @@
+module Nri.Ui.Select.V2
+    exposing
+        ( Config
+        , customView
+        , styles
+        , view
+        )
+
+{-| Build a select input.
+
+
+# Configure
+
+@docs Config
+
+
+# Render
+
+@docs view, customView
+@docs styles
+
+-}
+
+import Css
+import Css.Foreign
+import Dict
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+import Json.Decode exposing (Decoder, andThen, succeed)
+import Nri.Ui.Colors.V1
+import Nri.Ui.Styles.V1
+import Nri.Ui.Util
+
+
+{-| Select-specific Choice.Config
+-}
+type alias Config a =
+    { choices : List { label : String, value : a }
+    , current : a
+    }
+
+
+{-| TODO: move this to View.Extra
+-}
+niceId : String -> a -> String
+niceId prefix x =
+    prefix ++ "-" ++ Nri.Ui.Util.dashify (Nri.Ui.Util.removePunctuation (toString x))
+
+
+{-| A normal select dropdown
+-}
+view : Config a -> Html a
+view config =
+    customView [] config
+
+
+{-| A select dropdown with custom attributes.
+This should be phased out as the new Select style is implemented,
+all pages should use the new, consistent style.
+-}
+customView : List (Html.Attribute a) -> Config a -> Html a
+customView attributes config =
+    let
+        valueLookup =
+            -- TODO: probably worth using Lazy here, since choices won't change often
+            config.choices
+                |> List.map (\x -> ( niceId "nri-select" x.value, x.value ))
+                |> Dict.fromList
+
+        decodeValue string =
+            Dict.get string valueLookup
+                |> Maybe.map Json.Decode.succeed
+                |> Maybe.withDefault (Json.Decode.fail ("Nri.Select: could not decode the value: " ++ toString string ++ "\nexpected one of: " ++ toString (Dict.keys valueLookup)))
+
+        onSelectHandler =
+            on "change" (targetValue |> andThen decodeValue)
+
+        viewChoice choice =
+            Html.option
+                [ Html.Attributes.id (niceId "nri-select" choice.value)
+                , Html.Attributes.value (niceId "nri-select" choice.value)
+                , Html.Attributes.selected (choice.value == config.current)
+                ]
+                [ Html.text choice.label ]
+    in
+    config.choices
+        |> List.map viewChoice
+        |> Html.select (styles.class [ Select ] :: onSelectHandler :: attributes)
+
+
+{-| -}
+type CssClasses
+    = Select
+
+
+{-| -}
+styles : Nri.Ui.Styles.V1.Styles Never CssClasses c
+styles =
+    Nri.Ui.Styles.V1.styles "Nri-Ui-Select-V2-"
+        [ Css.Foreign.class Select
+            [ Css.backgroundColor Nri.Ui.Colors.V1.white
+            , Css.border3 (Css.px 1) Css.solid Nri.Ui.Colors.V1.gray75
+            , Css.borderRadius (Css.px 8)
+            , Css.color Nri.Ui.Colors.V1.gray20
+            , Css.cursor Css.pointer
+            , Css.fontSize (Css.px 15)
+            , Css.height (Css.px 45)
+            , Css.width (Css.pct 100)
+            ]
+        ]
diff --git a/styleguide-app/Examples/Select.elm b/styleguide-app/Examples/Select.elm
index c6109598..fd0436d9 100644
--- a/styleguide-app/Examples/Select.elm
+++ b/styleguide-app/Examples/Select.elm
@@ -21,7 +21,7 @@ module Examples.Select
 
 import Html
 import ModuleExample exposing (Category(..), ModuleExample)
-import Nri.Ui.Select.V1
+import Nri.Ui.Select.V2
 
 
 {-| -}
@@ -36,7 +36,7 @@ type Msg
 
 {-| -}
 type alias State value =
-    Nri.Ui.Select.V1.Config value
+    Nri.Ui.Select.V2.Config value
 
 
 {-| -}
@@ -45,7 +45,7 @@ example parentMessage state =
     { filename = "ui/src/Nri/Select.elm"
     , category = Inputs
     , content =
-        [ Html.map (parentMessage << ConsoleLog) (Nri.Ui.Select.V1.view state)
+        [ Html.map (parentMessage << ConsoleLog) (Nri.Ui.Select.V2.view state)
         ]
     }
 
diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm
index 3c9cdeef..f65125d2 100644
--- a/styleguide-app/NriModules.elm
+++ b/styleguide-app/NriModules.elm
@@ -19,7 +19,7 @@ import Nri.Ui.AssetPath as AssetPath exposing (Asset(Asset))
 import Nri.Ui.Dropdown.V1
 import Nri.Ui.Icon.V2
 import Nri.Ui.SegmentedControl.V5
-import Nri.Ui.Select.V1
+import Nri.Ui.Select.V2
 import Nri.Ui.Text.V1 as Text
 import Nri.Ui.TextArea.V1 as TextArea
 import String.Extra
@@ -159,7 +159,7 @@ styles =
         , (Nri.Ui.Dropdown.V1.styles |> .css) ()
         , (Nri.Ui.Icon.V2.styles |> .css) ()
         , (Nri.Ui.SegmentedControl.V5.styles |> .css) ()
-        , (Nri.Ui.Select.V1.styles |> .css) ()
+        , (Nri.Ui.Select.V2.styles |> .css) ()
         , (Text.styles |> .css) ()
         , (TextArea.styles |> .css) assets
         ]