Bring Select back

src/Yoga/Block/Atom/Select.purs

@@ -0,0 +1,6 @@
+module Yoga.Block.Atom.Select
+  ( module Yoga.Block.Atom.Select.View
+  ) where
+
+import Yoga.Block.Atom.Select.View
+

src/Yoga/Block/Atom/Select/Style.purs

@@ -0,0 +1,51 @@
+module Yoga.Block.Atom.Select.Style where
+
+import Yoga.Prelude.Style
+
+import React.Basic.DOM.SVG as SVG
+
+container ∷ Style
+container =
+  width' auto
+    <> flexRow
+    <> itemsCenter
+    <> positionRelative
+    <> borderSolid
+    <> roundedMd
+    <> textSm
+    <> css { borderWidth: str "1.5px" }
+    <> borderCol' (col.inputBorder)
+    <> background' (col.inputBackground)
+    <> textCol' col.text
+    <> focusWithin (borderCol' col.highlight)
+
+select ∷ Style
+select =
+  css { appearance: none }
+    <> pR 8
+    <> borderNone
+    <> widthFull
+    <> rounded (7 # px)
+    <> outlineNone
+    <> pY' sizeStyle.xxs
+    <> pL' sizeStyle.s
+    <> textDefault
+    <> svgBackgroundImage
+      ( SVG.svg
+          { viewBox: "0 0 24 24"
+          , xmlns: "http://www.w3.org/2000/svg"
+          , stroke: cssStringRGBA gray._400
+          , fill: "none"
+          , children:
+              [ SVG.path
+                  { strokeLinecap: "round"
+                  , strokeLinejoin: "round"
+                  , strokeWidth: "4"
+                  , d: "M19 9l-7 7-7-7"
+                  }
+              ]
+          }
+      )
+    <> backgroundPosition ("right " <> size.s <> " center")
+    <> backgroundNoRepeat
+    <> backgroundSize "10px"

src/Yoga/Block/Atom/Select/View.purs

@@ -0,0 +1,34 @@
+module Yoga.Block.Atom.Select.View where
+
+import Yoga.Prelude.View
+
+import Effect.Unsafe (unsafePerformEffect)
+import Yoga.Block.Atom.Select.Style as Style
+import React.Basic.DOM as R
+import React.Basic.Hooks as React
+
+component ∷
+  ∀ a.
+  ReactComponent
+    ( { choice ∷ a
+      , choices ∷ Array a
+      , onChange ∷ Array a → Effect Unit
+      , toString ∷ a → String
+      , toValue ∷ a → String
+      }
+    )
+component = unsafePerformEffect do
+  React.reactComponent "Select" \{ toString, toValue, choices } → React.do
+    pure $
+      div "input-container" Style.container
+        [ R.select'
+            </*
+              { className: "select"
+              , role: "listbox"
+              , css: Style.select
+              }
+            />
+              ( choices <#> \c → R.option' </ { value: toValue c } />
+                  [ R.text $ toString c ]
+              )
+        ]

stories/Story/Yoga/Block/Atom/Select.purs

@@ -0,0 +1,44 @@
+module Story.Yoga.Block.Atom.Select where
+
+import Prelude
+
+import Effect (Effect)
+import Effect.Unsafe (unsafePerformEffect)
+import React.Basic (JSX, element, fragment)
+import React.Basic.DOM (css)
+import React.Basic.DOM as R
+import React.Basic.Emotion as E
+import Storybook.Addon.Actions (action)
+import Yoga.Block.Atom.Select as Select
+import Yoga.Block.Container.Style as Styles
+
+default ∷
+  { decorators ∷ Array (Effect JSX → JSX)
+  , title ∷ String
+  }
+default =
+  { title: "Atom/Select"
+  , decorators:
+      [ \storyFn →
+          R.div_
+            [ element E.global { styles: Styles.global }
+            , unsafePerformEffect storyFn
+            ]
+      ]
+  }
+
+select ∷ Effect JSX
+select =
+  pure
+    $ fragment
+        [ R.div_
+            [ R.h2_ [ R.text "Select" ]
+            , element Select.component
+                { choice: 1
+                , choices: [ 1, 2, 3 ]
+                , onChange: action "changed"
+                , toString: show
+                , toValue: show
+                }
+            ]
+        ]