Renamed "bubble" to "message", added message group merging

1 files changed, 138 insertions, 0 deletions

diff --git a/src/layouts/_message-group.scss b/src/layouts/_message-group.scss
new file mode 100644
index 0000000..d95c9e8
--- /dev/null
+++ b/src/layouts/_message-group.scss
@@ -0,0 +1,138 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@use '../objects/message';
+
+@include iro.props-namespace('message-group') {
+    @include iro.props-store((
+        --dims: (
+            --spacing-x:  fn.global-dim(--size --225),
+            --spacing-y:  fn.global-dim(--size --150),
+            --arrow-size: fn.global-dim(--size --100),
+
+            --compact: (
+                --spacing-x: fn.global-dim(--size --225),
+                --spacing-y: fn.global-dim(--size --50),
+            )
+        )
+    ), 'dims');
+
+    @include iro.bem-layout(iro.props-namespace()) {
+        display:               grid;
+        grid-template-columns: auto 1fr;
+        grid-auto-rows:        auto;
+        grid-template-areas:   'avatar message' 'avatar .';
+        align-items:           flex-start;
+        gap:                   0 fn.dim(--spacing-x);
+        
+        @include iro.bem-elem('avatar') {
+            grid-area: avatar;
+            height:    0;
+        }
+        
+        @include iro.bem-elem('message') {
+            grid-column: message;
+            box-sizing:  border-box;
+            min-width:   0;
+            max-width:   100%;
+
+            &::before {
+                content:             '';
+                display:             none;
+                position:            absolute;
+                top:                 0;
+                left:                calc(-1 * fn.dim(--arrow-size));
+                border:              fn.dim(--arrow-size) solid fn.global-color(--bg);
+                border-bottom-color: transparent;
+                border-left-color:   transparent;
+            }
+
+            @include iro.bem-next-twin-elem {
+                margin-top: fn.dim(--spacing-y);
+            }
+        }
+        
+        @include iro.bem-modifier('right') {
+            @include iro.bem-elem('message') {
+                &::before {
+                    right:              calc(-1 * fn.dim(--arrow-size));
+                    left:               auto;
+                    border-right-color: transparent;
+                    border-left-color:  fn.global-color(--bg);
+                }
+            }
+        }
+        
+        @include iro.bem-modifier('compact') {
+            gap: 0 fn.dim(--compact --spacing-x);
+        
+            @include iro.bem-modifier('left') {
+                justify-items: start;
+            }
+        
+            @include iro.bem-modifier('right') {
+                justify-items: end;
+            }
+        
+            @include iro.bem-elem('message') {
+                @include iro.bem-next-twin-elem {
+                    margin-top: fn.dim(--compact --spacing-y);
+                }
+            }
+        }
+        
+        @include iro.bem-modifier('right') {
+            grid-template-columns: 1fr auto;
+            grid-template-areas:   'message avatar' '. avatar';
+        }
+        
+        @include iro.bem-modifier('no-avatar') {
+            grid-template-columns: 1fr;
+            grid-template-areas:   'message';
+
+            @include iro.bem-elem('avatar') {
+                display: none;
+            }
+        }
+        
+        @include iro.bem-modifier('arrow') {
+            @include iro.bem-elem('message') {
+                &::before {
+                    display: block;
+                }
+
+                @include iro.bem-next-twin-elem {
+                    &::before {
+                        display: none;
+                    }
+                }
+            }
+        }
+        
+        & + & {
+            @include iro.bem-modifier('merge') {
+                margin-top: fn.dim(--spacing-y);
+
+                @include iro.bem-elem('avatar') {
+                    visibility: hidden;
+                }
+
+                @include iro.bem-modifier('compact') {
+                    margin-top: fn.dim(--compact --spacing-y);
+                }
+
+                @include iro.bem-elem('merge-hide') {
+                    display: none;
+                }
+        
+                @include iro.bem-modifier('arrow') {
+                    @include iro.bem-elem('message') {
+                        &::before {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}