@symbo.ls/preview 0.0.69 → 0.0.70

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

package/src/pages/Spaces/index.js

@@ -26,6 +26,7 @@ export const Spaces = {
     }
   },
   stateUpdated: (el, s, changes) => {
-    s.systemUpdate({ SPACING: changes }, { preventUpdate: true })
+    console.log(s)
+    s.systemUpdate({ SPACING: { base: s.base, ratio: s.ratio } }, { preventUpdate: true })
   }
 }

package/src/pages/Typography/documentStyles.js

@@ -37,35 +37,39 @@ export default {
     headings: {
       extend: DocumentStylesSequence,
 
-      $setStateCollection: (el) => {
-        const { state, context } = el // eslint-disable-line no-unused-vars
-        const { TYPOGRAPHY, FONT_FAMILY } = context.SYSTEM
-        const { styles } = TYPOGRAPHY
-        el.removeContent()
-
-        const family = FONT_FAMILY[FONT_FAMILY.default]
-        const familyValue = getFontFamily()
-        const lineHeight = TYPOGRAPHY.lineHeight
-        const font = family.arr[0]
-
+      $setStateCollection: (el, s) => {
+        const { __system } = s
+        const { TYPOGRAPHY, FONT_FAMILY } = __system
+        let { styles } = TYPOGRAPHY
+        if (!styles) styles = TYPOGRAPHY.styles = {}
+
+        const familyValue = getFontFamily('def', FONT_FAMILY)
+        const { lineHeight, fontWeight } = TYPOGRAPHY
+        const font = familyValue[0]
         const HEADINGS = new Array(6).fill(null).map((_, i) => 'h' + (i + 1))
 
+        el.removeContent()
+        const calcProp = (key, prop, defaultValue) => {
+          if (!styles[key]) styles[key] = {}
+          return styles[key][prop] || styles[prop] || defaultValue
+        }
+
         return HEADINGS.map((v, k) => ({
           key: v,
           value: {
             font,
-            fontFamily: familyValue,
-            fontWeight: 900 - (k * 100),
-            lineHeight,
-            ...styles[v]
+            fontFamily: calcProp(v, 'fontFamily', familyValue),
+            fontWeight: calcProp(v, 'fontWeight', fontWeight),
+            lineHeight: calcProp(v, 'lineHeight', lineHeight),
+            ...(styles ? styles[v] : {})
           },
           labels: [
             { icon: 'fontFace', text: font },
             { icon: 'fontVariable', text: 900 - (k * 100) },
             { icon: 'textLineHeight', text: lineHeight }
           ],
-          sequenceValue: state.sequence[
-            findHeadingLetter(state.h1Matches, k)
+          sequenceValue: s.sequence[
+            findHeadingLetter(s.h1Matches, k)
           ]
         }))
       }
@@ -73,52 +77,52 @@ export default {
 
     doc: {
       extend: DocumentStylesSequence,
-      $setStateCollection: (el) => {
-        const { state, context } = el // eslint-disable-line no-unused-vars
-        const { DOCUMENT, FONT_FAMILY } = context.SYSTEM
-        el.removeContent()
+      $setStateCollection: (el, s) => {
+        const { __system } = s
+        const { FONT_FAMILY, TYPOGRAPHY } = __system
+        const { styles, lineHeight, fontWeight } = TYPOGRAPHY
+        if (!styles.body) styles.body = {}
 
-        const family = FONT_FAMILY[FONT_FAMILY.default]
-        const familyValue = getFontFamily()
-        const font = family.arr[0]
-        const { fontWeight, lineHeight } = DOCUMENT
+        const familyValue = getFontFamily('def', FONT_FAMILY)
+        const font = familyValue[0]
 
+        el.removeContent()
         return [{
           key: 'body',
           value: {
-            font,
-            fontFamily: familyValue,
-            fontWeight: fontWeight || 400,
-            lineHeight
+            fontFamily: styles ? styles['body'].fontFamily || styles.fontFamily : familyValue,
+            fontWeight: styles ? styles['body'].fontWeight || styles.fontWeight : fontWeight,
+            lineHeight: styles ? styles['body'].lineHeight || styles.lineHeight : lineHeight,
+            ...(styles ? styles['body'] : {})
           },
           labels: [
             { icon: 'fontFace', text: font },
             { icon: 'fontVariable', text: fontWeight || 400 },
             { icon: 'textLineHeight', text: lineHeight }
           ],
-          sequenceValue: state.sequence['A']
+          sequenceValue: s.sequence['A']
         }]
       }
     },
 
     helpers: {
-      $setStateCollection: (el) => {
+      $setStateCollection: (el, s) => {
         const { state, context } = el // eslint-disable-line no-unused-vars
-        const { TYPOGRAPHY, FONT_FAMILY } = context.SYSTEM
-        const { styles } = TYPOGRAPHY
-        el.removeContent()
+        const { __system } = s
+        const { TYPOGRAPHY, FONT_FAMILY } = __system
+        const { styles, lineHeight, fontWeight } = TYPOGRAPHY
 
-        const family = FONT_FAMILY[FONT_FAMILY.default]
-        const familyValue = getFontFamily()
-        const lineHeight = TYPOGRAPHY.lineHeight
-        const font = family.arr[0]
+        const familyValue = getFontFamily('def', FONT_FAMILY)
+        const font = familyValue[0]
 
+        el.removeContent()
+        if (!styles) return
         return Object.keys(styles).filter(v => v.slice(0, 1) === '.').map((v, k) => ({
           key: v,
           value: {
             font,
             fontFamily: familyValue,
-            fontWeight: 900 - (k * 100),
+            fontWeight: styles[v].fontWeight || fontWeight,
             lineHeight,
             ...styles[v]
           },
@@ -214,14 +218,12 @@ export default {
   on: {
     init: (el, s) => {
       if (!s.__system) return
-      const { context } = el // eslint-disable-line no-unused-vars
-      const { TYPOGRAPHY } = context.SYSTEM
+      const { __system } = s
+      const { TYPOGRAPHY } = __system
       const { styles } = TYPOGRAPHY
       if (styles) {
-        s.update({
-          styles
-        }, { preventUpdate: true })
-      }
+        s.update({ styles }, { preventUpdate: true })
+      } else TYPOGRAPHY.styles = {}
     }
   }
 }

package/src/sync.js

@@ -17,6 +17,7 @@ export const Sync = {
     stateUpdated: (el, s, changes) => {
       if (changes.SYSTEM) {
         // init(changes.SYSTEM)
+        console.log(changes)
         send(changes.SYSTEM, s.SYSTEM)
       }
     }

package/user_data/4it.js

@@ -118,13 +118,17 @@ export const FONT = {
   }, {
     url: S3_BUCKET + AvenirHeavy,
     fontWeight: 900
-  }]
+  }],
+  AvenirVariable: {
+    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2729/AvenirNext_Variable.ttf',
+    isVariable: true
+  }
 }
 
 export const FONT_FAMILY = {
   Default: {
     isDefault: true,
-    value: ['"Avenir"'],
+    value: ['"AvenirVariable"', '"Avenir"'],
     type: 'serif'
   }
 }