smbls 0.14.4 → 0.14.6

package/package.json

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

package/src/Button.js

@@ -1,11 +1,10 @@
 'use strict'
 
-import { IconText } from '.'
+import { IconText, Focusable } from '.'
 
 const style = {
   appearance: 'none',
   border: 'none',
-  outline: 0,
   cursor: 'pointer',
   fontFamily: 'inherit',
   '& > *': {
@@ -14,11 +13,12 @@ const style = {
 }
 
 export const Button = {
-  extend: IconText,
+  extend: [Focusable, IconText],
   tag: 'button',
   props: {
     fontSize: 'A',
     type: 'button',
+    border: 'none',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -55,38 +55,7 @@ export const CircleButton = {
 
 export const KangorooButton = {
   extend: Button,
+  childExtend: IconText,
 
-  props: {
-    theme: 'quinary',
-    round: 'Z2',
-    padding: 'X1 X1 X1 A2',
-    size: 'A',
-    gap: 'A',
-    transition: 'A defaultBezier',
-    transitionProperty: 'background, color, opacity',
-
-    label: {
-      gap: 'X1',
-      text: 'Become PRO',
-      alignItems: 'center',
-      fontWeight: 'bold',
-      icon: {
-        name: 'star',
-        color: 'yellow'
-      }
-    },
-    child: {
-      theme: 'tertiary',
-      round: 'Z',
-      size: 'Z',
-      padding: 'Z A2',
-      text: '1 month free',
-      opacity: '.85'
-    },
-
-    style
-  },
-
-  label: { extend: IconText },
-  child: { extend: IconText }
+  props: { style }
 }

package/src/Field.js

@@ -1,9 +1,10 @@
 'use strict'
 
-import { IconText, Input } from '.'
+import { IconText, Input, Focusable } from '.'
 
 export const Field = {
-  extend: IconText,
+  extend: [IconText],
+
   props: (el, s) => ({
     value: s[el.key],
 
@@ -36,5 +37,5 @@ export const Field = {
     }
   }),
 
-  input: { extend: Input }
+  input: { extend: [Focusable, Input] }
 }

package/src/Input.js

@@ -1,10 +1,15 @@
 'use strict'
 
+import { Focusable } from './'
+
 export const Input = {
+  extend: [Focusable],
   tag: 'input',
 
   props: {
+    border: 'none',
     type: 'input',
+    theme: 'quaternary',
     fontSize: 'A',
     round: 'C',
     lineHeight: 1,

package/src/Interaction.js

@@ -6,3 +6,37 @@ export const Interaction = {
     cursor: ({ props }) => props.cursor && ({ cursor: props.cursor })
   }
 }
+
+export const Hoverable = {
+  props: {
+    transition: 'B',
+    transitionProperty: 'opacity, transform',
+    opacity: 0.85,
+
+    ':hover': {
+      opacity: 0.9,
+      transform: 'scale(1.015)'
+    },
+    ':active': {
+      opacity: 1,
+      transform: 'scale(1.015)'
+    },
+    '.active': {
+      opacity: 1
+    }
+  }
+}
+
+export const Focusable = {
+  props: {
+    outline: 'none',
+    ':focus-visible': {
+      opacity: 1,
+      outline: 'solid, X, blue .3'
+    }
+  },
+
+  attr: {
+    placeholder: ({ props }) => props.placeholder
+  }
+}

package/src/Label.js

@@ -1,20 +1,25 @@
 'use strict'
-import { Block } from './Block'
-import { Shape } from './Shape'
-import { Text } from './Text'
 
-export const Label = {
-  extend: [Shape, Block, Text],
+import { Button } from '.'
 
-  style: { lineHeight: 1 },
+export const Label = {
+  extend: Button,
 
   props: {
+    fontSize: 'Z2',
     emoji: '👍',
     text: '3',
     padding: 'X2 Z',
     round: 'C',
-    depth: 16
+    lineHeight: 1,
+    gap: 'X2',
+    depth: 16,
+    fontWeight: '500',
+    background: 'blue .3',
+    color: 'white'
   },
 
-  emoji: ({ props }) => props.emoji
+  emoji: {
+    props: ({ parent }) => ({ text: parent.props.emoji })
+  }
 }

package/src/Link.js

@@ -1,8 +1,10 @@
 'use strict'
 
 import { exec } from '@domql/utils'
+import { Focusable } from './Interaction'
 
 export const Link = {
+  extend: [Focusable],
   tag: 'a',
   props: {
     aria: {},

package/src/Notification.js

@@ -11,6 +11,12 @@ export const Notification = {
     gap: 'X2',
     style: { cursor: 'pointer' },
 
+    icon: {
+      icon: {
+        name: 'info outline'
+      }
+    },
+
     article: {
       flow: 'column',
       align: 'flex-start',
@@ -29,13 +35,12 @@ export const Notification = {
   },
 
   icon: {
-    extend: [IconText],
-    props: {
-      icon: {
-        name: 'info outline'
-      }
-    }
+    extend: [IconText]
   },
 
-  article: { extend: Flex }
+  article: {
+    extend: Flex,
+    title: {},
+    p: {}
+  }
 }

package/src/Shape/style.js

@@ -18,21 +18,22 @@ export const SHAPES = {
 
   tooltip: ({ props }) => ({
     position: props.position || 'relative',
-    ':before': {
+    '&:before': {
       content: '""',
       display: 'block',
       width: '0px',
       height: '0px',
-      border: `6px, solid`,
+      border: `.35em solid`,
+      borderColor: getColor(props.background) || getColor(props.backgroundColor),
       position: 'absolute',
-      borderRadius: 'X2'
+      borderRadius: '.15em'
     }
   }),
 
   tooltipDirection: {
     top: {
       '&:before': {
-        top: '2px',
+        top: '-.1em',
         left: '50%',
         transform: 'translate(-50%, -50%) rotate(45deg)'
       }
@@ -40,13 +41,13 @@ export const SHAPES = {
     right: {
       '&:before': {
         top: '50%',
-        right: '-10px',
+        right: '-.1em',
         transform: 'translate(-50%, -50%) rotate(45deg)'
       }
     },
     bottom: {
       '&:before': {
-        bottom: '-10px',
+        bottom: '-.1em',
         left: '50%',
         transform: 'translate(-50%, -50%) rotate(45deg)'
       }
@@ -54,7 +55,7 @@ export const SHAPES = {
     left: {
       '&:before': {
         top: '50%',
-        left: '2px',
+        left: '-.1em',
         transform: 'translate(-50%, -50%) rotate(45deg)'
       }
     }

package/src/Theme.js

@@ -1,6 +1,5 @@
 'use strict'
 
-import { isArray, isObject } from '@domql/utils'
 import { getSpacingByKey, getMediaTheme, getColor, getMediaColor } from '@symbo.ls/scratch'
 
 import { depth } from './Shape/style'
@@ -8,15 +7,14 @@ import { depth } from './Shape/style'
 const isBorderStyle = str =>
   ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial'].some(v => str.includes(v))
 
-const transformBorder = (border, key = 'border') => {
-  const obj = {}
-  const arr = isObject(border) ? Object.values(border) : isArray(border) ? border : border.split(', ')
-  arr.map(v => {
-    if (v.slice(-2) === 'px' || v.slice(-2) === 'em') obj[`${key}Width`] = v // TODO: add map spacing
-    else if (isBorderStyle(v)) obj[`${key}Style`] = v || 'solid'
-    else if (getColor(v)) obj[`${key}Color`] = getColor(v)
-  })
-  return obj
+const transformBorder = border => {
+  const arr = border.split(', ')
+  return arr.map(v => {
+    if (isBorderStyle(v)) return v || 'solid'
+    else if (v.slice(-2) === 'px' || v.slice(-2) === 'em') return v // TODO: add map spacing
+    else if (getColor(v).length > 2) return getColor(v)
+    return getSpacingByKey(v, 'border').border
+  }).join(' ')
 }
 
 const transformTextStroke = stroke => ({
@@ -65,14 +63,28 @@ export const Theme = {
 
     textStroke: ({ props }) => props.textStroke ? transformTextStroke(props.textStroke) : null,
 
-    border: ({ props }) => props.border ? transformBorder(props.border) : null,
+    outline: ({ props }) => props.outline && ({
+      outline: transformBorder(props.outline)
+    }),
+
+    border: ({ props }) => props.border && ({
+      border: transformBorder(props.border)
+    }),
     borderColor: ({ props }) => (props.borderColor) && getMediaColor(props.borderColor, 'borderColor'),
     borderStyle: ({ props }) => props.borderStyle && ({ borderStyle: props.borderStyle }),
 
-    borderLeft: ({ props }) => props.borderLeft ? transformBorder(props.borderLeft, 'borderLeft') : null,
-    borderTop: ({ props }) => props.borderTop ? transformBorder(props.borderTop, 'borderTop') : null,
-    borderRight: ({ props }) => props.borderRight ? transformBorder(props.borderRight, 'borderRight') : null,
-    borderBottom: ({ props }) => props.borderBottom ? transformBorder(props.borderBottom, 'borderBottom') : null,
+    borderLeft: ({ props }) => props.borderLeft && ({
+      borderLeft: transformBorder(props.borderLeft)
+    }),
+    borderTop: ({ props }) => props.borderTop && ({
+      borderTop: transformBorder(props.borderTop)
+    }),
+    borderRight: ({ props }) => props.borderRight && ({
+      borderRight: transformBorder(props.borderRight)
+    }),
+    borderBottom: ({ props }) => props.borderBottom && ({
+      borderBottom: transformBorder(props.borderBottom)
+    }),
 
     boxShadow: ({ props }) => props.boxShadow ? transformShadow(props.boxShadow) : null,
 

package/src/Tooltip.js

@@ -0,0 +1,33 @@
+'use strict'
+
+import { Button, Flex } from './'
+
+export const Tooltip = {
+  extend: [Button, Flex],
+  props: {
+    background: 'black',
+    color: 'white',
+    flow: 'column',
+    shape: 'tooltip',
+    shapeDirection: 'top',
+    padding: 'Z2',
+    round: 'X2',
+    minWidth: 'D2',
+    gap: 'X1',
+
+    title: {
+      color: 'gray12',
+      text: 'And tooltip is coming'
+    },
+    p: {
+      fontSize: 'Z2',
+      margin: '0',
+      color: 'gray6',
+      text: 'and winter too',
+      fontWeight: '400'
+    }
+  },
+
+  title: {},
+  p: {}
+}

package/src/index.js

@@ -6,6 +6,7 @@ export * from '@symbo.ls/init'
 
 export * from './styles'
 
+// atoms
 export * from './Text'
 export * from './Block'
 export * from './Shape'
@@ -18,12 +19,14 @@ export * from './Position'
 export * from './Overflow'
 export * from './Transform'
 export * from './Timing'
+
 export * from './Media'
 export * from './Interaction'
 export * from './XYZ'
 
 export * from './Box'
 
+// atoms
 export * from './SVG'
 export * from './Icon'
 export * from './Img'
@@ -33,6 +36,7 @@ export * from './Input'
 export * from './Field'
 export * from './Button'
 
+// components
 export * from './ButtonSet'
 export * from './User'
 export * from './Banner'

package/src/Tooltip/index.js

@@ -1,13 +0,0 @@
-'use strict'
-
-import Shape from '../Shape'
-
-import style from './style'
-
-export const Tooltip = {
-  style,
-  extend: Shape,
-  props: { theme: 'purple2' },
-  caption: 'And tooltip is coming',
-  span: 'and winter too'
-}

package/src/Tooltip/style.js

@@ -1,12 +0,0 @@
-'use strict'
-
-export default {
-  textAlign: 'center',
-  padding: '1.2em',
-  caption: {
-    whiteSpace: 'nowrap'
-  },
-  span: {
-    opacity: '.5'
-  }
-}