add font preview

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/index.tsx

@@ -22,7 +22,7 @@ export const FontPicker = ({
     const manager = new FontManager(
       apiKey,
       activeFontFamily,
-      { ...OPTIONS_DEFAULTS, limit: 800 },
+      { ...OPTIONS_DEFAULTS, limit: 200 },
       onChange
     );
     setFontManager(manager);

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/ExternalFonts/index.js

@@ -9,16 +9,22 @@ const getFamily = search => {
   const hashes = search.slice(search.indexOf('?') + 1).split('&');
   const family = hashes
     .find(hash => hash.split('=')[0] === 'family')
-    .split('=')[1]
-    .split('+')
-    .join(' ');
+    .split('=')[1];
 
-  return family;
+  return {
+    name: family.split('+').join(' '),
+    id: family
+      .split('+')
+      .join('-')
+      .toLowerCase(),
+  };
 };
 
 const ExternalResource = ({ removeResource, resource }) => (
   <EntryContainer>
-    <Link href={resource}>{getFamily(resource)}</Link>
+    <Link id={`font-button-${getFamily(resource).id}`} href={resource}>
+      {getFamily(resource).name}
+    </Link>
     <IconArea>
       <Icon onClick={() => removeResource(resource)}>
         <CrossIcon />