Merge branch 'develop' of github.com:niaefeup/website-niaefeup-fronte…

…nd into feature/user-info-page

src/lib/components/icons/label-input.stories.ts → src/lib/components/forms/label-input.stories.ts

@@ -1,7 +1,7 @@
 import LabelInput from './label-input.svelte';
 
 export default {
-  title: 'Atoms/LabelInput',
+  title: 'Atoms/Forms/Label Input',
   component: LabelInput,
   argTypes: {
     label: { control: 'text' },

src/lib/components/forms/label-input.svelte

@@ -0,0 +1,31 @@
+<script>
+  export let label = '';
+  export let id = '';
+  export let type = 'text';
+  export let placeholder = '';
+  export let isTextArea = false;
+  export let horizontal = false;
+</script>
+
+<div class="flex flex-{horizontal ? 'row' : 'col'}">
+  {#if label}
+    <label class="m-1 font-source_code font-bold text-white" for={id}>{label}</label>
+  {/if}
+  {#if isTextArea}
+    <textarea
+      aria-label="textarea-input"
+      class="mb-2 min-h-[100px] w-full rounded-lg bg-white p-2 font-source_code text-primary placeholder-primary"
+      {id}
+      {placeholder}
+      rows="4"
+    />
+  {:else}
+    <input
+      aria-label="text-input"
+      class="mb-2 w-full rounded-lg bg-white p-2 text-primary placeholder-primary"
+      {type}
+      {id}
+      {placeholder}
+    />
+  {/if}
+</div>

src/lib/components/forms/picture-input.stories.ts

@@ -0,0 +1,19 @@
+import PictureInput from './picture-input.svelte';
+
+export default {
+  title: 'Atoms/Forms',
+  component: PictureInput,
+  argTypes: {
+    text: { control: 'text' }
+  },
+  parameters: {
+    layout: 'centered',
+    controls: { exclude: ['name'] }
+  }
+};
+
+export const Picture_Input = {
+  args: {
+    text: 'Adicionar logo'
+  }
+};

src/lib/components/forms/picture-input.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import Icon from '$lib/components/icons/icon.svelte';
+  import Icons from '$lib/components/icons/icons';
+  import { createNotification } from '@/routes/(app)/_components/layout/notifications';
+  import notificationMessages from '@/routes/(app)/_components/layout/notifications/notification-messages';
+
+  export let text: string;
+  export let name: string = 'profilePicture';
+  let image: string;
+  let fileInput: HTMLInputElement;
+
+  const onFileSelected = (e) => {
+    const file = e.target.files[0];
+
+    // ensure the file is an image
+    if (file?.type?.split('/')[0] !== 'image') {
+      createNotification(notificationMessages.NOT_AN_IMAGE);
+      return;
+    }
+
+    // update the image
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = (e) => {
+      image = e.target?.result?.toString() ?? image;
+    };
+  };
+</script>
+
+<div class="flex flex-col items-center justify-center gap-y-2">
+  <input
+    style="display:none"
+    type="file"
+    {name}
+    accept="image/*"
+    on:change={(e) => onFileSelected(e)}
+    bind:this={fileInput}
+  />
+  <button
+    type="button"
+    aria-label="Upload image"
+    class="relative flex h-[200px] w-[200px] items-center justify-center rounded-md bg-muted-red-400 text-center"
+    on:click={() => {
+      fileInput.click();
+    }}
+  >
+    {#if image}
+      <img
+        class="h-[200px] w-[200px] rounded-md object-cover"
+        src={image}
+        alt="Selected {name.replace(/([A-Z])/g, ' $1').toLowerCase()}"
+      />
+    {:else}
+      <p class="font-medium text-white">{text}<span class="text-2xl">*</span></p>
+    {/if}
+    <div
+      class="absolute bottom-0 right-0 m-2 flex h-[15%] w-[15%] cursor-pointer items-center justify-center rounded-md bg-rose-950"
+    >
+      <Icon src={Icons.Edit} color="white" size="60%" />
+    </div>
+  </button>
+  <button
+    type="button"
+    aria-label="Remove image"
+    class="{image ? 'visible' : 'invisible'} text-sm font-bold text-white hover:underline"
+    on:click={() => {
+      fileInput.value = image = '';
+    }}
+  >
+    Remover imagem
+  </button>
+</div>

src/lib/components/forms/radio-buttons.stories.ts

@@ -0,0 +1,19 @@
+import RadioButtons from './radio-buttons.svelte';
+
+export default {
+  title: 'Atoms/Forms',
+  component: RadioButtons,
+  argTypes: {
+    options: { control: 'array' }
+  },
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export const Radio_Button = {
+  args: {
+    label: 'Language',
+    options: ['English', 'Spanish']
+  }
+};

src/lib/components/forms/radio-buttons.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  export let label: string = '';
+  export let options: string[];
+  export let horizontal: boolean = false;
+</script>
+
+<fieldset class="flex flex-row align-middle">
+  {#if label}
+    <legend
+      class="mx-1 font-source_code font-bold text-white"
+      class:float-left={horizontal}
+      class:self-center={horizontal}
+    >
+      {label}
+    </legend>
+  {/if}
+  {#each options as option}
+    <input
+      id="radio-{label.toLowerCase()}-{option.toLowerCase()}"
+      class="hidden text-center"
+      type="radio"
+      name={label}
+      value={option}
+    />
+    <label
+      class="m-1 justify-self-start rounded-lg bg-taupe-200 px-5 py-1 font-bold text-rose-950"
+      for="radio-{label.toLowerCase()}-{option.toLowerCase()}"
+    >
+      {option}
+    </label>
+  {/each}
+</fieldset>
+
+<style>
+  input:checked + label {
+    background-color: theme('colors.muted-red.400');
+    color: theme('colors.taupe.100');
+  }
+</style>

src/lib/components/icons/icons.ts

@@ -10,8 +10,8 @@ import {
 } from 'svelte-icons-pack/fa';
 import { BiMap } from 'svelte-icons-pack/bi';
 import { IoMail, IoClose, IoEye, IoEyeOff } from 'svelte-icons-pack/io';
-import { LuPencil } from 'svelte-icons-pack/lu';
 import { FiLogOut } from 'svelte-icons-pack/fi';
+import { FiEdit2 } from 'svelte-icons-pack/fi';
 
 const Icons = {
   Instagram: FaBrandsInstagram,
@@ -27,8 +27,8 @@ const Icons = {
   Pin: BiMap,
   Visible: IoEye,
   Hidden: IoEyeOff,
-  Pencil: LuPencil,
-  Logout: FiLogOut
+  Logout: FiLogOut,
+  Edit: FiEdit2
 };
 
 export default Icons;

src/routes/(app)/_components/layout/notifications/notification-messages.ts

@@ -1,5 +1,6 @@
 export default Object.freeze<{
   [key: string]: string;
 }>({
-  COPY_EMAIL: 'O email foi copiado para o teu clipboard :)'
+  COPY_EMAIL: 'O email foi copiado para o teu clipboard :)',
+  NOT_AN_IMAGE: 'O ficheiro não é uma imagem. Por favor, seleciona outro.'
 });

src/routes/(app)/contacts/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Icon } from 'svelte-icons-pack';
   import Graph from './_components/graph.svelte';
-  import LabelInput from '@/lib/components/icons/label-input.svelte';
+  import LabelInput from '@/lib/components/forms/label-input.svelte';
   import Icons from '$lib/components/icons/icons';
 </script>
 

src/routes/(app)/user/[id]/+page.svelte

@@ -32,7 +32,7 @@
         <div class="flex h-12 justify-end gap-x-3 lg:h-10 xl:h-12">
           <div class="w-12 rounded-md bg-muted-red-500 p-3 lg:w-12 xl:w-12">
             <a href="https://www.lipsum.com/">
-              <Icon src={Icons.Pencil} color="white" size="100%" />
+              <Icon src={Icons.Edit} color="white" size="100%" />
             </a>
           </div>
           <button