@onereach/ui-components 4.4.3 → 4.4.4-beta.2718.0

package/src/components/or-link-v3/OrLink.stories3.ts

@@ -1,163 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import OrLinkDocs from './OrLink.docs.mdx';
-import OrLink from './OrLink.vue';
-import { LinkColor } from './props';
-import Faker from 'faker';
-
-export default {
-  title: 'Components/Link',
-  component: OrLink,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    href: {
-      control: { type: 'text' },
-    },
-
-    color: {
-      control: { type: 'select' },
-      options: Object.values(LinkColor),
-    },
-
-    underlined: {
-      control: { type: 'boolean' },
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-
-    loading: {
-      control: { type: 'boolean' },
-    },
-
-    loadingText: {
-      control: { type: 'text' },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrLinkDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=6085%3A71005',
-    },
-  },
-} as Meta<typeof OrLink>;
-
-const Template: StoryFn<typeof OrLink> = (args) => ({
-  components: {
-    OrLink,
-    OrIcon,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  template: `
-    <OrLink v-bind="args" class="!typography-body-2-regular">
-      ${args.default}
-    </OrLink>
-  `,
-});
-
-const TemplateWithTextAndBoldLink: StoryFn<typeof OrLink> = (args) => ({
-  components: {
-    OrLink,
-    OrIcon,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  template: `
-    <p class="typography-body-2-regular text-on-primary-container dark:text-on-primary-container-dark">
-      You can
-      <OrLink v-bind="args" class="!typography-body-2-bold">
-        ${args.default}
-      </OrLink>
-      to see more
-    </p>
-  `,
-});
-
-const TemplateWithRandomText: StoryFn<typeof OrLink> = (args) => ({
-  components: {
-    OrLink,
-    OrIcon,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  template: `
-    <p class="typography-body-2-regular text-secondary dark:text-secondary-dark">
-      ${Faker.lorem.words(5)}
-      <OrLink v-bind="args">
-        ${args.default}
-      </OrLink>
-      ${Faker.lorem.words(5)}
-    </p>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Slots
-  default: 'Link',
-
-  // Props
-  href: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a',
-};
-
-export const WithColor = Template.bind({});
-
-WithColor.args = {
-  ...Default.args,
-
-  // Slots
-  default: Faker.commerce.productName(),
-
-  // Props
-  color: LinkColor.Danger,
-};
-
-export const BoldWithColorNotUnderlinedInsideText = TemplateWithTextAndBoldLink.bind({});
-
-BoldWithColorNotUnderlinedInsideText.args = {
-  ...Default.args,
-
-  // Slots
-  default: 'click here',
-  underlined: false,
-  color: LinkColor.Primary,
-};
-
-export const InsideRandomText = TemplateWithRandomText.bind({});
-
-InsideRandomText.args = {
-  ...Default.args,
-
-  // Slots
-  default: Faker.lorem.words(2),
-};

package/src/components/or-loader-v3/OrLoader.docs.mdx

@@ -1,14 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrLoaderV3 as OrLoader } from '@onereach/ui-components';
-```
-
-<DocsPage />
-
-## Migration Guide from V1
-  - added properties `color` and `size`
-  - property `type` renamed to `variant`
-  - property `linearTitle` renamed to `title`
-  - property `linearDescription` renamed to `description`
-  - removed properties: `textTypeLabel`

package/src/components/or-loader-v3/OrLoader.stories3.ts

@@ -1,86 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import OrLoaderDocs from './OrLoader.docs.mdx';
-import OrLoader from './OrLoader.vue';
-import { LoaderColor, LoaderSize, LoaderVariant } from './props';
-
-export default {
-  title: 'Components/Loader',
-  component: OrLoader,
-
-  argTypes: {
-    // Props
-    variant: {
-      control: { type: 'select' },
-      options: Object.values(LoaderVariant),
-    },
-
-    color: {
-      control: { type: 'select' },
-      options: Object.values(LoaderColor),
-    },
-
-    size: {
-      control: { type: 'select' },
-      options: Object.values(LoaderSize),
-    },
-
-    title: {
-      control: { type: 'text' },
-    },
-
-    description: {
-      control: { type: 'text' },
-    },
-  },
-
-  parameters: {
-    layout: 'fullscreen',
-
-    docs: {
-      page: OrLoaderDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=1649%3A9615',
-    },
-  },
-} as Meta<typeof OrLoader>;
-
-const Template: StoryFn<typeof OrLoader> = (args) => ({
-  components: {
-    OrLoader,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  template: `
-    <div class="w-full min-h-[100px] p-md flex justify-center items-center">
-      <OrLoader class="w-2/5 max-w-[400px]" v-bind="args" />
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-export const Linear = Template.bind({});
-Linear.args = {
-  variant: 'linear',
-};
-
-export const LinearWithText = Template.bind({});
-LinearWithText.args = {
-  title: 'Loading',
-  variant: 'linear',
-  description: 'Promptly retrieving your data from the cloud',
-};
-LinearWithText.parameters = {
-  docs: {
-    description: {
-      story: 'By setting width on the component you may control the width of the linear loading indicator. \
-        Circular indicator size is controlled by the `size` prop.',
-    },
-  },
-};

package/src/components/or-menu-item-v3/OrMenuItem.docs.mdx

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

package/src/components/or-menu-item-v3/OrMenuItem.stories3.ts

@@ -1,90 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import OrMenuItemDocs from './OrMenuItem.docs.mdx';
-import OrMenuItem from './OrMenuItem.vue';
-
-export default {
-  title: 'Components/Menu/Parts/Menu Item',
-  component: OrMenuItem,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    icon: {
-      control: { type: 'object' },
-    },
-
-    selected: {
-      control: { type: 'boolean' },
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrMenuItemDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=608%3A2926',
-    },
-  },
-} as Meta<typeof OrMenuItem>;
-
-const Template: StoryFn<typeof OrMenuItem> = (args) => ({
-  components: {
-    OrMenuItem,
-  },
-
-  setup() {
-    return {
-      args,
-      handleClick: action('click'),
-      handleFocus: action('focus'),
-      handleBlur: action('blur'),
-    };
-  },
-
-  template: `
-    <OrMenuItem
-      v-bind="args"
-      @click="handleClick"
-      @focus="handleFocus"
-      @blur="handleBlur"
-    >
-      ${args.default}
-    </OrMenuItem>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Slots
-  default: 'Menu',
-};
-
-export const WithIcon = Template.bind({});
-
-WithIcon.args = {
-  // Slots
-  default: 'Menu',
-
-  // Props
-  icon: 'bug_report',
-};

package/src/components/or-menu-v3/OrMenu.docs.mdx

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

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`