Add badge and flexDivider components (#78)

* Add badge component and use it inside tabs * Add flexDivider * Code review
purescript-react · Jul 31, 2019 · 5e148db · 5e148db
1 parent c369f56
commit 5e148db
Show file tree

Hide file tree

Showing 7 changed files with 178 additions and 26 deletions.
diff --git a/docs/App.jsx b/docs/App.jsx
@@ -48,6 +48,7 @@ const fromComponentPath = title => ({
 });
 
 const componentLoaders = [
+  "Badge",
   "Border",
   "Breadcrumb",
   "Button",

diff --git a/docs/Examples/Badge.example.purs b/docs/Examples/Badge.example.purs
@@ -0,0 +1,40 @@
+module Lumi.Components.Examples.Badge where
+
+import Lumi.Components.Badge (badge, badge_)
+import Lumi.Components.Color (colors)
+import Lumi.Components.Column (column_)
+import Lumi.Components.Spacing (Space(..), vspace)
+import Lumi.Components.Text (nbsp)
+import React.Basic (JSX)
+import React.Basic.DOM as R
+
+docs :: JSX
+docs =
+  column_
+    [ badge_ "1"
+    , vspace S8
+
+    , badge_ "2"
+    , vspace S8
+
+    , badge_ "3"
+    , vspace S8
+
+    , badge_ "Hello!"
+    , vspace S8
+
+    , badge
+        { background: colors.primary
+        , color: colors.white
+        , style: R.css {}
+        , text: "1"
+        }
+    , vspace S8
+
+    , badge
+        { background: colors.primary
+        , color: colors.white
+        , style: R.css {}
+        , text: nbsp
+        }
+    ]
diff --git a/docs/Examples/Divider.example.purs b/docs/Examples/Divider.example.purs
@@ -2,11 +2,12 @@ module Lumi.Components.Examples.Divider where
 
 import Prelude
 
-import Lumi.Components.Column (column_)
-import Lumi.Components.Divider (divider_)
+import Lumi.Components.Column (column, column_)
+import Lumi.Components.Divider (divider_, flexDivider_)
 import Lumi.Components.Example (example)
+import Lumi.Components.Row (row)
+import Lumi.Components.Text as T
 import React.Basic (Component, JSX, createComponent, makeStateless)
-import React.Basic.DOM (css)
 import React.Basic.DOM as R
 
 component :: Component Unit
@@ -15,11 +16,48 @@ component = createComponent "DividerExample"
 docs :: JSX
 docs = unit # makeStateless component render
   where
+    item t =
+      T.text T.body
+        { style = R.css { margin: "12px" }
+        , children = [ R.text t ]
+        }
+
     render _ =
       column_
-        [ example
-            $ R.div
-                { style: css { minWidth: 300 }
-                , children: [ divider_ ]
-                }
+        [ T.text T.p
+            { children =
+                [ R.code_ [ R.text "hr" ]
+                , R.text " based divider:"
+                ]
+            }
+        , example $
+            column
+              { style: R.css
+                  { minWidth: 300
+                  , alignItems: "center"
+                  }
+              , children:
+                  [ item "Lorem"
+                  , divider_
+                  , item "ipsum"
+                  ]
+              }
+
+       ,  T.p_ "Flexbox based divider:"
+        , example $
+            row
+              { style: R.css
+                  { minHeight: 200
+                  , alignItems: "center"
+                  }
+              , children:
+                  [ item "Lorem"
+                  , flexDivider_
+                  , column_
+                      [ item "ipsum"
+                      , flexDivider_
+                      , item "dolor"
+                      ]
+                  ]
+              }
         ]
diff --git a/src/Lumi/Components/Badge.purs b/src/Lumi/Components/Badge.purs
@@ -0,0 +1,58 @@
+module Lumi.Components.Badge where
+
+import Prelude
+
+import Color (cssStringHSLA)
+import JSS (JSS, jss)
+import Lumi.Components.Color (Color, colors)
+import Lumi.Components.Text (lumiSubtextFontSize)
+import React.Basic (JSX, element)
+import React.Basic.DOM as R
+
+type BadgeProps =
+  { background :: Color
+  , color :: Color
+  , style :: R.CSS
+  , text :: String
+  }
+
+badge_ :: String -> JSX
+badge_ = badge <<< defaults { text = _ }
+
+badge :: BadgeProps -> JSX
+badge { background, color, style, text } =
+  lumiBadgeElement
+    { style: R.mergeStyles
+        [ R.css
+            { color: cssStringHSLA color
+            , background: cssStringHSLA background
+            }
+        , style
+        ]
+    , children: R.text text
+    }
+  where
+    lumiBadgeElement = element (R.unsafeCreateDOMComponent "lumi-badge")
+
+defaults :: BadgeProps
+defaults =
+  { background: colors.black5
+  , color: colors.secondary
+  , style: R.css {}
+  , text: ""
+  }
+
+styles :: JSS
+styles = jss
+  { "@global":
+      { "lumi-badge":
+          { alignSelf: "baseline"
+          , display: "inline"
+          , fontSize: lumiSubtextFontSize
+          , lineHeight: "17px"
+          , borderRadius: "9px"
+          , marginTop: "2px"
+          , padding: "0px 6px"
+          }
+      }
+  }
diff --git a/src/Lumi/Components/Divider.purs b/src/Lumi/Components/Divider.purs
@@ -5,7 +5,7 @@ import Prelude
 import Color (cssStringHSLA)
 import JSS (JSS, jss)
 import Lumi.Components.Color (colors)
-import React.Basic (Component, JSX, createComponent, makeStateless)
+import React.Basic (Component, JSX, createComponent, element, makeStateless)
 import React.Basic.DOM as R
 
 type DividerProps =
@@ -26,16 +26,39 @@ divider = makeStateless component $ R.hr <<< mapProps
 divider_ :: JSX
 divider_ = divider { style: R.css {} }
 
+flexDivider :: DividerProps -> JSX
+flexDivider { style } =
+  lumiFlexDividerElement
+    { style
+    }
+  where
+    lumiFlexDividerElement = element (R.unsafeCreateDOMComponent "lumi-flex-divider")
+
+flexDivider_ :: JSX
+flexDivider_ = flexDivider { style: R.css {} }
+
 styles :: JSS
 styles = jss
   { "@global":
       { "hr.lumi":
           { height: "1px"
+          , alignSelf: "stretch"
+          , color: cssStringHSLA colors.black4
+          , background: cssStringHSLA colors.black4
+          , fontSize: "0"
+          , border: "0"
+          , flexShrink: "0"
+          , flexBasis: "1px"
+          }
+
+      , "lumi-flex-divider":
+          { alignSelf: "stretch"
           , color: cssStringHSLA colors.black4
           , background: cssStringHSLA colors.black4
           , fontSize: "0"
           , border: "0"
           , flexShrink: "0"
+          , flexBasis: "1px"
           }
       }
   }
diff --git a/src/Lumi/Components/Styles.purs b/src/Lumi/Components/Styles.purs
@@ -7,6 +7,7 @@ import Data.Traversable (traverse_)
 import Effect (Effect)
 import JSS (JSS, jss)
 import JSS as JSS
+import Lumi.Components.Badge as Badge
 import Lumi.Components.Border as Border
 import Lumi.Components.Breadcrumb as Breadcrumb
 import Lumi.Components.Button (styles) as Button
@@ -62,6 +63,7 @@ attachGlobalComponentStyles = do
   jssInstance <- JSS.createInstance JSS.preset
   traverse_ (JSS.globalAttachStyleSheet <=< JSS.createStyleSheet jssInstance)
     [ globals
+    , Badge.styles
     , Border.styles
     , Breadcrumb.styles
     , Button.styles

diff --git a/src/Lumi/Components/Tab.purs b/src/Lumi/Components/Tab.purs
@@ -12,10 +12,10 @@ import Data.String (Pattern(..), drop, indexOf, joinWith, null, split)
 import Effect (Effect)
 import Global.Unsafe (unsafeEncodeURIComponent)
 import JSS (JSS, jss)
+import Lumi.Components.Badge (badge)
 import Lumi.Components.Color (colors)
 import Lumi.Components.Column (column_)
 import Lumi.Components.Link as Link
-import Lumi.Components.Text (lumiSubtextFontSize)
 import React.Basic (Component, JSX, createComponent, element, empty, fragment, makeStateless)
 import React.Basic.DOM (CSS, mergeStyles)
 import React.Basic.DOM as R
@@ -38,7 +38,6 @@ tab :: TabProps -> JSX
 tab = makeStateless tabComponent render
   where
     lumiTabElement = element (R.unsafeCreateDOMComponent "lumi-tab")
-    lumiTabCountElement = element (R.unsafeCreateDOMComponent "lumi-tab-count")
 
     render props =
       lumiTabElement
@@ -51,9 +50,11 @@ tab = makeStateless tabComponent render
                     fragment
                       [ props.label
                       , props.count # maybe mempty \count ->
-                          lumiTabCountElement
+                          badge
                             { style: R.css { marginLeft: "8px" }
-                            , children: [ R.text (show count) ]
+                            , background: colors.black5
+                            , color: colors.secondary
+                            , text: show count
                             }
                       ]
                 }
@@ -213,11 +214,12 @@ styles = jss
       { "lumi-tab":
           { flex: "0 0 auto"
           , display: "flex"
+          , alignItems: "center"
           , boxSizing: "border-box"
           , "& > a.lumi":
               { flex: "0 0 auto"
               , display: "flex"
-              , alignItems: "center"
+              , alignItems: "baseline"
               , fontSize: "14px "
               , cursor: "pointer"
               , whiteSpace: "nowrap"
@@ -229,18 +231,6 @@ styles = jss
                   }
               }
 
-          , "& lumi-tab-count":
-              { fontSize: lumiSubtextFontSize
-              , color: cssStringHSLA colors.secondary
-
-              , borderRadius: "9px"
-              , backgroundColor: cssStringHSLA colors.black5
-
-              , marginTop: "2px"
-              , padding: "0px 6px"
-              , lineHeight: "17px"
-              }
-
           , "&[data-active=\"true\"]":
               { boxShadow: "inset 0 -1px 0 0 " <> cssStringHSLA colors.black
               , "& > a.lumi, & > a.lumi:hover, & > a.lumi:visited":