cozy-ui 57.5.3 → 57.7.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# [57.7.0](https://github.com/cozy/cozy-ui/compare/v57.6.0...v57.7.0) (2021-11-12)
+
+
+### Bug Fixes
+
+* Add viewBox to LogoutLarge icon ([6196caa](https://github.com/cozy/cozy-ui/commit/6196caa))
+
+
+### Features
+
+* Add IconComponent prop to SquareAppIcon ([22591ff](https://github.com/cozy/cozy-ui/commit/22591ff))
+* Add type prop to SquareAppIcon ([d9799c7](https://github.com/cozy/cozy-ui/commit/d9799c7))
+* Do not use backdrop-filter on SquareAppIcon anymore ([451d54f](https://github.com/cozy/cozy-ui/commit/451d54f))
+
+# [57.6.0](https://github.com/cozy/cozy-ui/compare/v57.5.5...v57.6.0) (2021-11-08)
+
+
+### Features
+
+* Add `autoCapitalize` prop in Fields ([54efb34](https://github.com/cozy/cozy-ui/commit/54efb34))
+
+## [57.5.5](https://github.com/cozy/cozy-ui/compare/v57.5.4...v57.5.5) (2021-11-08)
+
+
+### Bug Fixes
+
+* Do not stretch small screenshots ([4c7f48f](https://github.com/cozy/cozy-ui/commit/4c7f48f))
+* Revert "Merge pull request [#1956](https://github.com/cozy/cozy-ui/issues/1956) from cozy/test/waitFor" ([#1962](https://github.com/cozy/cozy-ui/issues/1962)) ([374bda4](https://github.com/cozy/cozy-ui/commit/374bda4))
+
+## [57.5.4](https://github.com/cozy/cozy-ui/compare/v57.5.3...v57.5.4) (2021-11-04)
+
+
+### Bug Fixes
+
+* AppTile doesn't require name prop ([3a74932](https://github.com/cozy/cozy-ui/commit/3a74932))
+
 ## [57.5.3](https://github.com/cozy/cozy-ui/compare/v57.5.2...v57.5.3) (2021-11-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "57.5.3",
+  "version": "57.7.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -94,7 +94,7 @@
     "cozy-sharing": "^3.10.0",
     "css-loader": "0.28.11",
     "cssnano": "4.1.11",
-    "cssnano-preset-advanced": "4.0.7",
+    "cssnano-preset-advanced": "4.0.8",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",

package/react/AppTile/Readme.md

@@ -1,21 +1,24 @@
 Component used to show an app status, can be used in
 a list of apps for example in the Store.
 
-```
+```jsx
 import AppTile from '.'
 import mockApps from '../AppSections/_mockApps'
 import { I18n } from '../I18n'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
 
 const locale = {}
+const app = mockApps[0]
 
-const app = mockApps[0];
+;
 
 <I18n dictRequire={lang => locale} lang="en">
-  <div className='u-flex'>
+  <Grid container>
     <AppTile app={app} />
     <AppTile app={{...app, maintenance: true}} />
+    <AppTile app={{...app, maintenance: true}} displaySpecificMaintenanceStyle={true} />
     <AppTile app={{...app, availableVersion: true}} />
     <AppTile app={{...app, availableVersion: true}} showStatus={['maintenance']} />
-  </div>
+  </Grid>
 </I18n>
 ```

package/react/AppTile/index.jsx

@@ -106,7 +106,7 @@ export const AppTile = ({
 
 AppTile.propTypes = {
   app: AppDoctype,
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
   namePrefix: PropTypes.string,
   onClick: PropTypes.func,
   IconComponent: PropTypes.element,

package/react/Field/Readme.md

@@ -6,7 +6,7 @@ Like `Input` component, it can have the following properties:
 
 ##### Example
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 <form>
   <Field
@@ -21,7 +21,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
 
 ##### Inline variant
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 <form>
   <Field
@@ -39,7 +39,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
 
 An input is controlled if `props.value` is passed, even if it is empty.
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 
 initialState = { value: '' }
@@ -58,7 +58,7 @@ It gives access to the underlying `<input />` element, for example to give focus
 
 ##### Example
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 import Button from 'cozy-ui/transpiled/react/Button';
 class FieldWithFocus extends React.Component {
@@ -91,7 +91,7 @@ Name of the form field, injected into `Input`, `TextArea` or `SelectBox` compone
 
 ##### Exemple
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 <form>
   <Field
@@ -103,7 +103,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
 
 #### Field when there's an error
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 <form>
   <Field
@@ -118,7 +118,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
 
 #### Field with SelectBox
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 const options = [
 {
@@ -168,7 +168,7 @@ initialState = { selectedContact: null };
 
 #### Password field with show/hide button
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 <form>
   <Field
@@ -185,7 +185,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
 
 #### Password field without show/hide button
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 <form>
   <Field
@@ -198,7 +198,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
 
 #### Side element
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 <form>
   <Field
@@ -210,7 +210,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
 
 #### Side element with fullwidth element
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 <form>
   <Field
@@ -223,7 +223,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
 
 #### Customized label and input
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 <form>
   <Field
@@ -240,7 +240,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
 
 #### Password with custom secondaryComponent
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 import MuiButton from 'cozy-ui/transpiled/react/MuiCozyTheme/Buttons';
 
@@ -271,7 +271,7 @@ import MuiButton from 'cozy-ui/transpiled/react/MuiCozyTheme/Buttons';
 
 #### Controlled Field
 
-```
+```jsx
 import Field from 'cozy-ui/transpiled/react/Field';
 <form>
   <Field
@@ -282,3 +282,29 @@ import Field from 'cozy-ui/transpiled/react/Field';
   Value: { state.value }
 </form>
 ```
+
+#### Mobile specific props
+
+On mobile devices, following props may be useful to control on-screen keyboard's behavior
+
+Note that `autoCapitalize` property is not handled by all mobile browsers and it also depends on the on-screen keyboard installed by the user and its configuration (i.e. [Android SwiftKey configuration](https://support.swiftkey.com/hc/en-us/articles/201468481-How-do-I-turn-off-Auto-Capitalize-))
+
+```jsx
+import Field from 'cozy-ui/transpiled/react/Field';
+import Variants from 'cozy-ui/docs/components/Variants';
+
+const initialVariants = [
+  { autoCapitalize: false, autoComplete: false }
+];
+
+<Variants initialVariants={initialVariants}>{
+  variant => (
+    <form>
+      <Field
+        autoCapitalize={variant.autoCapitalize ? 'on' : 'none'}
+        autoComplete={variant.autoComplete ? 'on' : 'off'}
+      />
+    </form>
+  )
+}</Variants>
+```

package/react/Field/index.jsx

@@ -16,6 +16,7 @@ import ContactPicker from '../ContactPicker'
  * for example
  */
 const inputSpecificPropTypes = {
+  autoCapitalize: PropTypes.string,
   autoComplete: PropTypes.string,
   onKeyUp: PropTypes.func
 }
@@ -102,6 +103,7 @@ const FieldContainer = props => {
 
 const Field = props => {
   const {
+    autoCapitalize,
     autoComplete,
     className,
     disabled,
@@ -146,6 +148,7 @@ const Field = props => {
       case 'textarea':
         return (
           <Textarea
+            autoCapitalize={autoCapitalize}
             disabled={disabled}
             id={id}
             name={name}
@@ -161,6 +164,7 @@ const Field = props => {
       case 'password':
         return (
           <InputPassword
+            autoCapitalize={autoCapitalize}
             autoComplete={autoComplete}
             disabled={disabled}
             fullwidth={fullwidth}
@@ -198,6 +202,7 @@ const Field = props => {
       case 'number':
         return (
           <Input
+            autoCapitalize={autoCapitalize}
             autoComplete={autoComplete}
             disabled={disabled}
             fullwidth={fullwidth}

package/react/Icons/LogoutLarge.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 function SvgLogoutLarge(props) {
   return (
-    <svg {...props}>
+    <svg viewBox="0 0 44 44" {...props}>
       <g fill="none" fillRule="evenodd">
         <rect
           width={27.5}

package/react/SquareAppIcon/Readme.md

@@ -4,6 +4,8 @@ application.
 ```jsx
 import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
 import SquareAppIcon from 'cozy-ui/transpiled/react/SquareAppIcon'
+import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import { useCozyTheme } from 'cozy-ui/transpiled/react/CozyTheme'
 import cloudWallpaper from '../../docs/cloud-wallpaper.jpg'
 
@@ -32,5 +34,26 @@ const theme = useCozyTheme()
   <Grid item>
     <SquareAppIcon name="Shortcut" variant="shortcut" />
   </Grid>
+  <Grid item>
+    <SquareAppIcon name="Custom Icon" IconContent={<Icon icon={CozyIcon} size="48" />} />
+  </Grid>
+  <Grid item>
+    <SquareAppIcon name="Icon Grid" IconContent={(
+      <Grid container spacing={0}>
+        <Grid item xs={6}>
+          <Icon icon={CozyIcon} />
+        </Grid>
+        <Grid item xs={6}>
+          <Icon icon={CozyIcon} />
+        </Grid>
+          <Grid item xs={6}>
+            <Icon icon={CozyIcon} />
+          </Grid>
+          <Grid item xs={6}>
+            <Icon icon={CozyIcon} />
+          </Grid>
+        </Grid>
+    )} />
+  </Grid>
 </Grid>
 ```

package/react/SquareAppIcon/SquareAppIcon.spec.js

@@ -4,6 +4,8 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import CozyClient, { CozyProvider } from 'cozy-client'
 import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
 
 import SquareAppIcon from './index'
 
@@ -66,4 +68,11 @@ describe('SquareAppIcon component', () => {
     const root = render(<Wrapper variant="shortcut" name="shortcut" />)
     expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
   })
+
+  it('should render correctly an app with custom content', () => {
+    const root = render(
+      <Wrapper name="custom icon" IconContent={<Icon icon={CozyIcon} />} />
+    )
+    expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
+  })
 })

package/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap

@@ -355,3 +355,46 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
   </h6>
 </div>
 `;
+
+exports[`SquareAppIcon component should render correctly an app with custom content 1`] = `
+<div
+  class="makeStyles-tileWrapper-53"
+  data-testid="square-app-icon"
+>
+  <span
+    class="MuiBadge-root"
+  >
+    <span
+      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-51"
+    >
+      <div
+        class="styles__SquareAppIcon-icon-container___39MRl"
+      >
+        <svg
+          class="styles__icon___23x3R"
+          height="16"
+          viewBox="0 0 52 52"
+          width="16"
+        >
+          <path
+            d="M38.231 44H13.769C6.175 44 0 37.756 0 30.08c0-3.66 1.394-7.117 3.927-9.733 2.219-2.29 5.093-3.715 8.203-4.086a13.887 13.887 0 014.042-8.292A13.608 13.608 0 0125.801 4c3.62 0 7.04 1.407 9.629 3.968a13.897 13.897 0 014.038 8.25C46.482 16.853 52 22.828 52 30.082 52 37.756 45.82 44 38.23 44h.001zm-.163-3.001h.104c5.97 0 10.828-4.91 10.828-10.947 0-6.035-4.857-10.946-10.828-10.946h-.11c-.779 0-1.417-.627-1.435-1.417C36.492 11.794 31.637 7 25.803 7c-5.835 0-10.692 4.796-10.826 10.69a1.445 1.445 0 01-1.403 1.42C7.744 19.244 3 24.153 3 30.052 3 36.09 7.857 41 13.828 41h.088l.035-.002c.03 0 .062 0 .093.002h24.021l.003-.001zm-4.302-11.776c-.875-.585-.918-1.659-.92-1.706A.52.52 0 0032.32 27a.523.523 0 00-.506.536c.002.039.016.543.251 1.137a7.99 7.99 0 01-11.138.019 3.554 3.554 0 00.257-1.155.523.523 0 00-.503-.536.526.526 0 00-.528.515c0 .043-.042 1.121-.92 1.706a.536.536 0 00-.15.731.51.51 0 00.714.154c.225-.15.414-.322.572-.505a9.006 9.006 0 0012.251-.01c.16.184.35.36.582.515a.503.503 0 00.281.085.516.516 0 00.432-.24.537.537 0 00-.15-.731v.002z"
+            fill="#297EF2"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <span
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
+      />
+    </span>
+    <span
+      class="MuiBadge-badge Component-qualifier-54 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+    />
+  </span>
+  <h6
+    class="MuiTypography-root makeStyles-name-49 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
+  >
+    custom icon
+  </h6>
+</div>
+`;

package/react/SquareAppIcon/index.jsx

@@ -61,7 +61,7 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-export const SquareAppIcon = ({ app, name, variant }) => {
+export const SquareAppIcon = ({ app, type, name, variant, IconContent }) => {
   const classes = useStyles()
   const appName = name || (app && app.name) || app || ''
   const letter = appName[0] || ''
@@ -116,8 +116,10 @@ export const SquareAppIcon = ({ app, name, variant }) => {
             <div className={styles['SquareAppIcon-icon-container']}>
               {variant === 'add' ? (
                 <Icon icon={iconPlus} color={color} />
+              ) : IconContent ? (
+                IconContent
               ) : (
-                <AppIcon app={app} />
+                <AppIcon app={app} type={type} />
               )}
             </div>
           )}
@@ -137,7 +139,15 @@ export const SquareAppIcon = ({ app, name, variant }) => {
 SquareAppIcon.propTypes = {
   app: PropTypes.oneOfType([AppDoctype, PropTypes.string]),
   name: PropTypes.string,
-  variant: PropTypes.oneOf(['ghost', 'maintenance', 'error', 'add', 'shortcut'])
+  variant: PropTypes.oneOf([
+    'ghost',
+    'maintenance',
+    'error',
+    'add',
+    'shortcut'
+  ]),
+  IconContent: PropTypes.node,
+  type: PropTypes.oneOf(['app', 'konnector'])
 }
 
 export default SquareAppIcon

package/react/SquareAppIcon/styles.styl

@@ -32,14 +32,11 @@ $color = constants['color'] // hard-coded color, because the component is curren
 .SquareAppIcon-wrapper-fx
     background-color alpha($color, .32)
     border 1px dashed var(--white)
-    @supports not (backdrop-filter: blur(48px))
-        background-color alpha($color, .48)
-    .SquareAppIcon-icon-container
-        backdrop-filter blur(48px)
+    background-color alpha($color, .48)
 
 .SquareAppIcon-wrapper-ghost
     .SquareAppIcon-icon-container
-        mix-blend-mode screen // need to apply backdrop-filter and mix blend-mode in a separated element to have the proper effect
+        mix-blend-mode screen
         svg, img
             filter saturate(0%)