@symbo.ls/preview 0.0.9

package/.babelrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  "presets": [
+    ["@babel/preset-env"]
+  ]
+}

package/.coveralls.yml

@@ -0,0 +1 @@
+repo_token: jmDeY99lLJ2iGLoz74cFs3X0Z2h5bYo1j

package/.eslintignore

@@ -0,0 +1 @@
+dist/**/*.js

package/.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  "extends": "standard",
+  "plugins": ["jest"],
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "jest": true
+  },
+  overrides: [{
+    files: [ 'test/**/*.test.js' ],
+    env: { jest: true },
+    plugins: [ 'jest' ]
+  }]
+}

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

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

@@ -0,0 +1,63 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import style from './style'
+import { Button } from '@symbo.ls/components'
+
+const key = 'all-star'
+const title = 'All Star'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  extend: Button,
+  style,
+
+  props: {
+    icon: 'star',
+    text: 'All Star',
+    theme: 'label',
+    padding: 'X1 Z2',
+    gap: 'X',
+    round: 'A'
+  }
+}
+
+const code = `{
+  extend: Button,
+  props: {
+    round: 'A',
+    padding: 'Z A',
+    icon: 'star',
+    text: 'Archived',
+    theme: 'label'
+  }
+}`
+
+const defaultState = {}
+const props = {
+  icon: 'star',
+  text: 'Archived',
+  theme: 'label',
+  spacingRatio: '1.618',
+  round: 'A'
+}
+
+const settings = {
+  gridOptions: { colspan: 3, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  props,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

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

@@ -0,0 +1,5 @@
+'use strict'
+
+export default {
+  fontWeight: 'bold'
+}

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

@@ -0,0 +1,62 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import { CircleButton } from '@symbo.ls/components'
+
+const key = 'button-circle'
+const title = 'Circle Button'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  extend: CircleButton,
+  props: {
+    theme: 'secondary',
+    icon: null,
+    text: '3'
+  }
+}
+
+const code = {
+  react: `<CircleButton
+  ...{
+  theme: 'secondary',
+  padding: 'Y2',
+  text: '3'
+} />`,
+  domql: `{
+  extend: CircleButton,
+  props: {
+    theme: 'secondary',
+    padding: 'Y2',
+    text: '3'
+  }
+}`
+}
+
+const defaultState = {}
+const props = {
+  theme: 'secondary',
+  padding: 'Y2',
+  spacingRatio: '1.618',
+  text: '3'
+}
+
+const settings = {
+  gridOptions: { colspan: 2, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  props,
+  settings,
+  interactivity: ['click'],
+  dataTypes: ['object']
+}

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

@@ -0,0 +1,48 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+import style from './style'
+
+import { Button, UserBundle } from '@symbo.ls/components'
+
+const key = 'button-contacts'
+const title = 'Contacts Button'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  extend: [UserBundle],
+  ...[{}, {}, {}]
+}
+
+const code = `{
+  round: 42,
+  users: [{}, {}, {}],
+  caption: 'View all Contacts'
+}`
+
+const defaultState = {}
+const props = {
+  round: 42,
+  users: [{}, {}, {}],
+  caption: 'View all Contacts'
+}
+
+const settings = {
+  gridOptions: { colspan: 5, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+
+  props,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

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

@@ -0,0 +1,13 @@
+'use strict'
+
+export default {
+  padding: `${8 / 14}em`,
+  paddingRight: `${26 / 14}em`,
+  span: {
+    paddingLeft: '.4em',
+    whiteSpace: 'nowrap'
+  },
+  img: {
+    border: '2px solid white'
+  }
+}

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

@@ -0,0 +1,59 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import { Button } from '@symbo.ls/components'
+
+const key = 'button-download'
+const title = 'Download Button'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  extend: Button,
+  props: {
+    icon: 'arrowDown',
+    gap: 'X2',
+    theme: 'quaternary',
+    text: 'Download',
+    padding: 'Z2 B2',
+    round: 'C'
+  }
+}
+
+const code = `{
+  extend: Button,
+  props: {
+    icon: 'arrowDown',
+    theme: 'quaternary',
+    text: 'Download',
+    round: 'C'
+  }
+}`
+
+const defaultState = {}
+const props = {
+  icon: 'arrowDown',
+  theme: 'quaternary',
+  text: 'Download',
+  round: 'C'
+}
+
+const settings = {
+  gridOptions: { colspan: 4, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+
+  props,
+  settings,
+  interactivity: ['click'],
+  dataTypes: ['object']
+}

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

@@ -0,0 +1,98 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import style from './style'
+import { KangorooButton } from '@symbo.ls/components'
+
+const key = 'button-pro'
+const title = 'Pro Button'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  style,
+  extend: KangorooButton,
+
+  props: {
+    theme: 'lightDark',
+    round: 'Z2',
+    padding: ['X1', 'X1', 'X1', 'A'],
+    size: 'A',
+    gap: 'Z',
+
+    iconText: {
+      gap: 'X1',
+      icon: 'star',
+      text: 'Become PRO',
+      alignItems: 'center'
+    },
+
+    label: {
+      round: 12,
+      theme: ['lightDark', 'inverse'],
+      size: 'Z',
+      padding: 'Z A2',
+      text: '1 month free'
+    }
+  },
+
+  iconText: {
+
+    props: el => el.parent.props.iconText
+  },
+
+  child: {
+    props: el => el.parent.props.label
+  }
+}
+
+const code = `{
+  extend: Button,
+  props: {
+    theme: 'lightDark',
+    round: 12,
+    padding: ['X1', 'X1', 'X1', 'A'],
+    size: 'A',
+    icon: 'info',
+    text: 'Become PRO',
+
+    label: {
+      round: 12,
+      theme: ['lightDark', 'inverse'],
+      size: 'Z',
+      gap: 'A',
+      padding: 'Z A2',
+      text: '1 month free'
+    }
+  }
+}`
+
+const defaultState = {}
+const props = {
+  theme: 'lightDark',
+  round: 12,
+  padding: ['X1', 'X1', 'X1', 'A'],
+  size: 'A',
+  icon: 'info',
+  text: 'Become PRO'
+}
+
+const settings = {
+  gridOptions: { colspan: 6, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+
+  props,
+  settings,
+  interactivity: ['click'],
+  dataTypes: ['object']
+}

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

@@ -0,0 +1,19 @@
+'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

@@ -0,0 +1,104 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import style from './style'
+import { KangorooButton } from '@symbo.ls/components'
+
+const key = 'button-theme-switcher'
+const title = 'Theme Switcher'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  style: style,
+  extend: KangorooButton,
+
+  props: {
+    round: 'C',
+    theme: 'lightDark',
+    size: 'A',
+    padding: 'X1 Y X1 A1',
+    gap: 'Z1',
+    depth: 16,
+
+    light: {
+      icon: 'sun',
+      text: 'Light Mode'
+    },
+
+    dark: {
+      theme: ['lightDark', 'inverse'],
+      round: 'C',
+      icon: 'moon',
+      padding: 'Z Z1',
+      text: 'Dark Mode'
+    }
+  },
+
+  iconText: {
+    props: el => el.parent.props.light
+  },
+
+  child: {
+    props: el => el.parent.props.dark
+  }
+}
+
+const code = `{
+  extend: KangorooButton,
+  props: {
+    round: 'C',
+    theme: 'lightDark',
+    size: 'Z',
+
+    light: {
+      icon: 'sun',
+      text: 'Light Mode'
+    },
+
+    dark: {
+      theme: ['lightDark', 'inverse'],
+      round: 'C',
+      icon: 'moon',
+      text: 'Dark Mode'
+    }
+  }
+}`
+
+const defaultState = {}
+const props = {
+  round: 'C',
+  theme: 'lightDark',
+  size: 'Z',
+
+  light: {
+    icon: 'sun',
+    text: 'Light Mode'
+  },
+
+  dark: {
+    theme: ['lightDark', 'inverse'],
+    round: 'C',
+    icon: 'moon',
+    text: 'Dark Mode'
+  }
+}
+
+const settings = {
+  gridOptions: { colspan: 5, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  props,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

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

@@ -0,0 +1,16 @@
+'use strict'
+
+export default {
+  fontWeight: 'bold',
+
+  svg: {
+    color: '#EDCB38',
+    marginRight: `${4 / 16}em`
+  },
+
+  span: {
+    maxHeight: '32px',
+    padding: `${9 / 14}em ${16 / 14}em`,
+    marginLeft: `${16 / 14}em`
+  }
+}

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

@@ -0,0 +1,82 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import style from './style'
+import { Button, User } from '@symbo.ls/components'
+
+const key = 'button-user'
+const title = 'User Button'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  extend: Button,
+  tag: 'label',
+  style,
+
+  props: (el, s) => ({
+    size: 'A',
+    round: 'C',
+    depth: 16,
+    gap: 'Y2',
+    padding: 'W2 A W2 W2',
+    icon: 'arrowAngleDown',
+    theme: s.sceneTheme === 'light' ? 'lightDark' : 'quaternary'
+  }),
+
+  user: {
+    extend: User,
+    props: { boxSize: 'B1 B1' },
+    class: { dis: { pointerEvents: 'none' } }
+  },
+  select: {
+    attr: {
+      name: 'user',
+      id: 'user'
+    },
+    childExtend: { tag: 'option' },
+    ...[
+      { text: 'Kevin' },
+      { text: 'Jay' }
+    ]
+  }
+}
+
+const code = `{
+  round: 'C',
+  icon: 'arrowAngleDown',
+  name: 'user',
+  id: 'user',
+  options: [
+    { text: 'adam' },
+    { text: 'jora' }
+  ]
+}`
+
+const defaultState = {}
+const props = {
+  size: 'A',
+  round: 'C',
+  depth: 16,
+  icon: 'arrowAngleDown',
+  theme: 'quaternary'
+}
+
+const settings = {
+  gridOptions: { colspan: 4, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  props,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

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

@@ -0,0 +1,25 @@
+'use strict'
+
+export default {
+  position: 'relative',
+  cursor: 'pointer',
+  svg: {
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: `${13 / 16}em`
+  },
+  select: {
+    outline: 'none',
+    appearance: 'none',
+    border: 'none',
+    width: '100%',
+    height: '100%',
+    background: 'none',
+    boxSizing: 'border-box',
+    color: 'currentColor',
+    fontSize: '1em',
+    lineHeight: 1,
+    paddingRight: '1.618em'
+    // paddingRight: `${16 / 16}em`
+  }
+}

package/.symbols/categories.js

@@ -0,0 +1,44 @@
+'use strict'
+
+export const CATEGORIES = [
+  {
+    key: 'basic',
+    text: 'Basic'
+  }, {
+    key: 'button',
+    text: 'Button'
+  }, {
+    key: 'form',
+    text: 'Form'
+  }, {
+    key: 'navigation',
+    text: 'Navigation'
+  }, {
+    key: 'notification',
+    text: 'Notification'
+  }, {
+    key: 'dropdown',
+    text: 'Dropdown'
+  }, {
+    key: 'badge',
+    text: 'Badge'
+  }, {
+    key: 'datepicker',
+    text: 'Datepicker'
+  }, {
+    key: 'tooltip',
+    text: 'Tooltip'
+  }, {
+    key: 'table',
+    text: 'Table'
+  }, {
+    key: 'toggle',
+    text: 'Toggle'
+  }, {
+    key: 'user',
+    text: 'User'
+  }, {
+    key: 'misc',
+    text: 'Miscellaneous'
+  }
+]