Merge pull request #1572 from cozy/app-tile

docs/styleguide.config.js

@@ -125,6 +125,7 @@ module.exports = {
       components: () => [
         '../react/Alerter/index.jsx',
         '../react/AppIcon/index.jsx',
+        '../react/AppTile/index.jsx',
         '../react/AppSections/index.jsx',
         '../react/CipherIcon/index.jsx',
         '../react/CozyTheme/index.jsx',

react/AppSections/locales/en.json

@@ -24,12 +24,6 @@
     "telecom": "Telecom",
     "transport": "Transportation"
   },
-  "app_item": {
-    "by": "By",
-    "installed": "Installed",
-    "maintenance": "In maintenance",
-    "update": "Update available"
-  },
   "sections": {
     "applications": "Applications",
     "konnectors": "Services"

react/AppSections/locales/fr.json

@@ -24,12 +24,6 @@
     "telecom": "Mobile",
     "transport": "Voyage et transport"
   },
-  "app_item": {
-    "by": "Par",
-    "installed": "Installée",
-    "maintenance": "En maintenance",
-    "update": "Mise à jour dispo."
-  },
   "sections": {
     "applications": "Applications",
     "konnectors": "Services"

react/AppTile/Readme.md

@@ -0,0 +1,16 @@
+Component used to show an app status, can be used in
+a list of apps for example in the Store.
+
+```
+import AppTile from '.'
+import mockApps from '../AppSections/_mockApps'
+import { I18n } from '../I18n'
+
+const locale = {}
+
+const app = mockApps[0];
+
+<I18n dictRequire={lang => locale} lang="en">
+  <AppTile app={app} />
+</I18n>
+```

react/AppTile/__snapshots__/AppTile.spec.jsx.snap

@@ -6,7 +6,7 @@ exports[`AppTile component should render correctly an app 1`] = `
   dictRequire={[Function]}
   lang="en"
 >
-  <AppTile
+  <withI18n(withLocales(AppTile))
     app={
       Object {
         "developer": Object {
@@ -31,7 +31,6 @@ exports[`AppTile component should render correctly an app 1`] = `
     name="Test"
     namePrefix="Cozy"
     onClick={[MockFunction]}
-    showDeveloper={true}
     slug="test"
     version="3.0.3"
   />
@@ -44,7 +43,7 @@ exports[`AppTile component should render correctly an app in maintenance 1`] = `
   dictRequire={[Function]}
   lang="en"
 >
-  <AppTile
+  <withI18n(withLocales(AppTile))
     app={
       Object {
         "developer": Object {
@@ -79,7 +78,6 @@ exports[`AppTile component should render correctly an app in maintenance 1`] = `
     }
     name="Test2"
     onClick={[MockFunction]}
-    showDeveloper={true}
     slug="test2"
     version="3.0.3-beta7483"
   />
@@ -92,7 +90,7 @@ exports[`AppTile component should render correctly an app with iconToLoad (icon
   dictRequire={[Function]}
   lang="en"
 >
-  <AppTile
+  <withI18n(withLocales(AppTile))
     app={
       Object {
         "developer": Object {
@@ -121,7 +119,6 @@ exports[`AppTile component should render correctly an app with iconToLoad (icon
     installedAppLink="test2.cozy.mock"
     name="Test2"
     onClick={[MockFunction]}
-    showDeveloper={true}
     slug="test2"
     version="3.0.3-beta7483"
   />
@@ -134,7 +131,7 @@ exports[`AppTile component should render correctly an app with iconToLoad if isM
   dictRequire={[Function]}
   lang="en"
 >
-  <AppTile
+  <withI18n(withLocales(AppTile))
     app={
       Object {
         "developer": Object {
@@ -164,7 +161,6 @@ exports[`AppTile component should render correctly an app with iconToLoad if isM
     isMobile={true}
     name="Test2"
     onClick={[MockFunction]}
-    showDeveloper={true}
     slug="test2"
     version="3.0.3-beta7483"
   />
@@ -177,7 +173,7 @@ exports[`AppTile component should render correctly an app without developer prop
   dictRequire={[Function]}
   lang="en"
 >
-  <AppTile
+  <withI18n(withLocales(AppTile))
     app={
       Object {
         "editor": "cozy",
@@ -194,7 +190,6 @@ exports[`AppTile component should render correctly an app without developer prop
     name="Test"
     namePrefix="Cozy"
     onClick={[MockFunction]}
-    showDeveloper={true}
     slug="test"
     version="3.0.3"
   />
@@ -207,7 +202,7 @@ exports[`AppTile component should render correctly an installed app 1`] = `
   dictRequire={[Function]}
   lang="en"
 >
-  <AppTile
+  <withI18n(withLocales(AppTile))
     app={
       Object {
         "developer": Object {
@@ -234,7 +229,6 @@ exports[`AppTile component should render correctly an installed app 1`] = `
     installedAppLink="test2.cozy.mock"
     name="Test2"
     onClick={[MockFunction]}
-    showDeveloper={true}
     slug="test2"
     version="3.0.3-beta7483"
   />
@@ -247,7 +241,7 @@ exports[`AppTile component should render correctly an installed app without icon
   dictRequire={[Function]}
   lang="en"
 >
-  <AppTile
+  <withI18n(withLocales(AppTile))
     app={
       Object {
         "developer": Object {
@@ -272,7 +266,6 @@ exports[`AppTile component should render correctly an installed app without icon
     name="Test"
     namePrefix="Cozy"
     onClick={[MockFunction]}
-    showDeveloper={true}
     slug="test"
     version="3.0.3"
   />

react/AppTile/index.jsx

@@ -11,10 +11,16 @@ import Tile, {
 } from '../Tile'
 
 import { useI18n } from '../I18n'
+import withLocales from '../I18n/withLocales'
+import { AppDoctype } from '../proptypes'
 
 import { getCurrentStatusLabel } from './helpers'
-import { AppDoctype } from '../proptypes'
 import styles from './styles.styl'
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+
+const locales = { en, fr }
+
 let dataset
 const getDataset = () => {
   if (dataset) return dataset
@@ -30,12 +36,13 @@ const getAppIconProps = () => ({
 
 export const AppTile = ({
   app,
-  name,
+  name: nameProp,
   namePrefix,
   onClick,
   showDeveloper,
   IconComponent
 }) => {
+  const name = nameProp || app.name
   const { t } = useI18n()
   const { developer = {} } = app
   const statusToDisplay = getCurrentStatusLabel(app)
@@ -74,4 +81,4 @@ AppTile.defaultProps = {
   showDeveloper: true
 }
 
-export default AppTile
+export default withLocales(locales)(AppTile)

react/AppTile/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "app_item": {
+    "by": "By",
+    "installed": "Installed",
+    "maintenance": "In maintenance",
+    "update": "Update available"
+  }
+}

react/AppTile/locales/fr.json

@@ -0,0 +1,8 @@
+{
+  "app_item": {
+    "by": "Par",
+    "installed": "Installée",
+    "maintenance": "En maintenance",
+    "update": "Mise à jour dispo."
+  }
+}

react/Tile/styles.styl

@@ -10,7 +10,8 @@ $tileMobileHeight = 3.75rem
   position relative
   display flex
   flex-direction column
-  flex $tileSize 0 0
+  flex 0 0 $tileSize
+  width $tileSize
   height $tileSize
   align-items center
   background var(--white)