@dcrackel/hematournamentui 1.0.0

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

@@ -0,0 +1,162 @@
+<template>
+  <div :class="classes">{{ text }}</div>
+</template>
+
+<script>
+import { computed, reactive } from 'vue';
+
+export default {
+  name: 'BaseText',
+
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    weight: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['light', 'normal', 'medium', 'semi-bold', 'bold', 'extra-bold'].indexOf(value) !== -1;
+      }
+    },
+    size: {
+      type: String,
+      default: 'small',
+      validator: function (value) {
+        return ['xs', 'small', 'medium', 'large', 'xl', '2xl', '3xl'].indexOf(value) !== -1;
+      }
+    },
+    color: {
+      type: String,
+      default: 'primary',
+      validator: function (value) {
+        return ['neutral', 'quaternary', 'tertiary', 'secondary', 'primary', 'bright'].indexOf(value) !== -1;
+      }
+    },
+    hoverColor: {
+      type: String,
+      default: 'none',
+      validator: function (value) {
+        return (
+            [
+              'primary',
+              'secondary',
+              'tertiary',
+              'quaternary',
+              'neutral',
+              'bright',
+              'none'
+            ].indexOf(value) !== -1
+        );
+      }
+    }
+  },
+  setup(props) {
+    props = reactive(props);
+    return {
+      classes: computed(() => {
+        let baseClasses = 'inline-block font-sans';
+
+        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 'bright':
+            baseClasses += ' text-bright';
+            break;
+        }
+
+        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;
+          default:
+            baseClasses += ' font-normal';
+            break;
+        }
+
+        switch (props.size) {
+          case 'xs':
+            baseClasses += ' text-xs';
+            break;
+          case 'small':
+            baseClasses += ' text-sm';
+            break;
+          case 'medium':
+            baseClasses += ' text-md';
+            break;
+          case 'large':
+            baseClasses += ' text-lg';
+            break;
+          case 'xl':
+            baseClasses += ' text-xl';
+            break;
+          case '2xl':
+            baseClasses += ' text-2xl';
+            break;
+          case '3xl':
+            baseClasses += ' text-3xl';
+            break;
+          default:
+            baseClasses += ' text-sm';
+            break;
+        }
+        return baseClasses;
+      })
+    };
+  }
+};
+
+</script>

package/src/stories/Cards/TournamentCard/Detail/TournamentCardDetail.stories.js

@@ -0,0 +1,33 @@
+import TournamentCardDetail from './TournamentCardDetail.vue';
+
+export default {
+    title: 'Cards/TournamentCard/TournamentCardDetail',
+    component: TournamentCardDetail,
+    tags: ['autodocs'],
+    argTypes: {
+        tournament: {
+            control: {
+                type: 'object'
+            },
+            defaultValue: {
+                name: 'Tournament Name',
+                description: 'Tournament Description',
+                date: '07 October, 2023',
+                closes: 'Registration closes 06 October, 2023',
+                location: 'Tournament Location - City, State'
+            }
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        tournament: {
+            name: 'Tournament Name',
+            description: 'Tournament Description',
+            date: '07 October, 2023',
+            closes: 'Registration closes 06 October, 2023',
+            location: 'Tournament Location - City, State'
+        }
+    }
+};

package/src/stories/Cards/TournamentCard/Detail/TournamentCardDetail.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex flex-col w-full pt-4 pb-3 px-3">
+    <BaseText :text="detail.name" color="textPrimary" size="xl" weight="semi-bold" />
+    <BaseText :text="detail.location" color="textPrimary" size="small" weight="normal" />
+    <div class="mt-4 flex flex-col">
+      <BaseText :text="`${detail.date}`" color="textPrimary" size="small" weight="light" />
+      <BaseText :text="`${detail.closes}`" color="textPrimary" size="small" weight="light" />
+    </div>
+    <div class="flex flex-row w-full justify-end">
+      <BaseButton :label="`Edit`" class="mt-2" primary />
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseText from '../../../Base/Text/BaseText.vue';
+import BaseButton from '../../../Base/Button/BaseButton.vue';
+
+export default {
+  name: 'tournament-card-details',
+  components: {
+    BaseButton,
+    BaseText
+  },
+  props: {
+    detail: {
+      type: Object,
+      required: true,
+      default: () => ({
+        name: '',
+        date: '',
+        closes: '',
+        location: ''
+      })
+    }
+  }
+};
+</script>

package/src/stories/Cards/TournamentCard/Header/TournamentCardHeader.stories.js

@@ -0,0 +1,48 @@
+import TournamentCardHeader from './TournamentCardHeader.vue';
+
+export default {
+    title: 'Cards/TournamentCard/TournamentHeader',
+    component: TournamentCardHeader,
+    tags: ['autodocs'],
+    argTypes: {
+        artwork: {
+            control: {
+                type: 'text',
+                defaultValue: 'Default Artwork URL'
+            }
+        },
+        tags: {
+            control: {
+                type: 'array',
+                defaultValue: ['1 Fencer', '2 Events']
+            }
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        tags: ['1 Fencer', '2 Events']
+    }
+};
+
+export const WithCustomArtwork = {
+    args: {
+        artwork: 'Custom Artwork URL',
+        tags: ['1 Fencer', '2 Events']
+    }
+};
+
+export const WithCustomTags = {
+    args: {
+        artwork: 'Default Artwork URL',
+        tags: ['CustomTag1', 'CustomTag2']
+    }
+};
+
+export const NoTags = {
+    args: {
+        artwork: 'Default Artwork URL',
+        tags: []
+    }
+};

package/src/stories/Cards/TournamentCard/Header/TournamentCardHeader.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="rounded-t-xl w-full">
+    <div
+        :style="backgroundStyle"
+        class="h-36 w-full flex flex-col justify-end rounded-t-xl bg-cover bg-no-repeat bg-center">
+      <div class="flex flex-row">
+        <BaseTag v-for="tag in tags" :key="tag" :label="tag" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseTag from '../../../Base/Tag/BaseTag.vue';
+import defaultArtwork from '../../../../assets/default-tournament.png';
+
+export default {
+  name: 'tournament-card-header',
+  components: {
+    BaseTag
+  },
+  props: {
+    artwork: {
+      type: String,
+      required: true,
+      default: defaultArtwork
+    },
+    tags: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    backgroundStyle() {
+      const artworkToUse = this.artwork || defaultArtwork;
+      return `background-image: url('${artworkToUse}');`;
+    }
+  }
+};
+</script>

package/src/stories/Cards/TournamentCard/TournamentCard.stories.js

@@ -0,0 +1,37 @@
+import TournamentCard from './TournamentCard.vue';
+
+export default {
+    title: 'Cards/TournamentCard',
+    component: TournamentCard,
+    tags: ['autodocs'],
+    argTypes: {
+        detail: {
+            control: {
+                type: 'object',
+                defaultValue: {
+                    artwork: '',
+                    tags: ['tag1', 'tag2'],
+                    name: 'Tournament Name',
+                    description: 'Tournament Description',
+                    date: '2023-09-20',
+                    closes: '2023-09-21',
+                    location: 'Tournament Location - City, State'
+                }
+            }
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        detail: {
+            artwork: '',
+            tags: ['tag1', 'tag2'],
+            name: 'Tournament Name',
+            description: 'Tournament Description',
+            date: '2023-09-20',
+            closes: '2023-09-21',
+            location: 'Tournament Location - City, State'
+        }
+    }
+};

package/src/stories/Cards/TournamentCard/TournamentCard.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="rounded-xl w-72 shadow">
+    <TournamentHeader :artwork="detail.artwork" :tags="detail.tags" />
+    <TournamentDetail :detail="detail" />
+  </div>
+</template>
+
+<script>
+import TournamentHeader from './Header/TournamentCardHeader.vue';
+import TournamentDetail from './Detail/TournamentCardDetail.vue';
+
+export default {
+  name: 'TournamentCard',
+  components: {
+    TournamentHeader,
+    TournamentDetail
+  },
+  props: {
+    detail: {
+      type: Object,
+      required: true,
+      default: () => ({
+        artwork: '',
+        tags: [],
+        name: '',
+        description: '',
+        date: '',
+        closes: '',
+        location: ''
+      })
+    }
+  },
+};
+
+</script>