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

package/src/components/or-color-picker/OrColorPicker.stories.ts

@@ -1,48 +0,0 @@
-import { Story } from '@storybook/vue';
-import OrColorPicker from './OrColorPicker.vue';
-import { action } from '@storybook/addon-actions';
-import { OrFloatingPlacements } from '../or-floating';
-
-export default {
-  title: 'Components/OrColorPicker',
-
-  component: OrColorPicker,
-
-  argTypes: {
-    placement: {
-      control: 'select',
-      options: Object.values(OrFloatingPlacements),
-      defaultValue: OrFloatingPlacements.BOTTOM_START,
-    },
-  },
-};
-
-const Template: Story = (_args, { argTypes }) => {
-  return {
-    props: Object.keys(argTypes),
-    components: {
-      OrColorPicker,
-    },
-    methods: {
-      OnSelect: action('select'),
-    },
-    template: `
-    <div>
-      <or-color-picker v-bind="$props" @select="OnSelect"></or-color-picker>
-    </div>
-  `,
-  };
-};
-export const OrColorPickerDefault = Template.bind({});
-OrColorPickerDefault.args = {
-  defaultColor: '#01579B',
-};
-
-export const OrColorPickerCustomPalette = Template.bind({});
-OrColorPickerCustomPalette.args = {
-  defaultColor: '#01579B',
-  palette: [
-    ['#A16CE8', '#6E6CE8', '#8ED6F8', '#585858', '#F5C350', '#6CE883'],
-    ['#5D1AB6', '#1513B3', '#2690C2', '#000000', '#F48A4E', '#13B364'],
-  ],
-};

package/src/components/or-confirm/OrConfirm.stories.ts

@@ -1,175 +0,0 @@
-import { Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-import Faker from 'faker';
-import OrConfirm from './OrConfirm.vue';
-import { BUTTON_COLOR } from '../or-button-v2';
-import { OrModalSizes } from '../or-modal';
-import { OrButtonV2 as OrButton } from '../or-button-v2';
-
-export default {
-  title: 'Components/OrConfirm',
-  component: OrConfirm,
-  args: {
-    isOpen: true,
-  },
-  argTypes: {
-    confirmButtonColor: {
-      control: {
-        type: 'select',
-        options: Object.values(BUTTON_COLOR) as string[],
-        default: BUTTON_COLOR.ERROR,
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: Object.values(OrModalSizes) as string[],
-        default: OrModalSizes.tiny,
-      },
-    },
-    default: {
-      control: 'text',
-      description: 'Slot content',
-      table: {
-        defaultValue: '',
-        type: {
-          summary: null,
-        },
-      },
-    },
-    footer: {
-      control: 'text',
-      description: 'Footer Slot content',
-    },
-  },
-};
-
-const Template: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrConfirm },
-  methods: {
-    onClose: action('close'),
-    onConfirm: action('confirm'),
-  },
-  template: `
-    <div style="height: 300px;">
-      <or-confirm v-bind="$props" @close="onClose" @confirm="onConfirm" style="position: absolute;">
-        <template>
-          ${args.default}
-        </template>
-        <template  v-if="${!!args.footer}" v-slot:footer>
-          ${args.footer}
-        </template>
-      </or-confirm>
-    </div>
-  `,
-});
-
-const TemplateWithOpening: Story = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    OrConfirm,
-    OrButton,
-  },
-  data() {
-    return {
-      isOpened: false,
-    };
-  },
-  methods: {
-    onClose(...args: any[]) {
-      (this as any).isOpened = false;
-      action('close')(...args);
-    },
-    onConfirm(...args: any[]) {
-      (this as any).isOpened = false;
-      action('confirm')(...args);
-    },
-  },
-  template: `
-    <div style="height: 300px;">
-      <or-button content="open" @click="isOpened = true" />
-      <or-confirm :is-open="isOpened" v-bind="$props" @close="onClose" @confirm="onConfirm" style="position: absolute;">
-        <template>
-          ${args.default}
-        </template>
-        <template  v-if="${!!args.footer}" v-slot:footer>
-          ${args.footer}
-        </template>
-      </or-confirm>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  titleText: 'Delete permanently',
-  default: `Are you sure you want to delete <b>${Faker.commerce.productName()}</b> permanently?`,
-  confirmButtonText: 'Delete',
-  denyButtonText: 'Keep it',
-};
-
-export const WithClose = Template.bind({});
-WithClose.args = {
-  ...Default.args,
-  showClose: true,
-};
-
-export const IsLoading = Template.bind({});
-IsLoading.args = {
-  ...Default.args,
-  isLoading: true,
-};
-
-export const IsDisabled = Template.bind({});
-IsDisabled.args = {
-  ...Default.args,
-  isDisabled: true,
-};
-
-export const WithCloseOnClickOutside = Template.bind({});
-WithCloseOnClickOutside.args = {
-  ...Default.args,
-  closeOnClickOutside: true,
-};
-
-const valToDelete = Faker.commerce.productName();
-export const WithTextConfirmation = Template.bind({});
-WithTextConfirmation.args = {
-  ...Default.args,
-  default: `Are you sure you want to delete <b>${valToDelete}</b> permanently?<br/> Please enter name to confirm.`,
-  confirmationText: valToDelete,
-  textConfirmationLabel: 'Item name',
-  textConfirmationPlaceholder: 'Item to delete...',
-  textConfirmationError: 'Names do not match',
-};
-
-export const WithOpening = TemplateWithOpening.bind({});
-WithOpening.args = {
-  ...WithTextConfirmation.args,
-  showClose: true,
-  closeOnClickOutside: true,
-};
-
-export const WithCustomSize = Template.bind({});
-WithCustomSize.args = {
-  ...Default.args,
-  default: Faker.lorem.paragraphs(2),
-  size: OrModalSizes.small,
-};
-
-export const WithCustomFooter = Template.bind({});
-WithCustomFooter.args = {
-  titleText: 'Delete permanently',
-  default: `Are you sure you want to delete <b>${Faker.commerce.productName()}</b> permanently?`,
-  footer: 'Footer content',
-};
-
-export const ConfirmButtonColor = Template.bind({});
-ConfirmButtonColor.args = {
-  titleText: 'Confirm',
-  default: `Are you sure you want to <i>${Faker.hacker.verb()}</i> the <b>${Faker.hacker.noun()}</b>?`,
-  confirmButtonColor: BUTTON_COLOR.PRIMARY,
-  confirmButtonText: 'Yes',
-  denyButtonText: 'No',
-};

package/src/components/or-date-time-picker/OrDateTimePicker.stories.ts

@@ -1,162 +0,0 @@
-import { ArgTypes, Story } from '@storybook/vue';
-import { action } from '@storybook/addon-actions';
-import OrDateTimePicker from './OrDateTimePicker.vue';
-import { OrDateTimePickerTypes } from './constants';
-
-export default {
-  title: 'Components/OrDateTimePicker',
-
-  component: OrDateTimePicker,
-
-  argTypes: {
-    type: {
-      options: Object.values(OrDateTimePickerTypes),
-      control: 'select',
-    },
-  },
-};
-
-const defaultMixin = (argTypes: ArgTypes) => ({
-  props: Object.keys(argTypes),
-
-  components: { OrDateTimePicker },
-
-  data() {
-    return {
-      date: null as Date | null,
-    };
-  },
-
-  methods: {
-    onUpdate: action('update:modelValue'),
-  },
-});
-
-const valueMixin = (argTypes: ArgTypes) => ({
-  props: Object.keys(argTypes),
-
-  components: { OrDateTimePicker },
-
-  data() {
-    return {
-      date: new Date(),
-    };
-  },
-
-  methods: {
-    onUpdate: action('update:modelValue'),
-  },
-});
-
-
-const Template: Story = (args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-
-  template: `<or-date-time-picker
-      v-model="date"
-      v-bind="$props"
-      @update:modelValue="onUpdate"
-    >
-      <template v-if="${!!args['label-default']}" v-slot:label-default>
-        ${args['label-default']}
-      </template>
-      <template v-if="${!!args['label-append']}" v-slot:label-append>
-        ${args['label-append']}
-      </template>
-    </or-date-time-picker>
-  `,
-});
-
-
-const ValueTemplate: Story = (args, { argTypes }) => ({
-  mixins: [valueMixin(argTypes)],
-
-  template: `<or-date-time-picker
-      v-model="date"
-      v-bind="$props"
-      @update:modelValue="onUpdate"
-    >
-      <template v-if="${!!args['label-default']}" v-slot:label-default>
-        ${args['label-default']}
-      </template>
-      <template v-if="${!!args['label-append']}" v-slot:label-append>
-        ${args['label-append']}
-      </template>
-    </or-date-time-picker>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const Fullwidth = Template.bind({});
-Fullwidth.args = {
-  isFullwidth: true,
-};
-
-export const DateTimePicker = Template.bind({});
-DateTimePicker.args = {
-  type: OrDateTimePickerTypes.dateTime,
-};
-
-export const DatePicker = Template.bind({});
-DatePicker.args = {
-  type: OrDateTimePickerTypes.date,
-};
-
-export const TimePicker = Template.bind({});
-TimePicker.args = {
-  type: OrDateTimePickerTypes.time,
-};
-
-export const WithValue = ValueTemplate.bind({});
-WithValue.args = {};
-
-export const WithLabel = Template.bind({});
-WithLabel.args = {
-  label: 'Order date',
-};
-
-export const WithLabelRequired = Template.bind({});
-WithLabelRequired.args = {
-  label: 'Order date',
-  isRequired: true,
-};
-
-export const WithLabelSlot = Template.bind({});
-WithLabelSlot.args = {
-  'label-default': '<b>Order</b> <i>date</i>',
-};
-
-export const WithLabelAppendSlot = Template.bind({});
-WithLabelAppendSlot.args = {
-  label: 'Order date',
-  'label-append': '<b>(?)</b>',
-};
-
-export const WithHint = Template.bind({});
-WithHint.args = {
-  hint: 'Select any date',
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  error: 'Wrong date',
-  isInvalid: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  isDisabled: true,
-};
-
-export const Readonly = ValueTemplate.bind({});
-Readonly.args = {
-  isReadonly: true,
-};
-
-export const WithDisabledDates = Template.bind({});
-WithDisabledDates.args = {
-  label: 'Filter future dates',
-  dateFilter: (date: Date) => date.getTime() > new Date().getTime(),
-};

package/src/components/or-error/OrError.stories.ts

@@ -1,35 +0,0 @@
-import Faker from 'faker';
-import { Story } from '@storybook/vue';
-import OrError from './OrError.vue';
-
-export default {
-  title: 'Components/OrError',
-  component: OrError,
-};
-
-const Template: Story = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrError },
-  template: '<or-error v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  error: Faker.commerce.productName(),
-};
-
-export const VeryLongText = Template.bind({});
-VeryLongText.args = {
-  error: Faker.random.alpha({
-    count: 250,
-    upcase: true,
-  }),
-};
-
-const TemplateWithSlot: Story = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrError },
-  template: `<or-error v-bind="$props">${Faker.company.catchPhrase()}</or-error>`,
-});
-
-export const DefaultWithSlot = TemplateWithSlot.bind({});

package/src/components/or-floating/OrFloating.stories.ts

@@ -1,81 +0,0 @@
-import { OrFloating, OrFloatingPlacements } from './index';
-import { ArgTypes, Story } from '@storybook/vue';
-import { ref } from 'vue-demi';
-
-export default {
-  title: 'Components/OrFloating',
-
-  component: OrFloating,
-
-  argTypes: {
-    placement: {
-      control: 'select',
-      options: Object.values(OrFloatingPlacements),
-      defaultValue: OrFloatingPlacements.TOP,
-    },
-    offset: {
-      control: 'number',
-      defaultValue: 8,
-    },
-  },
-};
-
-const defaultTemplate = `
-  <div style="height: 100px; overflow: auto; border: 1px dashed black;">
-    <div style="height: 500px;">
-      <div
-          :id="triggerId"
-          ref="trigger"
-          style="resize: both; border: 1px solid black; width: 50px; height: 50px; overflow: auto;"
-        >
-          Resize me!
-        </div>
-        <!--refs don't work in stories, so have to use id-->
-        <or-floating
-          v-if="trigger"
-          v-bind="$props"
-          :trigger="trigger"
-        >
-          <div style="border: 1px solid black; background: white;">
-            Floating div!
-          </div>
-        </or-floating>
-    </div>
-  </div>
-`;
-const defaultMixin = (argTypes: ArgTypes) => ({
-  props: Object.keys(argTypes),
-
-  components: { OrFloating },
-  setup() {
-    return {
-      trigger: ref<HTMLElement>(),
-    };
-  },
-  mounted() { //refs don't work in stories, so have to use id
-    this.trigger = document.getElementById(this.triggerId);
-  },
-});
-
-const Template: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-  template: defaultTemplate,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  triggerId: 'triggerDefault',
-};
-
-export const RightPlaced = Template.bind({});
-RightPlaced.args = {
-  triggerId: 'triggerRightPlaced',
-  placement: OrFloatingPlacements.RIGHT,
-};
-
-export const HideStrategyEscaped = Template.bind({});
-HideStrategyEscaped.args = {
-  triggerId: 'triggerHideOnParent',
-  placement: OrFloatingPlacements.RIGHT,
-  hideStrategy: 'escaped',
-};

package/src/components/or-hint/OrHint.stories.ts

@@ -1,26 +0,0 @@
-import OrHint from './OrHint.vue';
-import { Story } from '@storybook/vue';
-
-export default {
-  title: 'Components/OrHint',
-
-  component: OrHint,
-};
-
-const Template: Story = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: { OrHint },
-
-  template: `
-    <or-hint v-bind="$props">
-      Password has to be at least 6 characters long and must contain
-      at least more than one digit. (Slot)
-    </or-hint>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = { hint: 'Password has to be at least 6 characters long and must contain at least more than one digit.' };
-
-export const Slot = Template.bind({});

package/src/components/or-icon/OrIcon.stories.ts

@@ -1,74 +0,0 @@
-import OrIcon from './OrIcon.vue';
-import { Story } from '@storybook/vue';
-import { OrIconColors, OrIconType } from './constants';
-import { OrFloatingPlacements } from '../or-floating';
-
-export default {
-  title: 'Components/OrIcon',
-  component: OrIcon,
-  argTypes: {
-    color: {
-      control: {
-        type: 'select',
-        options: Object.values(OrIconColors),
-      },
-    },
-    tooltipPlacement: {
-      control: {
-        type: 'select',
-        options: Object.values(OrFloatingPlacements),
-      },
-    },
-    iconType: {
-      control: {
-        type: 'select',
-        options: Object.values(OrIconType),
-      },
-    },
-  },
-};
-
-const Template: Story = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrIcon },
-  template: `
-    <div style="margin: 0 auto; width: fit-content; padding: 50px">
-      <or-icon v-bind="$props">
-        <template v-if="${!!_args.default}" v-slot:default>
-          ${_args.default}
-        </template>
-      </or-icon>
-    </div>
-  `,
-});
-
-const StyledTemplate: Story = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { OrIcon },
-  template: `
-    <div style="margin: 0 auto; width: fit-content; padding: 50px">
-      <or-icon v-bind="$props" :style="customStyle">
-        <template v-if="${!!_args.default}" v-slot:default>
-          ${_args.default}
-        </template>
-      </or-icon>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-export const Slot = Template.bind({});
-export const Tooltip = Template.bind({});
-export const Styled = StyledTemplate.bind({});
-
-Default.args = { icon: 'done' };
-Slot.args = { default: 'delete' };
-Tooltip.args = {
-  ...Default.args,
-  tooltipText: 'Tooltip text',
-};
-Styled.args = {
-  ...Default.args,
-  tooltipText: 'Tooltip!',
-  customStyle: { 'background': 'var(--c-neutral-2)' },
-};

package/src/components/or-icon/or-icon-tips.stories.mdx

@@ -1,26 +0,0 @@
-import { Meta, Description } from "@storybook/addon-docs";
-
-<Meta title="Components/OrIcon/OrIcons Tips" />
-
-#### OrIcon Tips
-At the moment you can manage icon view by using `iconType` props.
-
-Available values is:
-```ts
-export enum OrIconType {
-  outline = 'outlined',
-  filled = 'filled', // default value
-  round = 'round',
-  sharp = 'sharp',
-  'two-tone' = 'two-tone'
-}
-```
-All you need to do is include a single line of HTML in index.html for each  `iconType` props.
-
-```html
-OrIconType.outline => <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
-OrIconType.filled  => <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-OrIconType.rounded => <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
-OrIconType.sharp => <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
-OrIconType.two-tone => <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet">
-```