From 0b8150ef407a5d058b49203d0ca803fe4d679cfb Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Tue, 22 Sep 2020 19:47:49 +0200 Subject: [PATCH 1/4] feat: Export AppTile embedded in withLocales Fix #1569 --- react/AppSections/locales/en.json | 6 ------ react/AppSections/locales/fr.json | 6 ------ .../__snapshots__/AppTile.spec.jsx.snap | 21 +++++++------------ react/AppTile/index.jsx | 10 +++++++-- react/AppTile/locales/en.json | 8 +++++++ react/AppTile/locales/fr.json | 8 +++++++ 6 files changed, 31 insertions(+), 28 deletions(-) create mode 100644 react/AppTile/locales/en.json create mode 100644 react/AppTile/locales/fr.json diff --git a/react/AppSections/locales/en.json b/react/AppSections/locales/en.json index 9f1904a2dc..7061200349 100644 --- a/react/AppSections/locales/en.json +++ b/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" diff --git a/react/AppSections/locales/fr.json b/react/AppSections/locales/fr.json index 6f7b023ae5..94dfba8cb9 100644 --- a/react/AppSections/locales/fr.json +++ b/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" diff --git a/react/AppTile/__snapshots__/AppTile.spec.jsx.snap b/react/AppTile/__snapshots__/AppTile.spec.jsx.snap index 5101825e3c..fc38f602e0 100644 --- a/react/AppTile/__snapshots__/AppTile.spec.jsx.snap +++ b/react/AppTile/__snapshots__/AppTile.spec.jsx.snap @@ -6,7 +6,7 @@ exports[`AppTile component should render correctly an app 1`] = ` dictRequire={[Function]} lang="en" > - @@ -44,7 +43,7 @@ exports[`AppTile component should render correctly an app in maintenance 1`] = ` dictRequire={[Function]} lang="en" > - @@ -92,7 +90,7 @@ exports[`AppTile component should render correctly an app with iconToLoad (icon dictRequire={[Function]} lang="en" > - @@ -134,7 +131,7 @@ exports[`AppTile component should render correctly an app with iconToLoad if isM dictRequire={[Function]} lang="en" > - @@ -177,7 +173,7 @@ exports[`AppTile component should render correctly an app without developer prop dictRequire={[Function]} lang="en" > - @@ -207,7 +202,7 @@ exports[`AppTile component should render correctly an installed app 1`] = ` dictRequire={[Function]} lang="en" > - @@ -247,7 +241,7 @@ exports[`AppTile component should render correctly an installed app without icon dictRequire={[Function]} lang="en" > - diff --git a/react/AppTile/index.jsx b/react/AppTile/index.jsx index fdc2341705..84b80af7c1 100644 --- a/react/AppTile/index.jsx +++ b/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 @@ -74,4 +80,4 @@ AppTile.defaultProps = { showDeveloper: true } -export default AppTile +export default withLocales(locales)(AppTile) diff --git a/react/AppTile/locales/en.json b/react/AppTile/locales/en.json new file mode 100644 index 0000000000..f42122281c --- /dev/null +++ b/react/AppTile/locales/en.json @@ -0,0 +1,8 @@ +{ + "app_item": { + "by": "By", + "installed": "Installed", + "maintenance": "In maintenance", + "update": "Update available" + } +} diff --git a/react/AppTile/locales/fr.json b/react/AppTile/locales/fr.json new file mode 100644 index 0000000000..223598be09 --- /dev/null +++ b/react/AppTile/locales/fr.json @@ -0,0 +1,8 @@ +{ + "app_item": { + "by": "Par", + "installed": "Installée", + "maintenance": "En maintenance", + "update": "Mise à jour dispo." + } +} From 023537bda9c0158d21e345fa441bae1d9711a13a Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Tue, 22 Sep 2020 19:48:18 +0200 Subject: [PATCH 2/4] fix: Tile can be shown in a non flex container --- react/Tile/styles.styl | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/Tile/styles.styl b/react/Tile/styles.styl index 66a8e2e8b5..9d37f49b5d 100644 --- a/react/Tile/styles.styl +++ b/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) From 72202b94d56567b983712665c33801fd0e8822f1 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Tue, 22 Sep 2020 19:49:00 +0200 Subject: [PATCH 3/4] feat: By default the name of the app shown in AppTile is from the app --- react/AppTile/index.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/AppTile/index.jsx b/react/AppTile/index.jsx index 84b80af7c1..26cf4922e2 100644 --- a/react/AppTile/index.jsx +++ b/react/AppTile/index.jsx @@ -36,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) From 1cae26963348c4769ec82ea123c955d15c092f59 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Tue, 22 Sep 2020 19:49:13 +0200 Subject: [PATCH 4/4] feat: Add styleguide example for AppTile --- docs/styleguide.config.js | 1 + react/AppTile/Readme.md | 16 ++++++++++++++++ 2 files changed, 17 insertions(+) create mode 100644 react/AppTile/Readme.md diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js index d2106c3649..84bbbd6ca1 100644 --- a/docs/styleguide.config.js +++ b/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', diff --git a/react/AppTile/Readme.md b/react/AppTile/Readme.md new file mode 100644 index 0000000000..539d23dc48 --- /dev/null +++ b/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]; + + locale} lang="en"> + + +```