fix: Don't rely on external services for img (#1645)

cozy · Nov 9, 2020 · f03e4fc · f03e4fc
1 parent 2670a31
commit f03e4fc
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/docs/placeholders/img.jsx b/docs/placeholders/img.jsx
@@ -0,0 +1,8 @@
+export const placeholder90 =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaBAMAAADKhlwxAAAAG1BMVEXMzMyWlpbFxcWjo6OqqqqxsbGcnJy+vr63t7eN+fR5AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAn0lEQVRYhe3QMQvCMBCG4a9pmqwd/AEVxbmddKyK4hhR91CKXQWhcyd/t71Bx+sq+D3TO1yOcAARERH9DlOVtv0mjrU6bcPtugyfzHYHddoVbu1LZHUvmT6e6nQCF02E6TpJh5U6nYZzjhx4lZLJ+ERjqn0z7sZ8kHSFvttjIf/GJUpO/dsNJ7mJaTaSUzfx92Bncr1eEttanSYiIvoXbxioFg9MQST8AAAAAElFTkSuQmCC'
+
+export const placeholder100 =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAG1BMVEXMzMyWlpacnJy+vr6jo6PFxcW3t7eqqqqxsbHbm8QuAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAiklEQVRYhe3QMQ6EIBAF0C+GSInF9mYTs+1ewRsQbmBlayysKefYO2asXbbYxvxHQj6ECQMAEREREf2NQ/fCtp5Zky6vtRMkSJEzhyISynWJnzH6Z8oQlzS7lEc/fLmmQUSvc16OrCPqRl1JePxQYo1ZSWVj9nxrrOb5esw+eXdvzTWfTERERHRXH4tWFZGswQ2yAAAAAElFTkSuQmCC'
+
+export const placeholder100Red =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAG1BMVEXMzMyWlpbFxcWqqqqcnJy3t7exsbG+vr6jo6NJiHMLAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABK0lEQVRYhe2TPVODQBCGX75CSk4wUMLoWENly404tlylZWiszaRISwodf7a7B2Xmkqvdp+CG4mHf3eUAQRAEQRCE/8mDfqn9jEQptfNTDtX7UX15KboFpt7HSAt6xHc+SsR9JM9Iz1WNmPoquxFp7lK2awGj1Bu2w6BL02Jz71LibDn1/okjYpqb/krQoLfHhvKdaW6pqqluM9+gcL4DzS7ecSqzvyEYH/ztaUaYo6tdim0//eZiwcy5qC0MLgMRDycq1yoxv00n54yXVTbZ2gvlovOzdCo0XaBrl4nZXAh+M7di8tNHUUOPtBebC5Fq3cpG8d55+yVMMQyvdB1Gt4Kj/qE49h8z9u6ENp4XYeVrIHH+lBeLPHrdHia+NrALCo3cF39DEARBEP4APi0j5Idr9ioAAAAASUVORK5CYII='
diff --git a/react/AppIcon/Readme.md b/react/AppIcon/Readme.md
@@ -35,8 +35,10 @@ Is it also possible to provide a custom asynchronous `fetchIcon` which takes an
 
 ```jsx
 import AppIcon from 'cozy-ui/transpiled/react/AppIcon';
-const fetchIcon1 = () => 'https://placeholder.pics/svg/100/7DC4FF/Test%20Icon'
-const fetchIcon2 = () => 'https://placeholder.pics/svg/100/FF0202/Test%20Icon'
+import {placeholder100, placeholder100Red} from 'docs/placeholders/img';
+const fetchIcon1 = () => placeholder100
+
+const fetchIcon2 = () => placeholder100Red
 
 const handleSwitch = () => {
   const newFetchIcon = state.fetchIcon.name === 'fetchIcon1' ? fetchIcon2 : fetchIcon1
@@ -60,7 +62,8 @@ You can provide an `<Icon />` `icon` props to fallback when the AppIcon fetched
 
 ```jsx
 import AppIcon from 'cozy-ui/transpiled/react/AppIcon';
-const fetchIcon = () => 'https://placeholder.pics/svg/100/7DC4FF/Test%20Icon'
+import {placeholder100Red} from 'docs/placeholders/img'
+const fetchIcon = () => placeholder100Red
 const fetchIconBroken = () => 'blahblahblah'
 
 const brokeFetchIcon = () => setState({ fetchIcon: fetchIconBroken  })

diff --git a/react/IntentOpener/IntentExample.jsx b/react/IntentOpener/IntentExample.jsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import IntentWrapper from '../IntentWrapper'
+import { placeholder90 } from '../../docs/placeholders/img'
 
 const IntentExample = function({ onComplete, action, doctype, options }) {
   return (
     <IntentWrapper
-      appIcon={'https://via.placeholder.com/90'}
+      appIcon={placeholder90}
       appName="IntentExample"
       appEditor="EditorExample"
     >