Add basic styleguide

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Account/ActorLink.vue

@@ -1,11 +1,63 @@
+<docs>
+A simple link to an actor, local or remote link
+
+```vue
+<template>
+    <ActorLink :actor="localActor">
+        <template>
+            <span>{{ localActor.preferredUsername }}</span>
+        </template>
+    </ActorLink>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            localActor: {
+                domain: null,
+                preferredUsername: 'localActor'
+            },
+        }
+    }
+}
+</script>
+```
+
+```vue
+<template>
+    <ActorLink :actor="remoteActor">
+        <template>
+            <span>{{ remoteActor.preferredUsername }}</span>
+        </template>
+    </ActorLink>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            remoteActor: {
+                domain: 'mobilizon.org',
+                url: 'https://mobilizon.org/@Framasoft',
+                preferredUsername: 'Framasoft'
+            },
+        }
+    }
+}
+</script>
+```
+
+</docs>
+
 <template>
     <span>
         <span v-if="actor.domain === null"
                      :to="{name: 'Profile', params: { name: actor.preferredUsername } }"
         >
+            <!-- @slot What to put inside the link -->
             <slot></slot>
         </span>
         <a v-else :href="actor.url">
+            <!-- @slot What to put inside the link -->
             <slot></slot>
         </a>
     </span>
@@ -16,6 +68,9 @@ import { IActor } from '@/types/actor';
 
 @Component
 export default class ActorLink extends Vue {
-  @Prop() actor!: IActor;
+  /**
+   * The actor you want to make a link to
+   */
+  @Prop({ required: true }) actor!: IActor;
 }
 </script>

js/src/components/Account/Identities.vue

@@ -29,30 +29,6 @@
   </section>
 </template>
 
-<style lang="scss" scoped>
-  .identities {
-    border-right: 1px solid grey;
-
-    padding: 15px 0;
-  }
-
-  .media.identity {
-    align-items: center;
-    font-size: 1.3rem;
-    padding-bottom: 0;
-    margin-bottom: 15px;
-    color: #000;
-
-    &.is-current-identity {
-      background-color: rgba(0, 0, 0, 0.1);
-    }
-  }
-
-  .title {
-    margin-bottom: 30px;
-  }
-</style>
-
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { IDENTITIES } from '@/graphql/actor';
@@ -80,3 +56,27 @@ export default class Identities extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  .identities {
+    border-right: 1px solid grey;
+
+    padding: 15px 0;
+  }
+
+  .media.identity {
+    align-items: center;
+    font-size: 1.3rem;
+    padding-bottom: 0;
+    margin-bottom: 15px;
+    color: #000;
+
+    &.is-current-identity {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .title {
+    margin-bottom: 30px;
+  }
+</style>

js/src/components/Account/ParticipantCard.vue

@@ -1,3 +1,20 @@
+<docs>
+```vue
+<participant-card :participant="{ actor: { preferredUsername: 'user1', name: 'someoneIDontLike' }, role: 'REJECTED' }" />
+```
+
+```vue
+<participant-card :participant="{ actor: { preferredUsername: 'user2', name: 'someoneWhoWillWait' }, role: 'NOT_APPROVED' }" />
+```
+
+```vue
+<participant-card :participant="{ actor: { preferredUsername: 'user3', name: 'a_participant' }, role: 'PARTICIPANT' }" />
+```
+
+```vue
+<participant-card :participant="{ actor: { preferredUsername: 'me', name: 'myself' }, role: 'CREATOR' }" />
+```
+</docs>
 <template>
   <article class="card">
     <div class="card-content">
@@ -28,7 +45,7 @@ import { IActor, IPerson, Person } from '@/types/actor';
 import { IParticipant, ParticipantRole } from '@/types/event.model';
 
 @Component
-export default class ActorCard extends Vue {
+export default class ParticipantCard extends Vue {
   @Prop({ required: true }) participant!: IParticipant;
   @Prop({ type: Function }) accept;
   @Prop({ type: Function }) reject;