cozy-ui 58.1.2 → 58.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [58.2.0](https://github.com/cozy/cozy-ui/compare/v58.1.2...v58.2.0) (2021-12-08)
+
+
+### Features
+
+* Add `noWrap` prop on BarTitle ([74e3742](https://github.com/cozy/cozy-ui/commit/74e3742))
+
 ## [58.1.2](https://github.com/cozy/cozy-ui/compare/v58.1.1...v58.1.2) (2021-12-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "58.1.2",
+  "version": "58.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/BarTitle/Readme.md

@@ -15,12 +15,22 @@ const MyPage = () => {
 }
 ```
 
-### Display
+### Basic usage
 
-The border is here to show the area of the bar.
+The red border is here only to show the area of the bar.
 
-```
-<div style={{ height: '3rem', border: '1px solid var(--dividerColor) ' }}>
+```jsx
+<div style={{ border: '1px solid red' }}>
   <BarTitle>My transactions</BarTitle>
 </div>
 ```
+
+### Long title with ellipsis
+
+The red border is here only to show the area of the bar.
+
+```jsx
+<div style={{ border: '1px solid red' }}>
+  <BarTitle noWrap>{content.ada.short}</BarTitle>
+</div>
+```

package/react/BarTitle/index.jsx

@@ -1,13 +1,27 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import Typography from '../Typography'
+
 import styles from './styles.styl'
 
-const BarTitle = ({ children }) => {
+const BarTitle = ({ noWrap, children }) => {
   return (
-    <Typography variant="h5" component="h1" className={styles.BarTitle}>
-      {children}
-    </Typography>
+    <div className={styles.BarTitle}>
+      <Typography variant="h5" component="h1" noWrap={noWrap}>
+        {children}
+      </Typography>
+    </div>
   )
 }
 
+BarTitle.defaultProps = {
+  noWrap: false
+}
+
+BarTitle.propTypes = {
+  /** Add an ellipsis like `noWrap` prop on Typography component does */
+  noWrap: PropTypes.bool
+}
+
 export default BarTitle

package/transpiled/react/BarTitle/index.js

@@ -1,16 +1,27 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Typography from "cozy-ui/transpiled/react/Typography";
 var styles = {
   "BarTitle": "styles__BarTitle___I5r2e"
 };
 
 var BarTitle = function BarTitle(_ref) {
-  var children = _ref.children;
-  return React.createElement(Typography, {
+  var noWrap = _ref.noWrap,
+      children = _ref.children;
+  return React.createElement("div", {
+    className: styles.BarTitle
+  }, React.createElement(Typography, {
     variant: "h5",
     component: "h1",
-    className: styles.BarTitle
-  }, children);
+    noWrap: noWrap
+  }, children));
 };
 
+BarTitle.defaultProps = {
+  noWrap: false
+};
+BarTitle.propTypes = {
+  /** Add an ellipsis like `noWrap` prop on Typography component does */
+  noWrap: PropTypes.bool
+};
 export default BarTitle;