@onereach/ui-components 2.68.1-beta.2071.0 → 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;

package/src/components/or-input-v3/OrInput.vue

@@ -41,7 +41,7 @@
         @blur="$emit('blur', $event)"
       >
 
-      <div :class="['layout-row']">
+      <div :class="['layout-row', 'm-[-4px] md:m-[-2px]']">
         <template v-if="type === 'password'">
           <OrIconButton
             :icon="{ icon: disclosed ? 'visibility_off' : 'visibility', variant: 'filled' }"

package/src/components/or-select-v3/OrSelect.vue

@@ -74,7 +74,7 @@
         +{{ outerItems.length }}
       </template>
 
-      <div :class="['layout-row']">
+      <div :class="['layout-row', 'm-[-4px] md:m-[-2px]']">
         <OrIcon
           :icon="popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'"
           :variant="'outlined'"

package/src/components/or-tag-v3/OrTag.stories3.ts

@@ -1,8 +1,13 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
+import Faker from 'faker';
 import OrTagDocs from './OrTag.docs.mdx';
 import OrTag from './OrTag.vue';
 import { TagColor, TagVariant } from './props';
+import { OrButtonV3 as OrButton } from '../or-button-v3';
+import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
+import { useOverflow } from '../../hooks';
+import { ref } from 'vue-demi';
 
 export default {
   title: 'Components/Tag',
@@ -77,6 +82,97 @@ const Template: StoryFn<typeof OrTag> = (args) => ({
   `,
 });
 
+const ContainerTemplate: StoryFn<typeof OrTag> = (args) => ({
+  components: {
+    OrTag,
+    OrButton,
+    OrPopover,
+  },
+
+  setup() {
+    const container = ref<HTMLElement>();
+    const button = ref<InstanceType<typeof OrButton>>();
+    const popover = ref<InstanceType<typeof OrPopover>>();
+
+    const { innerItems, outerItems } = useOverflow(container);
+
+    return {
+      args,
+      container,
+      button,
+      popover,
+      innerItems,
+      outerItems,
+      handleClick: action('click'),
+      handleFocus: action('focus'),
+      handleBlur: action('blur'),
+      handleReset: action('reset'),
+    };
+  },
+
+  computed: {
+    tagsArr(): string[] {
+      return [
+        args.default,
+        ...(typeof args.tags === 'string' ? args.tags.split(' ') : []),
+      ];
+    },
+    hiddenTagsArr(): string[] {
+      return this.tagsArr.slice(this.innerItems?.length);
+    },
+  },
+
+  template: `
+    <div class="w-[512px] flex flex-row items-center overflow-hidden gap-xs">
+      <div
+        ref="container"
+        class="relative flex flex-row grow items-center overflow-hidden gap-xs"
+      >
+        <OrTag
+          v-for="tag in tagsArr"
+          v-bind="args"
+          @click="handleClick"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @reset="handleReset"
+        >
+          {{ tag }}
+        </OrTag>
+      </div>
+      <template v-if="outerItems?.length">
+        <OrButton
+          ref="button"
+          class="typography-caption-regular text-on-background dark:text-on-background-dark"
+          color="inherit"
+          variant="link"
+          @click="popover.open()"
+        >
+          +{{outerItems.length}}
+        </OrButton>
+        <OrPopover
+          ref="popover"
+          :trigger="button?.root"
+        >
+          <div
+            class="max-w-[192px] p-[16px] flex flex-row flex-wrap items-center overflow-hidden gap-xs"
+          >
+            <OrTag
+              v-for="tag in hiddenTagsArr"
+              v-bind="args"
+              @click="handleClick"
+              @focus="handleFocus"
+              @blur="handleBlur"
+              @reset="handleReset"
+            >
+              {{ tag }}
+            </OrTag>
+          </div>
+        </OrPopover>
+      </template>
+    </div>
+  `,
+});
+
 export const Default = Template.bind({});
 
 Default.args = {
@@ -99,3 +195,19 @@ WithCustomColor.args = {
   // Props
   color: '#0000ff',
 };
+
+export const InsideContainer = ContainerTemplate.bind({});
+
+InsideContainer.argTypes = {
+  tags: {
+    control: { type: 'text' },
+  },
+};
+
+InsideContainer.args = {
+  // Slots
+  default: 'First tag',
+
+  // Args
+  tags: Faker.lorem.words(32),
+};

package/src/hooks/useOverflow.ts

@@ -21,9 +21,12 @@ export function useOverflow(
 
     if (container) {
       const update = [...container.children].reduce(({ innerItems, outerItems }, child) => {
-        const item = child as HTMLElement, { x: offset, width } = child.getBoundingClientRect();
+        const item = child as HTMLElement;
 
-        if (offset + width >= container.clientWidth) {
+        const { x: itemOffset, width: itemWidth } = item.getBoundingClientRect();
+        const { x: containerOffset, width: containerWidth } = container.getBoundingClientRect();
+
+        if (itemOffset + itemWidth >= containerOffset + containerWidth) {
           item.style.setProperty('visibility', 'hidden');
 
           return {