smbls 0.8.5 → 0.8.8

package/package.json

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

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, Responsive } from '..'
 
 export const Box = {
-  proto: [Shape, Position, Block, Text, Responsive],
+  proto: [Shape, Position, Block, Text, Overflow, Transition, Responsive],
   class: {
     fromProps: ({ props }) => props && props.css
   }

package/src/Link/index.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import { exec } from '@domql/utils'
 import { Shape, Text } from '..'
 
 export const Link = {
@@ -9,10 +10,12 @@ export const Link = {
     href: '',
     target: '',
     theme: 'link',
-    aria: {}
+    aria: {},
+    fontWeight: 'bold',
+    textDecoration: 'none'
   },
   attr: {
-    href: ({ props }) => props.href,
+    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

@@ -7,14 +7,10 @@ export const Responsive = {
     init: (el, s) => {
       const { props } = el
 
-      // Object.keys(props)
-      //   .filter(v => v.slice(0, 1) === '@')
-      //   .map()
-
       for (const screen in props) {
         if (screen.slice(0, 1) === '@') {
-          const screenName = screen.slice(1)
-          const responsiveKey = `@media screen and ${RESPONSIVE[screenName]}`
+          const mediaName = screen.slice(1)
+          const responsiveKey = `@media screen and ${RESPONSIVE[mediaName]}`
           const screenProps = props[screen]
           const calculatedScreenProps = {}
 
@@ -41,6 +37,34 @@ export const Responsive = {
               [responsiveKey]: calculatedScreenProps
             }
           }
+        } else if (screen.slice(0, 1) === ':') {
+          const selectorProps = {}
+          const selectorName = screen.slice(1)
+          const underSelectorProps = props[screen]
+          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(calculatedProp)) {
+              calculatedProp = Object.assign({}, ...calculatedProp)
+            }
+
+            for (const finalProp in calculatedProp) {
+              selectorProps[finalProp] = calculatedProp[finalProp]
+            }
+          }
+
+          const { selectors } = el.class
+          if (selectors) selectors[selectorKey] = selectorProps
+          else {
+            el.class.selectors = {
+              [selectorKey]: selectorProps
+            }
+          }
         }
       }
     }

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,8 @@
+'use strict'
+
+export const Transition = {
+  class: {
+    transition: ({ props }) => ({ transition: props.transition }),
+    transitionProperty: ({ props }) => ({ transitionProperty: 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'