@onereach/ui-components 4.5.0-beta.2726.0 → 4.5.0

package/src/components/or-menu-v3/OrMenu.stories3.ts

@@ -1,167 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref } from 'vue-demi';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
-import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import OrMenuDocs from './OrMenu.docs.mdx';
-import OrMenu from './OrMenu.vue';
-import { MenuPlacement } from './props';
-
-export default {
-  title: 'Components/Menu',
-  component: OrMenu,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    trigger: {
-      table: { disable: true },
-    },
-
-    placement: {
-      control: { type: 'select' },
-      options: Object.values(MenuPlacement),
-    },
-
-    // Events
-    'update:state': {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrMenuDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=608%3A2926',
-    },
-  },
-} as Meta<typeof OrMenu>;
-
-const Template: StoryFn<typeof OrMenu> = (args) => ({
-  components: {
-    OrButton,
-    OrMenu,
-    OrMenuItem,
-  },
-
-  setup() {
-    // Refs
-    const button = ref<InstanceType<typeof OrButton>>();
-    const menu = ref<InstanceType<typeof OrMenu>>();
-
-    return {
-      args,
-      button,
-      menu,
-      onUpdateState: action('update:state'),
-    };
-  },
-
-  template: `
-    <div class="contents">
-      <OrButton
-        ref="button"
-        @click="menu.open()"
-      >
-        Open
-      </OrButton>
-
-      <OrMenu
-        ref="menu"
-        v-bind="args"
-        :trigger="button?.root"
-        @update:state="onUpdateState"
-      >
-        ${args.default}
-      </OrMenu>
-    </div>
-  `,
-});
-
-export const Menu = Template.bind({});
-
-Menu.args = {
-  // Slots
-  default: `
-    <OrMenuItem>Item</OrMenuItem>
-    <OrMenuItem icon="bug_report">Item + Icon</OrMenuItem>
-    <OrMenuItem selected>Selected Item</OrMenuItem>
-    <OrMenuItem disabled>Disabled Item</OrMenuItem>
-    <OrMenuItem>Very Looooooooooooooooooooooooooooooooooooooooooooooooooooooooong Item</OrMenuItem>
-  `,
-};
-
-const OrderDropdownTemplate: StoryFn<typeof OrMenu> = (args) => ({
-  components: {
-    OrButton,
-    OrMenu,
-    OrMenuItem,
-    OrIcon,
-  },
-
-  setup() {
-    // Refs
-    const button = ref<InstanceType<typeof OrButton>>();
-    const menu = ref<InstanceType<typeof OrMenu>>();
-
-    return {
-      args,
-      button,
-      menu,
-      onUpdateState: action('update:state'),
-    };
-  },
-
-  template: `
-    <div class="contents">
-      <OrButton
-        ref="button"
-        variant="link"
-        color="inherit"
-        @click="menu.toggle()"
-      >
-        A-Z
-        <OrIcon
-          v-if="menu"
-          :icon="menu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'"
-        />
-      </OrButton>
-      <OrMenu
-        ref="menu"
-        v-bind="args"
-        :trigger="button?.root"
-        @update:state="onUpdateState"
-      >
-        ${args.default}
-      </OrMenu>
-    </div>
-  `,
-});
-
-export const OrderDropdown = OrderDropdownTemplate.bind({});
-
-OrderDropdown.args = {
-  // Slots
-  default: `
-    <OrMenuItem selected>Last Updated</OrMenuItem>
-    <OrMenuItem>Firs Updated</OrMenuItem>
-    <OrMenuItem>A - Z</OrMenuItem>
-    <OrMenuItem>Z - A</OrMenuItem>
-  `,
-};

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

@@ -1,10 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrModalV3 as OrModal } from '@onereach/ui-components';
-```
-
-<DocsPage />
-
-## Migration Guide from V1
-  - removed properties `titleText`, `showClose`, `closeOnClickOutside`, `size`, and `isWithoutOverlay`

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

@@ -1,278 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref } from 'vue-demi';
-import Faker from 'faker';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
-import OrModalDocs from './OrModal.docs.mdx';
-import OrModal from './OrModal.vue';
-import { ModalSize } from './props';
-
-export default {
-  title: 'Components/Modal',
-  component: OrModal,
-
-  argTypes: {
-    // Slots
-    header: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    footer: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    size: {
-      control: { type: 'select' },
-      options: Object.values(ModalSize),
-    },
-
-    isOpen: {
-      control: { type: 'boolean' },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrModalDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A18',
-    },
-  },
-} as Meta<typeof OrModal>;
-
-const Template: 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">
-      <OrButton @click="modal.open()">Modal</OrButton>
-
-      <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 Modal = Template.bind({});
-
-Modal.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 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>
-  `,
-};
-
-export const WithVerticalScroll = Template.bind({});
-
-WithVerticalScroll.args = {
-  header: 'Upload Files',
-  default: `
-    <div class="flex items-center justify-center">
-      ${Faker.lorem.lines(50)}
-    </div>
-  `,
-
-  footer: `
-    <div class="flex items-center justify-end gap-[16px]">
-      <OrButton variant="outlined">Save</OrButton>
-      <OrButton>Upload</OrButton>
-    </div>
-  `,
-};

package/src/components/or-notification-v3/OrNotification.docs.mdx

@@ -1,7 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrNotificationV3 as OrNotification } from '@onereach/ui-components';
-```
-
-<DocsPage />

package/src/components/or-notification-v3/OrNotification.stories3.ts

@@ -1,122 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import OrNotificationDocs from './OrNotification.docs.mdx';
-import OrNotification from './OrNotification.vue';
-import { NotificationVariant } from './props';
-
-export default {
-  title: 'Components/Notification',
-  component: OrNotification,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    variant: {
-      control: { type: 'select' },
-      options: Object.values(NotificationVariant),
-    },
-
-    disableClose: {
-      control: { type: 'boolean' },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrNotificationDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=358%3A1288',
-    },
-  },
-} as Meta<typeof OrNotification>;
-
-const Template: StoryFn<typeof OrNotification> = (args) => ({
-  components: {
-    OrNotification,
-  },
-
-  setup() {
-    return {
-      args,
-      handleClose: action('close'),
-    };
-  },
-
-  template: `
-    <OrNotification
-      v-bind="args"
-      @close="handleClose"
-    >
-      ${args.default}
-    </OrNotification>
-  `,
-});
-
-export const Notification = Template.bind({});
-
-Notification.args = {
-  // Slots
-  default: '<a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-};
-
-export const WithoutCloseButton = Template.bind({});
-
-WithoutCloseButton.args = {
-  disableClose: true,
-  // Slots
-  default: '<a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-};
-
-export const WithShadowOverride: StoryFn<typeof OrNotification> = (args) => ({
-  components: {
-    OrNotification,
-  },
-
-  setup() {
-    return {
-      args,
-      handleClose: action('close'),
-    };
-  },
-
-  template: `
-    <div class="flex flex-col gap-3xl w-full">
-      <OrNotification
-        v-bind="args"
-        @close="handleClose"
-      >
-       Default shadow
-      </OrNotification>
-      <OrNotification
-        v-bind="args"
-        @close="handleClose"
-        class="shadow-none"
-      >
-       Without shadow
-      </OrNotification>
-      <OrNotification
-        v-bind="args"
-        @close="handleClose"
-        class="shadow-modal"
-      >
-        Shadow like in modal
-      </OrNotification>
-    </div>
-  `,
-});
-
-WithShadowOverride.args = {};

package/src/components/or-overlay-v3/OrOverlay.docs.mdx

@@ -1,11 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrOverlayV3 as OrOverlay } from '@onereach/ui-components';
-```
-
-<DocsPage />
-
-## Migration Guide from V1
-  - removed properties `isActive` and `isWithoutBackground`
-  - property `isPage` renamed to `fullscreen`

package/src/components/or-overlay-v3/OrOverlay.stories3.ts

@@ -1,61 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import OrOverlayDocs from './OrOverlay.docs.mdx';
-import OrOverlay from './OrOverlay.vue';
-
-export default {
-  title: 'Components/Overlay',
-  component: OrOverlay,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    fullscreen: {
-      control: { type: 'boolean' },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrOverlayDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A18',
-    },
-  },
-} as Meta<typeof OrOverlay>;
-
-const Template: StoryFn<typeof OrOverlay> = (args) => ({
-  components: {
-    OrOverlay,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  template: `
-    <OrOverlay v-bind="args">
-      ${args.default}
-    </OrOverlay>
-  `,
-});
-
-export const Overlay = Template.bind({});
-
-Overlay.args = {
-  // Slots
-  default: 'Overlay',
-};

package/src/components/or-pagination-v3/OrPagination.docs.mdx

@@ -1,7 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrPaginationV3 as OrPagination } from '@onereach/ui-components';
-```
-
-<DocsPage />