feat: content actions slot (#51)

* feat: content actions slot * fix: lint * fix: hide actions * test: content-actions
Kong · Mar 18, 2024 · b8aa3b0 · b8aa3b0
1 parent 8c610ca
commit b8aa3b0
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -225,6 +225,10 @@ A slot for providing a custom element (i.e. `button`) that enables the `Edit` mo
 
 When the `edit` button (native, or custom) is clicked, the component will automatically determine whether to enable `edit` or `split` mode based on the browser's viewport width. On larger screens, the editor will launch in `split` mode.
 
+#### `content-actions`
+
+A slot for providing "floating actions" at the top right of the rendered markdown document. This slot also exposes the `edit` and `download` methods mentioned above.
+
 #### `download`
 
 A slot for providing a custom element (i.e. `button`) that triggers the `Download` functionality within the component. The slot exposes the `download` method to trigger the built-in function.

diff --git a/src/components/MarkdownUi.spec.ts b/src/components/MarkdownUi.spec.ts
@@ -1,6 +1,6 @@
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
-import { ref } from 'vue'
+import { ref, h } from 'vue'
 import MarkdownUi from './MarkdownUi.vue'
 import { InlineFormatWrapper, MARKDOWN_TEMPLATE_CODEBLOCK, MARKDOWN_TEMPLATE_TASK, MARKDOWN_TEMPLATE_UL, MARKDOWN_TEMPLATE_OL, MARKDOWN_TEMPLATE_BLOCKQUOTE, MARKDOWN_TEMPLATE_TABLE, MARKDOWN_TEMPLATE_LINK } from '@/constants'
 import { KUI_BREAKPOINT_PHABLET } from '@kong/design-tokens'
@@ -724,4 +724,30 @@ describe('<MarkdownUi />', () => {
       }
     })
   })
+
+  describe('slots', () => {
+    it('displays slot content if provided', async () => {
+      const buttonText = 'Custom toolbar button'
+
+      const wrapper = mount(MarkdownUi, {
+        props: {
+          mode: 'read',
+          editable: true,
+          downloadable: true,
+          modelValue: defaultContent,
+        },
+        slots: {
+          'content-actions': h('button', { 'data-testid': 'custom' }, buttonText),
+        },
+      })
+
+      expect(wrapper.get('.content-actions').isVisible()).toBe(true)
+      // Slotted button
+      expect(wrapper.findTestId('custom').isVisible()).toBe(true)
+      expect(wrapper.findTestId('custom').text()).toEqual(buttonText)
+      // Default slot content should not exist
+      expect(wrapper.findTestId('download').exists()).toBe(false)
+      expect(wrapper.findTestId('edit').exists()).toBe(false)
+    })
+  })
 })
diff --git a/src/components/MarkdownUi.vue b/src/components/MarkdownUi.vue
@@ -80,55 +80,64 @@
           class="markdown-content-container"
           data-testid="markdown-content-container"
         >
-          <div class="content-buttons">
-            <div
-              v-if="currentMode === 'read' && !!rawMarkdown?.length && downloadable"
-              class="download-button"
+          <div
+            v-if="currentMode === 'read'"
+            class="content-actions"
+          >
+            <slot
+              :download="!!rawMarkdown?.length && downloadable ? download : undefined"
+              :edit="editable ? edit : undefined"
+              name="content-actions"
             >
-              <slot
-                :download="download"
-                name="download"
+              <div
+                v-if="currentMode === 'read' && !!rawMarkdown?.length && downloadable"
+                class="download-button"
               >
-                <ToolbarButton
-                  appearance="primary"
-                  aria-label="Download markdown document"
-                  data-testid="download"
-                  :icon="false"
-                  :tabindex="0"
-                  @click="download"
+                <slot
+                  :download="download"
+                  name="download"
                 >
-                  <DownloadIcon
-                    decorative
-                    :size="KUI_ICON_SIZE_30"
-                  />
-                  <span class="content-button-text">Download</span>
-                </ToolbarButton>
-              </slot>
-            </div>
-            <div
-              v-if="currentMode === 'read' && editable"
-              class="edit-button"
-            >
-              <slot
-                :edit="edit"
-                name="edit"
+                  <ToolbarButton
+                    appearance="primary"
+                    aria-label="Download markdown document"
+                    data-testid="download"
+                    :icon="false"
+                    :tabindex="0"
+                    @click="download"
+                  >
+                    <DownloadIcon
+                      decorative
+                      :size="KUI_ICON_SIZE_30"
+                    />
+                    <span class="content-button-text">Download</span>
+                  </ToolbarButton>
+                </slot>
+              </div>
+              <div
+                v-if="currentMode === 'read' && editable"
+                class="edit-button"
               >
-                <ToolbarButton
-                  appearance="primary"
-                  aria-label="Edit markdown document"
-                  data-testid="edit"
-                  :icon="false"
-                  :tabindex="0"
-                  @click="edit"
+                <slot
+                  :edit="edit"
+                  name="edit"
                 >
-                  <EditIcon
-                    decorative
-                    :size="KUI_ICON_SIZE_30"
-                  />
-                  <span class="content-button-text">Edit</span>
-                </ToolbarButton>
-              </slot>
-            </div>
+                  <ToolbarButton
+                    appearance="primary"
+                    aria-label="Edit markdown document"
+                    data-testid="edit"
+                    :icon="false"
+                    :tabindex="0"
+                    @click="edit"
+                  >
+                    <EditIcon
+                      decorative
+                      :size="KUI_ICON_SIZE_30"
+                    />
+                    <span class="content-button-text">Edit</span>
+                  </ToolbarButton>
+                </slot>
+              </div>
+            </slot>
           </div>
           <MarkdownContent
             :class="{ 'html-preview': htmlPreview }"
@@ -681,7 +690,7 @@ const markdownPanesMaxHeight = computed((): string => `${props.maxHeight}px`)
       padding-top: 0;
     }
 
-    .content-buttons {
+    .content-actions {
       align-items: center;
       display: flex;
       gap: var(--kui-space-20, $kui-space-20);