@symbo.ls/preview 0.0.40 → 0.0.41

package/package.json

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

package/src/pages/DesignSystem/index.js

@@ -43,11 +43,6 @@ const NAV = [{
       icon: 'icons colored'
     }
   }
-}, {
-  props: {
-    icon: 'fontFace colored',
-    href: '/fonts'
-  }
 }, {
   props: {
     icon: 'device mobile half fill',
@@ -81,7 +76,6 @@ export const DesignSystem = {
     '/colors': Color,
     '/theme': Theme,
     '/typography': Typography,
-    '/fonts': Fonts,
     '/space': Spaces,
     '/shape': Shapes,
     '/icons': Icons,

package/src/pages/Typography/documentStyles.js

@@ -9,7 +9,6 @@ import {
   SequenceSliders,
   DeviceButtonSet
 } from '@symbo.ls/components'
-import stylesHelpers from './stylesHelpers'
 
 import { HTML_TAGS } from '@domql/tags' // eslint-disable-line no-unused-vars
 
@@ -224,10 +223,6 @@ export default {
     }
   },
 
-  Line: {},
-
-  stylesHelpers,
-
   on: {
     init: (el, s) => {
       if (!el.context.SYSTEM) return

package/src/pages/Typography/fontFaces.js

@@ -0,0 +1,50 @@
+'use strict'
+
+import { Grid, Hoverable, FontObject } from '@symbo.ls/components'
+import { TypeSection } from './shared'
+
+const mapFonts = (el, s) => {
+  if (!el.context.SYSTEM) return
+  const { FONT } = el.context.SYSTEM
+  const fontKeys = Object.keys(FONT)
+
+  return fontKeys.map(v => {
+    const font = FONT[v]
+    const weights = Object.keys(font)
+    const weightsLength = weights.length
+    const fontWeightCaption = weights[0] === 'variable' ? 'variable' : `${weightsLength} style${weightsLength > 1 ? 's' : ''}`
+
+    return {
+      title: v,
+      href: `/fonts/font-settings/${v}`,
+      labels: [
+        { icon: 'fontVariable', text: fontWeightCaption }
+      ]
+    }
+  })
+}
+
+export default {
+  extend: TypeSection,
+  header: {
+    state: {
+      title: 'Document Fonts',
+      p: 'Document @font-face, default and backup fonts',
+      nav: [{
+        icon: 'plus',
+        href: '/fonts/upload-font'
+      }]
+    }
+  },
+
+  content: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(2, 1fr)',
+      gap: 'A',
+      margin: '0 -Z'
+    },
+    childExtend: [FontObject, Hoverable],
+    $setStateCollection: mapFonts
+  }
+}

package/src/pages/Typography/fontFamilies.js

@@ -0,0 +1,45 @@
+'use strict'
+
+import { Grid, Hoverable, FontFamilyObject } from '@symbo.ls/components'
+import { TypeSection } from './shared'
+
+const mapFontFamilies = (el, s) => {
+  if (!el.context.SYSTEM) return
+  const { FONT_FAMILY } = el.context.SYSTEM
+  const fontFamilyKeys = Object.keys(FONT_FAMILY)
+
+  return fontFamilyKeys.map(v => {
+    const val = FONT_FAMILY[v]
+    if (v === 'default') return
+    return {
+      title: v,
+      href: `/fonts/font-family/${v}`,
+      val
+    }
+  }).filter(v => v)
+}
+
+export default {
+  extend: TypeSection,
+  header: {
+    state: {
+      title: 'Font Families',
+      p: 'Setup a set and fallback fonts as font families',
+      nav: [{
+        icon: 'plus',
+        href: '/fonts/add-font-family'
+      }]
+    }
+  },
+  content: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(4, 1fr)',
+      gap: 'A',
+      margin: '0 -Z'
+    },
+
+    childExtend: [FontFamilyObject, Hoverable],
+    $setStateCollection: mapFontFamilies
+  }
+}

package/src/pages/Typography/index.js

@@ -2,8 +2,12 @@
 
 import state from './state'
 
+import fontFaces from './fontFaces'
 import typeScale from './typeScale'
+import fontFamilies from './fontFamilies'
 import documentStyles from './documentStyles'
+import stylesHelpers from './stylesHelpers'
+import { mapSequence, sortSequence } from '@symbo.ls/components'
 
 export const Typography = {
   state,
@@ -13,7 +17,25 @@ export const Typography = {
     p: 'A general configuration of type properties on the document.'
   },
 
+  line: { extend: 'Line' },
+
+  documentStyles,
+  line1: { extend: 'Line' },
+
+  stylesHelpers,
+  line2: { extend: 'Line' },
+
+  fontFaces,
+  line3: { extend: 'Line' },
+
+  fontFamilies,
+  line4: { extend: 'Line' },
+
   typeScale,
-  Line: {},
-  documentStyles
+
+  on: {
+    init: (el, s) => {
+      mapSequence(s, sortSequence)
+    }
+  }
 }

package/src/pages/Typography/stylesHelpers.js

@@ -5,6 +5,7 @@ import {
   SectionHeader,
   TypeHelperObject
 } from '@symbo.ls/components'
+import { findHeadingLetter, getFontFamily } from '@symbo.ls/scratch'
 
 export default {
   header: {
@@ -23,32 +24,39 @@ export default {
     extend: Grid,
     props: { columns: 'repeat(3, 1fr)' },
 
-    childProto: TypeHelperObject,
+    childExtend: TypeHelperObject,
 
-    $setStateCollection: () => [{
-      p: {
-        text: 'Headline',
-        style: { fontSize: `${48 / 16}em` }
-      }
-    }, {
-      p: {
-        text: 'Headline 2',
-        style: { fontSize: `${40 / 16}em` }
+    $setStateCollection: (el) => {
+      const { state, context } = el // eslint-disable-line no-unused-vars
+      const { TYPOGRAPHY, FONT_FAMILY } = context.SYSTEM
+      const { styles } = TYPOGRAPHY
+      el.removeContent()
 
-      }
-    }, {
-      p: '',
-      span: {
-        props: {
-          fontSize: 'Y',
-          padding: 'B 0 0 0'
+      const family = FONT_FAMILY[FONT_FAMILY.default]
+      const familyValue = getFontFamily()
+      const lineHeight = TYPOGRAPHY.lineHeight
+      const font = family.arr[0]
+
+      const HELPERS = Object.keys(styles).filter(v => v.slice(0, 1) === '.')
+      console.log(HELPERS)
+      return HELPERS.map((v, k) => ({
+        key: v,
+        value: {
+          font,
+          fontFamily: familyValue,
+          fontWeight: 900 - (k * 100),
+          lineHeight,
+          ...styles[v]
         },
-        text: 'Fontnote'
-      }
-      // p: {
-      //   text: 'Footnote',
-      //   style: { fontSize: `${12 / 16}em` }
-      // }
-    }]
+        labels: [
+          { icon: 'fontFace', text: font },
+          { icon: 'fontVariable', text: 900 - (k * 100) },
+          { icon: 'textLineHeight', text: lineHeight }
+        ],
+        sequenceValue: state.sequence[
+          findHeadingLetter(state.h1Matches, k)
+        ]
+      }))
+    }
   }
 }

package/src/state.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import SYMBOLS_CONF from '@symbo.ls/config'
 import SYSTEM from './config'
 import { LIBRARY, COMPONENTS } from '../.symbols'
 
@@ -8,6 +9,7 @@ export const state = {
 }
 
 export const context = {
+  CONFIG: SYMBOLS_CONF,
   LIBRARY,
   SYSTEM,
   COMPONENTS