Initial Details/Accordion component (#36)

Author: maddie927

bower.json

@@ -42,6 +42,7 @@
     "purescript-js-timers": "^4.0.1",
     "purescript-heterogeneous": ">=0.3.0 <0.5.0",
     "purescript-free": "^5.1.0",
+    "purescript-react-basic-hooks": "^0.6.1",
     "purescript-colors": "^5.0.0"
   },
   "devDependencies": {

docs/App.jsx

@@ -57,6 +57,7 @@ const componentLoaders = [
   "CardGrid",
   "Color",
   "Column",
+  "Details",
   "Divider",
   "DropdownButton",
   "EditableTable",

docs/Examples/Details.example.purs

@@ -0,0 +1,52 @@
+module Lumi.Components.Examples.Details where
+
+import Prelude
+
+import Lumi.Components.Border (borderBottom, borderTop)
+import Lumi.Components.Column (column_)
+import Lumi.Components.Details (defaults, details)
+import Lumi.Components.Divider (divider_)
+import Lumi.Components.Example (example)
+import Lumi.Components.Icon as Icon
+import Lumi.Components.Row (row)
+import Lumi.Components.Spacing (Space(..), hspace, vspace)
+import Lumi.Components.Text (body_, h2_, subsectionHeader_)
+import React.Basic (JSX)
+import React.Basic.DOM as R
+
+docs :: JSX
+docs =
+  column_
+    [ h2_ "Bare/defaults"
+    , example $
+        details defaults
+          { expanded = body_ "Here's all the info"
+          }
+
+    , h2_ "Custom arrow"
+    , example $
+        details defaults
+          { summary = iconSummary $ subsectionHeader_ "Details"
+          , expanded = body_ "Here's all the info"
+          }
+
+    , h2_ "Accordion"
+    , example $
+        borderTop $ borderBottom $
+          details defaults
+            { summary = iconSummary $ subsectionHeader_ "Details"
+            , expanded =
+                column_
+                  [ vspace S8
+                  , divider_
+                  , vspace S8
+                  , body_ "Here's all the info"
+                  ]
+            }
+    ]
+  where
+    iconSummary child =
+      row
+        { style: R.css { alignItems: "center" }
+        , children: [ Icon.icon_ Icon.ArrowRight, hspace S8, child ]
+        }

src/Lumi/Components/Details.purs

@@ -0,0 +1,52 @@
+module Lumi.Components.Details where
+
+import Prelude
+
+import Effect.Unsafe (unsafePerformEffect)
+import JSS (JSS, jss)
+import Lumi.Components.Icon (icon_)
+import Lumi.Components.Text (body_)
+import React.Basic.DOM as R
+import React.Basic.Hooks (JSX, component, element)
+
+type DetailsProps =
+  { summary :: JSX
+  , expanded :: JSX
+  , defaultOpen :: Boolean
+  }
+
+details :: DetailsProps -> JSX
+details = element $ unsafePerformEffect do
+  component "Details" \props ->
+    pure $ R.details
+      { className: "lumi"
+      , children:
+          [ R.summary
+              { className: "lumi"
+              , children: [ props.summary ]
+              }
+          , props.expanded
+          ]
+      }
+
+defaults :: DetailsProps
+defaults =
+  { summary: body_ "Details"
+  , expanded: mempty
+  , defaultOpen: false
+  }
+
+styles :: JSS
+styles = jss
+  { "@global":
+      { "details.lumi":
+          { "& > summary.lumi":
+              { listStyle: "none"
+
+              , "&:focus":
+                  { outline: "none"
+                  }
+              }
+          }
+      }
+  }

src/Lumi/Components/Styles.purs

@@ -16,6 +16,7 @@ import Lumi.Components.Card as Card
 import Lumi.Components.CardGrid as CardGrid
 import Lumi.Components.Color (colors)
 import Lumi.Components.Column as Column
+import Lumi.Components.Details as Details
 import Lumi.Components.Divider as Divider
 import Lumi.Components.DropdownButton as DropdownButton
 import Lumi.Components.EditableTable as EditableTable
@@ -71,6 +72,7 @@ attachGlobalComponentStyles = do
     , Card.styles
     , CardGrid.styles
     , Column.styles
+    , Details.styles
     , Divider.styles
     , DropdownButton.styles
     , EditableTable.styles