@heathmont/moon-components - npm Package Compare versions

Comparing version 2.22.0 to 2.23.0

lib/es/heading/__tests__/heading.test.js

@@ -15,6 +15,4 @@ import * as React from 'react';
   describe('Elements', function () {
-    test('renders as <p> if no "as" prop provided', function () {
-      var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
-        size: "alpha"
-      }, "Aplha Heading")));
+    test('renders as <h3> if no "as" prop provided', function () {
+      var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, null, "Text")));
       expect(heading).toMatchSnapshot();
@@ -24,5 +22,4 @@ });
       var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
-        size: "alpha",
-        as: "h2"
-      }, "Alpha Heading")));
+        as: "h6"
+      }, "Heading")));
       expect(heading).toMatchSnapshot();
@@ -32,47 +29,86 @@ });
   describe('Sizes', function () {
-    test('alpha size renders properly', function () {
+    test('renders default font size', function () {
+      var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, null, "Heading")));
+      expect(heading).toMatchSnapshot();
+    });
+    test('16rem size renders properly', function () {
       var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
-        size: "alpha",
-        as: "h1"
-      }, "Aplha Heading")));
+        size: 16
+      }, "Heading")));
       expect(heading).toMatchSnapshot();
     });
-    test('bravo size renders properly', function () {
+    test('18rem size renders properly', function () {
       var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
-        size: "bravo",
-        as: "h1"
-      }, "Bravo Heading")));
+        size: 18
+      }, "Heading")));
       expect(heading).toMatchSnapshot();
     });
-    test('charlie size renders properly', function () {
+    test('20rem size renders properly', function () {
       var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
-        size: "charlie",
-        as: "h1"
-      }, "Charlie Heading")));
+        size: 20
+      }, "Heading")));
       expect(heading).toMatchSnapshot();
     });
-    test('delta size renders properly', function () {
+    test('24rem size renders properly', function () {
       var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
-        size: "delta",
-        as: "h1"
-      }, "Delta Heading")));
+        size: 24
+      }, "Heading")));
       expect(heading).toMatchSnapshot();
     });
-    test('echo size renders properly', function () {
+    test('32rem size renders properly', function () {
       var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
-        size: "echo",
-        as: "h1"
-      }, "Echo Heading")));
+        size: 32
+      }, "Heading")));
       expect(heading).toMatchSnapshot();
     });
+    test('48rem size renders properly', function () {
+      var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
+        size: 48
+      }, "Heading")));
+      expect(heading).toMatchSnapshot();
+    });
+    test('56rem size renders properly', function () {
+      var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
+        size: 56
+      }, "Heading")));
+      expect(heading).toMatchSnapshot();
+    });
+    test('64rem size renders properly', function () {
+      var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
+        size: 64
+      }, "Heading")));
+      expect(heading).toMatchSnapshot();
+    });
+    test('72rem size renders properly', function () {
+      var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
+        size: 72
+      }, "Heading")));
+      expect(heading).toMatchSnapshot();
+    });
+    describe('Colors', function () {
+      test('renders default color', function () {
+        var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, null, "Heading")));
+        expect(heading).toMatchSnapshot();
+      });
+      test('renders with a color', function () {
+        var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
+          color: "piccolo.100"
+        }, "Heading")));
+        expect(heading).toMatchSnapshot();
+      });
+    });
+    describe('Boldness', function () {
+      test('renders default boldness', function () {
+        var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, null, "Heading")));
+        expect(heading).toMatchSnapshot();
+      });
+      test('renders with regular font weight', function () {
+        var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
+          isRegular: true
+        }, "Heading")));
+        expect(heading).toMatchSnapshot();
+      });
+    });
   });
-  test('renders with a color', function () {
-    var heading = create(renderWithTheme( /*#__PURE__*/React.createElement(Heading, {
-      size: "alpha",
-      as: "h1",
-      color: "piccolo.100"
-    }, "Alpha Heading")));
-    expect(heading).toMatchSnapshot();
-  });
 });
 //# sourceMappingURL=heading.test.js.map

lib/es/heading/Heading.js

 import styled from 'styled-components';
-import { rem, themed } from '@heathmont/moon-utils';
-var Heading = styled.p.withConfig({
+import { themed } from '@heathmont/moon-utils';
+import getFontSize from '../private/text/getFontSize';
+var Heading = styled.h3.withConfig({
   displayName: "Heading",
   componentId: "sc-1fj2bsx-0"
 })(function (_ref) {
-  var size = _ref.size,
-      fontWeight = _ref.theme.fontWeight;
+  var color = _ref.color,
+      theme = _ref.theme;
   return {
-    alpha: {
-      fontWeight: fontWeight.semibold,
-      fontSize: rem(40),
-      lineHeight: rem(48)
-    },
-    bravo: {
-      fontWeight: fontWeight.semibold,
-      fontSize: rem(32),
-      lineHeight: rem(40)
-    },
-    charlie: {
-      fontWeight: fontWeight.normal,
-      fontSize: rem(24),
-      lineHeight: rem(32)
-    },
-    delta: {
-      fontWeight: fontWeight.normal,
-      fontSize: rem(20),
-      lineHeight: rem(32)
-    },
-    echo: {
-      fontWeight: fontWeight.normal,
-      fontSize: rem(16),
-      lineHeight: rem(24)
-    }
-  }[size];
-}, function (_ref2) {
-  var color = _ref2.color,
-      theme = _ref2.theme;
-  return {
     color: themed('color', color)(theme)
   };
+}, function (_ref2) {
+  var _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 16 : _ref2$size;
+  return getFontSize(size);
+}, function (_ref3) {
+  var isRegular = _ref3.isRegular,
+      fontWeight = _ref3.theme.fontWeight;
+  return isRegular ? {
+    fontWeight: fontWeight.normal
+  } : {
+    fontWeight: fontWeight.semibold
+  };
 });
 Heading.defaultProps = {
-  color: 'bulma.100'
+  color: 'bulma.100',
+  size: 16
 };
 export default Heading;
 //# sourceMappingURL=Heading.js.map

lib/es/index.js

@@ -56,2 +56,4 @@ /**
 export * from './heading/Heading';
+export { default as HeadingSize } from './heading/HeadingSize';
+export * from './heading/HeadingSize';
 export { default as Inline } from './inline/Inline';
@@ -97,8 +99,4 @@ export * from './inline/Inline';
 export * from './tabs/Tabs';
-export { default as Size } from './text/Size';
-export * from './text/Size';
 export { default as Text } from './text/Text';
 export * from './text/Text';
-export { default as getFontSize } from './text/getFontSize';
-export * from './text/getFontSize';
 export { default as Error } from './textInput/Error';
@@ -105,0 +103,0 @@ export * from './textInput/Error';

lib/es/text/Text.js

 import styled from 'styled-components';
 import { themed } from '@heathmont/moon-utils';
-import getFontSize from './getFontSize';
+import getFontSize from '../private/text/getFontSize';
 var Text = styled.p.withConfig({
@@ -5,0 +5,0 @@ displayName: "Text",

lib/heading/__tests__/heading.test.js

@@ -29,6 +29,4 @@ "use strict";
   describe('Elements', function () {
-    test('renders as <p> if no "as" prop provided', function () {
-      var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
-        size: "alpha"
-      }, "Aplha Heading")));
+    test('renders as <h3> if no "as" prop provided', function () {
+      var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], null, "Text")));
       expect(heading).toMatchSnapshot();
@@ -38,5 +36,4 @@ });
       var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
-        size: "alpha",
-        as: "h2"
-      }, "Alpha Heading")));
+        as: "h6"
+      }, "Heading")));
       expect(heading).toMatchSnapshot();
@@ -46,47 +43,86 @@ });
   describe('Sizes', function () {
-    test('alpha size renders properly', function () {
+    test('renders default font size', function () {
+      var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], null, "Heading")));
+      expect(heading).toMatchSnapshot();
+    });
+    test('16rem size renders properly', function () {
       var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
-        size: "alpha",
-        as: "h1"
-      }, "Aplha Heading")));
+        size: 16
+      }, "Heading")));
       expect(heading).toMatchSnapshot();
     });
-    test('bravo size renders properly', function () {
+    test('18rem size renders properly', function () {
       var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
-        size: "bravo",
-        as: "h1"
-      }, "Bravo Heading")));
+        size: 18
+      }, "Heading")));
       expect(heading).toMatchSnapshot();
     });
-    test('charlie size renders properly', function () {
+    test('20rem size renders properly', function () {
       var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
-        size: "charlie",
-        as: "h1"
-      }, "Charlie Heading")));
+        size: 20
+      }, "Heading")));
       expect(heading).toMatchSnapshot();
     });
-    test('delta size renders properly', function () {
+    test('24rem size renders properly', function () {
       var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
-        size: "delta",
-        as: "h1"
-      }, "Delta Heading")));
+        size: 24
+      }, "Heading")));
       expect(heading).toMatchSnapshot();
     });
-    test('echo size renders properly', function () {
+    test('32rem size renders properly', function () {
       var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
-        size: "echo",
-        as: "h1"
-      }, "Echo Heading")));
+        size: 32
+      }, "Heading")));
       expect(heading).toMatchSnapshot();
     });
+    test('48rem size renders properly', function () {
+      var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
+        size: 48
+      }, "Heading")));
+      expect(heading).toMatchSnapshot();
+    });
+    test('56rem size renders properly', function () {
+      var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
+        size: 56
+      }, "Heading")));
+      expect(heading).toMatchSnapshot();
+    });
+    test('64rem size renders properly', function () {
+      var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
+        size: 64
+      }, "Heading")));
+      expect(heading).toMatchSnapshot();
+    });
+    test('72rem size renders properly', function () {
+      var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
+        size: 72
+      }, "Heading")));
+      expect(heading).toMatchSnapshot();
+    });
+    describe('Colors', function () {
+      test('renders default color', function () {
+        var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], null, "Heading")));
+        expect(heading).toMatchSnapshot();
+      });
+      test('renders with a color', function () {
+        var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
+          color: "piccolo.100"
+        }, "Heading")));
+        expect(heading).toMatchSnapshot();
+      });
+    });
+    describe('Boldness', function () {
+      test('renders default boldness', function () {
+        var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], null, "Heading")));
+        expect(heading).toMatchSnapshot();
+      });
+      test('renders with regular font weight', function () {
+        var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
+          isRegular: true
+        }, "Heading")));
+        expect(heading).toMatchSnapshot();
+      });
+    });
   });
-  test('renders with a color', function () {
-    var heading = (0, _reactTestRenderer.create)(renderWithTheme( /*#__PURE__*/React.createElement(_Heading["default"], {
-      size: "alpha",
-      as: "h1",
-      color: "piccolo.100"
-    }, "Alpha Heading")));
-    expect(heading).toMatchSnapshot();
-  });
 });
 //# sourceMappingURL=heading.test.js.map

lib/heading/Heading.d.ts

 import { ColorProps } from '@heathmont/moon-themes';
-declare type HeadingProps = {
-    size: 'alpha' | 'bravo' | 'charlie' | 'delta' | 'echo';
+import { HeadingSize } from './HeadingSize';
+declare type Props = {
+    size?: HeadingSize;
     color?: ColorProps;
+    isRegular?: boolean;
 };
-declare const Heading: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, HeadingProps, never>;
-export { HeadingProps };
+declare const Heading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, Props, never>;
 export default Heading;
 //# sourceMappingURL=Heading.d.ts.map

lib/heading/Heading.js

@@ -12,47 +12,32 @@ "use strict";
 
+var _getFontSize = _interopRequireDefault(require("../private/text/getFontSize"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var Heading = _styledComponents["default"].p.withConfig({
+var Heading = _styledComponents["default"].h3.withConfig({
   displayName: "Heading",
   componentId: "sc-1fj2bsx-0"
 })(function (_ref) {
-  var size = _ref.size,
-      fontWeight = _ref.theme.fontWeight;
+  var color = _ref.color,
+      theme = _ref.theme;
   return {
-    alpha: {
-      fontWeight: fontWeight.semibold,
-      fontSize: (0, _moonUtils.rem)(40),
-      lineHeight: (0, _moonUtils.rem)(48)
-    },
-    bravo: {
-      fontWeight: fontWeight.semibold,
-      fontSize: (0, _moonUtils.rem)(32),
-      lineHeight: (0, _moonUtils.rem)(40)
-    },
-    charlie: {
-      fontWeight: fontWeight.normal,
-      fontSize: (0, _moonUtils.rem)(24),
-      lineHeight: (0, _moonUtils.rem)(32)
-    },
-    delta: {
-      fontWeight: fontWeight.normal,
-      fontSize: (0, _moonUtils.rem)(20),
-      lineHeight: (0, _moonUtils.rem)(32)
-    },
-    echo: {
-      fontWeight: fontWeight.normal,
-      fontSize: (0, _moonUtils.rem)(16),
-      lineHeight: (0, _moonUtils.rem)(24)
-    }
-  }[size];
-}, function (_ref2) {
-  var color = _ref2.color,
-      theme = _ref2.theme;
-  return {
     color: (0, _moonUtils.themed)('color', color)(theme)
   };
+}, function (_ref2) {
+  var _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 16 : _ref2$size;
+  return (0, _getFontSize["default"])(size);
+}, function (_ref3) {
+  var isRegular = _ref3.isRegular,
+      fontWeight = _ref3.theme.fontWeight;
+  return isRegular ? {
+    fontWeight: fontWeight.normal
+  } : {
+    fontWeight: fontWeight.semibold
+  };
 });
 
 Heading.defaultProps = {
-  color: 'bulma.100'
+  color: 'bulma.100',
+  size: 16
 };
@@ -59,0 +44,0 @@ var _default = Heading;

lib/index.d.ts

@@ -56,2 +56,4 @@ /**
 export * from './heading/Heading';
+export { default as HeadingSize } from './heading/HeadingSize';
+export * from './heading/HeadingSize';
 export { default as Inline } from './inline/Inline';
@@ -97,8 +99,4 @@ export * from './inline/Inline';
 export * from './tabs/Tabs';
-export { default as Size } from './text/Size';
-export * from './text/Size';
 export { default as Text } from './text/Text';
 export * from './text/Text';
-export { default as getFontSize } from './text/getFontSize';
-export * from './text/getFontSize';
 export { default as Error } from './textInput/Error';
@@ -105,0 +103,0 @@ export * from './textInput/Error';

lib/index.js

@@ -35,2 +35,3 @@ "use strict";
   Heading: true,
+  HeadingSize: true,
   Inline: true,
@@ -56,5 +57,3 @@ inlineMixin: true,
   Tabs: true,
-  Size: true,
   Text: true,
-  getFontSize: true,
   Error: true,
@@ -225,2 +224,8 @@ Input: true,
 });
+Object.defineProperty(exports, "HeadingSize", {
+  enumerable: true,
+  get: function get() {
+    return _HeadingSize["default"];
+  }
+});
 Object.defineProperty(exports, "Inline", {
@@ -346,8 +351,2 @@ enumerable: true,
 });
-Object.defineProperty(exports, "Size", {
-  enumerable: true,
-  get: function get() {
-    return _Size["default"];
-  }
-});
 Object.defineProperty(exports, "Text", {
@@ -359,8 +358,2 @@ enumerable: true,
 });
-Object.defineProperty(exports, "getFontSize", {
-  enumerable: true,
-  get: function get() {
-    return _getFontSize["default"];
-  }
-});
 Object.defineProperty(exports, "Error", {
@@ -753,2 +746,15 @@ enumerable: true,
 
+var _HeadingSize = _interopRequireWildcard(require("./heading/HeadingSize"));
+
+Object.keys(_HeadingSize).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _HeadingSize[key];
+    }
+  });
+});
+
 var _Inline = _interopRequireWildcard(require("./inline/Inline"));
@@ -1014,15 +1020,2 @@
 
-var _Size = _interopRequireWildcard(require("./text/Size"));
-
-Object.keys(_Size).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Size[key];
-    }
-  });
-});
-
 var _Text = _interopRequireWildcard(require("./text/Text"));
@@ -1041,15 +1034,2 @@
 
-var _getFontSize = _interopRequireWildcard(require("./text/getFontSize"));
-
-Object.keys(_getFontSize).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _getFontSize[key];
-    }
-  });
-});
-
 var _Error = _interopRequireWildcard(require("./textInput/Error"));
@@ -1056,0 +1036,0 @@

lib/text/Text.d.ts

 import { ColorProps } from '@heathmont/moon-themes';
-import { Size } from './Size';
+import { Size } from '../private/text/Size';
 declare type Props = {
@@ -4,0 +4,0 @@ size?: Size;

lib/text/Text.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _getFontSize = _interopRequireDefault(require("./getFontSize"));
+var _getFontSize = _interopRequireDefault(require("../private/text/getFontSize"));
 
@@ -15,0 +15,0 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package.json

 {
   "name": "@heathmont/moon-components",
   "sideEffects": false,
-  "version": "2.22.0",
+  "version": "2.23.0",
   "files": [
@@ -18,5 +18,5 @@ "lib"
   "dependencies": {
-    "@heathmont/moon-assets": "^2.22.0",
-    "@heathmont/moon-themes": "^2.22.0",
-    "@heathmont/moon-utils": "^2.22.0",
+    "@heathmont/moon-assets": "^2.23.0",
+    "@heathmont/moon-themes": "^2.23.0",
+    "@heathmont/moon-utils": "^2.23.0",
     "@reach/dialog": "0.3.0",
@@ -35,3 +35,3 @@ "polished": "3.4.1",
   },
-  "gitHead": "138a773363a463f0c8f1b273da0a9e498cb1c85f"
+  "gitHead": "ef3f50891449143ea554c29ffc6e98832dfde459"
 }

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

1620354

increased by0.39%

Number of package files

605

increased by1%

Lines of code

16100

increased by0.13%

Dependency changes

• Updated@heathmont/moon-assets@^2.23.0

• Updated@heathmont/moon-themes@^2.23.0

• Updated@heathmont/moon-utils@^2.23.0