smbls 0.8.15 → 0.8.18

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.8.15",
+  "version": "0.8.18",
   "repository": "https://github.com/rackai/symbols",
   "main": "src/index.js",
   "files": [

package/src/Box/index.js

@@ -2,9 +2,10 @@
 
 import { Shape, Position, Block, Text, Overflow, Transition, Transform, Responsive } from '..'
 
+const PropsCSS = {
+  class: { propsCSS: ({ props }) => props && props.css }
+}
+
 export const Box = {
-  proto: [Shape, Position, Block, Text, Overflow, Transition, Transform, Responsive],
-  class: {
-    fromProps: ({ props }) => props && props.css
-  }
+  proto: [Shape, Position, Block, Text, Overflow, Transition, Transform, Responsive, PropsCSS],
 }

package/src/Button/index.js

@@ -31,9 +31,7 @@ export const SquareButton = {
     round: 'Z'
   },
   class: {
-    squareButton: {
-      boxSizing: 'content-box'
-    }
+    squareButton: { boxSizing: 'content-box' }
   }
 }
 

package/src/Link/index.js

@@ -7,8 +7,6 @@ export const Link = {
   proto: [Shape, Text],
   tag: 'a',
   props: {
-    href: '',
-    target: '',
     theme: 'link',
     aria: {},
     fontWeight: 'bold',

package/src/Shape/index.js

@@ -1,9 +1,9 @@
 'use strict'
 
-import { isArray, isObject } from '@domql/utils'
+import { isArray, isObject, exec } from '@domql/utils'
 import { mapSpacing, getTheme, getColor } from '@symbo.ls/scratch'
 
-import style, { shape, depth } from './style'
+import style, { SHAPES, depth } from './style'
 
 const isBorderStyle = str =>
   ['none','hidden','dotted','dashed','solid','double','groove','ridge','inset','outset','initial'].some(v => str.includes(v))
@@ -22,8 +22,17 @@ const diffBorder = (border, key = 'border') => {
 export const Shape = {
   class: {
     default: style,
-    shape: ({ props }) => props.shape ? shape[props.shape] : null,
-    shapeDirection: ({ props }) => props.shape ? shape[props.shape][props.shapeDirection || 'top'] : null,
+    shape: (element) => {
+      const { props } = element
+      const { shape } = props
+      return shape ? exec(SHAPES[shape], element) : null
+    },
+    shapeDirection: ({ props }) => {
+      const { shape, shapeDirection } = props
+      if (!shape || !shapeDirection) return
+      const shapeDir = SHAPES[shape + 'Direction']
+      return shape ? shapeDir[shapeDirection || 'top'] : null
+    },
     shapeDirectionColor: ({ props, ...el }) => props.shapeDirection ? { '&:before': { borderColor: el.class.backgroundColor } } : null,
     depth: ({ props }) => depth[props.depth],
     round: ({ props, key, ...el }) => props.round ? (mapSpacing(props.round, 'borderRadius') || ({ borderRadius: props.round })) : null,

package/src/Shape/style.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { UNIT } from '@symbo.ls/scratch'
+import { UNIT, getColor } from '@symbo.ls/scratch'
 
 export default {
   boxSizing: 'border-box'
@@ -15,21 +15,25 @@ export const depth = {
   42: { boxShadow: `rgba(0,0,0,.10) 0 20${UNIT.default} 42${UNIT.default}` }
 }
 
-export const shape = {
+export const SHAPES = {
   rectangle: {},
   circle: { borderRadius: '100%' },
   bubble: {},
-  tooltip: {
+
+  tooltip: ({ props }) => ({
     position: 'relative',
     '&:before': {
       content: '""',
       display: 'block',
       width: '0px',
       height: '0px',
-      border: '6px solid #343434',
+      border: `6px solid ${getColor(props.background)}`,
       position: 'absolute',
       borderRadius: '2px'
-    },
+    }
+  }),
+
+  tooltipDirection: {
     top: {
       '&:before': {
         top: '2px',
@@ -59,17 +63,21 @@ export const shape = {
       }
     }
   },
-  tag: {
+
+  tag: ({ props }) => ({
     position: 'relative',
     '&:before': {
       content: '""',
       display: 'block',
       width: '0',
       height: '0',
-      border: '16px solid #343434',
+      border: `16px solid ${getColor(props.background)}`,
       borderRadius: '6px',
       position: 'absolute'
     },
+  }),
+
+  tagDirection: {
     top: {
       '&:before': {
         bottom: '100%',