Merge pull request #1222 from eessex/more-text

@kanaabe => Text component / Paragraph updates
artsy · Aug 18, 2017 · f7232d2 · f7232d2
2 parents 6555d9d + 3a2cb28
commit f7232d2
Show file tree

Hide file tree

Showing 23 changed files with 1,097 additions and 664 deletions.
diff --git a/client/apps/edit/components/content/sections/image_collection/index.coffee b/client/apps/edit/components/content/sections/image_collection/index.coffee
@@ -12,7 +12,7 @@ DragContainer = React.createFactory require '../../../../../../components/drag_d
 { div, section, ul, li } = React.DOM
 
 components = require('@artsy/reaction-force/dist/components/publishing/index').default
-ImageSetPreview = React.createFactory components.ImagesetPreviewClassic
+ImageSetPreview = React.createFactory components.ImageSetPreviewClassic
 
 module.exports = React.createClass
   displayName: 'SectionImageCollection'

diff --git a/client/apps/edit/components/content2/section_container/index.coffee b/client/apps/edit/components/content2/section_container/index.coffee
@@ -6,14 +6,13 @@
 
 React = require 'react'
 _ = require 'underscore'
-SectionText = React.createFactory require '../sections/text/index.coffee'
-SectionVideo = React.createFactory require '../../content/sections/video/index.coffee'
-SectionSlideshow = React.createFactory require '../../content/sections/slideshow/index.coffee'
-SectionEmbed = React.createFactory require '../../content/sections/embed/index.coffee'
-SectionFullscreen = React.createFactory require '../../content/sections/fullscreen/index.coffee'
-SectionCallout = React.createFactory require '../../content/sections/callout/index.coffee'
-SectionImageCollection = React.createFactory require '../sections/image_collection/index.coffee'
-SectionImage = React.createFactory require '../../content/sections/image/index.coffee'
+Text = React.createFactory require '../sections/text/index.coffee'
+Video = React.createFactory require '../../content/sections/video/index.coffee'
+Slideshow = React.createFactory require '../../content/sections/slideshow/index.coffee'
+Embed = React.createFactory require '../../content/sections/embed/index.coffee'
+Fullscreen = React.createFactory require '../../content/sections/fullscreen/index.coffee'
+ImageCollection = React.createFactory require '../sections/image_collection/index.coffee'
+Image = React.createFactory require '../../content/sections/image/index.coffee'
 { div, nav, button } = React.DOM
 icons = -> require('../../icons.jade') arguments...
 
@@ -64,15 +63,14 @@ module.exports = React.createClass
             dangerouslySetInnerHTML: __html: $(icons()).filter('.remove').html()
           }
       (switch @props.section.get('type')
-        when 'text' then SectionText
-        when 'video' then SectionVideo
-        when 'slideshow' then SectionSlideshow
-        when 'embed' then SectionEmbed
-        when 'fullscreen' then SectionFullscreen
-        when 'callout' then SectionCallout
-        when 'image_set' then SectionImageCollection
-        when 'image_collection' then SectionImageCollection
-        when 'image' then SectionImage
+        when 'text' then Text
+        when 'video' then Video
+        when 'slideshow' then Slideshow
+        when 'embed' then Embed
+        when 'fullscreen' then Fullscreen
+        when 'image_set' then ImageCollection
+        when 'image_collection' then ImageCollection
+        when 'image' then Image
       )(
         section: @props.section
         sections: @props.sections

diff --git a/client/apps/edit/components/content2/section_container/test/index.coffee b/client/apps/edit/components/content2/section_container/test/index.coffee
@@ -38,7 +38,7 @@ describe 'SectionContainer', ->
         dragOver: 4
         article: new Article
       }
-      @SectionContainer.__set__ 'SectionText', ->
+      @SectionContainer.__set__ 'Text', ->
       @component = ReactDOM.render React.createElement(@SectionContainer, @props
       ), $("<div></div>")[0], => setTimeout =>
         @component.setState = sinon.stub()

diff --git a/client/apps/edit/components/content2/section_list/index.coffee b/client/apps/edit/components/content2/section_list/index.coffee
@@ -7,7 +7,7 @@ React = require 'react'
 SectionContainer = React.createFactory require '../section_container/index.coffee'
 SectionTool = React.createFactory require '../section_tool/index.coffee'
 DragContainer = React.createFactory require '../../../../../components/drag_drop/index.coffee'
-RichTextParagraph = React.createFactory require '../../../../../components/rich_text/components/input_paragraph.coffee'
+Paragraph = React.createFactory require '../../../../../components/rich_text2/components/paragraph.coffee'
 { div } = React.DOM
 
 module.exports = React.createClass
@@ -39,7 +39,7 @@ module.exports = React.createClass
     if @state.editingIndex or @state.editingIndex is 0 then false else true
 
   setPostscript: (html) ->
-    html = null if html is '<p></p>'
+    html = null unless html.length
     @props.article.set('postscript', html)
     @props.saveArticle()
 
@@ -50,7 +50,7 @@ module.exports = React.createClass
       ref: 'sections'
     },
       SectionTool { sections: @props.sections, index: -1, key: 1 }
-      if @props.sections.length > 0
+      if @props.sections.length
         DragContainer {
           items: @props.sections.models
           onDragEnd: @onDragEnd
@@ -59,27 +59,32 @@ module.exports = React.createClass
           article: @props.article
         },
           @props.sections.map (section, i) =>
-            [
-              SectionContainer {
-                sections: @props.sections
-                section: section
-                index: i
-                editing: @state.editingIndex is i
-                ref: 'section' + i
-                key: section.cid
-                channel: @props.channel
-                onSetEditing: @onSetEditing
-                article: @props.article
-              }
-              SectionTool { sections: @props.sections, index: i, key: i }
-            ]
+             unless section.get('type') is 'callout'
+              [
+                SectionContainer {
+                  sections: @props.sections
+                  section: section
+                  index: i
+                  editing: @state.editingIndex is i
+                  ref: 'section' + i
+                  key: section.cid
+                  channel: @props.channel
+                  onSetEditing: @onSetEditing
+                  article: @props.article
+                }
+                SectionTool { sections: @props.sections, index: i, key: i }
+              ]
       if @props.channel.isEditorial()
         div {
           className: 'edit-sections__postscript'
           'data-layout': 'column_width'
         },
-          RichTextParagraph {
-            text: @props.article.get('postscript') or ''
+          Paragraph {
+            html: @props.article.get('postscript') or ''
             onChange: @setPostscript
             placeholder: 'Postscript (optional)'
+            type: 'postscript'
+            linked: true
+            layout: @props.article.get('layout')
           }
+      # TODO - Author Preview
diff --git a/client/apps/edit/components/content2/section_list/index.styl b/client/apps/edit/components/content2/section_list/index.styl
@@ -6,15 +6,13 @@
 .edit-sections__postscript
   max-width standard-body-w-margin
   margin 0 auto
-  padding 60px 20px 20px
-  font-style italic
-  Garamond s23
-  p
-    margin-top 1em
-    margin-bottom 1em
+  padding 20px
   .public-DraftEditorPlaceholder-root
     position absolute
     color gray-dark-color
+    top 27px
+    Garamond s23
+    font-style italic
 
 .standard
   max-width standard-max-width

diff --git a/client/apps/edit/components/content2/section_list/test/index.coffee b/client/apps/edit/components/content2/section_list/test/index.coffee
@@ -20,18 +20,18 @@ describe 'SectionList', ->
       global.HTMLElement = () => {}
       @SectionList = benv.require resolve(__dirname, '../index')
       DragContainer = benv.require resolve(__dirname, '../../../../../../components/drag_drop/index')
-      RichTextParagraph = benv.require resolve(
-        __dirname, '../../../../../../components/rich_text/components/input_paragraph.coffee'
+      Paragraph = benv.require resolve(
+        __dirname, '../../../../../../components/rich_text2/components/paragraph.coffee'
       )
       @SectionList.__set__ 'SectionTool', @SectionTool = sinon.stub()
       @SectionContainer = benv.requireWithJadeify(
         resolve(__dirname, '../../section_container/index'), ['icons']
       )
-      @SectionContainer.__set__ 'SectionText', text = sinon.stub()
-      @SectionContainer.__set__ 'SectionImageCollection', image_collection = sinon.stub()
+      @SectionContainer.__set__ 'Text', text = sinon.stub()
+      @SectionContainer.__set__ 'ImageCollection', image_collection = sinon.stub()
       @SectionList.__set__ 'SectionContainer', React.createFactory @SectionContainer
       @SectionList.__set__ 'DragContainer', React.createFactory DragContainer
-      @SectionList.__set__ 'RichTextParagraph', React.createFactory RichTextParagraph
+      @SectionList.__set__ 'Paragraph', React.createFactory Paragraph
       @props = {
         article: new Backbone.Model {layout: 'feature'}
         sections: @sections = new Sections [

diff --git a/client/apps/edit/components/content2/sections/header/index.coffee b/client/apps/edit/components/content2/sections/header/index.coffee
@@ -1,9 +1,8 @@
 React = require 'react'
 moment = require 'moment'
-RichTextParagraph = React.createFactory require '../../../../../../components/rich_text2/components/input_paragraph.coffee'
+Paragraph = React.createFactory require '../../../../../../components/rich_text2/components/paragraph.coffee'
 { div, p, textarea } = React.DOM
 
-
 module.exports = React.createClass
   displayName: 'SectionHeader'
 
@@ -23,10 +22,14 @@ module.exports = React.createClass
     div {
       className: 'edit-header__lead-paragraph'
     },
-      RichTextParagraph {
-        text: @props.article.get('lead_paragraph')
+      Paragraph {
+        html: @props.article.get('lead_paragraph')
         onChange: @setLeadParagraph
-        placeholder: 'Lead paragraph (optional)'
+        placeholder: 'Lead Paragraph (optional)'
+        type: 'lead_paragraph'
+        linked: false
+        linebreaks: false
+        layout: @props.article.get('layout')
       }
 
   render: ->
@@ -48,7 +51,7 @@ module.exports = React.createClass
           onKeyUp: @setTitle
           ref: 'title'
         }
-        unless @props.article.get('title')?.length > 0
+        unless @props.article.get('title')?.length
           div { className: 'edit-required' }
 
       if layout is 'classic'
@@ -60,5 +63,5 @@ module.exports = React.createClass
             @props.article.get('author').name
         p { className: 'date' }, @props.article.getPublishDate()
 
-      if layout is 'standard' and @props.article.get('lead_paragraph').length
+      if layout is 'standard' and @props.article.get('lead_paragraph')?.length
         @renderLeadParagraph()
diff --git a/client/apps/edit/components/content2/sections/header/index.styl b/client/apps/edit/components/content2/sections/header/index.styl
@@ -2,6 +2,7 @@
   padding-top 60px
   .public-DraftEditorPlaceholder-root
     position absolute
+    top 1em
     color gray-dark-color
   &__title
     position relative
@@ -82,5 +83,4 @@
       garamond l-body
       max-width classic-body-width
       margin 20px auto 0 auto
-      .public-DraftEditorPlaceholder-root
-        color gray-dark-color
+
diff --git a/client/apps/edit/components/content2/sections/header/test/index.coffee b/client/apps/edit/components/content2/sections/header/test/index.coffee
@@ -19,8 +19,8 @@ describe 'SectionHeader: Classic', ->
       benv.expose $: benv.require 'jquery'
       global.HTMLElement = () => {}
       SectionHeader = benv.require resolve(__dirname, '../index.coffee')
-      RichTextParagraph = benv.require resolve(__dirname, '../../../../../../../components/rich_text2/components/input_paragraph.coffee')
-      SectionHeader.__set__ 'RichTextParagraph', React.createFactory RichTextParagraph
+      Paragraph = benv.require resolve(__dirname, '../../../../../../../components/rich_text2/components/paragraph.coffee')
+      SectionHeader.__set__ 'Paragraph', React.createFactory Paragraph
       @article = new Article _.extend fixtures().articles,
         layout: 'classic'
         author:
@@ -69,7 +69,7 @@ describe 'SectionHeader: Classic', ->
   describe 'Lead Paragraph', ->
 
     it 'renders a lead paragraph component', ->
-      $(ReactDOM.findDOMNode(@component)).html().should.containEql '<div class="rich-text--paragraph__input">'
+      $(ReactDOM.findDOMNode(@component)).html().should.containEql '<div class="rich-text--paragraph">'
 
     it 'Can display a saved lead paragraph', ->
       $(ReactDOM.findDOMNode(@component)).html().should.containEql 'Just before the lines start forming...'
@@ -112,8 +112,8 @@ describe 'SectionHeader: Standard', ->
       benv.expose $: benv.require 'jquery'
       global.HTMLElement = () => {}
       SectionHeader = benv.require resolve(__dirname, '../index.coffee')
-      RichTextParagraph = benv.require resolve(__dirname, '../../../../../../../components/rich_text2/components/input_paragraph.coffee')
-      SectionHeader.__set__ 'RichTextParagraph', React.createFactory RichTextParagraph
+      Paragraph = benv.require resolve(__dirname, '../../../../../../../components/rich_text2/components/paragraph.coffee')
+      SectionHeader.__set__ 'Paragraph', React.createFactory Paragraph
       @article = new Article _.extend fixtures().articles,
         layout: 'standard'
         author:
@@ -143,15 +143,15 @@ describe 'SectionHeader: Standard', ->
   describe 'Lead Paragraph', ->
 
     it 'renders a lead paragraph component if field has text', ->
-      $(ReactDOM.findDOMNode(@component)).html().should.containEql '<div class="rich-text--paragraph__input">'
+      $(ReactDOM.findDOMNode(@component)).html().should.containEql '<div class="rich-text--paragraph">'
+
+    it 'Can display a saved lead paragraph', ->
+      $(ReactDOM.findDOMNode(@component)).text().should.containEql 'Just before the lines start forming...'
 
     it 'does not render lead paragraph component if field is empty', ->
       @component.props.article.set('lead_paragraph', '')
       @component.forceUpdate()
-      $(ReactDOM.findDOMNode(@component)).html().should.not.containEql '<div class="rich-text--paragraph__input">'
-
-    it 'Can display a saved lead paragraph', ->
-      $(ReactDOM.findDOMNode(@component)).html().should.containEql 'Just before the lines start forming...'
+      $(ReactDOM.findDOMNode(@component)).html().should.not.containEql '<div class="rich-text--paragraph">'
 
     it '#setLeadParagraph sets and saves article lead paragraph on change', ->
       @component.setLeadParagraph('<p>A new paragraph</p>')

diff --git a/client/apps/edit/components/content2/sections/image_collection/index.coffee b/client/apps/edit/components/content2/sections/image_collection/index.coffee
@@ -10,9 +10,8 @@ Controls = React.createFactory require './components/controls.coffee'
 DragContainer = React.createFactory require '../../../../../../components/drag_drop/index.coffee'
 { fillWidth }  = require '../../../../../../components/fill_width/index.coffee'
 { div, section, ul, li } = React.DOM
-
 components = require('@artsy/reaction-force/dist/components/publishing/index').default
-ImagesetPreviewClassic = React.createFactory components.ImagesetPreviewClassic
+ImageSetPreviewClassic = React.createFactory components.ImageSetPreviewClassic
 
 module.exports = React.createClass
   displayName: 'SectionImageCollection'
@@ -115,7 +114,7 @@ module.exports = React.createClass
       },
         if hasImages
           if !@props.editing and @props.section.get('type') is 'image_set'
-            ImagesetPreviewClassic {
+            ImageSetPreviewClassic {
               images: images
             }
           else