smbls 0.14.9 → 0.15.1

package/package.json

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

package/src/Button.js

@@ -1,6 +1,7 @@
 'use strict'
 
-import { IconText, Focusable } from '.'
+import { FocusableComponent } from './atoms'
+import { IconText } from '.'
 
 const style = {
   appearance: 'none',
@@ -13,7 +14,7 @@ const style = {
 }
 
 export const Button = {
-  extend: [Focusable, IconText],
+  extend: [FocusableComponent, IconText],
   tag: 'button',
   props: {
     fontSize: 'A',

package/src/{Slider → Range}/index.js

@@ -49,7 +49,7 @@ const theme = {
   }
 }
 
-export const RangeSlider = {
+export const Range = {
   style,
   props: theme,
 
@@ -63,10 +63,10 @@ const listenProp = (el, prop, def) => {
   return r
 }
 
-export const Slider = {
+export const RangeWithButtons = {
   minus: {
     extend: SquareButton,
-    props: { icon: 'minus' },
+    props: { theme: 'tertiary', icon: 'minus' },
     on: {
       click: (ev, el, s) => {
         el.props && isFunction(el.props.click) && el.props.click(ev, el, s)
@@ -87,7 +87,7 @@ export const Slider = {
     }
   },
   input: {
-    extend: RangeSlider,
+    extend: Range,
     attr: {
       value: (el, s) => listenProp(el, 'value', 50),
       min: (el, s) => listenProp(el, 'min', 0),
@@ -101,7 +101,7 @@ export const Slider = {
   },
   plus: {
     extend: SquareButton,
-    props: { icon: 'plus' },
+    props: { theme: 'tertiary', icon: 'plus' },
     on: {
       click: (ev, el, s) => {
         el.props && isFunction(el.props.click) && el.props.click(ev, el, s)

package/src/atoms/FocusableComponent.js

@@ -0,0 +1,31 @@
+'use strict'
+
+import { Focusable } from '.'
+
+const style = {
+  appearance: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  fontFamily: 'inherit',
+  '& > *': {
+    pointerEvents: 'none'
+  }
+}
+
+export const FocusableComponent = {
+  extend: Focusable,
+  tag: 'button',
+  props: {
+    fontSize: 'A',
+    type: 'button',
+    border: 'none',
+    textDecoration: 'none',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    fontFamily: 'inherit',
+    style
+  },
+  attr: {
+    type: ({ props }) => props.type
+  }
+}

package/src/atoms/Interaction.js

@@ -29,6 +29,7 @@ export const Hoverable = {
 
 export const Focusable = {
   props: {
+    border: 'none',
     outline: 'none',
     ':focus-visible': {
       opacity: 1,

package/src/atoms/Shape/style.js

@@ -14,18 +14,22 @@ export const depth = {
 const getComputedBackgroundColor = el => {
   const { props, node } = el
   const propsColor = getColor(props.borderColor) || getColor(props.backgroundColor) || getColor(props.background)
+  // const propsTheme = getTheme(props.theme)
 
   if (!propsColor) {
     const computedStyle = window.getComputedStyle(node)
-    // console.group(el.key)
-    // console.log(getColor(props.borderColor))
-    // console.log(getColor(props.backgroundColor))
-    // console.log(getColor(props.background))
-    // console.log(computedStyle.getPropertyValue('border-color'))
-    // console.log(computedStyle.getPropertyValue('background'))
-    // console.log(computedStyle.getPropertyValue('background-color'))
-    // console.log(el)
-    // console.groupEnd(el.key)
+    // if (props.shapeDirection) {
+    //   console.group(el.parent.parent.parent.key + ' - ' + el.parent.key)
+    //   console.log(propsTheme)
+    //   console.log(getColor(props.borderColor))
+    //   console.log(getColor(props.backgroundColor))
+    //   console.log(getColor(props.background))
+    //   console.log(computedStyle.getPropertyValue('border-color'))
+    //   console.log(computedStyle.getPropertyValue('background'))
+    //   console.log(computedStyle.getPropertyValue('background-color'))
+    //   console.log(el)
+    //   console.groupEnd(el.parent.parent.parent.key + ' - ' + el.parent.key)
+    // }
     return computedStyle.getPropertyValue('border-color') ||
       computedStyle.getPropertyValue('background') ||
       computedStyle.getPropertyValue('background-color')

package/src/atoms/index.js

@@ -7,6 +7,7 @@ export * from './Grid'
 export * from './Img'
 export * from './Media'
 export * from './Interaction'
+export * from './FocusableComponent'
 export * from './Overflow'
 export * from './Position'
 export * from './Pseudo'

package/src/index.js

@@ -18,11 +18,11 @@ export * from './Button'
 export * from './ButtonSet'
 export * from './User'
 export * from './Banner'
-export * from './Slider'
+export * from './Select'
 export * from './Notification'
 export * from './Dropdown'
 export * from './DatePicker'
 export * from './Tooltip'
 export * from './Label'
 export * from './Pills'
-export * from './Select'
+export * from './Range'