feat(drawer): implement simple drawer

acronis · Jul 5, 2024 · 07b4f64 · 07b4f64
1 parent c0de581
commit 07b4f64
Show file tree

Hide file tree

Showing 20 changed files with 533 additions and 74 deletions.
diff --git a/packages/documentation/components/drawer/drawer.doc.md b/packages/documentation/components/drawer/drawer.doc.md
@@ -1,49 +1,85 @@
 ---
-title: Drawer component
+title: Acv Drawer component
 lang: en-US
 editLink: true
 ---
 
-# Drawer
+# Acv Drawer
 
-Short description for Drawer component...
-
-:::info Figma component anatomy
-https://www.figma.com/file/
-:::
+Drawer is a panel that slides in from the edge of the screen.
+It can be used to show additional content without taking up space on the main screen.
 
 ## Basic usage
 
+`AcvDrawer` component uses `AcvCard` as its base.
+Bind `AcvDrawer` with `v-model` to hide and show drawer/card.
+
+All props & slots available in `AcvCard` is available in `AcvDrawer`.
+
 <DrawerBasic />
 
-::: details Source code
+::: details DrawerBasic
 <<< @/demos/drawer/DrawerBasic.vue
 :::
 
-## Best practices
+## Anchor
+
+You can change the position of the drawer by providing the values `left`,`right`,`top` or `bottom` to the `anchor` prop.
+
+<DrawerAnchor />
+
+::: details DrawerAnchor
+<<< @/demos/drawer/DrawerAnchor.vue{37,45}
+:::
+
+## Width
+
+Use width utility classes to provide custom width to drawer.
+
+<DrawerWidth />
+
+::: details DrawerWidth
+<<< @/demos/drawer/DrawerWidth.vue{13}
+:::
+
+## Persistent
+
+You can disable closing drawer on outside click via `persistent` prop.
+
+<DrawerPersistent />
+
+::: details DrawerPersistent
+<<< @/demos/drawer/DrawerPersistent.vue{14}
+:::
+
+## Accessibility
 
-A Drawer should ...
+Drawer is accessible by default.
+It can be opened and closed using `esc` key.
 
 ## Related components
 
-- [Button](/components/button/button.doc)
+- [Card](/components/card/card.doc)
 
 ## Props
 
-| Prop name   | Description               | Type   | Values | Default |
-| ----------- | ------------------------- | ------ | ------ | ------- |
-| title       | Title of the Drawer       | string | -      |         |
-| description | Description of the Drawer | string | -      |         |
+| Prop name       | Description                                                     | Type            | Values | Default |
+| --------------- | --------------------------------------------------------------- | --------------- | ------ | ------- |
+| textColor       | Text color of the card                                          | string          | -      |         |
+| borderColor     | Border color of the card                                        | string          | -      |         |
+| backgroundColor | Background color of the card                                    | union           | -      |         |
+| modelValue      | Drawer visiblity state                                          | boolean         | -      | false   |
+| persistent      | Persistence of drawer when clicked outside of reference element | boolean         | -      | false   |
+| anchor          | Drawer anchor/position                                          | AcvDrawerAnchor | -      | 'left'  |
 
 ## Events
 
-| Event name | Properties                                                                                                      | Description                            |
-| ---------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
-| close      | **eventName** `string` - The name of the event<br/>**visible** `string` - The visibility state of the component | Triggered when the component is closed |
+| Event name        | Properties                                                                                                      | Description                            |
+| ----------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| update:modelValue | **eventName** `string` - The name of the event<br/>**visible** `string` - The visibility state of the component | Triggered when the component is closed |
 
 ## Slots
 
-| Name        | Description                  | Bindings |
-| ----------- | ---------------------------- | -------- |
-| default     | The default slot content     |          |
-| description | The description slot content |          |
+| Name | Description | Bindings |
+| ---- | ----------- | -------- |
+| name |             |          |
diff --git a/packages/documentation/demos/__data__/data.mock.card.js b/packages/documentation/demos/__data__/data.mock.card.js
@@ -0,0 +1,12 @@
+export default {
+  title: 'Card title',
+  subtitle: 'Card subtitle',
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.',
+  image: '/images/hotel.png',
+  actions: [
+    {
+      label: 'Action 1',
+      onClick: () => console.log('Action 1 clicked')
+    }
+  ]
+};
diff --git a/packages/documentation/demos/drawer/DrawerAnchor.vue b/packages/documentation/demos/drawer/DrawerAnchor.vue
@@ -0,0 +1,66 @@
+<script setup>
+  import { ref } from 'vue';
+  import AcvDrawer from '@/components/drawer/drawer.vue';
+  import AcvButton from '@/components/button/button.vue';
+
+  const isDrawerLeftShown = ref(false);
+  const isDrawerRightShown = ref(false);
+  const isDrawerTopShown = ref(false);
+  const isDrawerBottomShown = ref(false);
+</script>
+
+<template>
+  <AcvButton
+    class="mr-4"
+    @click="isDrawerLeftShown = true"
+  >
+    Left
+  </AcvButton>
+  <AcvButton
+    class="mr-4"
+    @click="isDrawerRightShown = true"
+  >
+    Right
+  </AcvButton>
+  <AcvButton
+    class="mr-4"
+    @click="isDrawerTopShown = true"
+  >
+    Top
+  </AcvButton>
+  <AcvButton @click="isDrawerBottomShown = true">
+    Bottom
+  </AcvButton>
+
+  <AcvDrawer
+    v-model="isDrawerLeftShown"
+    anchor="left"
+    title="CARPE DIEM, SESTIUS"
+    subtitle="Solvitur acris hiems grata vice veris et Favoni
+trahuntque siccas machinae carinas"
+  />
+
+  <AcvDrawer
+    v-model="isDrawerRightShown"
+    anchor="right"
+    title="CARPE DIEM, SESTIUS"
+    subtitle="Solvitur acris hiems grata vice veris et Favoni
+trahuntque siccas machinae carinas"
+  />
+
+  <AcvDrawer
+    v-model="isDrawerTopShown"
+    anchor="top"
+    title="CARPE DIEM, SESTIUS"
+    subtitle="Solvitur acris hiems grata vice veris et Favoni
+trahuntque siccas machinae carinas"
+  />
+
+  <AcvDrawer
+    v-model="isDrawerBottomShown"
+    anchor="bottom"
+    title="CARPE DIEM, SESTIUS"
+    subtitle="Solvitur acris hiems grata vice veris et Favoni
+trahuntque siccas machinae carinas"
+  />
+</template>
diff --git a/packages/documentation/demos/drawer/DrawerBasic.vue b/packages/documentation/demos/drawer/DrawerBasic.vue
@@ -1,7 +1,20 @@
 <script setup>
-  import Drawer from '@/components/drawer/drawer.vue';
+  import { ref } from 'vue';
+  import AcvDrawer from '@/components/drawer/drawer.vue';
+  import AcvButton from '@/components/button/button.vue';
+
+  const isDrawerShown = ref(false);
 </script>
 
 <template>
-  <Drawer />
+  <AcvDrawer
+    v-model="isDrawerShown"
+    title="CARPE DIEM, SESTIUS"
+    subtitle="Solvitur acris hiems grata vice veris et Favoni
+trahuntque siccas machinae carinas"
+  />
+
+  <AcvButton @click="isDrawerShown = true">
+    Show drawer
+  </AcvButton>
 </template>
diff --git a/packages/documentation/demos/drawer/DrawerPersistent.vue b/packages/documentation/demos/drawer/DrawerPersistent.vue
@@ -0,0 +1,34 @@
+<script setup>
+  import { ref } from 'vue';
+  import cardMock from '../__data__/data.mock.card.js';
+  import AcvDrawer from '@/components/drawer/drawer.vue';
+  import AcvButton from '@/components/button/button.vue';
+  import AcvTypography from '@/components/typography/typography.vue';
+
+  const isDrawerShown = ref(false);
+</script>
+
+<template>
+  <AcvDrawer
+    v-model="isDrawerShown"
+    persistent
+  >
+    <div class="a-card-body">
+      <AcvTypography
+        :title="cardMock.title"
+        :subtitle="cardMock.subtitle"
+        :text="cardMock.text"
+      />
+      <AcvButton
+        class="text-sm"
+        @click="isDrawerShown = false"
+      >
+        Close
+      </AcvButton>
+    </div>
+  </AcvDrawer>
+
+  <AcvButton @click="isDrawerShown = true">
+    Show drawer
+  </AcvButton>
+</template>
diff --git a/packages/documentation/demos/drawer/DrawerWidth.vue b/packages/documentation/demos/drawer/DrawerWidth.vue
@@ -0,0 +1,19 @@
+<script setup>
+  import { ref } from 'vue';
+
+  const isDrawerShown = ref(false);
+</script>
+
+<template>
+  <AcvDrawer
+    v-model="isDrawerShown"
+    title="CARPE DIEM, SESTIUS"
+    subtitle="Solvitur acris hiems grata vice veris et Favoni
+trahuntque siccas machinae carinas"
+    class="!w-[400px]"
+  />
+
+  <AcvButton @click="isDrawerShown = true">
+    Show drawer
+  </AcvButton>
+</template>
diff --git a/packages/ui/src/components/card/card.spec.ts b/packages/ui/src/components/card/card.spec.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
 import Card from './card.vue';
-import type { CardProps } from './card.ts';
+import type { AcvCardProps } from './card.ts';
 
 describe('test Card component', () => {
   it('default props', () => {
@@ -19,7 +19,7 @@ describe('test Card component', () => {
     const wrapper = mount(Card, {
       props: {
         title: 'test',
-      } as CardProps,
+      } as AcvCardProps,
     });
 
     expect(wrapper.props()).toMatchInlineSnapshot(`

diff --git a/packages/ui/src/components/card/card.ts b/packages/ui/src/components/card/card.ts
@@ -1,4 +1,4 @@
-export interface CardProps {
+export interface AcvCardProps {
   /**
    * Background color of the card
    */

diff --git a/packages/ui/src/components/card/card.vue b/packages/ui/src/components/card/card.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
   import { computed } from 'vue';
   import './card.css';
-  import type { CardProps } from './card.ts';
+  import type { AcvCardProps } from './card.ts';
 
-  const { backgroundColor, borderColor } = defineProps<CardProps>();
+  const { backgroundColor, borderColor } = defineProps<AcvCardProps>();
   defineEmits<{
     close: []
   }>();

diff --git a/packages/ui/src/components/drawer/drawer.css b/packages/ui/src/components/drawer/drawer.css
@@ -2,5 +2,6 @@
   :root {
     /* Insert component css variables here */
     --acv-drawer-color: var(--acv-color-brand-primary);
+    --acv-drawer-z-index: var(--acv-z-index-overlay);
   }
 }
diff --git a/packages/ui/src/components/drawer/drawer.md b/packages/ui/src/components/drawer/drawer.md
@@ -1,21 +1,54 @@
-Short description for Drawer component...
-
-:::info Figma component anatomy
-https://www.figma.com/file/
-:::
+Drawer is a panel that slides in from the edge of the screen.
+It can be used to show additional content without taking up space on the main screen.
 
 ## Basic usage
 
+`AcvDrawer` component uses `AcvCard` as its base.
+Bind `AcvDrawer` with `v-model` to hide and show drawer/card.
+
+All props & slots available in `AcvCard` is available in `AcvDrawer`.
+
 <DrawerBasic />
 
-::: details Source code
+::: details DrawerBasic
 <<< @/demos/drawer/DrawerBasic.vue
 :::
 
-## Best practices
+## Anchor
+
+You can change the position of the drawer by providing the values `left`,`right`,`top` or `bottom` to the `anchor` prop.
+
+<DrawerAnchor />
+
+::: details DrawerAnchor
+<<< @/demos/drawer/DrawerAnchor.vue{37,45}
+:::
+
+## Width
+
+Use width utility classes to provide custom width to drawer.
+
+<DrawerWidth />
+
+::: details DrawerWidth
+<<< @/demos/drawer/DrawerWidth.vue{13}
+:::
+
+## Persistent
+
+You can disable closing drawer on outside click via `persistent` prop.
+
+<DrawerPersistent />
+
+::: details DrawerPersistent
+<<< @/demos/drawer/DrawerPersistent.vue{14}
+:::
+
+## Accessibility
 
-A Drawer should ...
+Drawer is accessible by default.
+It can be opened and closed using `esc` key.
 
 ## Related components
 
-- [Button](/components/button/button.doc)
+- [Card](/components/card/card.doc)