@hig/typography - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

build/index.es.js

@@ -13,3 +13,4 @@ import React, { Component } from 'react';
 function stylesheet(props, themeData) {
-  var fontWeight = props.fontWeight,
+  var customStylesheet = props.stylesheet,
+      fontWeight = props.fontWeight,
       align = props.align;
@@ -19,3 +20,3 @@
 
-  return {
+  var styles = {
     typography: {
@@ -32,2 +33,4 @@ color: themeData["typography." + variant + ".color"],
   };
+
+  return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
@@ -85,4 +88,5 @@
           variant = _props.variant,
+          customStylesheet = _props.stylesheet,
           elementType = _props.elementType,
-          otherProps = _objectWithoutProperties(_props, ["align", "children", "fontWeight", "variant", "elementType"]);
+          otherProps = _objectWithoutProperties(_props, ["align", "children", "fontWeight", "variant", "stylesheet", "elementType"]);
 
@@ -98,3 +102,8 @@ var className = otherProps.className;
 
-          var styles = stylesheet({ align: align, fontWeight: fontWeight, variant: variant }, resolvedRoles);
+          var styles = stylesheet(_extends({
+            stylesheet: customStylesheet,
+            align: align,
+            fontWeight: fontWeight,
+            variant: variant
+          }, _this2.props), resolvedRoles);
 
@@ -142,3 +151,7 @@ var ElementType = _this2.elementType();
    */
-  variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
+  variant: PropTypes.oneOf(AVAILABLE_VARIANTS),
+  /**
+   * Adds custom/overriding styles
+   */
+  stylesheet: PropTypes.func
 };
@@ -189,2 +202,9 @@ Typography.__docgenInfo = {
       "description": "Indicates the initial Typography style"
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Adds custom/overriding styles"
     }
@@ -191,0 +211,0 @@ }

build/index.js

@@ -20,3 +20,4 @@ 'use strict';
 function stylesheet(props, themeData) {
-  var fontWeight = props.fontWeight,
+  var customStylesheet = props.stylesheet,
+      fontWeight = props.fontWeight,
       align = props.align;
@@ -26,3 +27,3 @@
 
-  return {
+  var styles = {
     typography: {
@@ -39,2 +40,4 @@ color: themeData["typography." + variant + ".color"],
   };
+
+  return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
@@ -92,4 +95,5 @@
           variant = _props.variant,
+          customStylesheet = _props.stylesheet,
           elementType = _props.elementType,
-          otherProps = _objectWithoutProperties(_props, ["align", "children", "fontWeight", "variant", "elementType"]);
+          otherProps = _objectWithoutProperties(_props, ["align", "children", "fontWeight", "variant", "stylesheet", "elementType"]);
 
@@ -105,3 +109,8 @@ var className = otherProps.className;
 
-          var styles = stylesheet({ align: align, fontWeight: fontWeight, variant: variant }, resolvedRoles);
+          var styles = stylesheet(_extends({
+            stylesheet: customStylesheet,
+            align: align,
+            fontWeight: fontWeight,
+            variant: variant
+          }, _this2.props), resolvedRoles);
 
@@ -149,3 +158,7 @@ var ElementType = _this2.elementType();
    */
-  variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
+  variant: PropTypes.oneOf(AVAILABLE_VARIANTS),
+  /**
+   * Adds custom/overriding styles
+   */
+  stylesheet: PropTypes.func
 };
@@ -196,2 +209,9 @@ Typography.__docgenInfo = {
       "description": "Indicates the initial Typography style"
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Adds custom/overriding styles"
     }
@@ -198,0 +218,0 @@ }

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/typography-v1.1.0](https://github.com/Autodesk/hig/compare/@hig/typography@1.0.4...@hig/typography@1.1.0) (2020-10-13)
+
+
+### Features
+
+* Add stylesheet prop ([85dfd86](https://github.com/Autodesk/hig/commit/85dfd86))
+
 # [@hig/typography-v1.0.4](https://github.com/Autodesk/hig/compare/@hig/typography@1.0.3...@hig/typography@1.0.4) (2019-06-06)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/typography",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "HIG Typography components",
@@ -33,3 +33,3 @@ "author": "Autodesk Inc.",
     "@hig/theme-context": "^3.0.0",
-    "@hig/theme-data": "^2.7.0",
+    "@hig/theme-data": "^2.18.0",
     "react": "^15.4.1 || ^16.3.2"
@@ -36,0 +36,0 @@ },

README.md

@@ -26,1 +26,25 @@ # Typography
 ```
+## Styling
+
+Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 
+
+Typography also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance
+
+```jsx
+import Typography from '@hig/typography';
+
+function YourComponent() {
+  // ...
+  const customStylesheet = (styles, props, themeData) => ({
+    ...styles,
+    typography: {
+      ...styles.timestamp,
+      color: themeData["colorScheme.errorColor"]
+    }
+  });
+
+  return (
+    <Typography stylesheet={customStylesheet} />
+  );
+}
+```

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

22875

increased by9.35%

Lines of code

366

increased by11.59%

Number of lines in readme file

50

increased by92.31%

No dependency changes