@symbo.ls/preview 0.0.24 → 0.0.25

package/package.json

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

package/src/pages/Account/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectToolWithCaption, Grid, CheckButton } from '@symbo.ls/components'
+import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectFieldWithCaption, Grid, CheckButton } from '@symbo.ls/components'
 // import { account } from '../SignUp'
 
 import setUpProject from './setUpProject'
@@ -128,7 +128,7 @@ const fillFields = {
     rowGap: 'C2'
   },
   childExtend: {
-    extend: SelectToolWithCaption,
+    extend: SelectFieldWithCaption,
     style: {
       '> input': { width: '270x', minWidth: '270px', height: '42px' }
     },

package/src/pages/Account/setUpProject.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Text, Block, Img, SquareButton, SelectTool } from '@symbo.ls/components'
+import { Text, Block, Img, SquareButton, SelectField } from '@symbo.ls/components'
 import { SetUp } from '..'
 
 export default {
@@ -126,7 +126,7 @@ export default {
           {
             caption: { props: { text: 'UI Framework' } },
             element: {
-              extend: SelectTool,
+              extend: SelectField,
               title: {
                 props: { text: 'React' },
                 style: { color: 'white' }

package/src/pages/ColorEditor/friendTheme.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { CommonField, SelectTool } from '@symbo.ls/components'
+import { CommonField, SelectField } from '@symbo.ls/components'
 
 export const friendTheme = {
   extend: CommonField,
@@ -11,7 +11,7 @@ export const friendTheme = {
     style: { opacity: 1, fontWeight: 'normal', margin: 0 }
   },
   element: {
-    extend: SelectTool,
+    extend: SelectField,
     style: {
       background: 'transparent',
       paddingLeft: 0,

package/src/pages/ColorEditor/interactivity.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Block, Grid, Text, SelectTool, CommonField } from '@symbo.ls/components'
+import { Block, Grid, Text, SelectField, CommonField } from '@symbo.ls/components'
 
 export const interactivity = {
   h6: {
@@ -21,7 +21,7 @@ export const interactivity = {
       extend: CommonField,
       props: { padding: 0 },
       element: {
-        extend: SelectTool,
+        extend: SelectField,
         buttons: { ...[{ props: { icon: 'plus' } }] }
       }
     },

package/src/pages/ColorEditor/themingTools.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Grid, ColorSwitcher, CommonField, SelectTool, ButtonSet, ClickableItem } from '@symbo.ls/components'
+import { Grid, ColorSwitcher, CommonField, SelectField, ButtonSet, ClickableItem } from '@symbo.ls/components'
 
 
 ColorSwitcher.props = (el, s) => {
@@ -72,7 +72,7 @@ export const themingTools = {
     props: { caption: 'Use as' },
     caption: {},
     element: {
-      extend: SelectTool,
+      extend: SelectField,
       title: { props: { text: 'Background color' } },
       buttons: { ...[{ props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }] }
     }

package/src/pages/Spaces/__/preview.js

@@ -2,7 +2,7 @@
 
 import { stylePreview, styleScene } from './style'
 
-import { Block, Button, Flex, Text, ResponsiveToolBar, Scene, SequenceGraph, StaticSpacing, CommonField, SliderToolWithCaption, SelectToolWithCaption } from '@symbo.ls/components'
+import { Block, Button, Flex, Text, ResponsiveToolBar, Scene, SequenceGraph, StaticSpacing, CommonField, RangeFieldWithCaption, SelectFieldWithCaption } from '@symbo.ls/components'
 
 const buttonDownload = {
   extend: Button,
@@ -56,7 +56,7 @@ export default {
         // },
 
         {
-          extend: SelectToolWithCaption,
+          extend: SelectFieldWithCaption,
           style: { marginTop: `${26 / 16}em` },
           caption: { props: { text: 'Used for' } },
           element: {
@@ -76,7 +76,7 @@ export default {
       childExtend: CommonField,
       ...[
         {
-          extend: SliderToolWithCaption,
+          extend: RangeFieldWithCaption,
           caption: { text: 'Base size' },
           element: {
             button0: {},

package/src/pages/Theme/friendTheme.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { CommonField, SelectTool } from '@symbo.ls/components'
+import { CommonField, SelectField } from '@symbo.ls/components'
 
 export const friendTheme = {
   extend: CommonField,
@@ -11,7 +11,7 @@ export const friendTheme = {
     style: { opacity: 1, fontWeight: 'normal', margin: 0 }
   },
   element: {
-    extend: SelectTool,
+    extend: SelectField,
     style: {
       background: 'transparent',
       paddingLeft: 0,

package/src/pages/Theme/themingTools.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Grid, ColorSwitcher, CommonField, SelectTool, ButtonSet, ClickableItem } from '@symbo.ls/components'
+import { Grid, ColorSwitcher, CommonField, SelectField, ButtonSet, ClickableItem } from '@symbo.ls/components'
 
 
 ColorSwitcher.props = (el, s) => {
@@ -72,7 +72,7 @@ export const themingTools = {
     props: { caption: 'Use as' },
     caption: {},
     element: {
-      extend: SelectTool,
+      extend: SelectField,
       title: { props: { text: 'Background color' } },
       buttons: { ...[{ props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }] }
     }

package/src/pages/Typography/documentStyles.js

@@ -1,6 +1,14 @@
 'use strict'
 
-import { Flex, SectionHeader, SelectField, IconButton } from '@symbo.ls/components'
+import {
+  DocumentStylesSequence,
+  Flex,
+  SectionHeader,
+  SelectField,
+  SequenceSliders,
+  TestText
+} from '@symbo.ls/components'
+// import { mapSequence, sortSequence } from '@symbo.ls/utils'
 import stylesHelpers from './stylesHelpers'
 
 export default {
@@ -12,15 +20,50 @@ export default {
     }
   },
 
+  styles: {
+    extend: Flex,
+
+    props: {
+      flow: 'column',
+      gap: 'C',
+      align: 'flex-start flex-start',
+      header: {
+        width: '100%',
+        align: 'center space-between'
+      }
+    },
+
+    header: {
+      extend: Flex,
+      SequenceSliders,
+      TestText
+    },
+
+    sequence: {
+      extend: DocumentStylesSequence,
+      $setCollection: (el) => {
+        const { state, context } = el // eslint-disable-line no-unused-vars
+        const { TYPOGRAPHY } = context.SYSTEM
+        const { styles } = TYPOGRAPHY
+        console.log(styles)
+        // state.sequence = {}
+        return styles
+      }
+    },
+
+    footer: { }
+  },
+
   fields: {
     extend: Flex,
-    props: { gap: 'A' },
+    props: {
+      gap: 'A',
+      align: 'center flex-start'
+    },
 
     interactivities: {
       extend: Flex,
-      props: {
-        gap: 'A'
-      },
+      props: { gap: 'A' },
       childExtend: {
         extend: SelectField,
         props: {
@@ -56,13 +99,15 @@ export default {
       }]
     },
 
-    plus: {
-      extend: IconButton,
-      props: {
-        theme: 'quaternary',
-        position: 'relative',
-        icon: 'plus'
-      }
+    VerticalLine: {
+      height: 'B',
+      margin: '0 Z1'
+    },
+
+    IconButton: {
+      theme: 'quinary',
+      position: 'relative',
+      icon: 'plus'
     },
 
     addsomething: {
@@ -74,13 +119,11 @@ export default {
         }
       },
       title: {},
-      buttons: {
-        ...[{
-          props: { icon: 'plus' }
-        }, {
-          props: { icon: 'arrowAngleDown' }
-        }]
-      }
+      buttons: [{
+        props: { icon: 'plus' }
+      }, {
+        props: { icon: 'arrowAngleMirroringVertical' }
+      }]
     }
   },