@symbo.ls/preview 0.0.30 → 0.0.31

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

@@ -35,7 +35,7 @@ const code = `{
   }
 }`
 
-const defaultState = {}
+const state = {}
 const props = {
 }
 
@@ -50,7 +50,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: [],

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

@@ -39,7 +39,7 @@ const code = {
 }`
 }
 
-const defaultState = {}
+const state = {}
 const props = {
   text: '3'
 }
@@ -55,7 +55,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: ['click'],

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

@@ -21,7 +21,7 @@ const code = `{
   caption: 'View all Contacts'
 }`
 
-const defaultState = {}
+const state = {}
 const props = {
   round: 42,
   users: [{}, {}, {}],
@@ -39,7 +39,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
 
   props,
   settings,

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

@@ -5,19 +5,18 @@ import { CATEGORIES } from '../categories'
 import { Button } from '@symbo.ls/components'
 
 const key = 'button-download'
-const title = 'Download Button'
+const title = 'Call to Action Button'
 const description = ''
 const category = CATEGORIES[1]
 
 const component = {
   extend: Button,
   props: {
-    icon: 'arrowDown',
+    icon: 'arrow angle up',
     gap: 'X2',
-    theme: 'quinary',
-    text: 'Download',
+    theme: 'primary',
+    text: 'Call to Action',
     padding: 'Z2 B2',
-    border: '.2em, solid, blue .2',
     round: 'C'
   }
 }
@@ -25,14 +24,14 @@ const component = {
 const code = `{
   extend: Button,
   props: {
-    icon: 'arrowDown',
-    theme: 'quaternary',
-    text: 'Download',
+    icon: 'arrow angle up',
+    theme: 'primary',
+    text: 'Call to Action',
     round: 'C'
   }
 }`
 
-const defaultState = {}
+const state = {}
 const props = {
 }
 
@@ -47,7 +46,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
 
   props,
   settings,

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

@@ -76,7 +76,7 @@ const code = {
 }`
 }
 
-const defaultState = {}
+const state = {}
 const props = {
 }
 
@@ -91,7 +91,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
 
   props,
   settings,

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

@@ -71,7 +71,7 @@ const code = `{
   }
 }`
 
-const defaultState = {}
+const state = {}
 const props = {
   round: 'C',
   size: 'Z',
@@ -99,7 +99,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: [],

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

@@ -2,7 +2,7 @@
 
 import { CATEGORIES } from '../categories'
 
-import { Button, User } from '@symbo.ls/components'
+import { Button, User } from 'smbls'
 
 const key = 'button-user'
 const title = 'User Button'
@@ -17,19 +17,21 @@ const component = {
     size: 'A',
     round: 'C',
     depth: 16,
-    gap: 'Y2',
+    gap: 'Y',
     padding: 'W2 A W2 W2',
-    theme: 'tertiary',
+    theme: 'quaternary',
 
     position: 'relative',
     cursor: 'pointer',
 
     user: {
       boxSize: 'B1 B1',
+      pointerEvents: 'none'
     },
 
     select: {
       outline: 'none',
+      pointerEvents: 'all',
       appearance: 'none',
       border: 'none',
       width: '100%',
@@ -38,33 +40,31 @@ const component = {
       color: 'currentColor',
       fontSize: 'A',
       lineHeight: 1,
-      padding: '0 A 0 0'
+      margin: '0 0 0 -B1+X',
+      padding: '0 A 0 B1+X'
     },
   }),
 
   user: { extend: User },
   select: {
     attr: { name: 'user', id: 'user' },
-    childExtend: { tag: 'option' },
-    ...[
+    childExtend: { tag: 'option', text: ({ state }) => state.text },
+    $setCollection: () => [
       { text: 'Kevin' },
       { text: 'Jay' }
-    ]
+    ],
+    on: {
+      change: (ev, { parent }) => {
+        parent.user.update({ key: ev.target.value })
+      }
+    }
   }
 }
 
 const code = `{
-  round: 'C',
-  icon: 'arrowAngleDown',
-  name: 'user',
-  id: 'user',
-  options: [
-    { text: 'adam' },
-    { text: 'jora' }
-  ]
 }`
 
-const defaultState = {}
+const state = {}
 const props = {}
 
 const settings = {
@@ -78,7 +78,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: [],

package/.symbols/datepicker/index.js

@@ -32,7 +32,7 @@ const component = {
 
 const code = `{}`
 
-const defaultState = {}
+const state = {}
 const props = {
   style: {
     backdropFilter: 'blur(3px)',
@@ -50,7 +50,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: ['click', 'choose'],

package/.symbols/dropdown-list/index.js

@@ -9,26 +9,26 @@ const title = 'Dropdown List'
 const description = ''
 const category = CATEGORIES[5]
 
+const state = {}
+const props = {
+  theme: 'quaternary',
+  round: 'A'
+}
+
 const component = {
   extend: DropdownList,
-  props: {
-    theme: 'quaternary', round: 'A'
-  },
-
-  ...[
-    { span: { props: { text: 'Today' } } },
-    { span: { props: { text: 'Yesterday' } } },
-    { span: { props: { text: 'A week age' } } },
-    { span: { props: { text: 'A month ago' } } }
+  state,
+  props,
+
+  $setCollection: () => [
+    { span: { text: 'Today' } } ,
+    { span: { text: 'Yesterday' } } ,
+    { span: { text: 'A week age' } } ,
+    { span: { text: 'A month ago' } }
   ]
 }
 
 const code = `{}`
-
-const defaultState = {}
-const props = {
-  theme: 'quaternary'
-}
 const settings = {
   gridOptions: { colspan: 5, rowspan: 5 }
 }
@@ -40,7 +40,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: [],

package/.symbols/field/index.js

@@ -18,7 +18,7 @@ const component = {
 
 const code = `{}`
 
-const defaultState = {}
+const state = {}
 const props = {}
 
 const settings = {
@@ -32,7 +32,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: ['input'],

package/.symbols/index.js

@@ -25,6 +25,27 @@ const define = {
       gridOptions: { colspan: 3, rowspan: 2 }
     }
   },
+  ButtonTitle: {
+    props: {
+      iconBox: {
+        icon: { name: 'checkmark' }
+      },
+      title: {
+        text: 'screen'
+      }
+    },
+    settings: {
+      gridOptions: { colspan: 3, rowspan: 2 }
+    }
+  },
+  WiderButton: {
+    props: {
+      icon: { name: 'color outline' }
+    },
+    settings: {
+      gridOptions: { colspan: 3, rowspan: 2 }
+    }
+  },
   AccessibilityCheck: {
     settings: {
       gridOptions: { colspan: 8, rowspan: 2 }
@@ -35,6 +56,16 @@ const define = {
       gridOptions: { colspan: 5, rowspan: 2 }
     }
   },
+  TestText: {
+    settings: {
+      gridOptions: { colspan: 6, rowspan: 2 }
+    }
+  },
+  Platforms: {
+    settings: {
+      gridOptions: { colspan: 5, rowspan: 2 }
+    }
+  },
   DeviceButtonSet: {
     settings: {
       gridOptions: { colspan: 6, rowspan: 2 }
@@ -45,6 +76,11 @@ const define = {
       gridOptions: { colspan: 6, rowspan: 2 }
     }
   },
+  Search: {
+    settings: {
+      gridOptions: { colspan: 4 }
+    }
+  },
   CodePreview: {
     settings: {
       gridOptions: { colspan: 4, rowspan: 4 }

package/.symbols/label/index.js

@@ -24,7 +24,7 @@ const component = {
 
 const code = `{}`
 
-const defaultState = {}
+const state = {}
 const props = {}
 
 const settings = {
@@ -38,7 +38,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: [],

package/.symbols/notification/index.js

@@ -21,7 +21,7 @@ const code = `{
   }
 }`
 
-const defaultState = {}
+const state = {}
 const props = {
   theme: 'alert'
 }
@@ -37,7 +37,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: [],
@@ -51,7 +51,7 @@ export default {
 //   "category": ,
 //   "component": ,
 //   "code": ,
-//   "defaultState": ,
+//   "state": ,
 //   "props": ,
 //   "settings": ,
 //   "interactivity": [],

package/.symbols/pills/index.js

@@ -17,7 +17,7 @@ const component = {
 
 const code = `{}`
 
-const defaultState = {}
+const state = {}
 const props = {}
 
 const settings = {
@@ -31,7 +31,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: [],

package/.symbols/tooltip/index.js

@@ -15,7 +15,7 @@ const component = {
 
 const code = `{}`
 
-const defaultState = {}
+const state = {}
 const props = {}
 
 const settings = {
@@ -29,7 +29,7 @@ export default {
   category,
   component,
   code,
-  defaultState,
+  state,
 
  props,
   settings,

package/package.json

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

package/src/config/index.js

@@ -16,4 +16,4 @@ const PREVIEW_CONF = {
   }
 }
 
-export default init({ verbose: true, ...PREVIEW_CONF })
+export default init(PREVIEW_CONF)

package/src/pages/Export/gist.js

@@ -1,7 +1,6 @@
 'use strict'
 
 export const fetchGist = (key, state) => {
-  console.log(state)
   window.fetch(`https://api.github.com/gists/${key}`, {
     headers: {
       Authorization: `token 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`

package/src/pages/Typography/documentStyles.js

@@ -11,8 +11,7 @@ import {
 } from '@symbo.ls/components'
 import stylesHelpers from './stylesHelpers'
 
-import { HTML_TAGS } from '@domql/tags'
-console.log(HTML_TAGS)
+import { HTML_TAGS } from '@domql/tags' // eslint-disable-line no-unused-vars
 
 export default {
   header: {