@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -3,60 +3,60 @@
 </template>
 
 <script>
-import { computed } from 'vue';
-
-const colorClasses = {
-  neutral: ' text-neutral',
-  tertiary: ' text-tertiary',
-  secondary: ' text-secondary',
-  quaternary: ' text-quaternary',
-  quinary: ' text-quinary',
-  primary: ' text-primary',
-  primaryHighlight: ' text-primaryHighlight',
-  dropdownSelect: ' text-dropdownSelect',
-  bright: ' text-bright',
-  alarm: ' text-lossRed',
-  alarmText: ' text-alarmText',
-  none: ''
-};
-
-const hoverColorClasses = {
-  neutral: ' hover:text-neutral',
-  tertiary: ' hover:text-tertiary',
-  secondary: ' hover:text-secondary',
-  quaternary: ' hover:text-quaternary',
-  primary: ' hover:text-primary',
-  bright: ' hover:text-bright',
-  none: ''
-};
-
-const weightClasses = {
-  light: ' font-light',
-  normal: ' font-normal',
-  medium: ' font-medium',
-  'semi-bold': ' font-semibold',
-  bold: ' font-bold',
-  'extra-bold': ' font-extrabold'
-};
-
-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',
-  '5xl': ' text-5xl',
-  '6xl': ' text-6xl',
-  '7xl': ' text-7xl',
-  '8xl': ' text-8xl',
-  '9xl': ' text-[12rem]',
-  '10xl': ' text-[20rem]'
-};
-
-export default {
+import { computed } from 'vue';
+
+const colorClasses = {
+  neutral: ' text-neutral',
+  tertiary: ' text-tertiary',
+  secondary: ' text-secondary',
+  quaternary: ' text-quaternary',
+  quinary: ' text-quinary',
+  primary: ' text-primary',
+  primaryHighlight: ' text-primaryHighlight',
+  dropdownSelect: ' text-dropdownSelect',
+  bright: ' text-bright',
+  alarm: ' text-lossRed',
+  alarmText: ' text-alarmText',
+  none: ''
+};
+
+const hoverColorClasses = {
+  neutral: ' hover:text-neutral',
+  tertiary: ' hover:text-tertiary',
+  secondary: ' hover:text-secondary',
+  quaternary: ' hover:text-quaternary',
+  primary: ' hover:text-primary',
+  bright: ' hover:text-bright',
+  none: ''
+};
+
+const weightClasses = {
+  light: ' font-light',
+  normal: ' font-normal',
+  medium: ' font-medium',
+  'semi-bold': ' font-semibold',
+  bold: ' font-bold',
+  'extra-bold': ' font-extrabold'
+};
+
+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',
+  '5xl': ' text-5xl',
+  '6xl': ' text-6xl',
+  '7xl': ' text-7xl',
+  '8xl': ' text-8xl',
+  '9xl': ' text-[12rem]',
+  '10xl': ' text-[20rem]'
+};
+
+export default {
   name: 'BaseText',
   props: {
     text: {
@@ -75,14 +75,50 @@ export default {
       type: String,
       default: 'sm',
       validator: function (value) {
-        return ['',' ','xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl', '10xl'].indexOf(value) !== -1;
+        return (
+          [
+            '',
+            ' ',
+            'xs',
+            'sm',
+            'md',
+            'lg',
+            'xl',
+            '2xl',
+            '3xl',
+            '4xl',
+            '5xl',
+            '6xl',
+            '7xl',
+            '8xl',
+            '9xl',
+            '10xl'
+          ].indexOf(value) !== -1
+        );
       }
     },
     color: {
       type: String,
       default: 'primary',
       validator: function (value) {
-        return ['', ' ', 'neutral', 'quinary', 'quaternary', 'tertiary', 'secondary', 'primary', 'bright', 'primaryHighlight', 'dropdownSelect', 'alarm', 'none', 'alarmText'].indexOf(value) !== -1;
+        return (
+          [
+            '',
+            ' ',
+            'neutral',
+            'quinary',
+            'quaternary',
+            'tertiary',
+            'secondary',
+            'primary',
+            'bright',
+            'primaryHighlight',
+            'dropdownSelect',
+            'alarm',
+            'none',
+            'alarmText'
+          ].indexOf(value) !== -1
+        );
       }
     },
     invalid: {
@@ -93,33 +129,19 @@ export default {
       type: String,
       default: 'none',
       validator: function (value) {
-        return (
-            [
-              'primary',
-              'secondary',
-              'tertiary',
-              'quaternary',
-              'neutral',
-              'bright',
-              'none'
-            ].indexOf(value) !== -1
-        );
+        return ['primary', 'secondary', 'tertiary', 'quaternary', 'neutral', 'bright', 'none'].indexOf(value) !== -1;
       }
     }
   },
-  setup(props) {
-    return {
-      classes: computed(() => {
-        const colorClass = props.invalid ? ' text-alarm' : colorClasses[props.color] || '';
-        return [
-          colorClass,
-          hoverColorClasses[props.hoverColor],
-          weightClasses[props.weight],
-          sizeClasses[props.size]
-        ].filter(Boolean).join('');
-      })
-    };
-  }
+  setup(props) {
+    return {
+      classes: computed(() => {
+        const colorClass = props.invalid ? ' text-alarm' : colorClasses[props.color] || '';
+        return [colorClass, hoverColorClasses[props.hoverColor], weightClasses[props.weight], sizeClasses[props.size]]
+          .filter(Boolean)
+          .join('');
+      })
+    };
+  }
 };
-
 </script>

package/src/stories/Configure.mdx

@@ -1,6 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-
-
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Configure your project" />
 
@@ -9,6 +7,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
     # Configure your project
 
     Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -41,6 +40,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
         >Learn more</a>
       </div>
     </div>
+
   </div>
 </div>
 <div className="sb-container">
@@ -48,6 +48,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
     # Do more with Storybook
 
     Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
   </div>
 
   <div className="sb-section">
@@ -159,6 +160,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
           target="_blank"
         >Discover tutorials</a>
     </div>
+
 </div>
 
 <style>

package/src/stories/Molecules/Boxes/BoutBoxes/HandshotCounterBox/HandshotCounterBox.stories.js

@@ -1,31 +1,31 @@
 import HandshotCounterBox from './HandshotCounterBox.vue';
 
 export default {
-    title: 'Molecules/Boxes/BoutBoxes/HandshotCounterBox',
-    component: HandshotCounterBox,
-    tags: ['autodocs'],
-    args: {
-        modelValue: 0,
-        fencer1: true,
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        }
-    },
-    argTypes: {
-        modelValue: { control: { type: 'number' } },
-        fencer1: { control: 'boolean' },
-        hostingClubColors: { control: 'object' },
-    },
+  title: 'Molecules/Boxes/BoutBoxes/HandshotCounterBox',
+  component: HandshotCounterBox,
+  tags: ['autodocs'],
+  args: {
+    modelValue: 0,
+    fencer1: true,
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
+    }
+  },
+  argTypes: {
+    modelValue: { control: { type: 'number' } },
+    fencer1: { control: 'boolean' },
+    hostingClubColors: { control: 'object' }
+  }
 };
 
 export const Default = {
-    args: {
-        modelValue: 0,
-        fencer1: true,
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        }
+  args: {
+    modelValue: 0,
+    fencer1: true,
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
     }
-};
+  }
+};

package/src/stories/Molecules/Boxes/BoutBoxes/HandshotCounterBox/HandshotCounterBox.vue

@@ -1,35 +1,55 @@
 <template>
   <div class="w-full flex flex-row justify-around text-center px-4 pb-4">
     <div class="pt-1 w-1/4" @click="decrement">
-      <BaseIcon icon-name="fa-square-minus" size="5xl" color="quinary" hover="quaternary"  class="hover:text-quaternaryHighlight" :disabled="localHandShotValue <= 0" />
+      <BaseIcon
+        icon-name="fa-square-minus"
+        size="5xl"
+        color="quinary"
+        hover="quaternary"
+        class="hover:text-quaternaryHighlight"
+        :disabled="localHandShotValue <= 0"
+      />
     </div>
     <div class="flex flex-col w-1/2 justify-center">
       <div class="flex justify-center w-full">
         <BaseIcon icon-name="fa-hand" size="4xl" color="quinary" class="opacity-50" />
-        <div class="rounded-full w-5 h-5 -ml-4 mt-6 z-10" :class="['bg-' +computedColor]">
-          <BaseText :text="localHandShotValue" size="sm" color="neutral" weight="bold" :class="computedColor" class="" />
+        <div class="rounded-full w-5 h-5 -ml-4 mt-6 z-10" :class="['bg-' + computedColor]">
+          <BaseText
+            :text="localHandShotValue"
+            size="sm"
+            color="neutral"
+            weight="bold"
+            :class="computedColor"
+            class=""
+          />
         </div>
       </div>
       <BaseText text="Hand Shot Counter" size="xs" color="quinary" weight="normal" />
     </div>
     <div class="pt-1 w-1/4" @click="increment">
-      <BaseIcon icon-name="fa-square-plus" size="5xl" color="quinary" hover="quaternary"  class="hover:text-quaternaryHighlight" />
+      <BaseIcon
+        icon-name="fa-square-plus"
+        size="5xl"
+        color="quinary"
+        hover="quaternary"
+        class="hover:text-quaternaryHighlight"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import BaseIcon from "../../../../Atoms/Icon/BaseIcon.vue";
-import BaseText from "../../../../Atoms/Text/BaseText.vue";
+import BaseIcon from '../../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'HandshotCounterBox',
-  components: {BaseText, BaseIcon},
+  components: { BaseText, BaseIcon },
   emits: ['update:HandShotValue'],
   props: {
     handShotValue: {
       type: Number,
-      default: 0,
+      default: 0
     },
     fencer1: {
       type: Boolean,
@@ -38,12 +58,12 @@ export default {
     hostingClubColors: {
       type: Object,
       required: true
-    },
+    }
   },
-  data(){
+  data() {
     return {
       localHandShotValue: this.handShotValue
-    }
+    };
   },
   computed: {
     computedColor() {
@@ -60,9 +80,7 @@ export default {
         this.localHandShotValue--;
         this.$emit('update:HandShotValue', this.localHandShotValue);
       }
-    },
-  },
+    }
+  }
 };
 </script>
-
-

package/src/stories/Molecules/Boxes/BoutBoxes/PassesBox/PassesBox.stories.js

@@ -1,60 +1,58 @@
 import PassesBox from './PassesBox.vue';
-import eventRules from "../../../../../mocks/eventRules.js";
-import getPoolsWithBouts from "../../../../../mocks/getPoolsWithBouts.js";
+import eventRules from '../../../../../mocks/eventRules.js';
+import getPoolsWithBouts from '../../../../../mocks/getPoolsWithBouts.js';
 
 export default {
-    title: 'Molecules/Boxes/BoutBoxes/PassesBox',
-    component: PassesBox,
-    tags: ['autodocs'],
-    args: {
-        maxPasses: 5,
-        bout: {
-            CurrentPass: 2
-        },
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        showSubmit: false,
-        screenHeight: 1080,
+  title: 'Molecules/Boxes/BoutBoxes/PassesBox',
+  component: PassesBox,
+  tags: ['autodocs'],
+  args: {
+    maxPasses: 5,
+    bout: {
+      CurrentPass: 2
     },
-    argTypes: {
-        maxPasses: { control: 'number' },
-        bout: { control: 'object' },
-        hostingClubColors: { control: 'object'},
-        showSubmit: { control: 'boolean' },
-        screenHeight: { control: 'number' },
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
     },
+    showSubmit: false,
+    screenHeight: 1080
+  },
+  argTypes: {
+    maxPasses: { control: 'number' },
+    bout: { control: 'object' },
+    hostingClubColors: { control: 'object' },
+    showSubmit: { control: 'boolean' },
+    screenHeight: { control: 'number' }
+  }
 };
 
-
-
 export const Default = {
-    args: {
-        maxPasses: 5,
-        bout: {
-            CurrentPass: 2
-        },
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        showSubmit: false,
-        screenHeight: 1080,
-    }
+  args: {
+    maxPasses: 5,
+    bout: {
+      CurrentPass: 2
+    },
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
+    },
+    showSubmit: false,
+    screenHeight: 1080
+  }
 };
 
 export const WithSubmit = {
-    args: {
-        maxPasses: 5,
-        bout: {
-            CurrentPass: 4
-        },
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        showSubmit: true,
-        screenHeight: 1080,
-    }
+  args: {
+    maxPasses: 5,
+    bout: {
+      CurrentPass: 4
+    },
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
+    },
+    showSubmit: true,
+    screenHeight: 1080
+  }
 };

package/src/stories/Molecules/Boxes/BoutBoxes/PassesBox/PassesBox.vue

@@ -9,13 +9,27 @@
 
       <div class="w-full flex flex-row justify-around text-center px-4 pt-4">
         <div class="pt-1 w-1/4" @click="minusPass">
-          <BaseIcon icon-name="fa-square-minus" size="5xl" color="quaternary" hover="quaternary" class="hover:text-quaternaryHighlight" :disabled="maxPasses <= 0" />
+          <BaseIcon
+            icon-name="fa-square-minus"
+            size="5xl"
+            color="quaternary"
+            hover="quaternary"
+            class="hover:text-quaternaryHighlight"
+            :disabled="maxPasses <= 0"
+          />
         </div>
         <div class="flex flex-row w-1/2 justify-center">
-            <BaseText :text="currentPass + 1" size="5xl" color="primary" weight="bold" />
+          <BaseText :text="currentPass + 1" size="5xl" color="primary" weight="bold" />
         </div>
         <div class="pt-1 w-1/4" @click="addPass">
-          <BaseIcon icon-name="fa-square-plus" size="5xl" color="quaternary" hover="quaternary" class="hover:text-quaternaryHighlight" :disabled="maxPasses <= 0" />
+          <BaseIcon
+            icon-name="fa-square-plus"
+            size="5xl"
+            color="quaternary"
+            hover="quaternary"
+            class="hover:text-quaternaryHighlight"
+            :disabled="maxPasses <= 0"
+          />
         </div>
       </div>
 
@@ -32,54 +46,53 @@
 </template>
 
 <script>
-import BaseIcon from "../../../../Atoms/Icon/BaseIcon.vue";
-import BaseText from "../../../../Atoms/Text/BaseText.vue";
+import BaseIcon from '../../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'PassesBox',
   emits: ['update:passes'],
-  components: {BaseText, BaseIcon},
+  components: { BaseText, BaseIcon },
   props: {
     maxPasses: {
       type: Number,
-      required: true,
+      required: true
     },
     bout: {
       type: Object,
-      required: true,
+      required: true
     },
     screenHeight: Number
   },
   data() {
     return {
       passes: [],
-      currentPass: this.bout.CurrentPass || 0,
-    }
+      currentPass: this.bout.CurrentPass || 0
+    };
   },
   created() {
-    this.passes = new Array(this.maxPasses).fill(0)
+    this.passes = new Array(this.maxPasses).fill(0);
   },
   methods: {
     addPass() {
-      if (this.currentPass+1 >= this.passes.length) {
+      if (this.currentPass + 1 >= this.passes.length) {
         this.emitPass();
-        return
+        return;
       }
 
-      this.currentPass++
-      this.passes[this.currentPass] = 1
-      this.emitPass()
+      this.currentPass++;
+      this.passes[this.currentPass] = 1;
+      this.emitPass();
     },
     minusPass() {
-      if (this.currentPass <= 0) return
-      this.passes[this.currentPass] = 0
-      this.currentPass--
-      this.emitPass()
-    },
-    emitPass(){
-      this.$emit('update:passes', this.currentPass)
+      if (this.currentPass <= 0) return;
+      this.passes[this.currentPass] = 0;
+      this.currentPass--;
+      this.emitPass();
     },
+    emitPass() {
+      this.$emit('update:passes', this.currentPass);
+    }
   }
-}
+};
 </script>
-

package/src/stories/Molecules/Boxes/BoutBoxes/PenaltyConfirmationBox/PenaltyConfirmationBox.stories.js

@@ -1,11 +1,11 @@
 import PenaltyConfirmationBox from './PenaltyConfirmationBox.vue';
 
 export default {
-    title: 'Molecules/Boxes/BoutBoxes/PenaltyConfirmationBox',
-    component: PenaltyConfirmationBox,
-    tags: ['autodocs']
+  title: 'Molecules/Boxes/BoutBoxes/PenaltyConfirmationBox',
+  component: PenaltyConfirmationBox,
+  tags: ['autodocs']
 };
 
 export const Default = {
-    args: {}
+  args: {}
 };

package/src/stories/Molecules/Boxes/BoutBoxes/PenaltyConfirmationBox/PenaltyConfirmationBox.vue

@@ -3,17 +3,22 @@
     <div class="w-full flex flex-col items-center text-center px-4">
       <BaseIcon icon-name="fa-clock" size="5xl" color="quaternary" class="mb-4" />
       <BaseText text="Waiting for second confirmation" size="xl" color="primary" weight="bold" />
-      <BaseText text="Issue has been recorded and is pending approval from another staff member." size="sm" color="quinary" class="mt-2 px-6" />
+      <BaseText
+        text="Issue has been recorded and is pending approval from another staff member."
+        size="sm"
+        color="quinary"
+        class="mt-2 px-6"
+      />
     </div>
   </section>
 </template>
 
 <script>
-import BaseText from "../../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../../Atoms/Icon/BaseIcon.vue';
 
 export default {
-  name: "PenaltyConfirmationBox",
+  name: 'PenaltyConfirmationBox',
   components: { BaseText, BaseIcon }
 };
 </script>