@dcrackel/hematournamentui 1.0.22 → 1.0.23

package/src/stories/Atoms/Tag/BaseTag.vue

@@ -1,57 +1,57 @@
-<template>
-  <div :class="classes">{{ label }}</div>
-</template>
-
-<script>
-import { computed, reactive } from 'vue';
-
-export default {
-  name: 'base-tag',
-
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    backgroundColor: {
-      type: String,
-      validator: function (value) {
-        return ['primary', 'secondary', 'tertiary', 'neutral', 'bright'].indexOf(value) !== -1;
-      }
-    }
-  },
-
-  setup(props) {
-    props = reactive(props);
-
-    return {
-      classes: computed(() => {
-        let baseClasses = 'cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral';
-
-        switch (props.backgroundColor) {
-          case 'primary':
-            baseClasses += ' bg-primary';
-            break;
-          case 'secondary':
-            baseClasses += ' bg-secondary';
-            break;
-          case 'tertiary':
-            baseClasses += ' bg-tertiary';
-            break;
-          case 'neutral':
-            baseClasses += ' bg-neutral';
-            break;
-          case 'bright':
-            baseClasses += ' bg-bright';
-            break;
-          default:
-            baseClasses += ' bg-primary';
-            break;
-        }
-
-        return baseClasses;
-      })
-    };
-  }
-};
-</script>
+<template>
+  <div :class="classes">{{ label }}</div>
+</template>
+
+<script>
+import { computed, reactive } from 'vue';
+
+export default {
+  name: 'base-tag',
+
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    backgroundColor: {
+      type: String,
+      validator: function (value) {
+        return ['primary', 'secondary', 'tertiary', 'neutral', 'bright'].indexOf(value) !== -1;
+      }
+    }
+  },
+
+  setup(props) {
+    props = reactive(props);
+
+    return {
+      classes: computed(() => {
+        let baseClasses = 'cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral';
+
+        switch (props.backgroundColor) {
+          case 'primary':
+            baseClasses += ' bg-primary';
+            break;
+          case 'secondary':
+            baseClasses += ' bg-secondary';
+            break;
+          case 'tertiary':
+            baseClasses += ' bg-tertiary';
+            break;
+          case 'neutral':
+            baseClasses += ' bg-neutral';
+            break;
+          case 'bright':
+            baseClasses += ' bg-bright';
+            break;
+          default:
+            baseClasses += ' bg-primary';
+            break;
+        }
+
+        return baseClasses;
+      })
+    };
+  }
+};
+</script>

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

@@ -1,77 +1,77 @@
-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'
-        }
-    }
-};
-
-export const Large = {
-    args: {
-        size: 'large',
-        text: 'Large Text'
-    }
-};
-
-export const Medium = {
-    args: {
-        size: 'medium',
-        text: 'Medium Text'
-    }
-};
-export const Small = {
-    args: {
-        size: 'small',
-        text: 'Small Text'
-    }
-};
-
-export const TextWithHover = {
-    args: {
-        ...Large.args,
-        hoverColor: 'bright'
-    }
-};
+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'
+        }
+    }
+};
+
+export const Large = {
+    args: {
+        size: 'large',
+        text: 'Large Text'
+    }
+};
+
+export const Medium = {
+    args: {
+        size: 'medium',
+        text: 'Medium Text'
+    }
+};
+export const Small = {
+    args: {
+        size: 'small',
+        text: 'Small Text'
+    }
+};
+
+export const TextWithHover = {
+    args: {
+        ...Large.args,
+        hoverColor: 'bright'
+    }
+};

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

@@ -1,172 +1,172 @@
-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 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');
-    });
-
-    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');
-    });
-
-    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');
-    });
-
-    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');
-    });
-
-    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');
-    });
-
-    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');
-    });
-
-    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');
-    });
-
-    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');
-    });
-
-    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();
-    });
-
-    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');
-    });
-
-    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');
-    });
-
-});
-
+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 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');
+    });
+
+    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');
+    });
+
+    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');
+    });
+
+    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');
+    });
+
+    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');
+    });
+
+    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');
+    });
+
+    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');
+    });
+
+    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');
+    });
+
+    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();
+    });
+
+    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');
+    });
+
+    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');
+    });
+
+});
+