@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Molecules/Modals/BaseModal/BaseModal.stories.js

@@ -1,77 +1,78 @@
 import { ref } from 'vue';
 import BaseModal from './BaseModal.vue';
-import AddressAutocomplete from "../../../Organisms/ComplexInputs/AddressAutocomplete/AddressAutocomplete.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../Buttons/BaseButton/BaseButton.vue";
-import BaseInput from "../../../Atoms/Input/BaseInput.vue";
+import AddressAutocomplete from '../../../Organisms/ComplexInputs/AddressAutocomplete/AddressAutocomplete.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../Buttons/BaseButton/BaseButton.vue';
+import BaseInput from '../../../Atoms/Input/BaseInput.vue';
 
 export default {
-    components: {AddressAutocomplete, BaseText},
-    title: 'Molecules/Modals/BaseModal',
-    component: BaseModal,
-    tags: ['autodocs'],
-    args: {},
-    argTypes: {
-        show: {
-            control: 'boolean',
-            description: 'Controls the visibility of the modal'
-        },
-        iconName: {
-            control: 'text',
-            description: 'Icon name for the modal icon'
-        },
-        iconColor: {
-            control: 'text',
-            description: 'Color for the modal icon'
-        },
-        iconBackgroundColor: {
-            control: 'text',
-            description: 'Background color for the modal icon'
-        },
-        iconBorderColor: {
-            control: 'text',
-            description: 'Border color for the modal icon'
-        },
-        headerText: {
-            control: 'text',
-            description: 'Header text of the modal'
-        },
-        bodyText: {
-            control: 'text',
-            description: 'Body text of the modal'
-        },
-        buttonText: {
-            control: 'text',
-            description: 'Button Text Next'
-        },
+  components: { AddressAutocomplete, BaseText },
+  title: 'Molecules/Modals/BaseModal',
+  component: BaseModal,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {
+    show: {
+      control: 'boolean',
+      description: 'Controls the visibility of the modal'
+    },
+    iconName: {
+      control: 'text',
+      description: 'Icon name for the modal icon'
+    },
+    iconColor: {
+      control: 'text',
+      description: 'Color for the modal icon'
+    },
+    iconBackgroundColor: {
+      control: 'text',
+      description: 'Background color for the modal icon'
+    },
+    iconBorderColor: {
+      control: 'text',
+      description: 'Border color for the modal icon'
+    },
+    headerText: {
+      control: 'text',
+      description: 'Header text of the modal'
+    },
+    bodyText: {
+      control: 'text',
+      description: 'Body text of the modal'
+    },
+    buttonText: {
+      control: 'text',
+      description: 'Button Text Next'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        show: true,
-        iconName: 'fa-check-circle',
-        iconColor: 'accepted',
-        iconBackgroundColor: 'acceptedHighlight',
-        iconBorderColor: 'acceptedBorder',
-        headerText: 'Congratulations!',
-        bodyText: "Your tournament's been created. Now you can start editing events, setup up staff and start inviting members.",
-        buttonText: "Get Started!"
-    }
+  args: {
+    show: true,
+    iconName: 'fa-check-circle',
+    iconColor: 'accepted',
+    iconBackgroundColor: 'acceptedHighlight',
+    iconBorderColor: 'acceptedBorder',
+    headerText: 'Congratulations!',
+    bodyText:
+      "Your tournament's been created. Now you can start editing events, setup up staff and start inviting members.",
+    buttonText: 'Get Started!'
+  }
 };
 export const WithCustomForm = () => ({
-    components: {
-        BaseModal,
-        BaseText,
-        BaseInput,
-        AddressAutocomplete,
-        BaseButton
-    },
-    setup() {
-        const show = ref(true);
-        return { show };
-    },
-    template: `
+  components: {
+    BaseModal,
+    BaseText,
+    BaseInput,
+    AddressAutocomplete,
+    BaseButton
+  },
+  setup() {
+    const show = ref(true);
+    return { show };
+  },
+  template: `
       <BaseModal :show="show">
         <template #modal-content>
           <p>This is custom content</p>
@@ -80,5 +81,5 @@ export const WithCustomForm = () => ({
 
         </template>
       </BaseModal>
-    `,
+    `
 });

package/src/stories/Molecules/Modals/BaseModal/BaseModal.vue

@@ -6,16 +6,54 @@
       </div>
       <div class="mt-3 text-center w-full">
         <div class="w-full flex flex-row justify-center mb-8">
-          <p :class="['bg-' + iconBackgroundColor, 'flex flex-row justify-center h-20 w-20 rounded-full', 'border border-' + iconBorderColor]">
-            <BaseIcon :icon-name="iconName" iconStyle="fa-solid" size="4xl" :color="iconColor" class="mb-3 mt-5" :class="iconClass" data-testid="base-icon" />
+          <p
+            :class="[
+              'bg-' + iconBackgroundColor,
+              'flex flex-row justify-center h-20 w-20 rounded-full',
+              'border border-' + iconBorderColor
+            ]"
+          >
+            <BaseIcon
+              :icon-name="iconName"
+              iconStyle="fa-solid"
+              size="4xl"
+              :color="iconColor"
+              class="mb-3 mt-5"
+              :class="iconClass"
+              data-testid="base-icon"
+            />
           </p>
         </div>
         <slot name="modal-content">
-          <BaseText :text="headerText" size="2xl" weight="bold" color="secondary" class="m-3" data-testid="text-title"/>
-          <BaseText :text="bodyText" size="sm" weight="normal" color="primaryHighlight" class="mb-3" data-testid="text-title"/>
+          <BaseText
+            :text="headerText"
+            size="2xl"
+            weight="bold"
+            color="secondary"
+            class="m-3"
+            data-testid="text-title"
+          />
+          <BaseText
+            :text="bodyText"
+            size="sm"
+            weight="normal"
+            color="primaryHighlight"
+            class="mb-3"
+            data-testid="text-title"
+          />
         </slot>
         <div class="mt-4">
-          <BaseButton v-if="!disableButton" :label="buttonText" size="sm" type="secondary" :selected="true" @buttonClick="submit" color="neutral" class="w-full" data-testid="base-button"/>
+          <BaseButton
+            v-if="!disableButton"
+            :label="buttonText"
+            size="sm"
+            type="secondary"
+            :selected="true"
+            @buttonClick="submit"
+            color="neutral"
+            class="w-full"
+            data-testid="base-button"
+          />
         </div>
       </div>
     </div>
@@ -23,12 +61,12 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseButton from "../../Buttons/BaseButton/BaseButton.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseButton from '../../Buttons/BaseButton/BaseButton.vue';
 
 export default {
-  name: "BaseModal",
+  name: 'BaseModal',
   components: { BaseButton, BaseIcon, BaseText },
   props: {
     show: {

package/src/stories/Molecules/Modals/ConfirmModal/ConfirmModal.stories.js

@@ -1,28 +1,28 @@
-import ConfirmModal from "./ConfirmModal.vue";
+import ConfirmModal from './ConfirmModal.vue';
 
 export default {
-    title: "Molecules/Modals/ConfirmModal",
-    component: ConfirmModal,
-    tags: ['autodocs'],
-    argTypes: {
-        show: { control: "boolean" },
-        headerText: { control: "text" },
-        bodyText: { control: "text" },
-        confirmText: { control: "text" },
-        cancelText: { control: "text" },
-    },
+  title: 'Molecules/Modals/ConfirmModal',
+  component: ConfirmModal,
+  tags: ['autodocs'],
+  argTypes: {
+    show: { control: 'boolean' },
+    headerText: { control: 'text' },
+    bodyText: { control: 'text' },
+    confirmText: { control: 'text' },
+    cancelText: { control: 'text' }
+  }
 };
 
 export const Default = {
-    args: {
-        show: true,
-        iconName: 'fa-circle-exclamation',
-        iconColor: 'alarmText',
-        iconBackgroundColor: 'alarmHighlight',
-        iconBorderColor: 'lossRed',
-        headerText: "Confirmation Required",
-        bodyText: "Are you sure you want to continue this action?",
-        confirmText: "Confirm",
-        cancelText: "Cancel",
-    }
-}
+  args: {
+    show: true,
+    iconName: 'fa-circle-exclamation',
+    iconColor: 'alarmText',
+    iconBackgroundColor: 'alarmHighlight',
+    iconBorderColor: 'lossRed',
+    headerText: 'Confirmation Required',
+    bodyText: 'Are you sure you want to continue this action?',
+    confirmText: 'Confirm',
+    cancelText: 'Cancel'
+  }
+};

package/src/stories/Molecules/Modals/ConfirmModal/ConfirmModal.vue

@@ -1,22 +1,70 @@
 <template>
-  <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-50 flex items-center justify-center z-20" @click="close">
+  <div
+    v-if="show"
+    class="fixed inset-0 bg-secondary bg-opacity-50 flex items-center justify-center z-20"
+    @click="close"
+  >
     <div class="p-5 border w-11/12 md:w-96 shadow-lg rounded-md bg-neutral" @click.stop>
       <div class="absolute top-3 right-3">
         <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close" />
       </div>
       <div class="mt-3 text-center w-full">
         <div class="w-full flex flex-row justify-center mb-8">
-          <p :class="['bg-' + iconBackgroundColor, 'flex flex-row justify-center h-20 w-20 rounded-full', 'border border-' + iconBorderColor]">
-            <BaseIcon :icon-name="iconName" iconStyle="fa-solid" size="4xl" :color="iconColor" class="mb-3 mt-5" data-testid="base-icon" />
+          <p
+            :class="[
+              'bg-' + iconBackgroundColor,
+              'flex flex-row justify-center h-20 w-20 rounded-full',
+              'border border-' + iconBorderColor
+            ]"
+          >
+            <BaseIcon
+              :icon-name="iconName"
+              iconStyle="fa-solid"
+              size="4xl"
+              :color="iconColor"
+              class="mb-3 mt-5"
+              data-testid="base-icon"
+            />
           </p>
         </div>
         <slot name="modal-content">
-          <BaseText :text="headerText" size="2xl" weight="bold" color="secondary" class="m-3" data-testid="text-title"/>
-          <BaseText :text="bodyText" size="sm" weight="normal" color="primaryHighlight" class="mb-3" data-testid="text-title"/>
+          <BaseText
+            :text="headerText"
+            size="2xl"
+            weight="bold"
+            color="secondary"
+            class="m-3"
+            data-testid="text-title"
+          />
+          <BaseText
+            :text="bodyText"
+            size="sm"
+            weight="normal"
+            color="primaryHighlight"
+            class="mb-3"
+            data-testid="text-title"
+          />
         </slot>
         <div class="mt-4 flex flex-row justify-between space-x-3 w-full">
-          <BaseButton :label="cancelText" :selected="true" size="sm" type="primary" @buttonClick="cancel" color="neutral" class="w-1/2" data-testid="cancel-button"/>
-          <BaseButton :label="confirmText" size="sm" type="primary" @buttonClick="confirm" color="primary" class="w-1/2" data-testid="confirm-button"/>
+          <BaseButton
+            :label="cancelText"
+            :selected="true"
+            size="sm"
+            type="primary"
+            @buttonClick="cancel"
+            color="neutral"
+            class="w-1/2"
+            data-testid="cancel-button"
+          />
+          <BaseButton
+            :label="confirmText"
+            size="sm"
+            type="primary"
+            @buttonClick="confirm"
+            color="primary"
+            class="w-1/2"
+            data-testid="confirm-button"
+          />
         </div>
       </div>
     </div>
@@ -24,12 +72,12 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseButton from "../../Buttons/BaseButton/BaseButton.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseButton from '../../Buttons/BaseButton/BaseButton.vue';
 
 export default {
-  name: "ConfirmModal",
+  name: 'ConfirmModal',
   components: { BaseButton, BaseIcon, BaseText },
   props: {
     show: {

package/src/stories/Molecules/Modals/DirectorModal/DirectorModal.stories.js

@@ -1,49 +1,49 @@
 import DirectorModal from './DirectorModal.vue';
 import eventRules from '../../../../mocks/eventRules.js';
-import getPoolsWithBouts from "../../../../mocks/getPoolsWithBouts.js";
+import getPoolsWithBouts from '../../../../mocks/getPoolsWithBouts.js';
 
 export default {
-    title: 'Molecules/Modals/DirectorModal',
-    component: DirectorModal,
-    tags: ['autodocs'],
-    args: {
-        show: true,
-        eventRules: eventRules,
-        bout: getPoolsWithBouts[0],
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-    },
-    argTypes: {
-        show: { control: 'boolean' },
-        eventRules: { control: 'object' },
-        bout: { control: 'object' },
-        hostingClubColors: { control: 'object' },
-    },
+  title: 'Molecules/Modals/DirectorModal',
+  component: DirectorModal,
+  tags: ['autodocs'],
+  args: {
+    show: true,
+    eventRules: eventRules,
+    bout: getPoolsWithBouts[0],
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
+    }
+  },
+  argTypes: {
+    show: { control: 'boolean' },
+    eventRules: { control: 'object' },
+    bout: { control: 'object' },
+    hostingClubColors: { control: 'object' }
+  }
 };
 
 export const Default = {
-    args: {
-        show: true,
-        eventRules: eventRules,
-        bout: getPoolsWithBouts[0],
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        ringName: 'Ring 1'
-    }
+  args: {
+    show: true,
+    eventRules: eventRules,
+    bout: getPoolsWithBouts[0],
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
+    },
+    ringName: 'Ring 1'
+  }
 };
 
 export const WithDEBout = {
-    args: {
-        show: true,
-        eventRules: eventRules,
-        bout: getPoolsWithBouts[0],
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
+  args: {
+    show: true,
+    eventRules: eventRules,
+    bout: getPoolsWithBouts[0],
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
     }
+  }
 };

package/src/stories/Molecules/Modals/DirectorModal/DirectorModal.vue

@@ -1,26 +1,31 @@
 <template>
   <transition
-      enter-active-class="transition-opacity duration-500"
-      enter-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="transition-opacity duration-500"
-      leave-class="opacity-100"
-      leave-to-class="opacity-0"
+    enter-active-class="transition-opacity duration-500"
+    enter-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition-opacity duration-500"
+    leave-class="opacity-100"
+    leave-to-class="opacity-0"
   >
-    <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50" @click="close">
+    <div
+      v-if="show"
+      class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
+      @click="close"
+    >
       <div class="w-full md:w-1/3 md:min-w-[30rem] bg-neutral rounded-lg shadow-lg pb-6 px-2" @click.stop>
         <div class="flex w-full justify-end mt-1">
-          <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close"/>
+          <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close" />
         </div>
-        <DirectorCard :key="bout.BoutId"
-                      :eventRules="eventRules"
-                      :bout="bout"
-                      :hostingClubColors="hostingClubColors"
-                      @penalty:add="handleAddPenalty"
-                      @penalty:update="handleUpdatePenalty"
-                      @penalty:remove="handleRemovePenalty"
-                      @update:bout="handleBoutChange"
-                      @submit:bout="handleSubmitBout"
+        <DirectorCard
+          :key="bout.BoutId"
+          :eventRules="eventRules"
+          :bout="bout"
+          :hostingClubColors="hostingClubColors"
+          @penalty:add="handleAddPenalty"
+          @penalty:update="handleUpdatePenalty"
+          @penalty:remove="handleRemovePenalty"
+          @update:bout="handleBoutChange"
+          @submit:bout="handleSubmitBout"
         />
       </div>
     </div>
@@ -28,13 +33,13 @@
 </template>
 
 <script>
-import DirectorCard from "../../../Organisms/Cards/Director/DirectorCard.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import DirectorCard from '../../../Organisms/Cards/Director/DirectorCard.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
 
 export default {
-  name: "DirectorModal",
-  components: {BaseIcon, DirectorCard},
-  emits: ['update:closeModal','update:bout','submit:bout','penalty:update','penalty:add','penalty:remove'],
+  name: 'DirectorModal',
+  components: { BaseIcon, DirectorCard },
+  emits: ['update:closeModal', 'update:bout', 'submit:bout', 'penalty:update', 'penalty:add', 'penalty:remove'],
   props: {
     show: {
       type: Boolean,

package/src/stories/Molecules/Modals/EditBoutModal/EditBoutModal.stories.js

@@ -1,56 +1,56 @@
 import EditBoutModal from './EditBoutModal.vue';
-import getPoolsWithBouts from "../../../../mocks/getPoolsWithBouts.js";
+import getPoolsWithBouts from '../../../../mocks/getPoolsWithBouts.js';
 import eventRules from '../../../../mocks/eventRules.js';
 
 export default {
-    title: 'Molecules/Modals/EditBoutModal',
-    component: EditBoutModal,
-    tags: ['autodocs'],
-    args: {
-        show: true,
-        bout: getPoolsWithBouts[1],
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        eventRules: eventRules
+  title: 'Molecules/Modals/EditBoutModal',
+  component: EditBoutModal,
+  tags: ['autodocs'],
+  args: {
+    show: true,
+    bout: getPoolsWithBouts[1],
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
+    },
+    eventRules: eventRules
+  },
+  argTypes: {
+    show: {
+      control: 'boolean'
+    },
+    bout: {
+      control: 'object'
+    },
+    hostingClubColors: {
+      control: 'object'
     },
-    argTypes: {
-        show: {
-            control: 'boolean'
-        },
-        bout: {
-            control: 'object'
-        },
-        hostingClubColors: {
-            control: 'object'
-        },
-        eventRules: {
-            control: 'array'
-        }
+    eventRules: {
+      control: 'array'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        show: true,
-        bout: getPoolsWithBouts[0],
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        eventRules: eventRules
-    }
-}
+  args: {
+    show: true,
+    bout: getPoolsWithBouts[0],
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
+    },
+    eventRules: eventRules
+  }
+};
 
 export const Hidden = {
-args: {
+  args: {
     show: true,
-        bout: getPoolsWithBouts[0],
-        hostingClubColors: {
-        Color1: 'red',
-            Color2: 'blue'
+    bout: getPoolsWithBouts[0],
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
     },
     eventRules: eventRules
-}
+  }
 };