@onereach/ui-components 2.68.1 → 2.69.0-beta.2073.0

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

@@ -0,0 +1,87 @@
+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: {
+    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 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>
+  `,
+});

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

@@ -0,0 +1,121 @@
+<template>
+  <div
+    class="static"
+    :class="rootClasses">
+    <img v-if="imageSrc"
+         :src="imageSrc"
+         :class="imageClasses"
+         alt="">
+    <div :class="headingClasses">
+      {{ heading }}
+    </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 { EmptyStateSize } from '.';
+import {
+  EmptyStateContent,
+  EmptyStateContentSizes,
+  EmptyStateHeading,
+  EmptyStateHeadingSizes,
+  EmptyStateImage,
+  EmptyStateImageSizes,
+  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',
+  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: '',
+    },
+    /**
+     * Path to the image to display above the heading.
+     * Image height is fixed depending on `size` prop, width is undefined to preserve aspect ratio.
+     */
+    imageSrc: {
+      type: String,
+      default: undefined,
+    },
+  },
+  computed: {
+    rootClasses(): string[] {
+      return [
+        'or-empty-state',
+        ...EmptyStateRoot,
+      ];
+    },
+    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],
+      ];
+    },
+  },
+});
+</script>
+
+<style scoped>
+</style>

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

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

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

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

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

@@ -0,0 +1,76 @@
+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 EmptyStateImage = [
+  // Sizing
+  'mb-sm',
+];
+
+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;

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

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