@loomhq/lens - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

dist/components/base-styles/base-styles.js

@@ -15,3 +15,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import { textSizes, colors } from '../../variables.js';
+
+require('typeface-inter');
+
 var BaseStyles = createGlobalStyle(_templateObject(), textSizes.medium.fontSize, textSizes.medium.lineHeight, colors.body);
 export default BaseStyles;

dist/components/button/button.js

 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
+function _templateObject7() {
+  var data = _taggedTemplateLiteral(["\n  max-width: 22px;\n  max-height: 22px;\n  height: auto;\n  margin-right: ", ";\n"]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+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"]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject5() {
-  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"]);
+  var data = _taggedTemplateLiteral(["\n  appearance: none;\n  font: inherit;\n  font-weight: 600;\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"]);
 
@@ -35,3 +55,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n    padding: 0 ", ";\n    height: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding: 0 ", " 0 ", ";\n    height: ", ";\n    ", ";\n  "]);
 
@@ -46,3 +66,3 @@ _templateObject2 = function _templateObject2() {
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n    padding: 0 ", ";\n    height: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding: 0 ", " 0 ", ";\n    height: ", ";\n    ", ";\n  "]);
 
@@ -59,8 +79,12 @@ _templateObject = function _templateObject() {
 import Color from 'color';
-import { textSizes, radiuses, colors } from '../../variables.js';
-import { u } from '../../utilities.js';
+import { radiuses, colors } from '../../variables.js';
+import { u, getTextSize } from '../../utilities.js';
 import 'focus-visible/dist/focus-visible.js';
 var sizeStyles = {
-  medium: css(_templateObject(), u(2.5), u(5), textSizes.medium.fontSize, textSizes.medium.lineHeight),
-  large: css(_templateObject2(), u(3), u(6), textSizes.large.fontSize, textSizes.large.lineHeight)
+  medium: css(_templateObject(), u(2.5), function (props) {
+    return props.logoSrc ? u(2) : u(2.5);
+  }, u(5), getTextSize('medium')),
+  large: css(_templateObject2(), u(3), function (props) {
+    return props.logoSrc ? u(2.5) : u(3);
+  }, u(6), getTextSize('large'))
 };
@@ -101,3 +125,3 @@
 var ButtonWrapper = styled.button(_templateObject5(), radiuses.medium, function (props) {
-  return props.hasFullWidth && 'width: 100%';
+  return props.hasFullWidth ? 'display: flex; width: 100%' : 'display: inline-flex';
 }, function (props) {
@@ -112,2 +136,4 @@ return sizeStyles[props.size];
 });
+var IconSection = styled.span(_templateObject6(), u(1));
+var LogoImage = styled.img(_templateObject7(), u(1.5));
 
@@ -121,3 +147,5 @@ var Button = function Button(_ref) {
       hasFullWidth = _ref.hasFullWidth,
-      props = _objectWithoutProperties(_ref, ["onClick", "size", "children", "variant", "isDisabled", "hasFullWidth"]);
+      iconSvg = _ref.iconSvg,
+      logoSrc = _ref.logoSrc,
+      props = _objectWithoutProperties(_ref, ["onClick", "size", "children", "variant", "isDisabled", "hasFullWidth", "iconSvg", "logoSrc"]);
 
@@ -129,4 +157,10 @@ return React.createElement(ButtonWrapper, Object.assign({
     disabled: isDisabled,
-    hasFullWidth: hasFullWidth
-  }, props), children);
+    hasFullWidth: hasFullWidth,
+    iconSvg: iconSvg,
+    logoSrc: logoSrc
+  }, props), iconSvg && React.createElement(IconSection, {
+    variant: variant
+  }, iconSvg), logoSrc && React.createElement(LogoImage, {
+    src: logoSrc
+  }), children);
 };
@@ -133,0 +167,0 @@

dist/components/button/button.stories.js

@@ -6,40 +6,94 @@ import React from 'react';
 import Button, { availableSizes, availableVariants } from './button.js';
+import CodeSnippet from '../docs/code-snippet/code-snippet';
+var exampleLogo = 'http://www.stickpng.com/assets/images/5cb480cd5f1b6d3fbadece79.png';
 storiesOf('Button', module).add('default', function () {
-  return React.createElement("div", null, React.createElement("div", {
-    style: {
-      marginBottom: 128
-    }
-  }, React.createElement(Button, {
+  return React.createElement("div", null, React.createElement(Button, {
     onClick: action('clicked'),
     size: select('size', availableSizes, 'medium'),
     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, "Variants"), React.createElement(Button, {
-    variant: "neutral"
-  }, "Neutral"), React.createElement("span", {
-    style: {
-      width: 8,
-      display: 'inline-block'
-    }
-  }), React.createElement(Button, {
-    variant: "secondary"
-  }, "Secondary"), React.createElement("span", {
-    style: {
-      width: 8,
-      display: 'inline-block'
-    }
-  }), React.createElement(Button, {
-    variant: "primary"
-  }, "Primary"), React.createElement("span", {
-    style: {
-      width: 8,
-      display: 'inline-block'
-    }
-  }), React.createElement(Button, {
-    variant: "record"
-  }, "Record"), React.createElement("h2", null, "Disabled"), React.createElement(Button, {
-    isDisabled: true
-  }, "Disabled"));
+    hasFullWidth: _boolean('hasFullWidth', false),
+    iconSvg: text('iconSvg'),
+    logoSrc: text('logoSrc')
+  }, text('children', 'Button')), React.createElement("h1", null, "Use Cases"), React.createElement("h2", null, "Sizes"), React.createElement("ul", null, React.createElement("li", null, React.createElement("code", null, "Medium"), " is the default size and should cover most of the cases."), React.createElement("li", null, "Use ", React.createElement("code", null, "large"), " size in special cases to highlight the button.")), React.createElement(CodeSnippet, {
+    component: React.createElement("div", null, React.createElement(Button, {
+      variant: "neutral"
+    }, "Button"), React.createElement("span", {
+      style: {
+        width: 8,
+        height: 8,
+        display: 'inline-block'
+      }
+    }), React.createElement(Button, {
+      variant: "neutral",
+      size: "large"
+    }, "Button"))
+  }), React.createElement("h2", null, "Variants"), React.createElement("ul", null, React.createElement("li", null, React.createElement("code", null, "Neutral"), " is the default variant and should cover most of the cases."), React.createElement("li", null, "Use the ", React.createElement("code", null, "primary"), " variant to highlight the most important action. "), React.createElement("li", null, "Use the ", React.createElement("code", null, "secondary"), " variant, always paired with a ", React.createElement("code", null, "primary"), " button, to highlight an important action. "), React.createElement("li", null, "Use the ", React.createElement("code", null, "record"), " variant to indicate a recording action. ")), React.createElement(CodeSnippet, {
+    component: React.createElement("div", null, React.createElement(Button, {
+      variant: "neutral"
+    }, "Neutral"), React.createElement("span", {
+      style: {
+        width: 8,
+        height: 8,
+        display: 'inline-block'
+      }
+    }), React.createElement(Button, {
+      variant: "secondary"
+    }, "Secondary"), React.createElement("span", {
+      style: {
+        width: 8,
+        height: 8,
+        display: 'inline-block'
+      }
+    }), React.createElement(Button, {
+      variant: "primary"
+    }, "Primary"), React.createElement("span", {
+      style: {
+        width: 8,
+        height: 8,
+        display: 'inline-block'
+      }
+    }), React.createElement(Button, {
+      variant: "record"
+    }, "Record"))
+  }), React.createElement("h2", null, "With icon"), React.createElement(CodeSnippet, {
+    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", {
+        "fill-rule": "evenodd",
+        "clip-rule": "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", {
+        "fill-rule": "evenodd",
+        "clip-rule": "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"
+      }))
+    }, "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, {
+      logoSrc: exampleLogo
+    }, "Button"), React.createElement("span", {
+      style: {
+        width: 8,
+        height: 8,
+        display: 'inline-block'
+      }
+    }), React.createElement(Button, {
+      size: "large",
+      logoSrc: exampleLogo
+    }, "Button"))
+  }), React.createElement("h2", null, "Disabled"), React.createElement(CodeSnippet, {
+    component: React.createElement(Button, {
+      isDisabled: true
+    }, "Can't touch this")
+  }), React.createElement("h2", null, "Full width"), React.createElement("p", null, "The full width button adapts to the width of its parent container width."), React.createElement(CodeSnippet, {
+    component: React.createElement(Button, {
+      hasFullWidth: true
+    }, "Full Width")
+  }));
 });

dist/utilities.js

@@ -1,4 +0,9 @@
-import { unit } from './variables.js';
+import { unit, textSizes } from './variables.js';
 export var u = function u(givenUnit) {
   return "".concat(givenUnit * unit, "px");
+};
+export var getTextSize = function getTextSize(size) {
+  if (size) {
+    return "\n      font-size: ".concat(textSizes[size].fontSize, ";\n      line-height: ").concat(textSizes[size].lineHeight, ";\n    ");
+  }
 };

package.json

 {
   "name": "@loomhq/lens",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "scripts": {
@@ -8,19 +8,23 @@ "start": "start-storybook -p 6006",
     "prepublish": "npm run build:app",
-    "build:app": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files"
+    "build:app": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files",
+    "deploy": "storybook-to-ghpages"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^5.1.1",
-    "@storybook/addon-knobs": "^5.1.1",
-    "@storybook/addon-links": "^5.1.1",
-    "@storybook/addons": "^5.1.1",
-    "@storybook/react": "^5.1.1",
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "7.4.5",
+    "@storybook/addon-actions": "^5.1.3",
+    "@storybook/addon-info": "^5.1.3",
+    "@storybook/addon-knobs": "^5.1.3",
+    "@storybook/addon-links": "^5.1.3",
+    "@storybook/addons": "^5.1.3",
+    "@storybook/react": "^5.1.3",
     "@storybook/storybook-deployer": "^2.8.1",
-    "styled-components": "^4.2.1",
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "7.4.3",
-    "babel-loader": "8.0.5",
+    "babel-loader": "8.0.6",
     "color": "^3.1.2",
+    "focus-visible": "^4.1.5",
+    "jsx-to-string": "^1.4.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "focus-visible": "^4.1.5"
+    "styled-components": "^4.3.1",
+    "typeface-inter": "^3.6.0"
   },
@@ -27,0 +31,0 @@ "main": "./dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

20236

increased by105.92%

Number of package files

11

increased by37.5%

Lines of code

425

increased by95.85%

Worsened metrics

Dev dependency count

17

increased by21.43%

No dependency changes