@symbo.ls/preview 0.0.13 → 0.0.15

package/package.json

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

package/src/app.js

@@ -13,6 +13,7 @@ import {
   Export,
   Library
 } from './pages'
+import { Modal, openModal } from '@symbo.ls/components'
 
 const SUB_ROUTES = {}
 Object.keys(DesignSystem.routes).map(route => {
@@ -54,12 +55,15 @@ const App = {
     style: { position: 'relative' }
   },
 
+  Modal,
+
   on: {
     render: element => {
       const { pathname, hash } = window.location
       const url = pathname + hash
       router(element, url, {})
     },
+    update: (el, s) => openModal(el, s),
     scroll: (ev, el) => {
       const { scrollTop } = el.node
       const isFloating = scrollTop > 0

package/src/pages/Color/palette.js

@@ -6,7 +6,7 @@ const mapColors = (el, s) => {
   if (!el.context.SYSTEM) return
   const { COLOR } = el.context.SYSTEM
   const colorKeys = Object.keys(COLOR)
-  return colorKeys.map(v => COLOR[v])
+  return colorKeys.map(v => ({ key: v, ...COLOR[v] }))
 }
 
 export default {

package/src/pages/DesignSystem/index.js

@@ -13,18 +13,20 @@ import { PageExtend,
 
 const NAV = [{
   props: {
-    icon: 'typography outline',
-    href: '/typography'
+    icon: 'color outline colored',
+    href: '/colors'
   }
 }, {
   props: {
-    icon: 'color outline colored',
-    href: '/colors'
+    icon: 'typography outline',
+    href: '/typography',
+    opacity: '.7'
   }
 }, {
   props: {
     icon: 'space outline',
-    href: '/space'
+    href: '/space',
+    opacity: '.7'
   }
 }, {
   props: {
@@ -47,7 +49,8 @@ const NAV = [{
 }, {
   props: {
     icon: 'device mobile half fill',
-    href: '/responsive'
+    href: '/responsive',
+    opacity: '.7'
   }
 }, {
   props: {

package/src/pages/Typography/index.js

@@ -1,11 +1,11 @@
 'use strict'
 
-import { SectionHeader } from '@symbo.ls/components'
+import { SectionHeader } from '@symbo.ls/components' // eslint-disable-line no-unused-vars
 
 import state from './state'
 
 import documentStyle from './docStyles'
-import typeScale from './typeScale'
+import { TypeScale } from './typeScale'
 
 export const Typography = {
   define: { routes: param => param },
@@ -13,26 +13,15 @@ export const Typography = {
   state,
 
   routes: {
-    '/': typeScale,
+    '/': TypeScale,
     '/document-styles': documentStyle
   },
 
-  header: {
-    extend: SectionHeader
-  },
+  // header: {
+  //   extend: SectionHeader
+  // },
 
   page: {
-    content: (el, s) => {
-      const content = el.parent?.routes['/' + s.activeTab]
-      return { extend: content }
-    }
-  },
-
-  on: {
-    init: (el, s) => {
-      const route = window.location.pathname
-      const routes = route.slice(1).split('/')
-      s.activeTab = routes[1] || state.activeTab
-    }
+    TypeScale
   }
 }

package/src/pages/Typography/state.js

@@ -1,13 +1,15 @@
 'use strict'
 
 export default {
-  base: 14,
-  ratio: 1.125,
-  scales: {},
-  range: [-3, +10],
+  base: 16,
+  ratio: 1.2,
+  range: [-3, +8],
   h1Matches: +6,
+  scales: {},
   sequence: {},
-  type: 'font-size',
+  vars: {},
+  // subSequence: true,
+  type: 'demo-font-size',
 
   title: 'Typography',
   p: 'A general configuration of type properties on the document.',

package/src/pages/Typography/typeScale.js

@@ -1,101 +1,90 @@
 'use strict'
 
 import {
-  Flex, Block, Text, Grid,
-  SequenceGraph,
-  SliderToolWithCaption,
-  StaticSpacing,
-  PreviewSettings,
-  ScalesSequence,
-  CommonField
+  TypeScaleSequence,
+  SequenceSliders
 } from '@symbo.ls/components'
+import { mapSequence, sortSequence } from '@symbo.ls/utils'
 
 import { TypeSection } from './shared'
 
-const ScalingTools = {
-  extend: Flex,
+export const TypeScale = {
+  extend: TypeSection,
 
-  props: {
-    flow: 'column',
-    gap: 'A2'
+  header: {
+    state: {
+      title: 'TypeScale',
+      p: 'Generate text sequence by a base size and ratio'
+    }
   },
 
-  fontSize: {
-    extend: [SliderToolWithCaption],
-    caption: { text: 'Base size' },
-    element: {
-      style: {
-        maxWidth: `${232 / 16}em`
-      }
+  sliders: { extend: SequenceSliders },
+
+  p: {
+    extend: 'Paragraph',
+    props: {
+      margin: '0',
+      padding: 'B2 0',
+      text: `Base size and ratio will sequentially generate set by multiplying each next unit by the ratio.`
     }
   },
 
   sequence: {
-    extend: CommonField,
-    caption: { text: 'Sequence ratio' },
-    element: {
-      extend: StaticSpacing,
-      spacings: {
-        childExtend: {
-          on: {
-            click: (ev, el, s) => s.update({ ratio: el.value.text })
-          }
-        }
-      }
-    }
+    extend: TypeScaleSequence,
+    $setCollection: ({ state }) => mapSequence(state, sortSequence)
   }
 }
 
-export default {
-  extend: TypeSection,
+// export default {
+//   extend: TypeSection,
 
-  header: {
-    heading: {
-      p: { props: { text: 'Generate text sequence by a base size and ratio' } }
-    },
-    nav: {
-      add: { props: { icon: 'plus' } }
-    }
-  },
+//   header: {
+//     heading: {
+//       p: { props: { text: 'Generate text sequence by a base size and ratio' } }
+//     },
+//     nav: {
+//       add: { props: { icon: 'plus' } }
+//     }
+//   },
 
-  wrapper: {
-    textTest: '',
-    fonts: '',
-
-    cnt: {
-      extend: [Block, Grid],
-
-      props: {
-        gap: 'D',
-        columns: '16em auto'
-      },
-
-      aside: ScalingTools,
-
-      wrapper: {
-        settings: {
-          extend: PreviewSettings,
-          props: { margin: '0 0 B' }
-        },
-
-        fonts: ScalesSequence
-      },
-
-      sequenceSet: {
-        extend: CommonField,
-        props: { margin: 'C2 0' },
-        caption: {
-          extend: [Block, Text],
-          props: {
-            text: 'Sizing generated by this setting',
-            padding: '0 0 A 0'
-          }
-        },
-        element: {
-          extend: [SequenceGraph, Block, Text],
-          style: { '> span': { display: 'none' } }
-        }
-      }
-    }
-  }
-}
+//   wrapper: {
+//     textTest: '',
+//     fonts: '',
+
+//     cnt: {
+//       extend: [Block, Grid],
+
+//       props: {
+//         gap: 'D',
+//         columns: '16em auto'
+//       },
+
+//       aside: ScalingTools,
+
+//       wrapper: {
+//         settings: {
+//           extend: PreviewSettings,
+//           props: { margin: '0 0 B' }
+//         },
+
+//         fonts: ScalesSequence
+//       },
+
+//       sequenceSet: {
+//         extend: CommonField,
+//         props: { margin: 'C2 0' },
+//         caption: {
+//           extend: [Block, Text],
+//           props: {
+//             text: 'Sizing generated by this setting',
+//             padding: '0 0 A 0'
+//           }
+//         },
+//         element: {
+//           extend: [SequenceGraph, Block, Text],
+//           style: { '> span': { display: 'none' } }
+//         }
+//       }
+//     }
+//   }
+// }