@dcrackel/hematournamentui 1.0.35 → 1.0.37

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.35",
+  "version": "1.0.37",
   "type": "module",
   "main": "dist/HemaTouranmentUI-lib.umd.js",
   "module": "dist/HemaTouranmentUI-lib.es.js",

package/src/stories/Atoms/Icon/BaseIcon.vue

@@ -22,7 +22,7 @@ export default {
     size: {
       type: String,
       validator: function (value) {
-        return ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].indexOf(value) !== -1;
+        return ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].indexOf(value) !== -1;
       },
       default: 'sm'
     },

package/src/stories/Molecules/Buttons/BaseButton/BaseButton.vue

@@ -49,7 +49,6 @@ export default {
     const typeClasses = {
       primary: 'mx-1 p-2 items-center gap-2.5 text-center rounded-md shadow border border-dropdownSelect justify-center hover:bg-tertiary ' +
           (props.selected ? 'bg-dropdownSelect' : 'bg-neutral'),
-
       secondary: 'px-2.5 items-center gap-2.5 text-center my-1 p-3 border-b border-secondary hover:border-b hover:border-neutral w-full rounded-lg flex flex-row justify-center ' +
           (props.selected ? 'bg-secondary' : 'bg-primary'),
 

package/src/stories/Molecules/Menus/EditTournamentMenu/EditTournamentMenu.stories.js

@@ -0,0 +1,18 @@
+import EditTournamentMenu from './EditTournamentMenu.vue';
+
+export default {
+    title: 'Molecules/Menus/EditTournamentMenu/EditTournamentMenu',
+    component: EditTournamentMenu,
+    tags: ['autodocs'],
+    argTypes: {
+        onClick: {},
+        size: {}
+    }
+}
+
+export const Primary = {
+    args: {
+        label: 'Menu 1',
+        selected: true
+    }
+};

package/src/stories/Molecules/Menus/EditTournamentMenu/EditTournamentMenu.vue

@@ -0,0 +1,29 @@
+<template>
+  <nav class="flex flex-row w-full">
+    <BaseText :text="label" class="mx-3" color="secondary"/>
+  </nav>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'edit-tournament-menu',
+  components: {BaseText},
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    //
+    // onLinkClick: {
+    //   type: Function,
+    //   default: () => {}
+    // }
+  }
+}
+</script>

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

@@ -1,20 +1,63 @@
-import Modal from './BaseModal.vue';
+import BaseModal from './BaseModal.vue';
 
 export default {
     title: 'Molecules/Modals/BaseModal',
-    component: Modal,
+    component: BaseModal,
     tags: ['autodocs'],
+    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'
+        },
+    }
 };
 
 const Template = (args) => ({
-    components: { Modal },
+    components: { BaseModal },
     setup() {
         return { args };
     },
-    template: '<Modals v-bind="args" />',
+    template: '<BaseModal v-bind="args" />',
 });
 
 export const Default = Template.bind({});
 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!"
 };
+
+

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

@@ -1,29 +1,70 @@
 <template>
   <div v-if="show" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" @click="close">
     <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
-      <div class="mt-3 text-center">
-        <p class="text-lg leading-6 font-medium text-gray-900">Your tournament has been added</p>
+      <div class="mt-3 text-center w-full">
+        <div class="w-full flex flex-row justify-center">
+          <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>
+        <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"/>
         <div class="mt-4">
-          <button class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" @click="close">OK</button>
+          <BaseButton :label="buttonText" size="sm" type="secondary" :selected="true" @click="close" color="neutral" class="w-full" data-testid="base-button"/>
         </div>
       </div>
     </div>
   </div>
 </template>
 
+
 <script>
+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",
+  components: {BaseButton, BaseIcon, BaseText},
   props: {
     show: {
       type: Boolean,
       default: false
+    },
+    iconName: {
+      type: String,
+      default: 'fa-check-circle'
+    },
+    iconColor: {
+      type: String,
+      default: 'accepted'
+    },
+    iconBackgroundColor: {
+      type: String,
+      default: 'acceptedHighlight'
+    },
+    iconBorderColor: {
+      type: String,
+      default: 'acceptedBorder'
+    },
+    headerText: {
+      type: String,
+      default: 'Default Header'
+    },
+    bodyText: {
+      type: String,
+      default: 'Default Body Text'
+    },
+    buttonText: {
+      type: String,
+      default: 'Button Text'
     }
   },
   emits: ['update:show'],
   methods: {
     close() {
-      this.$emit('update:show', false);
+      this.$emit('update:show', false)
     }
   }
 };
-</script>
+</script>

package/src/stories/Templates/TournamentManagement/AddTournament/PageOne/AddTournamentPageOne.vue

@@ -17,7 +17,7 @@
         <div class="flex flex-col mb-3">
           <BaseText :invalid="validation.name" :size="'sm'" :text="'Tournament Name'" :weight="'normal'"
                     class="mb-1" color="primary" data-testid="text-tournament-name"/>
-          <BaseInput :invalid="validation.name" :value="tournament.name" placeholder="Enter Tournament Name"
+          <BaseInput :addBorder="true" :invalid="validation.name" :value="tournament.name" placeholder="Enter Tournament Name"
                      type="formInput" @update:value="value => tournament.name = value"/>
         </div>
         <div class="flex flex-col mb-3">

package/src/stories/Templates/TournamentManagement/AddTournament/PageTwo/AddTournamentPageTwo.vue

@@ -36,7 +36,7 @@
           <BaseText :color="'quaternary'" :size="'sm'" :text="'Add links to external sites such as Facebook events'"
                     :weight="'normal'" class="mb-1" data-testid="text-need-help"/>
           <div v-for="(newLink, index) in localTournament.externalLinks" :key="index" class="flex flex-row w-full">
-            <BaseInput :invalid="!newLink.valid" :value="newLink.url" class="pb-2 w-full"
+            <BaseInput :addBorder="true" :invalid="!newLink.valid" :value="newLink.url" class="pb-2 w-full"
                        icon-name="fa-dash"
                        placeholder="https://link1.com/yourevent" @input="updateLink(index, $event)"/>
             <BaseIcon class="mt-1.5 -ml-7 hover:text-primaryHighlight" color="primary" data-testid="base-icon"

package/tailwind.config.js

@@ -4,6 +4,10 @@ export default {
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
+  safelist: [
+    'text-accepted',
+    'bg-acceptedHighlight'
+  ],
   theme: {
     extend: {
       fontFamily: {
@@ -15,17 +19,20 @@ export default {
         'h3': '1.75'
       },
       colors: {
+        accepted: '#1D7E64',
+        acceptedBorder: '#ADCFC6',
+        acceptedHighlight: '#E5F6F1',
+        alarm: '#FD546F',
+        alarmText: '#F90229',
+        alert: '#FFD255',
+        bright: '#6190f2',
+        dropdownSelect: '#D5E4EE',
+        neutral: '#FFFFFF',
         primary: '#141B33',
         primaryHighlight: '#52586C',
-        secondary: '#2B324B',
         quaternary: '#8991AC',
-        tertiary: '#F6FAFD',
-        dropdownSelect: '#D5E4EE',
-        neutral: '#FFFFFF',
-        bright: '#6190f2',
-        alarm: '#FD546F',
-        alarmText: '#F90229',
-        alert: '#FFD255'
+        secondary: '#2B324B',
+        tertiary: '#F6FAFD'
       }
     },
   },