smbls 0.8.6 → 0.8.9

package/package.json

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

package/src/Block/index.js

@@ -87,6 +87,9 @@ export const Block = {
     },
     flex: ({ props }) => props.flex && ({ flex: props.flex }),
 
+    gridColumn: ({ props }) => props.gridColumn && ({ gridColumn: props.gridColumn }),
+    gridRow: ({ props }) => props.gridRow && ({ gridRow: props.gridRow }),
+
     size: ({ props }) => {
       // if (typeof props.size !== 'string') return
       // const [fontSize, padding, margin] = props.size.split(' ')

package/src/Box/index.js

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

package/src/Link/index.js

@@ -10,10 +10,12 @@ export const Link = {
     href: '',
     target: '',
     theme: 'link',
-    aria: {}
+    aria: {},
+    fontWeight: 'bold',
+    textDecoration: 'none'
   },
   attr: {
-    href: element => exec(element.props.href, element),
+    href: element => exec(element.props.href, element) || exec(element.props, element).href,
     target: ({ props }) => props.target,
     'aria-label': ({ props }) => props.aria.label || props.text
   }

package/src/Responsive/index.js

@@ -41,15 +41,16 @@ export const Responsive = {
           const selectorProps = {}
           const selectorName = screen.slice(1)
           const underSelectorProps = props[screen]
-          const selectorKey = `&${selectorName}`
+          const selectorKey = `&${screen}`
+
 
           for (const prop in underSelectorProps) {
             const classProp = el.class[prop]
             if (typeof classProp !== 'function') continue
             let calculatedProp = classProp({ props: underSelectorProps })
 
-            if (Array.isArray(underSelectorProps)) {
-              underSelectorProps = Object.assign({}, ...underSelectorProps)
+            if (Array.isArray(calculatedProp)) {
+              calculatedProp = Object.assign({}, ...calculatedProp)
             }
 
             for (const finalProp in calculatedProp) {

package/src/Text/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { mapFontSize } from '@symbo.ls/scratch'
+import { mapFontSize, getFontFamily, FONT_FAMILY } from '@symbo.ls/scratch'
 
 export const Text = {
   props: {},
@@ -9,6 +9,7 @@ export const Text = {
 
   class: {
     fontSize: ({ props }) => props.fontSize ? mapFontSize(props.fontSize) : null,
+    fontFamily: ({ props }) => props.fontFamily && ({ fontFamily: getFontFamily(FONT_FAMILY, props.fontFamily) || props.fontFamily }),
     lineHeight: ({ props }) => ({ lineHeight: props.lineHeight }),
     textDecoration: ({ props }) => ({ textDecoration: props.textDecoration }),
     textTransform: ({ props }) => ({ textTransform: props.textTransform }),

package/src/Transition/index.js

@@ -0,0 +1,11 @@
+'use strict'
+
+export const Transition = {
+  class: {
+    transition: ({ props }) => ({ transition: props.transition }),
+    transitionProperty: ({ props }) => ({
+      transitionProperty: props.transitionProperty,
+      willChange: props.transitionProperty
+    })
+  }
+}

package/src/Transition/style.js

@@ -0,0 +1,2 @@
+'use strict'
+

package/src/index.js

@@ -13,6 +13,7 @@ export * from './Direction'
 export * from './Position'
 export * from './Overflow'
 export * from './Transform'
+export * from './Transition'
 export * from './Responsive'
 
 export * from './Box'