@loomhq/lens - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

dist/components/button/button.js

@@ -5,3 +5,3 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n  max-width: 22px;\n  max-height: 22px;\n  height: auto;\n  margin-right: ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  max-width: 18px;\n  max-height: 18px;\n  height: auto;\n  margin-right: ", ";\n"]);
 
@@ -16,3 +16,3 @@ _templateObject7 = function _templateObject7() {
 function _templateObject6() {
-  var data = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  height: 100%;\n  margin-right: ", ";\n\n  svg path {\n    fill: currentColor;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  height: 100%;\n  margin-right: ", ";\n"]);
 
@@ -27,3 +27,3 @@ _templateObject6 = function _templateObject6() {
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n  appearance: none;\n  font: inherit;\n  font-weight: ", ";\n  transition: 0.6s background-color, 0.6s border-color;\n  align-items: center;\n  justify-content: center;\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"]);
+  var data = _taggedTemplateLiteral(["\n  appearance: none;\n  padding-top: 0;\n  padding-bottom: 0;\n  font: inherit;\n  font-weight: ", ";\n  transition: 0.6s background-color, 0.6s border-color;\n  align-items: center;\n  justify-content: center;\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"]);
 
@@ -68,3 +68,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n    padding: 0 ", " 0 ", ";\n    height: ", ";\n    ", ";\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding-right: ", ";\n    padding-left: ", ";\n    height: ", ";\n    ", ";\n  "]);
 
@@ -86,6 +86,6 @@ _templateObject = function _templateObject() {
   medium: css(_templateObject(), u(2.5), function (props) {
-    return props.logoSrc ? u(2) : u(2.5);
+    return props.logoSrc || props.icon ? u(2) : u(2.5);
   }, u(5), getTextSize('medium')),
   large: css(_templateObject2(), u(3), function (props) {
-    return props.logoSrc ? u(2.5) : u(3);
+    return props.logoSrc || props.icon ? u(2.5) : u(3);
   }, u(6), getTextSize('large'))
@@ -137,4 +137,8 @@ };
 });
-var IconSection = styled.span(_templateObject6(), u(1));
-var LogoImage = styled.img(_templateObject7(), u(1.5));
+var IconSection = styled.span(_templateObject6(), function (props) {
+  return props.size === 'large' ? u(2.5) : u(2);
+});
+var LogoImage = styled.img(_templateObject7(), function (props) {
+  return props.size === 'large' ? u(2.5) : u(2);
+});
 
@@ -148,5 +152,5 @@ var Button = function Button(_ref) {
       hasFullWidth = _ref.hasFullWidth,
-      iconSvg = _ref.iconSvg,
+      icon = _ref.icon,
       logoSrc = _ref.logoSrc,
-      props = _objectWithoutProperties(_ref, ["onClick", "size", "children", "variant", "isDisabled", "hasFullWidth", "iconSvg", "logoSrc"]);
+      props = _objectWithoutProperties(_ref, ["onClick", "size", "children", "variant", "isDisabled", "hasFullWidth", "icon", "logoSrc"]);
 
@@ -159,8 +163,9 @@ return React.createElement(ButtonWrapper, Object.assign({
     hasFullWidth: hasFullWidth,
-    iconSvg: iconSvg,
+    icon: icon,
     logoSrc: logoSrc
-  }, props), iconSvg && React.createElement(IconSection, {
-    variant: variant
-  }, iconSvg), logoSrc && React.createElement(LogoImage, {
-    src: logoSrc
+  }, props), icon && React.createElement(IconSection, {
+    size: size
+  }, icon), logoSrc && React.createElement(LogoImage, {
+    src: logoSrc,
+    size: size
   }), children);
@@ -167,0 +172,0 @@ };

dist/components/button/button.stories.js

@@ -9,2 +9,3 @@ import React from 'react';
 import CodeSnippet from '../docs/code-snippet/code-snippet';
+import SvgPlus from '../icon/icons/plus';
 var exampleLogo = 'http://www.stickpng.com/assets/images/5cb480cd5f1b6d3fbadece79.png';
@@ -52,28 +53,8 @@ storiesOf('Components|Button', module).addDecorator(withInfo({
     component: React.createElement("div", null, React.createElement(Button, {
-      iconSvg: React.createElement("svg", {
-        width: "15",
-        height: "14",
-        viewBox: "0 0 15 14",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React.createElement("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M0 7C0 6.44772 0.447715 6 1 6H13C13.5523 6 14 6.44772 14 7C14 7.55228 13.5523 8 13 8H1C0.447715 8 0 7.55228 0 7Z"
-      }), React.createElement("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M6.29289 0.292893C6.68342 -0.0976311 7.31658 -0.0976311 7.70711 0.292893L13.7071 6.29289C14.0976 6.68342 14.0976 7.31658 13.7071 7.70711L7.70711 13.7071C7.31658 14.0976 6.68342 14.0976 6.29289 13.7071C5.90237 13.3166 5.90237 12.6834 6.29289 12.2929L11.5858 7L6.29289 1.70711C5.90237 1.31658 5.90237 0.683417 6.29289 0.292893Z"
-      }))
+      icon: React.createElement(SvgPlus, null)
     }, "Button"))
   }), React.createElement("h2", null, "With logo"), React.createElement("p", null, "For buttons with logo use the variant ", React.createElement("code", null, "neutral"), "."), React.createElement(CodeSnippet, {
-    component: React.createElement("div", null, React.createElement(Button, {
+    component: React.createElement(Button, {
       logoSrc: exampleLogo
-    }, "Button"), React.createElement(Spacer, {
-      right: 1,
-      isInline: true
-    }), React.createElement(Button, {
-      size: "large",
-      logoSrc: exampleLogo
-    }, "Button"))
+    }, "Button")
   }), React.createElement("h2", null, "Disabled"), React.createElement(CodeSnippet, {
@@ -80,0 +61,0 @@ component: React.createElement(Button, {

dist/components/docs/styles.stories.js

@@ -33,3 +33,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import CodeSnippet from './code-snippet/code-snippet';
-storiesOf('Styles|Styles', module).add('Typography', function () {
+storiesOf('Other|Styles', module).add('Typography', function () {
   return React.createElement("div", null, React.createElement("h1", {
@@ -43,3 +43,3 @@ className: "topH1"
     target: "_blank"
-  }, "extratype.com/fonts/eina"), React.createElement("h2", null, "Type scale"), React.createElement("p", null, "Use ", React.createElement("code", null, "medium"), " for body text."), React.createElement(CodeSnippet, {
+  }, "extratype.com/fonts/eina"), React.createElement("h2", null, "Type scale"), React.createElement("p", null, "Use ", React.createElement("code", null, "medium"), " size for body text."), React.createElement(CodeSnippet, {
     variant: "showPreview",
@@ -89,3 +89,3 @@ component: React.createElement("div", null, availableSizes.map(function (size, index) {
 
-storiesOf('Styles|Styles', module).add('Colors', function () {
+storiesOf('Other|Styles', module).add('Colors', function () {
   return React.createElement("div", null, React.createElement("h1", {
@@ -99,3 +99,3 @@ className: "topH1"
     return React.createElement(Spacer, {
-      bottom: 1,
+      bottom: 2,
       key: index,
@@ -148,3 +148,3 @@ isInline: true
 }, colors.grey4);
-storiesOf('Styles|Styles', module).add('Radiuses', function () {
+storiesOf('Other|Styles', module).add('Radiuses', function () {
   return React.createElement("div", null, React.createElement("h1", {
@@ -151,0 +151,0 @@ className: "topH1"

dist/components/text/text.stories.js

@@ -21,3 +21,3 @@ import React from 'react';
     size: select('size', availableSizes, 'medium'),
-    weight: select('weight', availableWeights, '400'),
+    weight: select('weight', availableWeights, 'normal'),
     color: color('color', colors.body),
@@ -29,3 +29,3 @@ isInline: _boolean('isInline'),
     color: color('color', colors.body),
-    weight: select('weight', availableWeights, '400'),
+    weight: select('weight', availableWeights, 'normal'),
     isInline: _boolean('isInline'),
@@ -32,0 +32,0 @@ isDimmed: _boolean('isDimmed')

package.json

 {
   "name": "@loomhq/lens",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "scripts": {
@@ -13,4 +13,4 @@ "start": "start-storybook -p 6006",
     "color": "^3.1.2",
+    "focus-visible": "^4.1.5",
     "styled-components": "^4.3.1",
-    "focus-visible": "^4.1.5",
     "typeface-inter": "^3.6.0"
@@ -21,8 +21,8 @@ },
     "@babel/core": "7.4.5",
-    "@storybook/addon-actions": "^5.1.4",
-    "@storybook/addon-info": "^5.1.4",
-    "@storybook/addon-knobs": "^5.1.4",
-    "@storybook/addon-links": "^5.1.4",
-    "@storybook/addons": "^5.1.4",
-    "@storybook/react": "^5.1.4",
+    "@storybook/addon-actions": "^5.1.8",
+    "@storybook/addon-info": "^5.1.8",
+    "@storybook/addon-knobs": "^5.1.8",
+    "@storybook/addon-links": "^5.1.8",
+    "@storybook/addons": "^5.1.8",
+    "@storybook/react": "^5.1.8",
     "@storybook/storybook-deployer": "^2.8.1",
@@ -29,0 +29,0 @@ "babel-loader": "8.0.6",

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

56774

increased by63.49%

Number of package files

46

increased by206.67%

Lines of code

1373

increased by90.96%

No dependency changes