@hig/typography - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

build/index.es.js

@@ -6,23 +6,118 @@ import React from 'react';
 
-var AVAILABLE_ALIGNMENTS = Object.freeze(["center", "justify", "left", "right"]);
-var AVAILABLE_FONT_WEIGHTS = Object.freeze([300, 400, 500, 600, 700, "bold", // same as 700
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+const AVAILABLE_ALIGNMENTS = Object.freeze(["center", "justify", "left", "right"]);
+const AVAILABLE_FONT_WEIGHTS = Object.freeze([300, 400, 500, 600, 700, "bold", // same as 700
 "normal" // same as 400
 ]);
-var AVAILABLE_VARIANTS = Object.freeze(["body", "caption", "h1", "h2", "h3"]);
+const AVAILABLE_VARIANTS = Object.freeze(["body", "caption", "h1", "h2", "h3"]);
 
 function stylesheet(props, themeData) {
-  var customStylesheet = props.stylesheet,
-      fontWeight = props.fontWeight,
-      align = props.align;
-
-  var variant = props.variant || "body";
-
-  var styles = {
+  const {
+    stylesheet: customStylesheet,
+    fontWeight,
+    align
+  } = props;
+  const variant = props.variant || "body";
+  const styles = {
     typography: {
-      color: themeData["typography." + variant + ".color"],
+      color: themeData[`typography.${variant}.color`],
       display: "block",
-      fontFamily: themeData["typography." + variant + ".fontFamily"],
-      fontSize: themeData["typography." + variant + ".fontSize"],
-      fontWeight: fontWeight || themeData["typography." + variant + ".fontWeight"],
-      lineHeight: themeData["typography." + variant + ".lineHeight"],
+      fontFamily: themeData[`typography.${variant}.fontFamily`],
+      fontSize: themeData[`typography.${variant}.fontSize`],
+      fontWeight: fontWeight || themeData[`typography.${variant}.fontWeight`],
+      lineHeight: themeData[`typography.${variant}.lineHeight`],
       margin: 0,
@@ -32,16 +127,14 @@ textAlign: align || "initial"
   };
-
   return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+const _excluded = ["align", "children", "fontWeight", "variant", "stylesheet", "elementType", "typographyRef"];
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+const Typography = props => {
+  const onElementType = () => {
+    const {
+      elementType,
+      variant
+    } = props;
 
-var Typography = function Typography(props) {
-  var onElementType = function onElementType() {
-    var elementType = props.elementType,
-        variant = props.variant;
-
-
     if (elementType) {
@@ -54,43 +147,36 @@ return elementType;
 
-  var align = props.align,
-      children = props.children,
-      fontWeight = props.fontWeight,
-      variant = props.variant,
-      customStylesheet = props.stylesheet,
-      elementType = props.elementType,
-      typographyRef = props.typographyRef,
-      otherProps = _objectWithoutProperties(props, ["align", "children", "fontWeight", "variant", "stylesheet", "elementType", "typographyRef"]);
+  const {
+    align,
+    children,
+    fontWeight,
+    variant,
+    stylesheet: customStylesheet,
+    elementType,
+    // we don't want this included in the otherProps that appear in the DOM
+    typographyRef
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded);
 
-  var className = otherProps.className;
-
-
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref) {
-      var resolvedRoles = _ref.resolvedRoles;
-
-      var styles = stylesheet(_extends({
-        stylesheet: customStylesheet,
-        align: align,
-        fontWeight: fontWeight,
-        variant: variant
-      }, props), resolvedRoles);
-
-      var ElementType = onElementType();
-
-      return React.createElement(
-        ElementType,
-        _extends({}, otherProps, {
-          className: cx(css(styles.typography), className),
-          ref: typographyRef
-        }),
-        children
-      );
-    }
-  );
+  const {
+    className
+  } = otherProps;
+  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref => {
+    let {
+      resolvedRoles
+    } = _ref;
+    const styles = stylesheet(_objectSpread2({
+      stylesheet: customStylesheet,
+      align,
+      fontWeight,
+      variant
+    }, props), resolvedRoles);
+    const ElementType = onElementType();
+    return /*#__PURE__*/React.createElement(ElementType, _extends({}, otherProps, {
+      className: cx(css(styles.typography), className),
+      ref: typographyRef
+    }), children);
+  });
 };
 
 Typography.displayName = "Typography";
-
 Typography.propTypes = {
@@ -101,2 +187,3 @@ /**
   align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS),
+
   /**
@@ -110,2 +197,3 @@ * Enables specifying the semantic element to be rendered by the component
   elementType: PropTypes.node,
+
   /**
@@ -115,2 +203,3 @@ * Text to render
   children: PropTypes.node,
+
   /**
@@ -120,2 +209,3 @@ * Specifies the weight (or boldness) of the font
   fontWeight: PropTypes.oneOf(AVAILABLE_FONT_WEIGHTS),
+
   /**
@@ -125,2 +215,3 @@ * A callback ref that gets passed to the root HTML element
   typographyRef: PropTypes.func,
+
   /**
@@ -130,2 +221,3 @@ * Indicates the initial Typography style
   variant: PropTypes.oneOf(AVAILABLE_VARIANTS),
+
   /**
@@ -198,3 +290,2 @@ * Adds custom/overriding styles
 
-export default Typography;
-export { AVAILABLE_ALIGNMENTS, AVAILABLE_FONT_WEIGHTS, AVAILABLE_VARIANTS };
+export { AVAILABLE_ALIGNMENTS, AVAILABLE_FONT_WEIGHTS, AVAILABLE_VARIANTS, Typography as default };

build/index.js

@@ -5,30 +5,129 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = _interopDefault(require('react'));
-var PropTypes = _interopDefault(require('prop-types'));
+var React = require('react');
+var PropTypes = require('prop-types');
 var emotion = require('emotion');
-var ThemeContext = _interopDefault(require('@hig/theme-context'));
+var ThemeContext = require('@hig/theme-context');
 
-var AVAILABLE_ALIGNMENTS = Object.freeze(["center", "justify", "left", "right"]);
-var AVAILABLE_FONT_WEIGHTS = Object.freeze([300, 400, 500, 600, 700, "bold", // same as 700
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var ThemeContext__default = /*#__PURE__*/_interopDefaultLegacy(ThemeContext);
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+const AVAILABLE_ALIGNMENTS = Object.freeze(["center", "justify", "left", "right"]);
+const AVAILABLE_FONT_WEIGHTS = Object.freeze([300, 400, 500, 600, 700, "bold", // same as 700
 "normal" // same as 400
 ]);
-var AVAILABLE_VARIANTS = Object.freeze(["body", "caption", "h1", "h2", "h3"]);
+const AVAILABLE_VARIANTS = Object.freeze(["body", "caption", "h1", "h2", "h3"]);
 
 function stylesheet(props, themeData) {
-  var customStylesheet = props.stylesheet,
-      fontWeight = props.fontWeight,
-      align = props.align;
-
-  var variant = props.variant || "body";
-
-  var styles = {
+  const {
+    stylesheet: customStylesheet,
+    fontWeight,
+    align
+  } = props;
+  const variant = props.variant || "body";
+  const styles = {
     typography: {
-      color: themeData["typography." + variant + ".color"],
+      color: themeData[`typography.${variant}.color`],
       display: "block",
-      fontFamily: themeData["typography." + variant + ".fontFamily"],
-      fontSize: themeData["typography." + variant + ".fontSize"],
-      fontWeight: fontWeight || themeData["typography." + variant + ".fontWeight"],
-      lineHeight: themeData["typography." + variant + ".lineHeight"],
+      fontFamily: themeData[`typography.${variant}.fontFamily`],
+      fontSize: themeData[`typography.${variant}.fontSize`],
+      fontWeight: fontWeight || themeData[`typography.${variant}.fontWeight`],
+      lineHeight: themeData[`typography.${variant}.lineHeight`],
       margin: 0,
@@ -38,16 +137,14 @@ textAlign: align || "initial"
   };
-
   return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+const _excluded = ["align", "children", "fontWeight", "variant", "stylesheet", "elementType", "typographyRef"];
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+const Typography = props => {
+  const onElementType = () => {
+    const {
+      elementType,
+      variant
+    } = props;
 
-var Typography = function Typography(props) {
-  var onElementType = function onElementType() {
-    var elementType = props.elementType,
-        variant = props.variant;
-
-
     if (elementType) {
@@ -60,43 +157,36 @@ return elementType;
 
-  var align = props.align,
-      children = props.children,
-      fontWeight = props.fontWeight,
-      variant = props.variant,
-      customStylesheet = props.stylesheet,
-      elementType = props.elementType,
-      typographyRef = props.typographyRef,
-      otherProps = _objectWithoutProperties(props, ["align", "children", "fontWeight", "variant", "stylesheet", "elementType", "typographyRef"]);
+  const {
+    align,
+    children,
+    fontWeight,
+    variant,
+    stylesheet: customStylesheet,
+    elementType,
+    // we don't want this included in the otherProps that appear in the DOM
+    typographyRef
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded);
 
-  var className = otherProps.className;
-
-
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref) {
-      var resolvedRoles = _ref.resolvedRoles;
-
-      var styles = stylesheet(_extends({
-        stylesheet: customStylesheet,
-        align: align,
-        fontWeight: fontWeight,
-        variant: variant
-      }, props), resolvedRoles);
-
-      var ElementType = onElementType();
-
-      return React.createElement(
-        ElementType,
-        _extends({}, otherProps, {
-          className: emotion.cx(emotion.css(styles.typography), className),
-          ref: typographyRef
-        }),
-        children
-      );
-    }
-  );
+  const {
+    className
+  } = otherProps;
+  return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref => {
+    let {
+      resolvedRoles
+    } = _ref;
+    const styles = stylesheet(_objectSpread2({
+      stylesheet: customStylesheet,
+      align,
+      fontWeight,
+      variant
+    }, props), resolvedRoles);
+    const ElementType = onElementType();
+    return /*#__PURE__*/React__default["default"].createElement(ElementType, _extends({}, otherProps, {
+      className: emotion.cx(emotion.css(styles.typography), className),
+      ref: typographyRef
+    }), children);
+  });
 };
 
 Typography.displayName = "Typography";
-
 Typography.propTypes = {
@@ -106,3 +196,4 @@ /**
    */
-  align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS),
+  align: PropTypes__default["default"].oneOf(AVAILABLE_ALIGNMENTS),
+
   /**
@@ -115,23 +206,28 @@ * Enables specifying the semantic element to be rendered by the component
    */
-  elementType: PropTypes.node,
+  elementType: PropTypes__default["default"].node,
+
   /**
    * Text to render
    */
-  children: PropTypes.node,
+  children: PropTypes__default["default"].node,
+
   /**
    * Specifies the weight (or boldness) of the font
    */
-  fontWeight: PropTypes.oneOf(AVAILABLE_FONT_WEIGHTS),
+  fontWeight: PropTypes__default["default"].oneOf(AVAILABLE_FONT_WEIGHTS),
+
   /**
    * A callback ref that gets passed to the root HTML element
    */
-  typographyRef: PropTypes.func,
+  typographyRef: PropTypes__default["default"].func,
+
   /**
    * Indicates the initial Typography style
    */
-  variant: PropTypes.oneOf(AVAILABLE_VARIANTS),
+  variant: PropTypes__default["default"].oneOf(AVAILABLE_VARIANTS),
+
   /**
    * Adds custom/overriding styles
    */
-  stylesheet: PropTypes.func
+  stylesheet: PropTypes__default["default"].func
 };
@@ -200,5 +296,5 @@ Typography.__docgenInfo = {
 
-exports.default = Typography;
 exports.AVAILABLE_ALIGNMENTS = AVAILABLE_ALIGNMENTS;
 exports.AVAILABLE_FONT_WEIGHTS = AVAILABLE_FONT_WEIGHTS;
 exports.AVAILABLE_VARIANTS = AVAILABLE_VARIANTS;
+exports["default"] = Typography;

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/typography-v2.2.0](https://github.com/Autodesk/hig/compare/@hig/typography@2.1.0...@hig/typography@2.2.0) (2022-08-26)
+
+
+### Features
+
+* use latest theme-data ([ca88bb6](https://github.com/Autodesk/hig/commit/ca88bb6))
+
 # [@hig/typography-v2.1.0](https://github.com/Autodesk/hig/compare/@hig/typography@2.0.0...@hig/typography@2.1.0) (2022-01-24)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/typography",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "HIG Typography components",
@@ -32,4 +32,4 @@ "author": "Autodesk Inc.",
   "peerDependencies": {
-    "@hig/theme-context": "^4.1.0",
-    "@hig/theme-data": "^2.22.1",
+    "@hig/theme-context": "^4.2.0",
+    "@hig/theme-data": "^3.1.0",
     "react": "^17.0.0"
@@ -36,0 +36,0 @@ },

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

25227

increased by19.81%

Lines of code

501

increased by45.22%

No dependency changes