@loomhq/lens - npm Package Compare versions

Comparing version 2.1.6 to 2.2.0

dist/components/button/button.js

@@ -25,3 +25,3 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 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  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  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"]);
 
@@ -78,5 +78,5 @@ _templateObject5 = function _templateObject5() {
 import Color from 'color';
-import { radiuses, colors } from '../../variables.js';
-import { u, getTextSize } from '../../utilities.js';
-import 'focus-visible/dist/focus-visible.js';
+import { radiuses, colors, fontWeights } from '../../variables';
+import { u, getTextSize } from '../../utilities';
+import 'focus-visible/dist/focus-visible';
 var sizeStyles = {
@@ -123,3 +123,3 @@ medium: css(_templateObject(), u(2.5), function (props) {
 };
-var ButtonWrapper = styled.button(_templateObject5(), radiuses.medium, function (props) {
+var ButtonWrapper = styled.button(_templateObject5(), fontWeights.semiBold, radiuses.medium, function (props) {
   return props.hasFullWidth ? 'display: flex; width: 100%' : 'display: inline-flex';
@@ -126,0 +126,0 @@ }, function (props) {

dist/components/button/button.stories.js

@@ -5,6 +5,17 @@ import React from 'react';
 import { select, text, boolean as _boolean } from '@storybook/addon-knobs';
-import Button, { availableSizes, availableVariants } from './button.js';
+import { withInfo } from '@storybook/addon-info';
+import Button, { availableSizes, availableVariants } from './button';
+import Spacer from '../spacer/spacer';
 import CodeSnippet from '../docs/code-snippet/code-snippet';
 var exampleLogo = 'http://www.stickpng.com/assets/images/5cb480cd5f1b6d3fbadece79.png';
-storiesOf('Components|Button', module).add('Button', function () {
+storiesOf('Components|Button', module).addDecorator(withInfo({
+  header: false,
+  inline: true,
+  source: false,
+  styles: function styles() {
+    return {
+      source: {}
+    };
+  }
+})).add('Button', function () {
   return React.createElement("div", null, React.createElement(Button, {
@@ -21,8 +32,5 @@ onClick: action('clicked'),
       variant: "neutral"
-    }, "Button"), React.createElement("span", {
-      style: {
-        width: 8,
-        height: 8,
-        display: 'inline-block'
-      }
+    }, "Button"), React.createElement(Spacer, {
+      right: 1,
+      isInline: true
     }), React.createElement(Button, {
@@ -33,29 +41,12 @@ variant: "neutral",
   }), 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"))
+    component: React.createElement("div", null, availableVariants.map(function (variant, index) {
+      return React.createElement(Spacer, {
+        right: 1,
+        bottom: 1,
+        isInline: true,
+        key: index
+      }, React.createElement(Button, {
+        variant: variant
+      }, variant.charAt(0).toUpperCase() + variant.slice(1)));
+    }))
   }), React.createElement("h2", null, "With icon"), React.createElement(CodeSnippet, {
@@ -70,8 +61,8 @@ component: React.createElement("div", null, React.createElement(Button, {
       }, React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        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", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        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"
@@ -83,8 +74,5 @@ }))
       logoSrc: exampleLogo
-    }, "Button"), React.createElement("span", {
-      style: {
-        width: 8,
-        height: 8,
-        display: 'inline-block'
-      }
+    }, "Button"), React.createElement(Spacer, {
+      right: 1,
+      isInline: true
     }), React.createElement(Button, {
@@ -91,0 +79,0 @@ size: "large",

dist/components/docs/code-snippet/code-snippet.js

@@ -14,3 +14,3 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", ";\n  padding: 16px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", ";\n  padding: 16px;\n  margin: 0 0 16px 0;\n"]);
 
@@ -48,3 +48,4 @@ _templateObject3 = function _templateObject3() {
 import { colors, radiuses } from '../../../variables';
-var PreviewSection = styled.div(_templateObject(), colors.grey3);
+import Text from '../../text/text';
+export var PreviewSection = styled.div(_templateObject(), colors.grey3);
 var CodeSummary = styled.summary(_templateObject2(), colors.grey6, colors.grey4);
@@ -56,3 +57,4 @@ var CodeBoxWrapper = styled.pre(_templateObject3(), colors.grey2, radiuses.medium);
   return React.createElement(CodeBoxWrapper, null, children && jsxToString(children, {
-    shortBooleanSyntax: true
+    shortBooleanSyntax: true,
+    ignoreProps: ['key']
   }));
@@ -62,6 +64,10 @@ };
 var CodeSnippet = function CodeSnippet(_ref2) {
-  var component = _ref2.component;
-  return React.createElement(CodeSnippetWrapper, null, React.createElement(PreviewSection, null, component), React.createElement("details", null, React.createElement(CodeSummary, null, "code"), React.createElement(CodeBox, null, component)));
+  var component = _ref2.component,
+      title = _ref2.title,
+      variant = _ref2.variant;
+  return React.createElement(CodeSnippetWrapper, null, title && React.createElement(Text, {
+    color: colors.grey6
+  }, title), variant === 'showPreview' && React.createElement(PreviewSection, null, component), variant === 'showCode' && React.createElement(CodeBox, null, component), !variant && React.createElement("div", null, React.createElement(PreviewSection, null, component), React.createElement("details", null, React.createElement(CodeSummary, null, "code"), React.createElement(CodeBox, null, component))));
 };
 
 export default CodeSnippet;

dist/components/spacer/spacer.stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { select, text, boolean as _boolean, number } from '@storybook/addon-knobs';
-import Spacer, { availableSizes, availableVariants } from './spacer.js';
+import { boolean as _boolean, number } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
+import Spacer from './spacer';
 import CodeSnippet, { CodeBox } from '../docs/code-snippet/code-snippet';
 import DemoBox from '../docs/demo-box/demo-box';
 import Button from '../button/button';
-storiesOf('Components|Spacer', module).add('Spacer', function () {
+storiesOf('Components|Spacer', module).addDecorator(withInfo({
+  header: false,
+  inline: true,
+  source: false,
+  styles: function styles() {
+    return {
+      source: {}
+    };
+  }
+})).add('Spacer', function () {
   return React.createElement("div", null, React.createElement(Spacer, {
@@ -27,7 +36,15 @@ left: number('left', 0),
     }, React.createElement(Button, null, "Button")), React.createElement(Button, null, "Button"))
-  }), React.createElement("h2", null, "Placement"), React.createElement("p", null, "Spacer component can be used inline between components or as a parent of a component."), React.createElement("p", null, "As a parent:"), React.createElement(CodeBox, null, React.createElement("div", null, React.createElement(Spacer, {
-    bottom: 2
-  }, React.createElement(DemoBox, null)), React.createElement(DemoBox, null))), React.createElement("p", null, "Inline:"), React.createElement(CodeBox, null, React.createElement("div", null, React.createElement(DemoBox, null), React.createElement(Spacer, {
-    bottom: 2
-  }), React.createElement(DemoBox, null))));
+  }), React.createElement("h2", null, "Placement"), React.createElement("p", null, "Spacer component can be used inline between components or as a parent of a component."), React.createElement(CodeSnippet, {
+    variant: "showCode",
+    title: "As a parent",
+    component: React.createElement("div", null, React.createElement(Spacer, {
+      bottom: 2
+    }, React.createElement(DemoBox, null)), React.createElement(DemoBox, null))
+  }), React.createElement(CodeSnippet, {
+    variant: "showCode",
+    title: "Inline",
+    component: React.createElement("div", null, React.createElement(DemoBox, null), React.createElement(Spacer, {
+      bottom: 2
+    }), React.createElement(DemoBox, null))
+  }));
 });

dist/components/text/text.js

 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  ", ";\n  display: ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  ", ";\n  display: ", ";\n  ", ";\n"]);
 
@@ -16,2 +16,3 @@ _templateObject = function _templateObject() {
 import { getTextSize } from '../../utilities';
+import { fontWeights } from '../../variables';
 var TextWrapper = styled.span(_templateObject(), function (props) {
@@ -22,5 +23,7 @@ return getTextSize(props.size);
 }, function (props) {
-  return props.weight && "font-weight: ".concat(props.weight);
+  return props.weight && "font-weight: ".concat(fontWeights[props.weight]);
 }, function (props) {
   return props.isInline ? 'inline' : 'block';
+}, function (props) {
+  return props.isDimmed && 'opacity: 0.6';
 });
@@ -33,2 +36,3 @@
       isInline = _ref.isInline,
+      isDimmed = _ref.isDimmed,
       weight = _ref.weight;
@@ -39,2 +43,3 @@ return React.createElement(TextWrapper, {
     isInline: isInline,
+    isDimmed: isDimmed,
     weight: weight
@@ -45,7 +50,7 @@ }, children);
 export var availableSizes = ['xxlarge', 'xlarge', 'large', 'medium', 'small'];
-export var availableWeights = ['400', '600'];
+export var availableWeights = ['normal', 'semiBold'];
 Text.defaultProps = {
   size: 'medium',
-  weight: '400'
+  weight: 'normal'
 };
 export default Text;

dist/components/text/text.stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { select, text, color, boolean as _boolean } from '@storybook/addon-knobs';
-import Text, { availableSizes, availableWeights } from './text.js';
+import { withInfo } from '@storybook/addon-info';
+import Text, { availableSizes, availableWeights } from './text';
 import CodeSnippet from '../docs/code-snippet/code-snippet';
 import { textSizes, colors } from '../../variables';
-storiesOf('Components|Text', module).add('Text', function () {
+import Spacer from '../spacer/spacer';
+storiesOf('Components|Text', module).addDecorator(withInfo({
+  header: false,
+  inline: true,
+  source: false,
+  styles: function styles() {
+    return {
+      source: {}
+    };
+  }
+})).add('Text', function () {
   return React.createElement("div", null, React.createElement(Text, {
     size: select('size', availableSizes, 'medium'),
-    weight: select('weight', availableWeights, 'regular'),
+    weight: select('weight', availableWeights, '400'),
     color: color('color', colors.body),
-    isInline: _boolean('isInline')
+    isInline: _boolean('isInline'),
+    isDimmed: _boolean('isDimmed')
   }, text('children', 'Some text')), React.createElement(Text, {
     size: select('size', availableSizes, 'medium'),
     color: color('color', colors.body),
-    weight: select('weight', availableWeights, 'regular'),
-    isInline: _boolean('isInline')
+    weight: select('weight', availableWeights, '400'),
+    isInline: _boolean('isInline'),
+    isDimmed: _boolean('isDimmed')
   }, "Some more text"), React.createElement("h1", null, "Use Cases"), React.createElement("h2", null, "Sizes"), React.createElement("p", null, "Use ", React.createElement("code", null, "medium"), " for body text."), React.createElement(CodeSnippet, {
-    component: React.createElement("div", null, availableSizes.map(function (size) {
-      return React.createElement(Text, {
+    component: React.createElement("div", null, availableSizes.map(function (size, index) {
+      return React.createElement(Spacer, {
+        bottom: 1,
+        key: index
+      }, React.createElement(Text, {
         size: size
-      }, "Aa \xB7 ", size, " \xB7 ", textSizes[size].fontSize, "/", textSizes[size].lineHeight);
+      }, "Aa \xB7 ", size, " \xB7 ", textSizes[size].fontSize, "/", textSizes[size].lineHeight));
     }))
-  }), React.createElement("h2", null, "Weights"), React.createElement("p", null, "Use ", React.createElement("code", null, "400"), " (normal) for default text and ", React.createElement("code", null, "600"), " (semi bold) for bolder text."), React.createElement(CodeSnippet, {
-    component: React.createElement("div", null, availableWeights.map(function (weight) {
+  }), React.createElement("h2", null, "Weights"), React.createElement("p", null, "Use ", React.createElement("code", null, "normal"), " for default text and ", React.createElement("code", null, "semiBold"), " for bolder text."), React.createElement(CodeSnippet, {
+    component: React.createElement("div", null, availableWeights.map(function (weight, index) {
       return React.createElement(Text, {
-        weight: weight
+        weight: weight,
+        key: index
       }, "Aa \xB7 ", weight);
@@ -29,0 +46,0 @@ }))

dist/index.js

@@ -1,4 +0,4 @@
-import { unit, textSizes, radiuses, colors } from './variables';
+import { unit, textSizes, fontWeights, radiuses, colors } from './variables';
 import { u, getTextSize } from './utilities';
-export { unit, textSizes, radiuses, colors };
+export { unit, textSizes, fontWeights, radiuses, colors };
 export { u, getTextSize };
@@ -5,0 +5,0 @@ export { default as BaseStyles } from './components/base-styles/base-styles';

dist/utilities.js

@@ -1,2 +0,2 @@
-import { unit, textSizes } from './variables.js';
+import { unit, textSizes } from './variables';
 export var u = function u(givenUnit) {
@@ -3,0 +3,0 @@ return "".concat(givenUnit * unit, "px");

dist/variables.js

@@ -25,2 +25,6 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
 };
+export var fontWeights = {
+  normal: 400,
+  semiBold: 600
+};
 export var radiuses = {
@@ -32,3 +36,7 @@ medium: '4px',
   purple: '#516BF0',
-  salmon: '#FD5E60'
+  salmon: '#FD5E60',
+  green: '#70E5A9',
+  blue: '#00C1FF',
+  red: '#EF2735',
+  yellow: '#FFC450'
 };
@@ -35,0 +43,0 @@ export var greyscale = {

package.json

 {
   "name": "@loomhq/lens",
-  "version": "2.1.6",
+  "version": "2.2.0",
   "scripts": {
@@ -20,8 +20,8 @@ "start": "start-storybook -p 6006",
     "@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/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/storybook-deployer": "^2.8.1",
@@ -28,0 +28,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

34726

increased by31.71%

Number of package files

15

increased by7.14%

Lines of code

719

increased by35.92%

No dependency changes