From ae9011329ba9803c8333227ee6c23aec30543289 Mon Sep 17 00:00:00 2001
From: Gerard <gerardlamo@gmail.com>
Date: Wed, 17 Jan 2024 11:44:31 +0100
Subject: [PATCH 1/3] Add BccReact component

---
 .../src/components/BccReact/BccReact.css      |   5 +
 .../src/components/BccReact/BccReact.spec.ts  |  31 ++++
 .../components/BccReact/BccReact.stories.ts   | 164 ++++++++++++++++++
 .../src/components/BccReact/BccReact.vue      |  82 +++++++++
 .../src/components/BccReact/BccReactEmoji.vue |  35 ++++
 .../__snapshots__/BccReact.spec.ts.snap       |  18 ++
 design-library/src/css/helpers.css            |  31 +++-
 design-library/src/css/index.css              |   1 +
 design-library/src/index.ts                   |   1 +
 .../src/tokens/tailwind/bccForbundetTheme.ts  |   3 +
 .../src/tokens/tailwind/transitions.ts        |  10 ++
 11 files changed, 380 insertions(+), 1 deletion(-)
 create mode 100644 design-library/src/components/BccReact/BccReact.css
 create mode 100644 design-library/src/components/BccReact/BccReact.spec.ts
 create mode 100644 design-library/src/components/BccReact/BccReact.stories.ts
 create mode 100644 design-library/src/components/BccReact/BccReact.vue
 create mode 100644 design-library/src/components/BccReact/BccReactEmoji.vue
 create mode 100644 design-library/src/components/BccReact/__snapshots__/BccReact.spec.ts.snap
 create mode 100644 design-library/src/tokens/tailwind/transitions.ts

diff --git a/design-library/src/components/BccReact/BccReact.css b/design-library/src/components/BccReact/BccReact.css
new file mode 100644
index 00000000..7285480a
--- /dev/null
+++ b/design-library/src/components/BccReact/BccReact.css
@@ -0,0 +1,5 @@
+@layer components {
+    .bcc-react {
+
+    }
+}
diff --git a/design-library/src/components/BccReact/BccReact.spec.ts b/design-library/src/components/BccReact/BccReact.spec.ts
new file mode 100644
index 00000000..8af7d79e
--- /dev/null
+++ b/design-library/src/components/BccReact/BccReact.spec.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect } from "vitest";
+
+import { mount } from "@vue/test-utils";
+import BccReact from "./BccReact.vue";
+
+describe("BccReact", () => {
+  it("renders reactions", () => {
+    expect(BccReact).toBeTruthy();
+
+    const wrapper = mount(BccReact, {
+      props: {
+        emojis: [
+          {
+            id: "thumbsup",
+            emoji: "👍",
+            count: 1,
+          },
+          {
+            id: "happy",
+            emoji: "😃",
+            count: 4,
+          },
+        ],
+      },
+    });
+
+    expect(wrapper.text()).toContain("4");
+    expect(wrapper.text()).not.toContain("1");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/design-library/src/components/BccReact/BccReact.stories.ts b/design-library/src/components/BccReact/BccReact.stories.ts
new file mode 100644
index 00000000..bd91670e
--- /dev/null
+++ b/design-library/src/components/BccReact/BccReact.stories.ts
@@ -0,0 +1,164 @@
+import BccReact from "./BccReact.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+
+export default {
+  title: "Components/BccReact",
+  component: BccReact,
+  argTypes: {},
+} as Meta<typeof BccReact>;
+
+const Template: StoryFn<typeof BccReact> = (args) => ({
+  components: { BccReact },
+  setup() {
+    return { args };
+  },
+  methods: {
+    onToggle(emojiId: string) {
+      const emoji = args.emojis.find((e) => e.id === emojiId);
+      if (!emoji) return;
+      if (emoji.count === undefined) emoji.count = 0;
+      emoji.count += emoji.selected ? -1 : 1;
+      emoji.selected = !emoji.selected;
+
+      // Enable for only allowing single reaction per user
+      /*
+      if (args.singleReaction && emoji.selected) {
+        args.emojis.forEach((e) => {
+          if (e.id !== emojiId && e.selected) {
+            e.selected = false;
+            e.count = (e.count || 1) - 1;
+          }
+        });
+      }
+      */
+    },
+  },
+  template: `
+    <div class="h-16 flex items-center">
+      <BccReact v-bind="args" @toggle="onToggle" />
+    </div>
+  `,
+});
+
+export const Example = Template.bind({});
+Example.args = {
+  top: false,
+  emojis: [
+    {
+      id: "thumbsup",
+      emoji: "👍",
+      count: 0,
+    },
+    {
+      id: "happy",
+      emoji: "😃",
+      count: 2,
+      selected: true,
+    },
+    {
+      id: "smile",
+      emoji: "😊",
+      count: 0,
+    },
+    {
+      id: "glasses",
+      emoji: "😎",
+      count: 0,
+    },
+    {
+      id: "love",
+      emoji: "😍",
+      count: 0,
+    },
+    {
+      id: "stars",
+      emoji: "🤩",
+      count: 0,
+    },
+    {
+      id: "rocket",
+      emoji: "🚀",
+      count: 93,
+    },
+  ],
+};
+
+Example.parameters = {
+  docs: {
+    source: {
+      language: "html",
+      code: `
+<--script-->
+  onToggle(emojiId: string) {
+    const emoji = args.emojis.find((e) => e.id === emojiId);
+    if (!emoji) return;
+    if (emoji.count === undefined) emoji.count = 0;
+    emoji.count += emoji.selected ? -1 : 1;
+    emoji.selected = !emoji.selected;
+
+    // Enable for only allowing single reaction per user
+    /*
+    if (args.singleReaction && emoji.selected) {
+      args.emojis.forEach((e) => {
+        if (e.id !== emojiId && e.selected) {
+          e.selected = false;
+          e.count = (e.count || 1) - 1;
+        }
+      });
+    }
+    */
+  }
+</-script-->
+
+<template>
+  <div class="h-16 flex items-center">
+    <BccReact v-bind="args" @toggle="onToggle" />
+  </div>
+</template>
+    `,
+    },
+  },
+};
+
+export const EmptyEmojis = Template.bind({});
+EmptyEmojis.args = {
+  top: true,
+  emojis: [
+    {
+      id: "thumbsup",
+      emoji: "👍",
+      count: 0,
+    },
+    {
+      id: "happy",
+      emoji: "😃",
+      count: 0,
+    },
+    {
+      id: "smile",
+      emoji: "😊",
+      count: 0,
+    },
+    {
+      id: "glasses",
+      emoji: "😎",
+      count: 0,
+    },
+    {
+      id: "love",
+      emoji: "😍",
+      count: 0,
+    },
+    {
+      id: "stars",
+      emoji: "🤩",
+      count: 0,
+    },
+    {
+      id: "rocket",
+      emoji: "🚀",
+      count: 0,
+    },
+  ],
+};
diff --git a/design-library/src/components/BccReact/BccReact.vue b/design-library/src/components/BccReact/BccReact.vue
new file mode 100644
index 00000000..32e2a964
--- /dev/null
+++ b/design-library/src/components/BccReact/BccReact.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { AddReactionFillIcon, AddReactionIcon, KeyboardArrowLeftIcon } from "@bcc-code/icons-vue";
+import { computed, ref } from "vue";
+import BccReactEmoji from "./BccReactEmoji.vue";
+import type { EmojiStat } from "./BccReactEmoji.vue";
+
+type Props = {
+  emojis: EmojiStat[];
+  top?: boolean;
+};
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  (e: "toggle", id: string): void;
+}>();
+
+const activeEmojis = computed(() => {
+  const active = props.emojis.filter((emoji) => emoji.count && emoji.count > 0);
+  active.sort((a, b) => b.count! - a.count!);
+  return active;
+});
+
+const show = ref(false);
+function selectEmoji(emoji: EmojiStat) {
+  emit("toggle", emoji.id);
+
+  setTimeout(() => {
+    show.value = false;
+  }, 250);
+}
+</script>
+
+<template>
+  <div class="relative flex w-full items-center overflow-visible">
+    <TransitionGroup name="bcc-fade">
+      <button
+        key="toggle"
+        @click="show = !show"
+        v-if="show || emojis.some((e) => !e.selected)"
+        class="mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition"
+        :class="[top ? 'rounded-b-full' : 'rounded-t-full']"
+      >
+        <AddReactionFillIcon v-if="show" class="w-6" />
+        <AddReactionIcon v-else class="w-6" />
+      </button>
+
+      <div
+        class="hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1"
+      >
+        <template v-if="activeEmojis.length > 0">
+          <TransitionGroup name="bcc-explode" appear>
+            <template v-for="emoji in activeEmojis" :key="emoji.id">
+              <keep-alive>
+                <BccReactEmoji @click="selectEmoji(emoji)" v-bind="emoji" />
+              </keep-alive>
+            </template>
+          </TransitionGroup>
+        </template>
+        <p v-else class="text-label flex items-center">
+          <KeyboardArrowLeftIcon class="mr-1 w-4" /> Be the first to react 😉
+        </p>
+      </div>
+    </TransitionGroup>
+
+    <Transition name="bcc-scale-fast">
+      <div
+        key="list"
+        v-if="show"
+        class="absolute -left-1 z-50 flex items-center gap-1 rounded-full bg-neutral-100 px-1 shadow-xl dark:bg-neutral-600"
+        :class="top ? '-top-9 origin-bottom-left' : 'top-11 origin-top-left'"
+      >
+        <TransitionGroup name="bcc-explode">
+          <template v-for="emoji in emojis" :key="emoji.id">
+            <button v-if="!emoji.selected" @click="selectEmoji(emoji)" class="px-2 pt-1">
+              <span class="text-xl leading-none">{{ emoji.emoji }}</span>
+            </button>
+          </template>
+        </TransitionGroup>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/design-library/src/components/BccReact/BccReactEmoji.vue b/design-library/src/components/BccReact/BccReactEmoji.vue
new file mode 100644
index 00000000..85741bbd
--- /dev/null
+++ b/design-library/src/components/BccReact/BccReactEmoji.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+export type EmojiStat = {
+  id: string;
+  emoji: string;
+  count?: number;
+  selected?: boolean;
+};
+const props = defineProps<EmojiStat>();
+
+const animate = ref(false);
+watch(
+  () => props.count,
+  () => {
+    animate.value = true;
+    setTimeout(() => {
+      animate.value = false;
+    }, 1000);
+  }
+);
+</script>
+
+<template>
+  <button
+    class="flex cursor-pointer items-center justify-center rounded-full p-1 text-2xl leading-none shadow transition-all hover:scale-105"
+    :class="[
+      selected ? 'bg-neutral-800 text-white' : 'bg-neutral-100 text-black',
+      { 'animate-wiggle': animate },
+    ]"
+  >
+    <span>{{ emoji }}</span>
+    <span v-if="count && count > 1" class="mx-1 text-xs">{{ count }}</span>
+  </button>
+</template>
diff --git a/design-library/src/components/BccReact/__snapshots__/BccReact.spec.ts.snap b/design-library/src/components/BccReact/__snapshots__/BccReact.spec.ts.snap
new file mode 100644
index 00000000..24bae30b
--- /dev/null
+++ b/design-library/src/components/BccReact/__snapshots__/BccReact.spec.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BccReact > renders reactions 1`] = `
+"<div class=\\"relative flex w-full items-center overflow-visible\\">
+  <transition-group-stub name=\\"bcc-fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\"><button class=\\"mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition rounded-t-full\\"><svg aria-hidden=\\"true\\" viewBox=\\"0 -960 960 960\\" fill=\\"currentColor\\" class=\\"w-6\\">
+        <path d=\\"M480-480Zm0 400q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q43 0 83 8.5t77 24.5v90q-35-20-75.5-31.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-32-6.5-62T776-600h86q9 29 13.5 58.5T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm320-680h-40q-17 0-28.5-11.5T720-800q0-17 11.5-28.5T760-840h40v-40q0-17 11.5-28.5T840-920q17 0 28.5 11.5T880-880v40h40q17 0 28.5 11.5T960-800q0 17-11.5 28.5T920-760h-40v40q0 17-11.5 28.5T840-680q-17 0-28.5-11.5T800-720v-40ZM620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q58 0 107-28t79-76q6-12-1-24t-21-12H316q-14 0-21 12t-1 24q30 48 79.5 76T480-260Z\\"></path>
+      </svg></button>
+    <div class=\\"hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1\\">
+      <transition-group-stub name=\\"bcc-explode\\" appear=\\"true\\" persisted=\\"false\\" css=\\"true\\"><button class=\\"flex cursor-pointer items-center justify-center rounded-full p-1 text-2xl leading-none shadow transition-all hover:scale-105 bg-neutral-100 text-black\\"><span>😃</span><span class=\\"mx-1 text-xs\\">4</span></button><button class=\\"flex cursor-pointer items-center justify-center rounded-full p-1 text-2xl leading-none shadow transition-all hover:scale-105 bg-neutral-100 text-black\\"><span>👍</span>
+          <!--v-if-->
+        </button></transition-group-stub>
+    </div>
+  </transition-group-stub>
+  <transition-stub name=\\"bcc-scale-fast\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+    <!--v-if-->
+  </transition-stub>
+</div>"
+`;
diff --git a/design-library/src/css/helpers.css b/design-library/src/css/helpers.css
index 7eebc8d5..c02e7fd0 100644
--- a/design-library/src/css/helpers.css
+++ b/design-library/src/css/helpers.css
@@ -35,4 +35,33 @@
 	opacity: 0;
 	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 	transform: scaleY(0.4);
-}
\ No newline at end of file
+}
+
+/* Scale */
+.bcc-scale-enter-active,
+.bcc-scale-leave-active {
+	transition: transform .6s ease, opacity .4s ease;
+}
+
+.bcc-scale-fast-enter-active,
+.bcc-scale-fast-leave-active {
+	transition: transform .3s ease, opacity .3s ease;
+}
+
+.bcc-scale-enter-from,
+.bcc-scale-leave-to,
+.bcc-scale-fast-enter-from,
+.bcc-scale-fast-leave-to {
+	@apply opacity-0 scale-0 shadow-lg;
+}
+
+/* Explode */
+.bcc-explode-enter-active,
+.bcc-explode-leave-active {
+	transition: transform .3s ease, opacity .2s ease;
+}
+
+.bcc-explode-enter-from,
+.bcc-explode-leave-to {
+	@apply scale-[200%] opacity-0;
+}
diff --git a/design-library/src/css/index.css b/design-library/src/css/index.css
index 0828feb6..214e70bc 100644
--- a/design-library/src/css/index.css
+++ b/design-library/src/css/index.css
@@ -24,3 +24,4 @@
 @import "../components/BccTabs/BccTabs.css";
 @import "../components/BccBanner/BccBanner.css";
 @import "../components/BccSpinner/BccSpinner.css";
+@import "../components/BccReact/BccReact.css";
diff --git a/design-library/src/index.ts b/design-library/src/index.ts
index 80d8ee7a..601a2335 100644
--- a/design-library/src/index.ts
+++ b/design-library/src/index.ts
@@ -31,3 +31,4 @@ export { default as BccToggle } from "./components/BccToggle/BccToggle.vue";
 export { default as BccBanner } from "./components/BccBanner/BccBanner.vue";
 export { default as BccSpinner } from "./components/BccSpinner/BccSpinner.vue";
 export { default as BccProgress } from "./components/BccProgress/BccProgress.vue";
+export { default as BccReact } from "./components/BccReact/BccReact.vue";
diff --git a/design-library/src/tokens/tailwind/bccForbundetTheme.ts b/design-library/src/tokens/tailwind/bccForbundetTheme.ts
index 7180f3c6..db77a860 100644
--- a/design-library/src/tokens/tailwind/bccForbundetTheme.ts
+++ b/design-library/src/tokens/tailwind/bccForbundetTheme.ts
@@ -8,6 +8,7 @@ import { backgroundColor } from "./backgroundColor";
 import { outlineColor } from "./outlineColor";
 import { ringColor } from "./ringColor";
 import type { Config } from "tailwindcss";
+import { animation, keyframes } from "./transitions";
 
 const bccForbundetTheme: Partial<Config> = {
   theme: {
@@ -21,6 +22,8 @@ const bccForbundetTheme: Partial<Config> = {
       backgroundColor,
       outlineColor,
       ringColor,
+      keyframes,
+      animation
     },
   },
 };
diff --git a/design-library/src/tokens/tailwind/transitions.ts b/design-library/src/tokens/tailwind/transitions.ts
new file mode 100644
index 00000000..ebd6e3a7
--- /dev/null
+++ b/design-library/src/tokens/tailwind/transitions.ts
@@ -0,0 +1,10 @@
+export const keyframes = {
+	wiggle: {
+		'0%, 100%': { transform: 'rotate(-3deg)' },
+		'50%': { transform: 'rotate(3deg)' },
+	}
+}
+
+export const animation = {
+	wiggle: 'wiggle 0.3s ease-in-out infinite',
+}
\ No newline at end of file

From 5ed1087f08bf0b0f4aea0a82ec7603ea8180715a Mon Sep 17 00:00:00 2001
From: Gerard <gerardlamo@gmail.com>
Date: Wed, 17 Jan 2024 12:43:35 +0100
Subject: [PATCH 2/3] Moved styles to classes

---
 .../src/components/BccReact/BccReact.css      | 32 +++++++++++++++++++
 .../components/BccReact/BccReact.stories.ts   |  1 +
 .../src/components/BccReact/BccReact.vue      | 30 ++++++++++-------
 .../src/components/BccReact/BccReactEmoji.vue | 10 +++---
 .../__snapshots__/BccReact.spec.ts.snap       |  8 ++---
 5 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/design-library/src/components/BccReact/BccReact.css b/design-library/src/components/BccReact/BccReact.css
index 7285480a..a8360df5 100644
--- a/design-library/src/components/BccReact/BccReact.css
+++ b/design-library/src/components/BccReact/BccReact.css
@@ -1,5 +1,37 @@
 @layer components {
     .bcc-react {
+        @apply relative flex w-full items-center overflow-visible;
+    }
+    .bcc-react-toggle {
+        @apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition;
+    }
+    .bcc-react-list {
+        @apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
+    }
+    .bcc-react-empty {
+        @apply text-label flex items-center;
+    }
+    
+    .bcc-react-selector {
+        @apply absolute -left-1 z-50 flex items-center gap-1 rounded-full bg-neutral-100 px-1 dark:bg-neutral-600;
+        /* Default --bottom */
+        @apply top-11 origin-top-left shadow-lg;
+    }
+    
+    .bcc-react-selector--top {
+        @apply -top-10 origin-bottom-left shadow;
+    }
+    
+    .bcc-react-selector-item {
+        @apply p-2 text-xl leading-none;
+    }
 
+    .bcc-react-emoji-list-item {
+        @apply flex cursor-pointer items-center justify-center rounded-full p-1 text-2xl leading-none shadow transition-all hover:scale-105;
+        /* Default --not-selected */
+        @apply text-black bg-neutral-100;
+    }
+    .bcc-react-emoji-list-item--selected {
+        @apply bg-neutral-800 text-white;
     }
 }
diff --git a/design-library/src/components/BccReact/BccReact.stories.ts b/design-library/src/components/BccReact/BccReact.stories.ts
index bd91670e..1e07c29e 100644
--- a/design-library/src/components/BccReact/BccReact.stories.ts
+++ b/design-library/src/components/BccReact/BccReact.stories.ts
@@ -124,6 +124,7 @@ Example.parameters = {
 export const EmptyEmojis = Template.bind({});
 EmptyEmojis.args = {
   top: true,
+  placeholder: "No reactions yet",
   emojis: [
     {
       id: "thumbsup",
diff --git a/design-library/src/components/BccReact/BccReact.vue b/design-library/src/components/BccReact/BccReact.vue
index 32e2a964..b295da3f 100644
--- a/design-library/src/components/BccReact/BccReact.vue
+++ b/design-library/src/components/BccReact/BccReact.vue
@@ -7,9 +7,13 @@ import type { EmojiStat } from "./BccReactEmoji.vue";
 type Props = {
   emojis: EmojiStat[];
   top?: boolean;
+  placeholder?: string;
 };
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  top: false,
+  placeholder: "Be the first to react 😉",
+});
 const emit = defineEmits<{
   (e: "toggle", id: string): void;
 }>();
@@ -31,22 +35,20 @@ function selectEmoji(emoji: EmojiStat) {
 </script>
 
 <template>
-  <div class="relative flex w-full items-center overflow-visible">
+  <div class="bcc-react">
     <TransitionGroup name="bcc-fade">
       <button
         key="toggle"
         @click="show = !show"
         v-if="show || emojis.some((e) => !e.selected)"
-        class="mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition"
+        class="bcc-react-toggle"
         :class="[top ? 'rounded-b-full' : 'rounded-t-full']"
       >
         <AddReactionFillIcon v-if="show" class="w-6" />
         <AddReactionIcon v-else class="w-6" />
       </button>
 
-      <div
-        class="hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1"
-      >
+      <div class="bcc-react-list">
         <template v-if="activeEmojis.length > 0">
           <TransitionGroup name="bcc-explode" appear>
             <template v-for="emoji in activeEmojis" :key="emoji.id">
@@ -56,8 +58,8 @@ function selectEmoji(emoji: EmojiStat) {
             </template>
           </TransitionGroup>
         </template>
-        <p v-else class="text-label flex items-center">
-          <KeyboardArrowLeftIcon class="mr-1 w-4" /> Be the first to react 😉
+        <p v-else class="bcc-react-empty">
+          <KeyboardArrowLeftIcon class="mr-1 w-4" /> {{ placeholder }}
         </p>
       </div>
     </TransitionGroup>
@@ -66,13 +68,17 @@ function selectEmoji(emoji: EmojiStat) {
       <div
         key="list"
         v-if="show"
-        class="absolute -left-1 z-50 flex items-center gap-1 rounded-full bg-neutral-100 px-1 shadow-xl dark:bg-neutral-600"
-        :class="top ? '-top-9 origin-bottom-left' : 'top-11 origin-top-left'"
+        class="bcc-react-selector"
+        :class="{ 'bcc-react-selector--top': top }"
       >
         <TransitionGroup name="bcc-explode">
           <template v-for="emoji in emojis" :key="emoji.id">
-            <button v-if="!emoji.selected" @click="selectEmoji(emoji)" class="px-2 pt-1">
-              <span class="text-xl leading-none">{{ emoji.emoji }}</span>
+            <button
+              v-if="!emoji.selected"
+              @click="selectEmoji(emoji)"
+              class="bcc-react-selector-item"
+            >
+              {{ emoji.emoji }}
             </button>
           </template>
         </TransitionGroup>
diff --git a/design-library/src/components/BccReact/BccReactEmoji.vue b/design-library/src/components/BccReact/BccReactEmoji.vue
index 85741bbd..0e2aa601 100644
--- a/design-library/src/components/BccReact/BccReactEmoji.vue
+++ b/design-library/src/components/BccReact/BccReactEmoji.vue
@@ -23,11 +23,11 @@ watch(
 
 <template>
   <button
-    class="flex cursor-pointer items-center justify-center rounded-full p-1 text-2xl leading-none shadow transition-all hover:scale-105"
-    :class="[
-      selected ? 'bg-neutral-800 text-white' : 'bg-neutral-100 text-black',
-      { 'animate-wiggle': animate },
-    ]"
+    class="bcc-react-emoji-list-item"
+    :class="{
+      'bcc-react-emoji-list-item--selected': selected,
+      'animate-wiggle': animate,
+    }"
   >
     <span>{{ emoji }}</span>
     <span v-if="count && count > 1" class="mx-1 text-xs">{{ count }}</span>
diff --git a/design-library/src/components/BccReact/__snapshots__/BccReact.spec.ts.snap b/design-library/src/components/BccReact/__snapshots__/BccReact.spec.ts.snap
index 24bae30b..b6643ef5 100644
--- a/design-library/src/components/BccReact/__snapshots__/BccReact.spec.ts.snap
+++ b/design-library/src/components/BccReact/__snapshots__/BccReact.spec.ts.snap
@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BccReact > renders reactions 1`] = `
-"<div class=\\"relative flex w-full items-center overflow-visible\\">
-  <transition-group-stub name=\\"bcc-fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\"><button class=\\"mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition rounded-t-full\\"><svg aria-hidden=\\"true\\" viewBox=\\"0 -960 960 960\\" fill=\\"currentColor\\" class=\\"w-6\\">
+"<div class=\\"bcc-react\\">
+  <transition-group-stub name=\\"bcc-fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\"><button class=\\"bcc-react-toggle rounded-t-full\\"><svg aria-hidden=\\"true\\" viewBox=\\"0 -960 960 960\\" fill=\\"currentColor\\" class=\\"w-6\\">
         <path d=\\"M480-480Zm0 400q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q43 0 83 8.5t77 24.5v90q-35-20-75.5-31.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-32-6.5-62T776-600h86q9 29 13.5 58.5T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm320-680h-40q-17 0-28.5-11.5T720-800q0-17 11.5-28.5T760-840h40v-40q0-17 11.5-28.5T840-920q17 0 28.5 11.5T880-880v40h40q17 0 28.5 11.5T960-800q0 17-11.5 28.5T920-760h-40v40q0 17-11.5 28.5T840-680q-17 0-28.5-11.5T800-720v-40ZM620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q58 0 107-28t79-76q6-12-1-24t-21-12H316q-14 0-21 12t-1 24q30 48 79.5 76T480-260Z\\"></path>
       </svg></button>
-    <div class=\\"hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1\\">
-      <transition-group-stub name=\\"bcc-explode\\" appear=\\"true\\" persisted=\\"false\\" css=\\"true\\"><button class=\\"flex cursor-pointer items-center justify-center rounded-full p-1 text-2xl leading-none shadow transition-all hover:scale-105 bg-neutral-100 text-black\\"><span>😃</span><span class=\\"mx-1 text-xs\\">4</span></button><button class=\\"flex cursor-pointer items-center justify-center rounded-full p-1 text-2xl leading-none shadow transition-all hover:scale-105 bg-neutral-100 text-black\\"><span>👍</span>
+    <div class=\\"bcc-react-list\\">
+      <transition-group-stub name=\\"bcc-explode\\" appear=\\"true\\" persisted=\\"false\\" css=\\"true\\"><button class=\\"bcc-react-emoji-list-item\\"><span>😃</span><span class=\\"mx-1 text-xs\\">4</span></button><button class=\\"bcc-react-emoji-list-item\\"><span>👍</span>
           <!--v-if-->
         </button></transition-group-stub>
     </div>

From 8fa514de74609d6f8bb7ef6895e7f1f57cc218c8 Mon Sep 17 00:00:00 2001
From: Gerard Lamusse <gerardlamo@gmail.com>
Date: Wed, 17 Jan 2024 14:06:17 +0100
Subject: [PATCH 3/3] Update
 design-library/src/components/BccReact/BccReact.vue

Co-authored-by: Laurens Groeneveld <laurens.groeneveld@bcc.no>
---
 design-library/src/components/BccReact/BccReact.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/design-library/src/components/BccReact/BccReact.vue b/design-library/src/components/BccReact/BccReact.vue
index b295da3f..5ec79da8 100644
--- a/design-library/src/components/BccReact/BccReact.vue
+++ b/design-library/src/components/BccReact/BccReact.vue
@@ -58,7 +58,7 @@ function selectEmoji(emoji: EmojiStat) {
             </template>
           </TransitionGroup>
         </template>
-        <p v-else class="bcc-react-empty">
+        <p v-else-if="placeholder" class="bcc-react-empty">
           <KeyboardArrowLeftIcon class="mr-1 w-4" /> {{ placeholder }}
         </p>
       </div>