@onereach/ui-components 2.68.0-beta.2017.0 → 2.68.0-beta.2019.0

package/dist/esm/v3/components/or-empty-state-v3/props.d.ts

@@ -1,4 +0,0 @@
-export declare enum EmptyStateSize {
-    L = "l",
-    M = "m"
-}

package/dist/esm/v3/components/or-empty-state-v3/styles.d.ts

@@ -1,15 +0,0 @@
-import { EmptyStateSize } from './props';
-export declare const EmptyStateRoot: string[];
-export declare const EmptyStateIconContainer: string[];
-export declare const EmptyStateIconContainerSizes: Record<EmptyStateSize, string[]>;
-export declare const EmptyStateIcon: string[];
-export declare const EmptyStateIconSizes: Record<EmptyStateSize, string[]>;
-export declare const EmptyStateImage: string[];
-export declare const EmptyStateImageSizes: Record<EmptyStateSize, string[]>;
-export declare const EmptyStateHeading: string[];
-export declare const EmptyStateHeadingSizes: Record<EmptyStateSize, string[]>;
-export declare const EmptyStateText: string[];
-export declare const EmptyStateContent: string[];
-export declare const EmptyStateTextSizes: Record<EmptyStateSize, string[]>;
-export declare const EmptyStateContentSizes: Record<EmptyStateSize, string[]>;
-export declare const EmptyStateLoaderStyles: string[];

package/dist/esm/v3/components/or-empty-state-v3/types.d.ts

@@ -1,2 +0,0 @@
-import { LoaderVariant } from '../or-loader-v3';
-export declare type EmptyStateLoader = boolean | LoaderVariant | undefined;

package/src/components/or-empty-state-v3/OrEmptyState.stories3.ts

@@ -1,221 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import OrEmptyState from './OrEmptyState.vue';
-import successPng from '../../assets/success.png';
-import { EmptyStateSize } from './props';
-
-export default {
-  title: 'Components/Empty State',
-  component: OrEmptyState,
-  argTypes: {
-    loader: {
-      control: {
-        type: 'inline-radio',
-        labels: {
-          'linear': "'linear'",
-          'circular': "'circular'",
-        }
-      },
-      options: [false, true, 'linear', 'circular'],
-    },
-    size: {
-      control: {
-        type: 'inline-radio',
-        labels: {
-          [EmptyStateSize.M]: 'Medium',
-          [EmptyStateSize.L]: 'Large',
-        },
-      },
-      options: Object.values(EmptyStateSize),
-    },
-  },
-  parameters: {
-    layout: 'centered',
-  },
-} as Meta<typeof OrEmptyState>
-
-const Template: StoryFn<typeof OrEmptyState> = (args) => ({
-  components: { OrEmptyState },
-  setup() {
-    return { args };
-  },
-  template: `
-    <OrEmptyState v-bind="args"/>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  heading: 'No aliens detected',
-  text: 'Invite some aliens to your planet.'
-};
-Default.parameters = {
-  layout: 'fullscreen',
-};
-Default.decorators = [
-  () => ({
-    template: `
-        <div class="
-          demo-wrapper w-full min-h-[200px] h-screen box-border relative
-          gap-sm p-md bg-surface-variant
-          flex flex-col
-          text-body-2-regular">
-          <div>
-            Note: This frame is added for demo purpose.<br>
-            The OrEmptyState component is transparent and has <code>width:100%</code> and <code>flex-grow:1</code> attributes.<br>
-            It is recommended to put it inside a column flex container or a row flex container that wraps.
-          </div>
-          <div class="demo-container grow bg-background dark:bg-background-dark flex flex-col"><story /></div>
-        </div>
-      `
-  })
-];
-
-export const LinearLoader = Template.bind({});
-LinearLoader.args = {
-  heading: 'Looking for aliens',
-  text: '27 aliens detected so far.',
-  loader: true,
-  size: EmptyStateSize.L,
-};
-LinearLoader.parameters = {
-  layout: 'fullscreen',
-};
-LinearLoader.decorators = [
-  () => ({
-    template: `
-        <div class="
-          demo-wrapper w-full h-[200px] box-border relative
-          gap-sm p-md bg-surface-variant
-          flex flex-col
-          text-body-2-regular">
-          <div>Note: Use linear loader (values <b>true</b> or <b>'linear'</b>) on pages and inside wide containers.</div>
-          <div class="demo-container grow bg-background dark:bg-background-dark flex flex-col"><story /></div>
-        </div>
-      `
-  })
-];
-
-export const CircularLoader = Template.bind({});
-CircularLoader.args = {
-  heading: 'Looking for aliens',
-  text: '27 aliens detected so far.',
-  loader: 'circular',
-};
-CircularLoader.parameters = {
-  layout: 'fullscreen',
-};
-CircularLoader.decorators = [
-  () => ({
-    template: `
-        <div class="
-          demo-wrapper w-full min-h-[200px] h-screen box-border relative
-          gap-sm p-md bg-surface-variant
-          flex flex-col
-          text-body-2-regular">
-          <div>Note: Use circular loader (value <b>'circular'</b>) in narrow containers and sidebars.</div>
-          <div class="demo-container w-[300px] grow bg-background dark:bg-background-dark flex flex-col"><story /></div>
-        </div>
-      `
-  })
-];
-
-export const MaterialIcon = Template.bind({});
-MaterialIcon.args = {
-  ...Default.args,
-  icon: 'travel_explore',
-};
-
-export const ImageIcon = Template.bind({});
-ImageIcon.args = {
-  heading: 'Planet populated',
-  text: 'So many aliens on this planet!',
-  imageSrc: successPng,
-};
-
-export const LargeSize = Template.bind({});
-LargeSize.args = {
-  ...ImageIcon.args,
-  size: EmptyStateSize.L,
-};
-
-export const ExtraContentInSlot: StoryFn<typeof OrEmptyState> = (args) => ({
-  components: { OrEmptyState },
-  setup() {
-    return { args };
-  },
-  template: `
-    <OrEmptyState v-bind="args" heading="Alien not found" text="Pass formatted content via a default slot.">
-      Alien named <b>Garry</b> not found.<br>
-      The text in the slot is by default formatted as a component's text prop.
-    </OrEmptyState>
-  `,
-});
-
-export const Containers = Template.bind({});
-Containers.args = {
-  ...Default.args,
-};
-Containers.parameters = {
-  layout: 'fullscreen',
-};
-Containers.decorators = [
-  () => ({
-    template: `
-      <div class="
-        demo-wrapper w-full min-h-screen box-border relative
-        gap-md p-md bg-surface-variant dark:bg-surface-variant-dark
-        grid grid-cols-3 grid-rows-[1fr_repeat(auto)]
-        text-caption-regular dark:text-secondary-dark dark:text-[12px]">
-        <!--Demo Container 1. Narrow-->
-        <div class="demo-1 demo-container row-span-3 flex flex-col gap-sm">
-          <div>
-            Narrow vertical container; flex flex-col;<br>
-            Background <code>bg-background</code> applied directly to the component
-          </div>
-          <story class="bg-background dark:bg-background-dark" loader="circular"/>
-        </div>
-        <!--Demo Container 2. Fixed-->
-        <div class="demo-2 flex flex-col gap-sm justify-center items-center">
-          <div>
-            Fixed size container; flex flex-col;<br>
-            Background bg-surface-1 applied to the container
-          </div>
-          <div class="demo-container w-[240px] h-[200px] bg-surface-1 dark:bg-surface-1-dark flex flex-col">
-            <story />
-          </div>
-        </div>
-        <!--Demo Container 3. No container-->
-        <div class="demo-3">
-          <div>No container or simple block container; no background </div>
-          <div class="demo-container w-fit"><story /></div>
-        </div>
-        <!--Demo Container 4. Wide not wrap-->
-        <div class="demo-4 col-span-2 flex flex-col gap-sm">
-          <div class="w-full">
-            Wide horizontal <b>no-wrap</b> container; flex flex-row;<br>
-            Background <code>bg-surface-1</code> applied to the container<br>
-            Background <code>bg-surface-4</code> applied to the component
-          </div>
-          <div class="demo-container bg-surface-1 dark:bg-surface-1-dark flex">
-            <div>Left item</div>
-            <story class="bg-surface-4 dark:bg-surface-4-dark" loader="linear"/>
-            <div>Right item</div>
-          </div>
-        </div>
-        <!--Demo Container 5. Wide wrap-->
-        <div class="demo-5 col-span-2 flex flex-col gap-sm">
-          <div class="w-full">
-            Wide horizontal <b>wrap</b> container; flex flex-row flex-wrap;<br>
-            Background <code>bg-surface-1</code> applied to the container<br>
-            Background <code>bg-surface-4</code> applied to the component
-          </div>
-          <div class="demo-container bg-surface-1 dark:bg-surface-1-dark flex flex-wrap">
-            <div>Left item</div>
-            <story class="bg-surface-4 dark:bg-surface-4-dark" loader="linear"/>
-            <div>Right item</div>
-          </div>
-        </div>
-      </div>
-    `
-  })
-];

package/src/components/or-empty-state-v3/OrEmptyState.vue

@@ -1,185 +0,0 @@
-<template>
-  <div :class="rootClasses">
-    <div :class="iconContainerClasses">
-      <OrIcon v-if="icon"
-              :icon="icon"
-              size="inherit"
-              :class="iconClasses" />
-    </div>
-    <img v-if="imageSrc"
-         :src="imageSrc"
-         :class="imageClasses"
-         alt="">
-    <div :class="headingClasses">
-      {{ heading }}
-    </div>
-    <div v-if="loader" :class="loaderClasses">
-      <OrLoader :variant="loaderVariant" />
-    </div>
-    <div v-if="$slots.default" :class="slotClasses">
-      <!-- @slot Additional content can be inserted via default slot. The slot uses the same font as a 'text' prop. -->
-      <slot/>
-    </div>
-    <div :class="textClasses">
-      {{ text }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue-demi';
-import { EmptyStateLoader, EmptyStateSize } from '.';
-import { OrIconV3 as OrIcon, } from '../or-icon-v3';
-import { LoaderVariant, OrLoaderV3 as OrLoader, } from '../or-loader-v3';
-import {
-  EmptyStateContent,
-  EmptyStateContentSizes,
-  EmptyStateHeading,
-  EmptyStateHeadingSizes,
-  EmptyStateIconContainer,
-  EmptyStateIconContainerSizes,
-  EmptyStateIcon,
-  EmptyStateIconSizes,
-  EmptyStateImage,
-  EmptyStateImageSizes,
-  EmptyStateLoaderStyles,
-  EmptyStateRoot,
-  EmptyStateText,
-  EmptyStateTextSizes
-} from './styles';
-
-/**
- * The component to display when there is no content on a page,
- * no records found or selected, or while the data is being loaded.
- * Provides a hint to the user on what to do.
- * Consists of text message, optional icon and optional loader.
- */
-export default defineComponent({
-  name: 'OrEmptyState',
-  components: {
-    OrIcon,
-    OrLoader,
-  },
-  props: {
-    /**
-     * Size of the component, affects font and icon size.
-     * Use Large if the component takes all screen space,
-     * and Medium if it is a part of the complex layout.
-     */
-    size: {
-      type: String as PropType<EmptyStateSize>,
-      default: EmptyStateSize.M,
-    },
-    /**
-     * The heading of the empty state block.
-     */
-    heading: {
-      type: String,
-      default: '',
-    },
-    /**
-     * Additional text such as a hint for a user with proposed next steps.
-     */
-    text: {
-      type: String,
-      default: '',
-    },
-    /**
-     * Material icon name to display above the heading.
-     */
-    icon: {
-      type: String,
-      default: undefined,
-    },
-    /**
-     * Path to the image to display above the heading.
-     * Image height is scaled to 48px, width is undefined to preserve aspect ratio.
-     */
-    imageSrc: {
-      type: String,
-      default: undefined,
-    },
-    /**
-     * If provided, then loader is being displayed.
-     * Accepts booleans and OrLoader::variant values. `true` falls back to 'linear'.
-     */
-    loader: {
-      type: [String, Boolean] as PropType<EmptyStateLoader>,
-      default: false,
-    },
-  },
-  computed: {
-    loaderVariant(): LoaderVariant | undefined {
-      if (typeof this.loader === 'string') {
-        return this.loader;
-      } else if (this.loader === true) {
-        return LoaderVariant.Linear;
-      } else {
-        return undefined;
-      }
-    },
-    rootClasses(): string[] {
-      return [
-        'or-empty-state',
-        ...EmptyStateRoot,
-      ];
-    },
-    iconContainerClasses(): string[] {
-      return [
-        'or-empty-state_icon-container',
-        ...EmptyStateIconContainer,
-        ...EmptyStateIconContainerSizes[this.size],
-
-      ];
-    },
-    iconClasses(): string[] {
-      return [
-        'or-empty-state_icon',
-        ...EmptyStateIcon,
-        ...EmptyStateIconSizes[this.size],
-
-      ];
-    },
-    imageClasses(): string[] {
-      return [
-        'or-empty-state_image',
-        ...EmptyStateImage,
-        ...EmptyStateImageSizes[this.size],
-
-      ];
-    },
-    headingClasses(): string[] {
-      return [
-        'or-empty-state_heading',
-        ...EmptyStateHeading,
-        ...EmptyStateHeadingSizes[this.size],
-
-      ];
-    },
-    textClasses(): string[] {
-      return [
-        'or-empty-state_text',
-        ...EmptyStateText,
-        ...EmptyStateTextSizes[this.size],
-
-      ];
-    },
-    slotClasses(): string[] {
-      return [
-        'or-empty-state_content',
-        ...EmptyStateContent,
-        ...EmptyStateContentSizes[this.size],
-      ];
-    },
-    loaderClasses(): string[] {
-      return [
-        'or-empty-state_loader',
-        ...EmptyStateLoaderStyles,
-      ];
-    },
-  },
-});
-</script>
-
-<style scoped>
-</style>

package/src/components/or-empty-state-v3/index.ts

@@ -1,3 +0,0 @@
-export { default as OrEmptyStateV3 } from './OrEmptyState.vue';
-export * from './types';
-export * from './props';

package/src/components/or-empty-state-v3/props.ts

@@ -1,4 +0,0 @@
-export enum EmptyStateSize {
-  L = 'l',
-  M = 'm',
-}

package/src/components/or-empty-state-v3/styles.ts

@@ -1,121 +0,0 @@
-import { EmptyStateSize } from './props';
-
-export const EmptyStateRoot: string[] = [
-  // Layout
-  'grow',
-  'flex',
-  'flex-col',
-  'justify-center',
-  'items-center',
-
-  // Box
-  'w-full',
-
-  // Sizing
-  'gap-sm',
-];
-
-export const EmptyStateIconContainer: string[] = [
-  // Theme
-  'text-on-surface-variant',
-  'dark:text-on-surface-variant-dark',
-];
-
-export const EmptyStateIconContainerSizes: Record<EmptyStateSize, string[]> = {
-  [EmptyStateSize.L]: [
-    // Typography
-    'text-[64px]',
-  ],
-  [EmptyStateSize.M]: [
-    // Typography
-    'text-[48px]',
-  ],
-}
-
-export const EmptyStateIcon: string[] = [
-  // Sizing
-  'mb-sm',
-];
-
-export const EmptyStateIconSizes: Record<EmptyStateSize, string[]> = {
-  [EmptyStateSize.L]: [
-    // Box
-    'w-3xl',
-    'h-3xl',
-  ],
-  [EmptyStateSize.M]: [
-    // Box
-    'w-2xl',
-    'h-2xl',
-  ],
-};
-
-export const EmptyStateImage = EmptyStateIcon;
-
-export const EmptyStateImageSizes: Record<EmptyStateSize, string[]> = {
-  [EmptyStateSize.L]: [
-    // Box
-    'h-3xl',
-  ],
-  [EmptyStateSize.M]: [
-    // Box
-    'h-2xl',
-  ],
-}
-
-export const EmptyStateHeading: string[] = [
-  // Theme
-  'text-on-background',
-  'dark:text-on-background-dark'
-];
-
-export const EmptyStateHeadingSizes: Record<EmptyStateSize, string[]> = {
-  [EmptyStateSize.L]: [
-    // Typography
-    'text-headline-2',
-    'font-headline-2',
-  ],
-  [EmptyStateSize.M]: [
-    // Typography
-    'text-headline-4',
-    'font-headline-4',
-  ],
-}
-
-export const EmptyStateText: string[] = [
-  'text-center',
-
-  // Theme
-  'text-outline',
-  'dark:text-outline-dark',
-];
-
-export const EmptyStateContent = EmptyStateText;
-
-export const EmptyStateTextSizes: Record<EmptyStateSize, string[]> = {
-  [EmptyStateSize.L]: [
-    // Typography
-    'text-body-2-regular',
-    'font-body-2-regular',
-  ],
-  [EmptyStateSize.M]: [
-    // Typography
-    'text-caption-regular',
-    'font-caption-regular',
-  ],
-};
-
-export const EmptyStateContentSizes = EmptyStateTextSizes;
-
-export const EmptyStateLoaderStyles: string[] = [
-  // Layout
-  'flex',
-  'justify-center',
-
-  // Box
-  'w-2/5',
-  'max-w-[432px]',
-
-  // Sizing
-  'my-sm'
-];

package/src/components/or-empty-state-v3/types.ts

@@ -1,3 +0,0 @@
-import { LoaderVariant } from '../or-loader-v3';
-
-export type EmptyStateLoader = boolean | LoaderVariant | undefined;