@symbo.ls/preview 2.0.7 → 2.6.0

package/src/data/components/button-user/style.js

@@ -1,25 +0,0 @@
-'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/src/data/components/datepicker/index.js

@@ -1,40 +0,0 @@
-'use strict'
-
-import CATEGORIES from '../../categories'
-
-import { DatePicker } from '@symbo.ls/all'
-
-import style from './style'
-
-const key = 'datepicker'
-const title = 'DatePicker'
-const description = ''
-const category = CATEGORIES[7]
-
-const component = {
-  style,
-  proto: DatePicker
-}
-
-const code = `{}`
-
-const defaultState = {}
-const defaultProps = {}
-
-const settings = {
-  gridOptions: { colspan: 7, rowspan: 5 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  code,
-  defaultState,
-  defaultProps,
-  settings,
-  interactivity: ['click', 'choose'],
-  dataTypes: ['date']
-}

package/src/data/components/datepicker/style.js

@@ -1,4 +0,0 @@
-'use strict'
-
-export default {
-}

package/src/data/components/dropdown-list/index.js

@@ -1,56 +0,0 @@
-'use strict'
-
-import CATEGORIES from '../../categories'
-
-import { DropdownList } from '@symbo.ls/all'
-
-const key = 'dropdown-list'
-const title = 'Dropdown List'
-const description = ''
-const category = CATEGORIES[5]
-
-const component = {
-  proto: DropdownList,
-  props: {
-    theme: 'quaternary', round: 'A'
-  },
-  // props: (el, s) => {
-  //   return {
-  //     round: 'Z',
-  //     depth: '16',
-  //     theme: s.sceneTheme === 'light' ? 'lightDark' : 'dark',
-  //     rowTheme: s.sceneTheme === 'light' ? 'lightDark' : 'quaternary'
-  //   }
-  // },
-
-  ...[
-    { span: { props: { text: 'Today' } } },
-    { span: { props: { text: 'Yesterday' } } },
-    { span: { props: { text: 'A week age' } } },
-    { span: { props: { text: 'A month ago' } } }
-  ]
-}
-
-const code = `{}`
-
-const defaultState = {}
-const defaultProps = {
-  theme: 'quaternary'
-}
-const settings = {
-  gridOptions: { colspan: 5, rowspan: 5 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  code,
-  defaultState,
-  defaultProps,
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

package/src/data/components/field/index.js

@@ -1,40 +0,0 @@
-'use strict'
-
-import CATEGORIES from '../../categories'
-
-import { Field } from '@symbo.ls/all'
-
-const key = 'field'
-const title = 'Field'
-const description = ''
-const category = CATEGORIES[2]
-
-const component = {
-  proto: Field,
-  props: (el, s) => ({
-    theme: s.sceneTheme === 'light' ? 'lightDark' : 'quaternary'
-  })
-}
-
-const code = `{}`
-
-const defaultState = {}
-const defaultProps = {}
-
-const settings = {
-  gridOptions: { colspan: 4, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  code,
-  defaultState,
-  defaultProps,
-  settings,
-  interactivity: ['input'],
-  dataTypes: ['string']
-}

package/src/data/components/index.js

@@ -1,34 +0,0 @@
-'use strict'
-
-import CircleButton from './button-circle'
-import buttonContacts from '../components/button-contacts'
-import buttonDownload from './button-download'
-import buttonPro from './button-pro'
-import buttonArchived from './button-archived'
-import buttonUser from './button-user'
-import buttonThemeSwitcher from './button-theme-switcher'
-import notification from './notification'
-import dropdownList from './dropdown-list'
-import label from './label'
-import datepicker from './datepicker'
-import field from './field'
-import tooltip from './tooltip'
-import pills from './pills'
-
-export default [
-  CircleButton,
-  buttonDownload,
-  buttonPro,
-  buttonArchived,
-  buttonContacts,
-  buttonUser,
-  label,
-  buttonThemeSwitcher,
-  notification,
-  dropdownList,
-  datepicker,
-  field,
-  tooltip,
-  pills
-
-]

package/src/data/components/label/index.js

@@ -1,40 +0,0 @@
-'use strict'
-
-import CATEGORIES from '../../categories'
-
-import { Label } from '@symbo.ls/all'
-
-const key = 'label'
-const title = 'Label'
-const description = ''
-const category = CATEGORIES[0]
-
-const component = {
-  proto: Label,
-  props: {
-    theme: 'lightDark'
-  }
-}
-
-const code = `{}`
-
-const defaultState = {}
-const defaultProps = {}
-
-const settings = {
-  gridOptions: { colspan: 3, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  code,
-  defaultState,
-  defaultProps,
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

package/src/data/components/notification/index.js

@@ -1,55 +0,0 @@
-'use strict'
-
-import CATEGORIES from '../../categories'
-
-import style from './style'
-import { Notification } from '@symbo.ls/all'
-
-const key = 'notification'
-const title = 'Notification'
-const description = ''
-const category = CATEGORIES[4]
-
-const component = {
-  style,
-  proto: Notification,
-  props: {
-    round: 'A',
-    padding: 'Z A2 Z A',
-    theme: 'alert'
-  }
-}
-
-const code = `{
-  proto: Notification,
-  props: {
-    round: 'A',
-    padding: 'Z A2 Z A',
-    theme: 'alert'
-  }
-}`
-
-const defaultState = {}
-const defaultProps = {
-  round: 'A',
-  padding: 'Z A2 Z A',
-  theme: 'alert'
-}
-
-const settings = {
-  gridOptions: { colspan: 4, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  code,
-  defaultState,
-  defaultProps,
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

package/src/data/components/notification/style.js

@@ -1,20 +0,0 @@
-'use strict'
-
-export default {
-  borderBottomLeftRadius: '6px',
-  '> div ': {
-    background: 'rgba(0, 0, 0, .65)',
-    color: '#EDCB38',
-    borderRadius: '100%',
-    marginRight: `${8 / 16}em`,
-    marginTop: `${4 / 16}em`
-  },
-  '> article': {
-    caption: {
-      fontWeight: 'bold'
-    },
-    p: {
-      opacity: '.65'
-    }
-  }
-}

package/src/data/components/pills/index.js

@@ -1,37 +0,0 @@
-'use strict'
-
-import CATEGORIES from '../../categories'
-
-import { Pills } from '@symbo.ls/all'
-
-const key = 'pills'
-const title = 'Pills'
-const description = ''
-const category = CATEGORIES[CATEGORIES.length - 1]
-
-const component = {
-  proto: Pills
-}
-
-const code = `{}`
-
-const defaultState = {}
-const defaultProps = {}
-
-const settings = {
-  gridOptions: { colspan: 3, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  code,
-  defaultState,
-  defaultProps,
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

package/src/data/components/tooltip/index.js

@@ -1,38 +0,0 @@
-'use strict'
-
-import CATEGORIES from '../../categories'
-
-import { Tooltip } from '@symbo.ls/all'
-
-const key = 'tooltip'
-const title = 'Tooltip'
-const description = ''
-const category = CATEGORIES[8]
-
-const component = {
-  proto: Tooltip
-}
-
-const code = `{}`
-
-const defaultState = {}
-const defaultProps = {}
-
-const settings = {
-  gridOptions: { colspan: 4, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  code,
-  defaultState,
-
- defaultProps,
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

package/src/data/filters.js

@@ -1,3 +0,0 @@
-'use strict'
-
-export default {}

package/src/data/index.js

@@ -1,3 +0,0 @@
-'use strict'
-
-export default {}

package/src/data/library/button-circle/index.js

@@ -1,52 +0,0 @@
-'use strict'
-
-import CATEGORIES from '../../categories'
-
-import { CircleButton } from '@symbo.ls/all'
-
-const key = 'button-circle'
-const title = 'Circle Button'
-const description = ''
-const category = CATEGORIES[1]
-
-const component = {
-  proto: CircleButton,
-  props: {
-    theme: 'secondary',
-    icon: '',
-    text: '3'
-  }
-}
-
-const code = `{
-  proto: CircleButton,
-  props: {
-    theme: 'secondary',
-    text: '3'
-  }
-}`
-
-const defaultState = {}
-const defaultProps = {
-  theme: 'secondary',
-  text: '3'
-}
-
-const settings = {
-  gridOptions: { colspan: 3, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  code,
-  defaultState,
-
-  defaultProps,
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

package/src/data/library/button-join/index.js

@@ -1,61 +0,0 @@
-'use strict'
-
-import CATEGORIES from '../../categories'
-
-import { Button } from '@symbo.ls/all'
-
-const key = 'button-join'
-const title = 'Join Button'
-const description = ''
-const category = CATEGORIES[1]
-
-const component = {
-  proto: Button,
-  style: {
-    svg: { marginRight: `${6 / 16}em` }
-  },
-  props: {
-    theme: 'green',
-    padding: ['Z2', 'B'],
-    round: 'C',
-    icon: 'checkmark',
-    text: 'Join the Classroom'
-  }
-}
-
-const code = `{
-  proto: Button,
-  props: {
-    theme: 'green',
-    round: 'C',
-    icon: 'checkmark',
-    text: 'Join the Classroom'
-  }
-}`
-
-const defaultState = {}
-const defaultProps = {
-  theme: 'green',
-  round: 'C',
-  icon: 'checkmark',
-  text: 'Join the Classroom'
-}
-
-const settings = {
-  gridOptions: { colspan: 3, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  code,
-  defaultState,
-
-  defaultProps,
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

package/src/data/library/family-bundle/index.js

@@ -1,99 +0,0 @@
-'use strict'
-
-import CATEGORIES from '../../categories'
-import style, { buttonStyle } from './style'
-
-import { CircleButton, UserBundle } from '@symbo.ls/all'
-
-const key = 'family-bundle'
-const title = 'Family Bundle'
-const description = ''
-const category = CATEGORIES[11]
-
-export const buttonPlus = {
-  proto: CircleButton,
-  style: buttonStyle,
-  props: {
-    theme: 'greyBlue',
-    icon: 'plus'
-  }
-}
-
-export const buttonMore = {
-  proto: CircleButton,
-  style: buttonStyle,
-  props: {
-    theme: 'transparent',
-    icon: 'threeDots'
-  }
-}
-
-const component = {
-  style,
-  family: {
-    childProto: UserBundle,
-    ...[
-      {
-        style: { marginRight: `${24 / 14}em` },
-        users: {},
-        span: 'Juniper'
-      },
-      {
-        users: {
-          style: {
-            img: { border: '1px solid black' }
-          },
-          ...[{}, {}]
-        },
-        span: 'Your family'
-      }
-    ]
-  },
-  buttons: {
-    buttonPlus,
-    more: {
-      proto: buttonMore,
-      style: { border: '1px solid rgba(255, 255, 255, .2)' }
-    }
-  }
-}
-
-const code = `{
-  proto: FamilyBundle,
-  family: [{
-    users: {},
-    span: 'Juniper'
-  }, {
-    users: [{}, {}],
-    span: 'Your family'
-  }]
-}`
-
-const defaultState = {}
-const defaultProps = {
-  family: [{
-    users: {},
-    span: 'Juniper'
-  }, {
-    users: [{}, {}],
-    span: 'Your family'
-  }]
-}
-
-const settings = {
-  gridOptions: { colspan: 9, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  code,
-  defaultState,
-  defaultProps,
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

package/src/data/library/family-bundle/style.js

@@ -1,27 +0,0 @@
-'use strict'
-
-export const buttonStyle = {
-  padding: 0,
-  width: `${32 / 16}em`,
-  height: `${32 / 16}em`
-}
-
-export default {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  width: '50em',
-  '> div': {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  img: {
-    width: '32px',
-    height: '32px'
-  },
-  button: {
-    '&:first-child': {
-      marginRight: '8px'
-    }
-  }
-}

package/src/data/library/index.js

@@ -1,15 +0,0 @@
-'use strict'
-
-import buttonCircle from './button-circle'
-import buttonJoin from './button-join'
-import familyBundle from './family-bundle'
-import joinClass from './join-class'
-import parentMode from './parent-mode'
-
-export default [
-  parentMode,
-  buttonCircle,
-  buttonJoin,
-  familyBundle,
-  joinClass
-]