@symbo.ls/preview 0.0.14 → 0.0.16

package/.symbols/button-pro/index.js

@@ -20,6 +20,7 @@ const component = {
     padding: ['X1', 'X1', 'X1', 'A'],
     size: 'A',
     gap: 'Z',
+    fontWeight: 'bold',
 
     iconText: {
       gap: 'X1',
@@ -28,7 +29,7 @@ const component = {
       alignItems: 'center'
     },
 
-    label: {
+    child: {
       round: 12,
       theme: ['lightDark', 'inverse'],
       size: 'Z',
@@ -37,14 +38,8 @@ const component = {
     }
   },
 
-  iconText: {
-
-    props: el => el.parent.props.iconText
-  },
-
-  child: {
-    props: el => el.parent.props.label
-  }
+  iconText: {},
+  child: {}
 }
 
 const code = `{

package/.symbols/button-pro/style.js

@@ -1,19 +1,4 @@
 'use strict'
 
 export default {
-  color: '#241C39',
-  fontWeight: 'bold',
-
-  '> svg': {
-    borderRadius: '100%',
-    padding: '.2em',
-    background: '#241C39',
-    color: 'white',
-    marginRight: `${6 / 16}em`
-  },
-
-  span: {
-    alignItems: 'center',
-    marginLeft: '8px'
-  }
 }

package/.symbols/button-theme-switcher/index.js

@@ -4,6 +4,7 @@ import { CATEGORIES } from '../categories'
 
 import style from './style'
 import { KangorooButton } from '@symbo.ls/components'
+import { isObject } from 'domql/src/utils'
 
 const key = 'button-theme-switcher'
 const title = 'Theme Switcher'
@@ -27,7 +28,7 @@ const component = {
       text: 'Light Mode'
     },
 
-    dark: {
+    child: {
       theme: ['lightDark', 'inverse'],
       round: 'C',
       icon: 'moon',
@@ -36,16 +37,18 @@ const component = {
     }
   },
 
-  iconText: {
-    props: el => el.parent.props.light
-  },
+  iconText: {},
+  child: {}
+}
 
-  child: {
-    props: el => el.parent.props.dark
-  }
+function strfy (obj) {
+  return Object.entries(obj).reduce((str, [p, val]) => {
+    return `${str}${p}::${isObject(val) ? strfy(val) : val}\n`;
+  }, '');
 }
 
-const code = `{
+const code = strfy(component)
+const code2 = `{
   extend: KangorooButton,
   props: {
     round: 'C',
@@ -77,7 +80,7 @@ const props = {
     text: 'Light Mode'
   },
 
-  dark: {
+  child: {
     theme: ['lightDark', 'inverse'],
     round: 'C',
     icon: 'moon',

package/package.json

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

package/src/pages/DesignSystem/index.js

@@ -13,19 +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',
-    opacity: '.55'
+    opacity: '.7'
   }
 }, {
   props: {
@@ -42,14 +43,14 @@ const NAV = [{
   }
 }, {
   props: {
-    icon: 'typeface colored',
+    icon: 'fontFace colored',
     href: '/fonts'
   }
 }, {
   props: {
     icon: 'device mobile half fill',
     href: '/responsive',
-    opacity: '.55'
+    opacity: '.7'
   }
 }, {
   props: {

package/src/pages/Icons/index.js

@@ -2,16 +2,27 @@
 
 import { copyStringToClipboard } from '@symbo.ls/utils'
 
-import * as sprite from '@symbo.ls/icons'
-import { IconText, ClickableItem, SectionHeader, Grid } from '@symbo.ls/components'
+import { IconText, Flex, Link, ClickableItem, SectionHeader, Grid } from '@symbo.ls/components'
+
+import * as ACCESSIBILITY from '@symbo.ls/icons/src/accessibility'
+import * as BOXSIZE from '@symbo.ls/icons/src/boxSize'
+import * as DISPLAY from '@symbo.ls/icons/src/display'
+import * as INTERACTIVE from '@symbo.ls/icons/src/interactive'
+import * as LOGOS from '@symbo.ls/icons/src/logos'
+import * as SIGNS from '@symbo.ls/icons/src/signs'
+import * as STYLE from '@symbo.ls/icons/src/style'
+import * as SVG from '@symbo.ls/icons/src/svg'
+import * as TECH from '@symbo.ls/icons/src/tech'
+import * as TEXT from '@symbo.ls/icons/src/text'
 
 const IconItem = {
-  extend: [ClickableItem, IconText],
+  extend: [ClickableItem, Link, IconText],
   props: ({ state }) => ({
     round: 'A',
     size: 'D',
     aspectRatio: '1 / 1',
     flexAlign: 'center center',
+    href: '/icons/edit-icon/' + state.name,
     icon: {
       fontSize: 'C2',
       name: state.name
@@ -25,17 +36,12 @@ const IconItem = {
 }
 
 const IconsGroup = {
-  state: {
-    toggleShow: true
-  },
+  state: { toggleShow: true },
 
-  header: {
-    extend: SectionHeader
-  },
+  header: { extend: SectionHeader },
 
   iconSet: {
     extend: Grid,
-
     props: ({ state }) => ({
       hide: !state.toggleShow,
       columns: 'repeat(12, 1fr)',
@@ -57,15 +63,48 @@ const ICON_GROUPS = [{
   p: 'All ungrouped document icons',
 
   nav: [{
-    icon: 'upload outline',
-    href: '/icons/upload-icon'
+    icon: 'plus',
+    href: '/icons/add-icon'
   }],
 
-  list: Object.keys(sprite).map(name => ({ name }))
+  list: Object.keys(SVG).map(name => ({ name }))
+}, {
+  title: 'Accessibility',
+  list: Object.keys(ACCESSIBILITY).map(name => ({ name }))
+}, {
+  title: 'Boxsize',
+  list: Object.keys(BOXSIZE).map(name => ({ name }))
+}, {
+  title: 'Display',
+  list: Object.keys(DISPLAY).map(name => ({ name }))
+}, {
+  title: 'Interactive',
+  list: Object.keys(INTERACTIVE).map(name => ({ name }))
+}, {
+  title: 'Logos',
+  list: Object.keys(LOGOS).map(name => ({ name }))
+}, {
+  title: 'Signs',
+  list: Object.keys(SIGNS).map(name => ({ name }))
+}, {
+  title: 'Style',
+  list: Object.keys(STYLE).map(name => ({ name }))
+}, {
+  title: 'Tech',
+  list: Object.keys(TECH).map(name => ({ name }))
+}, {
+  title: 'Text',
+  list: Object.keys(TEXT).map(name => ({ name }))
 }]
 
 export const Icons = {
   tag: 'section',
+  extend: Flex,
+
+  props: {
+    flow: 'column',
+    gap: 'D1'
+  },
 
   childExtend: IconsGroup,
   $setCollection: () => ICON_GROUPS

package/src/pages/Typography/rangeButtons.js

@@ -0,0 +1,59 @@
+'use strict'
+
+import { IncDecButtons } from '@symbo.ls/components'
+
+export const Range0Buttons = {
+  extend: IncDecButtons,
+
+  ...[{
+    on: {
+      click: (ev, el) => {
+        const { state } = el
+        const { range } = state
+        if (range[0] + 1 < 0) {
+          ++range[0]
+          state.update()
+        }
+        console.log(range)
+      }
+    }
+  }, {
+    on: {
+      click: (ev, el) => {
+        const { state } = el
+        const { range } = state
+        if (range[0] - 1 > -6) {
+          --range[0]
+          state.update()
+        }
+      }
+    }
+  }]
+}
+
+export const Range1Buttons = {
+  extend: IncDecButtons,
+  ...[{
+    on: {
+      click: (ev, el) => {
+        const { state } = el
+        const { range } = state
+        if (range[1] - 1 > 5) {
+          --range[1]
+          state.update()
+        }
+      }
+    }
+  }, {
+    on: {
+      click: (ev, el) => {
+        const { state } = el
+        const { range } = state
+        if (range[1] + 1 < 21) {
+          ++range[1]
+          state.update()
+        }
+      }
+    }
+  }]
+}

package/src/pages/Typography/typeScale.js

@@ -2,11 +2,16 @@
 
 import {
   TypeScaleSequence,
-  SequenceSliders
+  SequenceSliders,
+  Grid,
+  Flex,
+  TestText
 } from '@symbo.ls/components'
+
 import { mapSequence, sortSequence } from '@symbo.ls/utils'
 
 import { TypeSection } from './shared'
+import { Range0Buttons, Range1Buttons } from './rangeButtons'
 
 export const TypeScale = {
   extend: TypeSection,
@@ -18,73 +23,75 @@ export const TypeScale = {
     }
   },
 
-  sliders: { extend: SequenceSliders },
+  grid: {
+    extend: Grid,
 
-  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.`
+      gap: 'D',
+      columns: '16em auto',
+      align: 'flex-start flex-start',
+
+      sidebar: {
+        padding: 'B 0 0',
+        position: 'sticky',
+        top: 'E2'
+      },
+
+      content: {
+        overflow: 'hidden',
+        flow: 'column',
+        gap: 'C',
+
+        header: {
+          align: 'flex-end space-between',
+          padding: '0 0 0 C',
+          gap: 'C1'
+        },
+
+        footer: {
+          padding: '0 0 0 C'
+        }
+      }
+    },
+
+    sidebar: {
+      sliders: {
+        extend: SequenceSliders,
+        props: { flow: 'column' }
+      },
+
+      p: {
+        extend: 'Paragraph',
+        props: {
+          margin: '0',
+          fontSize: 'Z2',
+          padding: 'B2 0',
+          text: `Base size and ratio sequentially generate set by multiplying each next calculated unit by the ratio.`
+        }
+      }
+    },
+
+    content: {
+      extend: Flex,
+
+      header: {
+        extend: Flex,
+        Range0Buttons,
+        TestText
+      },
+
+      sequence: {
+        extend: TypeScaleSequence,
+        $setCollection: (el) => {
+          const { state } = el
+          el.removeContent()
+          return mapSequence(state, sortSequence)
+        }
+      },
+
+      footer: {
+        Range1Buttons
+      }
     }
-  },
-
-  sequence: {
-    extend: TypeScaleSequence,
-    $setCollection: ({ state }) => mapSequence(state, sortSequence)
   }
 }
-
-// export default {
-//   extend: TypeSection,
-
-//   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' } }
-//         }
-//       }
-//     }
-//   }
-// }

package/svgSprite.config.js

@@ -3,5 +3,6 @@ const path = require('path')
 module.exports = {
   getSymbolId: (filePath, fileContent, fileHash) => {
     return path.basename(filePath, '.svg')
-  }
+  },
+  exclude: ['**/components/**', '**/Modals/**']
 }