@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Molecules/Buttons/BaseButton/BaseButton.stories.js

@@ -1,117 +1,117 @@
 import BaseButton from './BaseButton.vue';
 
 export default {
-    title: 'Molecules/Buttons/BaseButton',
-    component: BaseButton,
-    tags: ['autodocs'],
-    args: {
-        label: 'Button',
-        size: 'md',
-        iconName: '',
-        iconStyle: 'fa-solid',
-        type: 'primary'
+  title: 'Molecules/Buttons/BaseButton',
+  component: BaseButton,
+  tags: ['autodocs'],
+  args: {
+    label: 'Button',
+    size: 'md',
+    iconName: '',
+    iconStyle: 'fa-solid',
+    type: 'primary'
+  },
+  argTypes: {
+    onClick: {},
+    size: {
+      control: {
+        type: 'select'
+      },
+      options: ['small', 'medium', 'large']
     },
-    argTypes: {
-        onClick: {},
-        size: {
-            control: {
-                type: 'select'
-            },
-            options: ['small', 'medium', 'large']
-        },
-        iconName: {
-            control: {
-                type: 'text'
-            },
-            defaultValue: ''
-        },
-        iconStyle: {
-            control: {
-                type: 'select'
-            },
-            options: ['fa-solid', 'fa-regular', 'fa-solid', 'fa-light', 'fa-thing'],
-            defaultValue: 'fa-solid'
-        },
-        type: {
-            control: {
-                type: 'select'
-            },
-            options: ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'square', 'tabBar'],
-            defaultValue: 'primary'
-        }
+    iconName: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    },
+    iconStyle: {
+      control: {
+        type: 'select'
+      },
+      options: ['fa-solid', 'fa-regular', 'fa-solid', 'fa-light', 'fa-thing'],
+      defaultValue: 'fa-solid'
+    },
+    type: {
+      control: {
+        type: 'select'
+      },
+      options: ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'square', 'tabBar'],
+      defaultValue: 'primary'
     }
+  }
 };
 export const Primary = {
-    args: {
-        type: 'primary',
-        label: 'Button'
-    }
+  args: {
+    type: 'primary',
+    label: 'Button'
+  }
 };
 export const PrimaryButtonWithIcon = {
-    args: {
-        type: 'primary',
-        label: 'Button',
-        iconName: 'fa-check'
-    }
+  args: {
+    type: 'primary',
+    label: 'Button',
+    iconName: 'fa-check'
+  }
 };
 export const Secondary = {
-    args: {
-        type: 'secondary',
-        label: 'Button'
-    }
+  args: {
+    type: 'secondary',
+    label: 'Button'
+  }
 };
 export const HighlightedButtonLarge = {
-    args: {
-        type: 'bright',
-        size: '3xl',
-        label: 'Button'
-    }
+  args: {
+    type: 'bright',
+    size: '3xl',
+    label: 'Button'
+  }
 };
 export const SmallTertiary = {
-    args: {
-        type: 'tertiary',
-        size: 'sm',
-        label: 'Button'
-    }
+  args: {
+    type: 'tertiary',
+    size: 'sm',
+    label: 'Button'
+  }
 };
 
 export const AdminMenuButton = {
-    args: {
-        type: 'admin',
-        size: 'md',
-        label: 'Admin Button',
-        hoverColor: 'highlightPrimary'
-    }
+  args: {
+    type: 'admin',
+    size: 'md',
+    label: 'Admin Button',
+    hoverColor: 'highlightPrimary'
+  }
 };
 
 export const SquareButton = {
-    args: {
-        type: 'square',
-        label: 'Button',
-        hoverColor: 'highlightPrimary'
-    }
+  args: {
+    type: 'square',
+    label: 'Button',
+    hoverColor: 'highlightPrimary'
+  }
 };
 
 export const IconButton = {
-    args: {
-        label: '',
-        type: 'iconOnly',
-        iconName: 'fa-check',
-    }
+  args: {
+    label: '',
+    type: 'iconOnly',
+    iconName: 'fa-check'
+  }
 };
 
 export const IconButtonWithIconOnRight = {
-    args: {
-        label: 'Save',
-        type: 'primary',
-        iconName: 'fa-check',
-        iconLeft: false
-    }
+  args: {
+    label: 'Save',
+    type: 'primary',
+    iconName: 'fa-check',
+    iconLeft: false
+  }
 };
 
 export const TabBarButton = {
-    args: {
-        type: 'tabBar',
-        label: 'Button'
-    }
+  args: {
+    type: 'tabBar',
+    label: 'Button'
+  }
 };

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

@@ -1,147 +1,145 @@
 import BaseButton from './BaseButton.vue';
-import { mount } from "@vue/test-utils";
-import { describe, expect, test, it } from "vitest";
+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 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 }
     });
 
-    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);
+  });
 
-        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('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 type and size', () => {
+    const wrapper = mount(BaseButton, {
+      props: { label: 'Test Button', type: 'primary', size: 'md' }
     });
 
-    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-text"]');
+    expect(baseTextElement.classes()).toContain('text-md');
+    expect(baseTextElement.classes()).toContain('text-primary');
+  });
 
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-dropdownSelect');
+  it('computes correct classes based on primary and selected', () => {
+    const wrapper = mount(BaseButton, {
+      props: { label: 'Test Button', type: 'primary', size: 'md', selected: true }
     });
 
-    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('bg-dropdownSelect');
+  });
 
-        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', () => {
+    const wrapper = mount(BaseButton, {
+      props: { label: 'Test Button', type: 'secondary', size: 'xl' }
     });
 
-    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('text-xl');
+    expect(baseTextElement.classes()).toContain('bg-secondary');
+  });
 
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-dropdownSelect');
+  it('computes correct classes based secondary type and selected', () => {
+    const wrapper = mount(BaseButton, {
+      props: { label: 'Test Button', type: 'secondary', size: 'xl', selected: true }
     });
 
-    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('bg-dropdownSelect');
+  });
 
-        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', () => {
+    const wrapper = mount(BaseButton, {
+      props: { label: 'Test Button', type: 'tertiary', size: 'lg' }
     });
 
-    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('text-lg');
+    expect(baseTextElement.classes()).toContain('bg-tertiary');
+  });
 
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-primary');
+  it('computes correct classes based tertiary type and selected', () => {
+    const wrapper = mount(BaseButton, {
+      props: { label: 'Test Button', type: 'tertiary', size: 'xl', selected: true }
     });
 
-    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('bg-primary');
+  });
 
-        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', () => {
+    const wrapper = mount(BaseButton, {
+      props: { label: 'Test Button', type: 'bright', size: 'xs' }
     });
 
-    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('text-xs');
+    expect(baseTextElement.classes()).toContain('bg-bright');
+  });
 
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('bg-primary');
+  it('computes correct classes based bright type and selected', () => {
+    const wrapper = mount(BaseButton, {
+      props: { label: 'Test Button', type: 'bright', size: 'xl', selected: true }
     });
 
-    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('bg-primary');
+  });
 
-        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', () => {
+    const wrapper = mount(BaseButton, {
+      props: { label: 'Test Button', type: 'admin', size: 'xs', hoverColor: 'admin' }
     });
 
-    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('text-xs');
+    expect(baseTextElement.classes()).toContain('bg-primary');
+  });
 
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        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 }
     });
 
-    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('bg-primary');
+  });
 
-        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', () => {
+    const wrapper = mount(BaseButton, {
+      props: { label: 'Test Button', type: 'adminSecondary', size: 'xs', hoverColor: 'adminSecondary' }
     });
 
-    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-xs');
+    expect(baseTextElement.classes()).toContain('bg-primary');
+  });
 
-        const baseTextElement = wrapper.find('[data-testid="base-button"]');
-        expect(baseTextElement.classes()).toContain('text-xl');
-        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/Buttons/BaseButton/BaseButton.vue

@@ -1,9 +1,37 @@
 <template>
   <button :class="computedClasses" data-testid="base-button" type="button" @click="handleClick">
-    <BaseIcon v-if="iconName && iconLeft" :color="textColor" :icon-name="iconName" :size="size" :style="iconStyle" data-testid="base-icon"/>
-    <BaseText v-if="shouldShowLabel" :color="textColor" :size="size" :text="label" data-testid="base-text" weight="normal" />
-    <BaseIcon v-if="iconName && !iconLeft" :color="textColor" :icon-name="iconName" :size="size" :style="iconStyle" data-testid="base-icon"/>
-    <BaseIcon v-if="isDropDown" :color="textColor" icon-name="fa-caret-down" size="xs" :style="'fa-solid ml-1'" data-testid="dropdown"/>
+    <BaseIcon
+      v-if="iconName && iconLeft"
+      :color="textColor"
+      :icon-name="iconName"
+      :size="size"
+      :style="iconStyle"
+      data-testid="base-icon"
+    />
+    <BaseText
+      v-if="shouldShowLabel"
+      :color="textColor"
+      :size="size"
+      :text="label"
+      data-testid="base-text"
+      weight="normal"
+    />
+    <BaseIcon
+      v-if="iconName && !iconLeft"
+      :color="textColor"
+      :icon-name="iconName"
+      :size="size"
+      :style="iconStyle"
+      data-testid="base-icon"
+    />
+    <BaseIcon
+      v-if="isDropDown"
+      :color="textColor"
+      icon-name="fa-caret-down"
+      size="xs"
+      :style="'fa-solid ml-1'"
+      data-testid="dropdown"
+    />
   </button>
 </template>
 
@@ -11,6 +39,41 @@
 import BaseText from '../../../Atoms/Text/BaseText.vue';
 import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
 
+const buttonClassesBySelection = {
+  true: {
+    primary: 'bg-dropdownSelect shadow-md',
+    secondary: 'bg-secondary',
+    tertiary: 'bg-primary',
+    bright: 'bg-primary',
+    admin: 'bg-primary',
+    adminSecondary: 'bg-primary',
+    square: 'bg-dropdownSelect',
+    tabBar: 'border-b border-b-bright',
+    graySecondary: 'bg-secondary',
+    grayAndBlue: 'bg-secondary hover:bg-quinary',
+    whiteSecondary: 'bg-neutral shadow',
+    liteGraySecondary: 'bg-neutral shadow',
+    playPause: 'bg-alarm hover:bg-quaternaryHighlight'
+  },
+  false: {
+    primary: 'bg-neutral',
+    secondary: 'bg-primary',
+    tertiary: 'bg-tertiary',
+    bright: 'bg-bright',
+    admin: 'bg-primary',
+    adminSecondary: 'bg-primary',
+    square: 'bg-neutral',
+    tabBar: 'border-b border-b-neutral text-bright',
+    graySecondary: 'bg-graySecondary',
+    grayAndBlue: 'bg-gridBoxHeader',
+    whiteSecondary: 'bg-poolBox',
+    liteGraySecondary: 'bg-poolBox',
+    playPause: 'bg-quaternary hover:bg-quaternaryHighlight'
+  }
+};
+
+const getSelectionClasses = (type, selected) => buttonClassesBySelection[String(selected)][type] || '';
+
 export default {
   name: 'BaseButton',
   components: { BaseText, BaseIcon },
@@ -36,12 +99,29 @@ export default {
     size: {
       type: String,
       default: 'sm',
-      validator: value => [' ','', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].includes(value)
+      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', 'tabBar', 'graySecondary', 'liteGraySecondary', 'whiteSecondary', 'grayAndBlue', 'playPause'].includes(value)
+      validator: value =>
+        [
+          'primary',
+          'secondary',
+          'tertiary',
+          'bright',
+          'admin',
+          'adminSecondary',
+          'iconOnly',
+          'editor',
+          'square',
+          'tabBar',
+          'graySecondary',
+          'liteGraySecondary',
+          'whiteSecondary',
+          'grayAndBlue',
+          'playPause'
+        ].includes(value)
     },
     selected: {
       type: Boolean,
@@ -104,24 +184,7 @@ export default {
   computed: {
     computedClasses() {
       const baseClasses = this.typeClasses[this.type] || '';
-
-      const typeClassesMap = {
-        primary: this.selected ? 'bg-dropdownSelect shadow-md' : 'bg-neutral',
-        secondary: this.selected ? 'bg-secondary' : 'bg-primary',
-        tertiary: this.selected ? 'bg-primary' : 'bg-tertiary',
-        bright: this.selected ? 'bg-primary' : 'bg-bright',
-        admin: this.selected ? 'bg-primary' : 'bg-primary',
-        adminSecondary: this.selected ? 'bg-primary' : 'bg-primary',
-        square: this.selected ? 'bg-dropdownSelect' : 'bg-neutral',
-        tabBar: this.selected ? 'border-b border-b-bright' : 'border-b border-b-neutral text-bright',
-        graySecondary: this.selected ? 'bg-secondary' : 'bg-graySecondary',
-        grayAndBlue: this.selected ? 'bg-secondary hover:bg-quinary' : 'bg-gridBoxHeader',
-        whiteSecondary: this.selected ? 'bg-neutral shadow' : 'bg-poolBox',
-        liteGraySecondary: this.selected ? 'bg-neutral shadow' : 'bg-poolBox',
-        playPause: this.selected ? 'bg-alarm hover:bg-quaternaryHighlight' : 'bg-quaternary hover:bg-quaternaryHighlight'
-      };
-
-      const dynamicClass = typeClassesMap[this.type] || '';
+      const dynamicClass = getSelectionClasses(this.type, this.selected);
       return `${baseClasses} ${dynamicClass}`;
     },
     textColor() {