@symbo.ls/preview 2.11.265 → 2.11.269

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 symbo.ls
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/articles/Colors.js

@@ -2,7 +2,7 @@
 
 import { Flex } from '@symbo.ls/atoms'
 import { Banner } from '@symbo.ls/banner'
-import { ColorSection } from '../_Sections'
+import { ColorBlock } from '../blocks'
 
 export const Colors = {
   tag: 'article',
@@ -40,7 +40,7 @@ export const Colors = {
       '@mobileS': { padding: '- B' }
     },
 
-    childExtend: ColorSection,
+    childExtend: ColorBlock,
 
     pallete: {
       Title: { text: 'Color pallete' },

package/articles/Icons.js

@@ -1,18 +1,14 @@
 'use strict'
 
-import { Flex } from '@symbo.ls/atoms'
-
-import { Banner } from '@symbo.ls/banner'
-
-import { icon } from '../_Sections'
+import { icon } from '../blocks'
 
 export const Icons = {
   tag: 'article',
-  extend: Flex,
+  extend: 'Flex',
 
   Header: {
     tag: 'header',
-    extend: Banner,
+    extend: 'Banner',
     Title: { text: 'Icons' },
     Paragraph: {
       P: {},
@@ -29,67 +25,5 @@ export const Icons = {
     }
   },
 
-  Section: {
-    extend: icon
-  }
-
-  // Flex: {
-  //   props: {
-  //     flow: 'column',
-  //     padding: 'E C1 - C1',
-  //     gap: 'A1'
-  //   },
-
-  //   Hgroup: {
-  //     props: {
-  //       flow: 'row'
-  //     },
-  //     Title: {
-  //       props: {
-  //         text: 'Library',
-  //         fontSize: 'C',
-  //         gap: 'Z2',
-  //         padding: '- C - Y',
-  //         fontWeight: '900',
-  //         ':after': {
-  //           content: '""',
-  //           height: '1px',
-  //           flex: '1',
-  //           display: 'block',
-  //           background: 'white .2',
-  //           round: 'C'
-  //         }
-
-  //       }
-  //     }
-  //   },
-
-  //   Grid: {
-  //     props: {
-  //       columns: 'repeat(12, 1fr)',
-  //       gap: 'Z'
-  //     },
-
-  //     childExtend: {
-  //       extend: 'Flex',
-  //       props: {
-  //         align: 'center',
-  //         aspectRatio: '1/1',
-  //         theme: 'dialog',
-  //         round: 'Z'
-  //       },
-  //       Icon: {
-  //         margin: 'auto',
-  //         fontSize: 'D'
-  //       }
-  //     },
-
-  //     $collection: ({ context }) => {
-  //       const { ICONS } = context.designSystem
-  //       return Object.keys(ICONS).map(name => ({
-  //         Icon: { name }
-  //       }))
-  //     }
-  //   }
-  // }
+  Section: { extend: icon }
 }

package/articles/Shadows.js

@@ -2,7 +2,7 @@
 
 import { Flex } from '@symbo.ls/atoms'
 import { Banner } from '@symbo.ls/banner'
-import { shadow } from '../_Sections'
+import { shadow } from '../blocks'
 
 export const Shadows = {
   tag: 'article',

package/articles/Shapes.js

@@ -3,7 +3,7 @@
 import { Flex } from '@symbo.ls/atoms'
 
 import { Banner } from '@symbo.ls/banner'
-import { shape } from '../_Sections'
+import { shape } from '../blocks'
 
 export const Shapes = {
   tag: 'article',

package/articles/Themes.js

@@ -2,7 +2,7 @@
 
 import { Flex } from '@symbo.ls/atoms'
 import { Icon } from '@symbo.ls/icon'
-import { ColorSection } from '../_Sections'
+import { ColorBlock } from '../blocks'
 
 export const Themes = {
   tag: 'article',
@@ -36,7 +36,7 @@ export const Themes = {
       gap: 'E'
     },
     childExtend: {
-      extend: ColorSection,
+      extend: ColorBlock,
       Hgroup: {},
       Grid: {
         props: {

package/articles/Typography.js

@@ -1,17 +1,15 @@
 'use strict'
 
-import { Flex } from '@symbo.ls/atoms'
 // import { font } from '../Sections'
-import { Banner } from '@symbo.ls/banner'
-import { font } from '../_Sections'
+import { FontsBlock } from '../blocks'
 
 export const Typography = {
   tag: 'article',
-  extend: Flex,
+  extend: 'Flex',
 
   Header: {
     tag: 'header',
-    extend: Banner,
+    extend: 'Banner',
     Title: {
       props: {
         text: 'type',
@@ -44,11 +42,8 @@ export const Typography = {
         }
       }
     },
-    childExtend: font,
-    ...[
-      {},
-      {}
-    ]
+    childExtend: FontsBlock,
+    ...[{}, {}]
   }
   // Section: {
 

package/{Section.js → blocks/Default.js}

@@ -2,7 +2,7 @@
 
 import { Hgroup } from '@symbo.ls/hgroup'
 
-export const DemoSection = {
+export const DefaultBlock = {
   tag: 'section',
   extend: Hgroup,
   props: {

package/{sections → blocks}/color.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { Grid } from '@symbo.ls/atoms'
-import { DemoSection } from './section'
+import { DefaultBlock } from './section'
 
 const ColorTemplate = {
   extend: 'Flex',
@@ -25,8 +25,8 @@ const ColorTemplate = {
   }
 }
 
-export const ColorSection = {
-  extend: DemoSection,
+export const ColorBlock = {
+  extend: DefaultBlock,
 
   Title: {
     props: {

package/{sections → blocks}/font.js

@@ -1,9 +1,9 @@
 'use stric'
 
-import { DemoSection } from './section'
+import { DefaultBlock } from './section'
 
-export const font = {
-  extend: DemoSection,
+export const FontsBlock = {
+  extend: DefaultBlock,
   props: {
     flex: '1',
     padding: 'D D D1 D',

package/{sections → blocks}/icon.js

@@ -1,10 +1,10 @@
 'use strict'
 
 import { Grid } from '@symbo.ls/atoms'
-import { DemoSection } from './section'
+import { DefaultBlock } from './section'
 
 export const icon = {
-  extend: DemoSection,
+  extend: DefaultBlock,
   props: {
     padding: 'E D E1 D',
     '@mobileL': { padding: 'D C' },

package/{sections → blocks}/section.js

@@ -2,12 +2,11 @@
 
 import { Hgroup } from '@symbo.ls/hgroup'
 
-export const DemoSection = {
+export const DefaultBlock = {
   tag: 'section',
   extend: Hgroup,
-  props: {
-    gap: 'A'
-  },
+
+  props: { gap: 'A' },
 
   Title: {
     tag: 'h5',

package/{sections → blocks}/shadow.js

@@ -1,10 +1,10 @@
 'use strict'
 
 import { Grid } from '@symbo.ls/atoms'
-import { DemoSection } from './section'
+import { DefaultBlock } from './section'
 
 export const shadow = {
-  extend: DemoSection,
+  extend: DefaultBlock,
   props: {
     padding: 'D2 D',
     '@mobileL': { padding: 'E C' },

package/index.js

@@ -1,35 +1,4 @@
 'use strict'
 
-import { Flex } from '@symbo.ls/atoms'
-
-import { Colors, Typography, Shadows, Icons, Spacing, Shapes } from './articles'
-
-export const StyleguidePage = {
-  extend: Flex,
-  tag: 'main',
-  props: {
-    theme: 'document',
-    position: 'relative',
-    flow: 'column',
-    overflow: 'hidden auto',
-    height: '100%',
-    width: '100%',
-    '@tabletM': {
-      fontSize: 'Z1'
-    },
-    '> article': {
-      flow: 'column',
-      '> header': {
-        border: 'solid, white .15',
-        borderWidth: '.5px 0 .5px 0'
-      }
-    }
-  },
-
-  Colors,
-  Typography,
-  Shadows,
-  Shapes,
-  Icons,
-  Spacing
-}
+export * from './pages/Components'
+export * from './pages/Styleguide'

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/preview",
-  "version": "2.11.265",
+  "version": "2.11.269",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "e256f5a24de103ca563abb7cf95fdc8723a2b1ab",
+  "gitHead": "9539c62d29cc279dbe7e149aa96bb8ee019c7119",
   "dependencies": {
     "@symbo.ls/atoms": "latest",
     "@symbo.ls/button": "latest"

package/{components.js → pages/Components.js}

@@ -1,10 +1,9 @@
 'use strict'
 
-import { Flex } from '@symbo.ls/atoms'
 import { Avatar, SearchWithButton } from '@symbo.ls/uikit'
 
 export const ComponentsPage = {
-  extend: Flex,
+  extend: 'Flex',
 
   state: {
     globalTheme: 'dark',
@@ -76,7 +75,7 @@ export const ComponentsPage = {
   },
 
   cnt: {
-    extend: Flex,
+    extend: 'Flex',
 
     props: {
       flow: 'column',
@@ -245,7 +244,7 @@ export const ComponentsPage = {
   },
 
   footer: {
-    extend: Flex,
+    extend: 'Flex',
     Search: {
       extend: SearchWithButton,
       props: {

package/pages/Styleguide.js

@@ -0,0 +1,35 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+
+import { Colors, Typography, Shadows, Icons, Spacing, Shapes } from '../articles'
+
+export const StyleguidePage = {
+  extend: Flex,
+  tag: 'main',
+  props: {
+    theme: 'document',
+    position: 'relative',
+    flow: 'column',
+    overflow: 'hidden auto',
+    height: '100%',
+    width: '100%',
+    '@tabletM': {
+      fontSize: 'Z1'
+    },
+    '> article': {
+      flow: 'column',
+      '> header': {
+        border: 'solid, white .15',
+        borderWidth: '.5px 0 .5px 0'
+      }
+    }
+  },
+
+  Colors,
+  Typography,
+  Shadows,
+  Shapes,
+  Icons,
+  Spacing
+}