@symbo.ls/preview 2.11.469 → 3.0.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.11.469",
+  "version": "3.0.1",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "711b668d5e97cf07bdc3ecec069a89c4eddee826",
+  "gitHead": "a4e7f586f7e4f60bd7b6a8388bdacc3ae1879433",
   "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,7 +1,7 @@
 'use strict'
 
 export const ComponentsPage = {
-  extend: 'Flex',
+  extends: 'Flex',
 
   state: {
     globalTheme: 'dark',
@@ -22,14 +22,14 @@ export const ComponentsPage = {
       }
     },
 
-    childExtend: {
+    childExtends: {
       props: ({ key, state }) => ({
         hide: !key.toLowerCase().includes(state.value),
         position: 'relative'
       }),
       __title: {
         props: {
-          ignoreChildExtend: true,
+          ignoreChildExtends: true,
           position: 'absolute',
           left: '0',
           top: '-C',
@@ -50,7 +50,7 @@ export const ComponentsPage = {
     Avatar: {},
     AvatarIndicator: {},
     AvatarBundle: {
-      childExtend: 'Avatar',
+      childExtends: 'Avatar',
       ...[{}, {}, {}]
     },
     AvatarChooser: {
@@ -216,7 +216,7 @@ export const ComponentsPage = {
       }
     },
     Search: {
-      extend: 'SearchWithButton',
+      extends: 'SearchWithButton',
       props: {
         minWidth: 'G+C',
         minHeight: 'C+X',

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': {