diff --git a/CHANGELOG.md b/CHANGELOG.md index b9d5581..1dbfe2c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/docs/README.md b/docs/README.md index 1987170..7114776 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,53 +1,51 @@ +📢 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 + + [![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-) + -
-📢 Don't fork this project. Use, contribute, or open issues using your feature request. -
+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 @@ -55,35 +53,38 @@ An app that makes it possible to render external iframes on a store ```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 | @@ -91,12 +92,14 @@ An app that makes it possible to render external iframes on a store | `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`. + ## 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 -This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! \ No newline at end of file +This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! + \ No newline at end of file diff --git a/messages/context.json b/messages/context.json index b1cc513..266dce1 100644 --- a/messages/context.json +++ b/messages/context.json @@ -5,6 +5,7 @@ "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", @@ -12,5 +13,6 @@ "editor.dynamiciframe.srcAppend.description": "iframe source url appended string", "editor.dynamiciframe.srcAppend.title": "Append", "editor.dynamiciframe.height.title": "Height", - "editor.dynamiciframe.width.title": "Width" -} \ No newline at end of file + "editor.dynamiciframe.width.title": "Width", + "editor.dynamiciframe.allow.title": "Allow" +} diff --git a/messages/en.json b/messages/en.json index 5224617..266dce1 100644 --- a/messages/en.json +++ b/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" -} \ No newline at end of file + "editor.dynamiciframe.width.title": "Width", + "editor.dynamiciframe.allow.title": "Allow" +} diff --git a/react/DynamicIframe.tsx b/react/DynamicIframe.tsx index 23cc12c..5677f6a 100644 --- a/react/DynamicIframe.tsx +++ b/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 = ({ +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 = ({ 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, + }, }, } diff --git a/react/Iframe.tsx b/react/Iframe.tsx index fb44fc2..541b2d1 100644 --- a/react/Iframe.tsx +++ b/react/Iframe.tsx @@ -3,12 +3,15 @@ import { useCssHandles } from 'vtex.css-handles' const CSS_HANDLES = ['container'] as const -const Iframe: StorefrontFunctionComponent = ({ - 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 = ({ src={src} width={width} height={height} + allow={allow} frameBorder="0" /> ) } -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, + }, }, } diff --git a/react/package.json b/react/package.json index 1d98741..39514b2 100644 --- a/react/package.json +++ b/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" } diff --git a/react/typings/css.d.ts b/react/typings/css.d.ts deleted file mode 100644 index ce1bfff..0000000 --- a/react/typings/css.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare module '*.css' { - const css: any - export default css -} diff --git a/react/typings/graphql.d.ts b/react/typings/graphql.d.ts deleted file mode 100644 index ba891a0..0000000 --- a/react/typings/graphql.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -declare module '*.graphql' { - import { DocumentNode } from 'graphql' - - const value: DocumentNode - export default value -} diff --git a/react/typings/storefront.d.ts b/react/typings/storefront.d.ts deleted file mode 100644 index 5033033..0000000 --- a/react/typings/storefront.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { FunctionComponent } from 'react' - -declare global { - interface StorefrontFunctionComponent

extends FunctionComponent

{ - getSchema?(props: P): object - schema?: object - } - - interface StorefrontComponent

extends Component { - getSchema?(props: P): object - schema: object - } -} diff --git a/react/typings/vtex.render-runtime.d.ts b/react/typings/vtex.render-runtime.d.ts deleted file mode 100644 index 31bd9ea..0000000 --- a/react/typings/vtex.render-runtime.d.ts +++ /dev/null @@ -1,96 +0,0 @@ -/* Typings for `render-runtime` */ -declare module 'vtex.render-runtime' { - import { Component, ComponentType, ReactElement, ReactType } from 'react' - - export interface NavigationOptions { - page: string - params?: any - } - - export interface RenderContextProps { - runtime: { - navigate: (options: NavigationOptions) => void - } - } - - export interface RenderRuntime { - account: string - accountId: string - appsEtag: string - workspace: string - disableSSR: boolean - hints: { - desktop: boolean - mobile: boolean - phone: boolean - tablet: boolean - } - page: string - route: Route - version: string - culture: Culture - pages: Pages - preview: boolean - production: boolean - publicEndpoint: string - renderMajor: number - query?: Record - start: boolean - runtimeMeta: { - version: string - config?: any - } - settings: { - [app: string]: any - } - segmentToken: string - rootPath?: string - workspaceCookie: string - hasNewExtensions: boolean - navigate: (options: NavigationOptions) => void - } - - interface ExtensionPointProps { - id: string - [key: string]: any - } - - interface Pages { - [name: string]: Page - } - interface Route { - domain: string - blockId: string - canonicalPath?: string - id: string - params: Record - path: string - title?: string - } - interface Culture { - availableLocales: string[] - locale: string - language: string - country: string - currency: string - } - - export const ExtensionPoint: ComponentType - - interface ChildBlockProps { - id: string - } - - export const ChildBlock: ComponentType - export const useChildBlock = ({ id: string }) => Object - - export const Helmet: ReactElement - export const Link: ReactType - export const NoSSR: ReactElement - export const RenderContextConsumer: ReactElement - export const canUseDOM: boolean - export const withRuntimeContext: ( - Component: ComponentType - ) => ComponentType - export const useRuntime: () => RenderRuntime -} diff --git a/react/typings/vtex.styleguide.d.ts b/react/typings/vtex.styleguide.d.ts deleted file mode 100644 index 231ca46..0000000 --- a/react/typings/vtex.styleguide.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -declare module 'vtex.styleguide' { - import { ComponentType } from 'react' - - export const Input: ComponentType - - interface InputProps { - [key: string]: any - } -} diff --git a/react/yarn.lock b/react/yarn.lock index 1a35662..fd793d8 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -5296,7 +5296,12 @@ type-check@~0.3.2: dependencies: prelude-ls "~1.1.2" -typescript@3.8.3, typescript@^3.7.3: +typescript@3.9.7: + version "3.9.7" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" + integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw== + +typescript@^3.7.3: version "3.8.3" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061" integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w== @@ -5412,9 +5417,17 @@ verror@1.10.0: core-util-is "1.0.2" extsprintf "^1.2.0" -"vtex.css-handles@http://vtex.vteximg.com.br/_v/public/typings/v1/vtex.css-handles@0.4.1/public/@types/vtex.css-handles": - version "0.4.1" - resolved "http://vtex.vteximg.com.br/_v/public/typings/v1/vtex.css-handles@0.4.1/public/@types/vtex.css-handles#16fe9485e8e7183b94f28496ed8cdd741c83f227" +"vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles": + version "0.4.4" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles#8c45c6decf9acd2b944e07261686decff93d6422" + +"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.11/public/@types/vtex.render-runtime": + version "8.126.11" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.11/public/@types/vtex.render-runtime#aceb734766093b56954ec19a074574b4c2c95242" + +"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.136.0/public/@types/vtex.styleguide": + version "9.136.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.136.0/public/@types/vtex.styleguide#0581000fd332db1889bbb2a24f230f824c0e00f6" w3c-hr-time@^1.0.1: version "1.0.1"