2 files changed, 56 insertions, 8 deletions

diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug
index 6f057c0..ec7d025 100644
--- a/tpl/views/bubble-group.pug
+++ b/tpl/views/bubble-group.pug
@@ -1,9 +1,40 @@
 mixin view-bubble-group
     +view('bubble-group', 'Bubble group')
-        .c-box.l-overflow(style='max-height: 13em')
+        .c-box.l-overflow(style='max-height: 15em')
+            +bubble-group('Volpeon')(compact=true arrow=true)
+                +bubble('Volpeon')(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= 'Compact bubbles test'
+                    +slot('time')= '12:34'
+                +bubble()(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= loremIpsum
+                    +slot('time')= '12:35'
+                +bubble()(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= 'qwertzuiop'
+                    +slot('time')= '12:36'
+                +bubble()(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= '🐈️🦊️'
+                    +slot('time')= '12:38'
+                +bubble()(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= loremIpsum
+                    +slot('time')= '12:39'
+
+        .c-box.l-overflow(style='max-height: 15em')
             +bubble-group('Volpeon')
-                +bubble-group-bubble('12:34')= loremIpsum
-                +bubble-group-bubble('12:35')= loremIpsum
-                +bubble-group-bubble('12:36')= loremIpsum
-                +bubble-group-bubble('12:38')= loremIpsum
-                +bubble-group-bubble('12:39')= loremIpsum
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('header')
+                        .l-card.l-card--flush
+                            .l-card__block.l-card__block--main
+                                strong= 'Volpeon'
+                                small.u-ml-100= '@volpeon@mk.vulpes.one'
+                            small.l-card__block
+                                = '5 minutes ago'
+                                +icon('lock')(class='u-ml-100')
+                    +slot('body')= 'Full width bubbles test'
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('body')= loremIpsum
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('body')= 'qwertzuiop'
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('body')= '🐈️🦊️'
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('body')= loremIpsum
diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug
index 037398f..5e53f5b 100644
--- a/tpl/views/bubble.pug
+++ b/tpl/views/bubble.pug
@@ -1,7 +1,24 @@
 mixin view-bubble
     +view('bubble', 'Bubble')
         .c-box
-            +bubble('12:34', 'Volpeon')= loremIpsum
+            +bubble('Volpeon')(compact=true)
+                +slot('body')= loremIpsum
+                +slot('time')
+                    = '12:34'
+                    +icon('lock')(class='u-ml-100')
+
+        .c-box.u-themed.t-hi
+            +bubble()(compact=true theme='t-def')
+                +slot('body')= loremIpsum
 
         .c-box
-            +bubble('12:34', 'Volpeon')(scope='lock')= loremIpsum
+            +bubble()
+                +slot('header')
+                    .l-card.l-card--flush
+                        .l-card__block.l-card__block--main
+                            strong= 'Volpeon'
+                            small.u-ml-100= '@volpeon@mk.vulpes.one'
+                        small.l-card__block
+                            = '5 minutes ago'
+                            +icon('lock')(class='u-ml-100')
+                +slot('body')= loremIpsum