cozy-ui 90.5.0 → 90.6.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [90.6.0](https://github.com/cozy/cozy-ui/compare/v90.5.0...v90.6.0) (2023-08-08)
+
+
+### Features
+
+* **Filename:** Add midEllipsis prop ([1f9df73](https://github.com/cozy/cozy-ui/commit/1f9df73))
+
 # [90.5.0](https://github.com/cozy/cozy-ui/compare/v90.4.0...v90.5.0) (2023-08-07)
 
 

package/package.json

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

package/react/Filename/Readme.md

@@ -1,29 +1,25 @@
 #### Filename with extension (ellipsis by default)
 
 ```jsx
-import Filename from 'cozy-ui/transpiled/react/Filename';
-<div>
-  <Filename filename="Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex" extension=".pdf" />
-</div>
-```
-
-#### Filename with extension and icon
+import Filename from 'cozy-ui/transpiled/react/Filename'
+import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
+import Variants from 'cozy-ui/docs/components/Variants'
 
-```jsx
-import Filename from 'cozy-ui/transpiled/react/Filename';
-import FileIcon from 'cozy-ui/transpiled/react/Icons/File';
+const initialVariants = [
+  { midEllipsis: false, icon: false, body1Variant: false, noExtension: false }
+]
 
-<div>
-  <Filename icon={FileIcon} filename="my_awesome_paper" extension=".pdf" />
-</div>
-```
-
-#### Filename with custom variant
-
-```jsx
-import Filename from 'cozy-ui/transpiled/react/Filename';
+;
 
-<div>
-  <Filename variant={'body1'} filename="my_awesome_paper" extension=".pdf" />
-</div>
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Filename
+      icon={variant.icon ? FileIcon : undefined}
+      variant={variant.body1Variant ? 'body1' : undefined}
+      midEllipsis={variant.midEllipsis}
+      filename="Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex"
+      extension={variant.noExtension ? undefined : ".pdf"}
+    />
+  )}
+</Variants>
 ```

package/react/Filename/index.jsx

@@ -5,9 +5,11 @@ import cx from 'classnames'
 import { Media, Bd, Img } from '../deprecated/Media'
 import Icon from '../Icon'
 import Typography from '../Typography'
+import MidEllipsis from '../MidEllipsis'
+
 import styles from './styles.styl'
 
-const Filename = ({ icon, filename, extension, variant }) => {
+const Filename = ({ icon, filename, extension, midEllipsis, variant }) => {
   return (
     <Media>
       {icon && (
@@ -21,9 +23,12 @@ const Filename = ({ icon, filename, extension, variant }) => {
             <Typography
               variant={variant}
               component="span"
-              className={cx(styles['c-filename-name'], 'u-ellipsis')}
+              className={cx(styles['c-filename-name'], {
+                'u-ellipsis': !midEllipsis,
+                'u-ov-hidden': midEllipsis
+              })}
             >
-              {filename}
+              {midEllipsis ? <MidEllipsis text={filename} /> : filename}
             </Typography>
           )}
           {extension && (
@@ -52,11 +57,14 @@ Filename.propTypes = {
   filename: PropTypes.string,
   /** If a file name, you can specify the extension */
   extension: PropTypes.string,
+  /** To replace the end ellipsis by a middle on in the filename */
+  midEllipsis: PropTypes.bool,
   variant: PropTypes.string
 }
 
 Filename.defaultProps = {
-  variant: 'h6'
+  variant: 'h6',
+  midEllipsis: false
 }
 
 export default Filename

package/transpiled/react/Filename/index.js

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { Media, Bd, Img } from "cozy-ui/transpiled/react/deprecated/Media";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import Typography from "cozy-ui/transpiled/react/Typography";
+import MidEllipsis from "cozy-ui/transpiled/react/MidEllipsis";
 var styles = {
   "c-filename-wrapper": "styles__c-filename-wrapper___3tVpA",
   "c-filename-name": "styles__c-filename-name___1jDMz"
@@ -13,6 +14,7 @@ var Filename = function Filename(_ref) {
   var icon = _ref.icon,
       filename = _ref.filename,
       extension = _ref.extension,
+      midEllipsis = _ref.midEllipsis,
       variant = _ref.variant;
   return /*#__PURE__*/React.createElement(Media, null, icon && /*#__PURE__*/React.createElement(Img, null, /*#__PURE__*/React.createElement(Icon, {
     className: 'u-mr-1',
@@ -24,8 +26,13 @@ var Filename = function Filename(_ref) {
   }, filename && /*#__PURE__*/React.createElement(Typography, {
     variant: variant,
     component: "span",
-    className: cx(styles['c-filename-name'], 'u-ellipsis')
-  }, filename), extension && /*#__PURE__*/React.createElement(Typography, {
+    className: cx(styles['c-filename-name'], {
+      'u-ellipsis': !midEllipsis,
+      'u-ov-hidden': midEllipsis
+    })
+  }, midEllipsis ? /*#__PURE__*/React.createElement(MidEllipsis, {
+    text: filename
+  }) : filename), extension && /*#__PURE__*/React.createElement(Typography, {
     variant: variant,
     component: "span",
     color: "textSecondary"
@@ -41,9 +48,13 @@ Filename.propTypes = {
 
   /** If a file name, you can specify the extension */
   extension: PropTypes.string,
+
+  /** To replace the end ellipsis by a middle on in the filename */
+  midEllipsis: PropTypes.bool,
   variant: PropTypes.string
 };
 Filename.defaultProps = {
-  variant: 'h6'
+  variant: 'h6',
+  midEllipsis: false
 };
 export default Filename;