@loomhq/lens - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/components/button/button.js

@@ -0,5 +1,6 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n  border: 0;\n  appearance: none;\n  font: inherit;\n  font-weight: 600;\n  border-radius: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  appearance: none;\n  font: inherit;\n  font-weight: 600;\n  transition: 0.6s background-color, 0.6s border-color;\n  border-radius: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  &:hover {\n    transition: 0.3s background-color, 0.3s border-color;\n  }\n  \n  &:active {\n    transition: 0s background-color, 0s border-color;\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 4px ", ";\n    outline: none;\n\n    &:not(.focus-visible) {\n      box-shadow: none;\n    }\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n"]);
 
@@ -14,3 +15,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n    cursor: default;\n    background-color: ", ";\n    color: ", ";\n  "]);
+  var data = _taggedTemplateLiteral(["\n    cursor: default;\n    background-color: ", ";\n    color: ", ";\n    border: 0;\n  "]);
 
@@ -59,2 +60,3 @@ _templateObject4 = function _templateObject4() {
 import { u } from '../../utilities.js';
+import 'focus-visible/dist/focus-visible.js';
 var sizeStyles = {
@@ -65,13 +67,13 @@ medium: css(_templateObject(), u(2.5), u(5), textSizes.medium.fontSize, textSizes.medium.lineHeight),
 
-var getKindStyles = function getKindStyles(color, boxType) {
+var getVariantStyles = function getVariantStyles(color, boxType) {
   if (boxType === 'fill') {
-    return "\n      background-color: ".concat(color, ";\n      color: white;\n    ");
+    return "\n      border: 0;\n      background-color: ".concat(color, ";\n      color: white;\n\n      &:hover {\n        background-color: ").concat(Color(color).darken(0.15), ";\n      }\n      \n      &:active {\n        background-color: ").concat(Color(color).darken(0.4), ";\n      }\n    ");
   }
 
   if (boxType === 'outline') {
-    return "\n      border: 1px solid ".concat(Color(color).alpha(0.4), ";\n      background-color: transparent;\n      color: ").concat(color, ";\n    ");
+    return "\n      border: 1px solid ".concat(Color(color).alpha(0.4), ";\n      background-color: transparent;\n      color: ").concat(color, ";\n\n      &:hover {\n        border-color: ").concat(Color(color).alpha(0.6).darken(0.15), ";\n      }\n      \n      &:active {\n        border-color: ").concat(Color(color).alpha(0.6).darken(0.4), ";\n        background-color: ").concat(Color(color).alpha(0.1), ";\n      }\n    ");
   }
 };
 
-var kindStyles = {
+var variantStyles = {
   neutral: {
@@ -105,3 +107,5 @@ color: colors.body,
 }, function (props) {
-  return !props.disabled && getKindStyles(kindStyles[props.kind].color, kindStyles[props.kind].boxType);
+  return !props.disabled && getVariantStyles(variantStyles[props.variant].color, variantStyles[props.variant].boxType);
+}, function (props) {
+  return Color(variantStyles[props.variant].color).alpha(0.4).string();
 });
@@ -113,20 +117,22 @@
       children = _ref.children,
-      kind = _ref.kind,
+      variant = _ref.variant,
       isDisabled = _ref.isDisabled,
-      hasFullWidth = _ref.hasFullWidth;
-  return React.createElement(ButtonWrapper, {
+      hasFullWidth = _ref.hasFullWidth,
+      props = _objectWithoutProperties(_ref, ["onClick", "size", "children", "variant", "isDisabled", "hasFullWidth"]);
+
+  return React.createElement(ButtonWrapper, Object.assign({
     onClick: onClick,
     size: size,
-    kind: kind,
+    variant: variant,
     disabled: isDisabled,
     hasFullWidth: hasFullWidth
-  }, children);
+  }, props), children);
 };
 
 export var availableSizes = Object.keys(sizeStyles);
-export var availableKinds = Object.keys(kindStyles);
+export var availableVariants = Object.keys(variantStyles);
 Button.defaultProps = {
   size: 'medium',
-  kind: 'neutral'
+  variant: 'neutral'
 };
 export default Button;

dist/components/button/button.stories.js

@@ -5,3 +5,3 @@ import React from 'react';
 import { select, text, boolean as _boolean } from '@storybook/addon-knobs';
-import Button, { availableSizes, availableKinds } from './button.js';
+import Button, { availableSizes, availableVariants } from './button.js';
 storiesOf('Button', module).add('default', function () {
@@ -15,8 +15,8 @@ return React.createElement("div", null, React.createElement("div", {
     size: select('size', availableSizes, 'medium'),
-    kind: select('kind', availableKinds, 'primary'),
-    fit: select('kind', availableKinds, 'primary'),
+    variant: select('variant', availableVariants, 'primary'),
+    fit: select('variant', availableVariants, 'primary'),
     isDisabled: _boolean('isDisabled', false),
     hasFullWidth: _boolean('hasFullWidth', false)
-  }, text('children', 'Button'))), React.createElement("h1", null, "Use Cases"), React.createElement("h2", null, "Kinds"), React.createElement(Button, {
-    kind: "neutral"
+  }, text('children', 'Button'))), React.createElement("h1", null, "Use Cases"), React.createElement("h2", null, "Variants"), React.createElement(Button, {
+    variant: "neutral"
   }, "Neutral"), React.createElement("span", {
@@ -28,3 +28,3 @@ style: {
   }), React.createElement(Button, {
-    kind: "secondary"
+    variant: "secondary"
   }, "Secondary"), React.createElement("span", {
@@ -36,3 +36,3 @@ style: {
   }), React.createElement(Button, {
-    kind: "primary"
+    variant: "primary"
   }, "Primary"), React.createElement("span", {
@@ -44,3 +44,3 @@ style: {
   }), React.createElement(Button, {
-    kind: "record"
+    variant: "record"
   }, "Record"), React.createElement("h2", null, "Disabled"), React.createElement(Button, {
@@ -47,0 +47,0 @@ isDisabled: true

package.json

 {
   "name": "@loomhq/lens",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "scripts": {
@@ -23,3 +23,4 @@ "start": "start-storybook -p 6006",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "focus-visible": "^4.1.5"
   },
@@ -26,0 +27,0 @@ "main": "./dist/index.js",

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

Improved metrics

Total package byte prevSize

9827

increased by16.23%

Lines of code

217

increased by3.33%

Worsened metrics

Dev dependency count

14

increased by7.69%

No dependency changes