@dcrackel/hematournamentui 1.0.21 → 1.0.23

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

@@ -1,170 +1,170 @@
-<template>
-  <div :class="classes">{{ text }}</div>
-</template>
-
-<script>
-import { computed } from 'vue';
-
-export default {
-  name: 'BaseText',
-
-  props: {
-    text: {
-      type: String,
-      required: true,
-      default: ''
-    },
-    weight: {
-      type: String,
-      default: 'normal',
-      validator: function (value) {
-        return ['light', 'normal', 'medium', 'semi-bold', 'bold', 'extra-bold'].indexOf(value) !== -1;
-      }
-    },
-    size: {
-      type: String,
-      default: 'sm',
-      validator: function (value) {
-        return ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].indexOf(value) !== -1;
-      }
-    },
-    color: {
-      type: String,
-      default: 'primary',
-      validator: function (value) {
-        return ['neutral', 'quaternary', 'tertiary', 'secondary', 'primary', 'bright', 'primaryHighlight', 'alarm'].indexOf(value) !== -1;
-      }
-    },
-    invalid: {
-      type: Boolean,
-      default: false
-    },
-    hoverColor: {
-      type: String,
-      default: 'none',
-      validator: function (value) {
-        return (
-            [
-              'primary',
-              'secondary',
-              'tertiary',
-              'quaternary',
-              'neutral',
-              'bright',
-              'none'
-            ].indexOf(value) !== -1
-        );
-      }
-    }
-  },
-  setup(props) {
-    return {
-      classes: computed(() => {
-        let baseClasses = '';
-
-        switch (props.color) {
-          case 'neutral':
-            baseClasses += ' text-neutral';
-            break;
-          case `tertiary`:
-            baseClasses += ' text-tertiary';
-            break;
-          case 'secondary':
-            baseClasses += ' text-secondary';
-            break;
-          case 'quaternary':
-            baseClasses += ' text-quaternary';
-            break;
-          case 'primary':
-            baseClasses += ' text-primary';
-            break;
-          case 'primaryHighlight':
-            baseClasses += ' text-primaryHighlight';
-            break;
-          case 'bright':
-            baseClasses += ' text-bright';
-            break;
-          case 'alarm':
-            baseClasses += ' text-alarmText';
-            break;
-        }
-
-        if (props.invalid) {
-          baseClasses = ' text-alarm';
-        }
-
-        switch (props.hoverColor) {
-          case 'neutral':
-            baseClasses += ' hover:text-neutral';
-            break;
-          case `tertiary`:
-            baseClasses += ' hover:text-tertiary';
-            break;
-          case 'secondary':
-            baseClasses += ' hover:text-secondary';
-            break;
-          case 'quaternary':
-            baseClasses += ' hover:text-quaternary';
-            break;
-          case 'primary':
-            baseClasses += ' hover:text-primary';
-            break;
-          case 'bright':
-            baseClasses += ' hover:text-bright';
-            break;
-          case 'none':
-            baseClasses += '';
-            break;
-        }
-
-        switch (props.weight) {
-          case 'light':
-            baseClasses += ' font-light';
-            break;
-          case 'normal':
-            baseClasses += ' font-normal';
-            break;
-          case 'medium':
-            baseClasses += ' font-medium';
-            break;
-          case 'semi-bold':
-            baseClasses += ' font-semibold';
-            break;
-          case 'bold':
-            baseClasses += ' font-bold';
-            break;
-          case 'extra-bold':
-            baseClasses += ' font-extrabold';
-            break;
-        }
-
-        switch (props.size) {
-          case 'xs':
-            baseClasses += ' text-xs';
-            break;
-          case 'sm':
-            baseClasses += ' text-sm';
-            break;
-          case 'md':
-            baseClasses += ' text-md';
-            break;
-          case 'lg':
-            baseClasses += ' text-lg';
-            break;
-          case 'xl':
-            baseClasses += ' text-xl';
-            break;
-          case '2xl':
-            baseClasses += ' text-2xl';
-            break;
-          case '3xl':
-            baseClasses += ' text-3xl';
-            break;
-        }
-        return baseClasses;
-      })
-    };
-  }
-};
-
-</script>
+<template>
+  <div :class="classes">{{ text }}</div>
+</template>
+
+<script>
+import { computed } from 'vue';
+
+export default {
+  name: 'BaseText',
+
+  props: {
+    text: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    weight: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['light', 'normal', 'medium', 'semi-bold', 'bold', 'extra-bold'].indexOf(value) !== -1;
+      }
+    },
+    size: {
+      type: String,
+      default: 'sm',
+      validator: function (value) {
+        return ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].indexOf(value) !== -1;
+      }
+    },
+    color: {
+      type: String,
+      default: 'primary',
+      validator: function (value) {
+        return ['neutral', 'quaternary', 'tertiary', 'secondary', 'primary', 'bright', 'primaryHighlight', 'alarm'].indexOf(value) !== -1;
+      }
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    hoverColor: {
+      type: String,
+      default: 'none',
+      validator: function (value) {
+        return (
+            [
+              'primary',
+              'secondary',
+              'tertiary',
+              'quaternary',
+              'neutral',
+              'bright',
+              'none'
+            ].indexOf(value) !== -1
+        );
+      }
+    }
+  },
+  setup(props) {
+    return {
+      classes: computed(() => {
+        let baseClasses = '';
+
+        switch (props.color) {
+          case 'neutral':
+            baseClasses += ' text-neutral';
+            break;
+          case `tertiary`:
+            baseClasses += ' text-tertiary';
+            break;
+          case 'secondary':
+            baseClasses += ' text-secondary';
+            break;
+          case 'quaternary':
+            baseClasses += ' text-quaternary';
+            break;
+          case 'primary':
+            baseClasses += ' text-primary';
+            break;
+          case 'primaryHighlight':
+            baseClasses += ' text-primaryHighlight';
+            break;
+          case 'bright':
+            baseClasses += ' text-bright';
+            break;
+          case 'alarm':
+            baseClasses += ' text-alarmText';
+            break;
+        }
+
+        if (props.invalid) {
+          baseClasses = ' text-alarm';
+        }
+
+        switch (props.hoverColor) {
+          case 'neutral':
+            baseClasses += ' hover:text-neutral';
+            break;
+          case `tertiary`:
+            baseClasses += ' hover:text-tertiary';
+            break;
+          case 'secondary':
+            baseClasses += ' hover:text-secondary';
+            break;
+          case 'quaternary':
+            baseClasses += ' hover:text-quaternary';
+            break;
+          case 'primary':
+            baseClasses += ' hover:text-primary';
+            break;
+          case 'bright':
+            baseClasses += ' hover:text-bright';
+            break;
+          case 'none':
+            baseClasses += '';
+            break;
+        }
+
+        switch (props.weight) {
+          case 'light':
+            baseClasses += ' font-light';
+            break;
+          case 'normal':
+            baseClasses += ' font-normal';
+            break;
+          case 'medium':
+            baseClasses += ' font-medium';
+            break;
+          case 'semi-bold':
+            baseClasses += ' font-semibold';
+            break;
+          case 'bold':
+            baseClasses += ' font-bold';
+            break;
+          case 'extra-bold':
+            baseClasses += ' font-extrabold';
+            break;
+        }
+
+        switch (props.size) {
+          case 'xs':
+            baseClasses += ' text-xs';
+            break;
+          case 'sm':
+            baseClasses += ' text-sm';
+            break;
+          case 'md':
+            baseClasses += ' text-md';
+            break;
+          case 'lg':
+            baseClasses += ' text-lg';
+            break;
+          case 'xl':
+            baseClasses += ' text-xl';
+            break;
+          case '2xl':
+            baseClasses += ' text-2xl';
+            break;
+          case '3xl':
+            baseClasses += ' text-3xl';
+            break;
+        }
+        return baseClasses;
+      })
+    };
+  }
+};
+
+</script>