From 60fb652df38c018e289641aa8af156eeea0dd1c3 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Fri, 12 Apr 2019 19:09:27 +0200 Subject: [PATCH] =?UTF-8?q?Ajout=20de=20briques=20pour=20l'=C3=A9conomie?= =?UTF-8?q?=20collaborative?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/components/ui/Button/button.css | 30 ++-- source/components/ui/Checkbox/index.css | 62 ++++++++ source/components/ui/Checkbox/index.js | 21 +++ source/components/ui/Checklist/index.css | 63 -------- source/components/ui/Checklist/index.js | 18 +-- source/sites/mycompanyinfrance.fr/App.js | 2 - .../mycompanyinfrance.fr/pages/Landing.js | 10 +- .../ActivitésSelection.js | 81 ++++++++++ .../ÉconomieCollaborative/CoConsommation.js | 44 ++++++ .../pages/ÉconomieCollaborative/Home.js | 41 ++++++ .../ÉconomieCollaborative/LocationMeublée.js | 41 ++++++ .../ÉconomieCollaborative/activités.yaml | 10 +- .../ÉconomieCollaborative/images/car.svg | 1 + .../images/multitasking.svg | 1 + .../images/pizzaSharing.svg | 1 + .../pages/ÉconomieCollaborative/index.js | 139 ++++-------------- .../sites/mycompanyinfrance.fr/sitePaths.js | 13 +- 17 files changed, 366 insertions(+), 212 deletions(-) create mode 100644 source/components/ui/Checkbox/index.css create mode 100644 source/components/ui/Checkbox/index.js create mode 100644 source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/ActivitésSelection.js create mode 100644 source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/CoConsommation.js create mode 100644 source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/Home.js create mode 100644 source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/LocationMeublée.js create mode 100644 source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/images/car.svg create mode 100644 source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/images/multitasking.svg create mode 100644 source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/images/pizzaSharing.svg diff --git a/source/components/ui/Button/button.css b/source/components/ui/Button/button.css index 6bf309906..afc88f387 100644 --- a/source/components/ui/Button/button.css +++ b/source/components/ui/Button/button.css @@ -1,5 +1,5 @@ -.ui__.inverted-button:not(:disabled):active, -.ui__.button:not(:disabled):active { +.ui__.inverted-button:not(:disabled):not(.disabled):active, +.ui__.button:not(:disabled):not(.disabled):active { animation: push-button-down 0.1s ease-out alternate-reverse 2; } @@ -23,7 +23,9 @@ } .ui__.button:disabled, -.ui__.inverted-button:disabled { +.ui__.button.disabled, +.ui__.inverted-button:disabled, +.ui__.inverted-button.disabled { opacity: 0.5; cursor: not-allowed; } @@ -64,7 +66,7 @@ ); color: white; } -.ui__.button:not(:disabled):not(.simple):hover, +.ui__.button:not(:disabled):not(.disabled):not(.simple):hover, .ui__.button.selected { background-position-x: 0%; border-color: white; @@ -93,8 +95,8 @@ color: white; border-color: white; } -.ui__.inverted-button:not(:disabled):hover, -.ui__.inverted-button:not(:disabled).selected { +.ui__.inverted-button:not(:disabled):not(.disabled):hover, +.ui__.inverted-button:not(:disabled):not(.disabled).selected { background-color: rgba(255, 255, 255, 1); color: rgb(41, 117, 209); color: var(--colour); @@ -142,12 +144,12 @@ padding: 0.15em 0em; } -.ui__.link-button:not(:disabled):hover, -.ui__.text-button:not(:disabled):hover, -.ui__.dashed-button:not(:disabled):hover, -.ui__.link-button:not(:disabled).selected, -.ui__.text-button:not(:disabled).selected, -.ui__.dashed-button:not(:disabled).selected { +.ui__.link-button:not(:disabled):not(.disabled):hover, +.ui__.text-button:not(:disabled):not(.disabled):hover, +.ui__.dashed-button:not(:disabled):not(.disabled):hover, +.ui__.link-button:not(:disabled):not(.disabled).selected, +.ui__.text-button:not(:disabled):not(.disabled).selected, +.ui__.dashed-button:not(:disabled):not(.disabled).selected { opacity: 0.8; } @@ -162,11 +164,11 @@ will-change: transform; } -.ui__.skip.button:not(:disabled):hover { +.ui__.skip.button:not(:disabled):not(.disabled):hover { opacity: 0.8; transform: translateX(3px); } -.ui__.skip.button.left:not(:disabled):hover { +.ui__.skip.button.left:not(:disabled):not(.disabled):hover { transform: translateX(-3px); } diff --git a/source/components/ui/Checkbox/index.css b/source/components/ui/Checkbox/index.css new file mode 100644 index 000000000..833c5f40a --- /dev/null +++ b/source/components/ui/Checkbox/index.css @@ -0,0 +1,62 @@ +.ui__.checkbox { + cursor: pointer; + position: relative; + margin: auto; + width: 18px; + line-height: 18px; + height: 18px; + -webkit-tap-highlight-color: transparent; + transform: translate3d(0, 0, 0); + outline: none !important; +} +.ui__.checkbox:before { + content: ''; + position: absolute; + top: -11px; + left: -11px; + width: 40px; + height: 40px; + border-radius: 50%; + background: rgba(34, 50, 84, 0.03); + opacity: 0; + transition: opacity 0.2s ease; +} +.ui__.checkbox svg { + position: relative; + z-index: 1; + fill: none; + stroke-linecap: round; + stroke-linejoin: round; + stroke: #c8ccd4; + stroke: var(--colour); + stroke-width: 1.5; + transform: translate3d(0, 0, 0); + transition: all 0.2s ease; +} +.ui__.checkbox svg path { + stroke-dasharray: 60; + stroke-dashoffset: 0; +} +.ui__.checkbox svg polyline { + stroke-dasharray: 22; + stroke-dashoffset: 66; +} +.ui__.checkbox:hover:before, +.ui__.checkbox:focus:before { + opacity: 1; +} +.ui__.checkbox:hover svg { + stroke: var(--colour); +} +.ui__.checkbox-input:checked + .ui__.checkbox svg { + stroke: var(--colour); +} +.ui__.checkbox-input:checked + .ui__.checkbox svg path { + stroke-dashoffset: 60; + transition: all 0.3s linear; +} +.ui__.checkbox-input:checked + .ui__.checkbox svg polyline { + stroke-dashoffset: 42; + transition: all 0.2s linear; + transition-delay: 0.15s; +} diff --git a/source/components/ui/Checkbox/index.js b/source/components/ui/Checkbox/index.js new file mode 100644 index 000000000..25372ed27 --- /dev/null +++ b/source/components/ui/Checkbox/index.js @@ -0,0 +1,21 @@ +import React from 'react' +import './index.css' + +export default function Checkbox(props) { + return ( + <> + + + + ) +} diff --git a/source/components/ui/Checklist/index.css b/source/components/ui/Checklist/index.css index 453a5a38c..d2f2bc88c 100644 --- a/source/components/ui/Checklist/index.css +++ b/source/components/ui/Checklist/index.css @@ -1,66 +1,3 @@ -.ui__.checkbox { - cursor: pointer; - position: relative; - margin: auto; - width: 18px; - line-height: 18px; - height: 18px; - -webkit-tap-highlight-color: transparent; - transform: translate3d(0, 0, 0); - outline: none !important; -} -.ui__.checkbox:before { - content: ''; - position: absolute; - top: -11px; - left: -11px; - width: 40px; - height: 40px; - border-radius: 50%; - background: rgba(34, 50, 84, 0.03); - opacity: 0; - transition: opacity 0.2s ease; -} -.ui__.checkbox svg { - position: relative; - z-index: 1; - fill: none; - stroke-linecap: round; - stroke-linejoin: round; - stroke: #c8ccd4; - stroke: var(--colour); - stroke-width: 1.5; - transform: translate3d(0, 0, 0); - transition: all 0.2s ease; -} -.ui__.checkbox svg path { - stroke-dasharray: 60; - stroke-dashoffset: 0; -} -.ui__.checkbox svg polyline { - stroke-dasharray: 22; - stroke-dashoffset: 66; -} -.ui__.checkbox:hover:before, -.ui__.checkbox:focus:before { - opacity: 1; -} -.ui__.checkbox:hover svg { - stroke: var(--colour); -} -.ui__.checkbox-input:checked + .ui__.checkbox svg { - stroke: var(--colour); -} -.ui__.checkbox-input:checked + .ui__.checkbox svg path { - stroke-dashoffset: 60; - transition: all 0.3s linear; -} -.ui__.checkbox-input:checked + .ui__.checkbox svg polyline { - stroke-dashoffset: 42; - transition: all 0.2s linear; - transition-delay: 0.15s; -} - ul.ui__.checklist { padding-left: 0.3rem; } diff --git a/source/components/ui/Checklist/index.js b/source/components/ui/Checklist/index.js index 810011eda..62bd52374 100644 --- a/source/components/ui/Checklist/index.js +++ b/source/components/ui/Checklist/index.js @@ -4,6 +4,7 @@ import { ScrollToElement } from 'Components/utils/Scroll' import withTracker from 'Components/utils/withTracker' import React, { Component } from 'react' import Animate from 'Ui/animate' +import Checkbox from '../Checkbox' import './index.css' import type { Tracker } from 'Components/utils/withTracker' import type { ChildrenArray, Node, Element } from 'react' @@ -51,24 +52,13 @@ class CheckItemComponent extends Component {
{/* TODO ACCESSIBILITY: impossible to tick the checkbox with keyboard ? */} - - + + +

+ + ) +}) diff --git a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/Home.js b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/Home.js new file mode 100644 index 000000000..bbd62ac14 --- /dev/null +++ b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/Home.js @@ -0,0 +1,41 @@ +import { emoji, React } from 'Components' +import withSitePaths from 'Components/utils/withSitePaths' +import { Link } from 'react-router-dom' +import Animate from 'Ui/animate' +import illustration from './images/multitasking.svg' + +export default withSitePaths(function Home({ sitePaths }) { + return ( + +

Déclarer les revenus des plateformes en ligne

+ +

+ Vous avez des revenus issus des plateformes en ligne{' '} + (Airbnb, Abritel, Drivy, Blablacar, Leboncoin, etc.), la loi vous oblige + à les déclarer. Mais il peut être parfois difficile de s'y retrouver + dans toute la documentation légale {emoji('🤔')} +

+

+ C'est pourquoi nous avons conçu ce guide. En quelques clics, vous saurez + tout ce qu'il faut faire dans votre situation pour être en règle : ce + que vous devez déclarer, où, et comment le faire. +

+
+ + Commencer le guide + +
+

+ PS : cet outils est à but purement informatif, et non coercitif. Nous ne + stockons absolument aucune donnée utilisateur, tout ce que vous + saisissez reste sur votre navigateur. Vous pouvez donc répondre aux + questions suivantes l'esprit léger, en toute transparence {emoji('😌')} +

+ + ) +}) diff --git a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/LocationMeublée.js b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/LocationMeublée.js new file mode 100644 index 000000000..58dd4de19 --- /dev/null +++ b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/LocationMeublée.js @@ -0,0 +1,41 @@ +import withSitePaths from 'Components/utils/withSitePaths' +import React from 'react' +import emoji from 'react-easy-emoji' +import { Link } from 'react-router-dom' + +export default withSitePaths(function LocationMeublée({ sitePaths }) { + return ( + <> +

{emoji('🏡')} Location meublée

+

+ Vous avez loué un logement meublé pour de courtes durées à une clientèle + de passage qui n'y élit pas domicile (hors location de chambres d’hôtes + et de meublé de tourisme) +

+

Vos recettes annuelles sont :

+
    +
  • + + Inférieures à 23 000€ + +
    • +
  • + + Situées entre 23 000€ et 70 000€ + +
    • +
  • + + Supérieures à 70 000€ + +
    • +
+ + ) +}) diff --git a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/activités.yaml b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/activités.yaml index 71326fdf2..013eea7a7 100644 --- a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/activités.yaml +++ b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/activités.yaml @@ -1,15 +1,15 @@ - titre: Location meublée - icônes: 🏠🛋️ + icônes: 🏠 🛋 ️ exemples: Airbnb, Abritel, chambre d'hôte... - titre: Location de biens - icônes: 🔑🚗 🔧🌱 + icônes: 🔑 🚗 🔧 🌱 exemples: Drivy, outils de jardinage, bricolage... - titre: Services - icônes: 🚴🚕👩‍💻🍼 + icônes: 🚴 🚕 👩‍💻 🍼 exemples: Deliveroo, Uber, sites internet, nounous... - titre: Vente de biens - icônes: 📦🧶 + icônes: 📦 🧶 exemples: Leboncoin, eBay, Etsy... - titre: Co-consommation - icônes: 👥🚗 + icônes: 👥 🚗 exemples: Blablacar, ... diff --git a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/images/car.svg b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/images/car.svg new file mode 100644 index 000000000..84c74538b --- /dev/null +++ b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/images/car.svg @@ -0,0 +1 @@ +fast car \ No newline at end of file diff --git a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/images/multitasking.svg b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/images/multitasking.svg new file mode 100644 index 000000000..e44c75437 --- /dev/null +++ b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/images/multitasking.svg @@ -0,0 +1 @@ +multitasking \ No newline at end of file diff --git a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/images/pizzaSharing.svg b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/images/pizzaSharing.svg new file mode 100644 index 000000000..3b8546e99 --- /dev/null +++ b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/images/pizzaSharing.svg @@ -0,0 +1 @@ +pizza sharing \ No newline at end of file diff --git a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/index.js b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/index.js index 8d9dfe94e..b80560906 100644 --- a/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/index.js +++ b/source/sites/mycompanyinfrance.fr/pages/ÉconomieCollaborative/index.js @@ -1,110 +1,33 @@ -import { React, emoji } from 'Components' -import { useState } from 'react' -import activités from './activités.yaml' -import { without } from 'ramda' -import classNames from 'classnames' - -export default () => { - let [itemsSelected, selectItem] = useState([]) +import withSitePaths from 'Components/utils/withSitePaths' +import React from 'react' +import { Route } from 'react-router' +import ActivitésSelection from './ActivitésSelection' +import CoConsommation from './CoConsommation' +import Home from './Home' +import LocationMeublée from './LocationMeublée' +export default withSitePaths(function ÉconomieCollaborative({ sitePaths }) { return ( -
-

- J'ai des revenus issus des plateformes en ligne : - Airbnb, Abritel, Drivy, Blablacar, Leboncoin, ... -

-
- - {emoji('🤔')} - -

- Comment être en règle ?
- Quelles cotisations et impôt ? -

-
-
-

{emoji('✔️')} Sélectionnez vos revenus :

-
    * { - width: 100%; - } - li { - margin: 1em; - cursor: pointer; - text-align: center - width: 12em; - - .title { - font-weight: 500; - } - img { - width: 2em !important; - height: 2em !important; - margin: 0.6em 0 !important; - } - p { - font-size: 95%; - font-style: italic; - text-align: center; - line-height: 1em; - } - } - - li:hover, li.selected {background: var(--colour); color: white} - `}> - {activités.map(({ titre, exemples, icônes }) => { - let selected = itemsSelected.includes(titre) - return ( -
  • - selectItem( - selected - ? without([titre], itemsSelected) - : [...itemsSelected, titre] - ) - }> -
    {titre}
    - {emoji(icônes)} -

    {exemples}

    - {selected && ( -
    - e.stopPropagation()} - css={` - width: 8em; - font-size: 100%; - border: none; - border-radius: 0.3em; - padding: 0.3em; - `} - placeholder="votre revenu" - /> -  € -
    - )} -
    • - ) - })} -
-
-
+ <> + + + + + ) -} +}) diff --git a/source/sites/mycompanyinfrance.fr/sitePaths.js b/source/sites/mycompanyinfrance.fr/sitePaths.js index 609c87ea9..893f3e97d 100644 --- a/source/sites/mycompanyinfrance.fr/sitePaths.js +++ b/source/sites/mycompanyinfrance.fr/sitePaths.js @@ -107,7 +107,18 @@ export const constructLocalizedSitePath = (language: string) => { index: t('path.démarcheEmbauche.index', '/démarches-embauche') }, économieCollaborative: { - index: t('path.économieCollaborative.index', '/économie-collaborative') + index: t('path.économieCollaborative.index', '/économie-collaborative'), + activités: { + index: t('path.économieCollaborative.activitésSelection', '/activités'), + locationMeublée: t( + 'path.économieCollaborative.locationMeublée', + '/location-meublée' + ), + coConsommation: t( + 'path.économieCollaborative.coConsommation', + '/co-consommation' + ) + } }, documentation: { index: t('path.documentation.index', '/documentation')