added PopinFixed + removed test code

src/Component/PopinFixed/PopinFixed.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+import PopinFixedHeader from './PopinFixedHeader.jsx'
+import PopinFixedOption from './PopinFixedOption.jsx'
+import PopinFixedContent from './PopinFixedContent.jsx'
+
+require('../../css/PopinFixed.styl')
+
+const PopinFixed = props => {
+  return (
+    <div className={classnames('wsFileGeneric', props.customClass, {'visible': props.visible})}>
+      {props.children}
+    </div>
+  )
+}
+
+export default PopinFixed
+
+PopinFixed.propTypes = {
+  customClass: PropTypes.string,
+  visible: PropTypes.bool
+}
+
+PopinFixed.propTypes = {
+  // from http://www.mattzabriskie.com/blog/react-validating-children
+  children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) => {
+    if (
+      children.length > 3 ||
+      children[0].type !== PopinFixedHeader ||
+      children[1].type !== PopinFixedOption ||
+      children[2].type !== PopinFixedContent
+    ) {
+      return new Error(`PropType Error: childrens of ${componentName} must be: 1 PopinFixedHeader, 1 PopinFixedOption and 1 PopinFixedContent.`)
+    }
+  }).isRequired,
+  customClass: PropTypes.string,
+  visible: PropTypes.bool
+}
+
+PopinFixed.defaultProps = {
+  customClass: '',
+  visible: true
+}

src/Component/PopinFixed/PopinFixedContent.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+const PopinFixedContent = props => {
+  return props.children.length === 2
+    ? (
+      <div className={classnames('wsFileGeneric__content', `${props.customClass}__content`)}>
+        <div className={classnames('wsFileGeneric__content__left', `${props.customClass}__content__left`)}>
+          {props.children[0]}
+        </div>
+
+        <div className={classnames('wsFileGeneric__content__right', `${props.customClass}__content__right`)}>
+          {props.children[1]}
+        </div>
+      </div>
+    )
+    : (
+      <div className={classnames('wsFileGeneric__content', `${props.customClass}__content`)}>
+        { props.children }
+      </div>
+    )
+}
+
+export default PopinFixedContent
+
+PopinFixedContent.propTypes = {
+  customClass: PropTypes.string,
+  children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) =>
+    children.length !== 2 && new Error(`PropType Error: ${componentName} must have 2 children.`)
+  ).isRequired
+}

src/Component/PopinFixed/PopinFixedHeader.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+const PopinFixedHeader = props => {
+  return (
+    <div className={classnames('wsFileGeneric__header', `${props.customClass}__header`)}>
+      <div className={classnames('wsFileGeneric__header__icon', `${props.customClass}__header__icon`)}>
+        <i className={props.icon} />
+      </div>
+
+      <div className={classnames('wsFileGeneric__header__title mr-auto', `${props.customClass}__header__title`)}>
+        {props.name}
+      </div>
+
+      <div className={classnames('wsFileGeneric__header__edittitle', `${props.customClass}__header__changetitle`)}>
+        <i className='fa fa-pencil' />
+      </div>
+
+      <div
+        className={classnames('wsFileGeneric__header__close', `${props.customClass}__header__close`)}
+        onClick={props.onClickCloseBtn}
+      >
+        <i className='fa fa-times' />
+      </div>
+    </div>
+  )
+}
+
+export default PopinFixedHeader
+
+PopinFixedHeader.propTypes = {
+  icon: PropTypes.string.isRequired,
+  onClickCloseBtn: PropTypes.func.isRequired,
+  customClass: PropTypes.string,
+  name: PropTypes.string
+}
+
+PopinFixedHeader.defaultProps = {
+  customClass: '',
+  name: ''
+}

src/Component/PopinFixed/PopinFixedOption.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+// import classnames from 'classnames'
+// import PropTypes from 'prop-types'
+
+const PopinFixedOption = props => {
+  return (
+    <div className='wsFileGeneric__option'>
+      <div className='wsFileGeneric__option__menu'>
+
+        <div className='wsFileFile__option__menu__addversion btn mr-auto'>
+          Nouvelle version
+          <i className='fa fa-plus-circle' />
+        </div>
+
+        <div className='wsFileGeneric__option__menu__status dropdown'>
+          <button className='wsFileGeneric__option__menu__status__dropdownbtn check btn dropdown-toggle' type='button' id='dropdownMenu2' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+            Validé
+            <div className='wsFileGeneric__option__menu__status__dropdownbtn__icon'>
+              <i className='fa fa-check' />
+            </div>
+          </button>
+
+          <div className='wsFileGeneric__option__menu__status__submenu dropdown-menu' aria-labelledby='dropdownMenu2'>
+            <h6 className='dropdown-header'>Statut du fichier</h6>
+            <div className='dropdown-divider' />
+            <button className='wsFileGeneric__option__menu__status__submenu__item current  dropdown-item' type='button'>
+              En cours
+              <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+                <i className='fa fa-gears' />
+              </div>
+            </button>
+            <button className='wsFileGeneric__option__menu__status__submenu__item check dropdown-item' type='button'>
+              Validé
+              <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+                <i className='fa fa-check' />
+              </div>
+            </button>
+            <button className='wsFileGeneric__option__menu__status__submenu__item invalid dropdown-item' type='button'>
+              Invalidé
+              <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+                <i className='fa fa-times' />
+              </div>
+            </button>
+            <button className='wsFileGeneric__option__menu__status__submenu__item ban dropdown-item' type='button'>
+              Obsolète
+              <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+                <i className='fa fa-ban' />
+              </div>
+            </button>
+          </div>
+        </div>
+        <div className='wsFileGeneric__option__menu__action'>
+          <i className='fa fa-archive' />
+        </div>
+        <div className='wsFileGeneric__option__menu__action'>
+          <i className='fa fa-trash' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PopinFixedOption
+
+PopinFixedOption.propTypes = {
+
+}

src/css/PopinFixed.styl

@@ -0,0 +1,100 @@
+.wsFileGeneric
+  position fixed
+  top 85px
+  right 0
+  border 1px solid grey
+  height 100%
+  background-color lightGrey
+  box-shadow shadow-page
+  visibility hidden
+  z-index 1
+  &.visible
+    visibility visible
+  &__header
+    display flex
+    align-items center
+    padding 15px
+    height 64px
+    &__icon
+      margin-right 15px
+      font-size 22px
+      color white
+    &__title
+      margin-right 15px
+      color white
+      text-overflow ellipsis
+      overflow hidden
+      white-space nowrap
+    &__edittitle
+      margin 0 15px
+      color white
+      font-size 20px
+      cursor pointer
+      &:hover , &:focus
+        border 1px solid off-white
+        padding 0 10px
+        border-radius 5px
+    &__close
+      border 1px solid white
+      border-radius 5px
+      padding 2px 5px
+      cursor pointer
+      & > i
+        color white
+        font-size 20px
+  &__option
+    border-bottom 1px solid grey
+    padding 10px
+    height 58px
+    background-color off-white
+    & > i
+      vertical-align middle
+      margin-right 15px
+      font-size 25px
+      cursor pointer
+    &__menu
+      display flex
+      align-items center
+      &__status
+        margin-right 20px
+        .current
+          color blue
+        .check
+          color green
+        .invalid
+          color red
+        .ban
+          color grey
+        &__dropdownbtn
+          border 1px solid grey
+          width 150px
+          background-color transparent
+          cursor pointer
+          &::after
+            color fontColor
+          &:hover
+            background-color transparent
+          &__icon
+            display inline-block
+            margin 0 15px
+        &__submenu
+          &__item
+            display flex
+            justify-content space-between
+            margin 5px 0
+            cursor pointer
+            &:active
+              background-color transparent
+      &__action
+        margin 5px 10px 0 0
+        font-size 18px
+        cursor pointer
+        &:hover , &:focus
+          font-size 22px
+          color blue
+  &__content
+    display flex
+    &__left
+      width 55%
+    &__right
+      width 45%

src/index.js

@@ -1,26 +1,10 @@
 import React from 'react'
+import libPopinFixed from './Component/PopinFixed/PopinFixed.jsx'
+import libPopinFixedHeader from './Component/PopinFixed/PopinFixedHeader.jsx'
+import libPopinFixedOption from './Component/PopinFixed/PopinFixedOption.jsx'
+import libPopinFixedContent from './Component/PopinFixed/PopinFixedContent.jsx'
 
-export function bonjour () {
-  console.log('bonjour ?!')
-}
-
-export const Woot = props => (
-  <div>woot</div>
-)
-
-export class reactClass extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      id: 'ok'
-    }
-  }
-  render () {
-    return (
-      <div>
-        <Woot />
-        <span>{this.state.id}</span>
-      </div>
-    )
-  }
-}
+export const PopinFixed = libPopinFixed
+export const PopinFixedHeader = libPopinFixedHeader
+export const PopinFixedOption = libPopinFixedOption
+export const PopinFixedContent = libPopinFixedContent

webpack.config.js

@@ -13,12 +13,9 @@ module.exports = {
     umdNamedDefine: true
   },
   externals: {
-    react: {
-      commonjs: 'react',
-      commonjs2: 'react',
-      amd: 'react',
-      root: '_'
-    }
+    react: {commonjs: 'react', commonjs2: 'react', amd: 'react', root: '_'},
+    classnames: {commonjs: 'classnames', commonjs2: 'classnames', amd: 'classnames', root: '_'},
+    'prop-types': {commonjs: 'prop-types', commonjs2: 'prop-types', amd: 'prop-types', root: '_'}
   },
   devServer: {
     contentBase: path.join(__dirname, 'dist/'),