Bubble

const bubbleFixture = {
  id: "bubble",
  incoming: {
    opening: {
      text: "Can we publish the release notes today?",
      variant: "secondary",
      groupPosition: "first",
    },
    reply: {
      text: "Yes — the final checks are green.",
      variant: "secondary",
      groupPosition: "last",
      reactions: [
        { label: "👍", count: 2 },
        { label: "✨", count: 1 },
      ],
      reactionsLabel: "Two thumbs-up reactions and one celebration reaction",
    },
  },
  outgoing: {
    text: "Perfect. I’ll publish them now.",
    align: "end",
  },
} as const;
 
import { Bubble } from "@grassroot/ui-react";
 
export default function BubbleDemo() {
  const { incoming, outgoing } = bubbleFixture;
 
  return (
    <div>
      <div
        role="log"
        aria-label="Conversation preview"
        className="flex w-full max-w-[460px] flex-col gap-5"
      >
        <div className="flex flex-col gap-1.5">
          <Bubble variant={incoming.opening.variant} groupPosition={incoming.opening.groupPosition}>
            {incoming.opening.text}
          </Bubble>
          <Bubble
            variant={incoming.reply.variant}
            groupPosition={incoming.reply.groupPosition}
            reactions={incoming.reply.reactions}
            reactionsLabel={incoming.reply.reactionsLabel}
          >
            {incoming.reply.text}
          </Bubble>
        </div>
        <Bubble align={outgoing.align}>{outgoing.text}</Bubble>
      </div>
    </div>
  );
}

<script setup lang="ts">
const bubbleFixture = {
  id: "bubble",
  incoming: {
    opening: {
      text: "Can we publish the release notes today?",
      variant: "secondary",
      groupPosition: "first",
    },
    reply: {
      text: "Yes — the final checks are green.",
      variant: "secondary",
      groupPosition: "last",
      reactions: [
        { label: "👍", count: 2 },
        { label: "✨", count: 1 },
      ],
      reactionsLabel: "Two thumbs-up reactions and one celebration reaction",
    },
  },
  outgoing: {
    text: "Perfect. I’ll publish them now.",
    align: "end",
  },
} as const;
 
import { Bubble } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <div
      role="log"
      aria-label="Conversation preview"
      class="flex w-full max-w-[460px] flex-col gap-5"
    >
      <div class="flex flex-col gap-1.5">
        <Bubble
          :variant="bubbleFixture.incoming.opening.variant"
          :group-position="bubbleFixture.incoming.opening.groupPosition"
        >
          {{ bubbleFixture.incoming.opening.text }}
        </Bubble>
        <Bubble
          :variant="bubbleFixture.incoming.reply.variant"
          :group-position="bubbleFixture.incoming.reply.groupPosition"
          :reactions="bubbleFixture.incoming.reply.reactions"
          :reactions-label="bubbleFixture.incoming.reply.reactionsLabel"
        >
          {{ bubbleFixture.incoming.reply.text }}
        </Bubble>
      </div>
      <Bubble :align="bubbleFixture.outgoing.align">{{ bubbleFixture.outgoing.text }}</Bubble>
    </div>
  </div>
</template>

import { Component } from "@angular/core";
const bubbleFixture = {
  id: "bubble",
  incoming: {
    opening: {
      text: "Can we publish the release notes today?",
      variant: "secondary",
      groupPosition: "first",
    },
    reply: {
      text: "Yes — the final checks are green.",
      variant: "secondary",
      groupPosition: "last",
      reactions: [
        { label: "👍", count: 2 },
        { label: "✨", count: 1 },
      ],
      reactionsLabel: "Two thumbs-up reactions and one celebration reaction",
    },
  },
  outgoing: {
    text: "Perfect. I’ll publish them now.",
    align: "end",
  },
} as const;
 
import { GrassrootBubble } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-bubble-demo",
  standalone: true,
  imports: [GrassrootBubble],
  host: { style: "display: contents" },
  template: `
    <div>
      <div
        role="log"
        aria-label="Conversation preview"
        class="flex w-full max-w-[460px] flex-col gap-5"
      >
        <div class="flex flex-col gap-1.5">
          <grassroot-bubble
            [variant]="fixture.incoming.opening.variant"
            [groupPosition]="fixture.incoming.opening.groupPosition"
          >
            {{ fixture.incoming.opening.text }}
          </grassroot-bubble>
          <grassroot-bubble
            [variant]="fixture.incoming.reply.variant"
            [groupPosition]="fixture.incoming.reply.groupPosition"
            [reactions]="fixture.incoming.reply.reactions"
            [reactionsLabel]="fixture.incoming.reply.reactionsLabel"
          >
            {{ fixture.incoming.reply.text }}
          </grassroot-bubble>
        </div>
        <grassroot-bubble [align]="fixture.outgoing.align">{{
          fixture.outgoing.text
        }}</grassroot-bubble>
      </div>
    </div>
  `,
})
export class BubbleDemoComponent {
  protected readonly fixture = bubbleFixture;
}
 
export default BubbleDemoComponent;

<script lang="ts">
  const bubbleFixture = {
    id: "bubble",
    incoming: {
      opening: {
        text: "Can we publish the release notes today?",
        variant: "secondary",
        groupPosition: "first",
      },
      reply: {
        text: "Yes — the final checks are green.",
        variant: "secondary",
        groupPosition: "last",
        reactions: [
          { label: "👍", count: 2 },
          { label: "✨", count: 1 },
        ],
        reactionsLabel: "Two thumbs-up reactions and one celebration reaction",
      },
    },
    outgoing: {
      text: "Perfect. I’ll publish them now.",
      align: "end",
    },
  } as const;
 
  import { Bubble } from "@grassroot/ui-svelte";
</script>
 
<div>
  <div
    role="log"
    aria-label="Conversation preview"
    class="flex w-full max-w-[460px] flex-col gap-5"
  >
    <div class="flex flex-col gap-1.5">
      <Bubble
        variant={bubbleFixture.incoming.opening.variant}
        groupPosition={bubbleFixture.incoming.opening.groupPosition}
      >
        {bubbleFixture.incoming.opening.text}
      </Bubble>
      <Bubble
        variant={bubbleFixture.incoming.reply.variant}
        groupPosition={bubbleFixture.incoming.reply.groupPosition}
        reactions={bubbleFixture.incoming.reply.reactions}
        reactionsLabel={bubbleFixture.incoming.reply.reactionsLabel}
      >
        {bubbleFixture.incoming.reply.text}
      </Bubble>
    </div>
    <Bubble align={bubbleFixture.outgoing.align}>{bubbleFixture.outgoing.text}</Bubble>
  </div>
</div>

/** @jsxImportSource solid-js */
const bubbleFixture = {
  id: "bubble",
  incoming: {
    opening: {
      text: "Can we publish the release notes today?",
      variant: "secondary",
      groupPosition: "first",
    },
    reply: {
      text: "Yes — the final checks are green.",
      variant: "secondary",
      groupPosition: "last",
      reactions: [
        { label: "👍", count: 2 },
        { label: "✨", count: 1 },
      ],
      reactionsLabel: "Two thumbs-up reactions and one celebration reaction",
    },
  },
  outgoing: {
    text: "Perfect. I’ll publish them now.",
    align: "end",
  },
} as const;
 
import { Bubble } from "@grassroot/ui-solid";
import type { JSX } from "solid-js";
 
export default function BubbleDemo(): JSX.Element {
  return (
    <div>
      <div
        role="log"
        aria-label="Conversation preview"
        class="flex w-full max-w-[460px] flex-col gap-5"
      >
        <div class="flex flex-col gap-1.5">
          <Bubble
            variant={bubbleFixture.incoming.opening.variant}
            groupPosition={bubbleFixture.incoming.opening.groupPosition}
          >
            {bubbleFixture.incoming.opening.text}
          </Bubble>
          <Bubble
            variant={bubbleFixture.incoming.reply.variant}
            groupPosition={bubbleFixture.incoming.reply.groupPosition}
            reactions={bubbleFixture.incoming.reply.reactions}
            reactionsLabel={bubbleFixture.incoming.reply.reactionsLabel}
          >
            {bubbleFixture.incoming.reply.text}
          </Bubble>
        </div>
        <Bubble align={bubbleFixture.outgoing.align}>{bubbleFixture.outgoing.text}</Bubble>
      </div>
    </div>
  );
}