Add bottom drawer for mobile devices

packages/design-system/docs/.vitepress/config.ts

@@ -122,6 +122,10 @@ export default defineConfig({
               text: 'OcAvatars',
               link: '/OcAvatars'
             },
+            {
+              text: 'OcBottomDrawer',
+              link: '/OcBottomDrawer'
+            },
             {
               text: 'OcBreadcrumb',
               link: '/OcBreadcrumb'

packages/design-system/docs/components/OcBottomDrawer/OcBottomDrawer.md

@@ -0,0 +1,31 @@
+---
+title: OcBottomDrawer component
+next: false
+prev: false
+---
+
+# OcBottomDrawer component
+
+## Description
+
+The `OcBottomDrawer` component can be used to display content in a bottom drawer that slides up from the bottom of the screen. It is especially useful on mobile devices instead of showing dropdown menus to the user.
+
+## Examples
+
+### Default
+
+The default use case gets an ID and the selector of the toggle button as props.
+
+::: livecode {path=/components/OcBottomDrawer/default.vue}
+<<< @/components/OcBottomDrawer/default.vue
+:::
+
+### Portal
+
+You can also provide a `portal-target` via `portal-vue` if you want to render the bottom drawer outside of the current DOM hierarchy.
+
+::: livecode {path=/components/OcBottomDrawer/portal.vue}
+<<< @/components/OcBottomDrawer/portal.vue
+:::
+
+::: component-api

packages/design-system/docs/components/OcBottomDrawer/default.vue

@@ -0,0 +1,10 @@
+<template>
+  <oc-button id="toggle-bottom-drawer">Open bottom drawer</oc-button>
+  <oc-bottom-drawer
+    drawer-id="example-bottom-drawer"
+    toggle="#toggle-bottom-drawer"
+    title="Example Bottom Drawer"
+  >
+    Some content in the bottom drawer.
+  </oc-bottom-drawer>
+</template>

packages/design-system/docs/components/OcBottomDrawer/portal.vue

@@ -0,0 +1,13 @@
+<template>
+  <portal-target name="app.runtime.bottom.drawer" />
+
+  <oc-button id="toggle-bottom-drawer-portal">Open bottom drawer</oc-button>
+  <oc-bottom-drawer
+    drawer-id="example-bottom-drawer"
+    toggle="#toggle-bottom-drawer-portal"
+    title="Example Bottom Drawer"
+    use-portal
+  >
+    Some content in the bottom drawer.
+  </oc-bottom-drawer>
+</template>

packages/design-system/package.json

@@ -98,6 +98,7 @@
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@popperjs/core": "^2.11.5",
+    "@vueuse/core": "^13.5.0",
     "deepmerge": "^4.2.2",
     "emoji-mart": "^5.6.0",
     "focus-trap": "^7.6.0",

packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.spec.ts

@@ -0,0 +1,136 @@
+import { defaultPlugins, mount } from '@opencloud-eu/web-test-helpers'
+import BottomDrawer from './OcBottomDrawer.vue'
+import { defineComponent, nextTick } from 'vue'
+import OcButton from '../OcButton/OcButton.vue'
+
+const selectors = {
+  toggle: '#button-drawer-toggle',
+  drawer: '.oc-bottom-drawer',
+  closeButton: '.oc-bottom-drawer-close-button',
+  background: '.oc-bottom-drawer-background',
+  actionButton: '#action-button'
+}
+
+describe('OcBottomDrawer', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders when toggle is clicked', async () => {
+    const { wrapper } = getWrapper()
+    await wrapper.find(selectors.toggle).trigger('click')
+    expect(wrapper.find(selectors.drawer).exists()).toBe(true)
+    expect(wrapper.html()).toMatchSnapshot()
+    wrapper.unmount()
+  })
+
+  it('does not render when toggle is not clicked', async () => {
+    const { wrapper } = getWrapper()
+    await nextTick()
+    expect(wrapper.find(selectors.drawer).exists()).toBe(false)
+  })
+
+  it('closes when close button is clicked', async () => {
+    const { wrapper } = getWrapper()
+
+    await wrapper.find(selectors.toggle).trigger('click')
+    expect(wrapper.find(selectors.drawer).exists()).toBe(true)
+
+    wrapper.find(selectors.closeButton).trigger('click')
+    await new Promise((r) => setTimeout(r, 160))
+    expect(wrapper.find(selectors.drawer).exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('closes when background is clicked', async () => {
+    const { wrapper } = getWrapper()
+
+    await wrapper.find(selectors.toggle).trigger('click')
+    expect(wrapper.find(selectors.drawer).exists()).toBe(true)
+
+    await wrapper.find(selectors.background).trigger('click')
+    await new Promise((r) => setTimeout(r, 160))
+    expect(wrapper.find(selectors.drawer).exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('closes when esc key is pressed', async () => {
+    const { wrapper } = getWrapper()
+
+    await wrapper.find(selectors.toggle).trigger('click')
+    await nextTick()
+    expect(wrapper.find(selectors.drawer).exists()).toBe(true)
+
+    const esc = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
+    document.dispatchEvent(esc)
+    await new Promise((r) => setTimeout(r, 160))
+    expect(wrapper.find(selectors.drawer).exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('closes when inner button is clicked and "closeOnClick" is true', async () => {
+    const { wrapper } = getWrapper({ closeOnClick: true })
+
+    wrapper.find(selectors.toggle).trigger('click')
+    await nextTick()
+    expect(wrapper.find(selectors.drawer).exists()).toBe(true)
+
+    wrapper.find(selectors.actionButton).trigger('click')
+    await new Promise((r) => setTimeout(r, 160))
+    expect(wrapper.find(selectors.drawer).exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('does not close when inner button is clicked and "closeOnClick" is false', async () => {
+    const { wrapper } = getWrapper({ closeOnClick: false })
+
+    wrapper.find(selectors.toggle).trigger('click')
+    await nextTick()
+    expect(wrapper.find(selectors.drawer).exists()).toBe(true)
+
+    wrapper.find(selectors.actionButton).trigger('click')
+    await new Promise((r) => setTimeout(r, 160))
+    expect(wrapper.find(selectors.drawer).exists()).toBe(true)
+    wrapper.unmount()
+  })
+})
+
+const getWrapper = (props = { closeOnClick: false }) => {
+  const RootComponent = defineComponent({
+    components: { BottomDrawer, OcButton },
+    props: ['props'],
+    template: `
+      <div>
+        <button id="button-drawer-toggle">Toggle Drawer</button>
+        <BottomDrawer
+          drawerId="button-drawer"
+          toggle="#button-drawer-toggle"
+          title="Bottom Drawer"
+          :close-on-click="${props.closeOnClick}"
+          v-bind="props"
+        >
+          <oc-button
+            appearance="raw"
+            class="raw-hover-surface"
+            id="action-button"
+          >
+            action button
+          </oc-button>
+        </BottomDrawer>
+      </div>
+    `
+  })
+
+  return {
+    wrapper: mount(RootComponent, {
+      props: {
+        drawerId: 'button-drawer',
+        toggle: '#button-drawer-toggle',
+        title: 'Bottom Drawer',
+        ...props
+      },
+      attachTo: document.body,
+      global: { renderStubDefaultSlot: true, plugins: [...defaultPlugins()] }
+    })
+  }
+}