Merge pull request #15 from cesarocampov/allow

feature: including allow tag for custom js

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Prop `allow`.
 
 ## [0.2.0] - 2020-03-30
 ### Added

docs/README.md

@@ -1,102 +1,105 @@
+📢 Use this project, [contribute](https://github.com/vtex-apps/iframe) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).
+
 # Iframe
+
+<!-- DOCS-IGNORE:start -->
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 [![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
+<!-- DOCS-IGNORE:end -->
 
-<div class="alert alert-warning">  
-📢 Don't fork this project. Use, contribute, or open issues using your feature request.
-</div>
+An app that makes it possible to render external iframes on a store.
 
 ![image](https://user-images.githubusercontent.com/18701182/67055752-abcb0500-f11f-11e9-8c24-50234214d474.png)
 
-An app that makes it possible to render external iframes on a store 
-
 ## Configuration - standard Iframe
 
 1. Add the `vtex.iframe` to the theme's dependencies on the `manifest.json`
-```
-...
+```json
 "dependencies": {
- ...
  "vtex.iframe": "0.x"
- ...
 }
-...
 ```
 
  2. Add the interface `iframe` to any **custom page** (Iframes are not allowed outside custom pages).
 
- ```
- ...
-"store.custom#about-us": {
+```json
+{
+  "store.custom#about-us": {
     "blocks": [
       "flex-layout.row#about-us",
       "iframe"
     ]
   },
 
- "iframe": {
-   "props": {
-     "src": ""
-   }
- },
- ...
- ```
+  "iframe": {
+    "props": {
+      "src": ""
+    }
+  }
+}
+```
 
 | Prop name | Type | Description | Default value |
 |--------------|--------|--------------| --------|
 | `src` | String | Source address the iframe should render | `null`
 | `width` | Number | Width attribute of the iframe | `null`
 | `height` | Number | Height attribute of the iframe | `null`
+| `allow` | String | allow attribute of the iframe | `null`
 
 ## Configuration - dynamic Iframe
 
 1. Add the `vtex.iframe` to the theme's dependencies on the `manifest.json`
 
 ```json
 "dependencies": {
- ...
   "vtex.iframe": "0.x"
 }
-...
 ```
 
 2. Add the dynamicIframe block and its properties to the blocks.json file
 
 ```json
-"store.custom#locationPage":{
+{
+  "store.custom#locationPage":{
     "children":[
       "iframe.dynamic-src"
     ]
   },
-"iframe.dynamic-src":{
-  "props":{
-      "dynamicSrc":"https://www.test.com/exampleStaticPathName/{dynamicParam1}/{dynamicParam2}/exampleStaticPageName",
-      "width":"1920",
-      "height":"1000",
-      "title":"exampleStaticPageName iframe wrapper for {account}"
+  "iframe.dynamic-src":{
+    "props": {
+      "dynamicSrc": "https://www.test.com/exampleStaticPathName/{dynamicParam1}/{dynamicParam2}/exampleStaticPageName",
+      "width": "1920",
+      "height": "1000",
+      "title": "exampleStaticPageName iframe wrapper for {account}",
+      "allow": "geolocation"
     }
   }
+}
 ```
 3. register your new page in routes.json with appropriate parameters passed into the page url
 
 ```json
-"store.custom#locationPage":{
+{
+  "store.custom#locationPage":{
     "path": "/:param1/:param2/pagename"
-  },
+  }
+}
 ```
 
 | Prop name | Type | Description | Default value |
 |--------------|--------|--------------| --------|
 | `dynamicSrc` | String | iframe src with dynamic parameters from page URL enclosed in '{}' | `null`
 | `width` | Number | Width attribute of the iframe | `null`
 | `height` | Number | Height attribute of the iframe | `null`
-| `title` | String | title attribute of the iframe tag | `null`
+| `title` | String | title attribute of the iframe | `null`
+| `allow` | String | allow attribute of the iframe | `null`
 
 ## Customization
 
-There is a `.container` handle that wraps the iframe, it's also possible to use `blockClass`
+There is a `.container` handle that wraps the iframe, it's also possible to use `blockClass`.
 
+<!-- DOCS-IGNORE:start -->
 ## Contributors ✨
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
@@ -108,4 +111,5 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+<!-- DOCS-IGNORE:end -->

messages/context.json

@@ -5,12 +5,14 @@
   "editor.iframe.height.title": "Height",
   "editor.iframe.width.title": "Width",
   "editor.iframe.title.title": "Title",
+  "editor.iframe.allow.title": "Allow",
   "editor.dynamiciframe.title": "Dynamic Iframe",
   "editor.dynamiciframe.title.title": "Title",
   "editor.dynamiciframe.srcPrepend.description": "iframe source url pre-pended string",
   "editor.dynamiciframe.srcPrepend.title": "Prepend",
   "editor.dynamiciframe.srcAppend.description": "iframe source url appended string",
   "editor.dynamiciframe.srcAppend.title": "Append",
   "editor.dynamiciframe.height.title": "Height",
-  "editor.dynamiciframe.width.title": "Width"
-}
+  "editor.dynamiciframe.width.title": "Width",
+  "editor.dynamiciframe.allow.title": "Allow"
+}

messages/en.json

@@ -5,10 +5,14 @@
   "editor.iframe.height.title": "Height",
   "editor.iframe.width.title": "Width",
   "editor.iframe.title.title": "Title",
+  "editor.iframe.allow.title": "Allow",
   "editor.dynamiciframe.title": "Dynamic Iframe",
   "editor.dynamiciframe.title.title": "Title",
-  "editor.dynamiciframe.dynamicSrc.description": "url to be used by iframe, use {param} for dynamic parameters",
-  "editor.dynamiciframe.dynamicSrc.title": "Prepend",
+  "editor.dynamiciframe.srcPrepend.description": "iframe source url pre-pended string",
+  "editor.dynamiciframe.srcPrepend.title": "Prepend",
+  "editor.dynamiciframe.srcAppend.description": "iframe source url appended string",
+  "editor.dynamiciframe.srcAppend.title": "Append",
   "editor.dynamiciframe.height.title": "Height",
-  "editor.dynamiciframe.width.title": "Width"
-}
+  "editor.dynamiciframe.width.title": "Width",
+  "editor.dynamiciframe.allow.title": "Allow"
+}

react/DynamicIframe.tsx

@@ -1,18 +1,27 @@
 import React from 'react'
-import { useRuntime } from 'vtex.render-runtime'
+import { useRuntime, RenderContext } from 'vtex.render-runtime'
 
 import Iframe from './Iframe'
 
-const DynamicIframe: StorefrontFunctionComponent<DynamicIframeProps> = ({
+interface Props {
+  dynamicSrc: string
+  width?: number
+  height?: number
+  title?: string
+  allow?: string
+}
+
+function DynamicIframe({
   dynamicSrc = '',
   width,
   height,
   title,
-}) => {
+  allow,
+}: Props) {
   const {
     route: { params },
     query = {},
-  } = useRuntime()
+  } = useRuntime() as RenderContext.RenderContext
 
   const queryString = Object.keys(query).reduce((acc, key) => {
     return `${acc || '?'}${key}=${query[key]}&`
@@ -42,17 +51,11 @@ const DynamicIframe: StorefrontFunctionComponent<DynamicIframeProps> = ({
       src={src + queryString}
       width={width}
       height={height}
+      allow={allow}
     />
   )
 }
 
-interface DynamicIframeProps {
-  dynamicSrc: string
-  width?: number
-  height?: number
-  title?: string
-}
-
 DynamicIframe.schema = {
   title: 'editor.dynamiciframe.title',
   type: 'object',
@@ -78,6 +81,11 @@ DynamicIframe.schema = {
       type: 'string',
       default: null,
     },
+    allow: {
+      title: 'editor.dynamiciframe.allow.title',
+      type: 'string',
+      default: null,
+    },
   },
 }
 

react/Iframe.tsx

@@ -3,12 +3,15 @@ import { useCssHandles } from 'vtex.css-handles'
 
 const CSS_HANDLES = ['container'] as const
 
-const Iframe: StorefrontFunctionComponent<IframeProps> = ({
-  src,
-  width,
-  height,
-  title,
-}) => {
+interface Props {
+  src?: string
+  width?: number
+  height?: number
+  allow?: string
+  title?: string
+}
+
+function Iframe({ src, width, height, title, allow }: Props) {
   const handles = useCssHandles(CSS_HANDLES)
 
   return (
@@ -18,19 +21,13 @@ const Iframe: StorefrontFunctionComponent<IframeProps> = ({
         src={src}
         width={width}
         height={height}
+        allow={allow}
         frameBorder="0"
       />
     </div>
   )
 }
 
-interface IframeProps {
-  src?: string
-  width?: number
-  height?: number
-  title?: string
-}
-
 Iframe.schema = {
   title: 'editor.iframe.title',
   type: 'object',
@@ -56,6 +53,11 @@ Iframe.schema = {
       type: 'string',
       default: null,
     },
+    allow: {
+      title: 'editor.iframe.allow.title',
+      type: 'string',
+      default: null,
+    },
   },
 }
 

react/package.json

@@ -24,8 +24,10 @@
     "apollo-cache-inmemory": "^1.6.5",
     "apollo-client": "^2.6.8",
     "graphql": "^14.6.0",
-    "typescript": "3.8.3",
-    "vtex.css-handles": "http://vtex.vteximg.com.br/_v/public/typings/v1/vtex.css-handles@0.4.1/public/@types/vtex.css-handles"
+    "typescript": "3.9.7",
+    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.11/public/@types/vtex.render-runtime",
+    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.136.0/public/@types/vtex.styleguide"
   },
   "version": "0.2.0"
 }