smbls 0.14.5 → 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.5",
+  "version": "0.14.6",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [

package/src/Button.js

@@ -18,6 +18,7 @@ export const Button = {
   props: {
     fontSize: 'A',
     type: 'button',
+    border: 'none',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -54,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,13 +1,15 @@
 'use strict'
 
-import { Focusable } from './Interaction'
+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/Label.js

@@ -6,7 +6,7 @@ export const Label = {
   extend: Button,
 
   props: {
-    fontSize: 'Z',
+    fontSize: 'Z2',
     emoji: '👍',
     text: '3',
     padding: 'X2 Z',

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/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'
@@ -25,6 +26,7 @@ export * from './XYZ'
 
 export * from './Box'
 
+// atoms
 export * from './SVG'
 export * from './Icon'
 export * from './Img'
@@ -34,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'
-  }
-}