smbls 0.8.10 → 0.8.13

package/package.json

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

package/src/Block/index.js

@@ -2,9 +2,10 @@
 
 import { SPACING, mapSpacing } from '@symbo.ls/scratch'
 
-export const mapBasedOnRatio = (props, prop) => {
+export const mapBasedOnRatio = (props, prop, unit) => {
   const { spacingRatio } = props
   const val = props[prop]
+  // TODO: move this to mapSpacing
   if (spacingRatio) {
     const params = SPACING[spacingRatio]
 
@@ -20,11 +21,9 @@ export const mapBasedOnRatio = (props, prop) => {
       }
     }
 
-    const result = mapSpacing(val, prop, params)
-
-    return result
+    return mapSpacing(val, prop, params, unit)
   }
-  return mapSpacing(val, prop)
+  return mapSpacing(val, prop, null, unit)
 }
 
 export const Block = {

package/src/Icon/index.js

@@ -8,7 +8,7 @@ export const Icon = {
   proto: SVG,
   style,
   define: { name: param => param },
-  name: ({ props }) => props.icon,
+  name: ({ props }) => props.name || props.icon,
   attr: { viewBox: '0 0 24 24' },
   src: ({ key, name }) => name || key || 'noIcon'
 }

package/src/Shape/index.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import { isArray, isObject } from '@domql/utils'
 import { mapSpacing, getTheme, getColor } from '@symbo.ls/scratch'
 
 import style, { shape, depth } from './style'
@@ -9,7 +10,7 @@ const isBorderStyle = str =>
 
 const diffBorder = (border, key = 'border') => {
   const obj = {}
-  const arr = border.split(' ')
+  const arr = isObject(border) ? Object.values(border) : isArray(border) ? border : border.split(', ')
   arr.map(v => {
     if (v.includes('px')) obj[`${key}Width`] = v
     else if (isBorderStyle(v)) obj[`${key}Style`] = v || 'solid'
@@ -26,6 +27,7 @@ export const Shape = {
     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,
+    borderRadius: ({ props, key, ...el }) => props.borderRadius ? (mapSpacing(props.borderRadius, 'borderRadius') || ({ borderRadius: props.borderRadius })) : null,
     theme: ({ props }) => props.theme ? getTheme(props.theme) : null,
     color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,
     background: ({ props }) => props.background ? ({ backgroundColor: getColor(props.background) }) : null,

package/src/Text/index.js

@@ -11,6 +11,7 @@ export const Text = {
     fontSize: ({ props }) => props.fontSize ? mapFontSize(props.fontSize) : null,
     fontFamily: ({ props }) => props.fontFamily && ({ fontFamily: getFontFamily(FONT_FAMILY, props.fontFamily) || props.fontFamily }),
     lineHeight: ({ props }) => props.lineHeight && ({ lineHeight: props.lineHeight }),
+    // lineHeight: ({ props }) => props.lineHeight && mapBasedOnRatio(props, 'lineHeight', null, ''),
     textDecoration: ({ props }) => props.textDecoration && ({ textDecoration: props.textDecoration }),
     textTransform: ({ props }) => props.textTransform && ({ textTransform: props.textTransform }),
     textAlign: ({ props }) => props.textAlign && ({ textAlign: props.textAlign }),