Inline and Modal background image layouts #326
Conversation
Codecov Report
@@ Coverage Diff @@
## develop #326 +/- ##
===========================================
+ Coverage 89.6% 89.66% +0.06%
===========================================
Files 109 109
Lines 2087 2100 +13
Branches 638 641 +3
===========================================
+ Hits 1870 1883 +13
Misses 217 217
Continue to review full report at Codecov.
|
| position: '.inline-module', | ||
| headline: 'Welcome!', | ||
| msg: 'Please sign up for our newsletter for more updates.', | ||
| variant: 4, |
There was a problem hiding this comment.
Might be something we need to discuss in person, but what was the deciding factor on making this a separate variant? Given the existing patterns with variants, it does sort of make sense. But in general I think we want to avoid using variants in the future as they are kind of a bad API design, and I think we'd like to support background images on other variant modals such as content recommendations.
| <pre data-src="../../examples/src/layouts/inline/image.js"></pre> | ||
|
|
||
| ## background image |
There was a problem hiding this comment.
This should be backgroundImage the titles are formatted as they appear in the config.
| Define the background image and position you would like to use for the module. | ||
|
|
||
| **Note:** This setting is only valid for modules with a variant value of 2. |
There was a problem hiding this comment.
value of 4 (although I vote that this is subject to change).
| @@ -56,3 +60,57 @@ Define the featured image you would like to use for the module. | |||
|  | |||
|
|
|||
| <pre data-src="../../examples/src/layouts/modal/image.js"></pre> | |||
|
|
|||
| ## background image | |||
There was a problem hiding this comment.
same on title formatting
| @@ -27,6 +27,10 @@ Variant determines any extra content (dictated by extra keys in the config) that | |||
| <td>3</td> | |||
| <td>module includes a <a href="../../content_recommend">content recommendation</a></td> | |||
| </tr> | |||
| <tr> | |||
| <td>4</td> | |||
| <td>module icludes a background image</td> | |||
| var modalWidget = $('#' + modal.id), | ||
| inlineWidget = $('#' + inline.id); | ||
| expect(modalWidget.find('.pf-widget-background-image')).toBeDefined(); | ||
| expect(inlineWidget.find('.pf-widget-background-image')).toBeDefined(); |
There was a problem hiding this comment.
I would go ahead and check the inline styling here too.
| @@ -397,6 +397,70 @@ describe('Widgets', function () { | |||
| expect(inlineWidget.find('.pf-widget-content').find('img').html()).toBeDefined(); | |||
| expect(modalWidget.find('.pf-widget-text').find('img').html()).toBeUndefined(); | |||
| }); | |||
| //variant 4 | |||
| it('should append div with pf-widget-background-image for modal and inline layout', function() { | |||
There was a problem hiding this comment.
| it('should append div with pf-widget-background-image for modal and inline layout', function() { | |
| it('should support backgroundImage src', function() { |
| expect(inlineWidget.find('.pf-widget-background-image')).toBeDefined(); | ||
| }); | ||
|
|
||
| it('should append position class to pf-widget-background-image and pf-widget-text for modal and inline layouts', function() { |
There was a problem hiding this comment.
| it('should append position class to pf-widget-background-image and pf-widget-text for modal and inline layouts', function() { | |
| it('should support backgroundImage position', function() { |
There was a problem hiding this comment.
My general thought is, these test names don't need to be super descriptive. Just defining what feature it is attempting to test is enough. Also using the config setting name is more informative to other devs than the class names.
Closes #304
Adds a new layout variant with a background image for modal and inline layouts. Includes option for background to cover the entire widget or positioned to cover the top, bottom, right or left half of the widget.
Added tests and updated documentation.
Note: I'm not sure about the giant line change on theRanpathfora.jsfile. I'm assuming a build command I ran modified it. What's the best way to revert that change?npm run prod.Modal
Inline
