Improved bubbles

2 files changed, 30 insertions, 22 deletions

diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug
index c2e502a..2b960f0 100644
--- a/tpl/objects/bubble-group.pug
+++ b/tpl/objects/bubble-group.pug
@@ -1,16 +1,9 @@
 mixin bubble-group(user)
     -
-        let first = true 
-
-    mixin bubble-group-bubble(time)
-        +bubble(time, first ? user : undefined)(class='l-bubble-group__bubble')
-            block
-        -
-            first = false
-
-    -
         let classes = {
-            'l-bubble-group': true
+            'l-bubble-group':          true,
+            'l-bubble-group--compact': attributes.compact,
+            'l-bubble-group--arrow':   attributes.arrow
         }
         if (attributes.class) {
             classes[attributes.class] = true
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index a79f119..681661c 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -1,21 +1,36 @@
-mixin bubble(time, user)
+mixin bubble(user)
+    - const slots = {}
+
+    mixin slot(key)
+        - slots[key] = block
+
     -
+        block ? block() : undefined
+
         let classes = {
-            'o-bubble': true,
-            't-raised':         true
+            'o-bubble':          true,
+            'o-bubble--compact': attributes.compact,
+            't-raised':          !attributes.theme
         }
         if (attributes.class) {
             classes[attributes.class] = true
         }
+        if (attributes.theme) {
+            classes[attributes.theme] = true
+        }
 
     article(class=classes)
-        if user
-            header.o-bubble__user
+        if slots.header
+            header.o-bubble__header
+                - slots.header()
+        else if user
+            header.o-bubble__header
                 strong= user
-        span.s-colored-links
-            block
-        small.o-bubble__time
-            = time
-            if attributes.scope
-                = ' '
-                +icon(attributes.scope)
+        div.o-bubble__body.s-colored-links
+            - slots.body()
+            if slots.time
+                small.o-bubble__time
+                    - slots.time()
+        if slots.footer
+            footer.o-bubble__footer
+                - slots.footer()