@zendeskgarden/react-typography - npm Package Compare versions

Comparing version 8.5.0 to 8.6.0

dist/index.cjs.js

@@ -101,8 +101,9 @@ /**
   var fontSize = monospace ? polished.math("".concat(props.theme.fontSizes[props.size], " - 1px")) : props.theme.fontSizes[props.size];
+  var fontWeight = props.isBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular;
   var direction = reactTheming.isRtl(props) ? 'rtl' : 'ltr';
-  return styled.css(["line-height:", ";font-family:", ";font-size:", ";direction:", ";"], lineHeight, fontFamily, fontSize, direction);
+  return styled.css(["line-height:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, fontFamily, fontSize, fontWeight, direction);
 };
 var StyledFont = styled__default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.5.0'
+  'data-garden-version': '8.6.0'
 })(_templateObject(), function (props) {
@@ -135,3 +136,3 @@ return fontStyles(props);
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.5.0',
+  'data-garden-version': '8.6.0',
   as: 'code'
@@ -162,3 +163,3 @@ })(_templateObject$1(), function (props) {
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.5.0'
+  'data-garden-version': '8.6.0'
 })(_templateObject$2(), function (props) {
@@ -194,3 +195,3 @@ return reactTheming.isRtl(props) ? 'rtl' : 'ltr';
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '8.5.0'
+  'data-garden-version': '8.6.0'
 })(_templateObject$3(), function (props) {
@@ -207,3 +208,3 @@ return listStyles(props);
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '8.5.0'
+  'data-garden-version': '8.6.0'
 })(_templateObject2(), function (props) {
@@ -265,3 +266,3 @@ return listStyles(props);
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '8.5.0'
+  'data-garden-version': '8.6.0'
 })(_templateObject$4(), function (props) {
@@ -291,3 +292,3 @@ return reactTheming.isRtl(props) ? 'right' : 'left';
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '8.5.0'
+  'data-garden-version': '8.6.0'
 })(_templateObject3(), function (props) {
@@ -307,2 +308,25 @@ return reactTheming.retrieveComponentStyles(UNORDERED_ID$1, props);
 
+function _templateObject$5() {
+  var data = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  direction: ", ";\n\n  & + & {\n    margin-top: ", ";\n  }\n\n  ", ";\n"]);
+  _templateObject$5 = function _templateObject() {
+    return data;
+  };
+  return data;
+}
+var COMPONENT_ID$3 = 'typography.paragraph';
+var StyledParagraph = styled__default.p.attrs({
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.6.0'
+})(_templateObject$5(), function (props) {
+  return props.theme.rtl ? 'rtl' : 'ltr';
+}, function (props) {
+  return props.theme.lineHeights[props.size];
+}, function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
+});
+StyledParagraph.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME,
+  size: 'md'
+};
+
 var SM = React__default.forwardRef(function (_ref, ref) {
@@ -320,2 +344,3 @@ var tag = _ref.tag,
   tag: PropTypes.any,
+  isBold: PropTypes.bool,
   isMonospace: PropTypes.bool
@@ -339,2 +364,3 @@ };
   tag: PropTypes.any,
+  isBold: PropTypes.bool,
   isMonospace: PropTypes.bool
@@ -358,2 +384,3 @@ };
   tag: PropTypes.any,
+  isBold: PropTypes.bool,
   isMonospace: PropTypes.bool
@@ -376,3 +403,4 @@ };
 XL.propTypes = {
-  tag: PropTypes.any
+  tag: PropTypes.any,
+  isBold: PropTypes.bool
 };
@@ -394,3 +422,4 @@ XL.defaultProps = {
 XXL.propTypes = {
-  tag: PropTypes.any
+  tag: PropTypes.any,
+  isBold: PropTypes.bool
 };
@@ -412,3 +441,4 @@ XXL.defaultProps = {
 XXXL.propTypes = {
-  tag: PropTypes.any
+  tag: PropTypes.any,
+  isBold: PropTypes.bool
 };
@@ -473,2 +503,26 @@ XXXL.defaultProps = {
 
+var Paragraph = React__default.forwardRef(function (_ref, ref) {
+  var size = _ref.size,
+      other = _objectWithoutProperties(_ref, ["size"]);
+  var _size;
+  if (size === 'small') {
+    _size = 'sm';
+  } else if (size === 'medium') {
+    _size = 'md';
+  } else {
+    _size = 'lg';
+  }
+  return React__default.createElement(StyledParagraph, _extends({
+    ref: ref,
+    size: _size
+  }, other));
+});
+Paragraph.displayName = 'Paragraph';
+Paragraph.propTypes = {
+  size: PropTypes.oneOf(['small', 'medium', 'large'])
+};
+Paragraph.defaultProps = {
+  size: 'medium'
+};
+
 var OrderedListContext = React.createContext(undefined);
@@ -571,2 +625,3 @@ var useOrderedListContext = function useOrderedListContext() {
 exports.OrderedList = OrderedList;
+exports.Paragraph = Paragraph;
 exports.SM = SM;
@@ -573,0 +628,0 @@ exports.UnorderedList = UnorderedList;

dist/index.esm.js

@@ -93,8 +93,9 @@ /**
   var fontSize = monospace ? math("".concat(props.theme.fontSizes[props.size], " - 1px")) : props.theme.fontSizes[props.size];
+  var fontWeight = props.isBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular;
   var direction = isRtl(props) ? 'rtl' : 'ltr';
-  return css(["line-height:", ";font-family:", ";font-size:", ";direction:", ";"], lineHeight, fontFamily, fontSize, direction);
+  return css(["line-height:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, fontFamily, fontSize, fontWeight, direction);
 };
 var StyledFont = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.5.0'
+  'data-garden-version': '8.6.0'
 })(_templateObject(), function (props) {
@@ -127,3 +128,3 @@ return fontStyles(props);
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.5.0',
+  'data-garden-version': '8.6.0',
   as: 'code'
@@ -154,3 +155,3 @@ })(_templateObject$1(), function (props) {
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.5.0'
+  'data-garden-version': '8.6.0'
 })(_templateObject$2(), function (props) {
@@ -186,3 +187,3 @@ return isRtl(props) ? 'rtl' : 'ltr';
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '8.5.0'
+  'data-garden-version': '8.6.0'
 })(_templateObject$3(), function (props) {
@@ -199,3 +200,3 @@ return listStyles(props);
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '8.5.0'
+  'data-garden-version': '8.6.0'
 })(_templateObject2(), function (props) {
@@ -257,3 +258,3 @@ return listStyles(props);
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '8.5.0'
+  'data-garden-version': '8.6.0'
 })(_templateObject$4(), function (props) {
@@ -283,3 +284,3 @@ return isRtl(props) ? 'right' : 'left';
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '8.5.0'
+  'data-garden-version': '8.6.0'
 })(_templateObject3(), function (props) {
@@ -299,2 +300,25 @@ return retrieveComponentStyles(UNORDERED_ID$1, props);
 
+function _templateObject$5() {
+  var data = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  direction: ", ";\n\n  & + & {\n    margin-top: ", ";\n  }\n\n  ", ";\n"]);
+  _templateObject$5 = function _templateObject() {
+    return data;
+  };
+  return data;
+}
+var COMPONENT_ID$3 = 'typography.paragraph';
+var StyledParagraph = styled.p.attrs({
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.6.0'
+})(_templateObject$5(), function (props) {
+  return props.theme.rtl ? 'rtl' : 'ltr';
+}, function (props) {
+  return props.theme.lineHeights[props.size];
+}, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$3, props);
+});
+StyledParagraph.defaultProps = {
+  theme: DEFAULT_THEME,
+  size: 'md'
+};
+
 var SM = React.forwardRef(function (_ref, ref) {
@@ -312,2 +336,3 @@ var tag = _ref.tag,
   tag: PropTypes.any,
+  isBold: PropTypes.bool,
   isMonospace: PropTypes.bool
@@ -331,2 +356,3 @@ };
   tag: PropTypes.any,
+  isBold: PropTypes.bool,
   isMonospace: PropTypes.bool
@@ -350,2 +376,3 @@ };
   tag: PropTypes.any,
+  isBold: PropTypes.bool,
   isMonospace: PropTypes.bool
@@ -368,3 +395,4 @@ };
 XL.propTypes = {
-  tag: PropTypes.any
+  tag: PropTypes.any,
+  isBold: PropTypes.bool
 };
@@ -386,3 +414,4 @@ XL.defaultProps = {
 XXL.propTypes = {
-  tag: PropTypes.any
+  tag: PropTypes.any,
+  isBold: PropTypes.bool
 };
@@ -404,3 +433,4 @@ XXL.defaultProps = {
 XXXL.propTypes = {
-  tag: PropTypes.any
+  tag: PropTypes.any,
+  isBold: PropTypes.bool
 };
@@ -465,2 +495,26 @@ XXXL.defaultProps = {
 
+var Paragraph = React.forwardRef(function (_ref, ref) {
+  var size = _ref.size,
+      other = _objectWithoutProperties(_ref, ["size"]);
+  var _size;
+  if (size === 'small') {
+    _size = 'sm';
+  } else if (size === 'medium') {
+    _size = 'md';
+  } else {
+    _size = 'lg';
+  }
+  return React.createElement(StyledParagraph, _extends({
+    ref: ref,
+    size: _size
+  }, other));
+});
+Paragraph.displayName = 'Paragraph';
+Paragraph.propTypes = {
+  size: PropTypes.oneOf(['small', 'medium', 'large'])
+};
+Paragraph.defaultProps = {
+  size: 'medium'
+};
+
 var OrderedListContext = createContext(undefined);
@@ -558,2 +612,2 @@ var useOrderedListContext = function useOrderedListContext() {
 
-export { Code, Ellipsis, LG, MD, OrderedList, SM, UnorderedList, XL, XXL, XXXL };
+export { Code, Ellipsis, LG, MD, OrderedList, Paragraph, SM, UnorderedList, XL, XXL, XXXL };

dist/typings/elements/LG.d.ts

@@ -11,2 +11,4 @@ /**
     tag?: any;
+    /** Render bold font */
+    isBold?: boolean;
     /** Render monospace font */
@@ -13,0 +15,0 @@ isMonospace?: boolean;

dist/typings/elements/MD.d.ts

@@ -11,2 +11,4 @@ /**
     tag?: any;
+    /** Render bold font */
+    isBold?: boolean;
     /** Render monospace font */
@@ -13,0 +15,0 @@ isMonospace?: boolean;

dist/typings/elements/SM.d.ts

@@ -11,2 +11,4 @@ /**
     tag?: any;
+    /** Render bold font */
+    isBold?: boolean;
     /** Render monospace font */
@@ -13,0 +15,0 @@ isMonospace?: boolean;

dist/typings/elements/XL.d.ts

@@ -11,2 +11,4 @@ /**
     tag?: any;
+    /** Render bold font */
+    isBold?: boolean;
 }
@@ -13,0 +15,0 @@ /**

dist/typings/elements/XXL.d.ts

@@ -11,2 +11,4 @@ /**
     tag?: any;
+    /** Render bold font */
+    isBold?: boolean;
 }
@@ -13,0 +15,0 @@ /**

dist/typings/elements/XXXL.d.ts

@@ -11,2 +11,4 @@ /**
     tag?: any;
+    /** Render bold font */
+    isBold?: boolean;
 }
@@ -13,0 +15,0 @@ /**

dist/typings/index.d.ts

@@ -15,3 +15,4 @@ /**
 export { default as Ellipsis } from './elements/Ellipsis';
+export { default as Paragraph } from './elements/Paragraph';
 export { default as OrderedList } from './elements/lists/OrderedList';
 export { default as UnorderedList } from './elements/lists/UnorderedList';

dist/typings/styled/index.d.ts

@@ -12,1 +12,2 @@ /**
 export * from './StyledListItem';
+export * from './StyledParagraph';

dist/typings/styled/StyledFont.d.ts

@@ -9,2 +9,3 @@ /**
 export interface IStyledFontProps {
+    isBold?: boolean;
     isMonospace?: boolean;
@@ -11,0 +12,0 @@ size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';

dist/typings/styled/StyledList.d.ts

@@ -9,3 +9,3 @@ /**
 interface IStyledListProps {
-    listType: 'decimal' | 'decimal-leading-zero' | 'lower-alpha' | 'lower-roman' | 'upper-alpha' | 'upper-roman';
+    listType?: 'decimal' | 'decimal-leading-zero' | 'lower-alpha' | 'lower-roman' | 'upper-alpha' | 'upper-roman';
 }
@@ -17,3 +17,3 @@ export declare const StyledOrderedList: import("styled-components").StyledComponent<"ol", DefaultTheme, {
 interface IStyledUnorderedListProps {
-    listType: 'circle' | 'disc' | 'square';
+    listType?: 'circle' | 'disc' | 'square';
 }
@@ -20,0 +20,0 @@ export declare const StyledUnorderedList: import("styled-components").StyledComponent<"ul", DefaultTheme, {

package.json

@@ -11,3 +11,3 @@ {
   },
-  "version": "8.5.0",
+  "version": "8.6.0",
   "main": "dist/index.cjs.js",
@@ -36,3 +36,3 @@ "module": "dist/index.esm.js",
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.5.0"
+    "@zendeskgarden/react-theming": "^8.6.0"
   },
@@ -49,3 +49,3 @@ "keywords": [
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "63b4995636a9e7f6abd8bcdaf326be2c25b87fea"
+  "gitHead": "37d41964de0fd9b892e2a620fb82212826497a46"
 }

No alert changes

Improved metrics

Total package byte prevSize

62227

increased by8.27%

Number of package files

28

increased by7.69%

Lines of code

1531

increased by10.86%

No dependency changes