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

package/src/components/or-input-v3/OrInput.stories3.ts

@@ -1,222 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import * as Faker from 'faker';
-import { ref, watch } from 'vue-demi';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import OrInputDocs from './OrInput.docs.mdx';
-import OrInput from './OrInput.vue';
-import { InputSize, InputType } from './props';
-
-export default {
-  title: 'Components/Input',
-  component: OrInput,
-
-  argTypes: {
-    // Attrs
-    id: {
-      control: { type: 'text' },
-    },
-
-    maxlength: {
-      control: { type: 'number' },
-    },
-
-    // Slots
-    addon: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    modelValue: {
-      control: { type: 'text' },
-    },
-
-    type: {
-      control: { type: 'select' },
-      options: Object.values(InputType),
-    },
-
-    size: {
-      control: { type: 'select' },
-      options: Object.values(InputSize),
-    },
-
-    label: {
-      control: { type: 'text' },
-    },
-
-    placeholder: {
-      control: { type: 'text' },
-    },
-
-    hint: {
-      control: { type: 'text' },
-    },
-
-    error: {
-      control: { type: 'text' },
-    },
-
-    loading: {
-      control: { type: 'boolean' },
-    },
-
-    required: {
-      control: { type: 'boolean' },
-    },
-
-    readonly: {
-      control: { type: 'boolean' },
-    },
-
-    disabled: {
-      control: { type: 'boolean' },
-    },
-
-    autocomplete: {
-      control: { type: 'text' },
-    },
-
-    disableDefaultStyles: {
-      control: { type: 'boolean' },
-    },
-
-    // Events
-    'update:modelValue': {
-      table: { disable: true },
-    },
-
-    input: {
-      table: { disable: true },
-    },
-
-    keydown: {
-      table: { disable: true },
-    },
-
-    keyup: {
-      table: { disable: true },
-    },
-
-    focus: {
-      table: { disable: true },
-    },
-
-    blur: {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrInputDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A10',
-    },
-  },
-} as Meta<typeof OrInput>;
-
-const Template: StoryFn<typeof OrInput> = (args) => ({
-  components: {
-    OrIcon,
-    OrInput,
-  },
-
-  setup() {
-    // State
-    const model = ref<string | number>();
-
-    // Effects
-    watch(model, (value) => {
-      console.debug(value);
-    });
-
-    return {
-      args,
-      model,
-      onUpdateModelValue: action('update:modelValue'),
-      onKeydown: action('keydown'),
-      onKeyup: action('keyup'),
-      onFocus: action('focus'),
-      onBlur: action('blur'),
-    };
-  },
-
-  template: `
-    <OrInput
-      v-model="model"
-      v-bind="args"
-      @update:modelValue="onUpdateModelValue"
-      @keydown="onKeydown"
-      @keyup="onKeyup"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      <template #addon>
-        ${args.addon}
-      </template>
-    </OrInput>
-  `,
-});
-
-export const Text = Template.bind({});
-
-Text.args = {
-  // Slots
-  addon: '<OrIcon icon="info" />',
-
-  // Props
-  type: InputType.Text,
-  label: 'Text Input Label',
-  placeholder: 'Placeholder',
-  hint: Faker.lorem.sentence(20),
-};
-
-export const Number = Template.bind({});
-
-Number.args = {
-  // Slots
-  addon: '<OrIcon icon="money" />',
-
-  // Props
-  type: InputType.Number,
-  label: 'Number Input Label',
-  placeholder: 'Placeholder',
-  hint: Faker.lorem.sentence(20),
-};
-
-export const Password = Template.bind({});
-
-Password.args = {
-  // Slots
-  addon: '<OrIcon icon="lock" />',
-
-  // Props
-  type: InputType.Password,
-  label: 'Password Input Label',
-  placeholder: 'Placeholder',
-  hint: Faker.lorem.sentence(20),
-};
-
-export const Search = Template.bind({});
-
-Search.args = {
-  // Slots
-  addon: '<OrIcon icon="manage_search" />',
-
-  // Props
-  type: InputType.Search,
-  label: 'Search Input Label',
-  placeholder: 'Placeholder',
-  hint: Faker.lorem.sentence(20),
-};

package/src/components/or-link-v3/OrLink.docs.mdx

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

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 />