@onereach/ui-components 5.0.1-beta.3131.0 → 5.0.1

package/src/components/or-modal/OrModal.stories.ts

@@ -1,215 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Story, Meta } from '@storybook/vue';
-
-import OrModal from './OrModal.vue';
-import { OrButtonV2 as OrButton } from '../or-button-v2';
-import { OrOverflowMenu } from '../or-overflow-menu';
-import { OrModalSizes } from './constants';
-import { OrCollapse } from '../or-collapse';
-import { OrSelect } from '../or-select';
-import { OrInput } from '../or-input';
-import { getTestOption } from '../or-select/stories.helpers';
-
-export default {
-  title: 'Components/OrModal',
-  component: OrModal,
-  args: {
-    isOpen: true,
-    trapFocus: false,
-  },
-  argTypes: {
-    showClose: {},
-    closeOnClickOutside: {},
-    isOpen: {
-      type: 'boolean',
-    },
-    trapFocus: {
-      type: 'boolean',
-    },
-    titleText: {
-      control: {
-        type: 'text',
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: Object.values(OrModalSizes) as string[],
-        default: OrModalSizes.small,
-      },
-    },
-    default: {
-      control: 'text',
-      description: 'Slot content',
-      table: {
-        defaultValue: '',
-        type: {
-          summary: null,
-        },
-      },
-    },
-    footer: {
-      control: 'text',
-      description: 'Footer Slot content',
-    },
-    title: {
-      control: 'text',
-      description: 'Slot content',
-    },
-  },
-} as Meta;
-
-const Template: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    OrModal,
-    OrButton,
-    OrOverflowMenu,
-    OrCollapse,
-    OrSelect,
-    OrInput,
-  },
-
-  methods: {
-    onClose: action('close'),
-  },
-  template: `
-    <div style="height: 200px;">
-      <or-modal v-bind="$props" @close="onClose" style="position: absolute;">
-        <template>
-          ${args.default}
-        </template>
-        <template  v-if="${!!args.footer}" v-slot:footer>
-          ${args.footer}
-        </template>
-      </or-modal>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  default: 'Modal text content',
-  isOpen: true,
-};
-
-export const WithTitleText = Template.bind({});
-WithTitleText.args = {
-  titleText: 'Modal title text',
-  default: 'Modal text content',
-};
-
-export const WithClickOutside = Template.bind({});
-WithClickOutside.args = {
-  titleText: 'Modal title text',
-  default: 'Modal text content',
-  closeOnClickOutside: true,
-};
-
-export const WithInputContent = Template.bind({});
-WithInputContent.args = {
-  titleText: 'Modal title text',
-  default: '<or-input />',
-  closeOnClickOutside: true,
-  footer: `
-    <or-button color="primary" @click="onClose">Confirm</or-button>
-    <or-button color="error" type="outlined" @click="onClose">Cancel</or-button>
-  `,
-};
-
-export const WithFooter = Template.bind({});
-WithFooter.args = {
-  titleText: 'Modal title text',
-  default: 'Modal text content',
-  footer: '<div> Footer content</div>',
-};
-
-export const WithoutClose = Template.bind({});
-WithoutClose.args = {
-  titleText: 'Modal title text',
-  default: 'Modal text content',
-  showClose: false,
-};
-
-export const WithoutOverlay = Template.bind({});
-WithoutOverlay.args = {
-  titleText: 'Modal title text',
-  default: 'Modal text content',
-  isWithoutOverlay: true,
-};
-
-export const WithCustomClose = Template.bind({});
-WithCustomClose.args = {
-  titleText: 'Modal title text',
-  default: 'Modal text content',
-  footer: '<or-button type="outlined" @click="onClose">Close</or-button>',
-};
-
-export const WithOverflowMenu = Template.bind({});
-WithOverflowMenu.args = {
-  titleText: 'Modal title text',
-  default: 'Modal text content',
-  items: [
-    {
-      icon: 'open_in_new',
-      label: 'Open in new tab',
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      handler: () => {},
-    },
-    {
-      icon: 'update',
-      label: 'Update',
-      isDisabled: true,
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      handler: () => {},
-    },
-  ],
-  footer: '<or-overflow-menu :items="items" placement="bottom-start" />',
-};
-
-export const WithLongContent = Template.bind({});
-WithLongContent.args = {
-  titleText: 'Modal title text',
-  default: `
-    <div>
-        <div>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            Asperiores aspernatur assumenda aut consectetur cupiditate ea enim,
-            esse hic nulla optio quidem ratione saepe ullam!
-            A nihil omnis provident reprehenderit rerum.
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            Asperiores aspernatur assumenda aut consectetur cupiditate ea enim,
-            esse hic nulla optio quidem ratione saepe ullam!
-            A nihil omnis provident reprehenderit rerum.
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            Asperiores aspernatur assumenda aut consectetur cupiditate ea enim,
-            esse hic nulla optio quidem ratione saepe ullam!
-            A nihil omnis provident reprehenderit rerum.
-        </div>
-        <or-overflow-menu :items="items" />
-        <or-select :options="options" />
-        <div>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            Asperiores aspernatur assumenda aut consectetur cupiditate ea enim,
-            esse hic nulla optio quidem ratione saepe ullam!
-            A nihil omnis provident reprehenderit rerum.
-        </div>
-    </div>`,
-  footer: '<or-button type="outlined" @click="onClose">Close</or-button>',
-  items: [
-    {
-      icon: 'open_in_new',
-      label: 'Open in new tab',
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      handler: () => {},
-    },
-    {
-      icon: 'update',
-      label: 'Update',
-      isDisabled: true,
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      handler: () => {},
-    },
-  ],
-  options: Array.from(Array(10).keys()).map(getTestOption),
-};

package/src/components/or-notification/OrNotification.stories.ts

@@ -1,98 +0,0 @@
-import Faker from 'faker';
-import { Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-
-import OrNotification from './OrNotification.vue';
-import OrButton from '../or-button-v2/OrButton.vue';
-import OrIcon from '../or-icon/OrIcon.vue';
-
-import { OR_NOTIFICATION_SIZE, OR_NOTIFICATION_TYPE } from './constants';
-
-export default {
-  title: 'Components/OrNotification',
-  component: OrNotification,
-  argTypes: {
-    size: {
-      control: {
-        type: 'select',
-        options: Object.values(OR_NOTIFICATION_SIZE),
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-        options: Object.values(OR_NOTIFICATION_TYPE),
-      },
-    },
-  },
-};
-
-const Template: Story = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    OrNotification,
-    OrButton,
-  },
-  template: '<or-notification v-bind="$props" @close="onClose" />',
-  methods: {
-    onClose: action('close'),
-  },
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  content: Faker.company.catchPhrase(),
-  canDelete: true,
-};
-
-export const PropsWithLongText = Template.bind({});
-PropsWithLongText.args = {
-  type: OR_NOTIFICATION_TYPE.WARNING,
-  size: OR_NOTIFICATION_SIZE.INLINE,
-  icon: 'forum',
-  content: Faker.random.alpha({
-    count: 250,
-    upcase: true,
-  }),
-  canDelete: true,
-};
-
-export const BlankWithLargeContent = Template.bind({});
-BlankWithLargeContent.args = {
-  type: '',
-  size: OR_NOTIFICATION_SIZE.INLINE,
-  icon: 'chat',
-  content: Faker.lorem.paragraphs(2),
-  canDelete: true,
-};
-
-const TemplateWithSlots: Story = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    OrNotification,
-    OrButton,
-    OrIcon,
-  },
-  template: `
-    <or-notification v-bind="$props" @close="onClose">
-      <or-icon class="my-icon" icon="forum" slot="icon" />
-
-      <div slot="default" class="my-content" style="display: flex; flex-direction: column;">
-        <div class="text">${Faker.lorem.paragraph()}</div>
-        <a href="#" class="link" style="margin-top: 0.5rem;">
-          ${Faker.internet.email()}
-        </a>
-      </div>
-    </or-notification>
-  `,
-  methods: {
-    onClose: action('close'),
-  },
-});
-
-export const WithSlotsAndLinks = TemplateWithSlots.bind({});
-WithSlotsAndLinks.args = {
-  type: OR_NOTIFICATION_TYPE.SUCCESS,
-  size: OR_NOTIFICATION_SIZE.INLINE,
-  canDelete: true,
-};

package/src/components/or-number-input/OrNumberInput.stories.ts

@@ -1,354 +0,0 @@
-import { ArgTypes, Story } from '@storybook/vue';
-
-import { action } from '@storybook/addon-actions';
-
-import OrNumberInput from './OrNumberInput.vue';
-import { OrIcon } from '../or-icon';
-import { OrSwitch } from '../or-switch';
-import { OrIconButton } from '../or-button-v2';
-
-export default {
-  title: 'Components/OrInputs/OrNumberInput',
-  component: OrNumberInput,
-};
-
-const defaultMixin = (argTypes: ArgTypes) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    OrNumberInput,
-    OrIcon,
-    OrSwitch,
-    OrIconButton,
-  },
-
-  data() {
-    return {
-      inputValue: '',
-      defaultValue: 42,
-    };
-  },
-
-  methods: {
-    action: action('update:modelValue'),
-    onFocus: action('focus'),
-    onBlur: action('blur'),
-    actionClick: action('click'),
-    clear: action('clear'),
-  },
-});
-
-const Template: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <div>
-      <or-number-input
-        v-model="inputValue"
-        v-bind="$props"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-        @clear="clear"
-      />
-    </div>
-  `,
-});
-
-const TemplateLabelAppend: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-number-input
-      v-model="inputValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      <or-icon slot="label-append" icon="code"/>
-    </or-number-input>
-  `,
-});
-
-const TemplateLabelSlot: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-number-input
-      v-model="inputValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      <div slot="label-default">
-        <div>Label Slot</div>
-      </div>
-    </or-number-input>
-  `,
-});
-
-const TemplateSlotPrepend: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-number-input
-      v-model="inputValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      <or-icon-button
-        slot="prepend"
-        type="icon"
-        icon="search"
-        @click="actionClick"
-      />
-    </or-number-input>
-  `,
-});
-
-const TemplateSlotAppend: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-number-input
-      v-model="inputValue"
-      v-bind="$props"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
-      <or-icon-button
-        slot="append"
-        type="icon"
-        icon="search"
-        @click="actionClick"
-      />
-    </or-number-input>
-  `,
-});
-
-const TemplateWithValue: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `
-    <or-number-input
-      v-bind="$props"
-      v-model="defaultValue"
-      @update:modelValue="action"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-  `,
-});
-
-const TemplateDynamicError: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  computed: {
-    hasError() {
-      return (this as any).inputValue <= 4;
-    },
-  },
-
-  template: `
-    <div>
-      <or-number-input
-        v-bind="$props"
-        v-model="inputValue"
-        :is-invalid="hasError"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <or-number-input
-        v-bind="$props"
-        v-model="inputValue"
-        :is-invalid="hasError"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-    </div>
-  `,
-});
-
-const TemplateToggleErrorMessage: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  data() {
-    return {
-      hasError: false,
-    };
-  },
-
-  template: `
-    <div>
-      <or-switch style="display: block; margin-bottom: 20px;" v-model="hasError" :label="'Has Error: ' + hasError"/>
-
-      <or-number-input
-        v-bind="$props"
-        v-model="inputValue"
-        :is-invalid="hasError"
-        error="Something went wrong"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <or-number-input
-        v-bind="$props"
-        v-model="inputValue"
-        :is-invalid="hasError"
-        error="Something went wrong"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <or-number-input
-        v-bind="$props"
-        v-model="inputValue"
-        :is-invalid="hasError"
-        error="Something went wrong"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-    </div>
-    `,
-});
-
-const TemplateToggleHint: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  data() {
-    return {
-      isActive: false,
-    };
-  },
-
-  template: `
-    <div>
-      <or-switch style="display: block;" v-model="isActive" :label="'Has Hint: ' + isActive"/>
-      <or-number-input
-        v-bind="$props"
-        :hint="isActive ? $props.hint : ''"
-        v-model="inputValue"
-        @update:modelValue="action"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-    </div>
-    `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const Small = Template.bind({});
-Small.args = { isSmall: true };
-
-export const Placeholder = Template.bind({});
-Placeholder.args = { placeholder: 'Placeholder' };
-
-export const Label = Template.bind({});
-Label.args = {
-  label: 'Label',
-
-  ...Placeholder.args,
-};
-
-export const Required = Template.bind({});
-Required.args = {
-  isRequired: true,
-
-  ...Label.args,
-  ...Placeholder.args,
-};
-
-export const LabelAppendSlot = TemplateLabelAppend.bind({});
-LabelAppendSlot.args = { ...Label.args };
-
-export const LabelSlot = TemplateLabelSlot.bind({});
-LabelSlot.args = {
-  id: 'input-id',
-
-  ...Placeholder.args,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  isDisabled: true,
-
-  ...Placeholder.args,
-  ...Label.args,
-};
-
-export const DefaultValue = TemplateWithValue.bind({});
-DefaultValue.args = {};
-
-export const Readonly = TemplateWithValue.bind({});
-Readonly.args = {
-  isReadonly: true,
-  label: 'Label',
-};
-
-export const MaxValue = Template.bind({});
-MaxValue.args = { maxValue: 10 };
-
-export const MinValue = Template.bind({});
-MinValue.args = { minValue: 0 };
-
-export const StepValue = Template.bind({});
-StepValue.args = { stepValue: 0.1 };
-
-export const MaxValueDefaultValue = TemplateWithValue.bind({});
-MaxValueDefaultValue.args = {
-  maxValue: 10,
-  hint: 'If the value > max value then should decrease the value',
-};
-
-export const Hint = Template.bind({});
-Hint.args = { hint: 'Hint' };
-
-export const HintToggle = TemplateToggleHint.bind({});
-HintToggle.args = { ...Hint.args };
-
-export const Invalid = Template.bind({});
-Invalid.args = { isInvalid: true };
-
-export const InvalidAndErrorText = Template.bind({});
-InvalidAndErrorText.args = {
-  ...Invalid.args,
-  error: 'Something went wrong',
-};
-
-export const InvalidErrorToggle = TemplateToggleErrorMessage.bind({});
-InvalidErrorToggle.args = {};
-
-export const InvalidErrorAndHint = TemplateToggleErrorMessage.bind({});
-InvalidErrorAndHint.args = {
-  hint: 'Hint',
-};
-
-export const InvalidDynamicError = TemplateDynamicError.bind({});
-InvalidDynamicError.args = {
-  hint: 'Good Good Good Good Good Good Good Good Good Good Good Good',
-  error: 'Should be > 4',
-};
-
-export const SlotPrepend = TemplateSlotPrepend.bind({});
-SlotPrepend.args = {
-  ...Label.args,
-  label: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
-  isInvalid: true,
-  error: 'Text error',
-};
-
-export const SlotAppend = TemplateSlotAppend.bind({});
-SlotAppend.args = {};