@symbo.ls/preview 2.27.0 → 3.1.1

package/articles/Colors.js

@@ -4,7 +4,7 @@ import { ColorBlock } from '../blocks'
 
 export const Colors = {
   tag: 'article',
-  extend: 'Flex',
+  extends: 'Flex',
 
   props: {
     margin: 'auto',
@@ -43,12 +43,12 @@ export const Colors = {
       '@mobileS': { padding: '- B' }
     },
 
-    childExtend: ColorBlock,
+    childExtends: ColorBlock,
 
     pallete: {
       Title: { text: 'Color pallete' },
       Paragraph: {
-        $collection: ({ context }) => {
+        children: ({ context }) => {
           const { COLOR } = context.designSystem
           return Object.keys(COLOR).filter(v => COLOR[v].value)
             .map(v => ({

package/articles/Icons.js

@@ -4,11 +4,11 @@ import { icon } from '../blocks'
 
 export const Icons = {
   tag: 'article',
-  extend: 'Flex',
+  extends: 'Flex',
 
   Header: {
     tag: 'header',
-    extend: 'Banner',
+    extends: 'Banner',
     Title: { text: 'Icons' },
     Paragraph: {
       P: {},
@@ -25,5 +25,5 @@ export const Icons = {
     }
   },
 
-  Section: { extend: icon }
+  Section: { extends: icon }
 }

package/articles/Shadows.js

@@ -4,11 +4,11 @@ import { shadow } from '../blocks'
 
 export const Shadows = {
   tag: 'article',
-  extend: 'Flex',
+  extends: 'Flex',
 
   Header: {
     tag: 'header',
-    extend: 'Banner',
+    extends: 'Banner',
 
     Title: { text: 'Shadow' },
     Paragraph: {
@@ -27,6 +27,6 @@ export const Shadows = {
   },
 
   Section: {
-    extend: shadow
+    extends: shadow
   }
 }

package/articles/Shapes.js

@@ -4,11 +4,11 @@ import { shape } from '../blocks'
 
 export const Shapes = {
   tag: 'article',
-  extend: 'Flex',
+  extends: 'Flex',
 
   Header: {
     tag: 'header',
-    extend: 'Banner',
+    extends: 'Banner',
 
     Title: {
       props: {
@@ -32,6 +32,6 @@ export const Shapes = {
   },
 
   Section: {
-    extend: shape
+    extends: shape
   }
 }

package/articles/Spacing.js

@@ -2,11 +2,11 @@
 
 export const Spacing = {
   tag: 'article',
-  extend: 'Flex',
+  extends: 'Flex',
 
   Header: {
     tag: 'header',
-    extend: 'Banner',
+    extends: 'Banner',
 
     Title: {
       props: {

package/articles/Themes.js

@@ -4,7 +4,7 @@ import { ColorBlock } from '../blocks'
 
 export const Themes = {
   tag: 'article',
-  extend: 'Flex',
+  extends: 'Flex',
 
   Banner: {
     Title: { props: { text: 'Themes' } },
@@ -33,8 +33,8 @@ export const Themes = {
       padding: 'E C1 - C1',
       gap: 'E'
     },
-    childExtend: {
-      extend: ColorBlock,
+    childExtends: {
+      extends: ColorBlock,
       Hgroup: {},
       Grid: {
         props: {
@@ -44,22 +44,22 @@ export const Themes = {
             border: 'none !important'
           }
         },
-        childExtend: {
-          extend: 'Flex',
+        childExtends: {
+          extends: 'Flex',
           props: {
             flow: 'column',
             align: 'flex-start space-between',
             padding: 'Z1 Z2'
           },
           icons: {
-            extend: 'Flex',
+            extends: 'Flex',
             props: {
               gap: 'B',
               align: 'center space-between',
               minWidth: '100%'
             },
-            childExtend: 'Icon',
-            $propsCollection: [
+            childExtends: 'Icon',
+            children: [
               { name: 'sun' },
               { name: 'moon' }
             ]

package/articles/Typography.js

@@ -4,11 +4,11 @@ import { FontsBlock } from '../blocks'
 
 export const Typography = {
   tag: 'article',
-  extend: 'Flex',
+  extends: 'Flex',
 
   Header: {
     tag: 'header',
-    extend: 'Banner',
+    extends: 'Banner',
     Title: {
       props: {
         text: 'type',
@@ -41,7 +41,7 @@ export const Typography = {
         }
       }
     },
-    childExtend: FontsBlock,
+    childExtends: FontsBlock,
     ...[{}, {}]
   }
   // Section: {
@@ -67,7 +67,7 @@ export const Typography = {
   // }
 
   // Section: {
-  //   extend: font,
+  //   extends: font,
   //   Title: {
   //     props: { text: 'Sans Serif' }
   //   },
@@ -80,7 +80,8 @@ export const Typography = {
   //   }
   // },
 
-  // $stateCollection: ({ context }) => {
+  // childrenAs: 'state',
+  // children: ({ context }) => {
   //   const { FONT } = context.designSystem
   //   return Object.keys(FONT).map(v => ({
   //     name: v

package/blocks/Default.js

@@ -2,7 +2,7 @@
 
 export const DefaultBlock = {
   tag: 'section',
-  extend: 'Hgroup',
+  extends: 'Hgroup',
   props: {
     flow: 'row',
     boxSizing: 'border-box',

package/blocks/color.js

@@ -3,7 +3,7 @@
 import { DefaultBlock } from './section'
 
 const ColorTemplate = {
-  extend: 'Flex',
+  extends: 'Flex',
   props: {
     gap: 'A'
   },
@@ -16,7 +16,7 @@ const ColorTemplate = {
   },
 
   Description: {
-    extend: 'Flex',
+    extends: 'Flex',
     props: { gap: 'X', flow: 'column' },
     Title: { color: 'title' },
     Value: { margin: 'X - -', color: 'paragraph' },
@@ -25,7 +25,7 @@ const ColorTemplate = {
 }
 
 export const ColorBlock = {
-  extend: DefaultBlock,
+  extends: DefaultBlock,
 
   Title: {
     props: {
@@ -35,7 +35,7 @@ export const ColorBlock = {
   },
 
   Paragraph: {
-    extend: 'Grid',
+    extends: 'Grid',
 
     props: {
       columns: 'repeat(4, 1fr)',
@@ -46,6 +46,6 @@ export const ColorBlock = {
       '@mobileXS': { gap: 'A2' }
     },
 
-    childExtend: ColorTemplate
+    childExtends: ColorTemplate
   }
 }

package/blocks/font.js

@@ -3,7 +3,7 @@
 import { DefaultBlock } from './section'
 
 export const FontsBlock = {
-  extend: DefaultBlock,
+  extends: DefaultBlock,
   props: {
     flex: '1',
     padding: 'D D D1 D',

package/blocks/icon.js

@@ -3,7 +3,7 @@
 import { DefaultBlock } from './section'
 
 export const icon = {
-  extend: DefaultBlock,
+  extends: DefaultBlock,
   props: {
     padding: 'E D E1 D',
     '@mobileL': { padding: 'D C' },
@@ -12,7 +12,7 @@ export const icon = {
 
   Title: null,
   Paragraph: {
-    extend: 'Grid',
+    extends: 'Grid',
     props: {
       columns: 'repeat(7, 1fr)',
       gap: 'C',
@@ -22,8 +22,8 @@ export const icon = {
       '@mobileS': { gap: 'Z' }
       // padding: 'E D E2 D'
     },
-    childExtend: {
-      extend: 'Flex',
+    childExtends: {
+      extends: 'Flex',
       props: {
         align: 'center',
         aspectRatio: '1/1',
@@ -42,7 +42,7 @@ export const icon = {
       }
     },
 
-    $collection: ({ context }) => {
+    children: ({ context }) => {
       const { ICONS } = context.designSystem
       return Object.keys(ICONS).map(name => ({
         Icon: { name }

package/blocks/section.js

@@ -2,7 +2,7 @@
 
 export const DefaultBlock = {
   tag: 'section',
-  extend: 'Hgroup',
+  extends: 'Hgroup',
 
   props: { gap: 'A' },
 

package/blocks/shadow.js

@@ -3,7 +3,7 @@
 import { DefaultBlock } from './section'
 
 export const shadow = {
-  extend: DefaultBlock,
+  extends: DefaultBlock,
   props: {
     padding: 'D2 D',
     '@mobileL': { padding: 'E C' },
@@ -13,7 +13,7 @@ export const shadow = {
   Title: null,
 
   Paragraph: {
-    extend: 'Grid',
+    extends: 'Grid',
     props: {
       columns: 'repeat(8, 1fr)',
       gap: 'C2',

package/blocks/shape.js

@@ -3,7 +3,7 @@
 import { shadow } from './shadow'
 
 export const shape = {
-  extend: shadow,
+  extends: shadow,
   Title: null,
   Paragraph: {
     props: {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/preview",
-  "version": "2.27.0",
+  "version": "3.1.1",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "40a924693178a7d7b9e94aac0282b9d31602eca7",
+  "gitHead": "39fb7a8c07355468ccce79e2f787ca3fa0715692",
   "source": "src/index.js"
 }

package/pages/Component.js

@@ -1,7 +1,7 @@
 'use strict'
 
 export const Component = {
-  extend: 'Flex',
+  extends: 'Flex',
   props: {
     align: 'center center',
     minHeight: '100vh'
@@ -12,7 +12,7 @@ export const Component = {
       const urlParams = new URLSearchParams(window.location.search)
       return !urlParams.get('hideUi') || !urlParams.get('fullsize')
     },
-    extend: 'Flex',
+    extends: 'Flex',
     props: {
       align: 'center space-between',
       position: 'absolute',
@@ -49,7 +49,7 @@ export const Component = {
     const schema = ctx.schema[factory][key]
     return {
       key,
-      extend: 'Flex',
+      extends: 'Flex',
       state: schema.state,
       props: () => ({
         class: 'component',

package/pages/Components.js

@@ -1,48 +1,41 @@
 'use strict'
 
 export const ComponentsPage = {
-  extend: 'Flex',
-
+  extends: 'Flex',
   state: {
     globalTheme: 'dark',
     value: ''
   },
 
-  Flex: {
-    props: {
-      flow: 'column',
-      padding: 'F E E D',
-      gap: 'E+C',
-      minWidth: 'calc(100% - 70px)',
-      height: '100dvh',
-      margin: '- - - auto',
-      style: {
-        overflowY: 'auto',
-        scrollBehavior: 'smooth'
-      }
+  FleX: {
+    flow: 'column',
+    padding: 'F E E D',
+    gap: 'E+C',
+    minWidth: 'calc(100% - 70px)',
+    height: '100dvh',
+    margin: '- - - auto',
+    style: {
+      overflowY: 'auto',
+      scrollBehavior: 'smooth'
     },
 
-    childExtend: {
-      props: ({ key, state }) => ({
-        hide: !key.toLowerCase().includes(state.value),
-        position: 'relative'
-      }),
-      __title: {
-        props: {
-          ignoreChildExtend: true,
-          position: 'absolute',
-          left: '0',
-          top: '-C',
-          fontSize: '14px',
-          color: 'white .35'
-        },
+    childExtends: {
+      hide: ({ key, state }) => !key.toLowerCase().includes(state.value),
+      position: 'relative',
+      Title: {
+        ignoreChildExtends: true,
+        position: 'absolute',
+        left: '0',
+        top: '-C',
+        fontSize: '14px',
+        color: 'white .35',
         text: ({ parent }) => parent.key
       }
     },
 
     H1: {
-      props: { hide: false },
-      __title: { text: 'Searched value:' },
+      hide: false,
+      Title: { text: 'Searched value:' },
       text: ({ state }) => state.value
     },
 
@@ -50,15 +43,18 @@ export const ComponentsPage = {
     Avatar: {},
     AvatarIndicator: {},
     AvatarBundle: {
-      childExtend: 'Avatar',
+      childExtends: 'Avatar',
       ...[{}, {}, {}]
     },
     AvatarChooser: {
-      options: [{
-        text: 'Kevin'
-      }, {
-        text: 'John'
-      }]
+      options: [
+        {
+          text: 'Kevin'
+        },
+        {
+          text: 'John'
+        }
+      ]
     },
     Hgroup: {
       Title: { text: 'Title' },
@@ -114,13 +110,13 @@ export const ComponentsPage = {
     UploadingProcess3: {},
     UploadedProcess3: {},
     ProgressCircle: {},
-    ProgressCircleWithIcon: {},
+    ProgresICircleWithIcon: {},
     ProgressCircleWithUnitValue: {},
     UploadingProcess4: {},
     UploadedProcess4: {},
     UploadModal4: {},
 
-    Checkbox: {},
+    CheckboX: {},
     Radio: {},
     Toggle: {},
     NumberInput: {},
@@ -134,7 +130,7 @@ export const ComponentsPage = {
     ParagraphButton: {},
     VerificationCode: {},
     ResetPassword: {},
-    ParagraphButtonWithCheckbox: {},
+    ParagraphButtonWithCheckboX: {},
     ContactForm: {},
     SignUp: {},
     DoubleHr: {},
@@ -176,82 +172,72 @@ export const ComponentsPage = {
   },
 
   Flex_footer: {
-    props: {
-      position: 'fixed',
-      width: 'calc(100% - 70px)',
-      zIndex: '100',
-      bottom: '0',
-      right: '0',
-      align: 'center flex-end',
-      padding: '- B B -',
-      '@mobile': {
-        justifyContent: 'center',
-        padding: '- 20px 30px 20px'
+    position: 'fixed',
+    width: 'calc(100% - 70px)',
+    zIndex: '100',
+    bottom: '0',
+    right: '0',
+    align: 'center flex-end',
+    padding: '- B B -',
+    '@mobile': {
+      justifyContent: 'center',
+      padding: '- 20px 30px 20px'
+    },
+    Search: {
+      fontFamily: 'avenir',
+      fontWeight: '400',
+      round: 'D',
+      flow: 'row',
+      border: 'solid, #252527',
+      borderWidth: '1px',
+      width: 'G+D',
+      padding: 'Z A Z B',
+      position: 'relative',
+      Icon: {
+        boxSize: 'A+V A+V',
+        color: '#3F3F43'
       },
-      search: {
+      Input: {
         fontFamily: 'avenir',
-        fontWeight: '400',
-        round: 'D',
-        flow: 'row',
-        border: 'solid, #252527',
-        borderWidth: '1px',
-        width: 'G+D',
-        padding: 'Z A Z B',
-        position: 'relative',
-        Icon: {
-          boxSize: 'A+V A+V',
-          color: '#3F3F43'
-        },
-        input: {
-          fontFamily: 'avenir',
-          placeholder: 'find component . . .',
-          fontSize: 'A',
-          ':focus ~ svg': { opacity: '0' }
-        },
-        x: {
-          color: 'white',
-          position: 'absolute',
-          right: 'A'
-        }
+        placeholder: 'find component . . .',
+        fontSize: 'A',
+        ':focus ~ svg': { opacity: '0' }
+      },
+      X: {
+        color: 'white',
+        position: 'absolute',
+        right: 'A'
       }
     },
     Search: {
-      extend: 'SearchWithButton',
-      props: {
-        minWidth: 'G+C',
-        minHeight: 'C+X',
-        maxHeight: 'C+Z',
-        round: 'C',
-        padding: '- A+W - A+Y',
-        border: '1px solid #3F3F43',
-        background: 'transparent'
-      },
+      extends: 'SearchWithButton',
+      minWidth: 'G+C',
+      minHeight: 'C+X',
+      maxHeight: 'C+Z',
+      round: 'C',
+      padding: '- A+W - A+Y',
+      border: '1px solid #3F3F43',
+      background: 'transparent',
       Input: {
         props: {
           fontSize: 'Z1',
           placeholder: 'Find component ...',
           ':focus ~ svg': { opacity: '0' }
         },
-        on: {
-          keyup: (event, el, s) => {
-            const value = el.node.value.toLowerCase()
-            s.update({ value })
-          }
+        onKeyup: (event, el, s) => {
+          const value = el.node.value.toLowerCase()
+          s.update({ value })
         }
       },
       Icon: {
-        props: {
-          fontSize: 'C',
-          color: '#3F3F43'
-        }
+        fontSize: 'C',
+        color: '#3F3F43'
       },
       Button: {
-        props: {
-          position: 'absolute',
-          margin: 'auto',
-          right: 'Z',
-          color: '#3F3F43'
-        }
+        position: 'absolute',
+        margin: 'auto',
+        right: 'Z',
+        color: '#3F3F43'
       }
     }
   }

package/pages/Styleguide.js

@@ -3,7 +3,7 @@
 import { Colors, Typography, Shadows, Icons, Spacing, Shapes } from '../articles'
 
 export const Styleguide = {
-  extend: 'Flex',
+  extends: 'Flex',
   tag: 'main',
 
   props: {
@@ -18,7 +18,7 @@ export const Styleguide = {
     }
   },
 
-  childExtend: {
+  childExtends: {
     props: {
       flow: 'column',
       '> header': {