@weni/unnnic-system 3.12.7 → 3.12.8-alpha-teleports.0

package/src/stories/LayerManager.stories.js

@@ -0,0 +1,407 @@
+import { ref } from 'vue';
+import UnnnicButton from '../components/Button/Button.vue';
+import UnnnicToast from '../components/Toast/Toast.vue';
+
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from '../components/ui/dialog';
+
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from '../components/ui/drawer';
+
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '../components/ui/popover';
+
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from '../components/ui/tooltip';
+
+export default {
+  title: 'Utilities/Layer Manager',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Minimal stories that prove the global layer manager keeps dialogs, drawers, tooltips, popovers and toasts in the right stacking order.',
+      },
+    },
+  },
+};
+
+export const DialogWithTooltipAndPopover = {
+  name: 'Dialog > Tooltip + Popover',
+  render: () => ({
+    components: {
+      Dialog,
+      DialogTrigger,
+      DialogContent,
+      DialogHeader,
+      DialogTitle,
+      DialogFooter,
+      DialogClose,
+      Tooltip,
+      TooltipTrigger,
+      TooltipContent,
+      Popover,
+      PopoverTrigger,
+      PopoverContent,
+      UnnnicButton,
+    },
+    template: `
+      <Dialog>
+        <DialogTrigger>
+          <UnnnicButton text="Open dialog" type="primary" />
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog surface</DialogTitle>
+          </DialogHeader>
+
+          <div style="padding: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
+            <Tooltip>
+              <TooltipTrigger>
+                <UnnnicButton text="Tooltip" type="secondary" />
+              </TooltipTrigger>
+              <TooltipContent>This tooltip should appear above the dialog.</TooltipContent>
+            </Tooltip>
+
+            <Popover>
+              <PopoverTrigger>
+                <UnnnicButton text="Popover" type="primary" />
+              </PopoverTrigger>
+              <PopoverContent>
+                <section style="padding: 16px;">
+                  <p style="margin: 0; color: #67738B;">
+                    Popover content should also float above.
+                  </p>
+                </section>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          <DialogFooter>
+            <DialogClose>
+              <UnnnicButton text="Close" type="tertiary" />
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    `,
+  }),
+};
+
+export const DrawerWithTooltipAndPopover = {
+  name: 'Drawer > Tooltip + Popover',
+  render: () => ({
+    components: {
+      Drawer,
+      DrawerTrigger,
+      DrawerContent,
+      DrawerHeader,
+      DrawerTitle,
+      DrawerDescription,
+      DrawerFooter,
+      DrawerClose,
+      Tooltip,
+      TooltipTrigger,
+      TooltipContent,
+      Popover,
+      PopoverTrigger,
+      PopoverContent,
+      UnnnicButton,
+    },
+    template: `
+      <Drawer>
+        <DrawerTrigger>
+          <UnnnicButton text="Open drawer" type="primary" />
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Drawer surface</DrawerTitle>
+            <DrawerDescription>Interact with floating layers.</DrawerDescription>
+          </DrawerHeader>
+
+          <div style="padding: 24px; display: flex; flex-direction: column; gap: 16px;">
+            <Tooltip>
+              <TooltipTrigger>
+                <UnnnicButton text="Tooltip" type="secondary" />
+              </TooltipTrigger>
+              <TooltipContent>Tooltip should appear above the drawer.</TooltipContent>
+            </Tooltip>
+
+            <Popover>
+              <PopoverTrigger>
+                <UnnnicButton text="Popover" type="primary" />
+              </PopoverTrigger>
+              <PopoverContent>
+                <section style="padding: 16px;">
+                  <p style="margin: 0; color: #67738B;">
+                    Popover content should remain on top too.
+                  </p>
+                </section>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          <DrawerFooter>
+            <DrawerClose>
+              <UnnnicButton text="Close drawer" type="tertiary" />
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    `,
+  }),
+};
+
+export const DrawerNextToDialog = {
+  name: 'Drawer > Dialog',
+  render: () => ({
+    components: {
+      Drawer,
+      DrawerContent,
+      DrawerHeader,
+      DrawerTitle,
+      DrawerDescription,
+      DrawerFooter,
+      DrawerClose,
+      Dialog,
+      DialogContent,
+      DialogHeader,
+      DialogTitle,
+      UnnnicButton,
+    },
+    setup() {
+      const drawerOpen = ref(false);
+      const dialogOpen = ref(false);
+      return { drawerOpen, dialogOpen };
+    },
+    template: `
+      <div>
+        <div style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;">
+          <UnnnicButton text="Open drawer" type="primary" @click="drawerOpen = true" />
+        </div>
+
+        <Drawer v-model:open="drawerOpen">
+          <DrawerContent size="large">
+            <DrawerHeader>
+              <DrawerTitle>Drawer</DrawerTitle>
+            </DrawerHeader>
+            <div style="padding: 24px; color: #67738B; display: grid; gap: 16px;">
+              Keep this drawer open and toggle the dialog.
+
+              <UnnnicButton text="Open dialog" @click="dialogOpen = true" />
+            </div>
+          </DrawerContent>
+        </Drawer>
+
+        <Dialog v-model:open="dialogOpen">
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Dialog overlay</DialogTitle>
+            </DialogHeader>
+            <div style="padding: 24px; color: #67738B;">
+              This dialog must appear above the drawer and its overlay.
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    `,
+  }),
+};
+
+export const DrawerOpenedFromDialog = {
+  name: 'Dialog > Drawer',
+  render: () => ({
+    components: {
+      UnnnicButton,
+      Dialog,
+      DialogContent,
+      DialogHeader,
+      DialogTitle,
+      Drawer,
+      DrawerContent,
+      DrawerHeader,
+      DrawerTitle,
+      DrawerDescription,
+    },
+    setup() {
+      const dialogOpen = ref(false);
+      const drawerOpen = ref(false);
+      return { dialogOpen, drawerOpen };
+    },
+    template: `
+      <div>
+        <div style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;">
+          <UnnnicButton text="Open dialog" type="primary" @click="dialogOpen = true" />
+        </div>
+        <Dialog v-model:open="dialogOpen">
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Dialog</DialogTitle>
+            </DialogHeader>
+            <div style="padding: 24px; color: #67738B;">
+              <UnnnicButton text="Open drawer" type="primary" @click="drawerOpen = true" /> 
+            </div>
+          </DialogContent>
+        </Dialog>
+        <Drawer v-model:open="drawerOpen">
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Drawer</DrawerTitle>
+            </DrawerHeader>
+            <div style="padding: 24px; color: #67738B;">
+              Drawer should appear above the dialog.
+            </div>
+          </DrawerContent>
+        </Drawer>
+      </div>
+    `,
+  }),
+};
+
+export const NestedDialogs = {
+  name: 'Dialog nested',
+  render: () => ({
+    components: {
+      Dialog,
+      DialogTrigger,
+      DialogContent,
+      DialogHeader,
+      DialogTitle,
+      DialogFooter,
+      DialogClose,
+      Tooltip,
+      TooltipTrigger,
+      TooltipContent,
+      UnnnicButton,
+    },
+    setup() {
+      const parentOpen = ref(false);
+      const childOpen = ref(false);
+      return { parentOpen, childOpen };
+    },
+    template: `
+      <Dialog v-model:open="parentOpen">
+        <DialogTrigger>
+          <UnnnicButton text="Open parent dialog" type="primary" />
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Parent dialog</DialogTitle>
+          </DialogHeader>
+          <div style="padding: 24px; display: flex; flex-direction: column; gap: 12px;">
+            <p style="margin: 0; color: #67738B;">Open the child dialog to stack overlays.</p>
+            <UnnnicButton text="Open child dialog" type="primary" @click="childOpen = true" />
+          </div>
+          <DialogFooter>
+            <DialogClose>
+              <UnnnicButton text="Close parent" type="tertiary" />
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog v-model:open="childOpen">
+        <DialogContent size="small">
+          <DialogHeader>
+            <DialogTitle>Child dialog</DialogTitle>
+          </DialogHeader>
+          <div style="padding: 24px; display: flex; flex-direction: column; gap: 8px;">
+            <Tooltip>
+              <TooltipTrigger>
+                <UnnnicButton text="Tooltip here" type="secondary" />
+              </TooltipTrigger>
+              <TooltipContent>Tooltip stays on top of both dialogs.</TooltipContent>
+            </Tooltip>
+          </div>
+          <DialogFooter>
+            <DialogClose>
+              <UnnnicButton text="Close child" type="primary" />
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    `,
+  }),
+};
+
+export const DialogWithToast = {
+  name: 'Dialog > Toast',
+  render: () => ({
+    components: {
+      Dialog,
+      DialogContent,
+      DialogHeader,
+      DialogTitle,
+      DialogFooter,
+      DialogClose,
+      UnnnicToast,
+      UnnnicButton,
+    },
+    setup() {
+      const dialogOpen = ref(false);
+      const toastVisible = ref(false);
+      const toastKey = ref(0);
+
+      const showToast = () => {
+        toastKey.value += 1;
+        toastVisible.value = true;
+      };
+
+      return { dialogOpen, toastVisible, toastKey, showToast };
+    },
+    template: `
+      <div style="display: flex; gap: 16px;">
+        <UnnnicButton text="Open dialog" type="primary" @click="dialogOpen = true" />
+        <UnnnicButton text="Show toast" type="secondary" @click="showToast" />
+      </div>
+
+      <Dialog v-model:open="dialogOpen">
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog layer</DialogTitle>
+          </DialogHeader>
+          <div style="padding: 24px; color: #67738B;">
+            Use the buttons to compare dialog and toast layers.
+          </div>
+          <DialogFooter>
+            <DialogClose>
+              <UnnnicButton text="Close dialog" type="tertiary" />
+            </DialogClose>
+            <UnnnicButton text="Show toast" type="primary" @click="showToast" />
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <UnnnicToast
+        v-if="toastVisible"
+        :key="toastKey"
+        title="Toast layer"
+        description="Toasts should always float above dialogs."
+        type="success"
+        :timeout="0"
+        @close="toastVisible = false"
+      />
+    `,
+  }),
+};

package/src/stories/ModalDialog.mdx

@@ -6,6 +6,9 @@ import * as ModalDialogStories from './ModalDialog.stories';
 
 # ModalDialog
 
+> **⚠️ DEPRECATED**: This component has been deprecated in favor of the new `Dialog` component. Please use `UnnnicDialog` 
+instead for new implementations. See the [Dialog documentation](?path=/docs/feedback-dialog--docs) for more information.
+
 The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.
 
 <Source

package/src/stories/ModalDialog.stories.js

@@ -1,13 +1,16 @@
 import UnnnicModalDialog from '../components/ModalDialog/ModalDialog.vue';
 import UnnnicInput from '../components/Input/Input.vue';
 import UnnnicLabel from '../components/Label/Label.vue';
+import UnnnicInputDatePicker from '../components/InputDatePicker/InputDatePicker.vue';
+import UnnnicSwitch from '../components/Switch/Switch.vue';
+import UnnnicButton from '../components/Button/Button.vue';
 
 import { action } from '@storybook/addon-actions';
 import iconsList from '../utils/iconList';
 import colorsList from '../utils/colorsList';
 
 export default {
-  title: 'Example/ModalDialog',
+  title: 'Feedback/ModalDialog',
   component: UnnnicModalDialog,
   argTypes: {
     type: {
@@ -182,6 +185,85 @@ const TemplateLeftSidebar = (args) => ({
   },
 });
 
+const TemplateWithDatePicker = (args) => ({
+  components: {
+    UnnnicModalDialog,
+    UnnnicInputDatePicker,
+    UnnnicSwitch,
+    UnnnicButton,
+  },
+  setup() {
+    const updateModelValue = (value) => {
+      action('update:modelValue')(value);
+      args.modelValue = value;
+    };
+    return { args, updateModelValue };
+  },
+  data() {
+    return {
+      forms: [{ date: { start: null, end: null }, repeat: false }],
+      isLoading: false,
+    };
+  },
+  template: `
+  <div>
+    <button @click="updateModelValue(true)">Open Modal with DatePicker</button>
+    <unnnic-modal-dialog 
+      v-bind="args" 
+      @primaryButtonClick="handleSave" 
+      @secondaryButtonClick="secondaryButtonClick" 
+      @update:modelValue="updateModelValue"
+    >
+      <section style="display: flex; flex-direction: column; gap: 16px;">
+        <section 
+          v-for="(form, index) in forms"
+          :key="index"
+          style="display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #E2E6ED; border-radius: 8px;"
+        >
+          <section style="display: flex; flex-direction: column; gap: 8px;">
+            <p style="font-family: 'Lato'; font-size: 14px; font-weight: 600; margin: 0; color: #3B414D;">
+              Select date or period
+            </p>
+            <UnnnicInputDatePicker
+              v-model="form.date"
+              :options="[{ id: 'custom', name: 'Custom' }]"
+              next
+              fillW
+              actionText="Confirm"
+              disableClear
+            />
+          </section>
+          <UnnnicSwitch
+            v-model="form.repeat"
+            textRight="Repeat annually"
+            size="small"
+          />
+        </section>
+        <UnnnicButton
+          iconCenter="add-1"
+          type="tertiary"
+          text="Add"
+          @click="addForm"
+        />
+      </section>
+    </unnnic-modal-dialog>
+  </div>
+  `,
+  methods: {
+    primaryButtonClick: action('primaryButtonClick'),
+    secondaryButtonClick: action('secondaryButtonClick'),
+    handleSave() {
+      action('primaryButtonClick')();
+      action('save')(this.forms);
+      console.log('Forms data:', this.forms);
+    },
+    addForm() {
+      this.forms.push({ date: { start: null, end: null }, repeat: false });
+      action('addForm')();
+    },
+  },
+});
+
 export const Default = Template.bind({});
 Default.args = {
   title: 'Default Modal',
@@ -261,3 +343,16 @@ Image.args = {
   },
   showActionsDivider: true,
 };
+
+export const WithDatePicker = TemplateWithDatePicker.bind({});
+WithDatePicker.args = {
+  title: 'Add Non-Working Dates',
+  type: '',
+  primaryButtonProps: {
+    text: 'Save',
+    loading: false,
+  },
+  secondaryButtonProps: {
+    text: 'Cancel',
+  },
+};

package/src/stories/Popover.stories.js

@@ -26,6 +26,11 @@ export default {
     },
   },
   argTypes: {
+    width: {
+      control: { type: 'text' },
+      description:
+        'The width of the popover. This overrides the size prop. If not provided, the size prop will be used.',
+    },
     size: {
       control: { type: 'select' },
       options: ['small', 'medium', 'large'],

package/src/stories/TemplatePreview.stories.js

@@ -1,8 +1,8 @@
-import UnnnicTemplatePreview from '../components/TemplatePreview/TemplatePreview.vue';
+import UnnnicTemplatePreview from "../components/TemplatePreview/TemplatePreview.vue";
 
 export default {
-  title: 'example/TemplatePreview',
-  tags: ['autodocs'],
+  title: "example/TemplatePreview",
+  tags: ["autodocs"],
   component: UnnnicTemplatePreview,
 };
 
@@ -17,28 +17,28 @@ const Template = (args) => ({
 });
 
 const bodyText =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.';
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.";
 
 export const Default = Template.bind({});
 Default.args = {
   template: {
     header: {
-      type: 'TEXT',
-      text: 'Hello, world!',
+      type: "TEXT",
+      text: "Hello, world!",
     },
-    footer: 'Weni by VTEX',
+    footer: "Weni by VTEX",
     buttons: [
       {
-        text: 'Button 1',
-        type: 'PHONE_NUMBER',
+        text: "Button 1",
+        type: "PHONE_NUMBER",
       },
       {
-        text: 'Button 2',
-        type: 'URL',
+        text: "Button 2",
+        type: "URL",
       },
       {
-        text: 'Button 3',
-        type: 'QUICK_REPLY',
+        text: "Button 3",
+        type: "QUICK_REPLY",
       },
     ],
     body: bodyText,
@@ -49,10 +49,10 @@ export const Image = Template.bind({});
 Image.args = {
   template: {
     header: {
-      type: 'MEDIA',
-      mediaType: 'IMAGE',
+      type: "MEDIA",
+      mediaType: "IMAGE",
     },
-    footer: 'Weni by VTEX',
+    footer: "Weni by VTEX",
     body: bodyText,
   },
 };
@@ -61,21 +61,21 @@ export const Video = Template.bind({});
 Video.args = {
   template: {
     header: {
-      type: 'MEDIA',
-      mediaType: 'VIDEO',
+      type: "MEDIA",
+      mediaType: "VIDEO",
     },
     buttons: [
       {
-        text: 'Button 1',
-        type: 'PHONE_NUMBER',
+        text: "Button 1",
+        type: "PHONE_NUMBER",
       },
       {
-        text: 'Button 2',
-        type: 'URL',
+        text: "Button 2",
+        type: "URL",
       },
       {
-        text: 'Button 3',
-        type: 'QUICK_REPLY',
+        text: "Button 3",
+        type: "QUICK_REPLY",
       },
     ],
   },
@@ -85,10 +85,10 @@ export const Document = Template.bind({});
 Document.args = {
   template: {
     header: {
-      type: 'MEDIA',
-      mediaType: 'DOCUMENT',
+      type: "MEDIA",
+      mediaType: "DOCUMENT",
     },
-    footer: 'Weni by VTEX',
+    footer: "Weni by VTEX",
     body: bodyText,
   },
 };