@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Atoms/Text/BaseText.stories.js

@@ -1,77 +1,69 @@
 import BaseText from './BaseText.vue';
 export default {
-    title: 'Atoms/BaseText',
-    component: BaseText,
-    tags: ['autodocs'],
-    argTypes: {
-        text: {
-            control: {
-                type: 'text',
-                defaultValue: 'Default Text'
-            }
-        },
-        size: {
-            control: {
-                type: 'select'
-            },
-            options: ['xs', 'small', 'medium', 'large', 'xl', '2xl', '3xl'],
-            defaultValue: 'medium'
-        },
-        weight: {
-            control: {
-                type: 'select'
-            },
-            options: ['light', 'normal', 'medium', 'semi-bold', 'bold', 'extra-bold'],
-            defaultValue: 'normal'
-        },
-        color: {
-            control: {
-                type: 'select'
-            },
-            options: ['neutral', 'quaternary', 'tertiary', 'secondary', 'primary', 'bright'],
-            defaultValue: 'primary'
-        },
-        hoverColor: {
-            control: {
-                type: 'select'
-            },
-            options: [
-                'primary',
-                'quaternary',
-                'secondary',
-                'tertiary',
-                'neutral',
-                'bright',
-                'none'
-            ],
-            defaultValue: 'none'
-        }
+  title: 'Atoms/BaseText',
+  component: BaseText,
+  tags: ['autodocs'],
+  argTypes: {
+    text: {
+      control: {
+        type: 'text',
+        defaultValue: 'Default Text'
+      }
+    },
+    size: {
+      control: {
+        type: 'select'
+      },
+      options: ['xs', 'small', 'medium', 'large', 'xl', '2xl', '3xl'],
+      defaultValue: 'medium'
+    },
+    weight: {
+      control: {
+        type: 'select'
+      },
+      options: ['light', 'normal', 'medium', 'semi-bold', 'bold', 'extra-bold'],
+      defaultValue: 'normal'
+    },
+    color: {
+      control: {
+        type: 'select'
+      },
+      options: ['neutral', 'quaternary', 'tertiary', 'secondary', 'primary', 'bright'],
+      defaultValue: 'primary'
+    },
+    hoverColor: {
+      control: {
+        type: 'select'
+      },
+      options: ['primary', 'quaternary', 'secondary', 'tertiary', 'neutral', 'bright', 'none'],
+      defaultValue: 'none'
     }
+  }
 };
 
 export const Large = {
-    args: {
-        size: 'large',
-        text: 'Large Text'
-    }
+  args: {
+    size: 'large',
+    text: 'Large Text'
+  }
 };
 
 export const Medium = {
-    args: {
-        size: 'medium',
-        text: 'Medium Text'
-    }
+  args: {
+    size: 'medium',
+    text: 'Medium Text'
+  }
 };
 export const Small = {
-    args: {
-        size: 'small',
-        text: 'Small Text'
-    }
+  args: {
+    size: 'small',
+    text: 'Small Text'
+  }
 };
 
 export const TextWithHover = {
-    args: {
-        ...Large.args,
-        hoverColor: 'bright'
-    }
+  args: {
+    ...Large.args,
+    hoverColor: 'bright'
+  }
 };

package/src/stories/Atoms/Text/BaseText.test.js

@@ -1,172 +1,170 @@
-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';
 import BaseText from './BaseText.vue';
 
 describe('BaseText.vue', () => {
-    it('renders correctly with default props', () => {
-        const wrapper = mount(BaseText, {
-            props: {text: 'Test Text'}
-        });
-        expect(wrapper.text()).toBe('Test Text');
-        expect(wrapper.classes()).toContain('text-sm');
-        expect(wrapper.classes()).toContain('font-normal');
-        expect(wrapper.classes()).toContain('text-primary');
+  it('renders correctly with default props', () => {
+    const wrapper = mount(BaseText, {
+      props: { text: 'Test Text' }
     });
-
-    it('renders text, size, weight, and color based on props', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Styled Text',
-                size: 'xl',
-                weight: 'bold',
-                color: 'secondary'
-            }
-        });
-        expect(wrapper.text()).toBe('Styled Text');
-        expect(wrapper.classes()).toContain('text-xl');
-        expect(wrapper.classes()).toContain('font-bold');
-        expect(wrapper.classes()).toContain('text-secondary');
+    expect(wrapper.text()).toBe('Test Text');
+    expect(wrapper.classes()).toContain('text-sm');
+    expect(wrapper.classes()).toContain('font-normal');
+    expect(wrapper.classes()).toContain('text-primary');
+  });
+
+  it('renders text, size, weight, and color based on props', () => {
+    const wrapper = mount(BaseText, {
+      props: {
+        text: 'Styled Text',
+        size: 'xl',
+        weight: 'bold',
+        color: 'secondary'
+      }
     });
-
-    it('computes classes based on multiple props', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                size: '2xl',
-                weight: 'extra-bold',
-                color: 'bright',
-                hoverColor: 'tertiary'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-2xl');
-        expect(wrapper.classes()).toContain('font-extrabold');
-        expect(wrapper.classes()).toContain('text-bright');
-        expect(wrapper.classes()).toContain('hover:text-tertiary');
+    expect(wrapper.text()).toBe('Styled Text');
+    expect(wrapper.classes()).toContain('text-xl');
+    expect(wrapper.classes()).toContain('font-bold');
+    expect(wrapper.classes()).toContain('text-secondary');
+  });
+
+  it('computes classes based on multiple props', () => {
+    const wrapper = mount(BaseText, {
+      props: {
+        text: 'Complex Styled Text',
+        size: '2xl',
+        weight: 'extra-bold',
+        color: 'bright',
+        hoverColor: 'tertiary'
+      }
     });
-
-    it('computes classes for hover primary', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                size: 'xs',
-                hoverColor: 'primary',
-                weight: 'light',
-                color: 'neutral'
-            }
-        });
-
-        expect(wrapper.classes()).toContain('text-xs');
-        expect(wrapper.classes()).toContain('font-light');
-        expect(wrapper.classes()).toContain('text-neutral');
-        expect(wrapper.classes()).toContain('hover:text-primary');
+    expect(wrapper.classes()).toContain('text-2xl');
+    expect(wrapper.classes()).toContain('font-extrabold');
+    expect(wrapper.classes()).toContain('text-bright');
+    expect(wrapper.classes()).toContain('hover:text-tertiary');
+  });
+
+  it('computes classes for hover primary', () => {
+    const wrapper = mount(BaseText, {
+      props: {
+        text: 'Complex Styled Text',
+        size: 'xs',
+        hoverColor: 'primary',
+        weight: 'light',
+        color: 'neutral'
+      }
     });
 
-    it('computes classes for hover secondary', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                size: 'md',
-                hoverColor: 'secondary',
-                weight: 'medium',
-                color: 'tertiary'
-            }
-        });
-
-        expect(wrapper.classes()).toContain('text-tertiary');
-        expect(wrapper.classes()).toContain('text-md');
-        expect(wrapper.classes()).toContain('font-medium');
-        expect(wrapper.classes()).toContain('hover:text-secondary');
+    expect(wrapper.classes()).toContain('text-xs');
+    expect(wrapper.classes()).toContain('font-light');
+    expect(wrapper.classes()).toContain('text-neutral');
+    expect(wrapper.classes()).toContain('hover:text-primary');
+  });
+
+  it('computes classes for hover secondary', () => {
+    const wrapper = mount(BaseText, {
+      props: {
+        text: 'Complex Styled Text',
+        size: 'md',
+        hoverColor: 'secondary',
+        weight: 'medium',
+        color: 'tertiary'
+      }
     });
 
-    it('computes classes for hover tertiary', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                size: 'lg',
-                hoverColor: 'tertiary',
-                weight: 'light',
-                color: 'tertiary'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-tertiary');
-        expect(wrapper.classes()).toContain('text-lg');
-        expect(wrapper.classes()).toContain('font-light');
-        expect(wrapper.classes()).toContain('hover:text-tertiary');
+    expect(wrapper.classes()).toContain('text-tertiary');
+    expect(wrapper.classes()).toContain('text-md');
+    expect(wrapper.classes()).toContain('font-medium');
+    expect(wrapper.classes()).toContain('hover:text-secondary');
+  });
+
+  it('computes classes for hover tertiary', () => {
+    const wrapper = mount(BaseText, {
+      props: {
+        text: 'Complex Styled Text',
+        size: 'lg',
+        hoverColor: 'tertiary',
+        weight: 'light',
+        color: 'tertiary'
+      }
     });
-
-    it('computes classes for hover quaternary', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                weight: 'semi-bold',
-                size: '3xl',
-                hoverColor: 'quaternary',
-                color: 'quaternary'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-quaternary');
-        expect(wrapper.classes()).toContain('text-3xl');
-        expect(wrapper.classes()).toContain('font-semibold');
-        expect(wrapper.classes()).toContain('hover:text-quaternary');
+    expect(wrapper.classes()).toContain('text-tertiary');
+    expect(wrapper.classes()).toContain('text-lg');
+    expect(wrapper.classes()).toContain('font-light');
+    expect(wrapper.classes()).toContain('hover:text-tertiary');
+  });
+
+  it('computes classes for hover quaternary', () => {
+    const wrapper = mount(BaseText, {
+      props: {
+        text: 'Complex Styled Text',
+        weight: 'semi-bold',
+        size: '3xl',
+        hoverColor: 'quaternary',
+        color: 'quaternary'
+      }
     });
-
-    it('computes classes for hover neutral', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                hoverColor: 'neutral',
-                size: 'xs',
-                color: 'primary'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-primary');
-        expect(wrapper.classes()).toContain('text-xs');
-        expect(wrapper.classes()).toContain('font-normal');
-        expect(wrapper.classes()).toContain('hover:text-neutral');
+    expect(wrapper.classes()).toContain('text-quaternary');
+    expect(wrapper.classes()).toContain('text-3xl');
+    expect(wrapper.classes()).toContain('font-semibold');
+    expect(wrapper.classes()).toContain('hover:text-quaternary');
+  });
+
+  it('computes classes for hover neutral', () => {
+    const wrapper = mount(BaseText, {
+      props: {
+        text: 'Complex Styled Text',
+        hoverColor: 'neutral',
+        size: 'xs',
+        color: 'primary'
+      }
     });
-
-    it('computes classes for hover neutral', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                hoverColor: 'bright',
-                color: 'primaryHighlight'
-            }
-        });
-        expect(wrapper.classes()).toContain('hover:text-bright');
-        expect(wrapper.classes()).toContain('text-primaryHighlight');
+    expect(wrapper.classes()).toContain('text-primary');
+    expect(wrapper.classes()).toContain('text-xs');
+    expect(wrapper.classes()).toContain('font-normal');
+    expect(wrapper.classes()).toContain('hover:text-neutral');
+  });
+
+  it('computes classes for hover neutral', () => {
+    const wrapper = mount(BaseText, {
+      props: {
+        text: 'Complex Styled Text',
+        hoverColor: 'bright',
+        color: 'primaryHighlight'
+      }
     });
-
-    it('computes classes for hover neutral', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                hoverColor: 'none'
-            }
-        });
-        const hasHoverClass = wrapper.classes().some(className => className.startsWith('hover:'));
-        expect(hasHoverClass).toBeFalsy();
+    expect(wrapper.classes()).toContain('hover:text-bright');
+    expect(wrapper.classes()).toContain('text-primaryHighlight');
+  });
+
+  it('computes classes for hover neutral', () => {
+    const wrapper = mount(BaseText, {
+      props: {
+        text: 'Complex Styled Text',
+        hoverColor: 'none'
+      }
     });
-
-    it('applies text-alarmText class when color is alarm', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Alarm Text',
-                color: 'alarm'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-alarmText');
+    const hasHoverClass = wrapper.classes().some(className => className.startsWith('hover:'));
+    expect(hasHoverClass).toBeFalsy();
+  });
+
+  it('applies text-alarmText class when color is alarm', () => {
+    const wrapper = mount(BaseText, {
+      props: {
+        text: 'Alarm Text',
+        color: 'alarm'
+      }
     });
-
-    it('applies text-alarm class when invalid is true', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Invalid Text',
-                invalid: true
-            }
-        });
-        expect(wrapper.classes()).toContain('text-alarm');
+    expect(wrapper.classes()).toContain('text-alarmText');
+  });
+
+  it('applies text-alarm class when invalid is true', () => {
+    const wrapper = mount(BaseText, {
+      props: {
+        text: 'Invalid Text',
+        invalid: true
+      }
     });
-
+    expect(wrapper.classes()).toContain('text-alarm');
+  });
 });
-