feat: enable text inside iconButton (#132)

teritorio · Dec 4, 2023 · 6059331 · 6059331
1 parent 4b75815
commit 6059331
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 7 deletions.
diff --git a/components/MainMap/FavoriteNoteBook.vue b/components/MainMap/FavoriteNoteBook.vue
@@ -18,35 +18,43 @@
         <IconsBar class="tw-mr-6">
           <IconButton
             :label="$t('favorites.menu_share')"
-            class="tw-w-8 tw-h-8"
+            class="tw-h-8"
             @click="setShareLink()"
           >
             <FontAwesomeIcon icon="share-alt" />
+            <span class="tw-text-sm">{{ $t('favorites.notebook.share') }}</span>
           </IconButton>
           <IconButton
             :label="$t('favorites.export_pdf')"
-            class="tw-w-8 tw-h-8"
+            class="tw-h-8"
             :href="pdfLink"
             target="_blank"
             @click="exportLink('export_pdf')"
           >
             <FontAwesomeIcon icon="print" />
+            <span class="tw-text-sm">{{ $t('favorites.notebook.print') }}</span>
           </IconButton>
           <IconButton
             :label="$t('favorites.export_csv')"
-            class="tw-w-8 tw-h-8"
+            class="tw-h-8"
             :href="csvLink"
             target="_blank"
             @click="exportLink('export_csv')"
           >
             <FontAwesomeIcon icon="file-csv" />
+            <span class="tw-text-sm">{{
+              $t('favorites.notebook.export')
+            }}</span>
           </IconButton>
           <IconButton
             :label="$t('favorites.menu_clear')"
-            class="tw-w-8 tw-h-8"
+            class="tw-h-8"
             @click="removeFavorites()"
           >
             <FontAwesomeIcon icon="trash" />
+            <span class="tw-text-sm">{{
+              $t('favorites.notebook.remove')
+            }}</span>
           </IconButton>
         </IconsBar>
       </div>

diff --git a/components/UI/IconButton.vue b/components/UI/IconButton.vue
@@ -3,7 +3,7 @@
     v-if="!href"
     :aria-label="label"
     type="button"
-    class="tw-text-sm tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none focus:tw-outline-none hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100 tw-shrink-0 tw-flex tw-items-center tw-justify-center"
+    class="tw-text-sm tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none focus:tw-outline-none hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100 tw-shrink-0 tw-flex tw-items-center tw-justify-center tw-px-2.5 tw-gap-2"
   >
     <slot></slot>
   </button>
@@ -12,7 +12,7 @@
     :aria-label="label"
     :to="href"
     :target="target"
-    class="tw-text-sm tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none focus:tw-outline-none hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100 tw-shrink-0 tw-flex tw-items-center tw-justify-center"
+    class="tw-text-sm tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none focus:tw-outline-none hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100 tw-shrink-0 tw-flex tw-items-center tw-justify-center tw-px-2.5 tw-gap-2"
   >
     <slot></slot>
   </NuxtLink>
@@ -21,7 +21,7 @@
     :aria-label="label"
     :href="href"
     :target="target"
-    class="tw-text-sm tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none focus:tw-outline-none hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100 tw-shrink-0 tw-flex tw-items-center tw-justify-center"
+    class="tw-text-sm tw-text-zinc-800 tw-bg-white tw-rounded-full tw-shadow-md tw-outline-none focus:tw-outline-none hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100 tw-shrink-0 tw-flex tw-items-center tw-justify-center tw-px-2.5 tw-gap-2"
   >
     <slot></slot>
   </a>

diff --git a/locales/en.js b/locales/en.js
@@ -26,6 +26,10 @@ export default {
     share_link: 'Share link of favorites',
     notebook: {
       title: 'Favorites notebook',
+      share: 'Share',
+      print: 'Print',
+      export: 'Export',
+      remove: 'Remove',
     },
     noFavs:
       'You do not have any favorite places yet. You can do this by selecting a location on the map, then saving it as a favorite.',

diff --git a/locales/es.js b/locales/es.js
@@ -26,6 +26,10 @@ export default {
     share_link: 'Compartir enlace de favoritos',
     notebook: {
       title: 'Cuaderno de favoritos',
+      share: 'Compartir',
+      print: 'Imprimir',
+      export: 'Exportar',
+      remove: 'Borrar',
     },
     noFavs:
       'Todavía no tienes ningún lugar marcado. Puedes hacerlo seleccionando un lugar en el mapa y guardándolo como favorito',

diff --git a/locales/fr.js b/locales/fr.js
@@ -27,6 +27,10 @@ export default {
     share_link: 'Partager le lien des favoris',
     notebook: {
       title: 'Carnet des favoris',
+      share: 'Partager',
+      print: 'Imprimer',
+      export: 'Exporter',
+      remove: 'Supprimer',
     },
     noFavs:
       "Vous n'avez pas encore de lieux en favoris. Vous pouvez le faire en sélectionnant un lieu sur la carte, puis en le mémorisant comme favori.",