From 23daa0b18aae758a0808104f25bef030ba3136df Mon Sep 17 00:00:00 2001
From: Julia Rocha <juliaafr@outlook.com>
Date: Wed, 15 Jul 2020 14:53:27 -0300
Subject: [PATCH 1/4] reintegrated with docprop

---
 docs/README.md                  |  4 ++++
 manifest.json                   |  5 +++--
 react/components/CustomTags.tsx | 18 +++++++++++++++++-
 react/utils/constants.ts        |  3 +++
 4 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 react/utils/constants.ts

diff --git a/docs/README.md b/docs/README.md
index 583f34b..bf671d7 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -3,3 +3,7 @@
 This is the UI for VTEX IO documentation at https://vtex.io/docs.
 
 To contribute to the available content, please refer to [IO Documentation](https://github.com/vtex-apps/io-documentation).
+
+## Doc Prop
+
+For Store Framework components, props can be documented using Doc Prop.
diff --git a/manifest.json b/manifest.json
index 6c60dd3..1121532 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "vendor": "vtex",
   "name": "docs-ui",
-  "version": "2.1.2",
+  "version": "2.1.2-beta",
   "title": "VTEX IO Docs UI",
   "description": "VTEX IO Docs UI",
   "builders": {
@@ -15,7 +15,8 @@
     "vtex.styleguide": "9.x",
     "vtex.store-drawer": "0.x",
     "vtex.docs-graphql": "1.x",
-    "vtex.device-detector": "0.x"
+    "vtex.device-detector": "0.x",
+    "vtex.doc-prop": "1.x"
   },
   "mustUpdateAt": "2018-09-05",
   "categories": [],
diff --git a/react/components/CustomTags.tsx b/react/components/CustomTags.tsx
index de34068..7fb696d 100644
--- a/react/components/CustomTags.tsx
+++ b/react/components/CustomTags.tsx
@@ -4,6 +4,7 @@ import React, { Fragment } from 'react'
 import { useRuntime } from 'vtex.render-runtime'
 import { useDevice } from 'vtex.device-detector'
 import { Link } from 'vtex.styleguide'
+import { DocProp } from 'vtex.doc-prop'
 
 import ArticleNav from './ArticleNav'
 import { slug } from '../modules'
@@ -12,6 +13,7 @@ import {
   removeIgnoredNodesFromDocs,
 } from '../modules/ignoreTokens'
 import CodeBlock from './CodeBlock'
+import { DOC_PROP_PLACEHOLDER_MATCH, DOC_PROP_PLACEHOLDER } from '../utils/constants'
 
 export const CustomRenderers = {
   root: ({ children }: { children: any[] }) => {
@@ -187,7 +189,8 @@ export const CustomRenderers = {
   ),
   paragraph: (props: any) => {
     if (props.children === '' || props.children.length === 0) return null
-    return <p className="t-body c-on-base mt0 lh-copy mb6">{props.children}</p>
+
+    return checkDocProp(props) ? (<p className="t-body c-on-base mt0 lh-copy mb6">{props.children}</p>) : getDocProp(props)
   },
   strong: (props: any) => <strong className="fw7">{props.children}</strong>,
   table: (props: any) => (
@@ -225,3 +228,16 @@ function getHeadingSlug(childNodes: any) {
     (childNodes[0].props.children && slug(childNodes[0].props.children)) || ''
   )
 }
+
+function checkDocProp(props: any) {
+  const paragraphValue = props?.children[0]?.props?.value ?? ''
+
+  return paragraphValue.includes(DOC_PROP_PLACEHOLDER)
+}
+
+function getDocProp(props: any) {
+  const match = props.children[0].props.value.match(DOC_PROP_PLACEHOLDER_MATCH)
+  const blockInterface = match?.[1] ?? ''
+
+  return <DocProp blockInterface={blockInterface} />
+}
diff --git a/react/utils/constants.ts b/react/utils/constants.ts
new file mode 100644
index 0000000..51fbabd
--- /dev/null
+++ b/react/utils/constants.ts
@@ -0,0 +1,3 @@
+export const DOC_PROP_PLACEHOLDER = '%PROPS='
+
+export const DOC_PROP_PLACEHOLDER_MATCH = /\%PROPS=(.*)\%/

From aa51b3734f11917bab50ca405b12107f073b2c92 Mon Sep 17 00:00:00 2001
From: Julia Rocha <juliaafr@outlook.com>
Date: Wed, 15 Jul 2020 15:29:02 -0300
Subject: [PATCH 2/4] added changelog

---
 CHANGELOG.md  | 5 +++++
 manifest.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 84cb96f..7f71b20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [2.2.0] - 2020-07-15
+
+### Added
+- Doc Prop dependency and integration (via markdown placeholder on components readme.md).
+
 ## [2.1.2] - 2020-06-24
 ### Fixed
 - Link `Next Article` and `Previous Article` to work with trailing slash.
diff --git a/manifest.json b/manifest.json
index 1121532..c861478 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "vendor": "vtex",
   "name": "docs-ui",
-  "version": "2.1.2-beta",
+  "version": "2.2.0",
   "title": "VTEX IO Docs UI",
   "description": "VTEX IO Docs UI",
   "builders": {

From 8c3e02e8b918f0004465c3508c9b9b1ef3525d19 Mon Sep 17 00:00:00 2001
From: Julia Rocha <juliaafr@outlook.com>
Date: Wed, 15 Jul 2020 15:36:35 -0300
Subject: [PATCH 3/4] fixed changelog

---
 CHANGELOG.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7f71b20..1cb0ad1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,8 +7,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-## [2.2.0] - 2020-07-15
-
 ### Added
 - Doc Prop dependency and integration (via markdown placeholder on components readme.md).
 

From 4639e2f717536faf75bcb130f9daf5cbae3596a3 Mon Sep 17 00:00:00 2001
From: Julia Rocha <juliaafr@outlook.com>
Date: Thu, 16 Jul 2020 15:15:02 -0300
Subject: [PATCH 4/4] fixed logic to get doc prop

---
 manifest.json                   | 2 +-
 react/components/CustomTags.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/manifest.json b/manifest.json
index c861478..ec77dda 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "vendor": "vtex",
   "name": "docs-ui",
-  "version": "2.2.0",
+  "version": "2.1.2",
   "title": "VTEX IO Docs UI",
   "description": "VTEX IO Docs UI",
   "builders": {
diff --git a/react/components/CustomTags.tsx b/react/components/CustomTags.tsx
index 7fb696d..c8037f7 100644
--- a/react/components/CustomTags.tsx
+++ b/react/components/CustomTags.tsx
@@ -190,7 +190,8 @@ export const CustomRenderers = {
   paragraph: (props: any) => {
     if (props.children === '' || props.children.length === 0) return null
 
-    return checkDocProp(props) ? (<p className="t-body c-on-base mt0 lh-copy mb6">{props.children}</p>) : getDocProp(props)
+    return checkDocProp(props) ?
+    getDocProp(props) : (<p className="t-body c-on-base mt0 lh-copy mb6">{props.children}</p>)
   },
   strong: (props: any) => <strong className="fw7">{props.children}</strong>,
   table: (props: any) => (