feat(form): use link buttons for redirects

maevsi · Jun 8, 2022 · 2ae6bbb · 2ae6bbb
1 parent 0a24669
commit 2ae6bbb
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 16 deletions.
diff --git a/...k/storycap/images/expected/form/invitation/FormInvitation/Default_1280x1020.png b/...k/storycap/images/expected/form/invitation/FormInvitation/Default_1280x1020.png
diff --git a/...ok/storycap/images/expected/form/invitation/FormInvitation/Default_640x1020.png b/...ok/storycap/images/expected/form/invitation/FormInvitation/Default_640x1020.png
diff --git a/...rybook/storycap/images/expected/modal/ModalImageSelection/Default_1280x1020.png b/...rybook/storycap/images/expected/modal/ModalImageSelection/Default_1280x1020.png
diff --git a/...orybook/storycap/images/expected/modal/ModalImageSelection/Default_640x1020.png b/...orybook/storycap/images/expected/modal/ModalImageSelection/Default_640x1020.png
diff --git a/nuxt/components/ImageUploadGallery.vue b/nuxt/components/ImageUploadGallery.vue
@@ -100,13 +100,15 @@
       </div>
     </Card>
     <div v-else class="flex flex-col gap-1 py-2">
-      <p class="text-center">{{ $t('noPictures') }}</p>
-      <ButtonColored
-        :aria-label="$t('uploadImages')"
-        :to="localePath('/upload')"
-      >
-        {{ $t('uploadImages') }}
-      </ButtonColored>
+      <!-- <p class="text-center">{{ $t('noPictures') }}</p> -->
+      <div class="flex justify-center">
+        <Button :aria-label="$t('uploadImages')" :to="localePath('/upload')">
+          {{ $t('uploadImages') }}
+          <template slot="suffix">
+            <IconArrowRight />
+          </template>
+        </Button>
+      </div>
     </div>
     <Modal
       id="ModalImageUploadGallery"

diff --git a/nuxt/components/button/Button.vue b/nuxt/components/button/Button.vue
@@ -11,6 +11,7 @@
   >
     <slot name="prefix" />
     <slot />
+    <slot name="suffix" />
   </AppLink>
   <button
     v-else
@@ -23,6 +24,7 @@
   >
     <slot name="prefix" />
     <slot />
+    <slot name="suffix" />
   </button>
 </template>
 

diff --git a/nuxt/components/button/ButtonColored.vue b/nuxt/components/button/ButtonColored.vue
@@ -30,6 +30,9 @@
         <template slot="prefix">
           <slot name="prefix" />
         </template>
+        <template slot="suffix">
+          <slot name="suffix" />
+        </template>
       </Button>
     </div>
   </div>

diff --git a/nuxt/components/form/invitation/FormInvitation.vue b/nuxt/components/form/invitation/FormInvitation.vue
@@ -56,15 +56,14 @@
           <ContactPreview class="px-4 py-2" :contact="contact" />
         </Button>
       </div>
-      <ButtonColored
-        :aria-label="$t('contactsAdd')"
-        :to="localePath('/contact')"
-      >
-        {{ $t('contactsAdd') }}
-        <template slot="prefix">
-          <IconPlus />
-        </template>
-      </ButtonColored>
+      <div class="flex justify-center">
+        <Button :aria-label="$t('contactsAdd')" :to="localePath('/contact')">
+          {{ $t('contactsAdd') }}
+          <template slot="suffix">
+            <IconArrowRight />
+          </template>
+        </Button>
+      </div>
     </div>
     <template slot="assistance">
       <FormInputStateInfo>

diff --git a/nuxt/components/icon/IconArrowRight.vue b/nuxt/components/icon/IconArrowRight.vue
@@ -0,0 +1,29 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :class="classes"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M14 5l7 7m0 0l-7 7m7-7H3"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '#app'
+
+export default defineComponent({
+  props: {
+    classes: {
+      default: 'h-5 md:h-6 w-5 md:w-6',
+      type: String,
+    },
+  },
+})
+</script>