@symbo.ls/shape - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

index.js

@@ -23,45 +23,17 @@ 'use strict'
   class: {
-    default: style,
-    shape: ({ props }) => props.shape ? shape[props.shape] : null,
-    shapeDirection: ({ props }) => props.shape ? shape[props.shape][props.shapeDirection || 'top'] : null,
-    shapeDirectionColor: ({ props, ...el }) => props.shapeDirection ? { '&:before': { borderColor: el.class.backgroundColor } } : null,
-    depth: ({ props }) => depth[props.depth],
-    round: ({ props, key, ...el }) => props.round ? (mapSpacing(props.round, 'borderRadius') || ({ borderRadius: props.round })) : null,
-    theme: ({ props }) => props.theme ? getTheme(props.theme) : null,
-    color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,
-    background: ({ props }) => props.background ? ({ backgroundColor: getColor(props.background) }) : null,
-    // border: ({ props }) => props.border ? ({ borderColor: getColor(props.border) }) : null,
-
-    border: ({ props }) => props.border ? diffBorder(props.border) : null,
-    borderLeft: ({ props }) => props.borderLeft ? diffBorder(props.borderLeft, 'borderLeft') : null,
-    borderTop: ({ props }) => props.borderTop ? diffBorder(props.borderTop, 'borderTop') : null,
-    borderRight: ({ props }) => props.borderRight ? diffBorder(props.borderRight, 'borderRight') : null,
-    borderBottom: ({ props }) => props.borderBottom ? diffBorder(props.borderBottom, 'borderBottom') : null,
-
-    opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
-    visibility: ({ props }) => props.visibility && ({ visibility: props.visibility })
+    shape: (element) => {
+      const { props } = element
+      const { shape } = props
+      return shape ? exec(SHAPES[shape], element) : null
+    },
+    shapeDirection: ({ props }) => {
+      const { shape, shapeDirection } = props
+      if (!shape || !shapeDirection) return
+      const shapeDir = SHAPES[shape + 'Direction']
+      return shape ? shapeDir[shapeDirection || 'top'] : null
+    },
+    shapeDirectionColor: ({ props, ...el }) => props.shapeDirection ? { '&:before': { borderColor: el.class.backgroundColor } } : null
   }
-
-  // mode: {
-  //   dark: {
-  //     theme: 'white'
-  //   }
-  // }
-
-  // theme: {
-  //   default: 'primary',
-  //   dark: 'whiteish'
-  // }
-
-  // size: {
-  //   default: 'auto',
-  //   mobile: 'fit'
-  // }
-
-  // padding: {
-  //   default: ratio.phi,
-  //   mobile: ratio.perfect
-  // }
 }
 
 export default Shape

package.json

 {
   "name": "@symbo.ls/shape",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "09537187e26571dc2b03524bed0de775c9f66fa8",
+  "gitHead": "f70e3ed520d8f5419235b2ad355ed579e4df3435",
   "dependencies": {
@@ -8,0 +8,0 @@ "@symbo.ls/scratch": "latest"

packages/react/package.json

 {
   "name": "@symbo.ls/react-shape",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "license": "MIT",
-  "gitHead": "09537187e26571dc2b03524bed0de775c9f66fa8",
+  "gitHead": "f70e3ed520d8f5419235b2ad355ed579e4df3435",
   "dependencies": {
@@ -8,0 +8,0 @@ "@symbo.ls/shape": "latest",

style.js

 'use strict'
 
-import { UNIT } from '@symbo.ls/scratch'
+import { UNIT, getColor, getTheme } from '@symbo.ls/scratch'
 
-export default {
-  boxSizing: 'border-box'
-}
-
 export const depth = {
@@ -18,7 +14,8 @@ 4: { boxShadow: `rgba(0,0,0,.10) 0 2${UNIT.default} 4${UNIT.default}` },
 
-export const shape = {
+export const SHAPES = {
   rectangle: {},
   circle: { borderRadius: '100%' },
   bubble: {},
-  tooltip: {
+
+  tooltip: ({ props }) => ({
     position: 'relative',
@@ -30,6 +27,9 @@ '&:before': {
       height: '0px',
-      border: '6px solid #343434',
+      border: `6px solid ${getColor(props.background) || (props.theme && getTheme(props.theme).backgroundColor)}`,
       position: 'absolute',
       borderRadius: '2px'
-    },
+    }
+  }),
+
+  tooltipDirection: {
     top: {
@@ -64,3 +64,4 @@ '&:before': {
   },
-  tag: {
+
+  tag: ({ props }) => ({
     position: 'relative',
@@ -72,6 +73,9 @@ '&:before': {
       height: '0',
-      border: '16px solid #343434',
+      border: `16px solid ${getColor(props.background) || (props.theme && getTheme(props.theme).backgroundColor)}`,
       borderRadius: '6px',
       position: 'absolute'
-    },
+    }
+  }),
+
+  tagDirection: {
     top: {
@@ -78,0 +82,0 @@ '&:before': {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

4499

decreased by-18.95%

Lines of code

137

decreased by-13.29%

No dependency changes