Changed style implementation of style for multiple styles. Not fully working

examples/Demo/Badges.elm

@@ -9,10 +9,10 @@ import Material.Style exposing (..)
 
 view : List Html
 view = [  div [][p [][]
-        , styled span  (Badge.badgeStyle   { overlap = False, noBackground = False} "4")  [ ] [ text "Span with badge" ]
+        , styled span  [Badge.withBadge "56", Badge.overlap]  [ ] [ text "Span with badge" ]
         , p [][]
-        , styled span  (Badge.badgeStyle   { overlap = True, noBackground = False} "7")  [ ] [ text "Span with no background badge" ]
-        , p [][]
-        , styled span  (Badge.badgeStyle   { overlap = True, noBackground = False} "14")  [ ] [ text "Span with badge overlap" ]
+        -- , styled span  (Badge.badgeStyle   { overlap = True, noBackground = False} "7")  [ ] [ text "Span with no background badge" ]
+        -- , p [][]
+        -- , styled span  (Badge.badgeStyle   { overlap = True, noBackground = False} "14")  [ ] [ text "Span with badge overlap" ]
     ]
   ]

src/Material/Badge.elm

@@ -1,7 +1,7 @@
 module Material.Badge
-  ( Model
-  , badgeStyle
-  , badgeStyleDefault
+  ( noBackground
+  , overlap
+  , withBadge
   ) where
 
 {-| From the [Material Design Lite documentation](http://www.getmdl.io/components/#badges-section):
@@ -33,23 +33,20 @@ module Material.Badge
 import String 
 import Html exposing (Attribute)
 import Html.Attributes exposing (attribute)
-import Material.Style exposing (Style, cs, cs', styled, attrib)
+import Material.Style exposing (Style, cs, attrib, multiple)
 
 
-{-| Model for Badge
-  ovelap: Bool to set css class - mdl-badge--overlap.	Make the badge overlap with its container
-  noBackground: Bool to set css class - mdl-badge--no-background.	Applies open-circle effect to badge
+{-| No background for badge 
 -}
-type alias Model =
-  { overlap : Bool
-  , noBackground : Bool
-  }
+noBackground : Style
+noBackground = 
+  cs "mdl-badge--no-background"
 
-model : Model
-model =
-  { overlap = True
-  , noBackground = False
-  }
+{-| Overlap Badge 
+-}
+overlap : Style
+overlap = 
+  cs "mdl-badge--overlap"
 
 
 {-| Style function for Badge
@@ -62,29 +59,6 @@ model =
     badgeStyleList : List Style
     badgeStyleList = Badge.badgeStyle { overlap = False, noBackground = False} "3"
 -}
-badgeStyle : Model -> String -> List Style
-badgeStyle model databadge = 
-  let classes =
-    [
-      {css = "mdl-badge", show = True} 
-    , {css = "mdl-badge--no-background", show = model.noBackground}
-    , {css = "mdl-badge--overlap", show = model.overlap}
-    ]
-      |> List.filter .show
-      |> List.map .css
-      |> String.join " "
-  in
-    [cs classes, attrib "data-badge" databadge]
-
-
-{-| Create Badge Style List with default values
-    
-    Parameter will set a value to data-badge="value".	Assigns string value to badge
-
-    import Material.Badge as Badge
-
-    badgeStyleListDefault : List Style
-    badgeStyleListDefault = Badge.badgeStyleDefault "3"
--}
-badgeStyleDefault : String -> List Style
-badgeStyleDefault databadge = badgeStyle model databadge 
+withBadge : String -> Style
+withBadge databadge = 
+  multiple [cs "mdl-badge", attrib "data-badge" databadge]

src/Material/Style.elm

@@ -1,7 +1,7 @@
 module Material.Style
   ( Style
   , styled
-  , cs, cs', css, css', attrib
+  , cs, cs', css, css', attrib, multiple
   , stylesheet
   ) where
 
@@ -17,7 +17,7 @@ add to or remove from the contents of an already constructed class Attribute.)
 @docs Style
 
 # Constructors
-@docs cs, cs', css, css', attrib
+@docs cs, cs', css, css', attrib, multiple
 
 # Application
 @docs styled
@@ -42,8 +42,15 @@ type Style
   = Class String
   | CSS (String, String)
   | Attr (String, String)
+  | Multiple (List Style)
   | NOP
 
+multipleOf : Style -> Maybe (List Style)
+multipleOf style =
+  case style of
+    Multiple multiple -> Just multiple
+    _ -> Nothing
+
 
 attrOf : Style -> Maybe (String, String)
 attrOf style =
@@ -81,8 +88,12 @@ Note that if you do specify `style`, `class`, or `classList` attributes in
 (*), they will be discarded.
 -}
 styled : (List Attribute -> a) -> List Style -> List Attribute -> a
-styled ctor styles attrs =
+styled ctor styles attrs = 
   let
+    multipleStyles = (List.filterMap multipleOf styles)
+      -- could need some help on how to proceed here
+      
+    -- (List.filterMap multipleOf styles)
     styleAttrs = (List.filterMap attrOf styles) 
       |> List.map (\attrib -> Html.Attributes.attribute (fst attrib) ( snd attrib))
   in
@@ -120,6 +131,11 @@ attrib : String -> String -> Style
 attrib key value =
   Attr (key, value)
 
+{-| Add a custom attribute
+-}
+multiple : List Style -> Style
+multiple styles =
+  Multiple (styles)
 
 {-| Conditionally add a CSS style to a component
 -}