@dcrackel/hematournamentui 1.0.22 → 1.0.23

package/src/stories/Molecules/Button/BaseButton.test.js

@@ -1,147 +1,147 @@
-import BaseButton from './BaseButton.vue';
-import { mount } from "@vue/test-utils";
-import { describe, expect, test, it } from "vitest";
-
-describe('BaseButton.vue', () => {
-
-    it('renders the correct label', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', size: 'lg' }
-        });
-        expect(wrapper.text()).toContain('Test Button');
-    });
-
-    it('renders icon when iconName is provided', () => {
-        const iconName = 'some-icon-name';
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', iconName: iconName }
-        });
-
-        const iconElement = wrapper.find('[data-testid="base-icon"]');
-        expect(iconElement.exists()).toBe(true);
-    });
-
-    it('emits click event when clicked', async () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', size: 'sm' }
-        })
-        await wrapper.trigger('click')
-        expect(wrapper.emitted().click).toHaveLength(1)
-    })
-
-    it('computes correct classes based on type and size', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'primary', size: 'md' }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-text"]');
-        expect(baseTextElement.classes()).toContain('text-md');
-        expect(baseTextElement.classes()).toContain('text-primary');
-    });
-
-    it('computes correct classes based on primary and selected', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'primary', size: 'md', selected: true }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-dropdownSelect');
-    });
-
-    it('computes correct classes based secondary type', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'secondary', size: 'xl' }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-xl');
-        expect(baseTextElement.classes()).toContain('bg-secondary');
-    });
-
-    it('computes correct classes based secondary type and selected', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'secondary', size: 'xl', selected:true }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-dropdownSelect');
-    });
-
-    it('computes correct classes based tertiary type', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'tertiary', size: 'lg' }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-lg');
-        expect(baseTextElement.classes()).toContain('bg-tertiary');
-    });
-
-    it('computes correct classes based tertiary type and selected', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'tertiary', size: 'xl', selected:true }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-primary');
-    });
-
-    it('computes correct classes based bright type', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'bright', size: 'xs' }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-xs');
-        expect(baseTextElement.classes()).toContain('bg-bright');
-    });
-
-    it('computes correct classes based bright type and selected', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'bright', size: 'xl', selected:true }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-primary');
-    });
-
-    it('computes correct classes based admin', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'admin', size: 'xs', hoverColor: 'admin'}
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-xs');
-        expect(baseTextElement.classes()).toContain('bg-primary');
-    });
-
-    it('computes correct classes based admin type and selected', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'admin', size: 'xl', selected:true  }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-primary');
-    });
-
-    it('computes correct classes based admin secondary', () => {
-        const wrapper = mount(BaseButton, {
-            props: { label: 'Test Button', type: 'adminSecondary', size: 'xs', hoverColor: 'adminSecondary'  }
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-xs');
-        expect(baseTextElement.classes()).toContain('bg-primary');
-    });
-
-    it('computes correct classes based admin secondary type and selected', () => {
-        const wrapper = mount(BaseButton, {
-            props: {label: 'Test Button', type: 'adminSecondary', size: 'xl', selected:true}
-        });
-
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-xl');
-        expect(baseTextElement.classes()).toContain('bg-primary');
-    });
-
-})
+import BaseButton from './BaseButton.vue';
+import { mount } from "@vue/test-utils";
+import { describe, expect, test, it } from "vitest";
+
+describe('BaseButton.vue', () => {
+
+    it('renders the correct label', () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', size: 'lg' }
+        });
+        expect(wrapper.text()).toContain('Test Button');
+    });
+
+    it('renders icon when iconName is provided', () => {
+        const iconName = 'some-icon-name';
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', iconName: iconName }
+        });
+
+        const iconElement = wrapper.find('[data-testid="base-icon"]');
+        expect(iconElement.exists()).toBe(true);
+    });
+
+    it('emits click event when clicked', async () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', size: 'sm' }
+        })
+        await wrapper.trigger('click')
+        expect(wrapper.emitted().click).toHaveLength(1)
+    })
+
+    it('computes correct classes based on type and size', () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', type: 'primary', size: 'md' }
+        });
+
+        const baseTextElement = wrapper.find('[data-testid="base-text"]');
+        expect(baseTextElement.classes()).toContain('text-md');
+        expect(baseTextElement.classes()).toContain('text-primary');
+    });
+
+    it('computes correct classes based on primary and selected', () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', type: 'primary', size: 'md', selected: true }
+        });
+
+        const baseTextElement = wrapper.find('[data-testid="base-button"]');
+        expect(baseTextElement.classes()).toContain('bg-dropdownSelect');
+    });
+
+    it('computes correct classes based secondary type', () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', type: 'secondary', size: 'xl' }
+        });
+
+        const baseTextElement = wrapper.find('[data-testid="base-button"]');
+        expect(baseTextElement.classes()).toContain('text-xl');
+        expect(baseTextElement.classes()).toContain('bg-secondary');
+    });
+
+    it('computes correct classes based secondary type and selected', () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', type: 'secondary', size: 'xl', selected:true }
+        });
+
+        const baseTextElement = wrapper.find('[data-testid="base-button"]');
+        expect(baseTextElement.classes()).toContain('bg-dropdownSelect');
+    });
+
+    it('computes correct classes based tertiary type', () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', type: 'tertiary', size: 'lg' }
+        });
+
+        const baseTextElement = wrapper.find('[data-testid="base-button"]');
+        expect(baseTextElement.classes()).toContain('text-lg');
+        expect(baseTextElement.classes()).toContain('bg-tertiary');
+    });
+
+    it('computes correct classes based tertiary type and selected', () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', type: 'tertiary', size: 'xl', selected:true }
+        });
+
+        const baseTextElement = wrapper.find('[data-testid="base-button"]');
+        expect(baseTextElement.classes()).toContain('bg-primary');
+    });
+
+    it('computes correct classes based bright type', () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', type: 'bright', size: 'xs' }
+        });
+
+        const baseTextElement = wrapper.find('[data-testid="base-button"]');
+        expect(baseTextElement.classes()).toContain('text-xs');
+        expect(baseTextElement.classes()).toContain('bg-bright');
+    });
+
+    it('computes correct classes based bright type and selected', () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', type: 'bright', size: 'xl', selected:true }
+        });
+
+        const baseTextElement = wrapper.find('[data-testid="base-button"]');
+        expect(baseTextElement.classes()).toContain('bg-primary');
+    });
+
+    it('computes correct classes based admin', () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', type: 'admin', size: 'xs', hoverColor: 'admin'}
+        });
+
+        const baseTextElement = wrapper.find('[data-testid="base-button"]');
+        expect(baseTextElement.classes()).toContain('text-xs');
+        expect(baseTextElement.classes()).toContain('bg-primary');
+    });
+
+    it('computes correct classes based admin type and selected', () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', type: 'admin', size: 'xl', selected:true  }
+        });
+
+        const baseTextElement = wrapper.find('[data-testid="base-button"]');
+        expect(baseTextElement.classes()).toContain('bg-primary');
+    });
+
+    it('computes correct classes based admin secondary', () => {
+        const wrapper = mount(BaseButton, {
+            props: { label: 'Test Button', type: 'adminSecondary', size: 'xs', hoverColor: 'adminSecondary'  }
+        });
+
+        const baseTextElement = wrapper.find('[data-testid="base-button"]');
+        expect(baseTextElement.classes()).toContain('text-xs');
+        expect(baseTextElement.classes()).toContain('bg-primary');
+    });
+
+    it('computes correct classes based admin secondary type and selected', () => {
+        const wrapper = mount(BaseButton, {
+            props: {label: 'Test Button', type: 'adminSecondary', size: 'xl', selected:true}
+        });
+
+        const baseTextElement = wrapper.find('[data-testid="base-button"]');
+        expect(baseTextElement.classes()).toContain('text-xl');
+        expect(baseTextElement.classes()).toContain('bg-primary');
+    });
+
+})

package/src/stories/Molecules/Button/BaseButton.vue

@@ -1,125 +1,116 @@
-<template>
-  <button data-testid="base-button" :class="classes" type="button" @click="onClick">
-    <BaseIcon v-if="iconName" data-testid="base-icon" :icon-name="iconName" :style="iconStyle" :color="textColor" :size="size" />
-    <BaseText data-testid="base-text" :color="textColor" :size="size" :text="label" weight="normal" />
-  </button>
-</template>
-
-<script>
-import { computed } from 'vue';
-import BaseText from '../../Atoms/Text/BaseText.vue';
-import BaseIcon from '../../Atoms/Icon/BaseIcon.vue';
-
-export default {
-  name: 'base-button',
-  components: { BaseText, BaseIcon },
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    iconName: {
-      type: String,
-      default: ''
-    },
-    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)
-    },
-    type: {
-      type: String,
-      default: 'primary',
-      validator: value => ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'adminSecondary','continue', 'iconOnly', 'editor'].includes(value)
-    },
-    selected: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click'],
-
-  setup(props, { emit }) {
-    const typeClasses = {
-      primary: 'px-2.5 mx-1 py-0.5 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary ' +
-          (props.selected ? 'bg-dropdownSelect' : 'bg-neutral'),
-
-      secondary: 'px-2.5 mx-1 py-0.5 items-center gap-2.5 rounded-md text-center shadow justify-center hover:bg-primary text-neutral ' +
-          (props.selected ? 'bg-dropdownSelect' : 'bg-secondary'),
-
-      tertiary: 'px-2.5 mx-1 py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary ' +
-          (props.selected ? 'bg-primary' : 'bg-tertiary'),
-
-      bright: 'px-2.5 mx-1 py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral ' +
-          (props.selected ? 'bg-primary' : 'bg-bright'),
-
-      admin: 'px-2.5 mx-1 py-2 items-center rounded-md gap-2.5 text-center hover:bg-primary my-1 text-neutral hover:bg-primaryHighlight ' +
-          (props.selected ? 'bg-primary' : 'bg-primary'),
-
-      adminSecondary: 'px-2.5 mx-1 py-0.5 items-center gap-2.5 text-center my-1 pb-0.5 border-b border-secondary hover:border-b hover:border-neutral w-11/12 text-neutral ' +
-          (props.selected ? 'bg-primary' : 'bg-primary'),
-
-      continue: 'px-2.5 mx-1 items-center gap-2.5 text-center my-1 p-3 border-b border-secondary hover:border-b hover:border-neutral w-full rounded-lg flex flex-row justify-center ' +
-          (props.selected ? 'bg-secondary' : 'bg-primary'),
-
-      iconOnly: 'py-0.5 items-center rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary',
-
-      editor: 'px-1 items-center rounded-md text-center justify-center hover:bg-tertiary'
-    };
-
-    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',
-    };
-
-    return {
-      textColor: computed(() => {
-        const colorMap = {
-          primary: 'primary',
-          secondary: 'secondary',
-          tertiary: 'tertiary',
-          bright: 'bright',
-          admin: 'neutral',
-          adminSecondary: 'neutral',
-          continue: 'neutral',
-          editor: props.selected ? 'bright' : 'quaternary'
-        };
-        return colorMap[props.type];
-      }),
-      classes: computed(() => {
-        let baseClasses = 'inline-flex';
-
-        let typeClass = typeClasses[props.type];
-
-        if (props.selected) {
-          switch (props.type) {
-            case 'primary':
-              typeClass = typeClass.replace('bg-neutral', 'bg-dropdownSelect');
-              break;
-            case 'secondary':
-              typeClass = typeClass.replace('bg-secondary', 'bg-dropdownSelect');
-              break;
-          }
-        }
-
-        let sizeClass = sizeClasses[props.size];
-        return `${baseClasses} ${typeClass} ${sizeClass}`;
-      }),
-      onClick() {
-        emit('click');
-      }
-    };
-  }
-};
-</script>
+<template>
+  <button :class="classes" data-testid="base-button" type="button" @click="onClick">
+    <BaseIcon v-if="iconName" :color="textColor" :icon-name="iconName" :size="size" :style="iconStyle"
+              data-testid="base-icon"/>
+    <BaseText :color="textColor" :size="size" :text="label" data-testid="base-text" weight="normal"/>
+  </button>
+</template>
+
+<script>
+import {computed} from 'vue';
+import BaseText from '../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../Atoms/Icon/BaseIcon.vue';
+
+export default {
+  name: 'base-button',
+  components: {BaseText, BaseIcon},
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    iconName: {
+      type: String,
+      default: ''
+    },
+    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)
+    },
+    type: {
+      type: String,
+      default: 'primary',
+      validator: value => ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'adminSecondary', 'iconOnly', 'editor', 'square'].includes(value)
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click'],
+
+  setup(props, {emit}) {
+    const typeClasses = {
+      primary: 'p-2 items-center gap-2.5 text-center rounded-md shadow border border-dropdownSelect justify-center hover:bg-tertiary ' +
+          (props.selected ? 'bg-dropdownSelect' : 'bg-neutral'),
+
+      secondary: 'px-2.5 items-center gap-2.5 text-center my-1 p-3 border-b border-secondary hover:border-b hover:border-neutral w-full rounded-lg flex flex-row justify-center ' +
+          (props.selected ? 'bg-secondary' : 'bg-primary'),
+
+      tertiary: 'px-2.5 py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary ' +
+          (props.selected ? 'bg-primary' : 'bg-tertiary'),
+
+      bright: 'px-2.5 py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral ' +
+          (props.selected ? 'bg-primary' : 'bg-bright'),
+
+      admin: 'px-2.5 py-2 items-center rounded-md gap-2.5 text-center my-1 text-neutral hover:bg-primaryHighlight ' +
+          (props.selected ? 'bg-primary' : 'bg-primary'),
+
+      adminSecondary: 'px-2.5 py-0.5 items-center gap-2.5 text-center my-1 pb-0.5 border-b border-secondary hover:border-b hover:border-neutral w-11/12 text-neutral ' +
+          (props.selected ? 'bg-primary' : 'bg-primary'),
+
+      iconOnly: 'px-0.5 items-center rounded-full text-center text-tertiary shadow border border-dropdownSelect justify-center bg-primaryHighlight',
+
+      editor: 'px-1 items-center rounded-md text-center justify-center hover:bg-tertiary',
+
+      square: 'p-8 my-3 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary ' +
+          (props.selected ? 'bg-dropdownSelect' : 'bg-neutral'),
+    };
+
+    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',
+    };
+
+    return {
+      textColor: computed(() => {
+        const colorMap = {
+          primary: 'primary',
+          secondary: 'neutral',
+          tertiary: 'tertiary',
+          bright: 'bright',
+          admin: 'neutral',
+          adminSecondary: 'neutral',
+          iconOnly: 'neutral',
+          editor: props.selected ? 'bright' : 'quaternary',
+          square: 'primary'
+        };
+        return colorMap[props.type];
+      }),
+      classes: computed(() => {
+        let baseClasses = 'inline-flex';
+
+        let typeClass = typeClasses[props.type];
+
+        let sizeClass = sizeClasses[props.size];
+        return `${baseClasses} ${typeClass} ${sizeClass}`;
+      }),
+      onClick() {
+        emit('click');
+      }
+    };
+  }
+};
+</script>

package/src/stories/Molecules/Cards/Detail/TournamentCardDetail.stories.js

@@ -1,33 +1,33 @@
-import TournamentCardDetail from './TournamentCardDetail.vue';
-
-export default {
-    title: 'Molecules/Cards/TournamentCardDetail',
-    component: TournamentCardDetail,
-    tags: ['autodocs'],
-    argTypes: {
-        tournament: {
-            control: {
-                type: 'object'
-            },
-            defaultValue: {
-                name: 'Tournament Name',
-                description: 'Tournament Description',
-                date: '07 October, 2023',
-                closes: 'Registration closes 06 October, 2023',
-                location: 'Tournament Location - City, State'
-            }
-        }
-    }
-};
-
-export const Default = {
-    args: {
-        tournament: {
-            name: 'Tournament Name',
-            description: 'Tournament Description',
-            date: '07 October, 2023',
-            closes: 'Registration closes 06 October, 2023',
-            location: 'Tournament Location - City, State'
-        }
-    }
-};
+import TournamentCardDetail from './TournamentCardDetail.vue';
+
+export default {
+    title: 'Molecules/Cards/TournamentCardDetail',
+    component: TournamentCardDetail,
+    tags: ['autodocs'],
+    argTypes: {
+        tournament: {
+            control: {
+                type: 'object'
+            },
+            defaultValue: {
+                name: 'Tournament Name',
+                description: 'Tournament Description',
+                date: '07 October, 2023',
+                closes: 'Registration closes 06 October, 2023',
+                location: 'Tournament Location - City, State'
+            }
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        tournament: {
+            name: 'Tournament Name',
+            description: 'Tournament Description',
+            date: '07 October, 2023',
+            closes: 'Registration closes 06 October, 2023',
+            location: 'Tournament Location - City, State'
+        }
+    }
+};