feat(badges):cleanup

examples/Demo/Badges.elm

@@ -10,7 +10,7 @@ view : List Html
 view =
   [ 
     h1 [][text "Badges"],
-    Icon.viewWithOptions "add" Icon.S18 [] { badgeInfo = Just (Badge.viewDefault "16")},
+    Icon.viewWithOptions "face" Icon.S18 [] { badgeInfo = Just (Badge.viewDefault "16")},
     Icon.viewWithOptions "add" Icon.S18 [] { badgeInfo = Just (Badge.view   { overlap = False, noBackground = False} "99")},
     Icon.viewWithOptions "add" Icon.S18 [] { badgeInfo = Just (Badge.view   { overlap = False, noBackground = True} "4")},
     Icon.view "add" Icon.S18 [],

src/Material/Badge.elm

@@ -1,5 +1,5 @@
 module Material.Badge
-  ( Options
+  ( Model
   , view
   , viewDefault
   , BadgeInfo
@@ -7,16 +7,26 @@ module Material.Badge
 
 {-| From the [Material Design Lite documentation](http://www.getmdl.io/components/#badges-section):
 
-The Material Design Lite (MDL) badge component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.
+> The Material Design Lite (MDL) badge component is an onscreen notification element.
-
+> A badge consists of a small circle, typically containing a number or other characters,
-You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention. For example:
+> that appears in proximity to another object. A badge can be both a notifier that there
-
+> are additional items associated with an object and an indicator of how many items there are.
-A "New messages" notification might be followed by a badge containing the number of unread messages.
+>
-A "You have unpurchased items in your shopping cart" reminder might include a badge showing the number of items in the cart.
+> You can use a badge to unobtrusively draw the user's attention to items they might not
-A "Join the discussion!" button might have an accompanying badge indicating the number of users currently participating in the discussion.
+> otherwise notice, or to emphasize that items may need their attention. For example:
-A badge is almost always positioned near a link so that the user has a convenient way to access the additional information indicated by the badge. However, depending on the intent, the badge itself may or may not be part of the link.
+>
-
+> A "New messages" notification might be followed by a badge containing the number of unread messages.
-Badges are a new feature in user interfaces, and provide users with a visual clue to help them discover additional relevant content. Their design and use is therefore an important factor in the overall user experience.
+> A "You have unpurchased items in your shopping cart" reminder might include a badge
+> showing the number of items in the cart.
+> A "Join the discussion!" button might have an accompanying badge indicating the number of
+> users currently participating in the discussion.
+> A badge is almost always positioned near a link so that the user has a convenient way to access 
+> the additional information indicated by the badge. However, depending on the intent, the 
+> badge itself may or may not be part of the link.
+>
+> Badges are a new feature in user interfaces, and provide users with a visual clue to help them
+> discover additional relevant content. Their design and use is therefore an important
+> factor in the overall user experience.
 
 @docs viewDefault, view, BadgeInfo, Options
 -}
@@ -33,19 +43,18 @@ type alias BadgeInfo =
   , dataBadge : Attribute
   }
 
-{-| Options for Badge
+{-| 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
 -}
-type alias Options =
+type alias Model =
   { overlap : Bool
   , noBackground : Bool
   }
 
-defaultOptions : Options
+model : Model
-defaultOptions =
+model =
-  { 
+  { overlap = True
-    overlap = True
   , noBackground = False
   }
 
@@ -59,13 +68,13 @@ defaultOptions =
     badgeInfo : Badge.BadgeInfo
     badgeInfo = Badge.view { overlap = False, noBackground = False} "3"
 -}
-view : Options -> String -> BadgeInfo
+view : Model -> String -> BadgeInfo
-view options databadge = 
+view model databadge = 
   let classes =
     [
       {css = " mdl-badge", show = True} 
-    , {css = " mdl-badge--no-background", show = options.noBackground}
+    , {css = " mdl-badge--no-background", show = model.noBackground}
-    , {css = " mdl-badge--overlap", show = options.overlap}
+    , {css = " mdl-badge--overlap", show = model.overlap}
     ]
       |> List.filter .show
       |> List.map .css
@@ -84,4 +93,4 @@ view options databadge =
     badgeInfo = Badge.viewDefault "3"
 -}
 viewDefault : String -> BadgeInfo
-viewDefault databadge = view defaultOptions databadge 
+viewDefault databadge = view model databadge 

src/Material/Icon.elm

@@ -37,6 +37,9 @@ type alias Options =
     badgeInfo : Maybe Badge.BadgeInfo
   }
 
+{-| default options
+See Badge on how to create a badge.
+-}
 defaultOptions : Options
 defaultOptions =
   {