@dcrackel/hematournamentui 1.0.711 → 1.0.713

package/src/stories/Atoms/Input/BaseInput.vue

@@ -1,149 +1,149 @@
-<template>
-  <div :class="iconName ? '' : ''">
-    <input
-      ref="input"
-      :value="internalValue"
-      :class="baseClasses"
-      :placeholder="placeholder"
-      :type="inputType"
-      :disabled="disabled"
-      :aria-invalid="invalid"
-      @input="onInput"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-  </div>
-</template>
-
-<script>
-const sizeClasses = {
-  xs: ' text-xs',
-  sm: ' text-sm',
-  md: ' text-md',
-  lg: ' text-lg',
-  xl: ' text-xl',
-  '2xl': ' text-2xl',
-  '3xl': ' text-3xl',
-  '4xl': ' text-4xl',
-  '5xl': ' text-5xl'
-};
-
-export default {
-  name: 'BaseInput',
-  emits: ['update:value'],
-  props: {
-    placeholder: {
-      type: [String, Number],
-      default: ''
-    },
-    value: {
-      type: [String, Number],
-      default: ''
-    },
-    inputType: {
-      type: String,
-      default: 'text'
-    },
-    invalid: {
-      type: Boolean,
-      default: false
-    },
-    addBorder: {
-      type: Boolean,
-      default: false
-    },
-    iconName: {
-      type: String,
-      default: ''
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    iconStyle: {
-      type: String,
-      default: 'fa-solid',
-      validator: value => ['fa-solid', 'fa-regular', 'fa-light', 'fa-thing'].includes(value)
-    },
-    size: {
-      type: String,
-      default: 'sm',
-      validator: value => ['', ' ', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].includes(value)
-    },
-    centerInput: {
-      type: Boolean,
-      default: false
-    },
-    iconColor: {
-      type: String,
-      default: 'primary',
-      validator: value =>
-        ['neutral', 'primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'bright', 'white', 'alarm'].includes(
-          value
-        )
-    },
-    allowPercent: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      internalValue: this.value,
-      currentPlaceholder: this.placeholder
-    };
-  },
-  computed: {
-    baseClasses() {
-      let classes = 'appearance-none focus:outline-none w-full text-sm rounded-lg text-quinary';
-      if (this.addBorder) {
-        classes += this.invalid ? ' border border-alarm p-2' : ' border border-dropdownSelect p-2';
-      }
-
-      if (this.centerInput) classes += ' text-center';
-
-      classes += sizeClasses[this.size] || '';
-
-      return classes;
-    }
-  },
-  watch: {
-    value(newValue) {
-      this.internalValue = newValue;
-    }
-  },
-  methods: {
-    onInput(event) {
-      if (this.disabled) return;
-      const input = event.target;
-      let sanitizedValue = input.value;
-
-      if (this.inputType === 'number') {
-        sanitizedValue = sanitizedValue.replace(/\D/g, '');
-      }
-      if (this.inputType === 'text') {
-        this.allowPercent
-          ? (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$^(){}\[\]]/g, ''))
-          : (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$%^(){}\[\]]/g, ''));
-      }
-
-      this.internalValue = sanitizedValue;
-      input.value = sanitizedValue;
-      this.$emit('update:value', sanitizedValue);
-    },
-    onFocus() {
-      this.currentPlaceholder = '';
-    },
-    onBlur() {
-      if (!this.internalValue) {
-        this.currentPlaceholder = this.placeholder;
-      }
-    },
-    focus() {
-      if (this.$refs.input) {
-        this.$refs.input.focus();
-      }
-    }
-  }
-};
-</script>
+<template>
+  <div :class="iconName ? '' : ''">
+    <input
+      ref="input"
+      :value="internalValue"
+      :class="baseClasses"
+      :placeholder="placeholder"
+      :type="inputType"
+      :disabled="disabled"
+      :aria-invalid="invalid"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+  </div>
+</template>
+
+<script>
+const sizeClasses = {
+  xs: ' text-xs',
+  sm: ' text-sm',
+  md: ' text-md',
+  lg: ' text-lg',
+  xl: ' text-xl',
+  '2xl': ' text-2xl',
+  '3xl': ' text-3xl',
+  '4xl': ' text-4xl',
+  '5xl': ' text-5xl'
+};
+
+export default {
+  name: 'BaseInput',
+  emits: ['update:value'],
+  props: {
+    placeholder: {
+      type: [String, Number],
+      default: ''
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    inputType: {
+      type: String,
+      default: 'text'
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    addBorder: {
+      type: Boolean,
+      default: false
+    },
+    iconName: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    iconStyle: {
+      type: String,
+      default: 'fa-solid',
+      validator: value => ['fa-solid', 'fa-regular', 'fa-light', 'fa-thing'].includes(value)
+    },
+    size: {
+      type: String,
+      default: 'sm',
+      validator: value => ['', ' ', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].includes(value)
+    },
+    centerInput: {
+      type: Boolean,
+      default: false
+    },
+    iconColor: {
+      type: String,
+      default: 'primary',
+      validator: value =>
+        ['neutral', 'primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'bright', 'white', 'alarm'].includes(
+          value
+        )
+    },
+    allowPercent: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      internalValue: this.value,
+      currentPlaceholder: this.placeholder
+    };
+  },
+  computed: {
+    baseClasses() {
+      let classes = 'appearance-none focus:outline-none w-full text-sm rounded-lg text-quinary';
+      if (this.addBorder) {
+        classes += this.invalid ? ' border border-alarm p-2' : ' border border-dropdownSelect p-2';
+      }
+
+      if (this.centerInput) classes += ' text-center';
+
+      classes += sizeClasses[this.size] || '';
+
+      return classes;
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.internalValue = newValue;
+    }
+  },
+  methods: {
+    onInput(event) {
+      if (this.disabled) return;
+      const input = event.target;
+      let sanitizedValue = input.value;
+
+      if (this.inputType === 'number') {
+        sanitizedValue = sanitizedValue.replace(/\D/g, '');
+      }
+      if (this.inputType === 'text') {
+        this.allowPercent
+          ? (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$^(){}\[\]]/g, ''))
+          : (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$%^(){}\[\]]/g, ''));
+      }
+
+      this.internalValue = sanitizedValue;
+      input.value = sanitizedValue;
+      this.$emit('update:value', sanitizedValue);
+    },
+    onFocus() {
+      this.currentPlaceholder = '';
+    },
+    onBlur() {
+      if (!this.internalValue) {
+        this.currentPlaceholder = this.placeholder;
+      }
+    },
+    focus() {
+      if (this.$refs.input) {
+        this.$refs.input.focus();
+      }
+    }
+  }
+};
+</script>

package/src/stories/Molecules/Indicators/MissingHemaRatingsId/MissingHemaRatingsId.stories.js

@@ -1,23 +1,23 @@
-import MissingHemaRatingsId from './MissingHemaRatingsId.vue';
-
-export default {
-  title: 'Molecules/Indicators/MissingHemaRatingsId',
-  component: MissingHemaRatingsId,
-  tags: ['autodocs'],
-  args: { person: { HemaRatingsId: null } },
-  argTypes: {
-    person: { control: 'object' }
-  }
-};
-
-export const MissingId = {
-  args: { person: { HemaRatingsId: null } }
-};
-
-export const UnratedWithId = {
-  args: { person: { HemaRatingsId: 10255, HEMARatings: [] } }
-};
-
-export const IdFromRating = {
-  args: { person: { HEMARatings: [{ HemaRatingId: 10255, Rating: 1708.8 }] } }
-};
+import MissingHemaRatingsId from './MissingHemaRatingsId.vue';
+
+export default {
+  title: 'Molecules/Indicators/MissingHemaRatingsId',
+  component: MissingHemaRatingsId,
+  tags: ['autodocs'],
+  args: { person: { HemaRatingsId: null } },
+  argTypes: {
+    person: { control: 'object' }
+  }
+};
+
+export const MissingId = {
+  args: { person: { HemaRatingsId: null } }
+};
+
+export const UnratedWithId = {
+  args: { person: { HemaRatingsId: 10255, HEMARatings: [] } }
+};
+
+export const IdFromRating = {
+  args: { person: { HEMARatings: [{ HemaRatingId: 10255, Rating: 1708.8 }] } }
+};

package/src/stories/Molecules/Indicators/MissingHemaRatingsId/MissingHemaRatingsId.vue

@@ -1,35 +1,35 @@
-<template>
-  <span
-    v-if="!hasHemaRatingsId"
-    role="img"
-    aria-label="Missing HEMA Ratings ID"
-    title="Missing HEMA Ratings ID"
-    data-testid="missing-hema-ratings-id"
-    class="inline-flex shrink-0 items-center justify-center text-alarm"
-  >
-    <svg class="h-6 w-6 md:h-7 md:w-7" viewBox="0 0 32 32" fill="none" aria-hidden="true">
-      <circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="2" />
-      <text x="16" y="20" text-anchor="middle" fill="currentColor" class="font-bold" font-size="11">HR</text>
-      <path d="M7 25 25 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-    </svg>
-  </span>
-</template>
-
-<script>
-export default {
-  name: 'MissingHemaRatingsId',
-  props: {
-    person: {
-      type: Object,
-      default: null
-    }
-  },
-  computed: {
-    hasHemaRatingsId() {
-      const id = this.person?.HemaRatingsId ?? this.person?.HEMARatings?.[0]?.HemaRatingId;
-      const numericId = Number(id);
-      return Number.isInteger(numericId) && numericId > 0;
-    }
-  }
-};
-</script>
+<template>
+  <span
+    v-if="!hasHemaRatingsId"
+    role="img"
+    aria-label="Missing HEMA Ratings ID"
+    title="Missing HEMA Ratings ID"
+    data-testid="missing-hema-ratings-id"
+    class="inline-flex shrink-0 items-center justify-center text-alarm"
+  >
+    <svg class="h-6 w-6 md:h-7 md:w-7" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+      <circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="2" />
+      <text x="16" y="20" text-anchor="middle" fill="currentColor" class="font-bold" font-size="11">HR</text>
+      <path d="M7 25 25 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+    </svg>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'MissingHemaRatingsId',
+  props: {
+    person: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    hasHemaRatingsId() {
+      const id = this.person?.HemaRatingsId ?? this.person?.HEMARatings?.[0]?.HemaRatingId;
+      const numericId = Number(id);
+      return Number.isInteger(numericId) && numericId > 0;
+    }
+  }
+};
+</script>

package/src/stories/Molecules/Indicators/RegistrationStatus/RegistrationStatus.vue

@@ -0,0 +1,30 @@
+<template>
+  <div v-if="statusLabel" class="inline-flex items-center gap-2 whitespace-nowrap">
+    <span class="sr-only">Registration status:</span>
+    <BaseIcon icon-name="fa-info-circle" size="xs" color="quaternary" aria-hidden="true" />
+    <BaseText :text="statusLabel" size="xs" color="quaternary" />
+  </div>
+</template>
+
+<script>
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+import { getRegistrationStatusLabel } from '../../../Util/registrationStatus.js';
+
+export default {
+  name: 'RegistrationStatus',
+  components: { BaseIcon, BaseText },
+  props: {
+    status: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    statusLabel() {
+      return getRegistrationStatusLabel(this.status);
+    }
+  }
+};
+</script>

package/src/stories/Molecules/Menus/HoverActions/HoverActions.test.js

@@ -0,0 +1,138 @@
+import { mount, DOMWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import HoverActions from './HoverActions.vue';
+
+const wrappers = [];
+const actions = [
+  { id: 'open', label: 'Open bout' },
+  { id: 'assign-director', label: 'Assign director...', description: 'Dave Smith' }
+];
+const mountMenu = (props = {}) => {
+  const wrapper = mount(HoverActions, {
+    attachTo: document.body,
+    props: { actions, ...props },
+    slots: { default: '<button type="button" data-testid="pairing">Pairing</button>' }
+  });
+  wrappers.push(wrapper);
+  return wrapper;
+};
+const getPanel = () => new DOMWrapper(document.querySelector('[data-testid="bout-actions-menu"]'));
+const hoverMenu = async wrapper => {
+  await wrapper.trigger('mouseenter');
+  vi.advanceTimersByTime(200);
+  await nextTick();
+  await nextTick();
+};
+
+beforeEach(() => vi.useFakeTimers());
+afterEach(() => {
+  wrappers.splice(0).forEach(wrapper => wrapper.unmount());
+  vi.useRealTimers();
+});
+
+describe('HoverActions', () => {
+  it('waits briefly before opening and cancels a passing hover', async () => {
+    const wrapper = mountMenu();
+    await wrapper.trigger('mouseenter');
+    vi.advanceTimersByTime(100);
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+    await wrapper.trigger('mouseleave');
+    vi.advanceTimersByTime(300);
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+    await hoverMenu(wrapper);
+    expect(getPanel().text()).toContain('Assign director...');
+  });
+
+  it('keeps the menu open while crossing from the pairing into it', async () => {
+    const wrapper = mountMenu();
+    await hoverMenu(wrapper);
+    await wrapper.trigger('mouseleave');
+    vi.advanceTimersByTime(70);
+    await getPanel().trigger('mouseenter');
+    vi.advanceTimersByTime(250);
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).not.toBeNull();
+    await getPanel().trigger('mouseleave');
+    vi.advanceTimersByTime(150);
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+  });
+
+  it('supports focus, arrow navigation, and Escape without reopening', async () => {
+    const wrapper = mountMenu();
+    wrapper.get('[data-testid="pairing"]').element.focus();
+    await nextTick();
+    await wrapper.get('[data-testid="pairing"]').trigger('keydown', { key: 'ArrowDown' });
+    await nextTick();
+    expect(document.activeElement.dataset.action).toBe('open');
+    await getPanel().trigger('keydown', { key: 'ArrowDown' });
+    expect(document.activeElement.dataset.action).toBe('assign-director');
+    await getPanel().trigger('keydown', { key: 'Escape' });
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+    expect(document.activeElement).toBe(wrapper.get('[data-testid="pairing"]').element);
+  });
+
+  it('emits only the chosen action and dismisses the menu', async () => {
+    const wrapper = mountMenu();
+    await hoverMenu(wrapper);
+    await getPanel().get('[data-action="assign-director"]').trigger('click');
+    expect(wrapper.emitted('action')).toEqual([['assign-director']]);
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+  });
+
+  it('closes on a direct pairing click, outside click, or viewport scroll', async () => {
+    const wrapper = mountMenu();
+    await hoverMenu(wrapper);
+    await wrapper.get('[data-testid="pairing"]').trigger('click');
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+    expect(wrapper.emitted('action')).toBeUndefined();
+    await hoverMenu(wrapper);
+    document.body.dispatchEvent(new Event('pointerdown', { bubbles: true }));
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+    await hoverMenu(wrapper);
+    window.dispatchEvent(new Event('scroll'));
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+  });
+
+  it('positions the panel inside the viewport and opens above a bottom pairing', async () => {
+    const wrapper = mountMenu();
+    wrapper.element.getBoundingClientRect = () => ({
+      left: window.innerWidth - 10,
+      top: window.innerHeight - 40,
+      bottom: window.innerHeight
+    });
+    await hoverMenu(wrapper);
+    getPanel().element.getBoundingClientRect = () => ({ width: 144, height: 80 });
+    wrapper.vm.positionPanel();
+    await nextTick();
+    expect(Number.parseFloat(getPanel().element.style.left)).toBe(window.innerWidth - 148);
+    expect(Number.parseFloat(getPanel().element.style.top)).toBe(window.innerHeight - 124);
+  });
+
+  it('allows only one open dropdown and cleans up on unmount', async () => {
+    const first = mountMenu();
+    const second = mountMenu();
+    await hoverMenu(first);
+    await hoverMenu(second);
+    expect(first.vm.isOpen).toBe(false);
+    expect(document.querySelectorAll('[data-testid="bout-actions-menu"]')).toHaveLength(1);
+    second.unmount();
+    wrappers.pop();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+  });
+
+  it('removes unavailable actions as props change', async () => {
+    const wrapper = mountMenu();
+    await hoverMenu(wrapper);
+    await wrapper.setProps({ actions: [actions[0]] });
+    expect(getPanel().find('[data-action="assign-director"]').exists()).toBe(false);
+    await wrapper.setProps({ actions: [] });
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+  });
+});