💄 (buttons) Improve multiple choice form UI

baptisteArno · Apr 26, 2023 · 124f350 · 124f350 · vercel · Apr 26, 2023
1 parent f51d619
commit 124f350
Show file tree

Hide file tree

Showing 33 changed files with 454 additions and 262 deletions.
diff --git a/apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts b/apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts
@@ -45,9 +45,8 @@ test.describe.parallel('Buttons input block', () => {
     await expect(page.locator('text=Item 2')).toBeHidden()
 
     await page.click('text=Preview')
-    const item3Button = page.locator('button >> text=Item 3')
-    await item3Button.click()
-    await expect(item3Button).toBeHidden()
+    await page.getByRole('button', { name: 'Item 3' }).click()
+    await expect(page.getByRole('button', { name: 'Item 3' })).toBeHidden()
     await expect(page.getByTestId('guest-bubble')).toHaveText('Item 3')
     await page.click('button[aria-label="Close"]')
 
@@ -67,8 +66,8 @@ test.describe.parallel('Buttons input block', () => {
 
     await page.click('text=Preview')
 
-    await page.locator('button >> text="Item 3"').click()
-    await page.locator('button >> text="Item 1"').click()
+    await page.getByRole('checkbox', { name: 'Item 3' }).click()
+    await page.getByRole('checkbox', { name: 'Item 1' }).click()
     await page.locator('text=Go').click()
 
     await expect(page.locator('text="Item 3, Item 1"')).toBeVisible()

diff --git a/apps/builder/src/features/theme/theme.spec.ts b/apps/builder/src/features/theme/theme.spec.ts
@@ -18,7 +18,7 @@ test.describe.parallel('Theme page', () => {
         id: typebotId,
       })
       await page.goto(`/typebots/${typebotId}/theme`)
-      await expect(page.locator('button >> text="Go"')).toBeVisible()
+      await expect(page.getByRole('button', { name: 'Go' })).toBeVisible()
 
       // Font
       await page.getByRole('button', { name: 'Font & Background' }).click()
@@ -70,7 +70,7 @@ test.describe.parallel('Theme page', () => {
       }
 
       await page.goto(`/typebots/${typebotId}/theme`)
-      await expect(page.locator('button >> text="Go"')).toBeVisible()
+      await expect(page.getByRole('button', { name: 'Go' })).toBeVisible()
       await page.click('button:has-text("Chat")')
 
       // Host avatar
@@ -81,7 +81,7 @@ test.describe.parallel('Theme page', () => {
         'input[placeholder="Paste the image link..."]',
         hostAvatarUrl
       )
-      await page.locator('button >> text="Go"').click()
+      await page.getByRole('button', { name: 'Go' }).click()
 
       await expect(page.locator('.typebot-container img')).toHaveAttribute(
         'src',
@@ -155,7 +155,7 @@ test.describe.parallel('Theme page', () => {
         '[data-testid="guest-bubbles-theme"] >> [aria-label="Pick a color"] >> nth=1'
       )
       await page.fill('input[value="#FFFFFF"]', '#264653')
-      await page.locator('button >> text="Go"').click()
+      await page.getByRole('button', { name: 'Go' }).click()
       const guestBubble = page.locator('[data-testid="guest-bubble"] >> nth=-1')
       await expect(guestBubble).toHaveCSS(
         'background-color',
@@ -173,7 +173,7 @@ test.describe.parallel('Theme page', () => {
       await page
         .locator('input[placeholder="Paste the image link..."]')
         .fill(guestAvatarUrl)
-      await page.locator('button >> text="Go"').click()
+      await page.getByRole('button', { name: 'Go' }).click()
       await expect(page.locator('.typebot-container img')).toHaveAttribute(
         'src',
         guestAvatarUrl
@@ -202,7 +202,7 @@ test.describe.parallel('Theme page', () => {
         id: typebotId,
       })
       await page.goto(`/typebots/${typebotId}/theme`)
-      await expect(page.locator('button >> text="Go"')).toBeVisible()
+      await expect(page.getByRole('button', { name: 'Go' })).toBeVisible()
       await page.click('button:has-text("Custom CSS")')
       await page.fill(
         'div[role="textbox"]',
@@ -222,7 +222,7 @@ test.describe.parallel('Theme page', () => {
         id: typebotId,
       })
       await page.goto(`/typebots/${typebotId}/theme`)
-      await expect(page.locator('button >> text="Go"')).toBeVisible()
+      await expect(page.getByRole('button', { name: 'Go' })).toBeVisible()
       await page.getByRole('button', { name: 'Templates New!' }).click()
       await page.getByRole('button', { name: 'Save current theme' }).click()
       await page.getByPlaceholder('My template').fill('My awesome theme')

diff --git a/apps/viewer/src/features/results/results.spec.ts b/apps/viewer/src/features/results/results.spec.ts
@@ -14,7 +14,7 @@ test('Big groups should work as expected', async ({ page }) => {
   await page.locator('input').press('Enter')
   await page.locator('input').fill('26')
   await page.locator('input').press('Enter')
-  await page.locator('button >> text=Yes').click()
+  await page.getByRole('button', { name: 'Yes' }).click()
   await page.goto(`${process.env.NEXTAUTH_URL}/typebots/${typebotId}/results`)
   await expect(page.locator('text="Baptiste"')).toBeVisible()
   await expect(page.locator('text="26"')).toBeVisible()

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

diff --git a/packages/embeds/js/src/assets/index.css b/packages/embeds/js/src/assets/index.css
@@ -6,10 +6,14 @@
   --typebot-container-bg-image: none;
   --typebot-container-bg-color: transparent;
   --typebot-container-font-family: 'Open Sans';
+  --typebot-container-color: #303235;
 
   --typebot-button-bg-color: #0042da;
+  --typebot-button-bg-color-rgb: 0, 66, 218;
   --typebot-button-color: #ffffff;
 
+  --typebot-checkbox-bg-color: #ffffff;
+
   --typebot-host-bubble-bg-color: #f7f8ff;
   --typebot-host-bubble-color: #303235;
 
@@ -134,6 +138,7 @@ textarea {
   background-color: var(--typebot-button-bg-color);
   border: 1px solid var(--typebot-button-bg-color);
   border-radius: var(--typebot-border-radius);
+  transition: all 0.3s ease;
 }
 
 .typebot-button.selectable {
@@ -142,6 +147,38 @@ textarea {
   border: 1px solid var(--typebot-button-bg-color);
 }
 
+.typebot-selectable {
+  border: 1px solid rgba(var(--typebot-button-bg-color-rgb), 0.25);
+  border-radius: var(--typebot-border-radius);
+  color: var(--typebot-container-color);
+  background-color: rgba(var(--typebot-button-bg-color-rgb), 0.08);
+  transition: all 0.3s ease;
+}
+
+.typebot-selectable:hover {
+  background-color: rgba(var(--typebot-button-bg-color-rgb), 0.12);
+  border-color: rgba(var(--typebot-button-bg-color-rgb), 0.3);
+}
+
+.typebot-selectable.selected {
+  background-color: rgba(var(--typebot-button-bg-color-rgb), 0.18);
+  border-color: rgba(var(--typebot-button-bg-color-rgb), 0.35);
+}
+
+.typebot-checkbox {
+  border: 1px solid var(--typebot-button-bg-color);
+  border-radius: var(--typebot-border-radius);
+  background-color: var(--typebot-checkbox-bg-color);
+  color: var(--typebot-button-color);
+  padding: 1px;
+  border-radius: 2px;
+  transition: all 0.3s ease;
+}
+
+.typebot-checkbox.checked {
+  background-color: var(--typebot-button-bg-color);
+}
+
 .typebot-host-bubble {
   color: var(--typebot-host-bubble-color);
 }
@@ -220,6 +257,7 @@ textarea {
 
 .typebot-upload-input {
   transition: border-color 100ms ease-out;
+  border-radius: var(--typebot-border-radius);
 }
 
 .typebot-upload-input.dragging-over {

diff --git a/packages/embeds/js/src/components/Button.tsx b/packages/embeds/js/src/components/Button.tsx
@@ -0,0 +1,33 @@
+import { children, JSX, Show, splitProps } from 'solid-js'
+import { Spinner } from './Spinner'
+
+type Props = {
+  variant?: 'primary' | 'secondary'
+  children: JSX.Element
+  isDisabled?: boolean
+  isLoading?: boolean
+} & JSX.ButtonHTMLAttributes<HTMLButtonElement>
+
+export const Button = (props: Props) => {
+  const childrenReturn = children(() => props.children)
+  const [local, buttonProps] = splitProps(props, ['disabled', 'class'])
+
+  return (
+    <button
+      {...buttonProps}
+      disabled={props.isDisabled || props.isLoading}
+      class={
+        'py-2 px-4 font-semibold focus:outline-none filter hover:brightness-90 active:brightness-75 disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100' +
+        (props.variant === 'secondary'
+          ? ' secondary-button'
+          : ' typebot-button') +
+        ' ' +
+        local.class
+      }
+    >
+      <Show when={!props.isLoading} fallback={<Spinner />}>
+        {childrenReturn()}
+      </Show>
+    </button>
+  )
+}
diff --git a/packages/embeds/js/src/components/ConversationContainer/AvatarSideContainer.tsx b/packages/embeds/js/src/components/ConversationContainer/AvatarSideContainer.tsx
@@ -28,13 +28,13 @@ export const AvatarSideContainer = (props: Props) => {
     <div
       ref={avatarContainer}
       class={
-        'flex mr-2 mb-2 flex-shrink-0 items-center relative typebot-avatar-container ' +
+        'flex flex-shrink-0 items-center relative typebot-avatar-container ' +
         (isMobile() ? 'w-6' : 'w-10')
       }
     >
       <div
         class={
-          'absolute mb-2 flex items-center top-0' +
+          'absolute flex items-center top-0' +
           (isMobile() ? ' w-6 h-6' : ' w-10 h-10') +
           (props.hideAvatar ? ' opacity-0' : ' opacity-100')
         }

diff --git a/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx b/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
@@ -46,57 +46,54 @@ export const ChatChunk = (props: Props) => {
   }
 
   return (
-    <div class="flex w-full">
-      <div class="flex flex-col w-full min-w-0">
-        <div class="flex">
-          <Show
-            when={
-              props.theme.chat.hostAvatar?.isEnabled &&
-              props.messages.length > 0
-            }
-          >
-            <AvatarSideContainer
-              hostAvatarSrc={props.theme.chat.hostAvatar?.url}
-              hideAvatar={props.hideAvatar}
-            />
-          </Show>
-          <div
-            class="flex-1"
-            style={{
-              'margin-right': props.theme.chat.guestAvatar?.isEnabled
-                ? isMobile()
-                  ? '32px'
-                  : '48px'
-                : undefined,
-            }}
-          >
-            <For each={props.messages.slice(0, displayedMessageIndex() + 1)}>
-              {(message) => (
-                <HostBubble
-                  message={message}
-                  typingEmulation={props.settings.typingEmulation}
-                  onTransitionEnd={displayNextMessage}
-                />
-              )}
-            </For>
-          </div>
-        </div>
-        {props.input && displayedMessageIndex() === props.messages.length && (
-          <InputChatBlock
-            block={props.input}
-            inputIndex={props.inputIndex}
-            onSubmit={props.onSubmit}
-            onSkip={props.onSkip}
-            hasHostAvatar={props.theme.chat.hostAvatar?.isEnabled ?? false}
-            guestAvatar={props.theme.chat.guestAvatar}
-            context={props.context}
-            isInputPrefillEnabled={
-              props.settings.general.isInputPrefillEnabled ?? true
-            }
-            hasError={props.hasError}
+    <div class="flex flex-col w-full min-w-0 gap-2">
+      <div class={'flex' + (isMobile() ? ' gap-1' : ' gap-2')}>
+        <Show
+          when={
+            props.theme.chat.hostAvatar?.isEnabled && props.messages.length > 0
+          }
+        >
+          <AvatarSideContainer
+            hostAvatarSrc={props.theme.chat.hostAvatar?.url}
+            hideAvatar={props.hideAvatar}
           />
-        )}
+        </Show>
+        <div
+          class="flex flex-col flex-1 gap-2"
+          style={{
+            'margin-right': props.theme.chat.guestAvatar?.isEnabled
+              ? isMobile()
+                ? '32px'
+                : '48px'
+              : undefined,
+          }}
+        >
+          <For each={props.messages.slice(0, displayedMessageIndex() + 1)}>
+            {(message) => (
+              <HostBubble
+                message={message}
+                typingEmulation={props.settings.typingEmulation}
+                onTransitionEnd={displayNextMessage}
+              />
+            )}
+          </For>
+        </div>
       </div>
+      {props.input && displayedMessageIndex() === props.messages.length && (
+        <InputChatBlock
+          block={props.input}
+          inputIndex={props.inputIndex}
+          onSubmit={props.onSubmit}
+          onSkip={props.onSkip}
+          hasHostAvatar={props.theme.chat.hostAvatar?.isEnabled ?? false}
+          guestAvatar={props.theme.chat.guestAvatar}
+          context={props.context}
+          isInputPrefillEnabled={
+            props.settings.general.isInputPrefillEnabled ?? true
+          }
+          hasError={props.hasError}
+        />
+      )}
     </div>
   )
 }
diff --git a/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx b/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
@@ -184,7 +184,7 @@ export const ConversationContainer = (props: Props) => {
   return (
     <div
       ref={chatContainer}
-      class="overflow-y-scroll w-full min-h-full px-3 pt-10 relative scrollable-container typebot-chat-view scroll-smooth"
+      class="flex flex-col overflow-y-scroll w-full min-h-full px-3 pt-10 relative scrollable-container typebot-chat-view scroll-smooth gap-2"
     >
       <For each={chatChunks()}>
         {(chatChunk, index) => (
@@ -228,5 +228,5 @@ type BottomSpacerProps = {
   ref: HTMLDivElement | undefined
 }
 const BottomSpacer = (props: BottomSpacerProps) => {
-  return <div ref={props.ref} class="w-full h-32" />
+  return <div ref={props.ref} class="w-full h-32 flex-shrink-0" />
 }
diff --git a/packages/embeds/js/src/components/ConversationContainer/PopupBlockedToast.tsx b/packages/embeds/js/src/components/ConversationContainer/PopupBlockedToast.tsx
@@ -9,17 +9,18 @@ export const PopupBlockedToast = (props: Props) => {
       class="w-full max-w-xs p-4 text-gray-500 bg-white shadow flex flex-col gap-2 typebot-popup-blocked-toast"
       role="alert"
     >
-      <span class="mb-1 text-sm font-semibold text-gray-900">
-        Popup blocked
-      </span>
-      <div class="mb-2 text-sm font-normal">
-        The bot wants to open a new tab but it was blocked by your broswer. It
-        needs a manual approval.
+      <div class="flex flex-col gap-1">
+        <span class=" text-sm font-semibold text-gray-900">Popup blocked</span>
+        <div class="text-sm font-normal">
+          The bot wants to open a new tab but it was blocked by your broswer. It
+          needs a manual approval.
+        </div>
       </div>
+
       <a
         href={props.url}
         target="_blank"
-        class="py-1 px-4 justify-center text-sm font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button"
+        class="py-1 px-4 justify-center text-sm font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 filter hover:brightness-90 active:brightness-75 typebot-button"
         rel="noreferrer"
         onClick={() => props.onLinkClick()}
       >