From 929ca2f03e4bb621f2e02eb130a83c5c61acd196 Mon Sep 17 00:00:00 2001
From: "Bartlack, Mario" <mario.bartlack@spring-media.de>
Date: Fri, 19 Jun 2020 14:28:26 +0200
Subject: [PATCH] docs(vue): add docs for embed-content and embed-instagram
 component

---
 .../components/EmbedContent/EmbedContent.vue  |  4 +--
 src/vue/components/EmbedContent/README.md     | 28 ++++++++++++++++-
 .../EmbedInstagram/EmbedInstagram.vue         |  2 +-
 src/vue/components/EmbedInstagram/README.md   | 30 +++++++++++++++++++
 4 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/src/vue/components/EmbedContent/EmbedContent.vue b/src/vue/components/EmbedContent/EmbedContent.vue
index b2897d18..2c825d6f 100644
--- a/src/vue/components/EmbedContent/EmbedContent.vue
+++ b/src/vue/components/EmbedContent/EmbedContent.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { CreateElement, PropType, VNode } from 'vue';
+import Vue, { CreateElement, VNode } from 'vue';
 import { getScriptSrcFromOembedHTML, loadScript } from '../../../embed-utils';
 
 type Props = {
@@ -12,7 +12,7 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
   name: 'EmbedContent',
   props: {
     content: {
-      type: String as PropType<string>,
+      type: String,
       required: true,
     },
   },
diff --git a/src/vue/components/EmbedContent/README.md b/src/vue/components/EmbedContent/README.md
index c30951fd..7bb960de 100644
--- a/src/vue/components/EmbedContent/README.md
+++ b/src/vue/components/EmbedContent/README.md
@@ -1,2 +1,28 @@
-# Component for rendering arbitrary html content
+# Component for rendering arbitrary (OEmbed) html content
 
+This component can be used to process and display arbitrary (OEmbed) content.
+
+## Props
+
+| Name    | Type   | Required | Description |
+| ------- | ------ | -------- | ----------- |
+| content | string | true     | HTML embed content for given vendor that usually comes from Iframely (OEmbed format)  |
+
+## Example
+
+```vue
+<template>
+  <embed-content :content="content"></embed-content>
+</template>
+
+<script>
+import { EmbedContent } from '@spring-media/red-sourcepoint-cmp/dist/esm/vue/components';
+
+export default {
+  components: { EmbedContent },
+  data: () => ({
+    content: 'some oembed/iframely html content'
+  }),
+};
+</script>
+```
diff --git a/src/vue/components/EmbedInstagram/EmbedInstagram.vue b/src/vue/components/EmbedInstagram/EmbedInstagram.vue
index ef522fda..1a6a1316 100644
--- a/src/vue/components/EmbedInstagram/EmbedInstagram.vue
+++ b/src/vue/components/EmbedInstagram/EmbedInstagram.vue
@@ -29,7 +29,7 @@ export default Vue.extend<Data, Methods, NonNullish, Props>({
   props: {
     content: {
       type: String,
-      default: '',
+      required: true,
     },
   },
   methods: {
diff --git a/src/vue/components/EmbedInstagram/README.md b/src/vue/components/EmbedInstagram/README.md
index 4cda0c16..03953a70 100644
--- a/src/vue/components/EmbedInstagram/README.md
+++ b/src/vue/components/EmbedInstagram/README.md
@@ -1 +1,31 @@
 # Component for Instagram Embeds
+
+This component can be used to process and display Instagram (OEmbed format) content.
+
+> Instagram needs to run some code after embedding content into the page. For other vendors consider using the provided generic embed component [EmbedContent](../EmbedContent/README.md).
+
+
+## Props
+
+| Name    | Type   | Required | Description |
+| ------- | ------ | -------- | ----------- |
+| content | string | true     | HTML embed content for given vendor that usually comes from Iframely (OEmbed format)  |
+
+## Example
+
+```vue
+<template>
+  <embed-instagram :content="content"></embed-instagram>
+</template>
+
+<script>
+import { EmbedInstagram } from '@spring-media/red-sourcepoint-cmp/dist/esm/vue/components';
+
+export default {
+  components: { EmbedInstagram },
+  data: () => ({
+    content: 'some oembed/iframely html content'
+  }),
+};
+</script>
+```