💄 Improve picture choice description UI

2023-06-01 10:29:02 +02:00
parent 537b9fe6ce
commit b6e5002a56
8 changed files with 62 additions and 18 deletions
--- a/apps/builder/src/features/blocks/inputs/date/components/DateInputSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/date/components/DateInputSettings.tsx
@ -33,7 +33,7 @@ export const DateInputSettings = ({ options, onOptionsChange }: Props) => {
      />
      <SwitchWithLabel
        label="With time?"
-        initialValue={options.isRange}
+        initialValue={options.hasTime}
        onCheckChange={handleHasTimeChange}
      />
      {options.isRange && (
--- a/apps/docs/docs/editor/blocks/integrations/google-sheets.mdx
+++ b/apps/docs/docs/editor/blocks/integrations/google-sheets.mdx
@ -14,6 +14,10 @@ In order to properly work, your spreadsheet must have its first row as a header
  alt="Google Analytics block"
 />

+## How to add the submission date to my row?
+
+For this, you will need to set a new variable with the value "Today" before the Google Sheets block. Then you can simply use this variable in the Google Sheets block.
+
 ## Troubleshooting

 The Google sheets block didn't insert or update a row but was supposed to? Make sure to check the [logs](/editor/results). If you still can't figure out what went wrong, shoot me a message using the chat button directly in the tool 👍
--- a/apps/docs/docs/embed/html-javascript.md
+++ b/apps/docs/docs/embed/html-javascript.md
@ -12,7 +12,7 @@ There, you can change the container dimensions. Here is a code example:

 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'

  Typebot.initStandard({
    typebot: 'my-typebot',
@ -32,7 +32,7 @@ Here is an example:

 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'

  Typebot.initPopup({
    typebot: 'my-typebot',
@ -66,6 +66,36 @@ You can bind these commands on a button element, for example:
 <button onclick="Typebot.open()">Contact us</button>
 ```

+### Multiple bots
+
+If you have different bots on the same page you will have to make them distinct with an additional `id` prop:
+
+```html
+<script type="module">
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+
+  Typebot.initStandard({
+    id: 'bot1'
+    typebot: 'my-typebot',
+  })
+
+  Typebot.initStandard({
+    id: 'bot2'
+    typebot: 'my-typebot-2',
+  })
+</script>
+
+<typebot-standard
+  id="bot1"
+  style="width: 100%; height: 600px; "
+></typebot-standard>
+...
+<typebot-standard
+  id="bot2"
+  style="width: 100%; height: 600px; "
+></typebot-standard>
+```
+
 ## Bubble

 You can get the bubble HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
@ -74,7 +104,7 @@ Here is an example:

 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'

  Typebot.initBubble({
    typebot: 'my-typebot',
--- a/packages/embeds/js/README.md
+++ b/packages/embeds/js/README.md
@ -34,7 +34,7 @@ There, you can change the container dimensions. Here is a code example:

 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'

  Typebot.initStandard({
    typebot: 'my-typebot',
@ -54,7 +54,7 @@ Here is an example:

 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'

  Typebot.initPopup({
    typebot: 'my-typebot',
@ -96,7 +96,7 @@ Here is an example:

 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.9/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'

  Typebot.initBubble({
    typebot: 'my-typebot',
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@ -1,6 +1,6 @@
 {
  "name": "@typebot.io/js",
-  "version": "0.0.60",
+  "version": "0.0.61",
  "description": "Javascript library to display typebots on your website",
  "type": "module",
  "main": "dist/index.js",
--- a/packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx
@ -120,14 +120,17 @@ export const MultiplePictureChoice = (props: Props) => {
                  'flex gap-3 py-2 flex-shrink-0' +
                  (isEmpty(item.title) && isEmpty(item.description)
                    ? ' justify-center'
-                    : ' pl-4')
+                    : ' px-3')
                }
              >
                <Checkbox
                  isChecked={selectedItemIds().some(
                    (selectedItemId) => selectedItemId === item.id
                  )}
-                  class={item.title || item.description ? 'mt-1' : undefined}
+                  class={
+                    'flex-shrink-0' +
+                    (item.title || item.description ? ' mt-1' : undefined)
+                  }
                />
                <Show when={item.title || item.description}>
                  <div class="flex flex-col gap-1 ">
@ -135,7 +138,9 @@ export const MultiplePictureChoice = (props: Props) => {
                      <span class="font-semibold">{item.title}</span>
                    </Show>
                    <Show when={item.description}>
-                      <span class="text-sm">{item.description}</span>
+                      <span class="text-sm whitespace-pre-wrap text-left">
+                        {item.description}
+                      </span>
                    </Show>
                  </div>
                </Show>
@ -186,9 +191,10 @@ export const MultiplePictureChoice = (props: Props) => {
                    (selectedItemId) => selectedItemId === selectedItem.id
                  )}
                  class={
-                    selectedItem.title || selectedItem.description
+                    'flex-shrink-0' +
+                    (selectedItem.title || selectedItem.description
                      ? ' mt-1'
-                      : undefined
+                      : undefined)
                  }
                />
                <Show when={selectedItem.title || selectedItem.description}>
@ -197,7 +203,9 @@ export const MultiplePictureChoice = (props: Props) => {
                      <span class="font-semibold">{selectedItem.title}</span>
                    </Show>
                    <Show when={selectedItem.description}>
-                      <span class="text-sm">{selectedItem.description}</span>
+                      <span class="text-sm whitespace-pre-wrap text-left">
+                        {selectedItem.description}
+                      </span>
                    </Show>
                  </div>
                </Show>
--- a/packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx
@ -87,7 +87,9 @@ export const SinglePictureChoice = (props: Props) => {
                }
              >
                <span class="font-semibold">{item.title}</span>
-                <span class="text-sm">{item.description}</span>
+                <span class="text-sm whitespace-pre-wrap text-left">
+                  {item.description}
+                </span>
              </div>
            </button>
          )}
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@ -1,6 +1,6 @@
 {
  "name": "@typebot.io/react",
-  "version": "0.0.60",
+  "version": "0.0.61",
  "description": "React library to display typebots on your website",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",