cozy-ui 68.4.0 → 68.6.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [68.6.0](https://github.com/cozy/cozy-ui/compare/v68.5.1...v68.6.0) (2022-06-23)
+
+
+### Features
+
+* **Icon:** Add hand icon ([c7c814f](https://github.com/cozy/cozy-ui/commit/c7c814f))
+
+## [68.5.1](https://github.com/cozy/cozy-ui/compare/v68.5.0...v68.5.1) (2022-06-17)
+
+
+### Bug Fixes
+
+* Reduce console spam by AppLinker ([27d9064](https://github.com/cozy/cozy-ui/commit/27d9064))
+
+# [68.5.0](https://github.com/cozy/cozy-ui/compare/v68.4.0...v68.5.0) (2022-06-08)
+
+
+### Features
+
+* **DropdownText:** Add possibility to ellipsis text and pass more props ([8971e52](https://github.com/cozy/cozy-ui/commit/8971e52))
+
 # [68.4.0](https://github.com/cozy/cozy-ui/compare/v68.3.1...v68.4.0) (2022-06-08)
 
 

package/assets/icons/ui/hand.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16">
+     <path d="M14.992 8V5a1.001 1.001 0 0 0-2 0v3h-1V2a1.001 1.001 0 0 0-2 0v5h-1V1a1.001 1.001 0 0 0-2 0v6h-1V2c0-.551-.45-1-1-1-.551 0-1 .449-1 1v6.5a.5.5 0 0 1-.88.325L1.1 6.125c-.222-.182-.64-.166-.897.091a.7.7 0 0 0-.075.898c.064.117 1.542 4.144 3.227 6.798A4.486 4.486 0 0 0 7.156 16h3.336c2.48 0 4.5-2.019 4.5-4.5V8Z"/>
+ </svg> 

package/package.json

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

package/react/AppLinker/index.jsx

@@ -87,25 +87,23 @@ export class AppLinker extends React.Component {
     const appInfo = NATIVE_APP_INFOS[slug]
 
     if (isFlagshipApp()) {
-      if (!context)
-        logger.warn(
-          'FlagshipApp detected but no context found. Is the app wrapped in <WebviewIntentProvider? />'
-        )
-
-      if (context) {
-        const imgPayload =
-          imgRef &&
-          JSON.stringify({
-            ...imgRef.getBoundingClientRect().toJSON()
-          })
-
-        return {
-          onClick: event => {
-            event.preventDefault()
-            context.call('openApp', href, app, imgPayload)
-          },
-          href: '#'
-        }
+      const imgPayload =
+        imgRef &&
+        JSON.stringify({
+          ...imgRef.getBoundingClientRect().toJSON()
+        })
+
+      return {
+        onClick: event => {
+          event.preventDefault()
+
+          context
+            ? context.call('openApp', href, app, imgPayload)
+            : logger.error(
+                `Failed to "openApp(${app})". WebviewService has the following falsy value "${context}" in AppLinker's context.`
+              )
+        },
+        href: '#'
       }
     }
 

package/react/DropdownText/Readme.md

@@ -43,6 +43,12 @@ const variants = [
       ))}
     </Grid>
   </Grid>
+  <DropdownText style={{ border: '1px solid var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}  color="error">
+    This is a long text without ellipsis
+  </DropdownText>
+  <DropdownText noWrap style={{ border: '1px solid var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}>
+    This is a long text with ellipsis
+  </DropdownText>
   <DropdownText spaceBetween style={{ border: '1px solid var(--borderMainColor)', width: '100%', marginBottom: '1rem' }}>
     Space between text and icon
   </DropdownText>

package/react/DropdownText/index.jsx

@@ -7,15 +7,20 @@ import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'
 
 const useStyles = makeStyles(theme => ({
-  endIcon: {
-    marginLeft: '5px'
-  },
-  typography: {
+  container: {
     display: 'flex',
-    alignItems: 'center',
     width: '100%',
+    alignItems: 'center',
     justifyContent: ({ spaceBetween }) =>
-      spaceBetween ? 'space-between' : 'left',
+      spaceBetween ? 'space-between' : 'left'
+  },
+  typography: {
+    color: ({ disabled }) =>
+      theme.palette.text[disabled ? 'disabled' : 'primary']
+  },
+  endIcon: {
+    display: 'flex',
+    marginLeft: '5px',
     color: ({ disabled }) =>
       theme.palette.text[disabled ? 'disabled' : 'primary']
   }
@@ -41,27 +46,39 @@ const DropdownText = forwardRef(
       spaceBetween = false,
       variant = 'body1',
       disabled = false,
+      noWrap = false,
+      color = 'primary',
       children,
+      innerTextProps,
+      innerIconContainerProps,
+      innerIconProps,
       ...props
     },
     ref
   ) => {
-    const styles = useStyles({ spaceBetween, disabled })
+    const styles = useStyles({ spaceBetween, disabled, color })
 
     return (
-      <Typography
-        ref={ref}
-        classes={{ root: styles.typography }}
-        variant={variant}
-        {...props}
-      >
-        {children}
-        <Icon
-          className={styles.endIcon}
-          icon={BottomIcon}
-          size={endIconSizeByVariant[variant]}
-        />
-      </Typography>
+      <div ref={ref} className={styles.container} {...props}>
+        <Typography
+          classes={{ root: styles.typography }}
+          variant={variant}
+          noWrap={noWrap}
+          {...innerTextProps}
+        >
+          {children}
+        </Typography>
+        <Typography
+          classes={{ root: styles.endIcon }}
+          {...innerIconContainerProps}
+        >
+          <Icon
+            icon={BottomIcon}
+            size={endIconSizeByVariant[variant]}
+            {...innerIconProps}
+          />
+        </Typography>
+      </div>
     )
   }
 )
@@ -73,6 +90,14 @@ DropdownText.propTypes = {
   variant: PropTypes.string,
   /** Whether the component is disabled */
   disabled: PropTypes.bool,
+  /** Whether using ellipsis on text */
+  noWrap: PropTypes.bool,
+  /** Props passed to the text */
+  innerTextProps: PropTypes.object,
+  /** Props passed to the icon container */
+  innerIconContainerProps: PropTypes.object,
+  /** Props passed to the icon */
+  innerIconProps: PropTypes.object,
   children: PropTypes.node
 }
 

package/react/Icon/Readme.md

@@ -128,6 +128,7 @@ import GraphCircle from 'cozy-ui/transpiled/react/Icons/GraphCircle'
 import Grid from 'cozy-ui/transpiled/react/Icons/Grid'
 import GroupList from 'cozy-ui/transpiled/react/Icons/GroupList'
 import Groups from 'cozy-ui/transpiled/react/Icons/Groups'
+import Hand from 'cozy-ui/transpiled/react/Icons/Hand'
 import Heart from 'cozy-ui/transpiled/react/Icons/Heart'
 import Help from 'cozy-ui/transpiled/react/Icons/Help'
 import History from 'cozy-ui/transpiled/react/Icons/History'
@@ -338,6 +339,7 @@ const icons = [
   Grid,
   GroupList,
   Groups,
+  Hand,
   Heart,
   Help,
   History,
@@ -473,7 +475,7 @@ const InfoModal = ({ icon }) => {
       <>
         <Typography variant='body1'>To import {iconName}, copy/paste the following line:</Typography>
         <pre>
-          import {iconName}Icon from 'cozy-ui/transpiled/react/icons/{iconName}'
+          import {iconName}Icon from 'cozy-ui/transpiled/react/Icons/{iconName}'
         </pre>
       </>
     }
@@ -700,7 +702,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock','logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online','openwith','palette','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock','logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online','openwith','palette','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icon/icons-sprite.js

@@ -341,7 +341,9 @@ module.exports = `<svg><defs>
     <path fill-rule="evenodd" d="M6 1h10v2H6V1zm0 6h10v2H6V7zm0 6h10v2H6v-2zM2 4L.195 1.854a.901.901 0 0 1 0-1.121c.261-.31.682-.31.943 0L2 1.758 2.862.733c.26-.31.682-.31.943 0 .26.31.26.81 0 1.12L2 4zm0 6L.195 7.854a.901.901 0 0 1 0-1.121c.261-.31.682-.31.943 0L2 7.758l.862-1.025c.26-.31.682-.31.943 0 .26.31.26.81 0 1.12L2 10zm0 6L.195 13.854a.901.901 0 0 1 0-1.121c.261-.31.682-.31.943 0L2 13.758l.862-1.025c.26-.31.682-.31.943 0 .26.31.26.81 0 1.12L2 16z"/>
 </symbol><symbol id="groups" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M2.944 3.473a1.473 1.473 0 1 1-2.946-.002 1.473 1.473 0 0 1 2.946.002zM5 4.722v-2.5h11v2.5H5zm0 4.64v-2.5h11v2.5H5zM5 14v-2.5h11V14H5z"/>
-</symbol><symbol id="heart" viewBox="0 0 16 16">
+</symbol><symbol id="hand" viewBox="0 0 15 16">
+     <path d="M14.992 8V5a1.001 1.001 0 0 0-2 0v3h-1V2a1.001 1.001 0 0 0-2 0v5h-1V1a1.001 1.001 0 0 0-2 0v6h-1V2c0-.551-.45-1-1-1-.551 0-1 .449-1 1v6.5a.5.5 0 0 1-.88.325L1.1 6.125c-.222-.182-.64-.166-.897.091a.7.7 0 0 0-.075.898c.064.117 1.542 4.144 3.227 6.798A4.486 4.486 0 0 0 7.156 16h3.336c2.48 0 4.5-2.019 4.5-4.5V8Z"/>
+ </symbol><symbol id="heart" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M1.467 8.096a4.023 4.023 0 0 1-.699-.738L.724 7.31l.007-.006a4 4 0 1 1 7.21-2.994 6.685 6.685 0 0 1 .118 0 4.001 4.001 0 1 1 7.21 2.995l.005.005-.036.038a4.023 4.023 0 0 1-.713.753L8 15 1.467 8.096z"/>
 </symbol><symbol id="help" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm1-7.198C10.122 8.355 11 7.21 11 6c0-1.552-1.448-3-3-3S5 4.448 5 6h2c0-.448.552-1 1-1 .448 0 1 .552 1 1 0 .448-.552 1-1 1a1 1 0 0 0-1 1v2h2V8.802zM7 11v2h2v-2H7z"/>

package/react/Icons/Hand.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/hand.svg` to regenerate;
+import React from 'react'
+
+function SvgHand(props) {
+  return (
+    <svg viewBox="0 0 15 16" {...props}>
+      <path d="M14.992 8V5a1.001 1.001 0 00-2 0v3h-1V2a1.001 1.001 0 00-2 0v5h-1V1a1.001 1.001 0 00-2 0v6h-1V2c0-.551-.45-1-1-1-.551 0-1 .449-1 1v6.5a.5.5 0 01-.88.325L1.1 6.125c-.222-.182-.64-.166-.897.091a.7.7 0 00-.075.898c.064.117 1.542 4.144 3.227 6.798A4.486 4.486 0 007.156 16h3.336c2.48 0 4.5-2.019 4.5-4.5V8z" />
+    </svg>
+  )
+}
+
+export default SvgHand