added component CardPopup and CardPopupCreateContent

src/component/CardPopup/CardPopup.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+require('./CardPopup.styl')
+
+const CardPopup = props => {
+  return (
+    <div className={classnames(props.customClass, 'cardPopup')}>
+      <div className='cardPopup__container'>
+        <div className='cardPopup__header' />
+
+        <div className='cardPopup__close' onClick={props.onClose}>
+          <i className='fa fa-times' />
+        </div>
+
+        <div className='cardPopup__body'>
+          { props.children }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CardPopup
+
+CardPopup.propTypes = {
+  customClass: PropTypes.string,
+  onClose: PropTypes.func
+}
+
+CardPopup.defaultProps = {
+  customClass: 'defaultCustomClass',
+  onClose: () => {}
+}

src/component/CardPopup/CardPopup.styl

@@ -0,0 +1,39 @@
+@import '../../css/Variable.styl'
+
+.cardPopup
+  position fixed
+  display flex
+  justify-content center
+  width 100%
+  z-index 10
+  &__container
+    margin-top 50px
+    border 0
+    border-radius 10px
+    width 800px
+    background lightGrey
+    box-shadow shadow-all
+  &__header
+    border-top-right-radius 10px
+    border-top-left-radius 10px
+    width 100%
+    height 8px
+  &__close
+    display flex
+    justify-content flex-end
+    padding 5px 15px 5px 5px
+    cursor pointer
+  &__body
+    display flex
+    align-items center
+    padding 10px 15px 15px 15px
+    &__icon
+      padding 0 30px
+      font-size 40px
+    &__text
+      &__title
+        font-size 20px
+        font-weight 600
+      &__message
+        padding-right 20px
+        font-weight 500

src/component/CardPopup/CardPopupCreateContent.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import CardPopup from './CardPopup.jsx'
+
+require('./CardPopupCreateContent.styl')
+
+const PopupCreateContent = props => {
+  return (
+    <CardPopup customClass='popupCreateContent' onClose={props.onClose}>
+      <div className='createcontent'>
+        <div className='createcontent__contentname mb-4'>
+          <div className='createcontent__contentname__icon ml-1 mr-3'>
+            <i className={`fa ${props.icon}`} style={{color: props.color}} />
+          </div>
+
+          <div className='createcontent__contentname__title' style={{color: props.color}}>
+            {props.title}
+          </div>
+        </div>
+
+        <form className='createcontent__form'>
+          <input
+            type='text'
+            className='createcontent__form__input'
+            value={props.contentName}
+            onChange={props.onChangeContentName}
+          />
+
+          <div className='createcontent__form__button'>
+            <button
+              className='createcontent__form__button btn btn-primary'
+              type='submit'
+              onClick={props.onValidate}
+            >
+              {props.btnValidateLabel}
+            </button>
+          </div>
+        </form>
+      </div>
+    </CardPopup>
+  )
+}
+
+PopupCreateContent.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  onValidate: PropTypes.func.isRequired,
+  contentName: PropTypes.string.isRequired,
+  onChangeContentName: PropTypes.func.isRequired,
+  title: PropTypes.string,
+  color: PropTypes.string,
+  btnValidateLabel: PropTypes.string
+}
+
+PopupCreateContent.defaultProps = {
+  title: '',
+  color: '#333',
+  inputPlaceHolder: '',
+  btnValidateLabel: ''
+}
+
+
+export default PopupCreateContent

src/component/CardPopup/CardPopupCreateContent.styl

@@ -0,0 +1,46 @@
+@import '../../css/Variable.styl'
+
+.popupCreateContent
+  position fixed
+  top 0
+  left 0
+  display flex
+  justify-content center
+  width 100%
+  z-index 5
+  .cardPopup__container
+    margin-top 120px
+    border 0
+    border-radius 10px
+    width 400px
+    background lightGrey
+    box-shadow shadow-all
+  &__header
+    border-top-right-radius 10px
+    border-top-left-radius 10px
+    width 100%
+    height 8px
+    background-color fileColor
+  .createcontent
+    width 100%
+    &__close
+      cursor pointer
+    &__contentname
+      display flex
+      align-items baseline
+      &__icon
+        font-size 30px
+      &__title
+        font-size 20px
+        color htmlColor
+    &__form
+      &__input
+        width 100%
+        border 1px solid grey
+        border-radius 5px
+        margin-bottom 25px
+        padding 5px
+      &__button
+        display flex
+        justify-content flex-end
+        cursor pointer

src/component/PopinFixed/PopinFixed.jsx

@@ -9,7 +9,7 @@ require('./PopinFixed.styl')
 
 const PopinFixed = props => {
   return (
-    <div className={classnames('wsContentGeneric', props.customClass, {'visible': props.visible})}>
+    <div className={classnames('wsContentGeneric', props.customClass, {'visible': props.visible})} style={props.style}>
       {props.children}
     </div>
   )

src/index.dev.js

@@ -14,35 +14,49 @@ import TimelineDebugData from './component/Timeline/debugData.js'
 
 import Delimiter from './component/Delimiter/Delimiter.jsx'
 
-ReactDOM.render(
-  <PopinFixed customClass={`${'randomClass'}`}>
-    <PopinFixedHeader
-      customClass={`${'randomClass'}`}
-      icon={'fa fa-file-word-o'}
-      name={'test exemple'}
-      onClickCloseBtn={() => {}}
-    />
+import CardPopup from './component/CardPopup/CardPopup.jsx'
+import CardPopupCreateContent from './component/CardPopup/CardPopupCreateContent.jsx'
 
-    <PopinFixedOption customClass={`${'randomClass'}`} />
-
-    <PopinFixedContent customClass={`${'randomClass'}__contentpage`}>
-      <div>
-        <Delimiter />
-        <span>Here will be the app content. Style is handled by the app (obviously)</span>
-        <BtnSwitch />
-        <TextAreaApp customClass={'randomClass'} />
-      </div>
-
-      <Timeline
-        customClass={`${'randomClass'}__contentpage`}
-        loggedUser={{
-          id: 1,
-          name: 'smoi',
-          avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
-        }}
-        timelineData={TimelineDebugData}
+ReactDOM.render(
+  <div>
+    <PopinFixed customClass={`${'randomClass'}`} style={{display: 'none'}}>
+      <PopinFixedHeader
+        customClass={`${'randomClass'}`}
+        icon={'fa fa-file-word-o'}
+        name={'test exemple'}
+        onClickCloseBtn={() => {}}
       />
-    </PopinFixedContent>
-  </PopinFixed>
+
+      <PopinFixedOption customClass={`${'randomClass'}`} />
+
+      <PopinFixedContent customClass={`${'randomClass'}__contentpage`}>
+        <div>
+          <Delimiter />
+          <span>Here will be the app content. Style is handled by the app (obviously)</span>
+          <BtnSwitch />
+          <TextAreaApp customClass={'randomClass'} />
+        </div>
+
+        <Timeline
+          customClass={`${'randomClass'}__contentpage`}
+          loggedUser={{
+            id: 1,
+            name: 'smoi',
+            avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
+          }}
+          timelineData={TimelineDebugData}
+        />
+      </PopinFixedContent>
+    </PopinFixed>
+
+    <CardPopupCreateContent
+      onClose={() => {}}
+      icon='fa-file-word-o'
+      color='#3f52e3'
+      title='Exemple of popup create content'
+      inputPlaceHolder='Exemple placeholder'
+      btnValidateLabel='Valider et créer'
+    />
+  </div>
   , document.getElementById('content')
 )

src/index.js

@@ -14,6 +14,9 @@ import libBtnSwitch from './component/Input/BtnSwitch/BtnSwitch.jsx'
 
 import libDelimiter from './component/Delimiter/Delimiter.jsx'
 
+import libCardPopup from './component/CardPopup/CardPopup.jsx'
+import libCardPopupCreateContent from './component/CardPopup/CardPopupCreateContent.jsx'
+
 export const langFr = fr
 export const langEn = en
 
@@ -30,3 +33,6 @@ export const TextAreaApp = libTextAreaApp
 export const BtnSwitch = libBtnSwitch
 
 export const Delimiter = libDelimiter
+
+export const CardPopup = libCardPopup
+export const CardPopupCreateContent = libCardPopupCreateContent