feat: properly register svg-animations to the editor

boltdesignsystem · Sep 5, 2019 · b1e242a · b1e242a
1 parent 32c3c08
commit b1e242a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/packages/components/bolt-svg-animations/svg-animations.schema.js b/packages/components/bolt-svg-animations/svg-animations.schema.js
@@ -5,12 +5,12 @@ module.exports = {
     speed: {
       type: 'string',
       description: 'Speed of the animation, typically rotation.',
-      default: '1000',
+      default: '4000',
     },
     animType: {
       type: 'string',
       description: 'Type of predefined animated SVG to use.',
-      enum: ['connectionBand'],
+      enum: ['connectionBand', 'orbit', 'radar', 'automation'],
       default: 'connectionBand',
     },
     direction: {

diff --git a/packages/editor/src/setup-bolt.js b/packages/editor/src/setup-bolt.js
@@ -7,6 +7,7 @@ import iconSchema from '@bolt/components-icon/icon.schema.json';
 import characterSchema from '@bolt/micro-journeys/src/character.schema';
 import connectionSchema from '@bolt/micro-journeys/src/connection.schema';
 import statusDialogueBarSchema from '@bolt/micro-journeys/src/status-dialogue-bar.schema';
+import svgAnimationsSchema from '@bolt/components-svg-animations/svg-animations.schema';
 // @ts-ignore
 import blockquoteSchema from '@bolt/components-blockquote/blockquote.schema.yml';
 // @ts-ignore
@@ -20,6 +21,10 @@ import linkSchema from '../../components/bolt-link/link.schema.yml'; // @todo fi
 // import { animationNames } from '@bolt/components-animate/animation-meta';
 import { isChildOfEl, convertSchemaPropToTrait } from './utils';
 
+console.log('Hey super smart developer, you probably want this info -> ', {
+  svgAnimationsSchema
+});
+
 class EditorRegisterBoltError extends Error {}
 
 const smallButton = {
@@ -80,6 +85,12 @@ const link = {
   content: `<bolt-link display="inline" valign="start">I'm a link</bolt-link>`,
 };
 
+const svgAnimations = {
+  id: 'bolt-svg-animations',
+  title: 'Svg Animtions',
+  content: `<bolt-svg-animations anim-type="orbit"></bolt-svg-animations>`,
+};
+
 const basicSlottableComponents = [
   statusBar,
   statusBarAlert,
@@ -483,6 +494,7 @@ export function setupBolt(editor) {
       left: true,
       right: true,
       bottom: true,
+      background: true,
     },
     slotControls: [
       ...['top', 'right', 'bottom', 'left'].map(slotName => ({
@@ -491,7 +503,7 @@ export function setupBolt(editor) {
       })),
       {
         slotName: 'background',
-        components: basicSlottableComponents,
+        components: [svgAnimations],
       },
     ],
   });
@@ -545,16 +557,9 @@ export function setupBolt(editor) {
   });
 
   registerBoltComponent({
-    name: 'bolt-link',
-    schema: linkSchema,
-    editable: true,
-    extend: 'link',
-    registerBlock: true,
-    draggable: true,
-    propsToTraits: ['display', 'valign', 'url', 'isHeadline'],
-    slots: {
-      default: true,
-    },
-    initialContent: [`I'm a link`],
+    name: 'bolt-svg-animations',
+    schema: svgAnimationsSchema,
+    registerBlock: false,
+    propsToTraits: ['animType', 'direction'],
   });
 }