@hig/rich-text - npm Package Compare versions

Comparing version 0.2.0-alpha.fbb1eed0 to 1.0.0

build/index.es.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import { css } from 'emotion';
+import ThemeContext from '@hig/theme-context';
 
-var sizes = Object.freeze({ SMALL: "small", LARGE: "large" });
+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; };
 
-var availableSizes = Object.freeze(Object.values(sizes));
+function stylesheet(themeData) {
+  function typographyStyle(variant, margin) {
+    return {
+      color: themeData["typography." + variant + ".color"],
+      display: "block",
+      fontFamily: themeData["typography." + variant + ".fontFamily"],
+      fontSize: themeData["typography." + variant + ".fontSize"],
+      fontWeight: themeData["typography." + variant + ".fontWeight"],
+      lineHeight: themeData["typography." + variant + ".lineHeight"],
+      margin: margin || 0,
+      textAlign: "initial"
+    };
+  }
 
+  var baseStyles = typographyStyle("body", "0 0 " + themeData["density.spacings.small"] + " 0");
+
+  var listStyles = {
+    "ul, ol": { paddingLeft: themeData["density.spacings.large"] },
+    "ul li": {
+      listStyle: "none",
+
+      "&:before": {
+        content: "'\\B7'",
+        verticalAlign: "middle",
+        fontSize: themeData["density.fontSizes.large"],
+        paddingRight: themeData["density.spacings.small"],
+        marginLeft: "-14px"
+      }
+    }
+  };
+
+  var headerStyles = {
+    h1: typographyStyle("h1"),
+    h2: typographyStyle("h2"),
+    h3: typographyStyle("h3")
+  };
+
+  var anchorStyles = {
+    a: {
+      textDecoration: "none",
+      cursor: "pointer",
+      color: themeData["textLink.textColor"],
+      outline: "none",
+
+      "&:hover": {
+        color: themeData["textLink.hover.textColor"],
+        textDecoration: "underline",
+        textDecorationColor: themeData["textLink.hover.underline.color"]
+      },
+
+      "&:focus": {
+        color: themeData["textLink.focus.textColor"],
+        outline: "solid " + themeData["textLink.focus.halo.width"] + " " + themeData["textLink.focus.halo.color"]
+      }
+    }
+  };
+
+  var boldStyles = {
+    "b, strong": { fontWeight: themeData["basics.fontWeights.bold"] }
+  };
+
+  var paragraphStyles = {
+    p: typographyStyle("body", "0 0 " + themeData["density.spacings.small"] + " 0"),
+    "h1 + p, h2 + p, h3 + p": typographyStyle("body", themeData["density.spacings.medium"] + " 0 " + themeData["density.spacings.small"] + " 0")
+  };
+
+  return {
+    richText: _extends({}, baseStyles, listStyles, headerStyles, anchorStyles, paragraphStyles, boldStyles)
+  };
+}
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -19,4 +87,2 @@
 
-var COMPONENT_CLASS = "hig__rich-text";
-
 var RichText = function (_Component) {
@@ -34,11 +100,21 @@ _inherits(RichText, _Component);
     value: function render() {
-      var richTextClasses = cx("" + COMPONENT_CLASS, _defineProperty({}, "hig__rich-text--" + this.props.size, this.props.size));
-      return this.props.children ? React.createElement(
-        "div",
-        { className: richTextClasses },
-        this.props.children
-      ) : React.createElement("div", {
-        className: richTextClasses,
-        dangerouslySetInnerHTML: this.props.dangerouslySetInnerHTML // eslint-disable-line react/no-danger
-      });
+      var _this2 = this;
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var resolvedRoles = _ref.resolvedRoles;
+
+          var styles = stylesheet(resolvedRoles);
+          return _this2.props.children ? React.createElement(
+            "div",
+            { className: css(styles.richText) },
+            _this2.props.children
+          ) : React.createElement("div", {
+            className: css(styles.richText),
+            dangerouslySetInnerHTML: _this2.props.dangerouslySetInnerHTML // eslint-disable-line react/no-danger
+          });
+        }
+      );
     }
@@ -56,11 +132,7 @@ }]);
   /**
-   * HTML string to be rendered and styled with HIG typography ruless
+   * HTML string to be rendered and styled with HIG typography rules
    */
   dangerouslySetInnerHTML: PropTypes.shape({
     __html: PropTypes.string
-  }),
-  /**
-   * String which specifies which size of RichText will be used
-   */
-  size: PropTypes.oneOf(availableSizes)
+  })
 };
@@ -89,12 +161,3 @@ RichText.__docgenInfo = {
       "required": false,
-      "description": "HTML string to be rendered and styled with HIG typography ruless"
-    },
-    "size": {
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "availableSizes"
-      },
-      "required": false,
-      "description": "String which specifies which size of RichText will be used"
+      "description": "HTML string to be rendered and styled with HIG typography rules"
     }
@@ -105,2 +168,1 @@ }
 export default RichText;
-export { sizes, availableSizes };

build/index.js

@@ -10,12 +10,80 @@ 'use strict';
 var PropTypes = _interopDefault(require('prop-types'));
-var cx = _interopDefault(require('classnames'));
+var emotion = require('emotion');
+var ThemeContext = _interopDefault(require('@hig/theme-context'));
 
-var sizes = Object.freeze({ SMALL: "small", LARGE: "large" });
+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; };
 
-var availableSizes = Object.freeze(Object.values(sizes));
+function stylesheet(themeData) {
+  function typographyStyle(variant, margin) {
+    return {
+      color: themeData["typography." + variant + ".color"],
+      display: "block",
+      fontFamily: themeData["typography." + variant + ".fontFamily"],
+      fontSize: themeData["typography." + variant + ".fontSize"],
+      fontWeight: themeData["typography." + variant + ".fontWeight"],
+      lineHeight: themeData["typography." + variant + ".lineHeight"],
+      margin: margin || 0,
+      textAlign: "initial"
+    };
+  }
 
+  var baseStyles = typographyStyle("body", "0 0 " + themeData["density.spacings.small"] + " 0");
+
+  var listStyles = {
+    "ul, ol": { paddingLeft: themeData["density.spacings.large"] },
+    "ul li": {
+      listStyle: "none",
+
+      "&:before": {
+        content: "'\\B7'",
+        verticalAlign: "middle",
+        fontSize: themeData["density.fontSizes.large"],
+        paddingRight: themeData["density.spacings.small"],
+        marginLeft: "-14px"
+      }
+    }
+  };
+
+  var headerStyles = {
+    h1: typographyStyle("h1"),
+    h2: typographyStyle("h2"),
+    h3: typographyStyle("h3")
+  };
+
+  var anchorStyles = {
+    a: {
+      textDecoration: "none",
+      cursor: "pointer",
+      color: themeData["textLink.textColor"],
+      outline: "none",
+
+      "&:hover": {
+        color: themeData["textLink.hover.textColor"],
+        textDecoration: "underline",
+        textDecorationColor: themeData["textLink.hover.underline.color"]
+      },
+
+      "&:focus": {
+        color: themeData["textLink.focus.textColor"],
+        outline: "solid " + themeData["textLink.focus.halo.width"] + " " + themeData["textLink.focus.halo.color"]
+      }
+    }
+  };
+
+  var boldStyles = {
+    "b, strong": { fontWeight: themeData["basics.fontWeights.bold"] }
+  };
+
+  var paragraphStyles = {
+    p: typographyStyle("body", "0 0 " + themeData["density.spacings.small"] + " 0"),
+    "h1 + p, h2 + p, h3 + p": typographyStyle("body", themeData["density.spacings.medium"] + " 0 " + themeData["density.spacings.small"] + " 0")
+  };
+
+  return {
+    richText: _extends({}, baseStyles, listStyles, headerStyles, anchorStyles, paragraphStyles, boldStyles)
+  };
+}
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -27,4 +95,2 @@
 
-var COMPONENT_CLASS = "hig__rich-text";
-
 var RichText = function (_Component) {
@@ -42,11 +108,21 @@ _inherits(RichText, _Component);
     value: function render() {
-      var richTextClasses = cx("" + COMPONENT_CLASS, _defineProperty({}, "hig__rich-text--" + this.props.size, this.props.size));
-      return this.props.children ? React__default.createElement(
-        "div",
-        { className: richTextClasses },
-        this.props.children
-      ) : React__default.createElement("div", {
-        className: richTextClasses,
-        dangerouslySetInnerHTML: this.props.dangerouslySetInnerHTML // eslint-disable-line react/no-danger
-      });
+      var _this2 = this;
+
+      return React__default.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var resolvedRoles = _ref.resolvedRoles;
+
+          var styles = stylesheet(resolvedRoles);
+          return _this2.props.children ? React__default.createElement(
+            "div",
+            { className: emotion.css(styles.richText) },
+            _this2.props.children
+          ) : React__default.createElement("div", {
+            className: emotion.css(styles.richText),
+            dangerouslySetInnerHTML: _this2.props.dangerouslySetInnerHTML // eslint-disable-line react/no-danger
+          });
+        }
+      );
     }
@@ -64,11 +140,7 @@ }]);
   /**
-   * HTML string to be rendered and styled with HIG typography ruless
+   * HTML string to be rendered and styled with HIG typography rules
    */
   dangerouslySetInnerHTML: PropTypes.shape({
     __html: PropTypes.string
-  }),
-  /**
-   * String which specifies which size of RichText will be used
-   */
-  size: PropTypes.oneOf(availableSizes)
+  })
 };
@@ -97,12 +169,3 @@ RichText.__docgenInfo = {
       "required": false,
-      "description": "HTML string to be rendered and styled with HIG typography ruless"
-    },
-    "size": {
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "availableSizes"
-      },
-      "required": false,
-      "description": "String which specifies which size of RichText will be used"
+      "description": "HTML string to be rendered and styled with HIG typography rules"
     }
@@ -113,3 +176,1 @@ }
 exports.default = RichText;
-exports.sizes = sizes;
-exports.availableSizes = availableSizes;

package.json

 {
   "name": "@hig/rich-text",
-  "version": "0.2.0-alpha.fbb1eed0",
+  "version": "1.0.0",
   "description": "HIG RichText",
@@ -17,3 +17,2 @@ "author": "Autodesk Inc.",
   "module": "build/index.es.js",
-  "style": "build/index.css",
   "files": [
@@ -23,11 +22,15 @@ "build/*"
   "dependencies": {
-    "classnames": "^2.2.5",
+    "@hig/theme-context": "^2.1.0",
+    "emotion": "^10.0.0",
     "prop-types": "^15.6.1"
   },
   "devDependencies": {
-    "@hig/babel-preset": "0.2.0-alpha.fbb1eed0",
-    "@hig/eslint-config": "0.2.0-alpha.fbb1eed0",
-    "@hig/scripts": "0.2.0-alpha.fbb1eed0",
-    "@hig/semantic-release-config": "0.2.0-alpha.fbb1eed0",
-    "@hig/styles": "^0.1.1"
+    "@hig/babel-preset": "^0.1.1",
+    "@hig/eslint-config": "^0.1.0",
+    "@hig/jest-preset": "^0.1.0",
+    "@hig/progress-bar": "^1.0.2",
+    "@hig/scripts": "^0.1.2",
+    "@hig/semantic-release-config": "^0.1.0",
+    "@hig/styles": "^0.3.0",
+    "@hig/text-link": "^1.0.0"
   },
@@ -40,2 +43,3 @@ "peerDependencies": {
     "lint": "hig-scripts-lint",
+    "test": "hig-scripts-test",
     "release": "hig-scripts-release"
@@ -46,2 +50,5 @@ },
   },
+  "jest": {
+    "preset": "@hig/jest-preset"
+  },
   "release": {
@@ -48,0 +55,0 @@ "extends": "@hig/semantic-release-config"

README.md

@@ -10,10 +10,10 @@ # Rich Text
 ```
-yarn add @hig/typography
+yarn add @hig/rich-text
 ```
 
-## Import the component and CSS
+## Import the component and font CSS
 
 ```
 import RichText from '@hig/rich-text';
-import '@hig/rich-text/build/index.css';
+import "@hig/fonts/build/ArtifaktElement.css";
 ```
@@ -26,4 +26,4 @@
   <h1>Make Your Rich Text Richer</h1>
-  <p>All you need to do is wrap it in a <pre><RichText></pre> component.</p>
+  <p>All you need to do is wrap it in a <code>{`<RichText />`}</code> component.</p>
 </RichText>
 ```

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

16356

decreased by-41.96%

Dependency count

4

increased by33.33%

Dev dependency count

8

increased by60%

Number of package files

5

decreased by-16.67%

Lines of code

284

decreased by-50.09%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@hig/theme-context@^2.1.0

• + Addedemotion@^10.0.0

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/generator@7.26.2(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/runtime@7.26.0(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.25.9(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@emotion/cache@10.0.29(transitive)

• + Added@emotion/hash@0.8.0(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/serialize@0.11.16(transitive)

• + Added@emotion/sheet@0.9.4(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@emotion/utils@0.11.3(transitive)

• + Added@emotion/weak-memoize@0.2.5(transitive)

• + Added@hig/theme-context@2.1.3(transitive)

• + Added@hig/theme-data@3.4.2(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedasap@2.0.6(transitive)

• + Addedbabel-plugin-emotion@10.2.2(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcreate-emotion@10.0.27(transitive)

• + Addedcreate-react-context@0.2.3(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addedemotion@10.0.27(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedgud@1.0.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedtinycolor2@1.6.0(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removedclassnames@^2.2.5

• - Removedclassnames@2.5.1(transitive)