@symbo.ls/preview 0.0.85 → 0.0.86

package/package.json

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

package/src/components/Aside.js

@@ -9,6 +9,7 @@ export const NavbarButton = {
   props: ({ state }) => ({
     href: state.href,
     active: window.location.pathname.includes(state.href),
+    isActive: window.location.pathname.includes(state.href),
     theme: null,
     position: 'relative',
     style: {
@@ -18,7 +19,30 @@ export const NavbarButton = {
         }
       }
     }
-  }),
+  })
+
+}
+
+export const DesignSystemNavbar = {
+  tag: 'aside',
+
+  props: {
+    position: 'sticky',
+    top: 'E',
+
+    nav: {
+      gap: 'B1',
+      flow: 'column',
+      background: 'transparent',
+      color: 'gray7',
+      fontSize: 'A2'
+    }
+  },
+
+  nav: {
+    extend: Flex,
+    childExtend: NavbarButton
+  },
 
   Tooltip: ({ state }) => ({
     background: 'gray0 .95',
@@ -44,10 +68,3 @@ export const NavbarButton = {
     p: { text: null }
   })
 }
-
-export const DesignSystemNavbar = {
-  tag: 'nav',
-  extend: Flex,
-
-  childExtend: NavbarButton
-}

package/src/components/SlidersWithResponsive.js

@@ -19,5 +19,5 @@ export const SlidersWithResponsive = {
   },
 
   SequenceSliders: {},
-  DeviceButtonSet: {}
+  ResponsiveToolBar: {}
 }

package/src/components/SpacingPropButton/dropdown.js

@@ -28,7 +28,7 @@ const ButtonInDropdown = {
     const keyLength = Object.keys(activeProperty).length
     const iconKey = diffIconTypes(propValue, directionValue)
 
-    const active = table.props[propValue] === row && row.key
+    const active = table.props[propValue] === (row && row.key)
 
     const gridArea = keyLength > 3 && diffPropPosition(propValue, directionValue)
 

package/src/components/SpacingPropButton/index.js

@@ -79,7 +79,7 @@ const DotForPropButton = {
     const property = direction.parent
 
     const propKey = diffPropValue(property.value, direction.value)
-    const active = table.props[propKey] === row && row.key
+    const active = table.props[propKey] === (row && row.key)
 
     const isRadius = property.value === 'borderRadius'
 
@@ -116,7 +116,7 @@ export const SpacingPropButton = {
   props: (element) => {
     const { table, row, property } = getStateTree(element)
     const propValue = property.value
-    const active = table.props[propValue] === row && row.key
+    const active = table.props[propValue] === (row && row.key)
     return {
       active,
       lazyLoad: true,

package/src/{pages/Spaces/Table.js → components/SpacingTable.js}

@@ -7,7 +7,7 @@ import {
   sortSequence
 } from '@symbo.ls/components'
 
-import buttons from './buttons'
+import buttons from '../pages/Spaces/buttons'
 
 const Cell = {
   tag: 'div',
@@ -72,6 +72,7 @@ const Row = {
     },
     graph: {
       margin: '0 0 0 -B2',
+      maxWidth: '1px',
       line: {
         isBase: state.index === 0,
         widthRange: `${state.val}px` || 0,
@@ -152,7 +153,7 @@ const HeaderRow = {
   overlay: null
 }
 
-export const Table = {
+export const SpacingTable = {
   extend: Pseudo,
   tag: 'section',
 

package/src/components/index.js

@@ -22,3 +22,4 @@ export * from './DesignComponent'
 export * from './ColumnParagrphs'
 export * from './SpacingPropButton'
 export * from './UploadImage'
+export * from './SpacingTable'

package/src/pages/DesignSystem/Dashboard/designElements.js

@@ -1,3 +1,4 @@
+'use strict'
 
 import { Flex, DesignElement } from '@symbo.ls/components'
 

package/src/pages/DesignSystem/Dashboard/index.js

@@ -1,16 +1,22 @@
 'use strict'
 
-import banners from './banners'
+import { Flex } from '@symbo.ls/components'
+
+import banners from './banners' // eslint-disable-line no-unused-vars
 import summary from './summary'
 import quickstart from './quickstart'
 
 export const DesignSystemDashboard = {
+  extend: Flex,
+
+  props: { flow: 'column', gap: 'C1' },
+
   ArticleBig: {
     title: { text: 'Design System' },
     p: { text: 'Create your Design System guidelines' }
   },
 
-  banners,
+  // banners,
   summary,
   quickstart
 }

package/src/pages/DesignSystem/Dashboard/quickstart.js

@@ -18,10 +18,6 @@ const startElementProps = {
 }
 
 export default {
-  props: {
-    margin: 'C1 - E1'
-  },
-
   SectionHeader: {
     margin: '- - B2',
     title: 'Setting up locally',

package/src/pages/DesignSystem/Dashboard/summary.js

@@ -7,12 +7,7 @@ import state from './state'
 
 export const content = {
   props: {
-    // columns: `repeat(6, 1fr)`,
-    // rows: 'repeat(2, 1fr)',
-    // autoFlow: 'dense',
-    // justifyItems: 'flex-start',
-    // autoColumns: 'auto',
-    // autoRows: 'auto',
+    margin: '- -Z',
     columns: '15rem',
     gap: 'B1'
   },
@@ -30,10 +25,13 @@ export const content = {
 }
 
 export default {
+  props: {
+    margin: '- - C1'
+  },
+
   state,
 
   SectionHeader: {
-    margin: '- - C1',
     title: 'Design System takeaways',
     p: 'Your tokens in the system at a glance'
   },

package/src/pages/DesignSystem/index.js

@@ -64,7 +64,7 @@ const NAV = [{
   },
   props: {
     icon: { name: 'icons outline colored' },
-    '.active': {
+    '.isActive': {
       icon: { name: 'icons colored' }
     }
   }
@@ -86,22 +86,22 @@ const NAV = [{
     icon: { name: 'fontFace colored' },
     opacity: '.7'
   }
-// }, {
-//   state: {
-//     href: '/timing',
-//     tooltip: 'Timing'
-//   },
-//   props: {
-//     icon: { name: 'clock colored' }
-//   }
-// }, {
-//   state: {
-//     href: '/sequence',
-//     tooltip: 'Sequence'
-//   },
-//   props: {
-//     icon: { name: 'sequence colored' }
-//   }
+}, {
+  state: {
+    href: '/timing',
+    tooltip: 'Timing'
+  },
+  props: {
+    icon: { name: 'clock colored' }
+  }
+}, {
+  state: {
+    href: '/sequence',
+    tooltip: 'Sequence'
+  },
+  props: {
+    icon: { name: 'sequence colored' }
+  }
 }]
 
 export const DesignSystem = {
@@ -124,18 +124,7 @@ export const DesignSystem = {
       gap: 'B1',
       padding: 'D2 A C1',
 
-      DesignSystemNavbar: {
-        gap: 'B1',
-        flow: 'column',
-        background: 'transparent',
-        color: 'gray7',
-        fontSize: 'A2',
-        position: 'sticky',
-        top: 'E'
-      },
-
       Page: {
-        // transform: 'translate3d(-3.235%, 0, 0)',
         padding: 'X2 C1 B1',
         flex: 1
       }
@@ -152,7 +141,6 @@ export const DesignSystem = {
 
   define: { routes: param => param },
   routes: {
-    // '/': DesignSystemDashboard,
     '/design-system': DesignSystemDashboard,
     '/colors': Color,
     '/theme': Theme,
@@ -169,7 +157,10 @@ export const DesignSystem = {
   page: {
     extend: Flex,
 
-    DesignSystemNavbar: { extend: true, ...NAV },
+    DesignSystemNavbar: {
+      extend: true,
+      nav: { ...NAV }
+    },
     Page: { extend: Page }
   },
 

package/src/pages/Spaces/index.js

@@ -27,12 +27,11 @@ export const Spaces = {
       }
     },
     stateUpdated: (el, s, changes) => {
-      s.systemUpdate({ 
-        SPACING: { base: s.base, ratio: s.ratio } 
+      s.systemUpdate({
+        SPACING: { base: s.base, ratio: s.ratio }
       }, {
         preventUpdate: true
       })
     }
   }
 }
-  

package/src/pages/Spaces/sequence.js

@@ -1,7 +1,6 @@
 'use strict'
 
 import { Flex } from '@symbo.ls/components'
-import { Table } from './Table'
 
 export default {
   extend: [Flex],
@@ -18,8 +17,7 @@ export default {
     margin: '0'
   },
 
-  scale: {
-    extend: Flex,
+  Flex: {
     props: {
       lazyLoad: true,
       flow: 'column',
@@ -29,6 +27,6 @@ export default {
       preview: { flex: 1 }
     },
 
-    table: { extend: Table }
+    SpacingTable: {}
   }
 }

package/src/pages/Typography/typeScale.js

@@ -4,6 +4,7 @@ import {
   TypeScaleSequence,
   TestText,
   Flex,
+  Grid,
   mapSequence,
   sortSequence
 } from '@symbo.ls/components'
@@ -11,11 +12,11 @@ import {
 import { range0Buttons, range1Buttons } from './rangeButtons'
 
 export default {
-  extend: Flex,
+  extend: Grid,
 
   props: {
     gap: 'D',
-    align: 'flex-start flex-start',
+    templateColumns: 'var(--spacing-F2) 1fr',
 
     sidebar: {
       padding: 'B 0 0',