@loomhq/lens - npm Package Compare versions

Comparing version 2.0.6 to 2.1.6

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

 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  body {\n    font-family: inter;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  }\n\n  *, *:before, *:after {\n    box-sizing: border-box;\n  }\n\n  * {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  body {\n    font-family: inter;\n    color: ", ";\n    ", ";\n  }\n\n  *, *:before, *:after {\n    box-sizing: border-box;\n  }\n\n  * {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n"]);
 
@@ -14,7 +14,8 @@ _templateObject = function _templateObject() {
 import { createGlobalStyle } from 'styled-components';
-import { textSizes, colors } from '../../variables.js';
+import { colors } from '../../variables';
+import { getTextSize } from '../../utilities';
 
 require('typeface-inter');
 
-var BaseStyles = createGlobalStyle(_templateObject(), textSizes.medium.fontSize, textSizes.medium.lineHeight, colors.body);
+var BaseStyles = createGlobalStyle(_templateObject(), colors.body, getTextSize('medium'));
 export default BaseStyles;

dist/components/button/button.stories.js

@@ -8,3 +8,3 @@ import React from 'react';
 var exampleLogo = 'http://www.stickpng.com/assets/images/5cb480cd5f1b6d3fbadece79.png';
-storiesOf('Button', module).add('default', function () {
+storiesOf('Components|Button', module).add('Button', function () {
   return React.createElement("div", null, React.createElement(Button, {
@@ -11,0 +11,0 @@ onClick: action('clicked'),

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

@@ -49,12 +49,16 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var CodeSummary = styled.summary(_templateObject2(), colors.grey6, colors.grey4);
-var CodePre = styled.pre(_templateObject3(), colors.grey2, radiuses.medium);
+var CodeBoxWrapper = styled.pre(_templateObject3(), colors.grey2, radiuses.medium);
 var CodeSnippetWrapper = styled.div(_templateObject4());
-
-var CodeSnippet = function CodeSnippet(_ref) {
-  var component = _ref.component;
-  return React.createElement(CodeSnippetWrapper, null, React.createElement(PreviewSection, null, component), React.createElement("details", null, React.createElement(CodeSummary, null, "code"), React.createElement(CodePre, null, jsxToString(component, {
+export var CodeBox = function CodeBox(_ref) {
+  var children = _ref.children;
+  return React.createElement(CodeBoxWrapper, null, children && jsxToString(children, {
     shortBooleanSyntax: true
-  }))));
+  }));
 };
 
+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)));
+};
+
 export default CodeSnippet;

dist/components/text/text.stories.js

@@ -7,3 +7,3 @@ import React from 'react';
 import { textSizes, colors } from '../../variables';
-storiesOf('Text', module).add('default', function () {
+storiesOf('Components|Text', module).add('Text', function () {
   return React.createElement("div", null, React.createElement(Text, {
@@ -10,0 +10,0 @@ size: select('size', availableSizes, 'medium'),

dist/index.js

@@ -5,4 +5,5 @@ import { unit, textSizes, radiuses, colors } from './variables';
 export { u, getTextSize };
+export { default as BaseStyles } from './components/base-styles/base-styles';
 export { default as Button } from './components/button/button';
 export { default as Text } from './components/text/text';
-export { default as BaseStyles } from './components/base-styles/base-styles';
+export { default as Spacer } from './components/spacer/spacer';

package.json

 {
   "name": "@loomhq/lens",
-  "version": "2.0.6",
+  "version": "2.1.6",
   "scripts": {
@@ -5,0 +5,0 @@ "start": "start-storybook -p 6006",

README.md

 <img width="150" src="https://github.com/loomhq/lens/blob/master/docs/lens-logo.png?raw=true">
 
-## Loom's Design System
+# Loom's Design System
+
+## Getting started
+
+### Installation
+Add Lens to your app:
+```
+yarn add @loomhq/lens
+```
+
+### Base styles
+Add `<BaseStyles />` component to your app, it injects global styles into the `body` tag. Place this component in a high level so it's always loaded in the app.
+Example:
+```
+import { BaseStyles } from "@loomhq/lens"
+
+const App = () => (
+  <div>
+    <BaseStyles />
+    <AppContent />
+  </div>
+)
+```
+
+## Usage
+Lens exports three types of contents:
+- [Components](https://github.com/loomhq/lens/tree/master/src/components)
+- [Variables](https://github.com/loomhq/lens/blob/master/src/variables.js)
+- [Utilities](https://github.com/loomhq/lens/tree/master/src/utilities.js)
+
+### Import components
+Example:
+```
+import { Text } from "@loomhq/lens"
+```
+
+### Import variables
+Example:
+```
+import { Text, colors } from "@loomhq/lens"
+
+<Text color={colors.primary}>Button</Text>
+```
+
+### Import utilities
+Example:
+```
+import { getTextSize } from "@loomhq/lens"
+
+const CustomComponent = styled.div`
+  ${getTextSize('large')};
+`
+```

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

26365

increased by28.17%

Number of package files

14

increased by27.27%

Lines of code

529

increased by23.31%

Number of lines in readme file

56

increased by1300%

No dependency changes