@onereach/ui-components 2.68.0-beta.1987.0 → 2.68.0-beta.2002.0

package/src/components/or-confirm-v3/OrConfirm.stories3.ts

@@ -81,6 +81,10 @@ export default {
     textConfirmationError: {
       control: { type: 'text' },
     },
+
+    isOpen: {
+      control: { type: 'boolean' },
+    },
   },
 
   parameters: {
@@ -143,6 +147,54 @@ const Template: StoryFn<typeof OrConfirm> = (args) => ({
   `,
 });
 
+const TemplateIsOpen: StoryFn<typeof OrConfirm> = (args) => ({
+  components: {
+    OrConfirm,
+    OrButton,
+  },
+
+  setup() {
+    const isOpen = ref(args.isOpen);
+    return {
+      args,
+      isOpen,
+      onOpen: action('open'),
+      onClose: () => {
+        isOpen.value = false;
+        action('close');
+      },
+      onConfirm: (event: any) => {
+        isOpen.value = false;
+        action('confirm')(event);
+      },
+    };
+  },
+
+  template: `
+    <div class="contents">
+      <OrButton @click="isOpen = true">Confirmation modal</OrButton>
+
+      <OrConfirm
+        v-bind="args"
+        :is-open="isOpen"
+        @open="onOpen"
+        @close="onClose"
+        @confirm="onConfirm"
+      >
+        <template #default v-if="args.default">
+          ${args.default}
+        </template>
+        <template #header v-if="args.header">
+          ${args.header}
+        </template>
+        <template #footer v-if="args.footer">
+          ${args.footer}
+        </template>
+      </OrConfirm>
+    </div>
+  `,
+});
+
 export const Default = Template.bind({});
 Default.args = {
   titleText: 'Delete permanently',
@@ -192,3 +244,11 @@ ConfirmButtonColor.args = {
   confirmButtonText: 'Yes',
   cancelButtonText: 'No',
 };
+export const UsingIsOpenProp = TemplateIsOpen.bind({});
+UsingIsOpenProp.args = {
+  titleText: 'Confirm',
+  default: `Are you sure you want to <i>${Faker.hacker.verb()}</i> the <b>${Faker.hacker.noun()}</b>?`,
+  confirmType: ConfirmType.C,
+  confirmButtonText: 'Yes',
+  cancelButtonText: 'No',
+};

package/src/components/or-confirm-v3/OrConfirm.vue

@@ -139,6 +139,10 @@ export default defineComponent({
       required: false,
       default: null,
     },
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -203,6 +207,14 @@ export default defineComponent({
     // Events
     watch(isActive, (value: boolean) => emit(value ? 'open' : 'close'));
 
+    watch(() => props.isOpen, (newIsOpen) => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, { immediate: true });
+
     watch(escape, (val) => {
       if (val) close();
     });

package/src/components/or-modal-v3/OrModal.docs.mdx

@@ -7,4 +7,4 @@ import { OrModalV3 as OrModal } from '@onereach/ui-components';
 <DocsPage />
 
 ## Migration Guide from V1
-  - removed properties `titleText`, `showClose`, `closeOnClickOutside`, `size`, `isOpen`, and `isWithoutOverlay`
+  - removed properties `titleText`, `showClose`, `closeOnClickOutside`, `size`, and `isWithoutOverlay`

package/src/components/or-modal-v3/OrModal.stories3.ts

@@ -44,6 +44,10 @@ export default {
       control: { type: 'select' },
       options: Object.values(ModalSize),
     },
+
+    isOpen: {
+      control: { type: 'boolean' },
+    },
   },
 
   parameters: {
@@ -120,3 +124,136 @@ Modal.args = {
     </div>
   `,
 };
+
+
+const TemplateIsOpen: StoryFn<typeof OrModal> = (args) => ({
+  components: {
+    OrButton,
+    OrModal,
+  },
+
+  setup() {
+    const isOpen = ref(args.isOpen);
+
+    function handleClose() {
+      isOpen.value = false;
+      action('close');
+    }
+
+    return {
+      args,
+      isOpen,
+      handleOpen: action('open'),
+      handleClose,
+    };
+  },
+
+  template: `
+    <div class="contents">
+      <OrButton @click="isOpen = true">Modal</OrButton>
+
+      <OrModal
+        v-bind="args"
+        :is-open="isOpen"
+        @open="handleOpen"
+        @close="handleClose"
+      >
+        <template #header>
+          ${args.header}
+        </template>
+
+        ${args.default}
+
+        <template #footer>
+          ${args.footer}
+        </template>
+      </OrModal>
+    </div>
+  `,
+});
+
+export const UsingIsOpenProp = TemplateIsOpen.bind({});
+
+UsingIsOpenProp.args = {
+  // Slots
+  header: 'Upload Files',
+
+  default: `
+    <div class="flex items-center justify-center">
+      Content Area
+    </div>
+  `,
+
+  footer: `
+    <div class="flex items-center justify-end gap-[16px]">
+      <OrButton variant="outlined">Save</OrButton>
+      <OrButton>Upload</OrButton>
+    </div>
+  `,
+};
+
+const TemplateZIndex: StoryFn<typeof OrModal> = (args) => ({
+  components: {
+    OrButton,
+    OrModal,
+  },
+
+  setup() {
+    const modal = ref<InstanceType<typeof OrModal>>();
+
+    return {
+      args,
+      modal,
+      handleOpen: action('open'),
+      handleClose: action('close'),
+    };
+  },
+
+  template: `
+    <div class="contents">
+      <div class="border-1" style="z-index: 700">
+        z-index: 700
+      </div>
+      <OrButton @click="modal.open()">Modal</OrButton>
+      <div style="z-index: 800; display: none">
+        z-index: 800
+      </div>
+      <OrModal
+        ref="modal"
+        v-bind="args"
+        @open="handleOpen"
+        @close="handleClose"
+      >
+        <template #header>
+          ${args.header}
+        </template>
+
+        ${args.default}
+
+        <template #footer>
+          ${args.footer}
+        </template>
+      </OrModal>
+    </div>
+  `,
+});
+
+export const zIndex = TemplateZIndex.bind({});
+
+zIndex.args = {
+  // Slots
+  header: 'Upload Files',
+
+  default: `
+    <div class="flex items-center justify-center">
+      Content Area
+    </div>
+  `,
+
+  footer: `
+    <div class="flex items-center justify-end gap-[16px]">
+      <OrButton variant="outlined">Save</OrButton>
+      <OrButton>Upload</OrButton>
+    </div>
+  `,
+};

package/src/components/or-modal-v3/OrModal.vue

@@ -53,6 +53,10 @@ export default defineComponent({
       type: String as PropType<ModalSize>,
       default: ModalSize.M,
     },
+    isOpen: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
   },
 
   emits: [
@@ -97,6 +101,14 @@ export default defineComponent({
       context.emit(value ? 'open' : 'close');
     });
 
+    watch(() => props.isOpen, (newIsOpen) => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, { immediate: true });
+
     // Methods
     function open(): void {
       isActive.value = true;

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.docs.mdx

@@ -0,0 +1,16 @@
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+  PRIMARY_STORY
+} from '@storybook/addon-docs';
+
+<Title />
+<Subtitle />
+<Description />
+<Primary />
+<ArgsTable story={PRIMARY_STORY} />
+<Stories />

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.stories3.ts

@@ -0,0 +1,62 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import { ref } from 'vue-demi';
+import OrRichTextEditorDocs from './OrRichTextEditor.docs.mdx';
+import OrRichTextEditor from './OrRichTextEditor.vue';
+
+export default {
+  title: 'Experimental/OrRichTextEditor',
+  component: OrRichTextEditor,
+
+  argTypes: {
+    // Props
+    description: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+    modelValue: {
+      control: { type: 'text' },
+    },
+    markdown: {
+      control: { type: 'boolean' },
+    },
+  },
+
+  parameters: {
+    docs: {
+      page: OrRichTextEditorDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=608%3A2926',
+    },
+  },
+} as Meta<typeof OrRichTextEditor>;
+
+const Template: StoryFn<typeof OrRichTextEditor> = (args) => ({
+  components: {
+    OrRichTextEditor,
+  },
+
+  setup() {
+    // Refs
+    const text = ref('');
+    return {
+      args,
+      text,
+    };
+  },
+
+  template: `
+  <div class="p-md">
+  <OrRichTextEditor
+  v-bind="args"
+  v-model="text"
+  />
+  </div>
+  `,
+});
+
+export const RichTextEditor = Template.bind({});