@symbo.ls/preview 0.0.20 → 0.0.21

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

@@ -37,11 +37,6 @@ const code = `{
 
 const defaultState = {}
 const props = {
-  icon: 'star',
-  text: 'Archived',
-  theme: 'label',
-  spacingRatio: '1.618',
-  round: 'A'
 }
 
 const settings = {

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

@@ -13,6 +13,9 @@ const component = {
   extend: CircleButton,
   props: {
     theme: 'secondary',
+    background: 'blue .2',
+    color: 'white',
+    padding: 'Y2',
     icon: null,
     text: '3'
   }
@@ -37,9 +40,6 @@ const code = {
 
 const defaultState = {}
 const props = {
-  theme: 'secondary',
-  padding: 'Y2',
-  spacingRatio: '1.618',
   text: '3'
 }
 

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

@@ -16,9 +16,8 @@ const component = {
     gap: 'X2',
     theme: 'quinary',
     text: 'Download',
-    // padding: 'Z2 B2',
+    padding: 'Z2 B2',
     border: '.2em, solid, blue .2',
-    padding: 'A1 B2',
     round: 'C'
   }
 }
@@ -35,10 +34,6 @@ const code = `{
 
 const defaultState = {}
 const props = {
-  icon: 'arrowDown',
-  theme: 'quaternary',
-  text: 'Download',
-  round: 'C'
 }
 
 const settings = {

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

@@ -2,7 +2,6 @@
 
 import { CATEGORIES } from '../categories'
 
-import style from './style'
 import { KangorooButton } from '@symbo.ls/components'
 
 const key = 'button-pro'
@@ -11,64 +10,40 @@ const description = ''
 const category = CATEGORIES[1]
 
 const component = {
-  style,
   extend: KangorooButton,
+}
 
-  props: {
-
-    round: 'Z2',
-    padding: ['X1', 'X1', 'X1', 'A'],
-    size: 'A',
-    gap: 'Z',
-    fontWeight: 'bold',
-
-    iconText: {
-      gap: 'X1',
-      icon: 'star',
-      text: 'Become PRO',
-      alignItems: 'center'
-    },
+const code = {
+  react: `<KangorooButton ...{
+  // ...
 
-    child: {
-      round: 12,
-      size: 'Z',
-      padding: 'Z A2',
-      text: '1 month free'
-    }
+  label: {
+    // ...
   },
 
-  iconText: {},
-  child: {}
-}
+  child: {
+    // ...
+  }
+} />`,
+  domql: `{
+  extend: KangorooButton,
 
-const code = `{
-  extend: Button,
   props: {
-
-    round: 12,
-    padding: ['X1', 'X1', 'X1', 'A'],
-    size: 'A',
-    icon: 'info',
-    text: 'Become PRO',
+    // ...
 
     label: {
-      round: 12,
-      size: 'Z',
-      gap: 'A',
-      padding: 'Z A2',
-      text: '1 month free'
+      // ...
+    },
+
+    child: {
+      // ...
     }
   }
 }`
+}
 
 const defaultState = {}
 const props = {
-
-  round: 12,
-  padding: ['X1', 'X1', 'X1', 'A'],
-  size: 'A',
-  icon: 'info',
-  text: 'Become PRO'
 }
 
 const settings = {

package/.symbols/label/index.js

@@ -2,7 +2,7 @@
 
 import { CATEGORIES } from '../categories'
 
-import { Label } from '@symbo.ls/components'
+import { Label, HoverEffect } from '@symbo.ls/components'
 
 const key = 'label'
 const title = 'Label'
@@ -11,7 +11,14 @@ const category = CATEGORIES[0]
 
 const component = {
   extend: Label,
-  props: {
+  state: { value: 2 },
+  props: ({ state }) => ({
+    text: state.value
+  }),
+  on: {
+    click: (ev, { state }) => {
+      state.update({ value: state.value + 1 })
+    }
   }
 }
 

package/package.json

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

package/src/app.js

@@ -7,7 +7,6 @@ import { router, lastLevel } from '@domql/router'
 
 import { state } from './state'
 import {
-  PageExtend,
   Components,
   DesignSystem,
   Export,
@@ -21,7 +20,7 @@ Object.keys(DesignSystem.routes).map(route => {
     extend: DesignSystem,
     sidebar: {},
     main: {
-      extend: [DesignSystem.routes[route], PageExtend]
+      extend: DesignSystem.routes[route]
     },
     __filepath: 'pages/index.js'
   }

package/src/pages/Color/index.js

@@ -9,7 +9,7 @@ import themes from './themes'
 export const Color = {
   key: 'colors',
   props: {
-    gap: '68px'
+    gap: 'A'
   },
 
   globalThemes,

package/src/pages/Components/index.js

@@ -1,6 +1,5 @@
 'use strict'
 
-import PageExtend from '../PageExtend'
 import { splitRoute } from 'domql/packages/router'
 
 import sidebar from './sidebar'
@@ -11,8 +10,6 @@ import { CATEGORIES } from '../../../.symbols/categories'
 // import COMPONENTS from '../../data/components'
 
 export const Components = {
-  extend: PageExtend,
-
   props: {
     maxWidth: '100%',
     width: '100%',

package/src/pages/Fonts/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Grid, FontObject, FontFamilyObject, Line } from '@symbo.ls/components'
+import { Grid, Hoverable, FontObject, FontFamilyObject, Line } from '@symbo.ls/components'
 import { TypeSection } from '../Typography/shared'
 
 import { state } from './state'
@@ -62,7 +62,7 @@ const FontFaces = {
       gap: 'A',
       margin: '0 -Z'
     },
-    childExtend: FontObject,
+    childExtend: [FontObject, Hoverable],
     $setCollection: mapFonts
   }
 }
@@ -88,7 +88,7 @@ const FontFamilies = {
       margin: '0 -Z'
     },
 
-    childExtend: FontFamilyObject,
+    childExtend: [FontFamilyObject, Hoverable],
     $setCollection: mapFontFamilies
   }
 }

package/src/pages/Spaces/SpacingScale.js

@@ -19,8 +19,8 @@ export const SpacingScale = {
       top: 'D',
       background: 'black .5',
       zIndex: '2',
-      margin: '-C -B -B',
-      padding: 'C B B',
+      margin: '-B2 -B -B',
+      padding: 'B2 B B',
       style: {
         backdropFilter: 'blur(15px)'
       }

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

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