feat: Create BulleType molecule to handle Bulle types dynamically

dis-moi · Feb 1, 2019 · 6900678 · 6900678
1 parent 9bca78c
commit 6900678
Show file tree

Hide file tree

Showing 19 changed files with 222 additions and 57 deletions.
diff --git a/src/app/sandbox/Sandbox.js b/src/app/sandbox/Sandbox.js
@@ -8,6 +8,8 @@ import { Notification, Bulle } from '../../components/organisms';
 const message = 'De nombreux clients mécontents de Pixmania et ses vendeurs s’expriment sur les '
     + 'réseaux sociaux depuis 2016. Les plaintes continuent en 2017 et 2018 si l’on se réfère au forum Que Choisir.';
 
+const type = 'warningFav';
+
 const Sandbox = () => (
   <ThemeProvider theme={theme}>
     <Fragment>
@@ -16,15 +18,14 @@ const Sandbox = () => (
         title="2 messages pour cette page"
       >
         <Bulle
-          type="Plop"
           message={message}
           contributor="Le Même en Mieux"
           source="http://forum.que-choisir.org/pixmania-avis-1285"
           approves={21}
           dislikes={3}
         />
         <Bulle
-          type="Plop"
+          type="Fav"
           message={message}
           contributor="Le Même en Mieux"
           source="http://forum.que-choisir.org/pixmania-avis-1285"
@@ -34,20 +35,19 @@ const Sandbox = () => (
       </Notification>
 
       <h2>Liste avec une Bulle supprimée</h2>
-
       <Notification
         title="2 messages pour cette page"
       >
         <Bulle
-          type="Plop"
+          type="Alternative"
           message={message}
           contributor="Le Même en Mieux"
           source="http://forum.que-choisir.org/pixmania-avis-1285"
           approves={21}
           dislikes={3}
         />
         <Bulle
-          type="Plop"
+          type="Rant"
           message={message}
           contributor="Le Même en Mieux"
           source="http://forum.que-choisir.org/pixmania-avis-1285"
@@ -58,13 +58,12 @@ const Sandbox = () => (
       </Notification>
 
       <h2>Détails d'une Bulle</h2>
-
       <Notification
         title="Le Même en Mieux, il y a 8 mois"
         details
       >
         <Bulle
-          type="Plop"
+          type="NeedHelp"
           message={message}
           contributor="Le Même en Mieux"
           source="http://forum.que-choisir.org/pixmania-avis-1285"

diff --git a/src/app/theme.js b/src/app/theme.js
@@ -2,37 +2,41 @@ export default {
   // fonts colors
   mainText: '#25265e',
   otherText: '#787993',
-
-  // icons colors
-  warningFav: {
-    color: '#FB6C6A',
-    background: '#FEF0F0',
-  },
-  approval: {
-    color: '#2DC76D',
-    background: '#EAF9F0',
-  },
-  alternative: {
-    color: '#488FC1',
-    background: '#F0F5FA',
-  },
-  needHelp: {
-    color: '#F5A623',
-    background: '#FDF9C6',
-  },
-  rant: {
-    color: '#9013FE',
-    background: '#F3E7FE',
-  },
-  sadness: {
-    color: '#D16464',
-    background: '#FAEFEF',
-  },
-  surprise: {
-    color: '#3C6AE2',
-    background: '#EBF0FC',
+  // bulle type colors
+  bulleTypes: {
+    Warning: {
+      color: '#FB6C6A',
+      background: '#FEF0F0',
+    },
+    Fav: {
+      color: '#FB6C6A',
+      background: '#FEF0F0',
+    },
+    Alternative: {
+      color: '#488FC1',
+      background: '#F0F5FA',
+    },
+    Approval: {
+      color: '#2DC76D',
+      background: '#EAF9F0',
+    },
+    NeedHelp: {
+      color: '#F5A623',
+      background: '#FDF9C6',
+    },
+    Rant: {
+      color: '#9013FE',
+      background: '#F3E7FE',
+    },
+    Sadness: {
+      color: '#D16464',
+      background: '#FAEFEF',
+    },
+    Surprise: {
+      color: '#3C6AE2',
+      background: '#EBF0FC',
+    },
   },
-
   // iframe
   iframe: {
     style: {

diff --git a/src/components/atoms/BulleType.js b/src/components/atoms/BulleType.js
diff --git a/src/components/atoms/BulleTypeBackground.js b/src/components/atoms/BulleTypeBackground.js
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const BulleTypeBackground = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+
+    background-color: ${props => props.color}
+`;
+
+BulleTypeBackground.propTypes = {
+  color: PropTypes.string,
+};
+
+BulleTypeBackground.defaultProps = {
+  color: '#F1F1F4'
+};
+
+export default BulleTypeBackground;
diff --git a/src/components/atoms/icons/index.js b/src/components/atoms/icons/index.js
@@ -1,3 +1,4 @@
 export { default as Arrow } from './Arrow';
+export { default as Bubble } from './Bubble';
 export { default as Close } from './Close';
-export { default as Delete } from './Delete';
+export { default as Delete } from './Delete';
diff --git a/src/components/atoms/icons/types/Alternative.js b/src/components/atoms/icons/types/Alternative.js
@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export default ({ color }) => (
+  <svg width="20" height="24">
+    <path
+      fill={color}
+      fillRule="nonzero"
+      d="M16.536 7.555C15.348 7.303 11.93 6.651 11 6.467V2.955C11 1.326 9.654 0 8 0S5 1.326 5 2.955v7.457c-.554-.336-1.188-.621-1.838-.715C1.34 9.435 0 10.637 0 12.195c0 .805.363 1.613 1.022 2.271C4.994 18.438 6.71 19.591 7.081 24H17v-1.748c0-5.154 3-6.031 3-10.029 0-2.448-1.061-4.157-3.464-4.668zm.357 8.022c-.821 1.483-1.838 3.319-1.891 6.423h-6.13c-.726-3.82-3.81-6.318-6.436-8.949-.688-.686-.393-1.37.442-1.373 1.263-.006 3.06 1.884 4.122 3.205V2.955C7 2.438 7.458 2 8 2s1 .438 1 .955v6.948a.572.572 0 0 0 1.142 0v-.575a.85.85 0 0 1 1.7 0v1.273a.571.571 0 0 0 1.142 0v-.83a.845.845 0 0 1 1.69 0v1.533a.571.571 0 0 0 1.142 0v-.912a.715.715 0 0 1 1.018-.646c.645.305 1.166.932 1.166 2.477 0 1.355-.465 2.193-1.107 3.354z" />
+  </svg>
+);
diff --git a/src/components/atoms/icons/types/Approval.js b/src/components/atoms/icons/types/Approval.js
@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export default ({ color }) => (
+  <svg width="24" height="24">
+    <path 
+      fill={color}
+      fillRule="nonzero" 
+      d="M21.406 9.558c-1.21-.051-2.87-.278-3.977-.744C18.238 5.531 18.682 0 15.233 0c-1.861 0-2.351 1.668-2.833 3.329-1.548 5.336-3.946 6.816-6.4 7.401V10H0v12h6v-.904c2.378.228 4.119.864 6.169 1.746 1.257.541 3.053 1.158 5.336 1.158 2.538 0 4.295-.997 5.009-3.686.5-1.877 1.486-7.25 1.486-8.25 0-1.648-1.168-2.446-2.594-2.506zM4 20H2v-8h2v8zm15.896-5.583s.201.01 1.069-.027c1.082-.046 1.051 1.469.004 1.563l-1.761.099c-.734.094-.656 1.203.141 1.172 0 0 .686-.017 1.143-.041 1.068-.056 1.016 1.429.04 1.551-.424.053-1.745.115-1.745.115-.811.072-.706 1.235.109 1.141l.771-.031c.822-.074 1.003.825-.292 1.661-1.567.881-4.685.131-6.416-.614C10.72 20.041 8.521 19.072 6 19v-6c3.264-.749 6.328-2.254 8.321-9.113C15.219.795 16 1.956 16 4.461c0 2.071-.49 3.786-.921 5.533 1.061.543 3.371 1.402 6.12 1.556 1.055.059 1.024 1.455-.051 1.584l-1.394.167s-.608 1.111.142 1.116z" />
+  </svg>
+);
diff --git a/src/components/atoms/icons/types/ApprovalFace.js b/src/components/atoms/icons/types/ApprovalFace.js
@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export default ({ color }) => (
+  <svg width="24" height="24">
+    <path
+      fill={color}
+      fillRule="nonzero"
+      d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0-2C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm6 14H6c.331 1.465 2.827 4 6.001 4 3.134 0 5.666-2.521 5.999-4zm0-3.998l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948L13 10.002C13.281 9.254 14.205 8 15.499 8c1.295 0 2.218 1.254 2.501 2.002zm-7 0l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948L6 10.002C6.281 9.254 7.205 8 8.499 8 9.794 8 10.717 9.254 11 10.002z" />
+  </svg>
+);
diff --git a/src/components/atoms/icons/types/Fav.js b/src/components/atoms/icons/types/Fav.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default () => (
+  <svg width="24" height="22">
+    <path
+      fill="#FF6464"
+      fillRule="nonzero"
+      d="M12 8.229C12.234 7.109 13.547 2 17.382 
+      2 19.602 2 22 3.551 22 7.003c0 3.907-3.627 
+      8.47-10 12.629C5.627 15.473 2 10.91 2 7.003c0-3.484 
+      2.369-5.005 4.577-5.005 3.923 0 5.145 5.126 5.423 6.231zM0 
+      7.003C0 11.071 3.06 16.484 12 22c8.94-5.516 12-10.929 12-14.997 
+      0-7.962-9.648-9.028-12-3.737C9.662-1.996 0-1.004 0 7.003z" />
+  </svg>
+);
diff --git a/src/components/atoms/icons/types/NeedHelp.js b/src/components/atoms/icons/types/NeedHelp.js
@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export default ({ color }) => (
+  <svg width="24" height="24">
+    <g
+      fill={color}
+      fillRule="evenodd">
+      <path
+        stroke="#F5A623"
+        d="M12 1C5.662 1 0 5.15 0 10.825c0 2.013.739 3.99 2.047 5.523L.054 22.6 7 19.655a19.85 19.85 0 0 0 4.864.629c7.174 0 12.136-4.358 12.136-9.459C24 5.12 18.299 1 12 1zm0 .982c6.065 0 11 3.967 11 8.843 0 4.833-4.787 8.477-11.136 8.477-1.881 0-3.401-.293-4.946-.682L1.66 20.85l1.505-4.721C1.857 14.593 1 13.058 1 10.825 1 5.95 5.935 1.982 12 1.982z" />
+      <path
+        d="M11.554 12.77v-.827c0-.22.013-.409.04-.564.026-.155.073-.295.141-.42a1.7 1.7 0 0 1 .268-.361c.11-.116.245-.253.402-.414l1.214-1.172c.263-.25.395-.576.395-.976 0-.391-.134-.71-.403-.955-.268-.245-.606-.368-1.016-.368-.442 0-.804.143-1.088.428a1.68 1.68 0 0 0-.489 1.045L9 8.036c.063-.481.194-.91.394-1.285.2-.376.46-.694.78-.955.321-.26.692-.458 1.112-.593.42-.135.883-.203 1.387-.203.473 0 .912.065 1.317.195.405.13.757.318 1.056.564.3.245.534.55.702.917.168.365.252.783.252 1.254 0 .33-.047.621-.142.872-.094.25-.22.48-.378.691-.158.21-.34.41-.544.601-.205.19-.423.391-.654.601-.148.13-.274.246-.379.346-.105.1-.192.203-.26.308a1.125 1.125 0 0 0-.15.36 2.18 2.18 0 0 0-.047.49v.57h-1.892zm-.315 2.088c0-.32.123-.596.37-.827a1.26 1.26 0 0 1 .891-.345c.336 0 .63.11.883.33.252.22.378.491.378.812 0 .32-.123.596-.37.826A1.26 1.26 0 0 1 12.5 16c-.168 0-.328-.03-.48-.09a1.383 1.383 0 0 1-.403-.24c-.115-.1-.207-.221-.276-.361a1.016 1.016 0 0 1-.102-.451z" />
+    </g>
+  </svg>
+);
diff --git a/src/components/atoms/icons/types/Rant.js b/src/components/atoms/icons/types/Rant.js
@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export default ({ color }) => (
+  <svg width="24" height="24">
+    <path
+      fill={color}
+      fillRule="nonzero"
+      d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0-2C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zM8.5 9a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm7 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-.941 8.94a12.333 12.333 0 0 0-2.562-.282c-.819 0-1.658.092-2.562.282-1.11.233-1.944-.24-2.255-1.015-.854-2.131 1.426-3.967 4.816-3.967 3.537 0 5.666 1.853 4.817 3.968-.308.769-1.136 1.249-2.254 1.014zm-2.563-1.966c1.614 0 3.056.67 3.206.279.803-2.079-7.202-2.165-6.411 0 .138.377 1.614-.279 3.205-.279zm3.881-9.85L12 10 8.123 6.124 9.247 5 12 7.753 14.754 5l1.123 1.124z" />
+  </svg>
+);
diff --git a/src/components/atoms/icons/types/Sadness.js b/src/components/atoms/icons/types/Sadness.js
@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export default ({ color }) => (
+  <svg width="24" height="24">
+    <path
+      fill={color}
+      fillRule="nonzero"
+      d="M18.414 10.727c.17 1.304-1.623 2.46-2.236 3.932-.986 2.479 2.405 3.747 3.512 1.4.931-1.974-.454-4.225-1.276-5.332zm.108 3.412c-.407.428-.954.063-.571-.408.227-.28.472-.646.667-1.037.128.338.236 1.097-.096 1.445zM18 10.002l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948L13 10.002C13.281 9.254 14.205 8 15.499 8c1.295 0 2.218 1.254 2.501 2.002zm-7 0l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948L6 10.002C6.281 9.254 7.205 8 8.499 8 9.794 8 10.717 9.254 11 10.002zM12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10zm3.582-4.057a2.397 2.397 0 0 1-1.023-.003 12.333 12.333 0 0 0-2.562-.282c-.819 0-1.658.092-2.562.282-1.11.233-1.944-.24-2.255-1.015-.854-2.131 1.426-3.967 4.816-3.967 1.207 0 2.245.22 3.062.588-.291.522-.44.912-.515 1.588-1.797-.874-6.359-.542-5.752 1.118.138.377 1.614-.279 3.205-.279 1.061 0 2.039.285 2.633.373.162.634.415 1.116.953 1.597z" />
+  </svg>
+);
diff --git a/src/components/atoms/icons/types/Surprise.js b/src/components/atoms/icons/types/Surprise.js
@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export default ({ color }) => (
+  <svg width="24" height="24">
+    <path 
+      fill={color}
+      fillRule="nonzero" 
+      d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0-2C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zM8.5 8a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm7 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-3.499 4C10.343 12 9 13.567 9 15.501 9 17.433 10.343 19 12.001 19 13.657 19 15 17.433 15 15.501 15 13.567 13.657 12 12.001 12z" />
+  </svg>
+);
diff --git a/src/components/atoms/icons/types/Warning.js b/src/components/atoms/icons/types/Warning.js
@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Warning = ({ color }) => (
+  <svg width="24" height="24">
+    <path
+      fill={color}
+      fillRule="nonzero"
+      d="M21.406 14.442c-1.21.051-2.87.278-3.977.744.809 3.283 1.253 8.814-2.196 8.814-1.861 0-2.351-1.668-2.833-3.329-1.548-5.336-3.946-6.816-6.4-7.401V14H0V2h6v.904c2.378-.228 4.119-.864 6.169-1.746C13.426.617 15.222 0 17.505 0c2.538 0 4.295.997 5.009 3.686.5 1.877 1.486 7.25 1.486 8.25 0 1.648-1.168 2.446-2.594 2.506zM4 4H2v8h2V4zm15.896 5.583s.201-.01 1.069.027c1.082.046 1.051-1.469.004-1.563l-1.761-.099c-.734-.094-.656-1.203.141-1.172 0 0 .686.017 1.143.041 1.068.056 1.016-1.429.04-1.551-.424-.053-1.745-.115-1.745-.115-.811-.072-.706-1.235.109-1.141l.771.031c.822.074 1.003-.825-.292-1.661-1.567-.881-4.685-.131-6.416.614C10.72 3.959 8.521 4.928 6 5v6c3.264.749 6.328 2.254 8.321 9.113.898 3.092 1.679 1.931 1.679-.574 0-2.071-.49-3.786-.921-5.533 1.061-.543 3.371-1.402 6.12-1.556 1.055-.059 1.024-1.455-.051-1.584l-1.394-.167s-.608-1.111.142-1.116z" />
+  </svg>
+);
+
+Warning.propTypes = {
+  color: PropTypes.string.isRequired,
+};
+
+export default Warning;
diff --git a/src/components/atoms/icons/types/index.js b/src/components/atoms/icons/types/index.js
@@ -0,0 +1,9 @@
+export { default as Alternative } from './Alternative';
+export { default as Approval } from './Approval';
+export { default as ApprovalFace } from './ApprovalFace';
+export { default as NeedHelp } from './NeedHelp';
+export { default as Rant } from './Rant';
+export { default as Sadness } from './Sadness';
+export { default as Surprise } from './Surprise';
+export { default as Warning } from './Warning';
+export { default as Fav } from './Fav';
diff --git a/src/components/atoms/index.js b/src/components/atoms/index.js
@@ -3,7 +3,7 @@ export { default as BackButton } from './BackButton';
 export { default as BulleContainer } from './BulleContainer';
 export { default as BulleContent } from './BulleContent';
 export { default as BulleDeleted } from './BulleDeleted';
-export { default as BulleType } from './BulleType';
+export { default as BulleTypeBackground } from './BulleTypeBackground';
 export { default as Button } from './Button';
 export { default as CloseButton } from './CloseButton';
 export { default as Contributor } from './Contributor';

diff --git a/src/components/molecules/BulleType.js b/src/components/molecules/BulleType.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTheme } from 'styled-components';
+import { BulleTypeBackground } from '../atoms';
+import * as bulleTypeIcons from '../atoms/icons/types';
+
+const BulleType = ({ type, theme }) => {
+  const BulleTypeIcon = bulleTypeIcons[type];
+  const style = theme.bulleTypes[type];
+
+  return (
+    <BulleTypeBackground color={style && style.background}>
+      {BulleTypeIcon && <BulleTypeIcon color={style && style.color} />}
+    </BulleTypeBackground>
+  );
+};
+
+BulleType.propTypes = {
+  type: PropTypes.string,
+  theme: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+BulleType.defaultProps = {
+  type: null,
+};
+
+export default withTheme(BulleType);
diff --git a/src/components/molecules/index.js b/src/components/molecules/index.js
@@ -0,0 +1,3 @@
+export { default as AddBulle } from './AddBulle';
+export { default as BulleTitle } from './BulleTitle';
+export { default as BulleType } from './BulleType';
diff --git a/src/components/organisms/Bulle.js b/src/components/organisms/Bulle.js
@@ -10,10 +10,9 @@ import {
   Dislikes,
   Message,
   SourceURL,
-  BulleType,
   Feedbacks
 } from '../atoms';
-import BulleTitle from '../molecules/BulleTitle';
+import { BulleTitle, BulleType } from '../molecules';
 
 export default class Bulle extends PureComponent {
     static propTypes = {
@@ -41,7 +40,6 @@ export default class Bulle extends PureComponent {
       const {
         type, details, message, contributor, source, approves, dislikes, onDelete, deleted
       } = this.props;
-
       return (
         <BulleContainer>
           {deleted ? (
@@ -50,7 +48,7 @@ export default class Bulle extends PureComponent {
             </Fragment>
           ) : (
             <Fragment>
-              {type && <BulleType>{type}</BulleType>}
+              <BulleType type={type} />
               <BulleContent deleted={deleted}>
                 {details ? (
                   <Fragment>